You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.6 KiB
81 lines
1.6 KiB
<template>
|
|
<view class="content">
|
|
<view class="ul padding">
|
|
<view class="li" v-for="(item,index) in 7" :key="index" @click="goPage(index)">
|
|
<view class="num" :style="{background: colorArr[index]}">{{index+1}}</view>
|
|
<view class="rightTxt">
|
|
<view class="h1">安全行车常识</view>
|
|
<view class="flex">
|
|
<view class="proccess">
|
|
<up-line-progress :percentage="80" height="8" activeColor="#3776FF" :showText="false"></up-line-progress>
|
|
</view>
|
|
<view class="rate">60/260</view>
|
|
<view class="rate">正确率 100%</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
colorArr: ['#3776FF', '#64C76C', '#8484FF', '#F05C1C', '#FDD650', '#6FD568', '#52C1D0']
|
|
}
|
|
},
|
|
methods: {
|
|
goPage(index) {
|
|
console.log(index)
|
|
this.$goPage('/pages/exercises/brushQuestions/brushQuestions')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
.ul {
|
|
width: 100%;
|
|
.li {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
.num {
|
|
height: 34rpx;
|
|
width: 34rpx;
|
|
// padding: 10rpx 10rpx;
|
|
text-align: center;
|
|
background: #3776FF;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
line-height: 34rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
.h1 {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.rightTxt {
|
|
padding-left: 20rpx;
|
|
}
|
|
.flex {
|
|
.proccess {
|
|
margin-right: 20rpx;
|
|
width: 120rpx;
|
|
}
|
|
.rate {
|
|
font-size: 24rpx;
|
|
color: #CCCCCC;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|