添加提示

src/renderer/views/list/components/ListUpdateModal.vue

@@ -27,6 +27,9 @@
       <p v-text="$t('no_item')"></p>
     </div>
   </main>
+  <div :class="$style.footer">
+    <div :class="$style.tips">{{$t('list_update_modal__tips')}}</div>
+  </div>
 </material-modal>
 </template>
 
@@ -73,6 +76,8 @@ export default {
 <style lang="less" module>
 @import '@renderer/assets/styles/layout.less';
 
+@width: 460px;
+
 .header {
   flex: none;
   padding: 15px;
@@ -83,7 +88,7 @@ export default {
 }
 .main {
   min-height: 200px;
-  width: 460px;
+  width: @width;
 }
 
 .list {
@@ -93,7 +98,7 @@ export default {
   position: relative;
   .listItem {
     position: relative;
-    padding: 15px 10px;
+    padding: 15px 10px 15px 15px;
     transition: .3s ease;
     transition-property: background-color, opacity;
     line-height: 1.3;
@@ -126,6 +131,7 @@ export default {
 
 .text {
   flex: auto;
+  margin-bottom: 2px;
   .mixin-ellipsis-1;
 }
 .checkbox {
@@ -179,6 +185,15 @@ export default {
   }
 }
 
+.footer {
+  width: @width;
+}
+.tips {
+  padding: 8px 15px;
+  font-size: 13px;
+  line-height: 1.25;
+  color: @color-theme_2-font;
+}
 
 .no-item {
   position: relative;
@@ -210,6 +225,9 @@ each(@themes, {
         background-color: ~'@{color-@{value}-theme_2-active}';
       }
     }
+    .note {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
     .no-item {
       p {
         color: ~'@{color-@{value}-theme_2-font-label}';

src/renderer/views/list/components/MyLists.vue

@@ -2,7 +2,7 @@
 <div :class="$style.lists" ref="dom_lists">
   <div :class="$style.listHeader">
     <h2 :class="$style.listsTitle">{{$t('my_list')}}</h2>
-    <div>
+    <div :class="$style.headerBtns">
       <button :class="$style.listsAdd" @click="handleShowNewList" :aria-label="$t('lists__new_list_btn')">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="70%" viewBox="0 0 24 24" space="preserve">
           <use xlink:href="#icon-list-add"></use>
@@ -499,7 +499,6 @@ export default {
   display: flex;
   flex-flow: row nowrap;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  justify-content: space-between;
   &:hover {
     .listsAdd {
       opacity: 1;
@@ -507,9 +506,13 @@ export default {
   }
 }
 .listsTitle {
+  flex: auto;
   font-size: 12px;
   line-height: 38px;
   padding: 0 10px;
+  .mixin-ellipsis-1;
+}
+.headerBtns {
   flex: none;
 }
 .listsAdd {