diff --git a/public/scripts/controllers/note-controller.js b/public/scripts/controllers/note-controller.js
index 4e4be31..11a978f 100644
--- a/public/scripts/controllers/note-controller.js
+++ b/public/scripts/controllers/note-controller.js
@@ -1,4 +1,4 @@
-app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function($scope, $state, $stateParams, $filter, $window, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
+app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function ($scope, $state, $stateParams, $filter, $window, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
     console.log("Hello noteCtr...", $stateParams);
 
     const perPageItems = 35;
@@ -37,7 +37,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
             console.log('autoLogin err', err)
         });
 
-    $scope.changeCurrentPage = function(currentPage) {
+    $scope.changeCurrentPage = function (currentPage) {
         currentPage = parseInt(currentPage) || 0;
         console.log('currentPage = ', currentPage);
         if (currentPage <= $scope.totalPages && currentPage >= 1) {
@@ -50,8 +50,8 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
     }
 
     // 快捷键a增加书签
-    $document.bind("keydown", function(event) {
-        $scope.$apply(function() {
+    $document.bind("keydown", function (event) {
+        $scope.$apply(function () {
             // a按键，显示
             var key = event.key.toUpperCase();
             if (key == 'A' && dataService.keyShortcuts() && (!$scope.add)) {
@@ -60,12 +60,12 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         })
     });
 
-    $scope.showAddNote = function() {
+    $scope.showAddNote = function () {
         $scope.add = (!$scope.add);
         $scope.edit = false;
         $scope.content = '';
         if ($scope.add) {
-            $timeout(function() {
+            $timeout(function () {
                 $("#noteedit")[0].focus();
             });
         }
@@ -82,7 +82,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         }
     }
 
-    $scope.addNote = function(close) {
+    $scope.addNote = function (close) {
         if ($scope.content == '') {
             toastr.error('不允许备忘录内容为空！', "提示");
             return;
@@ -130,11 +130,12 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
             });
     }
 
-    $scope.copy = function(content) {
+    $scope.copy = function (content, $event) {
         dataService.clipboard(content);
+        $event && $event.stopPropagation();
     }
 
-    $scope.delNote = function(id, content) {
+    $scope.delNote = function (id, content) {
         $scope.currentNoteId = id;
         $scope.content = content;
         var width = content.length >= 500 ? "50%" : "30%";
@@ -146,7 +147,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         });
     }
 
-    $scope.confirmDelNote = function() {
+    $scope.confirmDelNote = function () {
         if ($scope.currentNoteId) {
             var params = {
                 id: $scope.currentNoteId
@@ -158,7 +159,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
                         $("#" + $scope.currentNoteId).transition({
                             animation: dataService.animation(),
                             duration: 500,
-                            onComplete: function() {
+                            onComplete: function () {
                                 $("#" + $scope.currentNoteId).remove();
                             }
                         });
@@ -176,7 +177,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         }
     }
 
-    $scope.editNote = function(id, content, tagId) {
+    $scope.editNote = function (id, content, tagId) {
         $scope.add = true;
         $scope.edit = true;
         $scope.content = content;
@@ -185,7 +186,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         updateSelectTag(tagId);
     }
 
-    $scope.updateNote = function() {
+    $scope.updateNote = function () {
         var tagName = '';
         $scope.tags.forEach((tag) => {
             if ($scope.currentTagId === tag.id) {
@@ -227,7 +228,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
             });
     }
 
-    $scope.detailNote = function(content) {
+    $scope.detailNote = function (content) {
         $scope.content = content;
         var width = content.length >= 500 ? "50%" : "30%";
         dialog = ngDialog.open({
@@ -238,21 +239,21 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         });
     }
 
-    $scope.closeNote = function() {
+    $scope.closeNote = function () {
         $('.js-note').transition({
             animation: dataService.animation(),
             duration: '500ms',
-            onComplete: function() {
+            onComplete: function () {
                 $(".js-note").remove();
             }
         });
     }
 
-    $scope.setHoverNote = function(note) {
+    $scope.setHoverNote = function (note) {
         $scope.hoverNote = note;
     }
 
-    $scope.clickTag = function(id) {
+    $scope.clickTag = function (id) {
         $scope.currentTagId = id;
         $scope.totalItems = 0;
         updateSelectTag(id);
@@ -264,6 +265,21 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         }
     }
 
+    $scope.noteClick = function (note, flag, $event) {
+        if (!note.detail || flag) {
+            var detail = note.detail;
+            $scope.notes.forEach((note) => {
+                note.detail = false;
+                $("#" + note.id).css("background", "none");
+            })
+            note.detail = !detail;
+            $("#" + note.id).css("background", note.detail ? "#f8f8f8" : "none");
+        }
+        if (flag) {
+            $event && $event.stopPropagation();
+        }
+    }
+
     function updateSelectTag(tagId) {
         $scope.tags.forEach((tag) => {
             tag.clicked = false;
@@ -275,8 +291,8 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
     }
 
     // 在输入文字的时候也会触发，所以不要用Ctrl,Shift之类的按键
-    $document.bind("keydown", function(event) {
-        $scope.$apply(function() {
+    $document.bind("keydown", function (event) {
+        $scope.$apply(function () {
             var key = event.key.toUpperCase();
             if ($scope.hoverNote && dataService.keyShortcuts()) {
                 if (key == 'E') {
@@ -306,9 +322,16 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
         bookmarkService.getNotes(params)
             .then((data) => {
                 $scope.notes = data.notes;
+                $scope.notes.forEach((note) => {
+                    note.brief = note.content;
+                    while (note.brief.indexOf("\n") > 0) {
+                        note.brief = note.brief.replace(/\n/g, "");
+                    }
+                    note.brief = "       " + note.brief.substring(0, 200) + (note.content.length > 200 ? " ......" : "");
+                })
                 $scope.totalPages = Math.ceil(data.totalItems / perPageItems);
                 $scope.totalItems = data.totalItems;
-                $timeout(function() {
+                $timeout(function () {
                     timeagoInstance.cancel();
                     timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
                     // 如果需要增加书签
diff --git a/public/views/note.html b/public/views/note.html
index cebfeed..c5b3ae2 100644
--- a/public/views/note.html
+++ b/public/views/note.html
@@ -1,22 +1,29 @@
-<div class="ui segment js-note-card">
-    <div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id)">{{ tag.name }} ({{ tag.ncnt || 0 }})</div>
-    <div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。"><i class="plus icon" style="margin-right:0px;"></i></div>
-    <div class="ui form" ng-show="add">
-        <div class="required field">
-            <label>内容</label>
-            <textarea rows="12" placeholder="" ng-model="content" id="noteedit"></textarea>
+<div class="ui segment js-note-card" style="padding:14px 0px 0px 0px;">
+    <div class="ui container" style="padding-left:14px">
+        <div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags"
+            ng-click="clickTag(tag.id)">{{ tag.name }} ({{ tag.ncnt || 0 }})</div>
+        <div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。">
+            <i class="plus icon" style="margin-right:0px;"></i>
         </div>
-        <div class="field">
-            <div class="actions">
-                <div class="ui cancel button" ng-click="add=false;">取消</div>
-                <div class="ui green button" ng-click="addNote(false)" ng-show="!edit">提交关闭</div>
-                <div class="ui green button" ng-click="addNote(true)" ng-show="!edit">提交继续</div>
-                <div class="ui green button" ng-click="updateNote()" ng-show="edit">更新</div>
+    </div>
+    <div class="ui container" style="padding-left:14px;padding-bottom:14px">
+        <div class="ui form" ng-show="add">
+            <div class="required field">
+                <label>内容</label>
+                <textarea rows="12" placeholder="" ng-model="content" id="noteedit"></textarea>
+            </div>
+            <div class="field">
+                <div class="actions">
+                    <div class="ui cancel button" ng-click="add=false;">取消</div>
+                    <div class="ui green button" ng-click="addNote(false)" ng-show="!edit">提交关闭</div>
+                    <div class="ui green button" ng-click="addNote(true)" ng-show="!edit">提交继续</div>
+                    <div class="ui green button" ng-click="updateNote()" ng-show="edit">更新</div>
+                </div>
             </div>
         </div>
     </div>
-    <div class="ui divider" ng-show="notes.length > 0"></div>
-    <div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0">
+    <div class="ui divider" ng-show="notes.length > 0" style="margin:0px;"></div>
+    <div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0" style="margin-left:14px;margin-right:14px">
         <i class="close icon" ng-click="closeNote()"></i>
         <div class="content">
             <div class="header">系统提示！
@@ -26,35 +33,33 @@
             </ul>
         </div>
     </div>
-    <div class="ui five stackable cards">
-        <div class="card" ng-repeat="note in notes" id="{{note.id}}" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)">
-            <div class="content" style="height:200px;margin-bottom:8px;" ng-dblclick="detailNote(note.content)">
-                <div class="description" style="word-break:break-all;max-width:175px;height:184px;line-height:21px; word-wrap:break-word;text-overflow:ellipsis;overflow:hidden;">
-                    <pre class="note-content" style="margin-top:0px;">{{ note.content }}</pre>
+    <div class="ui vertical segment" ng-repeat="note in notes" ng-click="noteClick(note)" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)" id="{{note.id}}" style="margin:0px;padding-top:10px;padding-bottom: 10px;">
+        <pre class="note-content" title="单击查看详情，C复制，D删除，E编辑" style="margin:0px;padding-left:14px;padding-right:14px" ng-if="!note.detail">{{ note.brief }}</pre>
+        <pre class="note-content" title="双击复制" ng-dblclick="copy(note.content)" style="margin:0px; font-size:16px;padding-left:14px;padding-right:14px" ng-if="note.detail">{{ note.content }}</pre>
+        <div class="ui right aligned grid" ng-show="note.detail">
+            <div class="sixteen wide column" style="margin:0px 20px 0px 0px;padding:20px 0px 0px 0px;">
+                <div class="extra content" ng-show="true" ng-mouseleave="note.edit=false;" style="height:50px;">
+                    <div class="ui mini label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName || "未分类" }}</div>
+                    <span style="margin:0 8px;">
+                        <span title="添加于{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
+                        <span style="margin-left:-3px;">添加</span>
+                    </span>
+                    <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)"
+                        title="删除备忘">
+                    <label for="noteedit">
+                        <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tag_id)"
+                            title="编辑备忘">
+                    </label>
+                    <img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/copy.png"
+                        id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘">
+                    <i class="chevron up icon" title="收起详情" ng-click="noteClick(note, true, $event)"></i>
                 </div>
             </div>
-            <div class="extra content" ng-show="!note.edit" style="height:50px;padding-right:2px;padding-left:8px;">
-                <span class="left floated like" style="margin-top:6px;">
-                    <i class="add to calendar icon"></i>
-                    <span title="{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
-                </span>
-                <div class="ui label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName }}</div>
-                <i class="ellipsis horizontal icon right floated" style="margin-top:8px;" ng-mouseover="note.edit=true;"></i>
-            </div>
-            <div class="extra content" ng-show="note.edit" ng-mouseleave="note.edit=false;" style="height:50px;">
-                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)" title="删除备忘">
-                <label for="noteedit">
-                    <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tag_id)" title="编辑备忘">
-                </label>
-                <img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘">
-                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/detail.png" ng-click="detailNote(note.content)" title="备忘详情">
-            </div>
         </div>
     </div>
-    <div class="ui divider" ng-show="notes.length > 0"></div>
     <div style="height:20px;" ng-show="notes.length === 0"></div>
-    <div class="ui grid" ng-show="totalItems>0">
-        <div class="eight wide column" style="margin-top:10px;">
+    <div class="ui grid" ng-show="totalItems>0" style="margin:0px;padding:0px 14px">
+        <div class="eight wide column" style="padding-top:26px;">
             <span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)，</span>共找到备忘一共约{{totalItems}}个
         </div>
         <div class="eight wide column">
@@ -63,4 +68,4 @@
     </div>
 </div>
 <div class="ui massive text centered inline loader js-hot-loader" ng-class="{active:loadBusy, disabled:!loadBusy}">
-    正在加载中...</div>
+    正在加载中...</div>
\ No newline at end of file