2023-07-31 16:31:59 +08:00

114 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>