Skip to content

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

开发实操3.1

上级 daad3b2f
显示空白字符变更
内嵌 并排
正在显示 包含 1647 行增加 和 443 行删除
package-lock.json
浏览文件 @ 3d19d4a5
......@@ -2031,6 +2031,11 @@
"resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
"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": {
"version": "5.1.3",
"resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz",
......@@ -3631,6 +3636,14 @@
"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": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
......@@ -10015,10 +10028,9 @@
"dev": true
},
"qs": {
"version": "6.9.4",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
"integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc=",
"dev": true
"version": "6.9.6",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
"integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
},
"query-string": {
"version": "4.3.4",
......@@ -10478,6 +10490,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"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": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
......@@ -12439,6 +12456,16 @@
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"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": {
"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",
......@@ -13326,6 +13353,11 @@
"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 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"qs": "^6.9.6",
"blueimp-md5": "^2.18.0",
"@ckeditor/ckeditor5-build-classic": "^23.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",
"axios": "^0.20.0",
......@@ -91,6 +93,8 @@
"vue-meta-info": "^0.1.7",
"vue-router": "^3.4.6",
"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) {
})
}
/**
* 获取学生信息
*/
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() {
return httpRequest.get('/api/opera/v1/api/user/level')
return httpRequest.get('/api/opera/v3/api/user/level')
}
/* 获取案例列表 */
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) {
return httpRequest.post('/api/opera/v1/api/case/select', data)
return httpRequest.post('/api/opera/v3/api/case/select', data)
}
/* 用户群列表 */
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) {
return httpRequest.get(`/api/opera/v1/oprations/${params}/cgroup`)
return httpRequest.get(`/api/opera/v3/oprations/${params}/cgroup`)
}
/* 触达列表 */
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) {
return httpRequest.post('/api/opera/v1/api/reach/submit', data)
return httpRequest.post('/api/opera/v3/api/reach/submit', 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) {
return httpRequest.post('/api/opera/v1/api/characteristic/submit', data)
return httpRequest.post('/api/opera/v3/api/characteristic/submit', data)
}
/* 获取所以分类 */
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 接口 */
/* 获取案例分类 */
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) {
return httpRequest.get(`/api/opera/v2/api/training/${id}/cases`)
return httpRequest.get(`/api/opera/v3/api/training/${id}/cases`)
}
/* 提交特征 */
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) {
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) {
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'
import './style.scss'
import ElementUI from 'element-ui'
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()
Vue.use(ElementUI)
Vue.component('v-chart', Echarts)
/* 设置全局变量 */
window.G = Vue.prototype.$GLOBAL = {
......
src/pages/home/index.vue
浏览文件 @ 3d19d4a5
......@@ -15,11 +15,11 @@
<swiper ref="mySwiper" :options="swiperOption">
<template v-for="(item, index) in caseItemList">
<swiper-slide :key="index">
<div class="slide-item" @click="showItem(item)">
<div class="slide-item">
<div class="pot-title">{{ item.name }}</div>
<div class="title">{{ item.name }}</div>
<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'">
<div class="cont" @click="selectCase(opt)">
<span>{{ opt.name }}</span>
......@@ -108,9 +108,7 @@ export default {
.then(response => {
this.caseData = response.data
this.caseItemList = response.data[0].children
if (window.sessionStorage.homeTabIndex) {
this.tabCase(parseInt(window.sessionStorage.homeTabIndex))
}
this.tabCase(parseInt(0))
})
.finally(() => {
})
......
src/pages/practice/components/practice1.vue
浏览文件 @ 3d19d4a5
......@@ -24,7 +24,12 @@
<template v-for="(item, index) in formData.production_detail">
<li :key="'p'+index">
<div class="name">{{ item.name }}</div>
<el-input v-model="formData.production_detail[index].content" placeholder="请输入内容"></el-input>
<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>
</template>
</ul>
......@@ -32,7 +37,12 @@
<template v-for="(item, index) in formData.fund_detail">
<li :key="'pd'+index">
<div class="name">{{ item.name }}</div>
<el-input v-model="formData.fund_detail[index].content" placeholder="请输入内容"></el-input>
<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>
</template>
</ul>
......@@ -40,15 +50,22 @@
<template v-for="(item, index) in formData.invest_detail">
<li :key="'pdd'+index">
<div class="name">{{ item.name }}</div>
<el-input v-model="formData.invest_detail[index].content" placeholder="请输入内容"></el-input>
<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>
</template>
</ul>
</div>
<div class="next-btnnext-btn">
<div class="border">
<div class="btn" @click="confirm">确定并进入下一步</div>
</div>
<!-- <div class="border"> -->
<div class="new-le-btn" @click="$router.push({ path: '/explain' })"></div>
<div class="left-btn" @click="confirm"></div>
<div class="right-btn" @click="$router.push({ path: '/index' })"></div>
<!-- </div> -->
</div>
</div>
</div>
......@@ -72,6 +89,7 @@ export default {
created() {
const caseStorageData = JSON.parse(window.sessionStorage.caseData)
this.data = caseStorageData
// console.log(this.data, '12321')
this.formData.production_detail = caseStorageData.production_detail.map(item => {
item.content = ''
return item
......@@ -84,7 +102,7 @@ export default {
item.content = ''
return item
})
console.log(this.formData)
console.log(this.formData, '=1233')
},
mounted() {
setTimeout(() => {
......@@ -100,9 +118,9 @@ export default {
},
methods: {
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')
$('.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()))
},
tabChange(n) {
......@@ -127,12 +145,24 @@ export default {
// }
// }
// })
this.$confirm('有部分内容您还没有填写，是否确认进入下一步', '提示', {
this.$confirm('有部分内容您还没有填写，请填写', '提示', {
confirmButtonText: '确定',
cancelButtonText: '继续填写',
type: 'warning'
}).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(() => {
if (proForm) {
this.tabIndex = 0
......@@ -159,9 +189,9 @@ export default {
display: flex;
width: 100%;
height: 473px;
margin-top: 16px;
// margin-top: 16px;
.item-left{
margin-right: 8px;
margin-right: 18px;
flex: 1;
height: 100%;
// background: #fff;
......@@ -180,7 +210,7 @@ export default {
height: 21px;
margin: 0 auto;
font-size: 14px;
text-decoration: underline;
// text-decoration: underline;
color: #71CDF9;
border-bottom: 1px solid #71CDF9;
margin-top: 17px;
......@@ -218,34 +248,46 @@ export default {
}
}
.item-right{
margin-left: 8px;
margin-left: 18px;
flex: 1;
height: 100%;
// background: #fff;
.tab-btn{
width: 100%;
height: 48px;
height: 30px;
// background: #f1f1f1;
display: flex;
li{
cursor: pointer;
flex: 1;
text-align: center;
line-height: 48px;
font-size: 18px;
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{
color: #C01540;
background: #fff;
box-shadow: none;
color: #fff;
background: rgba(107, 231, 255, .8);
}
}
}
.form{
padding: 0 24px;
// padding: 0 24px;
ul{
background: url(https://zws-imgs-pub.ezijing.com/static/public/89898a60e953a3a6c301fa9a6e586ae5.png);
background-size: 100% 100%;
height: 360px;
overflow-y: scroll;
padding: 0 20px;
box-sizing: border-box;
&::-webkit-scrollbar{
display:none;
}
......@@ -253,39 +295,68 @@ export default {
li{
align-items: center;
width: 100%;
border-bottom: 1px solid #eee;
height: 72px;
border-bottom: 1px solid #46658F;
// height: 72px;
padding: 15px 0;
display: flex;
align-items: center;
.name{
font-size: 14px;
color: #444444;
line-height: 14px;
margin-right: 23px;
color: #58C0DA;
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{
padding: 0 16px;
// padding: 0 16px;
box-sizing: border-box;
width: 100%;
.border{
border-top: 1px solid #eee;
display: flex;
align-items: center;
height: 64px;
padding-top: 10px;
justify-content: space-between;
.new-le-btn{
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;
margin-left: auto;
height: 32px;
width: 160px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
color: #F8F8F8;
line-height: 32px;
text-align: center;
// margin-left: auto;
// height: 32px;
// width: 160px;
// background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
// border-radius: 4px;
// font-size: 14px;
// color: #F8F8F8;
// line-height: 32px;
// text-align: center;
}
.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 @@
<div class="practice2-box" v-show="!isResult">
<div class="read" v-show="islookRun">
<div class="title">请阅读相关信息，阅读后点击“阅读完毕”按钮，在下一页您需要进行用户分析</div>
<div class="img-content">
<div class="img-content-scroll">
<img class="img" :src="data.url" alt="">
<div class="btn-box">
<div class="btn-cont">
<div class="btn" @click="islookRun = false">阅读完毕</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 class="answer-box" v-show="!islookRun">
<div class="form-box">
......@@ -31,18 +35,20 @@
</div>
<div class="foot-btn-box">
<div class="btn-box">
<div class="btn btn1" @click="islookRun = true"></div>
<div class="cen-btn">
<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="btn" @click="islook = !islook">查看资料</div>
<div class="btn" @click="confirm">确认并进入下一步</div>
<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 class="result-box" v-show="isResult">
<div class="item-left">
<div class="title">
<!-- 您所筛选出的用户群，适合于<span>#风险偏好较低#</span>的用户群。 -->
</div>
<template v-if="resultCharacteristic.deduct_score_times >= 3">
<div class="title">您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，返回重新开始。</div>
</template>
......@@ -51,7 +57,6 @@
<div v-if="resultCharacteristic.status == 2" class="title">您某些选项的选择有严重问题，您需要重新做出选择</div>
<div v-if="resultCharacteristic.status == 3" class="title">您所筛选出的用户群，不适合营销您所选择的营销产品</div>
</template>
<img src="https://zws-imgs-pub.ezijing.com/static/public/14cd9f545600187e8d5be61f6e98cd2c.png" alt="">
</div>
<div class="item-right">
<div class="swiper-container">
......@@ -79,13 +84,18 @@
</div>
<div class="foot-btn-box">
<div class="btn-box">
<div class="btn btn1" @click="isResult = false"></div>
<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 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>
<div class="btn btn3" @click="$router.push({ path: '/index' })"></div>
</div>
</div>
</div>
......@@ -107,6 +117,7 @@ export default {
data: {},
islook: false,
islookRun: true,
isClose: false,
checkAll: false,
checkedCities: [],
cities: cityOptions,
......@@ -117,6 +128,9 @@ export default {
score: 0
}
},
created() {
this.countDomHeight()
},
mounted() {
this.countDomHeight()
const caseStorageData = JSON.parse(window.sessionStorage.caseData)
......@@ -127,14 +141,14 @@ export default {
item.options.map(c => {
dataArr.push(c.option)
})
item.answerCount = dataArr
// item.answerCount = dataArr
item.answerCount = []
item.options.map(chi => {
chi.answer = 0
return chi
})
return item
})
console.log(this.checkboxData, '123---123')
},
methods: {
getOptData(item) {
......@@ -143,8 +157,9 @@ export default {
})
},
countDomHeight() {
$('.result-box').css('height', $('.app-main').height() - 139 + 'px')
$('.practice2-box').css('height', $('.app-main').height() - 139 + 'px')
$('.result-box').css('height', $('.app-main').height() - 184 + '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')
$('.result-box .setHeight2').css('height', $('.result-box').height() - 64 + 'px')
},
......@@ -164,7 +179,11 @@ export default {
this.$forceUpdate()
},
confirm() {
let nullFlag = false
this.checkboxData.map(item => {
if (item.answerCount.length !== 0) {
nullFlag = true
}
return item.options.map(allOpt => {
const itemFind = item.answerCount.find(c => { return c === allOpt.option })
if (itemFind) {
......@@ -175,6 +194,17 @@ export default {
return allOpt
})
})
if (!nullFlag) {
this.$confirm('请选择', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
return
}
console.log(this.data)
const param = {}
param.case_id = this.data.id
......@@ -186,8 +216,9 @@ export default {
this.resultCharacteristic = response.data
this.isResult = true
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
})
.finally(() => {
......@@ -212,7 +243,7 @@ export default {
<style lang="scss" scoped>
.read{
// height: 100%;
background: #fff;
// background: #fff;
}
::v-deep{
.el-checkbox{
......@@ -227,65 +258,94 @@ export default {
}
.practice2-box{
position: relative;
min-height: 473px;
background: #fff;
margin-top: 16px;
// min-height: 473px;
// background: #fff;
// margin-top: 16px;
.title{
height: 44px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
font-size: 14px;
color: #222222;
line-height: 44px;
padding-left: 24px;
color: #71CDF9;
opacity: 0.8;
}
.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;
.img-content-scroll{
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
}
}
.img{
width: 90%;
// width: 644px;
// height: 60%;
display: block;
margin: 16px auto;
margin: 0 auto;
}
.btn-box{
background: #fff;
position: sticky;
bottom: 0;
left: 0;
width: 100%;
height: 63px;
padding: 0 16px;
// background: #fff;
// position: sticky;
// bottom: 0;
// left: 0;
// width: 100%;
// height: 63px;
padding: 20px 0;
box-sizing: border-box;
.btn-cont{
height: 100%;
border-top: 1px solid #eee;
display: flex;
align-items: center;
.btn{
width: 104px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 32px;
color: #fff;
justify-content: space-between;
position: relative;
.new-le-btn{
cursor: pointer;
width: 174px;
height: 39px;
background-size: 100% 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
}
.left-btn{
// position: absolute;
// top: 20px;
// 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{
ul{
// height: 364px;
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{
height: 72px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #46658F;
display: flex;
align-items: center;
.name{
width: 88px;
text-align: center;
font-size: 14px;
color: #58C0DA;
}
.checkbox-box{
display: flex;
......@@ -303,38 +363,66 @@ export default {
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
// position: absolute;
// bottom: 0;
// left: 0;
width: 100%;
height: 64px;
background: #fff;
padding: 0 24px;
// height: 64px;
// background: #000;
// padding: 0 24px;
box-sizing: border-box;
.btn-box{
position: relative;
width: 100%;
border-top: 1px solid #eee;
// border-top: 1px solid #eee;
height: 100%;
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{
position: absolute;
bottom: 100px;
left: 0;
width: 644px;
z-index: 9;
z-index: 9999999;
}
.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;
width: 174px;
height: 39px;
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 {
height: 473px;
margin-top: 16px;
.item-left{
margin-right: 8px;
flex: 1;
// flex: 1;
height: 100%;
background: #fff;
// background: #fff;
.title{
width: 300px;
height: 43px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 30px;
margin: 0 auto;
padding: 16px 0;
color: #71CDF9;
opacity: 0.8;
text-align: center;
span{
color: #C01540;
}
margin-right: 128px;
}
img{
display: block;
......@@ -370,36 +452,53 @@ export default {
}
}
.item-right{
margin-left: 8px;
flex: 1;
height: 100%;
background: #fff;
// background: #fff;
position: relative;
ul{
// box-sizing: border-box;
// height: 408px;
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{
display:none;
}
padding: 0 24px;
li{
height: 72px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #46658F;
.item-right-scroll{
overflow-x: scroll;
white-space:nowrap;
display: flex;
align-items: center;
height: 72px;
// &::-webkit-scrollbar{
// display:none;
// }
&::-webkit-scrollbar{
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{
min-width: 88px;
width: 88px;
text-align: center;
white-space: break-spaces;
color: #58C0DA;
font-size: 14px;
}
.checkbox-box{
display: flex;
......@@ -420,28 +519,73 @@ export default {
bottom: 0;
left: 0;
width: 100%;
background: #fff;
// background: #fff;
height: 64px;
box-sizing: border-box;
padding: 0 24px;
// padding: 0 24px;
.btn-box{
height: 64px;
display: flex;
border-top: 1px solid #ccc;
// border-top: 1px solid #ccc;
align-items: center;
justify-content: space-between;
.btn{
padding: 0 24px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 32px;
margin-left: auto;
color: #fff;
width: 174px;
height: 39px;
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>
src/pages/practice/components/practice3.vue
浏览文件 @ 3d19d4a5
......@@ -4,16 +4,17 @@
<ul class="item-left-content">
<template v-for="(item, index) in navItem">
<li :class="navItemIndex == index && 'active'" :key="index" @click="navItemChange(index)">
<div class="icon">
<!-- <div class="icon">
<img :src="item.icon" alt="" class="icons">
<img :src="item.iconActive" alt="" class="iconActive">
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> -->
</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt="">
</div> -->
<div class="text">{{ item.text }}</div>
</li>
</template>
</ul>
<div class="item-right-content">
<div class="form-contents">
<div class="form-all">
<form1 v-show="navItemIndex == 1 - 1"></form1>
<form2 v-show="navItemIndex == 2 - 1"></form2>
......@@ -23,14 +24,15 @@
<form6 v-show="navItemIndex == 6 - 1"></form6>
<form7 v-show="navItemIndex == 7 - 1"></form7>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<div class="btn" @click="isEdit = true">确定并进入下一步</div>
</div>
<div class="foot-btn-box">
<div class="btn" @click="$emit('changeStepIndex', 1)"></div>
<div class="btn" @click="isEdit = true"></div>
<div class="btn" @click="$router.push('/index')"></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>
</template>
<script>
......@@ -106,8 +108,11 @@ export default {
this.countDomHeight()
},
methods: {
backPage() {
this.isEdit = false
},
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')
// $('.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 {
window.sessionStorage.indexTouchActive = n
},
confirm(val) {
if (val === '') {
this.$confirm('请填写文案', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
return
}
this.$emit('step3Confirm', val)
// console.log(val)
}
......@@ -133,15 +149,108 @@ export default {
}
</script>
<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{
display: flex;
margin-top: 16px;
.item-left-content{
width: 200px;
width: 170px;
height: 410px;
// height: 473px;
margin-right: 16px;
background: #fff;
padding: 20px 10px;
// background: #fff;
padding: 20px 0;
background: url(https://zws-imgs-pub.ezijing.com/static/public/eb59a5d485adb191bfda193c6486e69d.png);
background-size: 100% 100%;
box-sizing: border-box;
li{
cursor: pointer;
......@@ -151,7 +260,7 @@ export default {
display: flex;
align-items: center;
&.active{
background: #FFF4F7;
// background: #FFF4F7;
.icon{
.icons{
display: none;
......@@ -161,7 +270,7 @@ export default {
}
}
.text{
color: #C01540;
color: #6BE7FF;
font-weight: bold;
}
}
......@@ -178,54 +287,95 @@ export default {
}
.text{
font-size: 16px;
color: #999999;
margin-left: 10px;
color: #58C0DA;
width: 100%;
text-align: center;
}
}
}
.item-right-content{
// padding: 30px 0;
// box-sizing: border-box;
position: relative;
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{
height: 411px;
// box-sizing: border-box;
// padding: 15px 15px 30px 15px;
height: 370px;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
background: #fff;
padding: 0 24px;
box-sizing: border-box;
.btn-box{
position: relative;
// position: absolute;
// bottom: 0;
// left: 0;
width: 100%;
border-top: 1px solid #eee;
height: 100%;
padding-top: 20px;
// height: 64px;
// background: #fff;
// padding: 0 24px;
// box-sizing: border-box;
display: flex;
align-items: center;
img{
position: absolute;
bottom: 100px;
left: 0;
width: 644px;
z-index: 9;
}
justify-content: space-between;
.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;
width: 174px;
height: 39px;
cursor: pointer;
&:nth-child(1){
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
background-size: 100% 100%;
}
&:nth-child(2){
background: url(https://zws-imgs-pub.ezijing.com/static/public/9b171e8318ca3bd1ef0ceff2fe7072ce.png);
background-size: 100% 100%;
}
&:nth-child(3){
background: url(https://zws-imgs-pub.ezijing.com/static/public/f3b7191f9c4a66b92c20a611dcc46d42.png);
background-size: 100% 100%;
}
}
// .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>
<div class="preview-box">
<div class="content-left">
<div class="bg-box">
<div class="text-box">
<div class="name">文案编辑</div>
<el-input
......@@ -24,15 +25,18 @@
list-type="picture">
<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 class="foot-btn-box">
<div class="btn-box">
<!-- <div class="btn">点此预览</div> -->
<div class="btn" @click="$emit('backPage')">返回上一步</div>
<div class="btn" @click="confirm">确认提交</div>
</div>
<!-- <div class="btn">点此预览</div> -->
<!-- <div class="btn" @click="confirm">确认提交</div> -->
</div>
</div>
<div class="content-right">
<div class="bg-img">
<!-- app弹窗 小程序 -->
<div class="mobile-box" v-if="showActiveIndex == 0 || showActiveIndex == 3">
<div class="content-box">
......@@ -80,6 +84,10 @@
</div>
</div>
</div>
<div class="new-312-btn">
<div class="btn">切换案例</div>
</div>
</div>
</div>
</template>
<script>
......@@ -102,7 +110,7 @@ export default {
},
methods: {
countDomHeight() {
$('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
// $('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
},
successImg(file) {
this.url = file.url
......@@ -133,25 +141,37 @@ export default {
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-textarea__inner{
background: none;
border: 1px solid #58C0D9;
}
}
.preview-box{
display: flex;
height: 473px;
// height: 473px;
padding-top: 16px;
.content-left{
flex: 1;
height: 100%;
background: #fff;
position: relative;
padding: 16px 16px 0;
// padding: 16px 0 0;
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{
display: flex;
}
.name{
width: 84px;
font-size: 16px;
color: #666666;
line-height: 22px;
font-size: 14px;
color: #58C0DA;
}
.textarea{
height: 200px;
......@@ -159,13 +179,38 @@ export default {
textarea{
resize: none;
height: 200px;
color: #58C0DA;
}
}
}
.upload-box{
padding-top: 40px;
display: flex;
position: relative;
// 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{
line-height: 32px;
}
......@@ -177,42 +222,79 @@ export default {
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
// position: absolute;
// bottom: 0;
// left: 0;
width: 100%;
padding: 0 24px;
padding: 20px 0;
box-sizing: border-box;
}
.btn-box{
border-top: 1px solid #eee;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
.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;
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;
line-height: 39px;
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{
width: 500px;
height: 100%;
background: #fff;
position: relative;
width: 455px;
margin-left: 16px;
// height: 100%;
// background: #fff;
.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{
width: 201px;
height: 391px;
......
src/pages/practice/index.vue
浏览文件 @ 3d19d4a5
<template>
<div>
<ul class="head-step">
<li class="active">1.产品分析</li>
<li>2.用户分析</li>
<li>3.用户触达</li>
<li>4.成绩结果</li>
<li v-for="(item, index) in step" :key="index" :class="dataParam.stepIndex === index && 'active'">{{ item }}</li>
</ul>
<!-- <div class="head-steps">
<div class="title">
......@@ -20,9 +17,10 @@
</ul>
</div> -->
<template>
<practice1 @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
<!-- <practice2 @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
<practice3 @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3> -->
<practice1 @changeStepIndex="changeStepIndex" @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
<practice2 @changeStepIndex="changeStepIndex" @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
<practice3 @changeStepIndex="changeStepIndex" @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3>
<practice4 v-if="dataParam.stepIndex == 3"></practice4>
</template>
</div>
</template>
......@@ -31,21 +29,27 @@ import * as api from '@/api/common.js'
import practice1 from './components/practice1'
import practice2 from './components/practice2'
import practice3 from './components/practice3'
import practice4 from '../result/index'
export default {
components: {
practice1,
practice2,
practice3
practice3,
practice4
},
data() {
return {
dataParam: {
stepIndex: 0
},
formData: {}
formData: {},
step: ['1.产品分析', '2.用户分析', '3.用户触达', '4.成绩结果']
}
},
methods: {
changeStepIndex(n) {
this.dataParam.stepIndex = parseInt(n)
},
stepChange(n) {
this.dataParam.stepIndex = n
},
......@@ -60,23 +64,50 @@ export default {
this.dataParam.stepIndex = 2
this.formData.characteristic_score = val
},
step3Confirm(val) {
const sessData = JSON.parse(window.sessionStorage.caseData)
this.formData.case_id = sessData.id
this.formData.reach_scheme = val
this.formData.characteristic_id = sessData.characteristics[0].id
getUserSchoolInfo() {
api
.getUserSchoolInfo()
.then(response => {
this.formData.sso_id = response.id
this.formData.username = response.realname
this.formData.school = response.student_info.school
api
.allSubmit(this.formData)
.then(response => {
if (parseInt(response.code) === 0) {
window.sessionStorage.resultData = JSON.stringify(response.data)
this.$router.push({
path: '/result'
})
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(() => {
})
},
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>
<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 class="res-content-box">
<div class="item-content-left">
<div class="top-content">
<div class="title">
<div class="line"></div>
<div class="texts">成绩查询</div>
</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>
<ul class="wave-progress">
<li class="wave-blue">
<div class="wave" :style="getStyle(data.production_analyze)"></div>
<p class="text" data-text="95%">{{ data.production_analyze.score }}</p>
</li>
<li>
<div class="item" :style="getHeight(parseInt(data.user_analyze.score / data.user_analyze.score_sum * 100))"></div>
<div class="text">用户分析</div>
<li class="wave-orange">
<div class="wave" :style="getStyle(data.user_analyze)"></div>
<p class="text" data-text="95%">{{ data.user_analyze.score }}</p>
</li>
<li>
<div class="item" :style="getHeight(parseInt(data.reach_analyze.score / data.reach_analyze.score_sum * 100))"></div>
<div class="text">用户触达</div>
<li class="wave-purple">
<div class="wave" :style="getStyle(data.reach_analyze)"></div>
<p class="text" data-text="95%">{{ data.user_analyze.score }}</p>
</li>
</ul>
<div class="flag">
<div class="item">
<div class="icon"></div>
<div class="text">得分</div>
<ul class="text-desc">
<li>产品分析得分</li>
<li>用户分析得分</li>
<li>用户触达得分</li>
</ul>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">失分</div>
<div class="bottom-chart">
<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 class="foot-btn-box">
<div class="btn-box">
<div class="btn" @click="contince">这个案例我要再来一次</div>
<div class="btn" @click="$router.push({ path: '/index' })">我要选择其他案例</div>
<div class="chart-box">
<line-chart :options="polar" class="line-chart"></line-chart>
</div>
</div>
</div>
<div class="item-content-right">
<div class="title">
<div class="line"></div>
<div class="texts">本周
得分排行榜</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 class="foot-btn-box">
<div class="btn" @click="contince">再来一次本案例</div>
<div class="btn" @click="$router.push({ path: '/index' })">我要选择其他案例</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
import lineChart from 'vue-echarts/components/ECharts'
export default {
components: {
lineChart
},
data() {
return {
data: {},
resultText: ''
rankData: [],
data: JSON.parse(window.sessionStorage.resultData),
polar: {
}
}
},
computed: {
getHeight() {
return (num) => {
return `height:${num}%`
},
created() {
},
mounted() {
this.getRecordsScore()
this.getRank()
},
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
}
}
},
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
yAxis: {
// minInterval: 50,
// interval: 50,
splitNumber: 3,
type: 'value',
axisLabel: {
color: 'rgba(255,255,255,0.3)'
},
axisLine: {
show: false
},
{
name: '用户分析',
score: this.data.user_analyze.score / this.data.user_analyze.score_sum * 100
axisTick: {
show: false
},
{
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>方面进一步学习和提升，再选择案例进行练习。`
splitLine: {
lineStyle: {
color: ['#D4D4D8'],
opacity: 0.1
}
}
},
methods: {
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 () {
const sessData = JSON.parse(window.sessionStorage.caseData)
const param = {}
......@@ -103,9 +240,7 @@ export default {
.clearScore(param)
.then(response => {
if (parseInt(response.code) === 0) {
this.$router.push({
path: '/practice'
})
this.$router.go(0)
}
})
.finally(() => {
......@@ -115,148 +250,375 @@ export default {
}
</script>
<style lang="scss" scoped>
.result-box{
position: relative;
.foot-btn-box{
padding: 37px 0;
display: flex;
height: 100%;
.content-left{
flex: 1;
background: #fff;
margin-right: 8px;
padding-bottom: 35px;
.score-box{
width: 178px;
height: 180px;
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;
cursor: pointer;
}
}
.result-box{
width: 1200px;
margin: 0 auto;
position: relative;
padding-top: 16px;
.num{
position: absolute;
top: 107px;
left: 0;
font-size: 26px;
.res-content-box{
display: flex;
padding-top: 22px;
justify-content: space-between;
}
.item-content-left{
// 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;
line-height: 37px;
width: 100%;
text-align: center;
background: linear-gradient(0deg, #0080FF 0%, #00C5E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 9px;
line-height: 23px;
}
img{
}
.text-desc{
display: flex;
li{
font-size: 17px;
font-weight: 500;
color: #FFFFFF;
opacity: 0.6;
margin-right: 68px;
margin-top: 10px;
&:nth-child(3){
margin-right: 0;
}
}
}
}
.bottom-chart{
width: 440px;
padding-top: 59px;
.chart-box{
height: 220px;
.line-chart{
width: 100%;
height: 100%;
div{
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;
.title-box{
display: flex;
justify-content: space-between;
.left-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;
}
.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;
}
.right-title{
display: flex;
.block{
width: 12px;
height: 12px;
background: #00A1DA;
margin-top: 2px;
margin-right: 14px;
}
.texts{
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
opacity: 0.6;
}
}
}
}
}
.item-content-right{
width: 599px;
.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;
}
}
.nav{
display: flex;
justify-content: space-around;
padding: 28px 0 17px;
li{
font-size: 16px;
font-weight: bold;
color: #31D1E9;
opacity: 0.8;
}
.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;
}
}
.content-box{
// display: flex;
li{
width: 30px;
height: 337px;
background: rgba(253, 200, 201, 0.5);
display: flex;
justify-content: space-around;
height: 30px;
position: relative;
.item{
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;
bottom: 0;
top: 0;
left: 0;
width: 30px;
height: 0%;
background: #FB9193;
width: 140px;
height: 30px;
background: linear-gradient(90deg, #f90bfdFF,rgba(18, 35, 89, 1));
opacity: 0;
}
.text{
.block1{
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
width: 60px;
text-align: center;
color: #444444;
line-height: 20px;
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;
}
.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;
div{
position: relative;
z-index: 999;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
line-height: 30px;
opacity: 0.6;
}
&:nth-child(1){
margin-right: 20px;
}
&:nth-child(2){
margin-left: 20px;
.icon{
background: #FEE4E4;
}
}
}
/* 波纹进度 */
// 进度圆大小
$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;
}
.foot-btn-box{
}
// 进度值
.text {
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;
padding: 0;
margin: 0;
z-index: 30;
text-align: center;
&:nth-child(2){
margin-left: auto;
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;
}
}
}
......
src/style.scss
浏览文件 @ 3d19d4a5
$--color-primary: #c01540;
$--color-primary: #58C0D9;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
......@@ -95,7 +95,7 @@ html {
}
:root {
--main-color: #c01540;
--main-color: #58C0D9;
}
body {
......@@ -104,7 +104,7 @@ body {
color: #222;
font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
background-color: #f1f1f1;
background-color: rgb(6,12,37);
}
.empty {
......
src/utils/axios.js
浏览文件 @ 3d19d4a5
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
// import md5 from 'blueimp-md5'
const httpRequest = axios.create({
// baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000,
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
tenant: 'transport'
}
withCredentials: true
})
// 请求拦截
httpRequest.interceptors.request.use(
function(config) {
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
const defaultParams = {
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()
for (const key in config.data) {
form.append(key, config.data[key])
// 接口请求参数
let params = config.params || config.data
// 排序
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
},
function(error) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论