UI调整

package.json

@@ -24,7 +24,7 @@
     "debug": "~2.2.0",
     "docco-husky": "*",
     "ejs": "^2.5.3",
-    "element-ui": "^2.3.9",
+    "element-ui": "^2.11.0",
     "express": "~4.14.0",
     "express-fileupload": "^0.4.0",
     "express-jwt": "^5.1.0",
@@ -135,4 +135,4 @@
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"
   }
-}
+}

src/views/myHistoryTest/myHistoryTest.html

@@ -19,11 +19,8 @@
         <el-button type="primary">更新时间 <i class="el-icon-caret-bottom icon-right"></i>
         </el-button>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>黄金糕黄金糕黄金糕</el-dropdown-item>
-          <el-dropdown-item>狮子头</el-dropdown-item>
-          <el-dropdown-item>螺蛳粉</el-dropdown-item>
-          <el-dropdown-item>双皮奶</el-dropdown-item>
-          <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          <el-dropdown-item>按创建时间排序</el-dropdown-item>
+          <el-dropdown-item>按更新时间排序</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -33,20 +30,24 @@
   </div>
   <!-- 列表 -->
   <div class="test-list">
-    <div class="item" v-for="(item,index) in lists">
+    <div class="item" v-for="(item,index) in lists" :key="item.index" :class="{ itemCopy: isCopy && index == 0 }">
       <div class="tools">
-        <el-button type="success" icon="el-icon-check" circle></el-button>
-        <el-button type="info" icon="el-icon-message" circle></el-button>
-        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
-        <el-button type="danger" icon="el-icon-delete" circle style="margin-left: 30px;"></el-button>
+        <el-button icon="el-icon-delete" circle @click="deleteTest(index)"></el-button>
+        <el-button icon="el-icon-document-copy" circle @click="copyTest"></el-button>
+        <el-button icon="el-icon-share" circle></el-button>
+        <el-button icon="el-icon-edit" circle style="margin-left: 30px;"></el-button>
       </div>
-      <img class="item-img" src="" alt="">
-      <div class="title">定制你的家具香气</div>
+      <img class="item-img" mode="" src="https://dm.static.elab-plus.com/diaoyanbao/coverImg/GT95_preview.jpg" alt="">
+      <div class="title">定制你的家具香气{{item.index}}</div>
       <div class="desc">无锡WIII</div>
       <div class="bottom">
         <span>共21题</span>
         <span>1天前</span>
       </div>
     </div>
+    <div class="item add">
+      <i class="el-icon-circle-plus add-icon"></i>
+      <span>创建测试</span>
+    </div>
   </div>
 </div>

src/views/myHistoryTest/myHistoryTest.js

@@ -5,6 +5,7 @@ export default {
   },
   data() {
     return {
+      isCopy: false,
       cities: [{
         value: 'Beijing',
         label: '北京'
@@ -27,5 +28,49 @@ export default {
       value: '',
       lists: [{ index: 0 }, { index: 1 }, { index: 2 }, { index: 3 }, { index: 4 }, { index: 5 }, { index: 6 }, { index: 7 }, { index: 8 }, { index: 9 }, { index: 10 }, { index: 11 }, { index: 12 }, { index: 13 }, { index: 14 }, { index: 15 }, { index: 16 }, { index: 17 }, { index: 18 }, { index: 19 }]
     }
-  }
+  },
+  methods: {
+    deleteTest(index) {
+      const h = this.$createElement;
+      this.$msgbox({
+        title: '删除',
+        message: '删除后不可撤回，确定删除此套测题？',
+        showCancelButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            instance.confirmButtonText = '执行中...';
+            setTimeout(() => {
+              done();
+              setTimeout(() => {
+                instance.confirmButtonLoading = false;
+              }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        console.log("XXXXXXX", index);
+        this.lists.splice(index, 1);
+        this.$message({
+          type: 'success',
+          message: '删除成功'
+        });
+      }).catch(() => { });
+    },
+    copyTest() {
+      this.$message({
+        message: '复制成功',
+        type: 'success'
+      });
+      this.lists.unshift({ index: 100 });
+      this.isCopy = true;
+      setTimeout(() => {
+        this.isCopy = false;
+      }, 2000);
+    }
+  },
 }

src/views/myHistoryTest/myHistoryTest.scss

@@ -59,11 +59,11 @@
     background: #FFFFFF;
     box-shadow: 0 5px 11px 0 rgba(78,93,255,0.14);
     border-radius: 6px;
-    margin: 15px 8px;
+    margin: 15px 8px 0px 8px;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
-    color: rgba(159,167,186,1);
+    color:rgba(153,160,182,1);
     .tools {
       display: none;
       position:absolute;
@@ -78,12 +78,14 @@
       width: 100%;
       height:156px;
       border-radius:6px 6px 0px 0px;
+      object-fit: cover;
     }
     .title {
       flex-grow: 2;
       margin: 10px;
-      font-size: 18px;
-      color: rgba(55,55,55,1);
+      color:rgba(51,51,51,1);
+      line-height:21px;
+      font-size: 16px;
     }
     .desc {
       margin: 10px;
@@ -91,7 +93,7 @@
     }
     .bottom {
       margin: 0px 10px 10px;
-      font-size: 14px;
+      font-size: 12px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -103,7 +105,30 @@
       display: block;
     }
     .title {
-      color: #4E5DFF;
+      color: rgba(78,93,255,1);
+    }
+  } 
+  .itemCopy {
+    border:4px solid rgba(78,93,255,1);
+  }
+  .add {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items:center;
+    font-size:16px;
+    font-weight:400;
+    color:rgba(78,93,255,1);
+    line-height:22px;
+    text-align: center;
+    .add-icon {
+      font-size:28px;
+      margin-bottom: 10px;
     }
-  }  
+  } 
+  .el-button--primary {
+    color: #fff;
+    background-color: #4E5DFF;;
+    border-color: #4E5DFF;;
+  }
 }