114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<template>
|
||
<view class="card">
|
||
<view class="top">
|
||
<view class="title" :class="task?'title_tow':''">完成OA移动端界面设计</view>
|
||
<view class="price">
|
||
<image src="../../static/icons/price.png"></image>
|
||
<text>11.00</text>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
关于设计app常用页面的美化按照原型图美化页面
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="left">任务性质：部门协助</view>
|
||
<view class="right">计划完成日期：2023-03-25 23:59</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "taskCard",
|
||
props: ['task'],
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.card {
|
||
width: 694rpx;
|
||
height: 188rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 21rpx 21rpx 21rpx 21rpx;
|
||
opacity: 1;
|
||
box-sizing: border-box;
|
||
padding: 25rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 35rpx;
|
||
|
||
&::before {
|
||
content: '紧急';
|
||
display: inline-block;
|
||
color: #F24848;
|
||
padding: 2px 8px;
|
||
background: #FFE4E4;
|
||
margin-right: 20rpx;
|
||
border-radius: 7rpx 7rpx 7rpx 7rpx;
|
||
}
|
||
}
|
||
|
||
.title_tow {
|
||
&::before {
|
||
content: '一般';
|
||
display: inline-block;
|
||
color: #3274F9;
|
||
padding: 2px 8px;
|
||
background: #E4EDFF;
|
||
margin-right: 20rpx;
|
||
border-radius: 7rpx 7rpx 7rpx 7rpx;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
width: 158rpx;
|
||
height: 49rpx;
|
||
background: #FFF1DB;
|
||
border-radius: 74rpx 74rpx 74rpx 74rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #F9AA32;
|
||
|
||
image {
|
||
width: 28.99rpx;
|
||
height: 28.99rpx;
|
||
margin-right: 5.5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.center {
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 35rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 35rpx;
|
||
}
|
||
}
|
||
</style> |