OfficeApp/components/task/taskItem.vue

108 lines
2.1 KiB
Vue
Raw Normal View History

2023-08-04 11:32:51 +08:00
<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">
2023-08-05 10:22:22 +08:00
<view>进入任务<uni-icons type="right" color="#3175f9"></uni-icons></view>
2023-08-04 11:32:51 +08:00
</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>