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.
175 lines
4.4 KiB
175 lines
4.4 KiB
<template>
|
|
<BaseContainer class="brush-question">
|
|
<NavBar title="刷题过关" />
|
|
<advert :img="'/static/frontend/learning-advert.png'" :height="140" />
|
|
<view class="exam flex flex-center-x">
|
|
<image src="@/static/images/learning/exam-icon.png" mode="aspectFill" class="exam-icon"></image>
|
|
<view class="intro">
|
|
<view>组合卷考试</view>
|
|
<view>完成付费试题后可参加</view>
|
|
</view>
|
|
<image src="@/static/images/learning/to.png" mode="aspectFill" class="exam-to"></image>
|
|
</view>
|
|
<view class="list">
|
|
<template v-if="list.length > 0">
|
|
<view v-for="(item, index) in list" class="list-item flex flex-center-x" @click="toContent">
|
|
<view class="item-left">
|
|
<view class="title">
|
|
<image src="@/static/images/learning/icon.png" mode="aspectFill"></image>
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
<view class="content">
|
|
<view>词汇量：{{ item.count }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-right">
|
|
<image v-if="item.type === 1" src="@/static/images/learning/nolock.png" mode="aspectFill"></image>
|
|
<image v-if="item.type === 2" src="@/static/images/learning/lock.png" mode="aspectFill"></image>
|
|
<view class="list-more"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import Advert from '@/components/Advert/index.vue';
|
|
export default {
|
|
components: {
|
|
Advert,
|
|
},
|
|
data() {
|
|
return {
|
|
list: [ // 0：免费 1：解锁 2：锁住
|
|
{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 0 },
|
|
{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 0 },
|
|
{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 1 },
|
|
{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 1 },
|
|
{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 2 },
|
|
{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 2 }
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
toContent() {
|
|
uni.navigateTo({
|
|
url: '/pages/learningCenter/reciteContent',
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.brush-question {
|
|
background: #f6f6f6;
|
|
.exam {
|
|
width: 690rpx;
|
|
margin: 32rpx 30rpx 0;
|
|
height: 180rpx;
|
|
background-color: #386FF4;
|
|
border-radius: 10rpx;
|
|
padding: 0 65rpx 0 50rpx;
|
|
background-image: url(@/static/images/learning/exam-bg.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: 100% 100%;
|
|
.exam-icon {
|
|
width: 54rpx;
|
|
height: 64rpx;
|
|
margin-right: 55rpx;
|
|
}
|
|
.intro {
|
|
margin-right: auto;
|
|
view {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #fff;
|
|
&:first-child {
|
|
font-size: 34rpx;
|
|
line-height: 34rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 17rpx;
|
|
}
|
|
}
|
|
}
|
|
.exam-to {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.list {
|
|
width: 690rpx;
|
|
margin: 20rpx 30rpx 0;
|
|
.list-item {
|
|
width: 100%;
|
|
height: 158rpx;
|
|
background: #fff;
|
|
border-radius: 8rpx;
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
margin-bottom: 20rpx;
|
|
.item-left {
|
|
flex: 1;
|
|
.title {
|
|
color: #333;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
text {
|
|
width: 420rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
>view {
|
|
font-size: 20rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
.item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
.status {
|
|
width: 76rpx;
|
|
height: 39rpx;
|
|
background: #FFEDE9;
|
|
border-radius: 6rpx 0rpx 6rpx 0rpx;
|
|
text-align: center;
|
|
line-height: 39rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
.list-more {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
border-width: 2px 2px 0 0;
|
|
border-color: #ccc;
|
|
border-style: solid;
|
|
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
|
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
|
vertical-align: top;
|
|
margin-left: 13rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |