<template> <view class="c_task_item"> <view class="top"> <view class="left"> <view>任务名称:</view> <view class="text">宣传配送</view> </view> <view class="right"> <image class="icon" src="../../static/icons/ok_c.png"></image> <!-- <image src="../../static/icons/err_c.png"></image> --> </view> </view> <view class="item"> <view class="left"> <view>任务进度:</view> <view class="text">30%</view> </view> <view class="right">¥30.00<text class="price">元</text></view> </view> <view class="item"> <view class="left"> <view>任务进度:</view> <view class="text">2023.08.05</view> </view> <view class="right"> <text>进入任务<uni-icons type="right" color="#3175f9"></uni-icons></text> </view> </view> </view> </template> <script> export default { name: "task", data() { return { }; } } </script> <style lang="scss"> .c_task_item { margin: 0 auto; margin-bottom: 28rpx; width: 694rpx; background: #FFFFFF; border-radius: 14rpx 14rpx 14rpx 14rpx; opacity: 1; font-size: 25rpx; font-weight: 400; color: #999999; line-height: 39rpx; .text { font-size: 28rpx; font-weight: 400; color: #333333; line-height: 39rpx; margin-left: 18rpx; } .top { display: flex; justify-content: space-between; padding: 28rpx; border-bottom: 1rpx solid #F5F5F5FF; .left { display: flex; justify-content: left; align-items: center; } .right { .icon { width: 43rpx; height: 43rpx; } } } .item { display: flex; justify-content: space-between; margin: 18rpx 28rpx 0 28rpx; &:last-child { padding-bottom: 18rpx; } .left { display: flex; } .right{ font-size: 32rpx; font-weight: 400; color: #3274F9; line-height: 39rpx; .price{ font-size: 25rpx; } } } } </style>