196 lines
3.8 KiB
Vue
196 lines
3.8 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="content_card">
|
||
<view class="cont_header flex_a_c_j_sb">
|
||
<view class="task_name">任务名称</view>
|
||
<view class="is_matter">任务审批</view>
|
||
</view>
|
||
<view class="cont_details">
|
||
审批内容
|
||
<view class="">审批详细描述</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_card">
|
||
<!-- 头部 -->
|
||
<view class="cont_header">
|
||
<view class="flex_a_c_j_sb">
|
||
<view class="approver">当前审批人：张三</view>
|
||
<view class="audit_store">审核状态：<text>已通过</text> </view>
|
||
</view>
|
||
<view class="make_copy">抄送人：李四</view>
|
||
</view>
|
||
<!-- 内容 -->
|
||
<view class="cont_details">
|
||
<view class="examine">审批流程</view>
|
||
<view class="examine">审批记录</view>
|
||
<block v-for="(item,i) in 3" :key="i">
|
||
<view class="record flex">
|
||
<view class="circle"></view>
|
||
<text class="text">2023-03-24 :09:40 张三 提交 了此申请。操作意见：提交申请</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow() {},
|
||
methods: {},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content_card {
|
||
width: 695rpx;
|
||
margin: 0 auto;
|
||
margin-top: 24.56rpx;
|
||
padding: 0 28.07rpx;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.cont_header {
|
||
padding: 21.05rpx 0;
|
||
font-size: 31.58rpx;
|
||
min-height: 82.46rpx;
|
||
width: 100%;
|
||
border-bottom: 1px solid rgba(204, 204, 204, 0.5);
|
||
|
||
.task_name {
|
||
width: 526.32rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.is_matter {
|
||
font-size: 24.56rpx;
|
||
border-radius: 4px;
|
||
// padding: 3.51rpx 17.54rpx;
|
||
color: $theme-oa-color;
|
||
// background-color: #E4EDFF;
|
||
}
|
||
|
||
// 审批人
|
||
.approver {
|
||
font-size: 28.07rpx;
|
||
}
|
||
|
||
.audit_store {
|
||
font-size: 31.58rpx;
|
||
}
|
||
|
||
.make_copy {
|
||
color: #999;
|
||
margin-top: 14.04rpx;
|
||
font-size: 24.56rpx;
|
||
}
|
||
}
|
||
|
||
.cont_details {
|
||
padding: 24.56rpx 0;
|
||
font-size: 28.07rpx;
|
||
|
||
// 时间
|
||
.finish_time {
|
||
font-size: 24.56rpx;
|
||
color: #999;
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
margin-bottom: 7.02rpx;
|
||
}
|
||
|
||
.upload_box {
|
||
padding: 17.54rpx;
|
||
background-color: #F7F7F7;
|
||
border-radius: 4px;
|
||
|
||
.title {
|
||
font-size: 28.07rpx;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 7.02rpx;
|
||
font-size: 21.05rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.file {
|
||
padding: 17.54rpx;
|
||
border-radius: 4px;
|
||
border: 1px solid #F2F2F2;
|
||
margin-bottom: 17.54rpx;
|
||
|
||
.file_size {
|
||
margin-top: 7.02rpx;
|
||
}
|
||
|
||
.file_size,
|
||
.upload_people {
|
||
font-size: 21.05rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
// 审批
|
||
.examine {
|
||
margin-bottom: 17.54rpx;
|
||
}
|
||
|
||
.record {
|
||
position: relative;
|
||
margin-bottom: 14.04rpx;
|
||
|
||
.circle {
|
||
width: 31.58rpx;
|
||
height: 31.58rpx;
|
||
background-color: #fff;
|
||
border: 2px solid #34A853;
|
||
border-radius: 50%;
|
||
margin: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
clear: both;
|
||
width: 1px;
|
||
height: 100%;
|
||
background-color: rgba(204, 204, 204, 0.5);
|
||
margin: 31.58rpx;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
flex: 1;
|
||
margin-left: 7.02rpx;
|
||
}
|
||
}
|
||
|
||
:last-child {
|
||
.circle {
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|