优化更新

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://x-training2.ezijing.com/api',
+  url: 'https://xtraining2.ezijing.com/api',
   webpack: {
     externals: {
       CKEDITOR: 'window.CKEDITOR',

src/pages/home/index.vue

@@ -142,7 +142,7 @@ export default {
       window.sessionStorage.caseData = JSON.stringify(item)
       const param = {}
       param.case_id = item.id
-      param.characteristic_id = item.characteristics[0].id
+      param.characteristic_id = item.characteristics[0] ? item.characteristics[0].id : ''
       api
         .clearScore(param)
         .then(response => {

src/pages/practice/components/practice1.vue

 <template>
   <div class="practice-box">
-    <div class="item-left">
+    <div class="item-left" ref="pdf_el">
+      <span v-show="showFullscreenBtn" class="icon el-icon-full-screen" @click="handleFullscreen" :title="pdfIsFullscreen ? '点击退出全屏模式':'点击进入全屏模式'"></span>
+      <embed id="emb" class="embed" width="100%" height="100%" :src="data.accessory" />
+    </div>
+    <div class="item-right">
       <div class="heads">
         <div class="text">
           设计和开展营销活动的基础和必要前提是熟悉各种金融产品特性和关键信息。请首先阅读此案例中产品的相关说明书、合同、产品概要、业务规则或其他信息，并在页面下方的产品分析环节，依次回答各金融产品的关键信息。
         </div>
         <div class="downs" @click="goPage(data.accessory)">产品说明书下载</div>
       </div>
-      <div class="content-box">
-        <!-- <div class="title pdf-get-height">产品说明书</div> -->
-        <!-- <div class="tit-h2">序言</div> -->
-        <div class="text pdf-height embed-height"><embed class="embed" width="100%" height="100%" :src="data.accessory" /></div>
-      </div>
-    </div>
-    <div class="item-right">
       <ul class="tab-btn">
         <template v-for="(item, index) in tabBtnText">
           <li @click="tabChange(index)" :class="index == tabIndex && 'active'" :key="index">{{ item }}</li>
@@ -83,7 +80,9 @@ export default {
       input: '',
       tabIndex: 0,
       tabBtnText: ['产品概括', '基金投资与净值表现', '投资本基金涉及的费用'],
-      formData: {}
+      formData: {},
+      pdfIsFullscreen: false,
+      showFullscreenBtn: false
     }
   },
   created() {
@@ -115,6 +114,9 @@ export default {
     $(document).keydown(function(event) {
       _this.$forceUpdate()
     })
+    document.querySelector('#emb').addEventListener('load', () => {
+      this.showFullscreenBtn = true
+    }, false)
   },
   methods: {
     tabCaseBtn() {
@@ -131,10 +133,10 @@ export default {
       })
     },
     countDomHeight() {
-      $('.practice-box').css('height', $('.app-main').height() - 145 + 'px')
-      $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
-      $('.embed-height').css('height', $('.item-left').height() - $('.item-left .heads').outerHeight() - 50 + 'px')
-      $('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
+      // $('.practice-box').css('height', $('.app-main').height() - 145 + 'px')
+      // $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
+      // $('.embed-height').css('height', $('.item-left').height() - $('.item-left .heads').outerHeight() - 50 + 'px')
+      // $('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
     },
     tabChange(n) {
       this.tabIndex = n
@@ -193,6 +195,35 @@ export default {
       } else {
         this.$emit('step1Confirm', this.formData)
       }
+    },
+    handleFullscreen() {
+      const el = this.$refs.pdf_el
+      if (this.pdfIsFullscreen) {
+        this.exitFullscreen()
+      } else {
+        this.launchFullscreen(el)
+      }
+      this.pdfIsFullscreen = !this.pdfIsFullscreen
+    },
+    launchFullscreen(element) {
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen()
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen()
+      }
+    },
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
     }
   }
 }
@@ -201,12 +232,31 @@ export default {
 .practice-box{
   display: flex;
   width: 100%;
-  height: 473px;
+  height: 600px;
+  padding-bottom:20px;
   // margin-top: 16px;
   .item-left{
     margin-right: 18px;
     flex: 1;
     height: 100%;
+    position:relative;
+    // background: #fff;
+    padding-left:10px;
+    .icon{
+      position:absolute;
+      left:18%;
+      top:18px;
+      z-index:11;
+      font-size:18px;
+      color:#fff;
+      font-weight:bold;
+      cursor:pointer;
+    }
+  }
+  .item-right{
+    margin-left: 18px;
+    flex: 1;
+    height: 100%;
     // background: #fff;
     .heads{
       // width: 100%;
@@ -214,6 +264,7 @@ export default {
       background: url(https://zws-imgs-pub.ezijing.com/static/public/1bee3c4894350a47b4c9898e7efd3954.png);
       background-size: 100% 100%;
       padding: 25px 36px 15px;
+      margin-bottom:10px;
       .text{
         font-size: 14px;
         color: rgba(55, 165, 217, .8);
@@ -230,41 +281,6 @@ export default {
         margin-bottom: 5px;
       }
     }
-    .content-box{
-      padding-bottom: 24px;
-      padding-top: 11px;
-      box-sizing: border-box;
-      // background: #fff;
-      .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: 18px;
-    flex: 1;
-    height: 100%;
-    // background: #fff;
     .tab-btn{
       width: 100%;
       height: 30px;
@@ -398,7 +414,4 @@ export default {
     }
   }
 }
-.embed{
-  transform: translateX(-30px);
-}
 </style>

src/pages/practice/components/practice2.vue

@@ -50,7 +50,7 @@
     <div class="result-box" v-show="isResult">
       <div class="item-left">
         <template v-if="resultCharacteristic.deduct_score_times >= 3">
-          <div class="title">您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，返回重新开始。</div>
+          <div class="title">您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，选择返回重新开始或者继续下一步。</div>
         </template>
         <template v-else>
           <div v-if="resultCharacteristic.status == 1" class="title">您所筛选出的用户群适合于您所选案例产品的营销</div>
@@ -88,6 +88,7 @@
             <template v-if="resultCharacteristic.deduct_score_times >= 3">
               <!-- 返回案例选择 -->
               <div class="btn btn-null" @click="goPage('/index')">返回案例选择</div>
+              <div class="btn btn-null" @click="$emit('step2Confirm', score)">继续下一步</div>
             </template>
             <template v-else>
               <!-- 进入下一页 -->
@@ -288,9 +289,6 @@ export default {
     box-sizing: border-box;
     .img-content-scroll{
       overflow-y: scroll;
-      &::-webkit-scrollbar{
-        display:none;
-      }
     }
   }
   .img{
@@ -346,9 +344,6 @@ export default {
       padding: 10px 45px;
       background: url(https://zws-imgs-pub.ezijing.com/static/public/5e97a87eb010afc9843eb9d25f88ba18.png);
       background-size: 100% 100%;
-      &::-webkit-scrollbar{
-        display:none;
-      }
       li{
         height: 72px;
         border-bottom: 1px solid #46658F;

src/style.scss

@@ -114,24 +114,24 @@ body {
   color: #999;
 }
 
-body::-webkit-scrollbar{
+::-webkit-scrollbar{
   width: 8px;
   height: 8px;
 }
-body::-webkit-scrollbar-button{
+::-webkit-scrollbar-button{
   width: 0;
   height: 0;
 }
-body::-webkit-scrollbar-track{
+::-webkit-scrollbar-track{
 }
-body::-webkit-scrollbar-thumb{
+::-webkit-scrollbar-thumb{
   border-radius: 8px;
   background-color: rgba(0, 203, 255, .5);
 }
-body::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 203, 255, 1);
 }
-body::-webkit-scrollbar-thumb:active {
+::-webkit-scrollbar-thumb:active {
   background-color: rgba(0, 203, 255, 1);
 }
 .el-message--error{