【update 首页】首页样式及高级搜索

src/views/dashboard/modules/ToDoTaskCard.vue

@@ -9,7 +9,10 @@
         <div class="content-item" v-for="item in dataSource" :key="item.id" @click="handleToDetail(item)">
           <a-tooltip placement="top">
             <template slot="title">{{item.prcName}}</template>
-            <p>{{ item.prcName }}</p>
+            <div class="content-item-img">
+              <img :src="require('@/assets/image/icon/todo.png')" alt="todo">
+            </div>
+            <p class="content-item-text">{{ item.prcName }}</p>
           </a-tooltip>
         </div>
       </div>
@@ -31,7 +34,7 @@ export default {
     }
   },
   created () {
-    this.getTodoTask()
+    // this.getTodoTask()
   },
   methods: {
     // 获取待办任务
@@ -166,49 +169,73 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@size: 48px;
 .content-wrapper {
   margin-top: 10px;
-  height: calc(100vh - 346px - 200px);
+  height: calc(100vh - 700px);
   overflow-y: auto;
 
   .content-item {
     cursor: pointer;
-    word-break: break-all;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     font-family: PingFang SC, PingFang SC, sans-serif;
     font-weight: 400;
     color: #1D2129;
     position: relative;
     font-size: 16px;
-    line-height: 48px;
-    height: 48px;
-    border-bottom: 1px solid #E5E6EB;
-    text-indent: 18px;
-  }
-  .content-item::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    display: block;
-    content: '';
-    background-color: #86909C;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
+    line-height: @size;
+    height: @size;
+    border-radius: 10px;
+    border: 1px solid #EAEAEA;
+    margin-bottom: 8px;
+    padding-left: @size;
+
+    .content-item-img {
+      border: 1px solid #EAEAEA;
+      border-radius: 10px;
+      position: absolute;
+      width: @size;
+      height: @size;
+      left: 0;
+      top: 0;
+      font-size: 0;
+      img {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 50%;
+        height: 50%;
+      }
+    }
+    .content-item-text {
+      margin: 0 12px;
+      word-break: break-all;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 @media screen and (max-width: 1366px) {
- .content-wrapper {
-    height: calc(100vh - 306px - 200px);
+  @size: 40px;
+  .content-wrapper {
+    height: calc(100vh - 506px);
 
-   .content-item {
-     line-height: 40px;
-     height: 40px;
-     font-size: 14px;
-   }
+    .content-item {
+      font-size: 14px;
+      line-height: @size;
+      height: @size;
+      padding-left: @size;
+
+      .content-item-img {
+        width: @size;
+        height: @size;
+      }
+
+      .content-item-text {
+        margin: 0 12px;
+      }
+    }
   }
 }
 </style>