提交 647723e2 authored 作者: lihuihui's avatar lihuihui

实操3.1开发

上级 4c4dfd50
...@@ -15,14 +15,16 @@ ...@@ -15,14 +15,16 @@
</a> </a>
</template> </template>
<template v-else> <template v-else>
<router-link :to="item.path" :key="index"> <router-link :to="item.path[0]" :key="index">
<li :key="index" :class="item.path !== '/ranking' ? 'active' : $route.path === item.path && 'active'">{{ item.name }}</li> <!-- <li :key="index" :class="item.path !== '/ranking' ? 'active' : $route.path === item.path && 'active'">{{ item.name }}</li> -->
<li :key="index" :class="item.path.find(path => { return $route.path === path }) && 'active'">{{ item.name }}</li>
<!-- <li v-else :key="index" :class="$route.path === item.path && 'active'">{{ item.name }}</li> -->
</router-link> </router-link>
</template> </template>
</template> </template>
</ul> </ul>
<div class="user"> <div class="user">
<router-link to="/account/password">修改密码</router-link> <!-- <router-link to="/account/password">修改密码</router-link> -->
<span @click="logout">退出登录</span> <span @click="logout">退出登录</span>
</div> </div>
</div> </div>
...@@ -61,7 +63,7 @@ export default { ...@@ -61,7 +63,7 @@ export default {
aside: [ aside: [
{ {
name: '实训', name: '实训',
path: '/explain' path: ['/index', '/explain', '/practice']
}, },
{ {
name: '课程', name: '课程',
...@@ -70,7 +72,7 @@ export default { ...@@ -70,7 +72,7 @@ export default {
}, },
{ {
name: '排行榜', name: '排行榜',
path: '/ranking' path: ['/ranking']
} }
] ]
} }
......
...@@ -299,6 +299,10 @@ export default { ...@@ -299,6 +299,10 @@ export default {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
span{ span{
width: 60px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 19px; font-size: 19px;
font-weight: bold; font-weight: bold;
color: #1EE3F3; color: #1EE3F3;
...@@ -309,7 +313,6 @@ export default { ...@@ -309,7 +313,6 @@ export default {
height: 6px; height: 6px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/170110ec7e1d9e1b9aa7cc503db2130f.png); background: url(https://zws-imgs-pub.ezijing.com/static/public/170110ec7e1d9e1b9aa7cc503db2130f.png);
background-size: 100% 100%; background-size: 100% 100%;
margin-left: 11px;
} }
} }
.option-box{ .option-box{
......
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<!-- <div class="border"> --> <!-- <div class="border"> -->
<div class="new-le-btn" @click="$router.push({ path: '/explain' })"></div> <div class="new-le-btn" @click="$router.push({ path: '/explain' })"></div>
<div class="left-btn" @click="confirm"></div> <div class="left-btn" @click="confirm"></div>
<div class="right-btn" @click="$router.push({ path: '/index' })"></div> <div class="right-btn" @click="tabCaseBtn"></div>
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
...@@ -117,6 +117,19 @@ export default { ...@@ -117,6 +117,19 @@ export default {
}) })
}, },
methods: { methods: {
tabCaseBtn() {
this.$confirm('切换案例,当前填写的内容不会保存', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$router.push({
path: '/index'
})
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
},
countDomHeight() { countDomHeight() {
$('.practice-box').css('height', $('.app-main').height() - 145 + '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')
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="btn-box"> <div class="btn-box">
<div class="new-le-btn" @click="$emit('changeStepIndex', 0)"></div> <div class="new-le-btn" @click="$emit('changeStepIndex', 0)"></div>
<div class="left-btn" @click="islookRun = false"></div> <div class="left-btn" @click="islookRun = false"></div>
<div class="right-btn" @click="$router.push({ path: '/index' })"></div> <div class="right-btn" @click="tabCaseBtn"></div>
</div> </div>
</div> </div>
<div class="answer-box" v-show="!islookRun"> <div class="answer-box" v-show="!islookRun">
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<img v-show="islook" :src="data.url" alt=""> <img v-show="islook" :src="data.url" alt="">
<div class="img-pop" v-show="islook" @click="islook = false"></div> <div class="img-pop" v-show="islook" @click="islook = false"></div>
</div> </div>
<div class="btn btn4" @click="$router.push({ path: '/index' })"></div> <div class="btn btn4" @click="tabCaseBtn"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<!-- 我在考虑下 --> <!-- 我在考虑下 -->
<div class="btn btn-null" @click="isResult = false" v-if="resultCharacteristic.status == 2 || resultCharacteristic.status == 3">我在考虑下</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 class="btn btn3" @click="tabCaseBtn"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -151,6 +151,19 @@ export default { ...@@ -151,6 +151,19 @@ export default {
}) })
}, },
methods: { methods: {
tabCaseBtn() {
this.$confirm('切换案例,当前填写的内容不会保存', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$router.push({
path: '/index'
})
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
},
getOptData(item) { getOptData(item) {
return item.filter(item => { return item.filter(item => {
return item.answer === 1 return item.answer === 1
...@@ -195,7 +208,7 @@ export default { ...@@ -195,7 +208,7 @@ export default {
}) })
}) })
if (!nullFlag) { if (!nullFlag) {
this.$confirm('请选择', '提示', { this.$confirm('请选择选项', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
// cancelButtonText: '继续填写', // cancelButtonText: '继续填写',
type: 'warning' type: 'warning'
...@@ -465,8 +478,28 @@ export default { ...@@ -465,8 +478,28 @@ export default {
padding: 16px 36px; padding: 16px 36px;
box-sizing: border-box; box-sizing: border-box;
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display:none; width: 4px;
height: 4px;
}
&::-webkit-scrollbar-button{
width: 0;
height: 0;
} }
&::-webkit-scrollbar-track{
}
&::-webkit-scrollbar-thumb{
border-radius: 8px;
background-color: rgba(0, 203, 255, .5);
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 203, 255, 1);
}
&::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 203, 255, 1);
}
// &::-webkit-scrollbar{
// display:none;
// }
li{ li{
height: 72px; height: 72px;
border-bottom: 1px solid #46658F; border-bottom: 1px solid #46658F;
...@@ -476,8 +509,28 @@ export default { ...@@ -476,8 +509,28 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
height: 72px; height: 72px;
// &::-webkit-scrollbar{
// display:none;
// }
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display:none; width: 4px;
height: 4px;
}
&::-webkit-scrollbar-button{
width: 0;
height: 0;
}
&::-webkit-scrollbar-track{
}
&::-webkit-scrollbar-thumb{
border-radius: 8px;
background-color: rgba(0, 203, 255, .5);
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 203, 255, 1);
}
&::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 203, 255, 1);
} }
} }
::v-deep{ ::v-deep{
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<div class="foot-btn-box"> <div class="foot-btn-box">
<div class="btn" @click="$emit('changeStepIndex', 1)"></div> <div class="btn" @click="$emit('changeStepIndex', 1)"></div>
<div class="btn" @click="isEdit = true"></div> <div class="btn" @click="isEdit = true"></div>
<div class="btn" @click="$router.push('/index')"></div> <div class="btn" @click="tabCaseBtn"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -108,6 +108,19 @@ export default { ...@@ -108,6 +108,19 @@ export default {
this.countDomHeight() this.countDomHeight()
}, },
methods: { methods: {
tabCaseBtn() {
this.$confirm('切换案例,当前填写的内容不会保存', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$router.push({
path: '/index'
})
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
},
backPage() { backPage() {
this.isEdit = false this.isEdit = false
}, },
...@@ -309,7 +322,7 @@ export default { ...@@ -309,7 +322,7 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
height: 410px; height: 410px;
overflow: hidden; overflow: hidden;
padding: 20px 0; padding: 20px 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.form-all{ .form-all{
...@@ -318,8 +331,28 @@ export default { ...@@ -318,8 +331,28 @@ export default {
height: 370px; height: 370px;
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display:none; width: 4px;
height: 4px;
}
&::-webkit-scrollbar-button{
width: 0;
height: 0;
}
&::-webkit-scrollbar-track{
} }
&::-webkit-scrollbar-thumb{
border-radius: 8px;
background-color: rgba(0, 203, 255, .5);
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 203, 255, 1);
}
&::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 203, 255, 1);
}
// &::-webkit-scrollbar{
// display:none;
// }
} }
.foot-btn-box{ .foot-btn-box{
// position: absolute; // position: absolute;
......
<template> <template>
<div class="rankingList-box"> <div class="rankingList-box">
<h4>{{ title }}</h4> <div class="title-option">
<div class="el-icon-caret-bottom"></div>
<h4 @click="isSelectShow = !isSelectShow">{{ title }}</h4>
<ul class="option-box" v-show="isSelectShow">
<template v-for="(item, index) in caseData">
<li @click="tabCase(index, item.value, item.name)" :class="index == caseIndex && 'active'" :key="index">{{ item.name }}</li>
</template>
</ul>
</div>
<div class="content"> <div class="content">
<div class="list-title"> <div class="list-title">
<p>排名</p> <p>排名</p>
...@@ -11,17 +19,17 @@ ...@@ -11,17 +19,17 @@
</div> </div>
<ul class="ranking-list"> <ul class="ranking-list">
<li v-for="item in list" :key="item.id"> <li v-for="item in list" :key="item.id">
<p>{{ item.num }}</p> <p>{{ item.rank }}</p>
<p>{{ item.school }}</p> <p>{{ item.school }}</p>
<p>{{ item.name }}</p> <p>{{ item.username }}</p>
<p>{{ item.date }}</p> <p>{{ item.date_index }}</p>
<p>{{ item.score }}</p> <p>{{ item.score }}</p>
</li> </li>
</ul> </ul>
<div class="btn-bar"> <!-- <div class="btn-bar">
<p @click="submit"></p> <p @click="submit"></p>
<p @click="changeCase"></p> <p @click="changeCase"></p>
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -31,41 +39,111 @@ import * as api from '@/api/common.js' ...@@ -31,41 +39,111 @@ import * as api from '@/api/common.js'
export default { export default {
data() { data() {
return { return {
title: '得分排行榜', isSelectShow: false,
list: [ caseIndex: 0,
{ num: 1, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10001' }, caseData: [
{
name: '全局-分数',
value: 10
},
{
name: '全局-次数',
value: 11
},
{
name: '校内-分数',
value: 20
},
{
name: '校内-次数',
value: 21
},
{ {
num: 2, name: '个人-分数',
school: '河北工业职业技术学院保定分院', value: 30
name: '今麦郎',
date: '2020.01.02',
score: '100',
id: '10002'
}, },
{ num: 3, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10003' }, {
{ num: 4, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10004' }, name: '个人-次数',
{ num: 5, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10005' }, value: 31
{ num: 6, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10006' },
{ num: 7, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10007' },
{ num: 8, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10008' },
{ num: 9, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10009' },
{ num: 10, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10010' }
]
} }
],
title: '全局-分数',
list: [
// { num: 1, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10001' },
// {
// num: 2,
// school: '河北工业职业技术学院保定分院',
// name: '今麦郎',
// date: '2020.01.02',
// score: '100',
// id: '10002'
// },
// { num: 3, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10003' },
// { num: 4, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10004' },
// { num: 5, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10005' },
// { num: 6, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10006' },
// { num: 7, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10007' },
// { num: 8, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10008' },
// { num: 9, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10009' },
// { num: 10, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10010' }
],
info: {}
}
},
created() {
this.getUserSchoolInfo()
}, },
mounted() { mounted() {
this.getRankingList() this.getRankingList()
}, },
methods: { methods: {
getUserSchoolInfo() {
api
.getUserSchoolInfo()
.then(response => {
this.info.sso_id = response.id
this.info.username = response.realname
this.info.school = response.student_info.school
})
.finally(() => {
})
},
submit() {}, submit() {},
changeCase() {}, changeCase() {},
getRankingList() { getRankingList(value = 10) {
const params = {
type: value,
start: 0,
stop: 9
}
if (value === 20 || value === 21) {
params.school = this.info.school
}
if (value === 30 || value === 31) {
params.sso_id = this.info.sso_id
}
api api
.rankingList({}) .getRank(params)
.then(resp => { .then(resp => {
console.log(resp) console.log(resp)
this.list = resp.data.list
}) })
.finally(() => {}) .finally(() => {})
},
tabCase(n, value, name) {
this.title = name
this.caseIndex = n
this.isSelectShow = false
this.getRankingList(value)
// for (let i = 0; i < this.caseData.length; i++) {
// if (i === n) {
// this.divSelect.name = this.caseData[i].name
// this.divSelect.isShow = false
// // this.caseData[i].children.caseIsShow = false
// this.caseItemList = this.caseData[i].children
// }
// }
// window.sessionStorage.homeTabIndex = n
} }
} }
} }
...@@ -77,6 +155,48 @@ export default { ...@@ -77,6 +155,48 @@ export default {
height: calc(100% - 20px); height: calc(100% - 20px);
padding-top: 20px; padding-top: 20px;
} }
.title-option{
position: relative;
cursor: pointer;
.el-icon-caret-bottom{
position: absolute;
top: 1px;
left: 120px;
color: #00CBFFFF;
font-size: 18px;
}
.option-box{
position: absolute;
top: 30px;
left: -5px;
z-index: 999;
width: 141px;
max-height: 176px;
overflow-y: scroll;
background: #0D416B;
box-shadow: 0px 0px 4px 0px rgba(0, 132, 255, 0.8), 0px 0px 16px 0px rgba(0, 156, 255, 0.31);
margin-left: 5px;
padding-top: 20px;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
li{
width: 100%;
line-height: 100%;
font-size: 19px;
font-weight: bold;
color: #1EE3F3;
opacity: 0.5;
text-align: center;
margin-bottom: 30px;
cursor: pointer;
&.active{
opacity: 1;
}
}
}
}
h4 { h4 {
width: 120px; width: 120px;
height: 22px; height: 22px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论