Skip to content

X
x-training
提交 3d19d4a5 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

开发实操3.1

上级 daad3b2f
隐藏空白字符变更
内嵌 并排
正在显示 包含 1753 行增加 和 549 行删除
package-lock.json
浏览文件 @ 3d19d4a5
...@@ -2031,6 +2031,11 @@ ...@@ -2031,6 +2031,11 @@
"resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz", "resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=" "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28="
}, },
"blueimp-md5": {
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
"integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
},
"bn.js": { "bn.js": {
"version": "5.1.3", "version": "5.1.3",
"resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz", "resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz",
...@@ -3631,6 +3636,14 @@ ...@@ -3631,6 +3636,14 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"echarts": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"zrender": "4.3.2"
}
},
"ee-first": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
...@@ -10015,10 +10028,9 @@ ...@@ -10015,10 +10028,9 @@
"dev": true "dev": true
}, },
"qs": { "qs": {
"version": "6.9.4", "version": "6.9.6",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
"integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc=", "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
"dev": true
}, },
"query-string": { "query-string": {
"version": "4.3.4", "version": "4.3.4",
...@@ -10478,6 +10490,11 @@ ...@@ -10478,6 +10490,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true "dev": true
}, },
"resize-detector": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
"integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
},
"resize-observer-polyfill": { "resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz", "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
...@@ -12439,6 +12456,16 @@ ...@@ -12439,6 +12456,16 @@
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz", "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==" "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
}, },
"vue-echarts": {
"version": "5.0.0-beta.0",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
"integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
"requires": {
"core-js": "^3.4.4",
"lodash": "^4.17.15",
"resize-detector": "^0.1.10"
}
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602499032728&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz", "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602499032728&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz",
...@@ -13326,6 +13353,11 @@ ...@@ -13326,6 +13353,11 @@
"dev": true "dev": true
} }
} }
},
"zrender": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
} }
} }
} }
package.json
浏览文件 @ 3d19d4a5
...@@ -74,6 +74,8 @@ ...@@ -74,6 +74,8 @@
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"dependencies": { "dependencies": {
"qs": "^6.9.6",
"blueimp-md5": "^2.18.0",
"@ckeditor/ckeditor5-build-classic": "^23.1.0", "@ckeditor/ckeditor5-build-classic": "^23.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5", "@ckeditor/ckeditor5-vue2": "^1.0.5",
"axios": "^0.20.0", "axios": "^0.20.0",
...@@ -91,6 +93,8 @@ ...@@ -91,6 +93,8 @@
"vue-meta-info": "^0.1.7", "vue-meta-info": "^0.1.7",
"vue-router": "^3.4.6", "vue-router": "^3.4.6",
"vue-template-compiler": "^2.6.12", "vue-template-compiler": "^2.6.12",
"vuex": "^3.5.1" "vuex": "^3.5.1",
"echarts": "^4.7.0",
"vue-echarts": "^5.0.0-beta.0"
} }
} }
src/api/common.js
浏览文件 @ 3d19d4a5
...@@ -9,80 +9,103 @@ export function uploadFile(data) { ...@@ -9,80 +9,103 @@ export function uploadFile(data) {
}) })
} }
/**
* 获取学生信息
*/
export function getUserSchoolInfo() {
return httpRequest.get('/api/zy/user/getinfo')
}
/**
* 获取学员得分记录
*/
export function getRecordsScore(params) {
return httpRequest.get('/api/opera/v3/api/training/rank/member-score-records', { params })
}
/**
* 获取学员得分记录
*/
export function getRank(params) {
return httpRequest.get('/api/opera/v3/api/training/rank/case-training', { params })
}
/** /**
* 获取用户等级 * 获取用户等级
*/ */
export function getUserGrade() { export function getUserGrade() {
return httpRequest.get('/api/opera/v1/api/user/level') return httpRequest.get('/api/opera/v3/api/user/level')
} }
/* 获取案例列表 */ /* 获取案例列表 */
export function getCaseList(params) { export function getCaseList(params) {
return httpRequest.get('/api/opera/v1/api/cases', { params }) return httpRequest.get('/api/opera/v3/api/cases', { params })
} }
/* 选中案例 */ /* 选中案例 */
export function confirmCases(data) { export function confirmCases(data) {
return httpRequest.post('/api/opera/v1/api/case/select', data) return httpRequest.post('/api/opera/v3/api/case/select', data)
} }
/* 用户群列表 */ /* 用户群列表 */
export function getUserGroup(params) { export function getUserGroup(params) {
return httpRequest.get('/api/opera/v1/api/groups', { params }) return httpRequest.get('/api/opera/v3/api/groups', { params })
} }
/* 用户群列表详情 */ /* 用户群列表详情 */
export function getUserGroupDetail(params) { export function getUserGroupDetail(params) {
return httpRequest.get(`/api/opera/v1/oprations/${params}/cgroup`) return httpRequest.get(`/api/opera/v3/oprations/${params}/cgroup`)
} }
/* 触达列表 */ /* 触达列表 */
export function getTriggerList(params) { export function getTriggerList(params) {
return httpRequest.get('/api/opera/v1/api/reach/list', { params }) return httpRequest.get('/api/opera/v3/api/reach/list', { params })
} }
/* 用户触达提交 */ /* 用户触达提交 */
export function submitTrigger(data) { export function submitTrigger(data) {
return httpRequest.post('/api/opera/v1/api/reach/submit', data) return httpRequest.post('/api/opera/v3/api/reach/submit', data)
} }
/* 用户触达提交文本 */ /* 用户触达提交文本 */
export function submitContext(data) { export function submitContext(data) {
return httpRequest.post('/api/opera/v1/api/reach/submit/context', data) return httpRequest.post('/api/opera/v3/api/reach/submit/context', data)
} }
/* 特征提交 */ /* 特征提交 */
export function submitCharacteristic(data) { export function submitCharacteristic(data) {
return httpRequest.post('/api/opera/v1/api/characteristic/submit', data) return httpRequest.post('/api/opera/v3/api/characteristic/submit', data)
} }
/* 获取所以分类 */ /* 获取所以分类 */
export function getClassifyList(params) { export function getClassifyList(params) {
return httpRequest.get('/api/opera/v2/api/training/categories', { params }) return httpRequest.get('/api/opera/v3/api/training/categories', { params })
} }
/* 3.0 接口 */ /* 3.0 接口 */
/* 获取案例分类 */ /* 获取案例分类 */
export function getUserConfig(id) { export function getUserConfig(id) {
return httpRequest.get(`/api/opera/v2/api/training/${id}/user-use-configs`) return httpRequest.get(`/api/opera/v3/api/training/${id}/user-use-configs`)
} }
/* 获取案例列表 */ /* 获取案例列表 */
export function newGetCaseList(id) { export function newGetCaseList(id) {
return httpRequest.get(`/api/opera/v2/api/training/${id}/cases`) return httpRequest.get(`/api/opera/v3/api/training/${id}/cases`)
} }
/* 提交特征 */ /* 提交特征 */
export function submitCharacteristics(data) { export function submitCharacteristics(data) {
return httpRequest.post('/api/opera/v2/api/training/characteristic/submit', data) return httpRequest.post('/api/opera/v3/api/training/characteristic/submit', data, {
headers: { 'Content-Type': 'application/json' }
})
} }
/* 提交特征 */ /* 提交特征 */
export function clearScore(data) { export function clearScore(data) {
return httpRequest.post('/api/opera/v2/api/training/characteristic/clear-score', data) return httpRequest.post('/api/opera/v3/api/training/characteristic/clear-score', data)
} }
/* 提交特征 */ /* 提交特征 */
export function allSubmit(data) { export function allSubmit(data) {
return httpRequest.post('/api/opera/v2/api/training/statistics/submit', data) return httpRequest.post('/api/opera/v3/api/training/statistics/submit', data)
} }
src/main.js
浏览文件 @ 3d19d4a5
...@@ -5,9 +5,15 @@ import App from './app.vue' ...@@ -5,9 +5,15 @@ import App from './app.vue'
import './style.scss' import './style.scss'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import BeforeEnter from './utils/beforeEnter' import BeforeEnter from './utils/beforeEnter'
import Echarts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/tooltip'
const before = new BeforeEnter() const before = new BeforeEnter()
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.component('v-chart', Echarts)
/* 设置全局变量 */ /* 设置全局变量 */
window.G = Vue.prototype.$GLOBAL = { window.G = Vue.prototype.$GLOBAL = {
......
src/pages/home/index.vue
浏览文件 @ 3d19d4a5
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
<swiper ref="mySwiper" :options="swiperOption"> <swiper ref="mySwiper" :options="swiperOption">
<template v-for="(item, index) in caseItemList"> <template v-for="(item, index) in caseItemList">
<swiper-slide :key="index"> <swiper-slide :key="index">
<div class="slide-item" @click="showItem(item)"> <div class="slide-item">
<div class="pot-title">{{ item.name }}</div> <div class="pot-title">{{ item.name }}</div>
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<ul class="item-sele-list"> <ul class="item-sele-list">
<template v-for="(opt, sindex) in item.itemChiData"> <template v-for="(opt, sindex) in item.cases">
<li :key="sindex + 's'"> <li :key="sindex + 's'">
<div class="cont" @click="selectCase(opt)"> <div class="cont" @click="selectCase(opt)">
<span>{{ opt.name }}</span> <span>{{ opt.name }}</span>
...@@ -108,9 +108,7 @@ export default { ...@@ -108,9 +108,7 @@ export default {
.then(response => { .then(response => {
this.caseData = response.data this.caseData = response.data
this.caseItemList = response.data[0].children this.caseItemList = response.data[0].children
if (window.sessionStorage.homeTabIndex) { this.tabCase(parseInt(0))
this.tabCase(parseInt(window.sessionStorage.homeTabIndex))
}
}) })
.finally(() => { .finally(() => {
}) })
......
src/pages/practice/components/practice1.vue
浏览文件 @ 3d19d4a5
...@@ -24,7 +24,12 @@ ...@@ -24,7 +24,12 @@
<template v-for="(item, index) in formData.production_detail"> <template v-for="(item, index) in formData.production_detail">
<li :key="'p'+index"> <li :key="'p'+index">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<el-input v-model="formData.production_detail[index].content" placeholder="请输入内容"></el-input> <template v-if="item.show_type !== 'textarea'">
<el-input v-model="formData.production_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
<template v-else>
<el-input type="textarea" v-model="formData.production_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
</li> </li>
</template> </template>
</ul> </ul>
...@@ -32,7 +37,12 @@ ...@@ -32,7 +37,12 @@
<template v-for="(item, index) in formData.fund_detail"> <template v-for="(item, index) in formData.fund_detail">
<li :key="'pd'+index"> <li :key="'pd'+index">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<el-input v-model="formData.fund_detail[index].content" placeholder="请输入内容"></el-input> <template v-if="item.show_type !== 'textarea'">
<el-input v-model="formData.fund_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
<template v-else>
<el-input type="textarea" v-model="formData.fund_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
</li> </li>
</template> </template>
</ul> </ul>
...@@ -40,15 +50,22 @@ ...@@ -40,15 +50,22 @@
<template v-for="(item, index) in formData.invest_detail"> <template v-for="(item, index) in formData.invest_detail">
<li :key="'pdd'+index"> <li :key="'pdd'+index">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<el-input v-model="formData.invest_detail[index].content" placeholder="请输入内容"></el-input> <template v-if="item.show_type !== 'textarea'">
<el-input v-model="formData.invest_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
<template v-else>
<el-input type="textarea" v-model="formData.invest_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
</li> </li>
</template> </template>
</ul> </ul>
</div> </div>
<div class="next-btnnext-btn"> <div class="next-btnnext-btn">
<div class="border"> <!-- <div class="border"> -->
<div class="btn" @click="confirm">确定并进入下一步</div> <div class="new-le-btn" @click="$router.push({ path: '/explain' })"></div>
</div> <div class="left-btn" @click="confirm"></div>
<div class="right-btn" @click="$router.push({ path: '/index' })"></div>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -72,6 +89,7 @@ export default { ...@@ -72,6 +89,7 @@ export default {
created() { created() {
const caseStorageData = JSON.parse(window.sessionStorage.caseData) const caseStorageData = JSON.parse(window.sessionStorage.caseData)
this.data = caseStorageData this.data = caseStorageData
// console.log(this.data, '12321')
this.formData.production_detail = caseStorageData.production_detail.map(item => { this.formData.production_detail = caseStorageData.production_detail.map(item => {
item.content = '' item.content = ''
return item return item
...@@ -84,7 +102,7 @@ export default { ...@@ -84,7 +102,7 @@ export default {
item.content = '' item.content = ''
return item return item
}) })
console.log(this.formData) console.log(this.formData, '=1233')
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
...@@ -100,9 +118,9 @@ export default { ...@@ -100,9 +118,9 @@ export default {
}, },
methods: { methods: {
countDomHeight() { countDomHeight() {
$('.practice-box').css('height', $('.app-main').height() - 139 + 'px') $('.practice-box').css('height', $('.app-main').height() - 145 + 'px')
$('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px') $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
$('.embed-height').css('height', $('.item-left').height() - $('.item-left .heads').outerHeight() - 20 + '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())) $('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
}, },
tabChange(n) { tabChange(n) {
...@@ -127,12 +145,24 @@ export default { ...@@ -127,12 +145,24 @@ export default {
// } // }
// } // }
// }) // })
this.$confirm('有部分内容您还没有填写，是否确认进入下一步', '提示', { this.$confirm('有部分内容您还没有填写，请填写', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '继续填写', cancelButtonText: '继续填写',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$emit('step1Confirm', this.formData) // this.$emit('step1Confirm', this.formData)
if (proForm) {
this.tabIndex = 0
return false
}
if (fundForm) {
this.tabIndex = 1
return false
}
if (invForm) {
this.tabIndex = 2
return false
}
}).catch(() => { }).catch(() => {
if (proForm) { if (proForm) {
this.tabIndex = 0 this.tabIndex = 0
...@@ -159,9 +189,9 @@ export default { ...@@ -159,9 +189,9 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
height: 473px; height: 473px;
margin-top: 16px; // margin-top: 16px;
.item-left{ .item-left{
margin-right: 8px; margin-right: 18px;
flex: 1; flex: 1;
height: 100%; height: 100%;
// background: #fff; // background: #fff;
...@@ -180,7 +210,7 @@ export default { ...@@ -180,7 +210,7 @@ export default {
height: 21px; height: 21px;
margin: 0 auto; margin: 0 auto;
font-size: 14px; font-size: 14px;
text-decoration: underline; // text-decoration: underline;
color: #71CDF9; color: #71CDF9;
border-bottom: 1px solid #71CDF9; border-bottom: 1px solid #71CDF9;
margin-top: 17px; margin-top: 17px;
...@@ -218,34 +248,46 @@ export default { ...@@ -218,34 +248,46 @@ export default {
} }
} }
.item-right{ .item-right{
margin-left: 8px; margin-left: 18px;
flex: 1; flex: 1;
height: 100%; height: 100%;
// background: #fff; // background: #fff;
.tab-btn{ .tab-btn{
width: 100%; width: 100%;
height: 48px; height: 30px;
// background: #f1f1f1; // background: #f1f1f1;
display: flex; display: flex;
li{ li{
cursor: pointer; cursor: pointer;
flex: 1; flex: 1;
text-align: center; text-align: center;
line-height: 48px;
font-size: 18px; font-size: 18px;
color: #666666; color: #666666;
line-height: 48px; line-height: 30px;
background: rgba(31, 100, 158, 0);
box-shadow: 0px 0px 15px 0px #3D87A2 inset;
border-radius: 4px 4px 0px 0px;
font-size: 14px;
color: #3F8CA8;
&:nth-child(2){
margin: 0 4px;
}
&.active{ &.active{
color: #C01540; box-shadow: none;
background: #fff; color: #fff;
background: rgba(107, 231, 255, .8);
} }
} }
} }
.form{ .form{
padding: 0 24px; // padding: 0 24px;
ul{ ul{
background: url(https://zws-imgs-pub.ezijing.com/static/public/89898a60e953a3a6c301fa9a6e586ae5.png);
background-size: 100% 100%;
height: 360px; height: 360px;
overflow-y: scroll; overflow-y: scroll;
padding: 0 20px;
box-sizing: border-box;
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display:none; display:none;
} }
...@@ -253,39 +295,68 @@ export default { ...@@ -253,39 +295,68 @@ export default {
li{ li{
align-items: center; align-items: center;
width: 100%; width: 100%;
border-bottom: 1px solid #eee; border-bottom: 1px solid #46658F;
height: 72px; // height: 72px;
padding: 15px 0;
display: flex; display: flex;
align-items: center;
.name{ .name{
font-size: 14px; font-size: 14px;
color: #444444; color: #58C0DA;
line-height: 14px;
margin-right: 23px;
white-space: nowrap; white-space: nowrap;
margin: 0 16px 0 10px;
}
::v-deep{
.el-input__inner{
background: none;
border: 1px solid #58C0D9;
color: #58C0DA;
}
.el-textarea__inner{
background: none;
border: 1px solid #58C0D9;
color: #58C0DA;
}
} }
} }
} }
.next-btnnext-btn{ .next-btnnext-btn{
padding: 0 16px; // padding: 0 16px;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
.border{ display: flex;
border-top: 1px solid #eee; padding-top: 10px;
display: flex; justify-content: space-between;
align-items: center; .new-le-btn{
height: 64px; cursor: pointer;
width: 174px;
height: 39px;
background-size: 100% 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
} }
.btn{ .left-btn{
width: 174px;
height: 39px;
background-size: 100% 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/790cbdae6590715dc1e0e48ebcd8e3c9.png);
cursor: pointer; cursor: pointer;
margin-left: auto; // margin-left: auto;
height: 32px; // height: 32px;
width: 160px; // width: 160px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%); // background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px; // border-radius: 4px;
font-size: 14px; // font-size: 14px;
color: #F8F8F8; // color: #F8F8F8;
line-height: 32px; // line-height: 32px;
text-align: center; // text-align: center;
}
.right-btn{
cursor: pointer;
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/a198053dcb4335500c0f8d3961279e78.png);
background-size: 100% 100%;
// margin-left: auto;
} }
} }
} }
......
src/pages/practice/components/practice2.vue
浏览文件 @ 3d19d4a5
...@@ -3,12 +3,16 @@ ...@@ -3,12 +3,16 @@
<div class="practice2-box" v-show="!isResult"> <div class="practice2-box" v-show="!isResult">
<div class="read" v-show="islookRun"> <div class="read" v-show="islookRun">
<div class="title">请阅读相关信息，阅读后点击“阅读完毕”按钮，在下一页您需要进行用户分析</div> <div class="title">请阅读相关信息，阅读后点击“阅读完毕”按钮，在下一页您需要进行用户分析</div>
<img class="img" :src="data.url" alt=""> <div class="img-content">
<div class="btn-box"> <div class="img-content-scroll">
<div class="btn-cont"> <img class="img" :src="data.url" alt="">
<div class="btn" @click="islookRun = false">阅读完毕</div>
</div> </div>
</div> </div>
<div class="btn-box">
<div class="new-le-btn" @click="$emit('changeStepIndex', 0)"></div>
<div class="left-btn" @click="islookRun = false"></div>
<div class="right-btn" @click="$router.push({ path: '/index' })"></div>
</div>
</div> </div>
<div class="answer-box" v-show="!islookRun"> <div class="answer-box" v-show="!islookRun">
<div class="form-box"> <div class="form-box">
...@@ -31,18 +35,20 @@ ...@@ -31,18 +35,20 @@
</div> </div>
<div class="foot-btn-box"> <div class="foot-btn-box">
<div class="btn-box"> <div class="btn-box">
<img v-show="islook" :src="data.url" alt=""> <div class="btn btn1" @click="islookRun = true"></div>
<div class="btn" @click="islook = !islook">查看资料</div> <div class="cen-btn">
<div class="btn" @click="confirm">确认并进入下一步</div> <div class="btn btn2" @click="islook = !islook"></div>
<div class="btn btn3" @click="confirm"></div>
<img v-show="islook" :src="data.url" alt="">
<div class="img-pop" v-show="islook" @click="islook = false"></div>
</div>
<div class="btn btn4" @click="$router.push({ path: '/index' })"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="result-box" v-show="isResult"> <div class="result-box" v-show="isResult">
<div class="item-left"> <div class="item-left">
<div class="title">
<!-- 您所筛选出的用户群，适合于<span>#风险偏好较低#</span>的用户群。 -->
</div>
<template v-if="resultCharacteristic.deduct_score_times >= 3"> <template v-if="resultCharacteristic.deduct_score_times >= 3">
<div class="title">您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，返回重新开始。</div> <div class="title">您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，返回重新开始。</div>
</template> </template>
...@@ -51,7 +57,6 @@ ...@@ -51,7 +57,6 @@
<div v-if="resultCharacteristic.status == 2" class="title">您某些选项的选择有严重问题，您需要重新做出选择</div> <div v-if="resultCharacteristic.status == 2" class="title">您某些选项的选择有严重问题，您需要重新做出选择</div>
<div v-if="resultCharacteristic.status == 3" class="title">您所筛选出的用户群，不适合营销您所选择的营销产品</div> <div v-if="resultCharacteristic.status == 3" class="title">您所筛选出的用户群，不适合营销您所选择的营销产品</div>
</template> </template>
<img src="https://zws-imgs-pub.ezijing.com/static/public/14cd9f545600187e8d5be61f6e98cd2c.png" alt="">
</div> </div>
<div class="item-right"> <div class="item-right">
<div class="swiper-container"> <div class="swiper-container">
...@@ -79,13 +84,18 @@ ...@@ -79,13 +84,18 @@
</div> </div>
<div class="foot-btn-box"> <div class="foot-btn-box">
<div class="btn-box"> <div class="btn-box">
<div class="btn btn1" @click="isResult = false"></div>
<template v-if="resultCharacteristic.deduct_score_times >= 3"> <template v-if="resultCharacteristic.deduct_score_times >= 3">
<div class="btn" @click="goPage('/index')">返回案例选择</div> <!-- 返回案例选择 -->
<div class="btn btn-null" @click="goPage('/index')">返回案例选择</div>
</template> </template>
<template v-else> <template v-else>
<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> <div class="btn btn-null" v-if="resultCharacteristic.status == 1" @click="$emit('step2Confirm', score)">进入下一页</div>
<!-- 我在考虑下 -->
<div class="btn btn-null" @click="isResult = false" v-if="resultCharacteristic.status == 2 || resultCharacteristic.status == 3">我在考虑下</div>
</template> </template>
<div class="btn btn3" @click="$router.push({ path: '/index' })"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -107,6 +117,7 @@ export default { ...@@ -107,6 +117,7 @@ export default {
data: {}, data: {},
islook: false, islook: false,
islookRun: true, islookRun: true,
isClose: false,
checkAll: false, checkAll: false,
checkedCities: [], checkedCities: [],
cities: cityOptions, cities: cityOptions,
...@@ -117,6 +128,9 @@ export default { ...@@ -117,6 +128,9 @@ export default {
score: 0 score: 0
} }
}, },
created() {
this.countDomHeight()
},
mounted() { mounted() {
this.countDomHeight() this.countDomHeight()
const caseStorageData = JSON.parse(window.sessionStorage.caseData) const caseStorageData = JSON.parse(window.sessionStorage.caseData)
...@@ -127,14 +141,14 @@ export default { ...@@ -127,14 +141,14 @@ export default {
item.options.map(c => { item.options.map(c => {
dataArr.push(c.option) dataArr.push(c.option)
}) })
item.answerCount = dataArr // item.answerCount = dataArr
item.answerCount = []
item.options.map(chi => { item.options.map(chi => {
chi.answer = 0 chi.answer = 0
return chi return chi
}) })
return item return item
}) })
console.log(this.checkboxData, '123---123')
}, },
methods: { methods: {
getOptData(item) { getOptData(item) {
...@@ -143,8 +157,9 @@ export default { ...@@ -143,8 +157,9 @@ export default {
}) })
}, },
countDomHeight() { countDomHeight() {
$('.result-box').css('height', $('.app-main').height() - 139 + 'px') $('.result-box').css('height', $('.app-main').height() - 184 + 'px')
$('.practice2-box').css('height', $('.app-main').height() - 139 + 'px') $('.practice2-box').css('height', $('.app-main').height() - 184 + 'px')
$('.img-content-scroll').css('height', $('.app-main').height() - 295 + 'px')
$('.answer-box .setHeight3').css('height', $('.practice2-box').height() - 108 + 'px') $('.answer-box .setHeight3').css('height', $('.practice2-box').height() - 108 + 'px')
$('.result-box .setHeight2').css('height', $('.result-box').height() - 64 + 'px') $('.result-box .setHeight2').css('height', $('.result-box').height() - 64 + 'px')
}, },
...@@ -164,7 +179,11 @@ export default { ...@@ -164,7 +179,11 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
confirm() { confirm() {
let nullFlag = false
this.checkboxData.map(item => { this.checkboxData.map(item => {
if (item.answerCount.length !== 0) {
nullFlag = true
}
return item.options.map(allOpt => { return item.options.map(allOpt => {
const itemFind = item.answerCount.find(c => { return c === allOpt.option }) const itemFind = item.answerCount.find(c => { return c === allOpt.option })
if (itemFind) { if (itemFind) {
...@@ -175,6 +194,17 @@ export default { ...@@ -175,6 +194,17 @@ export default {
return allOpt return allOpt
}) })
}) })
if (!nullFlag) {
this.$confirm('请选择', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
return
}
console.log(this.data) console.log(this.data)
const param = {} const param = {}
param.case_id = this.data.id param.case_id = this.data.id
...@@ -186,8 +216,9 @@ export default { ...@@ -186,8 +216,9 @@ export default {
this.resultCharacteristic = response.data this.resultCharacteristic = response.data
this.isResult = true this.isResult = true
this.$nextTick(() => { this.$nextTick(() => {
$('.item-right-scroll').css('width', `${$(document).width() / 2 - (16 * 5)}px`) $('.item-right-scroll').css('width', `${$(window).width() - 550}px`)
}) })
// $('.item-right-scroll').css('width', `${$(document).width() / 1.8 - (16 * 5)}px`)
this.score = response.data.score this.score = response.data.score
}) })
.finally(() => { .finally(() => {
...@@ -212,7 +243,7 @@ export default { ...@@ -212,7 +243,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.read{ .read{
// height: 100%; // height: 100%;
background: #fff; // background: #fff;
} }
::v-deep{ ::v-deep{
.el-checkbox{ .el-checkbox{
...@@ -227,65 +258,94 @@ export default { ...@@ -227,65 +258,94 @@ export default {
} }
.practice2-box{ .practice2-box{
position: relative; position: relative;
min-height: 473px; // min-height: 473px;
background: #fff; // background: #fff;
margin-top: 16px; // margin-top: 16px;
.title{ .title{
height: 44px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
font-size: 14px; font-size: 14px;
color: #222222; color: #71CDF9;
line-height: 44px; opacity: 0.8;
padding-left: 24px; }
.img-content{
width: 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/09f0468d48fe2c30452a254e96a18c6c.png);
background-size: 100% 100%;
margin-top: 10px;
padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;
.img-content-scroll{
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
}
} }
.img{ .img{
width: 90%; width: 90%;
// width: 644px; // width: 644px;
// height: 60%; // height: 60%;
display: block; display: block;
margin: 16px auto; margin: 0 auto;
} }
.btn-box{ .btn-box{
background: #fff; // background: #fff;
position: sticky; // position: sticky;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
width: 100%; // width: 100%;
height: 63px; // height: 63px;
padding: 0 16px; padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;
.btn-cont{ display: flex;
height: 100%; justify-content: space-between;
border-top: 1px solid #eee; position: relative;
display: flex; .new-le-btn{
align-items: center; cursor: pointer;
.btn{ width: 174px;
width: 104px; height: 39px;
height: 32px; background-size: 100% 100%;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%); background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
border-radius: 4px; }
text-align: center; .left-btn{
line-height: 32px; // position: absolute;
color: #fff; // top: 20px;
cursor: pointer; // left: 50%;
} // -webkit-transform: translateX(-50%);
cursor: pointer;
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e1ae46d764b74385488e10f351f21f28.png);
background-size: 100% 100%;
}
.right-btn{
cursor: pointer;
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/a198053dcb4335500c0f8d3961279e78.png);
background-size: 100% 100%;
// margin-left: auto;
} }
} }
.form-box{ .form-box{
ul{ ul{
// height: 364px; // height: 364px;
overflow-y: scroll; overflow-y: scroll;
padding: 0 24px; padding: 10px 45px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/5e97a87eb010afc9843eb9d25f88ba18.png);
background-size: 100% 100%;
&::-webkit-scrollbar{
display:none;
}
li{ li{
height: 72px; height: 72px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #46658F;
display: flex; display: flex;
align-items: center; align-items: center;
.name{ .name{
width: 88px; width: 88px;
text-align: center; text-align: center;
font-size: 14px;
color: #58C0DA;
} }
.checkbox-box{ .checkbox-box{
display: flex; display: flex;
...@@ -303,38 +363,66 @@ export default { ...@@ -303,38 +363,66 @@ export default {
} }
} }
.foot-btn-box{ .foot-btn-box{
position: absolute; // position: absolute;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
width: 100%; width: 100%;
height: 64px; // height: 64px;
background: #fff; // background: #000;
padding: 0 24px; // padding: 0 24px;
box-sizing: border-box; box-sizing: border-box;
.btn-box{ .btn-box{
position: relative; position: relative;
width: 100%; width: 100%;
border-top: 1px solid #eee; // border-top: 1px solid #eee;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; justify-content: space-between;
// align-items: center;
.cen-btn{
display: flex;
position: relative;
.btn{
&:nth-child(1){
margin-right: 39px;
}
}
}
.img-pop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
// background: rgba(0,0,0,.3);
}
img{ img{
position: absolute; position: absolute;
bottom: 100px; bottom: 100px;
left: 0; left: 0;
width: 644px; width: 644px;
z-index: 9; z-index: 9999999;
} }
.btn{ .btn{
padding: 0 24px; width: 174px;
height: 32px; height: 39px;
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; cursor: pointer;
&.btn1{
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
background-size: 100% 100%;
}
&.btn2{
background: url(https://zws-imgs-pub.ezijing.com/static/public/df90048a9c27f6b24f1b8c21d7c4d8b4.png);
background-size: 100% 100%;
}
&.btn3{
background: url(https://zws-imgs-pub.ezijing.com/static/public/9b171e8318ca3bd1ef0ceff2fe7072ce.png);
background-size: 100% 100%;
}
&.btn4{
background: url(https://zws-imgs-pub.ezijing.com/static/public/f3b7191f9c4a66b92c20a611dcc46d42.png);
background-size: 100% 100%;
}
} }
} }
} }
...@@ -345,23 +433,17 @@ export default { ...@@ -345,23 +433,17 @@ export default {
height: 473px; height: 473px;
margin-top: 16px; margin-top: 16px;
.item-left{ .item-left{
margin-right: 8px; // flex: 1;
flex: 1;
height: 100%; height: 100%;
background: #fff; // background: #fff;
.title{ .title{
width: 300px; width: 300px;
height: 43px;
font-size: 20px; font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC; color: #71CDF9;
font-weight: 400; opacity: 0.8;
color: #666666;
line-height: 30px;
margin: 0 auto;
padding: 16px 0;
text-align: center; text-align: center;
span{ margin-right: 128px;
color: #C01540;
}
} }
img{ img{
display: block; display: block;
...@@ -370,36 +452,53 @@ export default { ...@@ -370,36 +452,53 @@ export default {
} }
} }
.item-right{ .item-right{
margin-left: 8px;
flex: 1; flex: 1;
height: 100%; height: 100%;
background: #fff; // background: #fff;
position: relative; position: relative;
ul{ ul{
// box-sizing: border-box;
// height: 408px; // height: 408px;
overflow-y: scroll; overflow-y: scroll;
background: url(https://zws-imgs-pub.ezijing.com/static/public/5e97a87eb010afc9843eb9d25f88ba18.png);
background-size: 100% 100%;
padding: 16px 36px;
box-sizing: border-box;
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display:none; display:none;
} }
padding: 0 24px;
li{ li{
height: 72px; height: 72px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #46658F;
.item-right-scroll{ .item-right-scroll{
overflow-x: scroll; overflow-x: scroll;
white-space:nowrap; white-space:nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
height: 72px; height: 72px;
// &::-webkit-scrollbar{ &::-webkit-scrollbar{
// display:none; display:none;
// } }
}
::v-deep{
.el-checkbox.is-checked{
background: #194162;
opacity: 0.8;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
color: #68829C;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
border-color: #68829C;
}
} }
.name{ .name{
min-width: 88px; min-width: 88px;
width: 88px; width: 88px;
text-align: center; text-align: center;
white-space: break-spaces; white-space: break-spaces;
color: #58C0DA;
font-size: 14px;
} }
.checkbox-box{ .checkbox-box{
display: flex; display: flex;
...@@ -420,28 +519,73 @@ export default { ...@@ -420,28 +519,73 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: #fff; // background: #fff;
height: 64px; height: 64px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px; // padding: 0 24px;
.btn-box{ .btn-box{
height: 64px; height: 64px;
display: flex; display: flex;
border-top: 1px solid #ccc; // border-top: 1px solid #ccc;
align-items: center; align-items: center;
justify-content: space-between;
.btn{ .btn{
padding: 0 24px; width: 174px;
height: 32px; height: 39px;
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; cursor: pointer;
&.btn1{
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
background-size: 100% 100%;
}
&.btn3{
background: url(https://zws-imgs-pub.ezijing.com/static/public/f3b7191f9c4a66b92c20a611dcc46d42.png);
background-size: 100% 100%;
}
&.btn2-1{
background: url(https://zws-imgs-pub.ezijing.com/static/public/9b171e8318ca3bd1ef0ceff2fe7072ce.png);
background-size: 100% 100%;
}
&.btn-null{
background: url(https://zws-imgs-pub.ezijing.com/static/public/2b1321f8b96152236720e7c6f9e991c5.png);
background-size: 100% 100%;
font-size: 16px;
color: #71CDF9;
line-height: 39px;
text-align: center;
}
} }
} }
} }
} }
} }
::v-deep{
.el-checkbox.is-bordered{
// background: rgba(61, 135, 162, 1);
box-shadow:inset 0px 0px 20px 0px #3D87A2;
border: none;
}
.el-checkbox.is-checked{
box-shadow: none;
background: #6BE7FF;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
border-color: #fff;
background: none;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
font-size: 14px;
color: #FEFFFF;
font-weight: normal;
}
.el-checkbox__inner{
border-color:#71CDF9;;
background: none;
}
.el-checkbox__label{
color:#71CDF9;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
border-color:#71CDF9;
}
}
</style> </style>
src/pages/practice/components/practice3.vue
浏览文件 @ 3d19d4a5
...@@ -4,33 +4,35 @@ ...@@ -4,33 +4,35 @@
<ul class="item-left-content"> <ul class="item-left-content">
<template v-for="(item, index) in navItem"> <template v-for="(item, index) in navItem">
<li :class="navItemIndex == index && 'active'" :key="index" @click="navItemChange(index)"> <li :class="navItemIndex == index && 'active'" :key="index" @click="navItemChange(index)">
<div class="icon"> <!-- <div class="icon">
<img :src="item.icon" alt="" class="icons"> <img :src="item.icon" alt="" class="icons">
<img :src="item.iconActive" alt="" class="iconActive"> <img :src="item.iconActive" alt="" class="iconActive">
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> --> <img src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt="">
</div> </div> -->
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
</li> </li>
</template> </template>
</ul> </ul>
<div class="item-right-content"> <div class="item-right-content">
<div class="form-all"> <div class="form-contents">
<form1 v-show="navItemIndex == 1 - 1"></form1> <div class="form-all">
<form2 v-show="navItemIndex == 2 - 1"></form2> <form1 v-show="navItemIndex == 1 - 1"></form1>
<form3 v-show="navItemIndex == 3 - 1"></form3> <form2 v-show="navItemIndex == 2 - 1"></form2>
<form4 v-show="navItemIndex == 4 - 1"></form4> <form3 v-show="navItemIndex == 3 - 1"></form3>
<form5 v-show="navItemIndex == 5 - 1"></form5> <form4 v-show="navItemIndex == 4 - 1"></form4>
<form6 v-show="navItemIndex == 6 - 1"></form6> <form5 v-show="navItemIndex == 5 - 1"></form5>
<form7 v-show="navItemIndex == 7 - 1"></form7> <form6 v-show="navItemIndex == 6 - 1"></form6>
<form7 v-show="navItemIndex == 7 - 1"></form7>
</div>
</div> </div>
<div class="foot-btn-box"> <div class="foot-btn-box">
<div class="btn-box"> <div class="btn" @click="$emit('changeStepIndex', 1)"></div>
<div class="btn" @click="isEdit = true">确定并进入下一步</div> <div class="btn" @click="isEdit = true"></div>
</div> <div class="btn" @click="$router.push('/index')"></div>
</div> </div>
</div> </div>
</div> </div>
<preview :navItemIndex="navItemIndex" v-show="isEdit" @confirm="confirm"></preview> <preview :navItemIndex="navItemIndex" v-show="isEdit" @backPage="backPage" @confirm="confirm"></preview>
</div> </div>
</template> </template>
<script> <script>
...@@ -106,8 +108,11 @@ export default { ...@@ -106,8 +108,11 @@ export default {
this.countDomHeight() this.countDomHeight()
}, },
methods: { methods: {
backPage() {
this.isEdit = false
},
countDomHeight() { countDomHeight() {
$('.practice3-box').css('height', $('.app-main').height() - 139 + 'px') $('.practice3-box').css('height', $('.app-main').height() - 189 + 'px')
// $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + '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') // $('.embed-height').css('height', $('.item-left').height() - $('.item-left .title').outerHeight() - $('.item-left .tit-h2').outerHeight() - $('.item-left .heads').outerHeight() - 20 + 'px')
}, },
...@@ -116,6 +121,17 @@ export default { ...@@ -116,6 +121,17 @@ export default {
window.sessionStorage.indexTouchActive = n window.sessionStorage.indexTouchActive = n
}, },
confirm(val) { confirm(val) {
if (val === '') {
this.$confirm('请填写文案', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
return
}
this.$emit('step3Confirm', val) this.$emit('step3Confirm', val)
// console.log(val) // console.log(val)
} }
...@@ -133,15 +149,108 @@ export default { ...@@ -133,15 +149,108 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep{
.text-line .line{
background: #58C0D9 !important;
}
.text-line .text{
color: #58C0D9 !important;
}
.form-box .form .name{
color: #58C0DA;
}
.el-radio__input.is-checked .el-radio__inner{
border-color: #fff;
background: rgba(107, 231, 255, 1);
}
.el-radio__input.is-checked + .el-radio__label{
color: #fff;
}
.el-radio.is-bordered.is-checked{
border-color: #71CDF9;
background: rgba(107, 231, 255, 1);
box-shadow: none;
}
.el-radio.is-bordered{
border: none;
box-shadow:inset 0px 0px 20px 0px #3D87A2;
}
.el-radio__inner{
background: none;
border: 1px solid #71CDF9;
}
.el-radio{
color: #71CDF9;
}
.el-checkbox.is-bordered{
// background: rgba(61, 135, 162, 1);
box-shadow:inset 0px 0px 20px 0px #3D87A2;
border: none;
}
.el-checkbox.is-checked{
box-shadow: none;
// background: #6BE7FF;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
border-color: #6BE7FF;
background: none;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
color: #6BE7FF;
}
.el-checkbox__inner{
border-color:#71CDF9;
background: none;
}
.el-checkbox__label{
color:#71CDF9;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
border-color:#71CDF9;
}
.el-input__inner{
border: 1px solid #58C0D9;
background: none !important;
color: #71CDF9;
}
.el-input__inner::-webkit-input-placeholder{
color: #68829C;
}
.el-select .el-input.is-focus .el-input__inner{
border: 1px solid #58C0D9;
}
.el-select .el-input__inner:focus{
border: 1px solid #58C0D9;
}
.el-select .el-input__inner:hover{
border: 1px solid #58C0D9;
}
.el-input__icon{
color: #71CDF9;
}
.content-bottom-form{
border-top: 1px solid #58C0D9 !important;
}
.el-select__caret{
color: #71CDF9 !important;
}
.el-input-number__decrease:hover{
border-color: #58C0D9;
}
}
.practice3-box{ .practice3-box{
display: flex; display: flex;
margin-top: 16px; margin-top: 16px;
.item-left-content{ .item-left-content{
width: 200px; width: 170px;
height: 410px;
// height: 473px; // height: 473px;
margin-right: 16px; margin-right: 16px;
background: #fff; // background: #fff;
padding: 20px 10px; padding: 20px 0;
background: url(https://zws-imgs-pub.ezijing.com/static/public/eb59a5d485adb191bfda193c6486e69d.png);
background-size: 100% 100%;
box-sizing: border-box; box-sizing: border-box;
li{ li{
cursor: pointer; cursor: pointer;
...@@ -151,7 +260,7 @@ export default { ...@@ -151,7 +260,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
&.active{ &.active{
background: #FFF4F7; // background: #FFF4F7;
.icon{ .icon{
.icons{ .icons{
display: none; display: none;
...@@ -161,7 +270,7 @@ export default { ...@@ -161,7 +270,7 @@ export default {
} }
} }
.text{ .text{
color: #C01540; color: #6BE7FF;
font-weight: bold; font-weight: bold;
} }
} }
...@@ -178,54 +287,95 @@ export default { ...@@ -178,54 +287,95 @@ export default {
} }
.text{ .text{
font-size: 16px; font-size: 16px;
color: #999999; color: #58C0DA;
margin-left: 10px; width: 100%;
text-align: center;
} }
} }
} }
.item-right-content{ .item-right-content{
// padding: 30px 0;
// box-sizing: border-box;
position: relative; position: relative;
flex: 1; flex: 1;
background: #fff; height: 490px;
overflow: hidden;
// height: 410px;
// overflow: hidden;
// padding-bottom: 30px;
// background: #fff;
.form-contents{
background: url(https://zws-imgs-pub.ezijing.com/static/public/9ae2c5cf27a4d68960e0b9ec994fc650.png);
background-size: 100% 100%;
height: 410px;
overflow: hidden;
padding: 20px 0;
box-sizing: border-box;
}
.form-all{ .form-all{
height: 411px; // box-sizing: border-box;
// padding: 15px 15px 30px 15px;
height: 370px;
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
} }
.foot-btn-box{ .foot-btn-box{
position: absolute; // position: absolute;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
width: 100%; width: 100%;
height: 64px; padding-top: 20px;
background: #fff; // height: 64px;
padding: 0 24px; // background: #fff;
box-sizing: border-box; // padding: 0 24px;
.btn-box{ // box-sizing: border-box;
position: relative; display: flex;
width: 100%; justify-content: space-between;
border-top: 1px solid #eee; .btn{
height: 100%; width: 174px;
display: flex; height: 39px;
align-items: center; cursor: pointer;
img{ &:nth-child(1){
position: absolute; background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
bottom: 100px; background-size: 100% 100%;
left: 0; }
width: 644px; &:nth-child(2){
z-index: 9; background: url(https://zws-imgs-pub.ezijing.com/static/public/9b171e8318ca3bd1ef0ceff2fe7072ce.png);
background-size: 100% 100%;
} }
.btn{ &:nth-child(3){
padding: 0 24px; background: url(https://zws-imgs-pub.ezijing.com/static/public/f3b7191f9c4a66b92c20a611dcc46d42.png);
height: 32px; background-size: 100% 100%;
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;
} }
} }
// .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;
// }
// }
} }
} }
} }
......
src/pages/practice/components/preview.vue
浏览文件 @ 3d19d4a5
<template> <template>
<div class="preview-box"> <div class="preview-box">
<div class="content-left"> <div class="content-left">
<div class="text-box"> <div class="bg-box">
<div class="name">文案编辑</div> <div class="text-box">
<el-input <div class="name">文案编辑</div>
class="textarea" <el-input
auto-complete="" class="textarea"
type="textarea" auto-complete=""
:rows="2" type="textarea"
placeholder="请输入内容" :rows="2"
v-model="textarea"> placeholder="请输入内容"
</el-input> v-model="textarea">
</div> </el-input>
<div class="upload-box" v-if="showActiveIndex == 0 || showActiveIndex == 4 || showActiveIndex == 5 || showActiveIndex == 6 "> </div>
<div class="name">上传图片</div> <div class="upload-box" v-if="showActiveIndex == 0 || showActiveIndex == 4 || showActiveIndex == 5 || showActiveIndex == 6 ">
<el-upload <div class="name">上传图片</div>
class="upload-demo" <el-upload
:limit=1 class="upload-demo"
action="/api/opera/v1/file/upload" :limit=1
:file-list="fileList" action="/api/opera/v1/file/upload"
:on-change="successImg" :file-list="fileList"
:on-remove="removeImg" :on-change="successImg"
list-type="picture"> :on-remove="removeImg"
<el-button class="btn" size="small" type="primary" icon="el-icon-picture-outline">点击上传</el-button> list-type="picture">
</el-upload> <el-button class="btn" size="small" type="primary" icon="el-icon-picture-outline">点击上传</el-button>
</el-upload>
<div class="div-btn">点击上传</div>
</div>
</div> </div>
<div class="foot-btn-box"> <div class="foot-btn-box">
<div class="btn-box"> <div class="btn" @click="$emit('backPage')">返回上一步</div>
<!-- <div class="btn">点此预览</div> --> <div class="btn" @click="confirm">确认提交</div>
<div class="btn" @click="confirm">确认提交</div> <!-- <div class="btn">点此预览</div> -->
</div> <!-- <div class="btn" @click="confirm">确认提交</div> -->
</div> </div>
</div> </div>
<div class="content-right"> <div class="content-right">
<!-- app弹窗 小程序 --> <div class="bg-img">
<div class="mobile-box" v-if="showActiveIndex == 0 || showActiveIndex == 3"> <!-- app弹窗 小程序 -->
<div class="content-box"> <div class="mobile-box" v-if="showActiveIndex == 0 || showActiveIndex == 3">
<div class="img" v-if="url != ''" :style="getStyle"></div> <div class="content-box">
<div class="text" v-html="textarea" v-if="textarea != ''"></div> <div class="img" v-if="url != ''" :style="getStyle"></div>
<div class="btn" v-if="textarea != '' || url != ''">我知道了</div> <div class="text" v-html="textarea" v-if="textarea != ''"></div>
</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> <!-- push消息 -->
<!-- 微信群发助手 --> <div class="mobile2-box" v-if="showActiveIndex == 1">
<div class="mobile3-box" v-if="showActiveIndex == 2"> <div class="content-box">
<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="text" v-html="textarea"></div>
<div class="icon"></div>
</div> </div>
</div> </div>
</div> <!-- 微信群发助手 -->
<!-- 短信 https://zws-imgs-pub.ezijing.com/static/public/5b287657925b6560f288bdfdc1a790f5.png --> <div class="mobile3-box" v-if="showActiveIndex == 2">
<div class="mobile4-box" v-if="showActiveIndex == 4"> <div class="content-box">
<div class="content-box"> <img src="https://zws-imgs-pub.ezijing.com/static/public/f3a5ad7453575fadcf3e4d19132c412b.png" alt="">
<div class="content"> <div class="content">
<div class="text" v-html="textarea"></div> <div class="text" v-html="textarea"></div>
<div class="icon"></div> <div class="icon"></div>
</div>
</div> </div>
</div> </div>
</div> <!-- 短信 https://zws-imgs-pub.ezijing.com/static/public/5b287657925b6560f288bdfdc1a790f5.png -->
<!-- 邮件 --> <div class="mobile4-box" v-if="showActiveIndex == 4">
<div class="mobile5-box" v-if="showActiveIndex == 5"> <div class="content-box">
<div class="content-box" v-html="textarea"></div> <div class="content">
<div class="img" v-if="url != ''" :style="getStyle"></div> <div class="text" v-html="textarea"></div>
</div> <div class="icon"></div>
<!-- 邮件 --> </div>
<div class="mobile6-box" v-if="showActiveIndex == 6"> </div>
<div class="content-box"> </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 class="img" v-if="url != ''" :style="getStyle"></div>
<div class="text" v-html="textarea" v-if="textarea != ''"></div> </div>
<div class="btn" v-if="textarea != '' || url != ''">我知道了</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> </div>
<div class="new-312-btn">
<div class="btn">切换案例</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -102,7 +110,7 @@ export default { ...@@ -102,7 +110,7 @@ export default {
}, },
methods: { methods: {
countDomHeight() { countDomHeight() {
$('.preview-box').css('height', $('.app-main').height() - 139 + 'px') // $('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
}, },
successImg(file) { successImg(file) {
this.url = file.url this.url = file.url
...@@ -133,25 +141,37 @@ export default { ...@@ -133,25 +141,37 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep{
.el-textarea__inner{
background: none;
border: 1px solid #58C0D9;
}
}
.preview-box{ .preview-box{
display: flex; display: flex;
height: 473px; // height: 473px;
padding-top: 16px; padding-top: 16px;
.content-left{ .content-left{
flex: 1; flex: 1;
height: 100%;
background: #fff;
position: relative; position: relative;
padding: 16px 16px 0; // padding: 16px 0 0;
box-sizing: border-box; box-sizing: border-box;
.bg-box{
height: 450px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/f1948050810147cf4bd7fa3c836b1315.png);
background-size: 100% 100%;
padding: 25px 46px;
box-sizing: border-box;
}
.text-box{ .text-box{
display: flex; display: flex;
} }
.name{ .name{
width: 84px; width: 84px;
font-size: 16px;
color: #666666; color: #666666;
line-height: 22px; line-height: 22px;
font-size: 14px;
color: #58C0DA;
} }
.textarea{ .textarea{
height: 200px; height: 200px;
...@@ -159,13 +179,38 @@ export default { ...@@ -159,13 +179,38 @@ export default {
textarea{ textarea{
resize: none; resize: none;
height: 200px; height: 200px;
color: #58C0DA;
} }
} }
} }
.upload-box{ .upload-box{
padding-top: 40px; padding-top: 40px;
display: flex; display: flex;
position: relative;
// align-items: center; // align-items: center;
.upload-demo{
position: absolute;
top: 40px;
left: 80px;
z-index: 9;
::v-deep{
.el-upload{
opacity: .001;
}
}
}
.div-btn{
width: 142px;
height: 43px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4d8e7f0484b7b32db2b05daf82c7742c.png);
background-size: 100% 100%;
transform: translate(-15px, -5px);
font-size: 16px;
font-weight: normal;
color: #00EEFF;
line-height: 43px;
text-align: center;
}
.name{ .name{
line-height: 32px; line-height: 32px;
} }
...@@ -177,42 +222,79 @@ export default { ...@@ -177,42 +222,79 @@ export default {
} }
} }
.foot-btn-box{ .foot-btn-box{
position: absolute; // position: absolute;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
width: 100%; width: 100%;
padding: 0 24px; padding: 20px 0;
box-sizing: border-box; box-sizing: border-box;
}
.btn-box{
border-top: 1px solid #eee;
height: 64px;
display: flex; display: flex;
align-items: center; justify-content: space-between;
.btn{ .btn{
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9520ab07439e78b9337c1f02ed00bb27.png);
background-size: 100% 100%;
font-size: 16px;
font-weight: bold;
color: #71CDF9;
text-align: center; text-align: center;
line-height: 32px; line-height: 39px;
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; cursor: pointer;
margin-right: 16px;
} }
} }
// .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{ .content-right{
width: 500px; width: 455px;
height: 100%;
background: #fff;
position: relative;
margin-left: 16px; margin-left: 16px;
display: flex; // height: 100%;
align-items: center; // background: #fff;
justify-content: center; .new-312-btn{
display: flex;
padding: 20px 0;
.btn{
margin-left: auto;
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9520ab07439e78b9337c1f02ed00bb27.png);
background-size: 100% 100%;
font-size: 16px;
font-weight: bold;
color: #71CDF9;
text-align: center;
line-height: 39px;
cursor: pointer;
}
}
.bg-img{
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4f053216617be493193e374e6b8fc0c8.png);
background-size: 100% 100%;
height: 451px;
}
.mobile-box{ .mobile-box{
width: 201px; width: 201px;
height: 391px; height: 391px;
......
src/pages/practice/index.vue
浏览文件 @ 3d19d4a5
<template> <template>
<div> <div>
<ul class="head-step"> <ul class="head-step">
<li class="active">1.产品分析</li> <li v-for="(item, index) in step" :key="index" :class="dataParam.stepIndex === index && 'active'">{{ item }}</li>
<li>2.用户分析</li>
<li>3.用户触达</li>
<li>4.成绩结果</li>
</ul> </ul>
<!-- <div class="head-steps"> <!-- <div class="head-steps">
<div class="title"> <div class="title">
...@@ -20,9 +17,10 @@ ...@@ -20,9 +17,10 @@
</ul> </ul>
</div> --> </div> -->
<template> <template>
<practice1 @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1> <practice1 @changeStepIndex="changeStepIndex" @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
<!-- <practice2 @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2> <practice2 @changeStepIndex="changeStepIndex" @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
<practice3 @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3> --> <practice3 @changeStepIndex="changeStepIndex" @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3>
<practice4 v-if="dataParam.stepIndex == 3"></practice4>
</template> </template>
</div> </div>
</template> </template>
...@@ -31,21 +29,27 @@ import * as api from '@/api/common.js' ...@@ -31,21 +29,27 @@ import * as api from '@/api/common.js'
import practice1 from './components/practice1' import practice1 from './components/practice1'
import practice2 from './components/practice2' import practice2 from './components/practice2'
import practice3 from './components/practice3' import practice3 from './components/practice3'
import practice4 from '../result/index'
export default { export default {
components: { components: {
practice1, practice1,
practice2, practice2,
practice3 practice3,
practice4
}, },
data() { data() {
return { return {
dataParam: { dataParam: {
stepIndex: 0 stepIndex: 0
}, },
formData: {} formData: {},
step: ['1.产品分析', '2.用户分析', '3.用户触达', '4.成绩结果']
} }
}, },
methods: { methods: {
changeStepIndex(n) {
this.dataParam.stepIndex = parseInt(n)
},
stepChange(n) { stepChange(n) {
this.dataParam.stepIndex = n this.dataParam.stepIndex = n
}, },
...@@ -60,23 +64,50 @@ export default { ...@@ -60,23 +64,50 @@ export default {
this.dataParam.stepIndex = 2 this.dataParam.stepIndex = 2
this.formData.characteristic_score = val this.formData.characteristic_score = val
}, },
step3Confirm(val) { getUserSchoolInfo() {
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 api
.allSubmit(this.formData) .getUserSchoolInfo()
.then(response => { .then(response => {
if (parseInt(response.code) === 0) { this.formData.sso_id = response.id
window.sessionStorage.resultData = JSON.stringify(response.data) this.formData.username = response.realname
this.$router.push({ this.formData.school = response.student_info.school
path: '/result' api
.allSubmit(this.formData)
.then(response => {
if (parseInt(response.code) === 0) {
const resul = response.data
resul.sso_id = this.formData.sso_id
window.sessionStorage.resultData = JSON.stringify(resul)
this.dataParam.stepIndex = 3
// this.$router.push({
// path: '/result'
// })
}
})
.finally(() => {
}) })
}
}) })
.finally(() => { .finally(() => {
}) })
},
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
this.getUserSchoolInfo()
// api
// .allSubmit(this.formData)
// .then(response => {
// if (parseInt(response.code) === 0) {
// window.sessionStorage.resultData = JSON.stringify(response.data)
// this.$router.push({
// path: '/result'
// })
// }
// })
// .finally(() => {
// })
} }
} }
} }
......
src/pages/result/index copy.vue 0 → 100644
浏览文件 @ 3d19d4a5
<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/3e4e378aa05c0672290eb9bcd61218c1.png" alt="">
</div>
<!-- <div class="text">恭喜您，成绩很优秀，继续保持哦。建议您在<span>#产品分析#</span>方面进一步学习和提升，再选择案例进行练习。</div> -->
<div class="text" v-html="resultText"></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: {},
resultText: ''
}
},
computed: {
getHeight() {
return (num) => {
return `height:${num}%`
}
}
},
created() {
this.data = JSON.parse(window.sessionStorage.resultData)
// data.gross_score
// const getText = ''
const textParam = [
{
name: '产品分析',
score: this.data.production_analyze.score / this.data.production_analyze.score_sum * 100
},
{
name: '用户分析',
score: this.data.user_analyze.score / this.data.user_analyze.score_sum * 100
},
{
name: '用户触达',
score: this.data.reach_analyze.score / this.data.reach_analyze.score_sum * 100
}
]
const sortText = textParam.sort((a, b) => { return a.score - b.score })
if (this.data.gross_score < 50) {
this.resultText = `离达标的要求还有一段距离，继续努力哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 50 && this.data.gross_score < 60) {
this.resultText = `离达标的要求很接近了，继续加油哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 60 && this.data.gross_score < 70) {
this.resultText = `恭喜您，已经达标了，真棒！建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 70 && this.data.gross_score < 80) {
this.resultText = `恭喜您，成绩很优秀，继续保持哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 80) {
this.resultText = `恭喜您拿到了高分！继续保持，继续加油哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
}
},
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>
.foot-btn-box{
display: flex;
justify-content: space-between;
.btn{
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/2b1321f8b96152236720e7c6f9e991c5.png);
background-size: 100% 100%;
font-size: 16px;
color: #71CDF9;
text-align: center;
line-height: 39px;
font-weight: bold;
}
}
.result-box{
height: 100%;
.res-content-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>
src/pages/result/index.vue
浏览文件 @ 3d19d4a5
<template> <template>
<div class="result-box"> <div class="result-box">
<div class="content-left"> <div class="res-content-box">
<div class="score-box"> <div class="item-content-left">
<div class="num">{{ data.gross_score }}分</div> <div class="top-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/3e4e378aa05c0672290eb9bcd61218c1.png" alt=""> <div class="title">
</div> <div class="line"></div>
<!-- <div class="text">恭喜您，成绩很优秀，继续保持哦。建议您在<span>#产品分析#</span>方面进一步学习和提升，再选择案例进行练习。</div> --> <div class="texts">成绩查询</div>
<div class="text" v-html="resultText"></div> </div>
<img class="img-bottom" src="https://zws-imgs-pub.ezijing.com/static/public/d0d57e03e79a4a5dea5993fd67ff9a7e.png" alt=""> <ul class="wave-progress">
</div> <li class="wave-blue">
<div class="content-right"> <div class="wave" :style="getStyle(data.production_analyze)"></div>
<div class="chart-box"> <p class="text" data-text="95%">{{ data.production_analyze.score }}</p>
<ul class="chart"> </li>
<li> <li class="wave-orange">
<div class="item" :style="getHeight(parseInt(data.production_analyze.score / data.production_analyze.score_sum * 100))"></div> <div class="wave" :style="getStyle(data.user_analyze)"></div>
<div class="text">产品分析</div> <p class="text" data-text="95%">{{ data.user_analyze.score }}</p>
</li> </li>
<li> <li class="wave-purple">
<div class="item" :style="getHeight(parseInt(data.user_analyze.score / data.user_analyze.score_sum * 100))"></div> <div class="wave" :style="getStyle(data.reach_analyze)"></div>
<div class="text">用户分析</div> <p class="text" data-text="95%">{{ data.user_analyze.score }}</p>
</li> </li>
<li> </ul>
<div class="item" :style="getHeight(parseInt(data.reach_analyze.score / data.reach_analyze.score_sum * 100))"></div> <ul class="text-desc">
<div class="text">用户触达</div> <li>产品分析得分</li>
</li> <li>用户分析得分</li>
</ul> <li>用户触达得分</li>
<div class="flag"> </ul>
<div class="item"> </div>
<div class="icon"></div> <div class="bottom-chart">
<div class="text">得分</div> <div class="title-box">
<div class="left-title">
<div class="line"></div>
<div class="texts">成绩趋势</div>
</div>
<div class="right-title">
<div class="block"></div>
<div class="texts">成绩曲线</div>
</div>
</div> </div>
<div class="item"> <div class="chart-box">
<div class="icon"></div> <line-chart :options="polar" class="line-chart"></line-chart>
<div class="text">失分</div>
</div> </div>
</div> </div>
</div> </div>
<div class="foot-btn-box"> <div class="item-content-right">
<div class="btn-box"> <div class="title">
<div class="btn" @click="contince">这个案例我要再来一次</div> <div class="line"></div>
<div class="btn" @click="$router.push({ path: '/index' })">我要选择其他案例</div> <div class="texts">本周
得分排行榜</div>
</div> </div>
<ul class="nav">
<li class="num">排名</li>
<li class="school-name">学校名称</li>
<li class="name">购买人数</li>
<li class="time">日期</li>
<li class="score">分值</li>
</ul>
<ul class="content-box">
<template v-for="(item, index) in rankData">
<li :key="index">
<div :class="'block block'+ (index + 1)"></div>
<div class="num">{{ item.rank }}</div>
<div class="school-name">{{ item.school }}</div>
<div class="name">{{ item.username }}</div>
<div class="time">{{ getNowTime(item.date_index) }}</div>
<div class="score">{{ item.score }}</div>
</li>
</template>
</ul>
</div> </div>
</div> </div>
<div class="foot-btn-box">
<div class="btn" @click="contince">再来一次本案例</div>
<div class="btn" @click="$router.push({ path: '/index' })">我要选择其他案例</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/common.js' import * as api from '@/api/common.js'
import lineChart from 'vue-echarts/components/ECharts'
export default { export default {
components: {
lineChart
},
data() { data() {
return { return {
data: {}, rankData: [],
resultText: '' data: JSON.parse(window.sessionStorage.resultData),
polar: {
}
} }
}, },
computed: { computed: {
getHeight() {
return (num) => {
return `height:${num}%`
}
}
}, },
created() { created() {
this.data = JSON.parse(window.sessionStorage.resultData) },
// data.gross_score mounted() {
// const getText = '' this.getRecordsScore()
const textParam = [ this.getRank()
{
name: '产品分析',
score: this.data.production_analyze.score / this.data.production_analyze.score_sum * 100
},
{
name: '用户分析',
score: this.data.user_analyze.score / this.data.user_analyze.score_sum * 100
},
{
name: '用户触达',
score: this.data.reach_analyze.score / this.data.reach_analyze.score_sum * 100
}
]
const sortText = textParam.sort((a, b) => { return a.score - b.score })
if (this.data.gross_score < 50) {
this.resultText = `离达标的要求还有一段距离，继续努力哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 50 && this.data.gross_score < 60) {
this.resultText = `离达标的要求很接近了，继续加油哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 60 && this.data.gross_score < 70) {
this.resultText = `恭喜您，已经达标了，真棒！建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 70 && this.data.gross_score < 80) {
this.resultText = `恭喜您，成绩很优秀，继续保持哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 80) {
this.resultText = `恭喜您拿到了高分！继续保持，继续加油哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
}
}, },
methods: { methods: {
getRecordsScore() {
const param = {
sso_id: this.data.sso_id,
start_time: this.getNowTime(1),
end_time: this.getNowTime()
}
api
.getRecordsScore(param)
.then(response => {
if (parseInt(response.code) === 0) {
const data1 = []
const data2 = []
response.data.map((item, index) => {
data1.push(item.score)
data2.push(this.getNowTime(item.date_index))
})
this.polar = {
grid: {
x: 30,
y: 20,
x2: 0,
y2: 30
},
itemStyle: {
// color: 'linear-gradient(0deg, #00A2DB, #35D0E9)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 1, color: '#00A2DB'
}, {
offset: 0, color: '#35D0E9'
}],
global: false // 缺省为 false
}
},
xAxis: {
type: 'category',
data: data2,
axisLabel: {
color: 'rgba(255,255,255,0.3)'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#D4D4D8'],
opacity: 0.1
}
}
},
yAxis: {
// minInterval: 50,
// interval: 50,
splitNumber: 3,
type: 'value',
axisLabel: {
color: 'rgba(255,255,255,0.3)'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#D4D4D8'],
opacity: 0.1
}
}
},
series: [{
data: data1,
type: 'line',
symbol: 'none',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 3
}
}
}
}]
}
this.$forceUpdate()
}
})
.finally(() => {
})
},
getStyle(score) {
return `bottom: ${score.score / score.score_sum * 100}%`
},
getNowTime(n) {
let dateTime = ''
const date = n > 1 ? new Date(n * 1000) : new Date()
const yy = date.getFullYear()
const mm = date.getMonth() + (n === 1 ? 0 : 1)
const dd = date.getDate()
const hh = date.getHours()
const mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
const ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
dateTime = n > 1 ? yy + '-' + mm + '-' + dd : yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
return dateTime
},
getRank() {
const param = {
type: 10,
start: 0,
stop: 9
}
api
.getRank(param)
.then(response => {
if (parseInt(response.code) === 0) {
this.rankData = response.data.list
}
})
.finally(() => {
})
},
contince () { contince () {
const sessData = JSON.parse(window.sessionStorage.caseData) const sessData = JSON.parse(window.sessionStorage.caseData)
const param = {} const param = {}
...@@ -103,9 +240,7 @@ export default { ...@@ -103,9 +240,7 @@ export default {
.clearScore(param) .clearScore(param)
.then(response => { .then(response => {
if (parseInt(response.code) === 0) { if (parseInt(response.code) === 0) {
this.$router.push({ this.$router.go(0)
path: '/practice'
})
} }
}) })
.finally(() => { .finally(() => {
...@@ -115,149 +250,376 @@ export default { ...@@ -115,149 +250,376 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.result-box{ .foot-btn-box{
position: relative; padding: 37px 0;
display: flex; display: flex;
height: 100%; justify-content: space-between;
.content-left{ .btn{
flex: 1; width: 174px;
background: #fff; height: 39px;
margin-right: 8px; background: url(https://zws-imgs-pub.ezijing.com/static/public/2b1321f8b96152236720e7c6f9e991c5.png);
padding-bottom: 35px; background-size: 100% 100%;
.score-box{ font-size: 16px;
width: 178px; color: #71CDF9;
height: 180px; text-align: center;
margin: 0 auto; line-height: 39px;
position: relative; font-weight: bold;
padding-top: 16px; cursor: pointer;
.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; .result-box{
flex: 1; width: 1200px;
background: #fff; margin: 0 auto;
margin-left: 8px; .res-content-box{
.chart-box{ display: flex;
width: 500px; padding-top: 22px;
margin: 0 auto; justify-content: space-between;
padding-top: 80px; }
.chart{ .item-content-left{
border-bottom: 1px solid #eee; // flex: 1;
.top-content{
.title{
display: flex;
.line{
width: 4px;
height: 23px;
background: rgba(49, 209, 233, 1);
}
.texts{
font-size: 22px;
font-weight: bold;
color: #FFFFFF;
background: linear-gradient(0deg, #0080FF 0%, #00C5E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 9px;
line-height: 23px;
}
}
.text-desc{
display: flex; display: flex;
justify-content: space-around;
li{ li{
width: 30px; font-size: 17px;
height: 337px; font-weight: 500;
background: rgba(253, 200, 201, 0.5); color: #FFFFFF;
position: relative; opacity: 0.6;
.item{ margin-right: 68px;
position: absolute; margin-top: 10px;
bottom: 0; &:nth-child(3){
left: 0; margin-right: 0;
width: 30px;
height: 0%;
background: #FB9193;
} }
.text{ }
position: absolute; }
bottom: -32px; }
left: 50%; .bottom-chart{
transform: translateX(-50%); width: 440px;
width: 60px; padding-top: 59px;
text-align: center; .chart-box{
color: #444444; height: 220px;
line-height: 20px; .line-chart{
width: 100%;
height: 100%;
div{
width: 100%;
height: 100%;
} }
} }
} }
.flag{ .title-box{
display: flex; display: flex;
justify-content: center; justify-content: space-between;
padding-top: 65px; .left-title{
.item{
display: flex; display: flex;
align-items: center; .line{
.icon{ width: 4px;
width: 10px; height: 23px;
height: 10px; background: rgba(49, 209, 233, 1);
background: #F37A77;
margin-right: 5px;
} }
.text{ .texts{
font-size: 14px; font-size: 22px;
color: #444444; font-weight: bold;
line-height: 20px; color: #FFFFFF;
background: linear-gradient(0deg, #0080FF 0%, #00C5E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 9px;
line-height: 23px;
} }
&:nth-child(1){ }
margin-right: 20px; .right-title{
display: flex;
.block{
width: 12px;
height: 12px;
background: #00A1DA;
margin-top: 2px;
margin-right: 14px;
} }
&:nth-child(2){ .texts{
margin-left: 20px; font-size: 14px;
.icon{ font-weight: 500;
background: #FEE4E4; color: #FFFFFF;
} opacity: 0.6;
} }
} }
} }
} }
} }
.foot-btn-box{ .item-content-right{
position: absolute; width: 599px;
bottom: 0; .title{
left: 0; display: flex;
background: #fff; .line{
width: 100%; width: 4px;
height: 64px; height: 23px;
padding: 0 16px; background: rgba(49, 209, 233, 1);
box-sizing: border-box; }
.btn-box{ .texts{
border-top: 1px solid #eee; font-size: 22px;
font-weight: bold;
color: #FFFFFF;
background: linear-gradient(0deg, #0080FF 0%, #00C5E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 9px;
line-height: 23px;
}
}
.nav{
display: flex; display: flex;
align-items: center; justify-content: space-around;
height: 100%; padding: 28px 0 17px;
.btn{ li{
cursor: pointer; font-size: 16px;
padding: 0 24px; font-weight: bold;
font-size: 14px; color: #31D1E9;
color: #F8F8F8; opacity: 0.8;
line-height: 32px; }
height: 32px; .num{
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%); width: 50px;
border-radius: 4px;
text-align: center; text-align: center;
&:nth-child(2){ }
margin-left: auto; .school-name{
width: 240px;
text-align: center;
}
.name{
width: 130px;
text-align: center;
}
.time{
width: 81px;
text-align: center;
}
.score{
width: 50px;
text-align: center;
}
}
.content-box{
// display: flex;
li{
display: flex;
justify-content: space-around;
height: 30px;
position: relative;
margin-bottom: 2px;
&:nth-child(odd){
background: rgba(18, 35, 89, 1);
}
.num{
width: 50px;
text-align: center;
}
.school-name{
width: 240px;
text-align: center;
}
.name{
width: 130px;
text-align: center;
}
.time{
width: 81px;
text-align: center;
}
.score{
width: 50px;
text-align: center;
}
.block{
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 30px;
background: linear-gradient(90deg, #f90bfdFF,rgba(18, 35, 89, 1));
opacity: 0;
}
.block1{
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 30px;
background: linear-gradient(90deg, #f90bfdFF,rgba(18, 35, 89, 1));
opacity: 1;
}
.block2{
position: absolute;
top: 0;
left: 0;
width: 113px;
height: 30px;
background: linear-gradient(90deg, #8f48fdFF,#111E3AFF);
opacity: 1;
}
.block3{
position: absolute;
top: 0;
left: 0;
width: 78px;
height: 30px;
background: linear-gradient(90deg, #0f3cdfFF,rgba(18, 35, 89, 1));
opacity: 1;
}
div{
position: relative;
z-index: 999;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
line-height: 30px;
opacity: 0.6;
} }
} }
} }
} }
} }
/* 波纹进度 */
// 进度圆大小
$progress-height: 79px !default;
// 文字大小
$progress-font: 23px !default;
// 进度颜色
$progress-colors: (
blue: linear-gradient(0deg, #3764FC, #0C3FFD),
orange: linear-gradient(0deg, #00A2DB, #35D0E9),
purple: linear-gradient(0deg, #4E15D2, #904AFD),
cyan: #19C9CB
) !default;
// 进度圆容器
.wave-progress {
margin: 0;
padding: 20px 0 0;
font-size: 0;
// 进度圆单元
> li {
box-shadow:inset -3px -1px 18px 0px rgba(167, 219, 255, 0.16);
display: inline-block;
list-style: none;
width: $progress-height;
height: $progress-height;
border-radius: 50%;
position: relative;
overflow: hidden;
// 为方便示例演示，添加单元间距
margin-right: 81px;
position: relative;
margin-left: 10px;
}
.deoc{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 17px;
color: #FFFFFF;
opacity: 0.6;
white-space: nowrap;
}
}
// 波纹
.wave-purple{
opacity: .8;
}
.wave {
position: absolute;
width: 100%;
height: 100%;
// 用伪元素绘制两个波纹容器
&::before,
&::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 10;
// 设置大小合适的圆形容器(足够覆盖整个进度圆)
width: 800px;
height: 800px;
border-radius: 45%;
// 一定透明度的白色背景色
background-color: rgba(11, 22, 51, .9);
// 挪到合适的位置
transform: translateX(-50%) rotate(0);
// 添加旋转动画
animation: rotate 6s linear infinite;
}
// 通过重置一个波纹的圆角大小、动画执行时间、延迟间隔
// 来制造波纹动画的视觉差和时间差
&::after {
border-radius: 48%;
transform: translateX(-50%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
}
// 进度值
.text {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: 30;
text-align: center;
font-size: $progress-font;
line-height: $progress-height;
color: white;
// font-weight: bold;
// 文字重叠描边，进度值较小场景下白色文字与背景的区分
}
// 旋转动画
@keyframes rotate {
50% {
transform: translateX(-50%) rotate(180deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}
// 枚举进度颜色
@each $key, $value in $progress-colors {
.wave-#{$key} {
background: $value;
// 文字描边颜色与背景一致
.text::before {
-webkit-text-stroke: 1px $value;
}
}
}
</style> </style>
src/style.scss
浏览文件 @ 3d19d4a5
$--color-primary: #c01540; $--color-primary: #58C0D9;
/* 改变 icon 字体路径变量，必需 */ /* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
...@@ -95,7 +95,7 @@ html { ...@@ -95,7 +95,7 @@ html {
} }
:root { :root {
--main-color: #c01540; --main-color: #58C0D9;
} }
body { body {
...@@ -104,7 +104,7 @@ body { ...@@ -104,7 +104,7 @@ body {
color: #222; color: #222;
font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif; 'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
background-color: #f1f1f1; background-color: rgb(6,12,37);
} }
.empty { .empty {
......
src/utils/axios.js
浏览文件 @ 3d19d4a5
import axios from 'axios' import axios from 'axios'
import qs from 'qs' import qs from 'qs'
import { Message } from 'element-ui' import { Message } from 'element-ui'
// import md5 from 'blueimp-md5'
const httpRequest = axios.create({ const httpRequest = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000, timeout: 60000,
withCredentials: true, withCredentials: true
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
tenant: 'transport'
}
}) })
// 请求拦截 // 请求拦截
httpRequest.interceptors.request.use( httpRequest.interceptors.request.use(
function(config) { function(config) {
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') { const defaultParams = {
config.data = qs.stringify(config.data) timestamp: parseInt(Date.now() / 1000),
nonce: Math.random()
.toString(36)
.slice(-8)
} }
if (config.headers['Content-Type'] === 'multipart/form-data') { // 接口请求参数
const form = new window.FormData() let params = config.params || config.data
for (const key in config.data) { // 排序
form.append(key, config.data[key]) function alphabeticalSort(a, b) {
} return a.localeCompare(b)
config.data = form }
// https://gitlab.ezijing.com/root/api-documents/-/blob/master/messages/api/%E7%8E%AF%E5%A2%83%E8%AF%B4%E6%98%8E.md#%E6%8E%A5%E5%8F%A3%E7%AD%BE%E5%90%8D
params = Object.assign({}, defaultParams, params)
const str = qs.stringify(Object.assign({}, params, { salt: 'n7xAav2tSjn9Ysnr' }), { sort: alphabeticalSort })
const strs = qs.parse(str)
Object.keys(strs).map(item => {
strs[item] = Array.isArray(strs[item]) ? JSON.stringify(strs[item]) : strs[item]
})
params.signature = 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d'
if (config.method === 'post') {
config.data = params
} else {
config.params = params
} }
// config.data = params
// if (config.headers['Content-Type'] === 'multipart/form-data') {
// const form = new window.FormData()
// for (const key in config.data) {
// form.append(key, config.data[key])
// }
// config.data = form
// }
return config return config
}, },
function(error) { function(error) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论