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

实操3.1开发

上级 4c4dfd50
......@@ -15,14 +15,16 @@
</a>
</template>
<template v-else>
<router-link :to="item.path" :key="index">
<li :key="index" :class="item.path !== '/ranking' ? 'active' : $route.path === item.path && 'active'">{{ item.name }}</li>
<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.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>
</template>
</template>
</ul>
<div class="user">
<router-link to="/account/password">修改密码</router-link>
<!-- <router-link to="/account/password">修改密码</router-link> -->
<span @click="logout">退出登录</span>
</div>
</div>
......@@ -61,7 +63,7 @@ export default {
aside: [
{
name: '实训',
path: '/explain'
path: ['/index', '/explain', '/practice']
},
{
name: '课程',
......@@ -70,7 +72,7 @@ export default {
},
{
name: '排行榜',
path: '/ranking'
path: ['/ranking']
}
]
}
......
......@@ -299,6 +299,10 @@ export default {
align-items: center;
cursor: pointer;
span{
width: 60px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 19px;
font-weight: bold;
color: #1EE3F3;
......@@ -309,7 +313,6 @@ export default {
height: 6px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/170110ec7e1d9e1b9aa7cc503db2130f.png);
background-size: 100% 100%;
margin-left: 11px;
}
}
.option-box{
......
......@@ -64,7 +64,7 @@
<!-- <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 class="right-btn" @click="tabCaseBtn"></div>
<!-- </div> -->
</div>
</div>
......@@ -117,6 +117,19 @@ export default {
})
},
methods: {
tabCaseBtn() {
this.$confirm('切换案例,当前填写的内容不会保存', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$router.push({
path: '/index'
})
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
},
countDomHeight() {
$('.practice-box').css('height', $('.app-main').height() - 145 + 'px')
$('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
......
......@@ -11,7 +11,7 @@
<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 class="right-btn" @click="tabCaseBtn"></div>
</div>
</div>
<div class="answer-box" v-show="!islookRun">
......@@ -42,7 +42,7 @@
<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 class="btn btn4" @click="tabCaseBtn"></div>
</div>
</div>
</div>
......@@ -95,7 +95,7 @@
<!-- 我在考虑下 -->
<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 class="btn btn3" @click="tabCaseBtn"></div>
</div>
</div>
</div>
......@@ -151,6 +151,19 @@ export default {
})
},
methods: {
tabCaseBtn() {
this.$confirm('切换案例,当前填写的内容不会保存', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$router.push({
path: '/index'
})
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
},
getOptData(item) {
return item.filter(item => {
return item.answer === 1
......@@ -195,7 +208,7 @@ export default {
})
})
if (!nullFlag) {
this.$confirm('请选择', '提示', {
this.$confirm('请选择选项', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
......@@ -465,8 +478,28 @@ export default {
padding: 16px 36px;
box-sizing: border-box;
&::-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{
height: 72px;
border-bottom: 1px solid #46658F;
......@@ -476,8 +509,28 @@ export default {
display: flex;
align-items: center;
height: 72px;
// &::-webkit-scrollbar{
// display:none;
// }
&::-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{
......
......@@ -28,7 +28,7 @@
<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 class="btn" @click="tabCaseBtn"></div>
</div>
</div>
</div>
......@@ -108,6 +108,19 @@ export default {
this.countDomHeight()
},
methods: {
tabCaseBtn() {
this.$confirm('切换案例,当前填写的内容不会保存', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$router.push({
path: '/index'
})
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
},
backPage() {
this.isEdit = false
},
......@@ -309,7 +322,7 @@ export default {
background-size: 100% 100%;
height: 410px;
overflow: hidden;
padding: 20px 0;
padding: 20px 10px;
box-sizing: border-box;
}
.form-all{
......@@ -318,8 +331,28 @@ export default {
height: 370px;
overflow-y: scroll;
&::-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{
// position: absolute;
......
<template>
<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="list-title">
<p>排名</p>
......@@ -11,17 +19,17 @@
</div>
<ul class="ranking-list">
<li v-for="item in list" :key="item.id">
<p>{{ item.num }}</p>
<p>{{ item.rank }}</p>
<p>{{ item.school }}</p>
<p>{{ item.name }}</p>
<p>{{ item.date }}</p>
<p>{{ item.username }}</p>
<p>{{ item.date_index }}</p>
<p>{{ item.score }}</p>
</li>
</ul>
<div class="btn-bar">
<!-- <div class="btn-bar">
<p @click="submit"></p>
<p @click="changeCase"></p>
</div>
</div> -->
</div>
</div>
</template>
......@@ -31,41 +39,111 @@ import * as api from '@/api/common.js'
export default {
data() {
return {
title: '得分排行榜',
list: [
{ num: 1, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10001' },
isSelectShow: false,
caseIndex: 0,
caseData: [
{
name: '全局-分数',
value: 10
},
{
name: '全局-次数',
value: 11
},
{
name: '校内-分数',
value: 20
},
{
num: 2,
school: '河北工业职业技术学院保定分院',
name: '今麦郎',
date: '2020.01.02',
score: '100',
id: '10002'
name: '校内-次数',
value: 21
},
{ 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' }
]
{
name: '个人-分数',
value: 30
},
{
name: '个人-次数',
value: 31
}
],
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() {
this.getRankingList()
},
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() {},
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
.rankingList({})
.getRank(params)
.then(resp => {
console.log(resp)
this.list = resp.data.list
})
.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 {
height: calc(100% - 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 {
width: 120px;
height: 22px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论