taskList.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view class="content">
  3. <view class="task-list" v-for="(item,index) in 3" :key="index">
  4. <view class="task-l">
  5. <u-image width="80rpx" height="80rpx" :src="`/static/taskIcon${index+1}.png`"></u-image>
  6. <view class="task-l-info">
  7. <view class="task-l-title">新用户登录</view>
  8. <view class="task-l-desc">赚<text>1</text>次抽奖 <u-image width="22rpx" height="22rpx" src="/static/zpIcon.png"></u-image></view>
  9. </view>
  10. </view>
  11. <view class="task-r">
  12. <u-button size="medium" v-if="index==0" :custom-style="{padding:'6px 10px',width:'100%',background:'#989898',color:'#ffffff'}">已完成</u-button>
  13. <u-button size="medium" v-else :custom-style="{padding:'6px 10px',width:'100%',background:'#02c9b2',color:'#ffffff'}">立即前往</u-button>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. }
  23. },
  24. methods: {
  25. }
  26. }
  27. </script>
  28. <style lang="less">
  29. .content{
  30. width: 100%;
  31. padding: 0;
  32. }
  33. .task-list{
  34. display: flex;
  35. align-items: center;
  36. padding: 20rpx 40rpx;
  37. border-bottom: 1px solid #eee;
  38. background-color: #FFFFFF;
  39. .task-l{
  40. width: 80%;
  41. display: flex;
  42. align-items: center;
  43. .task-l-info{
  44. flex-grow: 1;
  45. padding: 0 15rpx;
  46. .task-l-title{
  47. font-weight: bold;
  48. }
  49. .task-l-desc{
  50. display: flex;
  51. align-items: center;
  52. font-size: 24rpx;
  53. color: #666;
  54. margin-top: 5rpx;
  55. }
  56. }
  57. }
  58. .task-r{
  59. width: 20%;
  60. }
  61. }
  62. </style>