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 {
-    margin-left: auto;
+  .left-content{
+    transform: translateX(7px);
+    flex: 1;
+    position: relative;
     display: flex;
-    align-items: center;
-  }
-
-  .title {
-    font-size: 20px;
-    color: currentColor;
-  }
-
-  .nav {
-    margin-left: 30px;
-    color: currentColor;
-    a {
-      padding: 0 20px;
+    .user{
+      margin-left: auto;
+      line-height: 76px;
+      display: flex;
+      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%;
+      }
+      .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;
+      }
     }
-  }
-  .user-tools {
-    padding: 32px 0;
-    span {
-      color: currentColor;
-      padding: 0 16px;
-      cursor: pointer;
+    .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;
+      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: #8BA9FF;
+        line-height: 43px;
+        text-align: center;
+        margin-left: 10px;
+        &.active{
+          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%;
   }
-}
-.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;
+  .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="">
-      <div class="content">
-        <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="btns">我知道了，进入实训基地</div>
+      <!-- <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="doce">
+            <p>紫荆教育作为金融领域在线教育行业的领军企业，我们调研了数百家合作金融机构，深知目前行业中缺乏高端营销人才。而在金融产品营销人才培养的课程体系中，除了技术和理论课程，迫切需要通过实训环节使学生对金融产品数字化营销的特点和应用领域有更直观和感性的认知，在实践中巩固所学知识，学以致用，才能真正达到金融机构对数字化营销人才的要求。为此我们基于《金融产品数字化营销》初、中、高级的理论课程内容，结合真实市场环境中不同金融产品的营销场景，开发此实训系统，旨在为学生提供系统化、模块化、流程化的模拟金融产品营销实践的平台，熟悉不同营销手段的具体实施过程。</p>
+            <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p>
+            <!-- <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p> -->
+          </div>
+          <!-- <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>