Merge branch 'master' into study

src/routers.js

@@ -37,6 +37,10 @@ const router = new Router({
     path: '/about',
     name: 'about',
     component: require('./views/user/about.vue')
+  }, {
+    path: '/cncTestLists',
+    name: "cncTestLists",
+    component: require('./views/cnctestlists/cncTestLists.vue')
   }]
 })
 router.beforeEach((to, from, next) => {

src/views/cnctestlists/cncTestLists.html

@@ -0,0 +1,131 @@
+<div class="page">
+    <HeaderMain></HeaderMain>
+    <main class="main-content">
+        <div class="title-content">
+            <div class="create-test-box">
+                <div class="create-test">创建测试</div>
+                <img style="width:16px; height:20px; margin-left: 7px; margin-right: 7px;"
+                    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-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-menu>
+            </el-dropdown>
+        </div>
+
+        <div class="content">
+            <div class="item-test" v-for="(item, index) in tests" :key="index">
+                <div class="item-left">
+                    <img style="width:22px; height:22px;" src="../../assets/images/test-icon@2x.png" alt="">
+                    <span>定制你的家居香气</span>
+                </div>
+                <div class="item-right">
+                    <span class="project-name">无锡路劲</span>
+                    <span class="qr-num">共21题</span>
+                    <div class="watch-test" @click="showQRDialog(index)">
+                        <div class="watch-icon">
+                        </div>
+                        <span>查看测试</span>
+                    </div>
+                    <div class="use-test">
+                        <div class="use-icon">
+                        </div>
+                        <span>使用此测试</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <div class="dialog" v-show="isShowDialog">
+        <div class="dialog-content">
+            <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="qr-item">
+                        <span class="title">题目一：你的个人情况是什么样的？</span>
+                        <div class="qr-as-text">
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                        </div>
+                    </div>
+                    <div class="qr-item">
+                        <span class="title">题目二：你的个人情况是什么样的？</span>
+                        <div class="qr-as-img">
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                            <div class="qr-img">
+                                <img class="qr-image"
+                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
+                                    alt="">
+                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="qr-item">
+                        <span class="title">题目一：你的个人情况是什么样的？</span>
+                        <div class="qr-as-text">
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                            <span>A.50后、60后</span>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/views/cnctestlists/cncTestLists.scss

@@ -0,0 +1,319 @@
+.page {
+  background: #EDEFF7;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  width: 61.45%;
+  height: 100%;
+  margin: 0 auto;
+  padding-top: 60px;
+  display: flex;
+  flex-direction: column;
+
+  .title-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 36px;
+    align-items: center;
+
+    .create-test-box {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .create-test {
+        width: 77px;
+        height: 28px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 14px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(111, 111, 111, 1);
+        line-height: 28px;
+        text-align: center;
+      }
+
+      .select-test {
+        width: 77px;
+        height: 28px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 14px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(78, 93, 255, 1);
+        line-height: 28px;
+        text-align: center;
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    margin-top: 33px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 6px;
+    padding-top: 13px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    .item-test {
+      height: 50px;
+      width: 100%;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .item-left {
+        line-height: 50px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        span {
+          font-size: 18px;
+          font-family: MicrosoftYaHei;
+          color: rgba(53, 62, 96, 1);
+          margin-left: 20px;
+        }
+      }
+
+      .item-right {
+        line-height: 50px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .project-name,
+        .qr-num {
+          font-size: 14px;
+          font-family: STYuanti-SC-Regular;
+          font-weight: 400;
+          color: rgba(153, 160, 182, 1);
+        }
+
+        .qr-num {
+          margin-left: 130px;
+          margin-right: 80px;
+        }
+
+        .use-test,
+        .watch-test {
+          width: 110px;
+          height: 30px;
+          background: rgba(230, 237, 255, 1);
+          border-radius: 15px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+
+          .watch-icon {
+            width: 15px;
+            height: 11px;
+            background-image: url('../../assets/images/watch-icon.png');
+            background-size: 15px 11px;
+            margin-right: 3px;
+          }
+
+          span {
+            display: inline-block;
+            line-height: 30px;
+            font-size: 12px;
+            font-family: STYuanti-SC-Regular;
+            font-weight: 400;
+            color: rgba(78, 93, 255, 1);
+          }
+        }
+
+        .use-test {
+          margin-left: 20px;
+
+          .use-icon {
+            width: 11px;
+            height: 13px;
+            background-image: url('../../assets/images/use-icon.png');
+            background-size: 11px 13px;
+            margin-right: 3px;
+          }
+        }
+      }
+    }
+
+    .item-test:hover {
+      background: rgba(230, 237, 255, 1);
+
+      .watch-test,
+      .use-test {
+        background: rgba(78, 93, 255, 1);
+
+        .use-icon {
+          background-image: url('../../assets/images/use-icon-white.png');
+          background-size: 11px 13px;
+        }
+
+        span {
+          color: rgba(255, 255, 255, 1);
+        }
+      }
+
+      .watch-test {
+        .watch-icon {
+          background-image: url('../../assets/images/watch-icon-white.png');
+          background-size: 15px 11px;
+        }
+      }
+
+    }
+  }
+
+}
+
+.el-button {
+  padding: 7px 20px;
+  position: relative
+}
+
+.el-button--primary {
+  width: 220px;
+  border-radius: 17px;
+  font-size: 14px;
+  color: #4E5DFF;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+
+.icon-right {
+  position: absolute;
+  right: 10px;
+}
+
+.dialog {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  z-index: 100000;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .dialog-content {
+    width: 560px;
+    height: 70%;
+    position: relative;
+
+    .close {
+      width: 28px;
+      height: 28px;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    .content-box {
+      width: 100%;
+      height: 100%;
+      background-color: #FFFFFF;
+      margin-top: 50px;
+      border-radius: 6px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      .dialog-title {
+        width: 100%;
+        height: 98px;
+        background: rgba(78, 93, 255, 1);
+        border-radius: 6px 6px 0px 0px;
+        font-size: 18px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+        line-height: 98px;
+        padding-left: 42px;
+      }
+
+      .dialog-qr {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        padding-left: 30px;
+        padding-right: 15px;
+        padding-top: 20px;
+
+        .qr-item {
+          width: 100%;
+          margin-bottom: 20px;
+
+          .title {
+            display: inline-block;
+            font-size: 14px;
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 1);
+          }
+
+          .qr-as-text {
+            display: flex;
+            flex-direction: column;
+            padding-left: 55px;
+            margin-top: 6px;
+          }
+
+          .qr-as-img {
+            width: 100%;
+            padding-left: 55px;
+            margin-top: 6px;
+
+            .qr-img {
+              width: 100px;
+              display: inline-block;
+              flex-direction: column;
+              align-items: center;
+              margin-bottom: 10px;
+              margin-right: 7px;
+
+              .qr-image {
+                width: 100px;
+                height: 72px;
+                margin-bottom: 4px;
+              }
+
+              .qr-desc {
+                display: inline-block;
+                width: 100px;
+                height: 46px;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 1);
+                line-height: 23px;
+                white-space: normal !important;
+                word-break: break-all;
+                overflow: hidden;
+                text-overflow: -o-ellipsis-lastline;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+}

src/views/cnctestlists/cncTestLists.vue

@@ -0,0 +1,58 @@
+<template src='./cncTestLists.html'>
+</template>
+
+<script>
+    import HeaderMain from "../../components/HeaderMain";
+    export default {
+        components: {
+            HeaderMain
+        },
+        data() {
+            return {
+                isShowDialog: false,
+                tests: [{
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }, {
+                    title: "定制你的家居香气",
+                }],
+
+            }
+        },
+        methods: {
+            showQRDialog(index) {
+                this.isShowDialog = true;
+            },
+            close() {
+                this.isShowDialog = false;
+            },
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import './cncTestLists.scss';
+</style>