wangdong
10 months ago
parent
4e8e4c5db5
commit
db609de774
@ -0,0 +1,172 @@ |
||||
<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="" mode="aspectFill"></image> |
||||
<view class="intro"> |
||||
<view>组合卷考试</view> |
||||
<view>完成付费试题后可参加</view> |
||||
</view> |
||||
<view class="exam-btn"></view> |
||||
</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: #386FF4; |
||||
border-radius: 10rpx; |
||||
padding: 0 65rpx 0 50rpx; |
||||
>image { |
||||
width: 64rpx; |
||||
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-btn { |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
border-radius: 50%; |
||||
background: #fff; |
||||
} |
||||
} |
||||
.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> |
||||
Loading…
Reference in new issue