修改CNC题库列表UI样式

src/views/cnctestlists/cncTestLists.html

@@ -8,15 +8,15 @@
                     src="../../assets/images/right-arrow.png" alt="">
                 <div class="select-test">选择测题</div>
             </div>
-            <el-dropdown class="selection">
-                <el-button type="primary">所属项目 <i class="el-icon-caret-bottom icon-right"></i>
+            <el-dropdown class="selection" trigger="click" @command="handleCommand">
+                <el-button type="primary">{{currentProject}} <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 command="黄金糕黄金糕黄金糕">黄金糕黄金糕黄金糕</el-dropdown-item>
+                    <el-dropdown-item command="狮子头">狮子头</el-dropdown-item>
+                    <el-dropdown-item command="螺蛳粉">螺蛳粉</el-dropdown-item>
+                    <el-dropdown-item command="双皮奶">双皮奶</el-dropdown-item>
+                    <el-dropdown-item command="蚵仔煎">蚵仔煎</el-dropdown-item>
                 </el-dropdown-menu>
             </el-dropdown>
         </div>
@@ -49,7 +49,7 @@
             <img class="close" src="../../assets/images/close-white.png" alt="" @click="close">
             <div class="content-box">
                 <div class="dialog-title">标题：测测你的隐形人格</div>
-                <div class="dialog-qr">
+                <div class="dialog-qr" ref="dialogQR" v-loading="loading">
                     <div class="qr-item">
                         <span class="title">题目一：你的个人情况是什么样的？</span>
                         <div class="qr-as-text">

src/views/cnctestlists/cncTestLists.scss

@@ -193,6 +193,13 @@
   border-color: #FFFFFF;
 }
 
+.el-button--primary:focus,
+.el-button--primary:hover {
+  background: #4E5DFF;
+  border-color: #4E5DFF;
+  color: #fff;
+}
+
 .icon-right {
   position: absolute;
   right: 10px;

src/views/cnctestlists/cncTestLists.vue

@@ -9,6 +9,23 @@
         },
         data() {
             return {
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+                value: '',
                 isShowDialog: false,
                 tests: [{
                     title: "定制你的家居香气",
@@ -39,20 +56,27 @@
                 }, {
                     title: "定制你的家居香气",
                 }],
-
+                loading: true,
+                currentProject:"所属项目",
             }
         },
         methods: {
             showQRDialog(index) {
                 this.isShowDialog = true;
+                setTimeout(() => {
+                    this.$refs.dialogQR.scroll(0, 0)
+                }, 1);
+
             },
             close() {
                 this.isShowDialog = false;
             },
+            handleCommand(command) {
+                this.currentProject = command;
+            }
         },
     }
 </script>
-
 <style lang="scss" scoped>
     @import './cncTestLists.scss';
 </style>