123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <template>
- <view class="content">
- <view class="task-list" v-for="(item,index) in 3" :key="index">
- <view class="task-l">
- <u-image width="80rpx" height="80rpx" :src="`/static/taskIcon${index+1}.png`"></u-image>
- <view class="task-l-info">
- <view class="task-l-title">新用户登录</view>
- <view class="task-l-desc">赚<text>1</text>次抽奖 <u-image width="22rpx" height="22rpx" src="/static/zpIcon.png"></u-image></view>
- </view>
- </view>
- <view class="task-r">
- <u-button size="medium" v-if="index==0" :custom-style="{padding:'6px 10px',width:'100%',background:'#989898',color:'#ffffff'}">已完成</u-button>
- <u-button size="medium" v-else :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即前往</u-button>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
-
- }
- },
- methods: {
-
- }
- }
- </script>
- <style lang="less">
- .content{
- width: 100%;
- padding: 0;
- }
- .task-list{
- display: flex;
- align-items: center;
- padding: 20rpx 40rpx;
- border-bottom: 1px solid #eee;
- background-color: #FFFFFF;
- .task-l{
- width: 80%;
- display: flex;
- align-items: center;
- .task-l-info{
- flex-grow: 1;
- padding: 0 15rpx;
- .task-l-title{
- font-weight: bold;
- }
- .task-l-desc{
- display: flex;
- align-items: center;
- font-size: 24rpx;
- color: #666;
- margin-top: 5rpx;
- }
- }
- }
- .task-r{
- width: 20%;
- }
- }
- </style>
|