背景图
This commit is contained in:
shijingjing
@@ -1,51 +1,53 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="testForm">
|
<div class="testForm">
|
||||||
<u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
|
<u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
|
||||||
<div class="type">
|
<div class="testForm_info">
|
||||||
<div class="type_left">单选题</div>
|
<div class="type">
|
||||||
<div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
|
<div class="type_left">单选题</div>
|
||||||
</div>
|
<div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
|
||||||
<div class="topic">
|
</div>
|
||||||
<div v-for="(item,index) in questionList" :key="index" >
|
<div class="topic">
|
||||||
<div v-if="activeIndex === index">
|
<div v-for="(item,index) in questionList" :key="index" >
|
||||||
<!-- 题目 -->
|
<div v-if="activeIndex === index">
|
||||||
<div>{{ item.subject }}</div>
|
<!-- 题目 -->
|
||||||
<!-- 单选 -->
|
<div>{{ item.subject }}</div>
|
||||||
<div class="answer_list">
|
<!-- 单选 -->
|
||||||
<div class="answer_item error">
|
<div class="answer_list">
|
||||||
{{ options[index] }}: {{ item.answer}}
|
<div class="answer_item error">
|
||||||
|
{{ options[index] }}: {{ item.answer}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 多选 -->
|
||||||
|
<!-- <div class="answer_list">
|
||||||
|
<div class="answer_item error">
|
||||||
|
{{ options[index] }}: {{ item.answer}}
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- 多选 -->
|
|
||||||
<!-- <div class="answer_list">
|
|
||||||
<div class="answer_item error">
|
|
||||||
{{ options[index] }}: {{ item.answer}}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="type mar-top">
|
||||||
|
<div class="type_left">答案解析</div>
|
||||||
|
</div>
|
||||||
|
<div class="topic mar-top">
|
||||||
|
<div><span>正确答案：</span></div>
|
||||||
|
<div>获悉，党的十八大以来，曲靖市深入学习贯彻习近平新时代中国特色社会主义思想，坚持以习近平法治思想为根本遵循和行动指南。</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="btn" @click="nextTopic" v-if="activeIndex < questionList.length - 1">下一题</div> -->
|
||||||
|
<div class="btn" @click="confirm">确定</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="type mar-top">
|
|
||||||
<div class="type_left">答案解析</div>
|
|
||||||
</div>
|
|
||||||
<div class="topic mar-top">
|
|
||||||
<div><span>正确答案：</span></div>
|
|
||||||
<div>获悉，党的十八大以来，曲靖市深入学习贯彻习近平新时代中国特色社会主义思想，坚持以习近平法治思想为根本遵循和行动指南。</div>
|
|
||||||
</div>
|
|
||||||
<div class="btn" @click="nextTopic" v-if="activeIndex < questionList.length - 1">下一题</div>
|
|
||||||
<div class="btn" @click="confirm">确定</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import dayjs from 'dayjs'
|
|
||||||
export default {
|
export default {
|
||||||
customNavigation: true,
|
customNavigation: true,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
backgroundNavbar: {
|
backgroundNavbar: {
|
||||||
// background: "url('./img/navbar.png') no-repeat",
|
background: "url('https://cdn.cunwuyun.cn/qujing/navbar.png') no-repeat",
|
||||||
// backgroundSize: '100% 100%',
|
backgroundSize: '100% 100%',
|
||||||
},
|
},
|
||||||
|
|
||||||
options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
|
options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
|
||||||
@@ -85,19 +87,19 @@ export default {
|
|||||||
moveX: 0, // 滑动的x轴距离
|
moveX: 0, // 滑动的x轴距离
|
||||||
activeIndex: 0, // 当前第几题
|
activeIndex: 0, // 当前第几题
|
||||||
newIndex: 0, // 滑动到第几题
|
newIndex: 0, // 滑动到第几题
|
||||||
list: [{
|
// list: [{
|
||||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
// image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
// title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
// image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
// title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
// image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
// title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
createdTime: '', // 开始答题时间
|
createdTime: '', // 开始答题时间
|
||||||
endTime: '', // 结束时间
|
endTime: '', // 结束时间
|
||||||
}
|
}
|
||||||
@@ -115,26 +117,26 @@ export default {
|
|||||||
nextTopic() {
|
nextTopic() {
|
||||||
this.activeIndex ++;
|
this.activeIndex ++;
|
||||||
},
|
},
|
||||||
touchStart(e) {
|
// touchStart(e) {
|
||||||
this.startX = e.changedTouches[0].pageX
|
// this.startX = e.changedTouches[0].pageX
|
||||||
console.log('开始触摸：', this.startX);
|
// console.log('开始触摸：', this.startX);
|
||||||
},
|
// },
|
||||||
touchEnd(e, index) { // 手指离开屏幕时触发
|
// touchEnd(e, index) { // 手指离开屏幕时触发
|
||||||
// 获取滑动距离
|
// // 获取滑动距离
|
||||||
const moveX = e.changedTouches[0].pageX - this.startX
|
// const moveX = e.changedTouches[0].pageX - this.startX
|
||||||
// 判断滑动方向
|
// // 判断滑动方向
|
||||||
if (moveX < -100 && index < this.topic.length-1) {
|
// if (moveX < -100 && index < this.topic.length-1) {
|
||||||
// 【下一题】 判断大幅度左滑且不是最后一题
|
// // 【下一题】 判断大幅度左滑且不是最后一题
|
||||||
this.newIndex=this.newIndex+1
|
// this.newIndex=this.newIndex+1
|
||||||
this.activeIndex= this.activeIndex+1
|
// this.activeIndex= this.activeIndex+1
|
||||||
console.log('第'+this.index+'题');
|
// console.log('第'+this.index+'题');
|
||||||
}
|
// }
|
||||||
else if (moveX > 100 && index!= 0) {
|
// else if (moveX > 100 && index!= 0) {
|
||||||
// 【上一题】 判断大幅度右滑且不是第一题
|
// // 【上一题】 判断大幅度右滑且不是第一题
|
||||||
this.newIndex=this.newIndex-1
|
// this.newIndex=this.newIndex-1
|
||||||
this.activeIndex=this.activeIndex-1
|
// this.activeIndex=this.activeIndex-1
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
confirm() {
|
confirm() {
|
||||||
uni.navigateTo({url: './result'})
|
uni.navigateTo({url: './result'})
|
||||||
},
|
},
|
||||||
@@ -143,91 +145,94 @@ export default {
|
|||||||
this.current ++;
|
this.current ++;
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.createdTime = Date.parse(new Date())
|
// this.createdTime = Date.parse(new Date())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.testForm {
|
.testForm {
|
||||||
// background: url("./img/bg.png") no-repeat;
|
.testForm_info {
|
||||||
padding: 0 32px;
|
background: url("https://cdn.cunwuyun.cn/qujing/bg.png") no-repeat;
|
||||||
margin-top: 80px;
|
background-size: 100% 100%;
|
||||||
|
padding: 80px 32px 0 32px;
|
||||||
.type {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 28px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.type_left {
|
.type {
|
||||||
font-weight: 600;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333333;
|
||||||
|
// margin-top: 80px;
|
||||||
|
|
||||||
.col_blue {
|
.type_left {
|
||||||
color: #2D7DFF;
|
font-weight: 600;
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic {
|
|
||||||
background: #FFF;
|
|
||||||
margin-top: 32px;
|
|
||||||
padding: 24px;
|
|
||||||
margin-top: 80px;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
|
|
||||||
|
|
||||||
.answer_list {
|
|
||||||
margin-top: 32px;
|
|
||||||
|
|
||||||
.answer_item {
|
|
||||||
background: #FBFCFE;
|
|
||||||
border: 1px solid #CCCCCC;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 28px 24px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.myChoice {
|
|
||||||
width: 136px;
|
|
||||||
height: 48px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #E23C3C;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.succeed {
|
.col_blue {
|
||||||
border: 2px solid #2D7EFE;
|
|
||||||
color: #2D7DFF;
|
color: #2D7DFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
}
|
||||||
border: 2px solid #E23C3C;
|
|
||||||
color: #E23C3C;
|
.topic {
|
||||||
|
background: #FFF;
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-top: 80px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
|
||||||
|
|
||||||
|
.answer_list {
|
||||||
|
margin-top: 32px;
|
||||||
|
|
||||||
|
.answer_item {
|
||||||
|
background: #FBFCFE;
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 28px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.myChoice {
|
||||||
|
width: 136px;
|
||||||
|
height: 48px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E23C3C;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.succeed {
|
||||||
|
border: 2px solid #2D7EFE;
|
||||||
|
color: #2D7DFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
border: 2px solid #E23C3C;
|
||||||
|
color: #E23C3C;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mar-top {
|
.mar-top {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
bottom: 0;
|
||||||
bottom: 0;
|
transform: translate(-50%, -50%);
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
line-height: 88px;
|
line-height: 88px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #2D7DFF;
|
background: #2D7DFF;
|
||||||
border-radius: 44px;
|
border-radius: 44px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user