|
@@ -0,0 +1,66 @@
|
|
|
+<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>
|