提交 3488f4c6 authored 作者: pengxiaohui's avatar pengxiaohui

优化更新

上级 35b07d87
module.exports = {
domain: 'dev.ezijing.com',
url: 'https://x-training2.ezijing.com/api',
url: 'https://xtraining2.ezijing.com/api',
webpack: {
externals: {
CKEDITOR: 'window.CKEDITOR',
......
......@@ -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 => {
......
<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>
......@@ -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;
......
......@@ -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{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论