3.1开发

package-lock.json

@@ -3552,12 +3552,11 @@
       }
     },
     "dom7": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
-      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
-      "dev": true,
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
       "requires": {
-        "ssr-window": "^3.0.0-alpha.1"
+        "ssr-window": "^2.0.0"
       }
     },
     "domain-browser": {
@@ -11425,10 +11424,9 @@
       }
     },
     "ssr-window": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
-      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
     },
     "ssri": {
       "version": "6.0.1",
@@ -11696,13 +11694,12 @@
       }
     },
     "swiper": {
-      "version": "6.4.11",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.4.11.tgz",
-      "integrity": "sha512-AtOotOxvGBlYddJa7s1wzdh7/BAyfJq9h8q/JKgI2X9UrSx87YAOSfnM5j2UifYbvETmR6qhivGFew6kogA8Yw==",
-      "dev": true,
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
       "requires": {
-        "dom7": "^3.0.0",
-        "ssr-window": "^3.0.0"
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
       }
     },
     "table": {
@@ -12437,6 +12434,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.1.1",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602499032728&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz",

package.json

@@ -66,7 +66,6 @@
     "sass-loader": "^10.0.3",
     "semver": "^1.1.4",
     "style-loader": "^2.0.0",
-    "swiper": "^6.4.11",
     "url-loader": "^4.1.1",
     "vconsole-webpack-plugin": "^1.5.2",
     "webpack": "^4.44.2",
@@ -85,6 +84,8 @@
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.20",
     "vue": "^2.6.12",
+    "swiper": "^5.4.5",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.22.0",
     "vue-loader": "^15.9.3",
     "vue-meta-info": "^0.1.7",

src/components/AppContainer.vue

@@ -24,8 +24,8 @@ export default {
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 16px;
-  background-color: #fff;
+  // padding: 16px;
+  // background-color: #fff;
   box-sizing: border-box;
 }
 .app-container-hd {

src/components/layout/header.vue

 <template>
   <div class="app-header">
-    <div class="title">
+    <div class="left-content">
+      <div class="bg-image">
+        <div class="left-img"></div>
+        <div class="center-img"></div>
+        <div class="right-img"></div>
+      </div>
+      <div class="title"></div>
+      <ul class="aside-btn">
+        <template v-for="(item, index) in aside">
+          <template v-if="item.type">
+            <a :href="item.path" :key="index">
+              <li :class="$route.path === item.path && 'active'">{{ item.name }}</li>
+            </a>
+          </template>
+          <template v-else>
+            <router-link :to="item.path" :key="index">
+              <li :key="index" :class="item.path !== '/ranking' ? 'active' : $route.path === item.path && 'active'">{{ item.name }}</li>
+            </router-link>
+          </template>
+        </template>
+      </ul>
+      <div class="user">
+          <router-link to="/account/password">修改密码</router-link>
+          <span @click="logout">退出登录</span>
+      </div>
+    </div>
+    <div class="right-content">
+      <div class="time">{{ time }}</div>
+    </div>
+    <!-- <div class="title">
       <router-link to="/">{{ title }}</router-link>
     </div>
     <div class="nav-box">
@@ -8,18 +37,15 @@
       <div class="nav-btn" @click="goPage()">课程</div>
     </div>
     <div class="tool">
-      <!-- <nav class="nav">
-        <router-link to="/">首页</router-link>
-      </nav> -->
       <div class="user">
         <div class="user-tools">
           <router-link to="/account/password">修改密码</router-link>
           <span @click="logout">退出登录</span>
         </div>
-        <div class="user-avatar"><img :src="avatar" /></div>
+        <div class="user-avatar "><img :src="avatar" /></div>
         <div class="user-name">{{ user.nickname }}</div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -30,7 +56,23 @@ export default {
   name: 'AppHeader',
   data() {
     return {
-      title: '金融产品数字化营销实训系统'
+      title: '金融产品数字化营销实训系统',
+      time: '00: 00: 00',
+      aside: [
+        {
+          name: '实训',
+          path: '/explain'
+        },
+        {
+          name: '课程',
+          path: 'https://x-learning.ezijing.com/',
+          type: 1
+        },
+        {
+          name: '排行榜',
+          path: '/ranking'
+        }
+      ]
     }
   },
   computed: {
@@ -41,6 +83,11 @@ export default {
       return this.user.avatar || defaultAvatar
     }
   },
+  created() {
+    setInterval(() => {
+      this.time = this.getCurrentTime()
+    }, 1000)
+  },
   methods: {
     // 退出登录
     logout() {
@@ -51,82 +98,206 @@ export default {
     },
     goPage() {
       window.open('https://x-learning.ezijing.com/')
+    },
+    getCurrentTime() {
+      const date = new Date()
+      const year = date.getFullYear()
+      const mon = date.getMonth() + 1
+      const da = date.getDate()
+      const h = date.getHours()
+      const m = date.getMinutes()
+      const s = date.getSeconds()
+      return `${year}.${this.toDo(mon)}.${this.toDo(da)} ${this.toDo(h)}：${this.toDo(m)}：${this.toDo(s)}`
+    },
+    toDo(n) {
+      const num = parseInt(n)
+      return num < 10 ? `0${num}` : num
     }
   }
 }
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 .app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 80px;
+  z-index: 99999;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 9px 0 0 15px;
   display: flex;
-  align-items: center;
-  // justify-content: space-between;
-  height: 56px;
-  padding: 0 30px;
-  color: #fff;
-  background: url(https://zws-imgs-pub.ezijing.com/static/public/08a0582bed60e67b08e9311306a6fb34.png), linear-gradient(47deg, #C01540 0%, #C01540 7%, rgba(192, 21, 64, 0.76) 26%, rgba(192, 21, 64, 0.58) 66%, #C01540 100%);
-  background-size: cover;
-  box-shadow: 0px 0px 22px 0px #f8f9fb;
-
-  .tool {
+  .left-content{
+    transform: translateX(7px);
+    flex: 1;
+    position: relative;
+    display: flex;
+    .user{
       margin-left: auto;
+      line-height: 76px;
       display: flex;
-    align-items: center;
-  }
-
-  .title {
-    font-size: 20px;
-    color: currentColor;
-  }
-
-  .nav {
-    margin-left: 30px;
-    color: currentColor;
-    a {
-      padding: 0 20px;
+      font-size: 14px;
+      font-weight: normal;
+      color: #51D2FF;
+      span{
+        margin-left: 18px;
+        margin-right: 45px;
+        cursor: pointer;
       }
     }
-
-  .user {
-    display: flex;
-    align-items: center;
-  }
-  .user-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: 8px;
-    img {
+    .bg-image{
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      position: absolute;
+      top: 3px;
+      left: 0;
+      z-index: -1;
+      display: flex;
+      .left-img{
+        width: 193px;
+        height: 69px;
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/df8e6eb9a0faaeda66c36ecf0521ec24.png);
+        background-size: 100% 100%;
+        margin-top: 11.5px;
       }
+      .center-img{
+        flex: 1;
+        height: 76px;
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/ad29787835215a6d0be4e28b2e2f0d28.png);
+        background-size: 100% 100%;
       }
-  .user-tools {
-    padding: 32px 0;
-    span {
-      color: currentColor;
-      padding: 0 16px;
-      cursor: pointer;
+      .right-img{
+        // -webkit-transform: translateX(15px);
+        width: 45px;
+        height: 63px;
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/8a074c457167a9fc9712174611f94402.png);
+        background-size: 100% 100%;
+        margin-top: 7px;
       }
     }
-}
-.nav-box{
+    .title{
+      width: 308px;
+      height: 46px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/d711e945c5440ffa6e67a495ac9a97fd.png);
+      background-size: 100% 100%;
+      margin-top: 19px;
+      margin-left: 61px;
+      // opacity: 0.3;
+    }
+    .aside-btn{
       display: flex;
-  margin-left: 156px;
-  .nav-btn{
-    width: 136px;
-    height: 56px;
+      padding-top: 20px;
+      height: 43px;
+      li{
+        cursor: pointer;
+        width: 112px;
+        height: 43px;
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/6570a068ba2bc77019d2c79dc7ffd64e.png);
+        background-size: 100% 100%;
         font-size: 16px;
-    color: #FFFFFF;
-    line-height: 56px;
+        color: #8BA9FF;
+        line-height: 43px;
         text-align: center;
-    cursor: pointer;
+        margin-left: 10px;
         &.active{
-      color: #C01540;
-      background: #FFFFFF;
+          background: url(https://zws-imgs-pub.ezijing.com/static/public/3717f3b47395b1fd21cd2a68c73c2c46.png);
+          background-size: 100% 100%;
+          color: rgba(0, 238, 255, 1);
+        }
+      }
+    }
+    // height: 82px;
+    // background: url(https://zws-imgs-pub.ezijing.com/static/public/df8e6eb9a0faaeda66c36ecf0521ec24.png);
+    // background-size: 100% 100%;
+  }
+  .right-content{
+    transform: translateX(-8px);
+    width: 289px;
+    height: 114px;
+    background: url(https://zws-imgs-pub.ezijing.com/static/public/6ff9b69171c830e63807d150cc6a3539.png);
+    background-size: 100% 100%;
+    margin-left: auto;
+    .time{
+      font-size: 13px;
+      color: #00CCFF;
+      padding-top: 33px;
+      padding-left: 60px;
     }
   }
 }
+// .app-header {
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   display: flex;
+//   align-items: center;
+//   // justify-content: space-between;
+//   height: 56px;
+//   padding: 0 30px;
+//   color: #fff;
+//   background: url(https://zws-imgs-pub.ezijing.com/static/public/08a0582bed60e67b08e9311306a6fb34.png), linear-gradient(47deg, #C01540 0%, #C01540 7%, rgba(192, 21, 64, 0.76) 26%, rgba(192, 21, 64, 0.58) 66%, #C01540 100%);
+//   background-size: cover;
+//   box-shadow: 0px 0px 22px 0px #f8f9fb;
+
+//   .tool {
+//     margin-left: auto;
+//     display: flex;
+//     align-items: center;
+//   }
+
+//   .title {
+//     font-size: 20px;
+//     color: currentColor;
+//   }
+
+//   .nav {
+//     margin-left: 30px;
+//     color: currentColor;
+//     a {
+//       padding: 0 20px;
+//     }
+//   }
+
+//   .user {
+//     display: flex;
+//     align-items: center;
+//   }
+//   .user-avatar {
+//     width: 32px;
+//     height: 32px;
+//     border-radius: 50%;
+//     overflow: hidden;
+//     margin-right: 8px;
+//     img {
+//       width: 100%;
+//       height: 100%;
+//       object-fit: cover;
+//     }
+//   }
+//   .user-tools {
+//     padding: 32px 0;
+//     span {
+//       color: currentColor;
+//       padding: 0 16px;
+//       cursor: pointer;
+//     }
+//   }
+// }
+// .nav-box{
+//   display: flex;
+//   margin-left: 156px;
+//   .nav-btn{
+//     width: 136px;
+//     height: 56px;
+//     font-size: 16px;
+//     color: #FFFFFF;
+//     line-height: 56px;
+//     text-align: center;
+//     cursor: pointer;
+//     &.active{
+//       color: #C01540;
+//       background: #FFFFFF;
+//     }
+//   }
+// }
 </style>

src/components/layout/index.vue

 <template>
   <div class="app-layout">
     <app-header />
-    <div class="app-layout-bd">
+    <div :class="$route.path === '/explain' ? 'app-layout-bd' : 'app-layout-bd bg-imgs'">
       <!-- <app-aside v-bind="$attrs" v-if="showAside" /> -->
       <app-main />
     </div>
@@ -27,7 +27,12 @@ export default {
 .app-layout-bd {
   flex: 1;
   display: flex;
-
+  background: url(https://zws-imgs-pub.ezijing.com/static/public/10a4d26b4c39a548294807d0029e82b7.png);
+  background-size: cover;
+  &.bg-imgs{
+    background: url(https://zws-imgs-pub.ezijing.com/static/public/974768045ca236ce291ccee128bd884d.png);
+    background-size: cover;
+  }
   .app-main {
     flex: 1;
   }

src/components/layout/main.vue

@@ -10,6 +10,8 @@ export default {}
 
 <style lang="scss">
 .app-main {
-  padding: 16px;
+  padding: 90px 20px 0 20px;
+  // padding-top: 90px;
+  box-sizing: border-box;
 }
 </style>

src/pages/home/explain.vue

 <template>
   <app-container>
     <div class="explain-box">
-      <img src="https://zws-imgs-pub.ezijing.com/static/public/acedc1ee27267ef5d154cdc6af16413b.png" alt="">
+      <!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/acedc1ee27267ef5d154cdc6af16413b.png" alt=""> -->
+      <div class="new-edit">
         <div class="content">
-        <div class="title">实训说明</div>
-        <div class="tit-h2">欢迎来到《金融产品数字化营销》实训系统！</div>
+          <div class="title"></div>
+          <!-- <div class="tit-h2">欢迎来到《金融产品数字化营销》实训系统！</div> -->
           <div class="doce">
             <p>紫荆教育作为金融领域在线教育行业的领军企业，我们调研了数百家合作金融机构，深知目前行业中缺乏高端营销人才。而在金融产品营销人才培养的课程体系中，除了技术和理论课程，迫切需要通过实训环节使学生对金融产品数字化营销的特点和应用领域有更直观和感性的认知，在实践中巩固所学知识，学以致用，才能真正达到金融机构对数字化营销人才的要求。为此我们基于《金融产品数字化营销》初、中、高级的理论课程内容，结合真实市场环境中不同金融产品的营销场景，开发此实训系统，旨在为学生提供系统化、模块化、流程化的模拟金融产品营销实践的平台，熟悉不同营销手段的具体实施过程。</p>
             <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p>
             <!-- <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p> -->
           </div>
-        <div class="explain-btn" @click="$router.push({ path: '/index' })">
+          <!-- <div class="explain-btn" @click="$router.push({ path: '/index' })">
             <div class="btns">我知道了，进入实训基地</div>
+          </div> -->
         </div>
+        <div class="run-btn" @click="$router.push({ path: '/index' })">进入实训基地</div>
       </div>
     </div>
   </app-container>
@@ -22,6 +25,15 @@ import AppContainer from '@/components/AppContainer'
 export default {
   components: {
     AppContainer
+  },
+  mounted() {
+    this.countDomHeight()
+  },
+  methods: {
+    countDomHeight() {
+      $('.content').css('height', $(window).height() - 250 + 'px')
+      $('.doce').css('height', $(window).height() - 317 + 'px')
+    }
   }
 }
 </script>
@@ -30,9 +42,34 @@ export default {
   height: 100%;
   display: flex;
   justify-content: center;
-  padding-top: 40px;
+  // padding-top: 40px;
   box-sizing: border-box;
   // align-items: center;
+  .new-edit{
+    width: 60%;
+    padding-top: 37px;
+    margin-left: auto;
+    .content{
+      width: 100%;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/aa4834feed58cf0adf11533e59477c15.png);
+      background-size: 100% 100%;
+      position: relative;
+      padding-bottom: 30px;
+    }
+    .run-btn{
+      width: 142px;
+      height: 39px;
+      text-align: center;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/5d288f32bbe907c39cb8380a5fca085e.png);
+      background-size: 100% 100%;
+      font-size: 16px;
+      font-weight: 500;
+      color: #71CDF9;
+      line-height: 39px;
+      margin: 29px auto 0;
+      cursor: pointer;
+    }
+  }
   img{
     position: sticky;
     top: 0;
@@ -43,11 +80,20 @@ export default {
     display: block;
   }
   .title{
-    text-align: center;
-    font-size: 24px;
-    font-weight: bold;
-    color: #222222;
-    line-height: 33px;
+    opacity: 0.9;
+    width: 433px;
+    height: 55px;
+    position: absolute;
+    left: 50%;
+    top: -10px;
+    -webkit-transform: translateX(-50%);
+    background: url(https://zws-imgs-pub.ezijing.com/static/public/c26be4bef4fb8d9c3eb15f946551cac3.png);
+    background-size: auto 100%;
+    // text-align: center;
+    // font-size: 24px;
+    // font-weight: bold;
+    // color: #222222;
+    // line-height: 33px;
   }
   .tit-h2{
     text-align: center;
@@ -59,11 +105,19 @@ export default {
     margin-top: 16px;
   }
   .doce{
+    // width: 617px;
+    transform: translateY(67px);
+    margin: 0 auto;
+    padding: 0 60px 37px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    &::-webkit-scrollbar{
+      display: none;
+    }
     p{
-      text-indent: 2em;
-      font-size: 16px;
-      color: #444444;
-      line-height: 32px;
+      font-size: 18px;
+      color: #71CDF9;
+      line-height: 30px;
     }
   }
 }

src/pages/home/index3.0.vue

+<template>
+  <app-container class="case-box">
+    <div class="case-mian">
+      <ul class="case-tab-btn">
+        <template v-for="(item, index) in caseData">
+          <li :class="index == caseIndex && 'active'" :key="index" @click="tabCase(index)">
+            <div class="icon">
+              <!-- <img class="icons" v-if="index == 0" src="https://zws-imgs-pub.ezijing.com/static/public/77d9a7c4dba43695e9d984ea06434c70.png" alt=""> -->
+              <!-- <img class="icons" v-if="index == 1" src="https://zws-imgs-pub.ezijing.com/static/public/13ca8a5ecdbdbfa4c2383c3ad3d8ffca.png" alt=""> -->
+              <img class="icons" src="https://zws-imgs-pub.ezijing.com/static/public/b15396ce451c816967fee3e94b2f8fb0.png" alt="">
+              <!-- <img class="iconActive" v-if="index == 0" src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> -->
+              <!-- <img class="iconActive" v-if="index == 1" src="https://zws-imgs-pub.ezijing.com/static/public/8329440aa66e4e52520f15d579ab80b4.png" alt=""> -->
+              <img class="iconActive" src="https://zws-imgs-pub.ezijing.com/static/public/5159de6dbd4cb02b1d4863840fcb8426.png" alt="">
+            </div>
+            <div class="text">{{ item.name }}</div>
+          </li>
+        </template>
+      </ul>
+      <ul class="module m1">
+        <div class="title">请选择您要实训的案例</div>
+        <ul class="case-list">
+          <template v-for="(item, index) in caseItemList">
+            <li :key="index" v-if="item" :class="item.caseIsShow && 'active'">
+              <div class="card-box">
+                <div class="pop" @click="showItem(item)">
+                  <div class="text">{{ item.name }}</div>
+                  <div v-if="!item.caseIsShow" class="caret el-icon-caret-bottom"></div>
+                  <div v-else class="caret el-icon-caret-top"></div>
+                  <div v-if="!item.caseIsShow" class="hover-show">点击展开具体案例</div>
+                  <div v-else class="hover-show">点击收回具体案例</div>
+                </div>
+                <img :src="item.url" alt="">
+              </div>
+              <div class="select-item" v-if="item.caseIsShow">
+                <template v-for="(opt, sindex) in item.itemChiData">
+                  <div class="item" :key="sindex+'s'" @click="selectCase(opt)">
+                    <div class="name">{{ opt.name }}</div>
+                    <div class="sele-txt">选择</div>
+                  </div>
+                </template>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </ul>
+    </div>
+  </app-container>
+</template>
+<script>
+import * as api from '@/api/common.js'
+import AppContainer from '@/components/AppContainer'
+export default {
+  components: {
+    AppContainer
+  },
+  data() {
+    return {
+      caseIndex: 0,
+      caseData: [],
+      caseItemList: []
+    }
+  },
+  mounted() {
+    this.getClassifyList()
+  },
+  methods: {
+    tabCase(n) {
+      this.caseIndex = n
+      for (let i = 0; i < this.caseData.length; i++) {
+        if (i === n) {
+          this.caseData[i].children.caseIsShow = false
+          this.caseItemList = this.caseData[i].children
+        }
+      }
+      window.sessionStorage.homeTabIndex = n
+    },
+    getClassifyList() {
+      api
+        .getClassifyList({ tag: 'case' })
+        .then(response => {
+          this.caseData = response.data
+          this.caseItemList = response.data[0].children
+          if (window.sessionStorage.homeTabIndex) {
+            this.tabCase(parseInt(window.sessionStorage.homeTabIndex))
+          }
+        })
+        .finally(() => {
+        })
+    },
+    GetCaseList(item) {
+      api
+        .newGetCaseList(item.id, { category_id: item.id })
+        .then(response => {
+          this.caseItemList.map(items => {
+            if (items.id === item.id) {
+              items.itemChiData = Array.isArray(response.data) ? response.data : []
+            }
+          })
+          item.caseIsShow = true
+          this.$forceUpdate()
+          console.log(this.caseItemList, '=123321')
+        })
+        .finally(() => {
+        })
+    },
+    showItem(item) {
+      item.caseIsShow
+        ? item.caseIsShow = false
+        : this.GetCaseList(item)
+      this.$forceUpdate()
+    },
+    selectCase(item) {
+      window.sessionStorage.caseData = JSON.stringify(item)
+      const param = {}
+      param.case_id = item.id
+      param.characteristic_id = item.characteristics[0].id
+      api
+        .clearScore(param)
+        .then(response => {
+          if (parseInt(response.code) === 0) {
+            this.$router.push({
+              path: '/practice'
+            })
+          }
+        })
+        .finally(() => {
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.case-box{
+  padding: 0;
+  .case-mian{
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+  .case-tab-btn{
+    position: relative;
+    z-index: 9;
+    width: 48px;
+    height: 100%;
+    background: #f1f1f1;
+    li{
+      cursor: pointer;
+      width: 48px;
+      height: 132px;
+      border-radius: 5px 0 0 5px;
+      &.active{
+        background: #fff;
+        .icon{
+          .iconActive{
+            display: block;
+          }
+          .icons{
+            display: none;
+          }
+        }
+        .text{
+          color: #C01540;
+        }
+      }
+      .icon{
+        width: 100%;
+        height: 21px;
+        padding-top: 32px;
+        display: flex;
+        justify-content: center;
+        img{
+          width: 20px;
+          height: 20px;
+        }
+        .iconActive{
+          display: none;
+        }
+      }
+      .text{
+        margin: 11px auto;
+        width: 14px;
+        font-size: 14px;
+        color: #666666;
+        line-height: 18px;
+      }
+    }
+  }
+  .module{
+    flex: 1;
+    padding: 0 40px;
+    box-sizing: border-box;
+    .title{
+      font-size: 16px;
+      font-weight: bold;
+      color: #222222;
+      line-height: 22px;
+      line-height: 54px;
+      border-bottom: 1px solid #eee;
+    }
+    .case-list{
+      padding-top: 16px;
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: -80px;
+      li{
+        position: relative;
+        width: 200px;
+        height: 240px;
+        margin-bottom: 16px;
+        margin-left: 80px;
+        cursor: pointer;
+        &.active{
+          .pop{
+            background: rgba(180,10,58, 0.5);
+          }
+        }
+        .card-box{
+          width: 100%;
+          height: 100%;
+          position: relative;
+          img{
+            width: 100%;
+            height: 100%;
+            display:block;
+          }
+        }
+        .pop{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0,0,0,0.3);
+          border-radius: 5px;
+          &:hover{
+            background: rgba(0,0,0,0.6);
+            .hover-show{
+              display: block;
+            }
+          }
+          .hover-show{
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            text-align: center;
+            transform: translate(-50%, -50%);
+            font-size: 16px;
+            font-weight: bold;
+            color: #FFFFFF;
+          }
+          .text{
+            position: absolute;
+            bottom: 14px;
+            left: 16px;
+            width: auto;
+            border-bottom: 2px solid #fff;
+            font-size: 18px;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 25px;
+          }
+          .caret{
+            position: absolute;
+            bottom: 21px;
+            right: 16px;
+            color: #fff;
+          }
+        }
+        .select-item{
+          width: 200px;
+          .item{
+            width: 200px;
+            height: 44px;
+            background: #FFFFFF;
+            box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.2);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            margin-top: 16px;
+            padding: 0 12px 0 14px;
+            box-sizing: border-box;
+            cursor: pointer;
+            &:hover{
+              box-shadow: 0px 2px 8px 0px rgba(153, 153, 153, 0.4);
+            }
+            .name{
+              font-size: 16px;
+              font-weight: bold;
+              color: #444444;
+            }
+            .sele-txt{
+              font-size: 12px;
+              font-weight: bold;
+              color: #999999;
+              margin-left: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/practice/components/copy/practice1.vue

+<template>
+  <div class="practice-box">
+    <div class="item-left">
+      <div class="heads">
+        <div class="text">
+          设计和开展营销活动的基础和必要前提是熟悉各种金融产品特性和关键信息。请首先阅读此案例中产品的相关说明书、合同、产品概要、业务规则或其他信息，并在页面下方的产品分析环节，依次回答各金融产品的关键信息。
+        </div>
+        <div class="downs" @click="goPage(data.accessory)">产品说明书下载</div>
+      </div>
+      <div class="content-box">
+        <div class="title pdf-get-height">产品说明书</div>
+        <!-- <div class="tit-h2">序言</div> -->
+        <div class="text pdf-height embed-height"><embed class="embed" width="100%" height="100%" :src="data.accessory" /></div>
+      </div>
+    </div>
+    <div class="item-right">
+      <ul class="tab-btn">
+        <template v-for="(item, index) in tabBtnText">
+          <li @click="tabChange(index)" :class="index == tabIndex && 'active'" :key="index">{{ item }}</li>
+        </template>
+      </ul>
+      <div class="form" v-if="Object.keys(formData).length">
+        <ul class="setHeight" v-if="tabIndex == 0">
+          <template v-for="(item, index) in formData.production_detail">
+            <li :key="'p'+index">
+              <div class="name">{{ item.name }}</div>
+              <el-input v-model="formData.production_detail[index].content" placeholder="请输入内容"></el-input>
+            </li>
+          </template>
+        </ul>
+        <ul class="setHeight" v-if="tabIndex == 1">
+          <template v-for="(item, index) in formData.fund_detail">
+            <li :key="'pd'+index">
+              <div class="name">{{ item.name }}</div>
+              <el-input v-model="formData.fund_detail[index].content" placeholder="请输入内容"></el-input>
+            </li>
+          </template>
+        </ul>
+        <ul class="setHeight" v-if="tabIndex == 2">
+          <template v-for="(item, index) in formData.invest_detail">
+            <li :key="'pdd'+index">
+              <div class="name">{{ item.name }}</div>
+              <el-input v-model="formData.invest_detail[index].content" placeholder="请输入内容"></el-input>
+            </li>
+          </template>
+        </ul>
+      </div>
+      <div class="next-btnnext-btn">
+        <div class="border">
+          <div class="btn" @click="confirm">确定并进入下一步</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataParam: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      data: {},
+      input: '',
+      tabIndex: 0,
+      tabBtnText: ['产品概括', '基金投资与净值表现', '投资本基金涉及的费用'],
+      formData: {}
+    }
+  },
+  created() {
+    const caseStorageData = JSON.parse(window.sessionStorage.caseData)
+    this.data = caseStorageData
+    this.formData.production_detail = caseStorageData.production_detail.map(item => {
+      item.content = ''
+      return item
+    })
+    this.formData.fund_detail = caseStorageData.fund_detail.map(item => {
+      item.content = ''
+      return item
+    })
+    this.formData.invest_detail = caseStorageData.invest_detail.map(item => {
+      item.content = ''
+      return item
+    })
+    console.log(this.formData)
+  },
+  mounted() {
+    setTimeout(() => {
+      this.countDomHeight()
+    }, 1000)
+    const _this = this
+    $(document).keyup(function(event) {
+      _this.$forceUpdate()
+    })
+    $(document).keydown(function(event) {
+      _this.$forceUpdate()
+    })
+  },
+  methods: {
+    countDomHeight() {
+      $('.practice-box').css('height', $('.app-main').height() - 139 + 'px')
+      $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
+      $('.embed-height').css('height', $('.item-left').height() - $('.item-left .title').outerHeight() - $('.item-left .tit-h2').outerHeight() - $('.item-left .heads').outerHeight() - 20 + 'px')
+      $('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
+    },
+    tabChange(n) {
+      this.tabIndex = n
+    },
+    goPage(url) {
+      window.open(url)
+    },
+    confirm() {
+      const proForm = this.formData.production_detail.find(item => { return item.content === '' })
+      const fundForm = this.formData.fund_detail.find(item => { return item.content === '' })
+      const invForm = this.formData.invest_detail.find(item => { return item.content === '' })
+      if (proForm || fundForm || invForm) {
+        // this.$alert('有部分内容您还没有填写，是否确认进入下一步', '提示', {
+        //   confirmButtonText: '确定',
+        //   showCancelButton: true,
+        //   cancelButtonText: '继续填写',
+        //   callback: action => {
+        //     console.log(action)
+        //     if (action === 'confirm') {
+        //       this.$emit('step1Confirm', this.formData)
+        //     }
+        //   }
+        // })
+        this.$confirm('有部分内容您还没有填写，是否确认进入下一步', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '继续填写',
+          type: 'warning'
+        }).then(() => {
+          this.$emit('step1Confirm', this.formData)
+        }).catch(() => {
+          if (proForm) {
+            this.tabIndex = 0
+            return false
+          }
+          if (fundForm) {
+            this.tabIndex = 1
+            return false
+          }
+          if (invForm) {
+            this.tabIndex = 2
+            return false
+          }
+        })
+      } else {
+        this.$emit('step1Confirm', this.formData)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.practice-box{
+  display: flex;
+  width: 100%;
+  height: 473px;
+  margin-top: 16px;
+  .item-left{
+    margin-right: 8px;
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    .heads{
+      display: flex;
+      align-items: center;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
+      padding: 12px 24px;
+      .text{
+        flex: 1;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        line-height: 24px;
+      }
+      .downs{
+        width: 98px;
+        font-size: 14px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: bold;
+        color: #5090EB;
+        line-height: 20px;
+        margin-left: 40px;
+        cursor: pointer;
+      }
+    }
+    .content-box{
+      padding: 0 24px 24px;
+      .title{
+        padding: 16px 0;
+        font-size: 24px;
+        font-weight: bold;
+        color: #222222;
+        line-height: 33px;
+        text-align: center;
+      }
+      .tit-h2{
+        font-size: 16px;
+        font-weight: bold;
+        color: #222222;
+        line-height: 22px;
+        margin-bottom: 13px;
+      }
+      .text{
+        // height: 220px;
+        // overflow-y: scroll;
+        text-indent: 2em;
+        font-size: 14px;
+        color: #666666;
+        line-height: 25px;
+      }
+    }
+  }
+  .item-right{
+    margin-left: 8px;
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    .tab-btn{
+      width: 100%;
+      height: 48px;
+      background: #f1f1f1;
+      display: flex;
+      li{
+        cursor: pointer;
+        flex: 1;
+        text-align: center;
+        line-height: 48px;
+        font-size: 18px;
+        color: #666666;
+        line-height: 48px;
+        &.active{
+          color: #C01540;
+          background: #fff;
+        }
+      }
+    }
+    .form{
+      padding: 0 24px;
+      ul{
+        height: 360px;
+        overflow-y: scroll;
+        &::-webkit-scrollbar{
+          display:none;
+        }
+      }
+      li{
+        align-items: center;
+        width: 100%;
+        border-bottom: 1px solid #eee;
+        height: 72px;
+        display: flex;
+        .name{
+          font-size: 14px;
+          color: #444444;
+          line-height: 14px;
+          margin-right: 23px;
+          white-space: nowrap;
+        }
+      }
+    }
+    .next-btnnext-btn{
+      padding: 0 16px;
+      box-sizing: border-box;
+      width: 100%;
+      .border{
+        border-top: 1px solid #eee;
+        display: flex;
+        align-items: center;
+        height: 64px;
+      }
+      .btn{
+        cursor: pointer;
+        margin-left: auto;
+        height: 32px;
+        width: 160px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        font-size: 14px;
+        color: #F8F8F8;
+        line-height: 32px;
+        text-align: center;
+      }
+    }
+  }
+}
+.embed{
+  transform: translateX(-20px);
+}
+</style>

src/pages/practice/components/copy/practice3.vue

+<template>
+  <div>
+    <div class="practice3-box" v-show="!isEdit">
+      <ul class="item-left-content">
+        <template v-for="(item, index) in navItem">
+          <li :class="navItemIndex == index && 'active'" :key="index" @click="navItemChange(index)">
+            <div class="icon">
+              <img :src="item.icon" alt="" class="icons">
+              <img :src="item.iconActive" alt="" class="iconActive">
+              <!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> -->
+            </div>
+            <div class="text">{{ item.text }}</div>
+          </li>
+        </template>
+      </ul>
+      <div class="item-right-content">
+        <div class="form-all">
+          <form1 v-show="navItemIndex == 1 - 1"></form1>
+          <form2 v-show="navItemIndex == 2 - 1"></form2>
+          <form3 v-show="navItemIndex == 3 - 1"></form3>
+          <form4 v-show="navItemIndex == 4 - 1"></form4>
+          <form5 v-show="navItemIndex == 5 - 1"></form5>
+          <form6 v-show="navItemIndex == 6 - 1"></form6>
+          <form7 v-show="navItemIndex == 7 - 1"></form7>
+        </div>
+        <div class="foot-btn-box">
+          <div class="btn-box">
+            <div class="btn" @click="isEdit = true">确定并进入下一步</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <preview :navItemIndex="navItemIndex" v-show="isEdit" @confirm="confirm"></preview>
+  </div>
+</template>
+<script>
+import form1 from './tabForm1'
+import form2 from './tabForm2'
+import form3 from './tabForm3'
+import form4 from './tabForm4'
+import form5 from './tabForm5'
+import form6 from './tabForm6'
+import form7 from './tabForm7'
+import preview from './preview'
+export default {
+  props: {
+    dataParam: {
+      type: Object
+    }
+  },
+  components: {
+    form1,
+    form2,
+    form3,
+    form4,
+    form5,
+    form6,
+    form7,
+    preview
+  },
+  data() {
+    return {
+      isEdit: false,
+      navItem: [
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/148b68eec73a6cc9a34748d79985e834.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/b3bd7fddd17a0e931dce407b083ba07c.png',
+          text: 'App弹窗'
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/3d243b3f6a574a7640a3f7e46030789f.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/58a9958827342b6daa82b025dd6b5e39.png',
+          text: 'Push消息'
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/20d600c21100089c0da81965473d929d.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/4399a42674e0667f7b412356d412f43d.png',
+          text: '微信群发助手'
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c8a0f50dd293821c50d430bf878adbc.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0eb5b337a3f413678f43441e3a60c78f.png',
+          text: '微信小程序'
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/7211b3e184dc1b538079f02102b36ebf.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/85228d8743161fe282ed30871a4a70a6.png',
+          text: '短信'
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/0090fb935b49dc5b899db96067633db8.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/373f377f1d37f5d253b303df78a6b3f7.png',
+          text: '邮件'
+        },
+        {
+          icon: 'https://zws-imgs-pub.ezijing.com/static/public/eddd11a911b9ba33a66ab15d550b0bc1.png',
+          iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/971b996a6547d0d1db592fdd3166fc73.png',
+          text: 'Web弹窗'
+        }
+      ],
+      navItemIndex: 0
+    }
+  },
+  mounted() {
+    window.sessionStorage.indexTouchActive = this.navItemIndex
+    this.countDomHeight()
+  },
+  methods: {
+    countDomHeight() {
+      $('.practice3-box').css('height', $('.app-main').height() - 139 + 'px')
+      // $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
+      // $('.embed-height').css('height', $('.item-left').height() - $('.item-left .title').outerHeight() - $('.item-left .tit-h2').outerHeight() - $('.item-left .heads').outerHeight() - 20 + 'px')
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+      window.sessionStorage.indexTouchActive = n
+    },
+    confirm(val) {
+      this.$emit('step3Confirm', val)
+      // console.log(val)
+    }
+  },
+  computed: {
+    dataWatch() {
+      return this.dataParam.stepIndex
+    }
+  },
+  watch: {
+    dataWatch(newV) {
+      this.isEdit = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.practice3-box{
+  display: flex;
+  margin-top: 16px;
+  .item-left-content{
+    width: 200px;
+    // height: 473px;
+    margin-right: 16px;
+    background: #fff;
+    padding: 20px 10px;
+    box-sizing: border-box;
+    li{
+      cursor: pointer;
+      width: 180px;
+      height: 50px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      &.active{
+        background: #FFF4F7;
+        .icon{
+          .icons{
+            display: none;
+          }
+          .iconActive{
+            display: block;
+          }
+        }
+        .text{
+          color: #C01540;
+          font-weight: bold;
+        }
+      }
+      .icon{
+        margin-left: 27px;
+        width: 20px;
+        img{
+          display: block;
+          width: 100%;
+        }
+        .iconActive{
+          display: none;
+        }
+      }
+      .text{
+        font-size: 16px;
+        color: #999999;
+        margin-left: 10px;
+      }
+    }
+  }
+  .item-right-content{
+    position: relative;
+    flex: 1;
+    background: #fff;
+    .form-all{
+      height: 411px;
+      overflow-y: scroll;
+    }
+    .foot-btn-box{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 64px;
+      background: #fff;
+      padding: 0 24px;
+      box-sizing: border-box;
+      .btn-box{
+        position: relative;
+        width: 100%;
+        border-top: 1px solid #eee;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        img{
+          position: absolute;
+          bottom: 100px;
+          left: 0;
+          width: 644px;
+          z-index: 9;
+        }
+        .btn{
+          padding: 0 24px;
+          height: 32px;
+          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+          border-radius: 4px;
+          font-size: 14px;
+          color: #F8F8F8;
+          line-height: 32px;
+          margin-right: 16px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/practice/components/copy/tabForm1.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送方式</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>基于APP启动事件触发显示</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发显示</el-radio>
+    </div>
+    <div class="radio-left-form" v-if="radio == 1">
+      <div class="form">
+        <div class="name mar-l80">当用户启动App后</div>
+        <el-select v-model="leftForm.select1" placeholder="请选择" class="win500">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <template v-if="leftForm.select1 == 2">
+        <div class="form mar-l224 relation">
+          <el-select v-model="leftForm.select2" placeholder="请选择" class="win500">
+            <el-option
+              v-for="item in select2Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="form mar-l224">
+          <div class="name">等于</div>
+          <el-input class="win448" v-model="leftForm.input1" placeholder="Android属性值"></el-input>
+        </div>
+        <div class="form mar-l275">
+          <el-input class="win448" v-model="leftForm.input2" placeholder="iOS属性值"></el-input>
+        </div>
+      </template>
+    </div>
+    <div class="radio-right-form"  v-if="radio == 2">
+      <div class="form">
+        <div class="name mar-l80">当用户做过</div>
+        <el-select v-model="leftForm.select6" placeholder="请选择" class="win500">
+          <el-option
+            v-for="item in select5Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l180">
+        <div class="line"></div>
+        <div class="text">后</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l180">
+        <el-select v-model="leftForm.select7" placeholder="请选择" class="win500">
+          <el-option
+            v-for="item in select6Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <template v-if="leftForm.select7 == 1">
+        <div class="form mar-l180 relation">
+          <el-select v-model="leftForm.select8" placeholder="请选择" class="win500">
+            <el-option
+              v-for="item in select2Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="form mar-l180">
+          <div class="name">等于</div>
+          <el-input class="win448" v-model="leftForm.input3" placeholder="请输入内容"></el-input>
+        </div>
+        <div class="form mar-l232">
+          <el-input class="win448" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
+        </div>
+      </template>
+    </div>
+    <div class="content-bottom-form">
+      <div class="form top">
+        <div class="name">弹出频率</div>
+        <div class="f-box">
+          <div class="form" style="padding-top:16px">
+            <div class="name">若用户<span>点击</span>弹窗，下次触发相同条件时，弹窗将会</div>
+            <el-select v-model="leftForm.select3" placeholder="请选择" class="win279">
+              <el-option
+                v-for="item in select3Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <template v-if="leftForm.select3 == 1">
+            <div class="form" >
+              <div class="name">添加弹出次数上限：活动期间，最多向用户展示</div>
+              <el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>
+            </div>
+            <div class="form">
+              <el-checkbox class="mar-el-checkbox" label="1">添加弹出时间间隔：点击弹窗后</el-checkbox>
+              <el-input-number style="margin-left:20px" value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;次
+            </div>
+            <div class="form">
+              <el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
+              <el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
+                <el-option
+                  v-for="item in select4Options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
+            </div>
+          </template>
+          <template v-if="leftForm.select3 == 2">
+            <div class="form">
+              <el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
+              <el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
+                <el-option
+                  v-for="item in select4Options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
+            </div>
+          </template>
+          <!-- <div class="form">
+            <div class="name">若用户<span>关闭</span>弹窗，下次触发相同条件时，弹窗将会</div>
+            <el-select v-model="leftForm.select4" placeholder="请选择" class="win279">
+              <el-option
+                v-for="item in select3Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      checkbox: ['基于APP启动事件触发显示', '基于用户事件触发显示'],
+      radio: '1',
+      leftForm: {
+        select1: '2',
+        select2: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: '',
+        select7: 0,
+        select8: '',
+        input1: '',
+        input2: '',
+        input3: '',
+        input4: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select2Options: [],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [
+        {
+          value: 1,
+          label: '登录'
+        },
+        {
+          value: 2,
+          label: '点击banner'
+        },
+        {
+          value: 3,
+          label: '收藏'
+        }
+      ],
+      select6Options: []
+    }
+  },
+  mounted() {
+    const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
+    this.setArrData(opt, 'select2Options')
+    this.setArrData(['不再弹出', '限制次数内弹出', '每次弹出'], 'select3Options')
+    this.setArrData(['天', '小时'], 'select4Options')
+    this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select5Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+  .text-line{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-bottom: 16px;
+    .line{
+      width: 250px;
+      height: 1px;
+      background: #EEEEEE;
+    }
+    .text{
+      font-size: 16px;
+      color: #666666;
+      line-height: 22px;
+    }
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+</style>

src/pages/practice/components/copy/tabForm2.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送规则</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
+      <el-radio v-model="radio" label="3" border>周期性推送</el-radio>
+    </div>
+    <div class="radio-form1" v-if="radio == 1">
+      <div class="form mar-l83">
+        <el-select v-model="leftForm.select1" placeholder="请选择">
+          <el-option
+            v-for="item in select1Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="form mar-l83" v-if="leftForm.select1 == 1">
+        <div class="name">消息将于</div>
+        <el-date-picker
+          v-model="leftForm.input1"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+        <div class="name hou">准时发送</div>
+      </div>
+    </div>
+    <div class="radio-form2" v-if="radio == 2">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input2"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input3"
+          type="date"
+          placeholder="结束时间">
+        </el-date-picker>
+      </div>
+      <div class="form">
+        <div class="name mar-l83">当用户做过</div>
+        <el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
+          <el-option
+            v-for="item in select2Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l83">
+        <div class="line"></div>
+        <div class="text">时</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l83">
+        <el-select class="win150" v-model="leftForm.select3" placeholder="请选择">
+          <el-option
+            v-for="item in select3Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <template v-if="leftForm.select3 == 1">
+          <el-input class="win150 mar-lr16" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
+          <el-select class="win150" v-model="leftForm.select4" placeholder="请选择">
+            <el-option
+              v-for="item in select4Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </template>
+        <div class="name hou">发送</div>
+      </div>
+    </div>
+    <div class="radio-form3" v-if="radio == 3">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input5"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input6"
+          type="date"
+          placeholder="结束时间">
+        </el-date-picker>
+      </div>
+      <div class="form mar-l83">
+        <el-select class="win150" v-model="leftForm.select5" placeholder="请选择">
+          <el-option
+            v-for="item in select5Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <template v-if="leftForm.select5 == 1">
+          <el-select class="win150 mar-l16" v-model="leftForm.select6" placeholder="请选择">
+            <el-option
+              v-for="item in select6Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </template>
+        <template v-if="leftForm.select5 == 2">
+          <el-select class="win150 mar-l16" v-model="leftForm.select7" placeholder="请选择">
+            <el-option
+              v-for="item in select7Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </template>
+        <div class="name hou">准时推送</div>
+      </div>
+    </div>
+    <div class="content-bottom-form">
+      <div class="form mar-l83 mar-t16">
+        <el-checkbox class="mar-el-checkbox">当push消息无法触达时，使用短信进行补发</el-checkbox>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
+      radio: '2',
+      leftForm: {
+        select1: 0,
+        select2: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: 0,
+        input1: '',
+        input2: '',
+        input3: '',
+        input4: '',
+        input5: '',
+        input6: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select1Options: [],
+      select2Options: [
+        {
+          value: 1,
+          label: '连续7日未登录'
+        },
+        {
+          value: 2,
+          label: '连续30日未登录'
+        }
+      ],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [],
+      select6Options: [],
+      select7Options: []
+    }
+  },
+  mounted() {
+    this.setArrData(['立即发送', '定时发送'], 'select1Options')
+    this.setArrData(['立即', '等待'], 'select3Options')
+    this.setArrData(['分钟', '小时', '天'], 'select4Options')
+    this.setArrData(['每日', '每周', '每月'], 'select5Options')
+    this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
+    this.setArrData([
+      '1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
+    ], 'select7Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select2Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      &.hou{
+        margin-left: 20px;
+      }
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+}
+.text-line{
+  width: 530px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 16px;
+  .line{
+    width: 250px;
+    height: 1px;
+    background: #EEEEEE;
+  }
+  .text{
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.mar-l83{
+  margin-left: 83px;
+}
+.mar-t16{
+  margin-top: 16px;
+}
+.mar-lr16{
+  margin: 0 16px;
+}
+.mar-l16{
+  margin-left: 16px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+.win432{
+  width: 432px;
+}
+.win150{
+  width: 150px;
+}
+</style>

src/pages/practice/components/copy/tabForm3.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送规则</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
+    </div>
+    <div class="radio-form1" v-if="radio == 1">
+      <div class="form mar-l83">
+        <el-select v-model="leftForm.select1" placeholder="请选择">
+          <el-option
+            v-for="item in select1Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="form mar-l83" v-if="leftForm.select1 == 1">
+        <div class="name">消息将于</div>
+        <el-date-picker
+          v-model="leftForm.input1"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+        <div class="name hou">准时发送</div>
+      </div>
+    </div>
+    <div class="radio-form2" v-if="radio == 2">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input2"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input3"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">时间范围内</div>
+      </div>
+      <div class="form">
+        <div class="name mar-l83">当用户做过</div>
+        <el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
+          <el-option
+            v-for="item in select2Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="name hou">时立即发送</div>
+      </div>
+    </div>
+    <!-- <div class="content-bottom-form">
+      <div class="form mar-l83 mar-t16">
+        <el-checkbox class="mar-el-checkbox">当push消息无法触达时，使用短信进行补发</el-checkbox>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      radio: '1',
+      leftForm: {
+        select1: 0,
+        select2: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: 0,
+        input1: '',
+        input2: '',
+        input3: '',
+        input4: '',
+        input5: '',
+        input6: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select1Options: [],
+      select2Options: [
+        {
+          value: 1,
+          label: '主动发送消息给公众号'
+        },
+        {
+          value: 2,
+          label: '点击公众号菜单'
+        },
+        {
+          value: 3,
+          label: '关注公众号'
+        }
+      ],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [],
+      select6Options: [],
+      select7Options: []
+    }
+  },
+  mounted() {
+    this.setArrData(['立即发送', '定时发送'], 'select1Options')
+    this.setArrData(['立即', '等待'], 'select3Options')
+    this.setArrData(['分钟', '小时', '天'], 'select4Options')
+    this.setArrData(['每日', '每周', '每月'], 'select5Options')
+    this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
+    this.setArrData([
+      '1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
+    ], 'select7Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select2Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      &.hou{
+        margin-left: 20px;
+      }
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+}
+.text-line{
+  width: 530px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 16px;
+  .line{
+    width: 250px;
+    height: 1px;
+    background: #EEEEEE;
+  }
+  .text{
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.mar-l83{
+  margin-left: 83px;
+}
+.mar-t16{
+  margin-top: 16px;
+}
+.mar-lr16{
+  margin: 0 16px;
+}
+.mar-l16{
+  margin-left: 16px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+.win432{
+  width: 432px;
+}
+.win150{
+  width: 150px;
+}
+</style>

src/pages/practice/components/copy/tabForm4.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送方式</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>基于APP启动事件触发显示</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发显示</el-radio>
+    </div>
+    <div class="radio-left-form" v-if="radio == 1">
+      <div class="form">
+        <div class="name mar-l80">当用户启动App后</div>
+        <el-select v-model="leftForm.select1" placeholder="请选择" class="win500">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <template v-if="leftForm.select1 == 2">
+        <div class="form mar-l224 relation">
+          <el-select v-model="leftForm.select2" placeholder="请选择" class="win500">
+            <el-option
+              v-for="item in select2Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="form mar-l224">
+          <div class="name">等于</div>
+          <el-input class="win448" v-model="leftForm.input1" placeholder="请输入内容"></el-input>
+        </div>
+        <div class="form mar-l275">
+          <el-input class="win448" v-model="leftForm.input2" placeholder="请输入内容"></el-input>
+        </div>
+      </template>
+    </div>
+    <div class="radio-right-form"  v-if="radio == 2">
+      <div class="form">
+        <div class="name mar-l80">当用户做过</div>
+        <el-select v-model="leftForm.select6" placeholder="请选择" class="win500">
+          <el-option
+            v-for="item in select5Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l180">
+        <div class="line"></div>
+        <div class="text">后</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l180">
+        <el-select v-model="leftForm.select7" placeholder="请选择" class="win500">
+          <el-option
+            v-for="item in select6Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <template v-if="leftForm.select7 == 1">
+        <div class="form mar-l180 relation">
+          <el-select v-model="leftForm.select8" placeholder="请选择" class="win500">
+            <el-option
+              v-for="item in select2Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="form mar-l180">
+          <div class="name">等于</div>
+          <el-input class="win448" v-model="leftForm.input3" placeholder="请输入内容"></el-input>
+        </div>
+        <div class="form mar-l232">
+          <el-input class="win448" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
+        </div>
+      </template>
+    </div>
+    <div class="content-bottom-form">
+      <div class="form top">
+        <div class="name">弹出频率</div>
+        <div class="f-box">
+          <div class="form" style="padding-top:16px">
+            <div class="name">若用户<span>点击</span>弹窗，下次触发相同条件时，弹窗将会</div>
+            <el-select v-model="leftForm.select3" placeholder="请选择" class="win279">
+              <el-option
+                v-for="item in select3Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <template v-if="leftForm.select3 == 1">
+            <div class="form" >
+              <div class="name">添加弹出次数上限：活动期间，最多向用户展示</div>
+              <el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>
+            </div>
+            <div class="form">
+              <el-checkbox class="mar-el-checkbox" label="1">添加弹出时间间隔：点击弹窗后</el-checkbox>
+              <el-input-number style="margin-left:20px" value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;次
+            </div>
+            <div class="form">
+              <el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
+              <el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
+                <el-option
+                  v-for="item in select4Options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
+            </div>
+          </template>
+          <template v-if="leftForm.select3 == 2">
+            <div class="form">
+              <el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
+              <el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
+                <el-option
+                  v-for="item in select4Options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
+            </div>
+          </template>
+          <!-- <div class="form">
+            <div class="name">若用户<span>关闭</span>弹窗，下次触发相同条件时，弹窗将会</div>
+            <el-select v-model="leftForm.select4" placeholder="请选择" class="win279">
+              <el-option
+                v-for="item in select3Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      checkbox: ['基于APP启动事件触发显示', '基于用户事件触发显示'],
+      radio: '1',
+      leftForm: {
+        select1: '2',
+        select2: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: '',
+        select7: 0,
+        select8: '',
+        input1: '',
+        input2: '',
+        input3: '',
+        input4: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select2Options: [],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [
+        {
+          value: 1,
+          label: '小程序分享'
+        },
+        {
+          value: 2,
+          label: '元素点击'
+        }
+      ],
+      select6Options: []
+    }
+  },
+  mounted() {
+    const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
+    this.setArrData(opt, 'select2Options')
+    this.setArrData(['不再弹出', '限制次数内弹出', '每次弹出'], 'select3Options')
+    this.setArrData(['天', '小时'], 'select4Options')
+    this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select5Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+  .text-line{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-bottom: 16px;
+    .line{
+      width: 250px;
+      height: 1px;
+      background: #EEEEEE;
+    }
+    .text{
+      font-size: 16px;
+      color: #666666;
+      line-height: 22px;
+    }
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+</style>

src/pages/practice/components/copy/tabForm5.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送规则</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
+      <el-radio v-model="radio" label="3" border>周期性推送</el-radio>
+    </div>
+    <div class="radio-form1" v-if="radio == 1">
+      <div class="form mar-l83">
+        <el-select v-model="leftForm.select1" placeholder="请选择">
+          <el-option
+            v-for="item in select1Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="form mar-l83" v-if="leftForm.select1 == 1">
+        <div class="name">消息将于</div>
+        <el-date-picker
+          v-model="leftForm.input1"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+        <div class="name hou">准时发送</div>
+      </div>
+    </div>
+    <div class="radio-form2" v-if="radio == 2">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input2"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input3"
+          type="date"
+          placeholder="结束时间">
+        </el-date-picker>
+      </div>
+      <div class="form">
+        <div class="name mar-l83">当用户做过</div>
+        <el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
+          <el-option
+            v-for="item in select2Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l83">
+        <div class="line"></div>
+        <div class="text">时</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l83">
+        <div class="name">活动期间，最多向用户展示</div>
+        <el-select class="win150" v-model="leftForm.select7" placeholder="请选择">
+          <el-option
+            v-for="item in select8Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="name hou">发送</div>
+      </div>
+    </div>
+    <div class="radio-form3" v-if="radio == 3">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input22"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input33"
+          type="date"
+          placeholder="结束时间">
+        </el-date-picker>
+      </div>
+      <div class="form">
+        <div class="name mar-l83">当用户做过</div>
+        <el-select v-model="leftForm.select22" placeholder="请选择" class="win432">
+          <el-option
+            v-for="item in select2Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l83">
+        <div class="line"></div>
+        <div class="text">时</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l83">
+        <div class="name">活动期间，最多向用户展示</div>
+        <el-select class="win150" v-model="leftForm.select77" placeholder="请选择">
+          <el-option
+            v-for="item in select8Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="name hou">发送</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
+      radio: '1',
+      leftForm: {
+        select1: 0,
+        select2: '',
+        select22: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: 0,
+        select7: 0,
+        select77: 0,
+        input1: '',
+        input2: '',
+        input22: '',
+        input3: '',
+        input33: '',
+        input4: '',
+        input5: '',
+        input6: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select1Options: [],
+      select2Options: [
+        {
+          value: 1,
+          label: '连续7日未登录'
+        },
+        {
+          value: 2,
+          label: '连续30日未登录'
+        }
+      ],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [],
+      select6Options: [],
+      select7Options: [],
+      select8Options: []
+    }
+  },
+  mounted() {
+    this.setArrData(['立即发送', '定时发送'], 'select1Options')
+    this.setArrData(['立即', '等待'], 'select3Options')
+    this.setArrData(['分钟', '小时', '天'], 'select4Options')
+    this.setArrData(['每日', '每周', '每月'], 'select5Options')
+    this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
+    this.setArrData([
+      '1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
+    ], 'select7Options')
+    this.setArrData([
+      '无限', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'
+    ], 'select8Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select2Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      &.hou{
+        margin-left: 20px;
+      }
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+}
+.text-line{
+  width: 530px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 16px;
+  .line{
+    width: 250px;
+    height: 1px;
+    background: #EEEEEE;
+  }
+  .text{
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.mar-l83{
+  margin-left: 83px;
+}
+.mar-t16{
+  margin-top: 16px;
+}
+.mar-lr16{
+  margin: 0 16px;
+}
+.mar-l16{
+  margin-left: 16px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+.win432{
+  width: 432px;
+}
+.win150{
+  width: 150px;
+}
+</style>

src/pages/practice/components/copy/tabForm6.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送规则</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
+      <el-radio v-model="radio" label="3" border>周期性推送</el-radio>
+    </div>
+    <div class="radio-form1" v-if="radio == 1">
+      <div class="form mar-l83">
+        <el-select v-model="leftForm.select1" placeholder="请选择">
+          <el-option
+            v-for="item in select1Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="form mar-l83" v-if="leftForm.select1 == 1">
+        <div class="name">消息将于</div>
+        <el-date-picker
+          v-model="leftForm.input1"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+        <div class="name hou">准时发送</div>
+      </div>
+    </div>
+    <div class="radio-form2" v-if="radio == 2">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input2"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input3"
+          type="date"
+          placeholder="结束时间">
+        </el-date-picker>
+      </div>
+      <div class="form">
+        <div class="name mar-l83">当用户做过</div>
+        <el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
+          <el-option
+            v-for="item in select2Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l83">
+        <div class="line"></div>
+        <div class="text">时</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l83">
+        <div class="name">活动期间，最多向用户展示</div>
+        <el-select class="win150" v-model="leftForm.select7" placeholder="请选择">
+          <el-option
+            v-for="item in select8Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="name hou">发送</div>
+      </div>
+    </div>
+    <div class="radio-form3" v-if="radio == 3">
+      <div class="form mar-l83">
+        <div class="name">从</div>
+        <el-date-picker
+          v-model="leftForm.input22"
+          type="date"
+          placeholder="开始时间">
+        </el-date-picker>
+        <div class="name hou">到</div>
+        <el-date-picker
+          v-model="leftForm.input33"
+          type="date"
+          placeholder="结束时间">
+        </el-date-picker>
+      </div>
+      <div class="form">
+        <div class="name mar-l83">当用户做过</div>
+        <el-select v-model="leftForm.select22" placeholder="请选择" class="win432">
+          <el-option
+            v-for="item in select2Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="text-line mar-l83">
+        <div class="line"></div>
+        <div class="text">时</div>
+        <div class="line"></div>
+      </div>
+      <div class="form mar-l83">
+        <div class="name">活动期间，最多向用户展示</div>
+        <el-select class="win150" v-model="leftForm.select77" placeholder="请选择">
+          <el-option
+            v-for="item in select8Options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="name hou">发送</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
+      radio: '1',
+      leftForm: {
+        select1: 0,
+        select2: '',
+        select22: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: 0,
+        select7: 0,
+        select77: 0,
+        input1: '',
+        input2: '',
+        input22: '',
+        input3: '',
+        input33: '',
+        input4: '',
+        input5: '',
+        input6: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select1Options: [],
+      select2Options: [
+        {
+          value: 1,
+          label: '连续7日未登录'
+        },
+        {
+          value: 2,
+          label: '连续30日未登录'
+        }
+      ],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [],
+      select6Options: [],
+      select7Options: [],
+      select8Options: []
+    }
+  },
+  mounted() {
+    this.setArrData(['立即发送', '定时发送'], 'select1Options')
+    this.setArrData(['立即', '等待'], 'select3Options')
+    this.setArrData(['分钟', '小时', '天'], 'select4Options')
+    this.setArrData(['每日', '每周', '每月'], 'select5Options')
+    this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
+    this.setArrData([
+      '1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
+    ], 'select7Options')
+    this.setArrData([
+      '无限', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'
+    ], 'select8Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select2Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      &.hou{
+        margin-left: 20px;
+      }
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+}
+.text-line{
+  width: 530px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 16px;
+  .line{
+    width: 250px;
+    height: 1px;
+    background: #EEEEEE;
+  }
+  .text{
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.mar-l83{
+  margin-left: 83px;
+}
+.mar-t16{
+  margin-top: 16px;
+}
+.mar-lr16{
+  margin: 0 16px;
+}
+.mar-l16{
+  margin-left: 16px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+.win432{
+  width: 432px;
+}
+.win150{
+  width: 150px;
+}
+</style>

src/pages/practice/components/copy/tabForm7.vue

+<template>
+  <div class="form-box">
+    <div class="form">
+      <div class="name">推送规则</div>
+      <el-radio class="mar-el-checkbox" v-model="radio" label="1" border>基于用户浏览事件显示</el-radio>
+      <el-radio v-model="radio" label="2" border>基于用户事件触发显示</el-radio>
+    </div>
+    <div class="radio-form1" v-if="radio == 1">
+      <div class="form mar-l83">
+        <div class="name">当用户浏览</div>
+        <el-input class="win279" v-model="leftForm.input1" placeholder="请输入内容"></el-input>
+        <div class="name hou">时，立即弹窗</div>
+      </div>
+    </div>
+    <div class="radio-form2" v-if="radio == 2">
+      <div class="radio-right-form"  v-if="radio == 2">
+        <div class="form">
+          <div class="name mar-l80">当用户做过</div>
+          <el-select v-model="leftForm.select6" placeholder="请选择" class="win500">
+            <el-option
+              v-for="item in select5Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="text-line mar-l180">
+          <div class="line"></div>
+          <div class="text">后</div>
+          <div class="line"></div>
+        </div>
+        <div class="form mar-l180">
+          <el-select v-model="leftForm.select7" placeholder="请选择" class="win500">
+            <el-option
+              v-for="item in select6Options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <template v-if="leftForm.select7 == 1">
+          <div class="form mar-l180 relation">
+            <el-select v-model="leftForm.select8" placeholder="请选择" class="win500">
+              <el-option
+                v-for="item in select2Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="form mar-l180">
+            <div class="name">等于</div>
+            <el-input class="win448" v-model="leftForm.input3" placeholder="请输入内容"></el-input>
+          </div>
+          <div class="form mar-l232">
+            <el-input class="win448" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="content-bottom-form">
+      <div class="form top">
+        <div class="name">弹出频率</div>
+        <div class="f-box">
+          <div class="form" style="padding-top:16px">
+            <div class="name">若用户<span>点击</span>弹窗，下次触发相同条件时，弹窗将会</div>
+            <el-select v-model="leftForm.select3" placeholder="请选择" class="win279">
+              <el-option
+                v-for="item in select3Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <template v-if="leftForm.select3 == 1">
+            <div class="form" >
+              <div class="name">添加弹出次数上限：活动期间，最多向用户展示</div>
+              <el-input-number v-model="countNum1" controls-position="right" :min="1" :max="10"></el-input-number>
+            </div>
+            <div class="form">
+              <el-checkbox class="mar-el-checkbox" label="1">添加弹出时间间隔：点击弹窗后</el-checkbox>
+              <el-input-number style="margin-left:20px" v-model="countNum2" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;次
+            </div>
+            <div class="form">
+              <el-input-number v-model="countNum3" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
+              <el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
+                <el-option
+                  v-for="item in select4Options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
+            </div>
+          </template>
+          <template v-if="leftForm.select3 == 2">
+            <div class="form">
+              <el-input-number v-model="countNum4" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
+              <el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
+                <el-option
+                  v-for="item in select4Options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
+      radio: '1',
+      leftForm: {
+        select1: 0,
+        select2: '',
+        select22: '',
+        select3: 0,
+        select4: 0,
+        select5: 0,
+        select6: '',
+        select7: 0,
+        select77: 0,
+        input1: 'https://www.baidu.com',
+        input2: '',
+        input22: '',
+        input3: '',
+        input33: '',
+        input4: '',
+        input5: '',
+        input6: ''
+      },
+      countNum1: 0,
+      countNum2: 0,
+      countNum3: 0,
+      countNum4: 0,
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select1Options: [],
+      select2Options: [],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [
+        {
+          value: 1,
+          label: '登录'
+        },
+        {
+          value: 2,
+          label: '点击banner'
+        },
+        {
+          value: 3,
+          label: '收藏'
+        }
+      ],
+      select6Options: [],
+      select7Options: [],
+      select8Options: []
+    }
+  },
+  mounted() {
+    this.setArrData(['立即发送', '定时发送'], 'select1Options')
+    this.setArrData(['立即', '等待'], 'select3Options')
+    this.setArrData(['分钟', '小时', '天'], 'select4Options')
+    // this.setArrData(['每日', '每周', '每月'], 'select5Options')
+    // this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
+    // this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
+    const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
+    this.setArrData(opt, 'select2Options')
+    this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
+    // this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      const id = JSON.parse(window.sessionStorage.caseData).id
+      api
+        .getUserConfig(id)
+        .then(response => {
+          this.setArrData(response.data.list, 'select5Options')
+          console.log(response)
+        })
+        .finally(() => {
+        })
+    },
+    setArrData (allItem, data) {
+      allItem.map((item, index) => {
+        this[data].push({
+          value: index,
+          label: item
+        })
+      })
+    },
+    navItemChange(n) {
+      this.navItemIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox,.el-radio{
+    margin: 0 0 0 20px !important;
+  }
+  &.mar-el-checkbox{
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-input__inner{
+    background: #F5F7FA !important;
+  }
+}
+.form-box{
+  padding: 16px 24px;
+  .form{
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+    &.top{
+      align-items: baseline;
+    }
+    .name{
+      font-size: 16px;
+      color: #666666;
+      margin-right: 20px;
+      &.hou{
+        margin-left: 20px;
+      }
+      span{
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+  }
+  .content-bottom-form{
+    border-top: 1px solid #eee;
+  }
+}
+.radio-right-form{
+}
+.text-line{
+  width: 530px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 16px;
+  .line{
+    width: 250px;
+    height: 1px;
+    background: #EEEEEE;
+  }
+  .text{
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+  }
+}
+.mar-l224{
+  margin-left: 224px;
+}
+.mar-l80{
+  margin-left: 80px;
+}
+.mar-l275{
+  margin-left: 275px;
+}
+.mar-l180{
+  margin-left: 180px;
+}
+.mar-l232{
+  margin-left: 232px;
+}
+.mar-l83{
+  margin-left: 83px;
+}
+.mar-t16{
+  margin-top: 16px;
+}
+.mar-lr16{
+  margin: 0 16px;
+}
+.mar-l16{
+  margin-left: 16px;
+}
+.win500{
+  width: 500px;
+}
+.win448{
+  width: 448px;
+}
+.win279{
+  width: 279px;
+}
+.win432{
+  width: 432px;
+}
+.win150{
+  width: 150px;
+}
+</style>