|
@@ -1,6 +1,12 @@
|
|
<template>
|
|
<template>
|
|
-<div>
|
|
|
|
- <img :src="bg" class="bg" alt="">
|
|
|
|
|
|
+<div @click="show=false">
|
|
|
|
+ <div class="bg" :style="backgroundDiv">
|
|
|
|
+ <div class="help" @click.stop="show=true"></div>
|
|
|
|
+ <div class="help-text" :style="background1" v-if="show">
|
|
|
|
+ <div class="help-title">{{['','个人','区','学校'][page]}}排名说明</div>
|
|
|
|
+ <div class="help-message">以竞赛时间范围内{{['','个人最好成绩','区域平均分','学校成绩平均分'][page]}}排序高低,如分数并列,则按照答题时间的快慢平均值排序;</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<div class="nav-List">
|
|
<div class="nav-List">
|
|
<div :class="page===item&&'active'" v-for="item in 3" :key="item" @click="page=item">{{['','个人','区','学校'][item]}}排名</div>
|
|
<div :class="page===item&&'active'" v-for="item in 3" :key="item" @click="page=item">{{['','个人','区','学校'][item]}}排名</div>
|
|
</div>
|
|
</div>
|
|
@@ -28,10 +34,16 @@ export default {
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
page: 1,
|
|
page: 1,
|
|
- bg: require('../../public/img/rank/bg.png'),
|
|
|
|
|
|
+ backgroundDiv: {
|
|
|
|
+ backgroundImage: 'url(' + require('../../public/img/rank/bg.png') + ')'
|
|
|
|
+ },
|
|
|
|
+ background1: {
|
|
|
|
+ backgroundImage: 'url(' + require('../../public/img/rank/test-area.png') + ')'
|
|
|
|
+ },
|
|
page2: require('../../public/img/rank/page-2.png'),
|
|
page2: require('../../public/img/rank/page-2.png'),
|
|
page3: require('../../public/img/rank/page-3.png'),
|
|
page3: require('../../public/img/rank/page-3.png'),
|
|
- rankList: []
|
|
|
|
|
|
+ rankList: [],
|
|
|
|
+ show: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -63,6 +75,8 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
.bg {
|
|
|
|
+ width: 1024px;
|
|
|
|
+ height: 344px;
|
|
margin: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding: 0;
|
|
float: left;
|
|
float: left;
|
|
@@ -70,6 +84,43 @@ export default {
|
|
z-index: 0;
|
|
z-index: 0;
|
|
left: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
|
|
+ background: no-repeat center top;
|
|
|
|
+ background-size: contain;
|
|
|
|
+
|
|
|
|
+ .help {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 92px;
|
|
|
|
+ right: 220px;
|
|
|
|
+ width: 38px;
|
|
|
|
+ height: 38px;
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .help-text {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 140px;
|
|
|
|
+ right: 70px;
|
|
|
|
+ width: 198px;
|
|
|
|
+ height: 98px;
|
|
|
|
+ background: no-repeat center top;
|
|
|
|
+ background-size: contain;
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+
|
|
|
|
+ .help-title {
|
|
|
|
+ margin: 15px 0 0 10px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .help-message {
|
|
|
|
+ margin: 2px 6px 8px 10px;
|
|
|
|
+ line-height: 17px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.content {
|
|
.content {
|
|
@@ -190,4 +241,9 @@ export default {
|
|
background: #FA7D01;
|
|
background: #FA7D01;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.help {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 100px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|