实操 3.0开发

a8d6b7a4 · lihuihui · ae4915da · a8d6b7a4 · a8d6b7a4 · a8d6b7a4
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -55,3 +55,34 @@ export function submitContext(data) {
 export function submitCharacteristic(data) {
  return httpRequest.post('/api/opera/v1/api/characteristic/submit', data)
 }
+/* 获取所以分类 */
+export function getClassifyList(params) {
+  return httpRequest.get('/api/opera/v2/api/training/categories', { params })
+}
+/* 3.0 接口 */
+/* 获取案例分类 */
+export function getUserConfig(params) {
+  return httpRequest.get('/api/opera/v2/api/training/4/user-use-configs', { params })
+}
+/* 获取案例列表 */
+export function newGetCaseList(id) {
+  return httpRequest.get(`/api/opera/v2/api/training/${id}/cases`)
+}
+/* 提交特征 */
+export function submitCharacteristics(data) {
+  return httpRequest.post('/api/opera/v2/api/training/characteristic/submit', data)
+}
+/* 提交特征 */
+export function clearScore(data) {
+  return httpRequest.post('/api/opera/v2/api/training/characteristic/clear-score', data)
+}
+/* 提交特征 */
+export function allSubmit(data) {
+  return httpRequest.post('/api/opera/v2/api/training/statistics/submit', data)
+}
--- a/src/components/layout/header.vue
+++ b/src/components/layout/header.vue
@@ -3,6 +3,10 @@
    <div class="title">
      <router-link to="/">{{ title }}</router-link>
    </div>
+    <div class="nav-box">
+      <div class="nav-btn active" @click="$router.push({ path: '/explain' })">实操基地</div>
+      <div class="nav-btn">理论课程</div>
+    </div>
    <div class="tool">
      <!-- <nav class="nav">
        <router-link to="/">首页</router-link>
@@ -53,7 +57,7 @@ export default {
 .app-header {
  display: flex;
  align-items: center;
-  justify-content: space-between;
+  // justify-content: space-between;
  height: 56px;
  padding: 0 30px;
  color: #fff;
@@ -62,6 +66,7 @@ export default {
  box-shadow: 0px 0px 22px 0px #f8f9fb;
  .tool {
+    margin-left: auto;
    display: flex;
    align-items: center;
  }
@@ -104,4 +109,21 @@ export default {
    }
  }
 }
+.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>
--- a/src/index.html
+++ b/src/index.html
@@ -14,6 +14,7 @@
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover"
    />
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css" />
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <div id="app"></div>

--- a/src/pages/home/explain.vue
+++ b/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> -->
+        </div>
+        <div class="explain-btn" @click="$router.push({ path: '/index' })">
+          <div class="btns">我知道了，进入实操基地</div>
+        </div>
+      </div>
+    </div>
+  </app-container>
+</template>
+<script>
+import AppContainer from '@/components/AppContainer'
+export default {
+  components: {
+    AppContainer
+  }
+}
+</script>
+<style lang="scss" scoped>
+.explain-box{
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 40px;
+  box-sizing: border-box;
+  // align-items: center;
+  img{
+    position: sticky;
+    top: 0;
+    left: 0;
+    // transform: translateY(-50%);
+    width: 750px;
+    height: 534px;
+  }
+  .title{
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #222222;
+    line-height: 33px;
+  }
+  .tit-h2{
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: #222222;
+    line-height: 25px;
+    margin-bottom: 16px;
+  }
+  .doce{
+    p{
+      text-indent: 2em;
+      font-size: 16px;
+      color: #444444;
+      line-height: 32px;
+    }
+  }
+}
+.explain-btn{
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  // transform: translateY(-50%);
+  width: 100%;
+  height: 102px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .btns{
+    width: 186px;
+    height: 32px;
+    background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #F9F9F9;
+    text-align: center;
+    line-height: 32px;
+    cursor: pointer;
+  }
+}
+</style>
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
 <template>
-  <div></div>
+  <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" v-if="index == 2" 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" v-if="index == 2" src="https://zws-imgs-pub.ezijing.com/static/public/5159de6dbd4cb02b1d4863840fcb8426.png" alt="">
+            </div>
+            <div class="text">保险</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 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
+        }
+      }
+    },
+    getClassifyList() {
+      api
+        .getClassifyList({ tag: 'case' })
+        .then(response => {
+          this.caseData = response.data
+          this.caseItemList = response.data[0].children
+        })
+        .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)
+        })
+        .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;
+        // min-height: 200px;
+        margin-bottom: 16px;
+        margin-left: 80px;
+        &.active{
+          .pop{
+            background: rgba(180,10,58, 0.5);
+          }
+        }
+        .card-box{
+          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>
--- a/src/pages/practice/components/practice1.vue
+++ b/src/pages/practice/components/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">产品说明书</div>
+        <div class="tit-h2">序言</div>
+        <div class="text embed-height"><embed width="97%" 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  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 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() {
+    this.countDomHeight()
+    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')
+    },
+    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: '确定',
+          callback: action => {
+            console.log(action)
+            if (action === 'confirm') {
+              this.$emit('step1Confirm', this.formData)
+            }
+          }
+        })
+      } 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: #F7F8FA;
+      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;
+      }
+    }
+  }
+}
+</style>
--- a/src/pages/practice/components/practice2.vue
+++ b/src/pages/practice/components/practice2.vue
+<template>
+  <div>
+    <div class="practice2-box" v-show="!isResult">
+      <div class="read" v-show="islookRun">
+        <div class="title">请阅读相关信息，阅读后点击“阅读完毕”按钮，在下一页您需要进行用户分析</div>
+        <img class="img" src="https://zws-imgs-pub.ezijing.com/static/public/e8b4df0a84d4a2853c171b9902bef239.png" alt="">
+        <div class="btn-box">
+          <div  class="btn-cont">
+            <div class="btn" @click="islookRun = false">阅读完毕</div>
+          </div>
+        </div>
+      </div>
+      <div class="answer-box" v-show="!islookRun">
+        <div class="form-box">
+          <div class="title">下面是您可选择的各类用户特征，请筛选出您的营销活动的触达用户群</div>
+          <ul class="setHeight3">
+            <template v-for="(item, index) in checkboxData">
+              <!-- <template v-for="(opt, index) in item.options"> -->
+                <li :key="index">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="checkbox-box">
+                    <!-- <el-checkbox class="mar-none" border :indeterminate="isIndeterminate" v-model="item.answerCount" @change="handleCheckAllChange">全选</el-checkbox> -->
+                    <el-checkbox-group v-model="item.answerCount" @change="handleCheckedCitiesChange">
+                      <el-checkbox border v-for="city in item.options" :label="city.option" :key="city.option_name">{{city.option_name}}</el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </li>
+              <!-- </template> -->
+            </template>
+          </ul>
+        </div>
+        <div class="foot-btn-box">
+          <div class="btn-box">
+            <img v-show="islook" src="https://zws-imgs-pub.ezijing.com/static/public/e8b4df0a84d4a2853c171b9902bef239.png" alt="">
+            <div class="btn" @click="islook = !islook">查看资料</div>
+            <div class="btn" @click="confirm">确认并进入下一步</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="result-box" v-show="isResult">
+      <div class="item-left">
+        <div class="title">您所筛选出的用户群，适合于<span>#风险偏好较低#</span>的用户群。</div>
+        <img src="https://zws-imgs-pub.ezijing.com/static/public/14cd9f545600187e8d5be61f6e98cd2c.png" alt="">
+      </div>
+      <div class="item-right">
+        <ul class="setHeight2">
+          <template v-for="(item, index) in checkboxData">
+            <li :key="index">
+              <div class="item-right-scroll">
+                <div class="name">{{ item.name }}</div>
+                <div class="checkbox-box">
+                  <!-- <el-checkbox class="mar-none" border :indeterminate="isIndeterminate" v-model="item.answerCount" @change="handleCheckAllChange">全选</el-checkbox> -->
+                  <el-checkbox-group disabled v-model="item.answerCount" @change="handleCheckedCitiesChange">
+                    <el-checkbox border v-for="city in item.options" :label="city.option" :key="city.option_name">{{city.option_name}}</el-checkbox>
+                  </el-checkbox-group>
+                </div>
+              </div>
+            </li>
+          </template>
+        </ul>
+        <div class="foot-btn-box">
+          <div class="btn-box">
+            <template v-if="resultCharacteristic.deduct_score_times > 3">
+              <div class="btn" @click="goPage('/index')">返回案例选择</div>
+            </template>
+            <template>
+              <div class="btn" v-if="resultCharacteristic.status == 1" @click="$emit('step2Confirm', score)">进入下一页</div>
+              <div class="btn" @click="isResult = false" v-if="resultCharacteristic.status == 2 || resultCharacteristic.status == 3">我在考虑下</div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+const cityOptions = []
+export default {
+  props: {
+    dataParam: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      isResult: false,
+      data: {},
+      islook: false,
+      islookRun: true,
+      checkAll: false,
+      checkedCities: [],
+      cities: cityOptions,
+      isIndeterminate: true,
+      checkboxForm: {},
+      checkboxData: [],
+      resultCharacteristic: {},
+      score: 0
+    }
+  },
+  mounted() {
+    this.countDomHeight()
+    const caseStorageData = JSON.parse(window.sessionStorage.caseData)
+    this.data = caseStorageData
+    this.checkboxData = caseStorageData.characteristics[0].options.map(item => {
+      item.answerCount = []
+      item.options.map(chi => {
+        chi.answer = 0
+        return chi
+      })
+      return item
+    })
+    console.log(this.checkboxData, ',1123')
+  },
+  methods: {
+    countDomHeight() {
+      $('.result-box').css('height', $('.app-main').height() - 139 + 'px')
+      $('.practice2-box').css('height', $('.app-main').height() - 139 + 'px')
+      $('.answer-box .setHeight3').css('height', $('.practice2-box').height() - 108 + 'px')
+      $('.result-box .setHeight2').css('height', $('.result-box').height() - 64 + 'px')
+    },
+    goPage(path) {
+      this.$router.replace({
+        path: path
+      })
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : []
+      this.isIndeterminate = false
+    },
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.cities.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
+      this.$forceUpdate()
+    },
+    confirm() {
+      this.checkboxData.map(item => {
+        return item.options.map(allOpt => {
+          const itemFind = item.answerCount.find(c => { return c === allOpt.option })
+          if (itemFind) {
+            allOpt.answer = 1
+          } else {
+            allOpt.answer = 0
+          }
+          return allOpt
+        })
+      })
+      console.log(this.data)
+      const param = {}
+      param.case_id = this.data.id
+      param.characteristic_id = this.data.characteristics[0].id
+      param.characteristic_detail = this.checkboxData
+      api
+        .submitCharacteristics(param)
+        .then(response => {
+          this.resultCharacteristic = response.data
+          this.isResult = true
+          this.$nextTick(() => {
+            $('.item-right-scroll').css('width', `${$(document).width() / 2 - (16 * 5)}px`)
+          })
+          this.score = response.data.score
+        })
+        .finally(() => {
+        })
+      console.log(this.checkboxData, '123321')
+    }
+  },
+  computed: {
+    dataWatch() {
+      return this.dataParam.stepIndex
+    }
+  },
+  watch: {
+    dataWatch(newV) {
+      this.isResult = false
+      this.islook = false
+      this.islookRun = true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-checkbox{
+    margin: 0 0 0 20px !important;
+  }
+  .mar-none{
+    &.el-checkbox{
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
+}
+.practice2-box{
+  position: relative;
+  min-height: 473px;
+  background: #fff;
+  margin-top: 16px;
+  .title{
+    height: 44px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
+    font-size: 14px;
+    color: #222222;
+    line-height: 44px;
+    padding-left: 24px;
+    box-sizing: border-box;
+  }
+  .img{
+    width: 644px;
+    display: block;
+    margin: 16px auto;
+  }
+  .btn-box{
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 63px;
+    padding: 0 16px;
+    box-sizing: border-box;
+    .btn-cont{
+      height: 100%;
+      border-top: 1px solid #eee;
+      display: flex;
+      align-items: center;
+      .btn{
+        width: 104px;
+        height: 32px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        text-align: center;
+        line-height: 32px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+  }
+  .form-box{
+    ul{
+      // height: 364px;
+      overflow-y: scroll;
+      padding: 0 24px;
+      li{
+        height: 72px;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        align-items: center;
+        .name{
+          width: 88px;
+          text-align: center;
+        }
+        .checkbox-box{
+          display: flex;
+          align-items: center;
+          .check-bor{
+            display: flex;
+            align-items: center;
+            height: 40px;
+            padding: 0 10px 0 14px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+  .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;
+      }
+    }
+  }
+}
+.result-box{
+  display: flex;
+  width: 100%;
+  height: 473px;
+  margin-top: 16px;
+  .item-left{
+    margin-right: 8px;
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    .title{
+      width: 260px;
+      font-size: 20px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 30px;
+      margin: 0 auto;
+      padding: 16px 0;
+      text-align: center;
+      span{
+        color: #C01540;
+      }
+    }
+    img{
+      display: block;
+      width: 390px;
+      margin: 0 auto;
+    }
+  }
+  .item-right{
+    margin-left: 8px;
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    position: relative;
+    ul{
+      // height: 408px;
+      overflow-y: scroll;
+      &::-webkit-scrollbar{
+        display:none;
+      }
+      padding: 0 24px;
+      li{
+        height: 72px;
+        border-bottom: 1px solid #eee;
+        .item-right-scroll{
+          overflow-x: scroll;
+          white-space:nowrap;
+          display: flex;
+          align-items: center;
+          height: 72px;
+          &::-webkit-scrollbar{
+            display:none;
+          }
+        }
+        .name{
+          min-width: 88px;
+          width: 88px;
+          text-align: center;
+        }
+        .checkbox-box{
+          display: flex;
+          align-items: center;
+          .check-bor{
+            display: flex;
+            align-items: center;
+            height: 40px;
+            padding: 0 10px 0 14px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+    .foot-btn-box{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: #fff;
+      height: 64px;
+      box-sizing: border-box;
+      padding: 0 24px;
+      .btn-box{
+        height: 64px;
+        display: flex;
+        border-top: 1px solid #ccc;
+        align-items: center;
+        .btn{
+          padding: 0 24px;
+          height: 32px;
+          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+          border-radius: 4px;
+          text-align: center;
+          line-height: 32px;
+          margin-left: auto;
+          color: #fff;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/pages/practice/components/practice3.vue
+++ b/src/pages/practice/components/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 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>
--- a/src/pages/practice/components/preview.vue
+++ b/src/pages/practice/components/preview.vue
+<template>
+  <div class="preview-box">
+    <div class="content-left">
+      <div class="text-box">
+        <div class="name">文案编辑</div>
+        <el-input
+          class="textarea"
+          auto-complete=""
+          type="textarea"
+          :rows="2"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </div>
+      <div class="upload-box">
+        <div class="name">上传图片</div>
+        <el-upload
+          class="upload-demo"
+          :limit=1
+          action="/api/opera/v1/file/upload"
+          :file-list="fileList"
+          :on-change="successImg"
+          :on-remove="removeImg"
+          list-type="picture">
+          <el-button class="btn" size="small" type="primary" icon="el-icon-picture-outline">点击上传</el-button>
+        </el-upload>
+      </div>
+      <div class="foot-btn-box">
+        <div class="btn-box">
+          <!-- <div class="btn">点此预览</div> -->
+          <div class="btn" @click="confirm">确认提交</div>
+        </div>
+      </div>
+    </div>
+    <div class="content-right">
+      <!-- app弹窗  小程序  -->
+      <div class="mobile-box" v-if="showActiveIndex == 0 || showActiveIndex == 3">
+        <div class="content-box">
+          <div class="img" v-if="url != ''" :style="getStyle"></div>
+          <div class="text" v-html="textarea" v-if="textarea != ''"></div>
+          <div class="btn" v-if="textarea != '' || url != ''">我知道了</div>
+        </div>
+      </div>
+      <!-- push消息 -->
+      <div class="mobile2-box" v-if="showActiveIndex == 1">
+        <div class="content-box">
+          <div class="text" v-html="textarea"></div>
+        </div>
+      </div>
+      <!-- 微信群发助手 -->
+      <div class="mobile3-box" v-if="showActiveIndex == 2">
+        <div class="content-box">
+          <img src="https://zws-imgs-pub.ezijing.com/static/public/f3a5ad7453575fadcf3e4d19132c412b.png" alt="">
+          <div class="content">
+            <div class="text" v-html="textarea"></div>
+            <div class="icon"></div>
+          </div>
+        </div>
+      </div>
+      <!-- 短信 https://zws-imgs-pub.ezijing.com/static/public/5b287657925b6560f288bdfdc1a790f5.png -->
+      <div class="mobile4-box" v-if="showActiveIndex == 4">
+        <div class="content-box">
+          <div class="content">
+            <div class="text" v-html="textarea"></div>
+            <div class="icon"></div>
+          </div>
+        </div>
+      </div>
+      <!-- 邮件 -->
+      <div class="mobile5-box" v-if="showActiveIndex == 5">
+        <div class="content-box" v-html="textarea"></div>
+        <div class="img" v-if="url != ''" :style="getStyle"></div>
+      </div>
+      <!-- 邮件 -->
+      <div class="mobile6-box" v-if="showActiveIndex == 6">
+        <div class="content-box">
+          <div class="img" v-if="url != ''" :style="getStyle"></div>
+          <div class="text" v-html="textarea" v-if="textarea != ''"></div>
+          <div class="btn" v-if="textarea != '' || url != ''">我知道了</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      textarea: '',
+      fileList: [],
+      url: '',
+      showActiveIndex: 0
+    }
+  },
+  mounted() {
+    this.countDomHeight()
+    this.showActiveIndex = window.sessionStorage.indexTouchActive
+    console.log(this.showActiveIndex, '===123')
+  },
+  methods: {
+    countDomHeight() {
+      $('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
+    },
+    successImg(file) {
+      this.url = file.url
+      this.$forceUpdate()
+    },
+    removeImg(file) {
+      this.url = ''
+      this.$forceUpdate()
+    },
+    confirm() {
+      this.$emit('confirm', this.textarea)
+    }
+  },
+  computed: {
+    getStyle() {
+      return `background:url(${this.url});background-size: cover;`
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.preview-box{
+  display: flex;
+  height: 473px;
+  padding-top: 16px;
+  .content-left{
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    position: relative;
+    padding: 16px 16px 0;
+    box-sizing: border-box;
+    .text-box{
+      display: flex;
+    }
+    .name{
+      width: 84px;
+      font-size: 16px;
+      color: #666666;
+      line-height: 22px;
+    }
+    .textarea{
+      height: 200px;
+      ::v-deep{
+        textarea{
+          resize: none;
+          height: 200px;
+        }
+      }
+    }
+    .upload-box{
+      padding-top: 40px;
+      display: flex;
+      // align-items: center;
+      .name{
+        line-height: 32px;
+      }
+      .btn{
+        height: 32px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        border: none;
+      }
+    }
+    .foot-btn-box{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 24px;
+      box-sizing: border-box;
+    }
+    .btn-box{
+      border-top: 1px solid #eee;
+      height: 64px;
+      display: flex;
+      align-items: center;
+      .btn{
+        text-align: center;
+        line-height: 32px;
+        color: #fff;
+        width: 104px;
+        height: 32px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        font-size: 14px;
+        color: #F8F8F8;
+        cursor: pointer;
+        margin-right: 16px;
+      }
+    }
+  }
+  .content-right{
+    width: 500px;
+    height: 100%;
+    background: #fff;
+    position: relative;
+    margin-left: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .mobile-box{
+      width: 201px;
+      height: 391px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/d186d0e04e598fa45553764cbc74246d.png);
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      &.mobile2{
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/6b64bbea7dc7f083830d9642fae48043.png);
+        background-size: 100% 100%;
+        .pops{
+          margin: 46px auto 0 auto;
+          width: 157px;
+          height: 66px;
+          background: url(https://zws-imgs-pub.ezijing.com/static/public/d7a3e0f7e2b3e293736febd540683a53.png);
+          background-size: 100% 100%;
+        }
+      }
+      .content-box{
+        width: 154px;
+        margin: 0 auto;
+        border-radius: 4px;
+        background: #fff;
+        .img{
+          width: 100%;
+          height: 70px;
+        }
+        .text{
+          padding: 5px;
+          font-size: 12px;
+          color: #000000;
+          line-height: 17px;
+        }
+        .btn{
+          width: 154px;
+          height: 26px;
+          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+          border-radius: 0px 0px 4px 4px;
+          font-size: 12px;
+          color: #F8F8F8;
+          line-height: 26px;
+          text-align: center;
+        }
+      }
+    }
+    .mobile2-box{
+      width: 201px;
+      height: 391px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/6b64bbea7dc7f083830d9642fae48043.png);
+      background-size: 100% 100%;
+      .content-box{
+        margin: 46px auto 0 auto;
+        width: 157px;
+        height: 66px;
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/d7a3e0f7e2b3e293736febd540683a53.png);
+        background-size: 100% 100%;
+        .text{
+          width: 145px;
+          font-size: 12px;
+          color: #220E01;
+          line-height: 17px;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          padding-top: 24px;
+          margin: 0 auto;
+        }
+      }
+    }
+    .mobile3-box{
+      width: 201px;
+      height: 391px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/f22aae1e2e4d1e9b5ea89ee672df00fe.png);
+      background-size: 100% 100%;
+      .content-box{
+        display: flex;
+        width: 152px;
+        margin: 0 auto;
+        padding-top: 71px;
+        img{
+          width: 17px;
+          height: 17px;
+          margin-right: 5px;
+        }
+        .content{
+          position: relative;
+          flex: 1;
+          background: #fff;
+          padding: 5px;
+          .text{
+            font-size: 12px;
+            color: #444444;
+            line-height: 17px;
+          }
+          .icon{
+            position: absolute;
+            top: 5px;
+            left: -3px;
+            width: 4px;
+            height: 6px;
+            background: url(https://zws-imgs-pub.ezijing.com/static/public/bb379871ee8bc0a8bef0ff83916ed09f.png);
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+    .mobile4-box{
+      width: 201px;
+      height: 391px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/2ee8953c39f5d287d034043fb197720e.png);
+      background-size: 100% 100%;
+      .content-box{
+        padding-top: 98px;
+        .content{
+          position: relative;
+          width: 142px;
+          background: #E9E9EB;
+          border-radius: 8px;
+          padding: 5px;
+          margin: 0 auto;
+        }
+        .text{
+          font-size: 12px;
+          color: #000000;
+          line-height: 17px;
+        }
+        .icon{
+          position: absolute;
+          bottom: 0px;
+          left: -4px;
+          width: 9px;
+          height: 9px;
+          background: url(https://zws-imgs-pub.ezijing.com/static/public/b927de84f5c053512319b92d5b23a346.png);
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .mobile5-box{
+      width: 201px;
+      height: 391px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/df62e7df9ad44f1bab8945bacced37d1.png);
+      background-size: 100% 100%;
+      position: relative;
+      .content-box{
+        width: 152px;
+        margin: 0 auto;
+        padding-top: 105px;
+        font-size: 12px;
+        color: #222222;
+        line-height: 16px;
+      }
+      .img{
+        position: absolute;
+        bottom: 54px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 164px;
+        height: 82px;
+      }
+    }
+    .mobile6-box{
+      width: 425px;
+      height: 243px;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/6b95bdf6f60dd8db51c0753594cfbf13.png);
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      &.mobile2{
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/6b64bbea7dc7f083830d9642fae48043.png);
+        background-size: 100% 100%;
+        .pops{
+          margin: 46px auto 0 auto;
+          width: 157px;
+          height: 66px;
+          background: url(https://zws-imgs-pub.ezijing.com/static/public/d7a3e0f7e2b3e293736febd540683a53.png);
+          background-size: 100% 100%;
+        }
+      }
+      .content-box{
+        width: 276px;
+        margin: 0 auto;
+        border-radius: 4px;
+        background: #fff;
+        .img{
+          width: 100%;
+          height: 44px;
+        }
+        .text{
+          padding: 5px;
+          font-size: 12px;
+          color: #000000;
+          line-height: 17px;
+        }
+        .btn{
+          width: 100%;
+          height: 26px;
+          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+          border-radius: 0px 0px 4px 4px;
+          font-size: 12px;
+          color: #F8F8F8;
+          line-height: 26px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/pages/practice/components/tabForm1.vue
+++ b/src/pages/practice/components/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="请输入内容"></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: [],
+      select6Options: []
+    }
+  },
+  mounted() {
+    const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
+    this.setArrData(opt, 'select2Options')
+    this.setArrData(['不在弹出', '限制次数内弹出', '每次弹出'], 'select3Options')
+    this.setArrData(['天', '小时'], 'select4Options')
+    this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
+    this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/components/tabForm2.vue
+++ b/src/pages/practice/components/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: [],
+      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() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/components/tabForm3.vue
+++ b/src/pages/practice/components/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: [],
+      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() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/components/tabForm4.vue
+++ b/src/pages/practice/components/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: [],
+      select6Options: []
+    }
+  },
+  mounted() {
+    const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
+    this.setArrData(opt, 'select2Options')
+    this.setArrData(['不在弹出', '限制次数内弹出', '每次弹出'], 'select3Options')
+    this.setArrData(['天', '小时'], 'select4Options')
+    this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
+    this.getUserConfig()
+  },
+  methods: {
+    getUserConfig() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/components/tabForm5.vue
+++ b/src/pages/practice/components/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: [],
+      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() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/components/tabForm6.vue
+++ b/src/pages/practice/components/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: [],
+      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() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/components/tabForm7.vue
+++ b/src/pages/practice/components/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 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: ['仅发送一次', '基于用户事件触发', '周期性推送'],
+      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: ''
+      },
+      options: [
+        {
+          value: '1',
+          label: '立即弹窗'
+        },
+        {
+          value: '2',
+          label: '在制定页面显示弹窗'
+        }
+      ],
+      select1Options: [],
+      select2Options: [],
+      select3Options: [],
+      select4Options: [],
+      select5Options: [],
+      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() {
+      api
+        .getUserConfig({ case_id: 4 })
+        .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>
--- a/src/pages/practice/index.vue
+++ b/src/pages/practice/index.vue
+<template>
+  <div>
+    <div class="head-steps">
+      <div class="title">产品分析</div>
+      <ul class="steps-box">
+        <li @click="stepChange(0)" :class="dataParam.stepIndex == 0 && 'active'">1. 产品分析</li>
+        <li @click="stepChange(1)" :class="dataParam.stepIndex == 1 && 'active'">2. 用户分析</li>
+        <li @click="stepChange(2)" :class="dataParam.stepIndex == 2 && 'active'">3. 用户触达</li>
+      </ul>
+    </div>
+    <template>
+      <practice1 @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
+      <practice2 @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
+      <practice3 @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3>
+    </template>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+import practice1 from './components/practice1'
+import practice2 from './components/practice2'
+import practice3 from './components/practice3'
+export default {
+  components: {
+    practice1,
+    practice2,
+    practice3
+  },
+  data() {
+    return {
+      dataParam: {
+        stepIndex: 0
+      },
+      formData: {}
+    }
+  },
+  methods: {
+    stepChange(n) {
+      this.dataParam.stepIndex = n
+    },
+    step1Confirm(val) {
+      this.formData.production_detail = val.production_detail
+      this.formData.fund_detail = val.fund_detail
+      this.formData.invest_detail = val.invest_detail
+      this.dataParam.stepIndex = 1
+    },
+    step2Confirm(val) {
+      console.log(val)
+      this.dataParam.stepIndex = 2
+      this.formData.characteristic_score = val
+    },
+    step3Confirm(val) {
+      const sessData = JSON.parse(window.sessionStorage.caseData)
+      this.formData.case_id = sessData.id
+      this.formData.reach_scheme = val
+      this.formData.characteristic_id = sessData.characteristics[0].id
+      api
+        .allSubmit(this.formData)
+        .then(response => {
+          if (parseInt(response.code) === 0) {
+            window.sessionStorage.resultData = JSON.stringify(response.data)
+            this.$router.push({
+              path: '/result'
+            })
+          }
+        })
+        .finally(() => {
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.head-steps{
+  height: 123px;
+  background: #FFFFFF;
+  padding: 0 16px;
+  box-sizing: border-box;
+  .title{
+    line-height: 54px;
+    border-bottom: 1px solid #eee;
+  }
+  .steps-box{
+    display: flex;
+    padding-top: 12px;
+    li{
+      padding-left: 63px;
+      box-sizing: border-box;
+      cursor: pointer;
+      height: 44px;
+      line-height: 44px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #666666;
+      flex: 1;
+      background: url(https://zws-imgs-pub.ezijing.com/static/public/077728fa84beeb3ca66095e8b5cb0707.png);
+      background-size:100% 100%;
+      &:nth-child(1){
+        padding-left: 40px;
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/a6651985e66b96cc689907f71b02a539.png);
+        background-size: 100% 100%;
+      }
+      &:nth-child(1){
+        &.active{
+          background: url(https://zws-imgs-pub.ezijing.com/static/public/ea86673a7d822c4a6c575a418a68f687.png);
+          background-size:100% 100%;
+          color: #fff;
+        }
+      }
+      // https://zws-imgs-pub.ezijing.com/static/public/ea86673a7d822c4a6c575a418a68f687.png
+      &.active{
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/f2c7aa268f33a6c7281636dfcf2783f2.png);
+        background-size:100% 100%;
+        color: #fff;
+      }
+      &:hover{
+        background: url(https://zws-imgs-pub.ezijing.com/static/public/5ca979e697a63db443b286ee6dcab381.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.practice-box{
+  display: flex;
+}
+</style>
--- a/src/pages/result/index.vue
+++ b/src/pages/result/index.vue
+<template>
+  <div class="result-box">
+    <div class="content-left">
+      <div class="score-box">
+        <div class="num">{{ data.gross_score }}分</div>
+        <img src="https://zws-imgs-pub.ezijing.com/static/public/1f326db6fcf71805f2ff2de653deffc2.png" alt="">
+      </div>
+      <div class="text">恭喜您，成绩很优秀，继续保持哦。建议您在<span>#产品分析#</span>方面进一步学习和提升，再选择案例进行练习。</div>
+      <img class="img-bottom" src="https://zws-imgs-pub.ezijing.com/static/public/d0d57e03e79a4a5dea5993fd67ff9a7e.png" alt="">
+    </div>
+    <div class="content-right">
+      <div class="chart-box">
+        <ul class="chart">
+          <li>
+            <div class="item" :style="getHeight(parseInt(data.production_analyze.score / data.production_analyze.score_sum * 100))"></div>
+            <div class="text">产品分析</div>
+          </li>
+          <li>
+            <div class="item" :style="getHeight(parseInt(data.user_analyze.score / data.user_analyze.score_sum * 100))"></div>
+            <div class="text">用户分析</div>
+          </li>
+          <li>
+            <div class="item" :style="getHeight(parseInt(data.reach_analyze.score / data.reach_analyze.score_sum * 100))"></div>
+            <div class="text">用户触达</div>
+          </li>
+        </ul>
+        <div class="flag">
+          <div class="item">
+            <div class="icon"></div>
+            <div class="text">得分</div>
+          </div>
+          <div class="item">
+            <div class="icon"></div>
+            <div class="text">失分</div>
+          </div>
+        </div>
+      </div>
+      <div class="foot-btn-box">
+        <div class="btn-box">
+          <div class="btn" @click="contince">这个案例我要再来一次</div>
+          <div class="btn" @click="$router.push({ path: '/index' })">我要选择其他案例</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      data: {}
+    }
+  },
+  computed: {
+    getHeight() {
+      return (num) => {
+        return `height:${num}%`
+      }
+    }
+  },
+  created() {
+    this.data = JSON.parse(window.sessionStorage.resultData)
+    console.log(this.data, '123===')
+  },
+  methods: {
+    contince () {
+      const sessData = JSON.parse(window.sessionStorage.caseData)
+      const param = {}
+      param.case_id = sessData.id
+      param.characteristic_id = sessData.characteristics[0].id
+      api
+        .clearScore(param)
+        .then(response => {
+          if (parseInt(response.code) === 0) {
+            this.$router.push({
+              path: '/practice'
+            })
+          }
+        })
+        .finally(() => {
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.result-box{
+  position: relative;
+  display: flex;
+  height: 100%;
+  .content-left{
+    flex: 1;
+    background: #fff;
+    margin-right: 8px;
+    padding-bottom: 35px;
+    .score-box{
+      width: 178px;
+      height: 180px;
+      margin: 0 auto;
+      position: relative;
+      padding-top: 16px;
+      .num{
+        position: absolute;
+        top: 107px;
+        left: 0;
+        font-size: 26px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 37px;
+        width: 100%;
+        text-align: center;
+      }
+      img{
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+    .text{
+      width: 584px;
+      font-size: 16px;
+      color: #444444;
+      line-height: 32px;
+      margin: 32px auto 16px auto;
+    }
+    .img-bottom{
+      width: 400px;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+  .content-right{
+    position: relative;
+    flex: 1;
+    background: #fff;
+    margin-left: 8px;
+    .chart-box{
+      width: 500px;
+      margin: 0 auto;
+      padding-top: 80px;
+      .chart{
+        border-bottom: 1px solid #eee;
+        display: flex;
+        justify-content: space-around;
+        li{
+          width: 30px;
+          height: 337px;
+          background: rgba(253, 200, 201, 0.5);
+          position: relative;
+          .item{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 30px;
+            height: 0%;
+            background: #FB9193;
+          }
+          .text{
+            position: absolute;
+            bottom: -32px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60px;
+            text-align: center;
+            color: #444444;
+            line-height: 20px;
+          }
+        }
+      }
+      .flag{
+        display: flex;
+        justify-content: center;
+        padding-top: 65px;
+        .item{
+          display: flex;
+          align-items: center;
+          .icon{
+            width: 10px;
+            height: 10px;
+            background: #F37A77;
+            margin-right: 5px;
+          }
+          .text{
+            font-size: 14px;
+            color: #444444;
+            line-height: 20px;
+          }
+          &:nth-child(1){
+            margin-right: 20px;
+          }
+          &:nth-child(2){
+            margin-left: 20px;
+            .icon{
+              background: #FEE4E4;
+            }
+          }
+        }
+      }
+    }
+  }
+  .foot-btn-box{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    width: 100%;
+    height: 64px;
+    padding: 0 16px;
+    box-sizing: border-box;
+    .btn-box{
+      border-top: 1px solid #eee;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .btn{
+        cursor: pointer;
+        padding: 0 24px;
+        font-size: 14px;
+        color: #F8F8F8;
+        line-height: 32px;
+        height: 32px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        text-align: center;
+        &:nth-child(2){
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -6,7 +6,7 @@ export default [
    path: '/',
    component: Layout,
    children: [
-      { path: '', redirect: '/caseSelection' },
+      { path: '', redirect: '/explain' },
      /* 首页 */
      // { path: '/index', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/home') },
      /* 修改密码 */
@@ -24,11 +24,11 @@ export default [
        path: '/userTrigger',
        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/userTrigger/index.vue')
      },
-      /* 背景选择 */
+      // /* 背景选择 */
-      {
+      // {
-        path: '/caseSelection',
+      //   path: '/caseSelection',
-        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/caseSelection/index.vue')
+      //   component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/caseSelection/index.vue')
-      },
+      // },
      /* 背景选择 */
      {
        path: '/productAnalysis',
@@ -38,6 +38,26 @@ export default [
      {
        path: '/score',
        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/score/index.vue')
+      },
+      /* 说明 */
+      {
+        path: '/explain',
+        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/home/explain.vue')
+      },
+      /* 实操基地 */
+      {
+        path: '/index',
+        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/home/index.vue')
+      },
+      /* 实操基地 */
+      {
+        path: '/practice',
+        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/practice/index.vue')
+      },
+      /* 结果页面 */
+      {
+        path: '/result',
+        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/result/index.vue')
      }
    ]
  }

--- a/src/style.scss
+++ b/src/style.scss
@@ -104,7 +104,7 @@ body {
  color: #222;
  font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
    'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
-  background-color: #f7f8fa;
+  background-color: #f1f1f1;
 }
 .empty {