添加测试列表页面

src/components/HeaderEdit.vue

@@ -219,7 +219,7 @@ export default {
     },
     psd(){
       var that=this;
-      axios.get("../../static/json.json").then(function (res) {
+      axios.get("../../static/json.json").then(function (res) { 
         var res=res.data;
         that.$store.state.editor.editorTheme.title=res['title']
         that.$store.state.editor.editorTheme.description=res['description']

src/routers.js

@@ -4,8 +4,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 Vue.use(Router)
-const router =new Router({
-    routes:[{
+const router = new Router({
+  routes: [{
       path: '/',
       name: 'index',
       component: require('./views/h5editor/themeList.vue')
@@ -37,14 +37,20 @@ const router =new Router({
       path: '/about',
       name: 'about',
       component: require('./views/user/about.vue')
-    }]
-  })
-router.beforeEach((to, from, next)=> {
-  if((from.name=='spaeditor'||from.name=='h5editor')&&!window.hasSaveFlag){
-    if(window.confirm('请确保已经将修改的内容保存，否则页面将丢失。是否确认退出编辑？')){
+    },
+    {
+      path: '/cncTestLists',
+      name: "cncTestLists",
+      component: require('./views/cnctestlists/cncTestLists.vue')
+    }
+  ]
+})
+router.beforeEach((to, from, next) => {
+  if ((from.name == 'spaeditor' || from.name == 'h5editor') && !window.hasSaveFlag) {
+    if (window.confirm('请确保已经将修改的内容保存，否则页面将丢失。是否确认退出编辑？')) {
       next()
     }
-  }else {
+  } else {
     next()
   }
 })

src/views/cnctestlists/cncTestLists.html

@@ -0,0 +1,151 @@
+<div class="page">
+    <header class="title-box">
+        <div class="logo-box">
+            <img class="logo" src="../../assets/images/diaoyanbao-log.png" alt="">
+            <span>调研宝</span>
+        </div>
+        <div class="info-box">
+            <div class="title-txt">去“看板”查看测试运营数据</div>
+            <div class="user-info">
+                <el-dropdown>
+                    <span class="el-dropdown-link">
+                        用户名<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item>黄金糕</el-dropdown-item>
+                        <el-dropdown-item>狮子头</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </div>
+
+    </header>
+    <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,379 @@
+.page {
+  background: #EDEFF7;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.title-box {
+  background: #FFFFFF;
+  box-shadow: 0 2px 8px 0 rgba(62, 67, 116, 0.10);
+  height: 60px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 112px;
+  padding-left: 51px;
+
+  .logo-box {
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+
+    .logo {
+      width: 30px;
+      height: 30px;
+      margin-right: 6px;
+    }
+
+    span {
+      line-height: 30px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+    }
+  }
+
+  .info-box {
+    display: flex;
+    flex-direction: row;
+
+    .title-txt {
+      width: 240px;
+      height: 34px;
+      font-family: PingFangSC-Regular;
+      font-size: 16px;
+      color: #4E5DFF;
+      background: #E6EDFF;
+      border-radius: 17px;
+      text-align: center;
+      line-height: 34px;
+      margin-right: 78px;
+    }
+
+    .user-info {
+      font-size: 14px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      margin-top: 8px;
+      height: 20px;
+    }
+  }
+
+}
+
+.main-content {
+  width: 61.45%;
+  height: calc(100vh - 60px);
+  margin: 0 auto;
+  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,54 @@
+<template src='./cncTestLists.html'>
+</template>
+
+<script>
+    export default {
+        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>