Skip to content

D
db_qms_wx
Commit 7e9c6402 authored by 刘怀志's avatar 刘怀志
Browse files
Options

feat(审批详情): 审批详情页面样式完成

parent fc7e504b
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 52 deletions
.gitignore
View file @ 7e9c6402
...@@ -14,3 +14,4 @@ ...@@ -14,3 +14,4 @@
package-lock.json package-lock.json
yarn.lock yarn.lock
doc/*
pages/approval_detail/baseDetail.vue
View file @ 7e9c6402
<template> <template>
<view class="base-detail"> <view class="base-detail">
<ya-navbar title="审批详情" :left-icon-color="'#fff'" :bg-style="'#333399'" :title-style="'color: #fff;font-weight: 500;font-size: 35rpx;'" /> <ya-navbar title="审批详情" :left-icon-color="'#fff'" :bg-style="'#333399'"
:title-style="'color: #fff;font-weight: 500;font-size: 35rpx;'" />
<view class="container"> <view class="container">
<view class="title"> <view class="title">
基础数据变更（生产角色管理） 基础数据变更（生产角色管理）
</view> </view>
</view> <!-- 步骤图区 -->
<view class="step-container"> <view class="step-container">
<vertical-steps <vertical-steps :steps="steps" :current-step="1">
:steps="steps"
:current-step="1"> <!-- 自定义第二步内容 -->
<template v-for="(step, index) in steps" #[`content-${index}`]>
<!-- 自定义第二步内容 --> <view class="custom-table">
<template v-for="(step, index) in steps" #[`content-${index}`]> <view class="subTitleClass">
<view class="custom-table"> <view class="subRow">
<view class="subTitleClass"> <view class="subTitle">
<view class="subRow"> 发起时间
<view class="subTitle"> </view>
发起时间 <view class="subContent">
</view> {{ step.subtitle }}
<view class="subContent"> </view>
{{ step.subtitle }}
</view>
</view>
<view class="subRow">
<view class="subTitle">
发起人
</view> </view>
<view class="subContent"> <view class="subRow">
{{ step.subtitle }} <view class="subTitle">
发起人
</view>
<view class="subContent">
{{ step.subtitle }}
</view>
</view> </view>
</view> <view class="subRow">
<view class="subRow"> <view class="subTitle">
<view class="subTitle"> 审批人
审批人 </view>
<view class="subContent">
{{ step.subtitle }}
</view>
</view> </view>
<view class="subContent"> <view class="subRow">
{{ step.subtitle }} <view class="subTitle">
</view> 结束时间
</view> </view>
<view class="subRow"> <view class="subContent">
<view class="subTitle"> {{ step.subtitle }}
结束时间 </view>
</view>
<view class="subContent">
{{ step.subtitle }}
</view> </view>
</view> </view>
</view> </view>
</view> </template>
</template> </vertical-steps>
</vertical-steps> </view>
<!-- 步骤图完成 -->
<!-- 备注区 -->
<view class="title">
备注信息
</view>
<view class="remark-container">
<u-form :model="formData">
<u-form-item label="访问内容" prop="remark" labelPosition="top" labelWidth="80">
<u-textarea v-model="formData.remark" placeholder="请输入备注信息内容" show-word-limit :maxlength="200"></u-textarea>
</u-form-item>
</u-form>
</view>
<!-- 备注区完成 -->
<!-- 变更内容区 -->
<view class="title">
变更内容
</view>
<view class="change-container">
<view class="change-item">
请登录PC端查看变更详情
</view>
</view>
<!-- 按钮区域 -->
<view class="btns-container">
<view class="btn reject-btn" @click="handleReject">
驳回
</view>
<view class="btn approve-btn" @click="handleApprove">
通过
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -61,11 +93,14 @@ import VerticalSteps from '@/components/vertical-steps/vertical-steps' ...@@ -61,11 +93,14 @@ import VerticalSteps from '@/components/vertical-steps/vertical-steps'
export default { export default {
name: "baseDetail", name: "baseDetail",
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log('id',option.id); //打印出上个页面传递的参数。 console.log('id', option.id); //打印出上个页面传递的参数。
}, },
components: { VerticalSteps }, components: { VerticalSteps },
data() { data() {
return { return {
formData: {
remark: ''
},
steps: [ steps: [
{ title: '申请提交', subtitle: '2023-08-01 14:00' }, { title: '申请提交', subtitle: '2023-08-01 14:00' },
{ title: '部门审批', subtitle: '进行中' }, { title: '部门审批', subtitle: '进行中' },
...@@ -77,11 +112,12 @@ export default { ...@@ -77,11 +112,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.base-detail{ .base-detail {
background: #FFFFFF; background: #FFFFFF;
height: 100vh;
.container{ // height: 100vh;
.title{ .container {
.title {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 40rpx; font-size: 40rpx;
...@@ -91,17 +127,20 @@ export default { ...@@ -91,17 +127,20 @@ export default {
text-transform: none; text-transform: none;
padding: 52rpx 32rpx 20rpx 32rpx; padding: 52rpx 32rpx 20rpx 32rpx;
border-bottom: 2rpx solid #F2F2F2; border-bottom: 2rpx solid #F2F2F2;
} }
} }
.step-container{
padding-left: 44rpx; .step-container {
padding-left: 44rpx;
padding-right: 26rpx; padding-right: 26rpx;
} }
.custom-table{
.custom-table {
background: #F9F9F9; background: #F9F9F9;
border-radius: 10rpx; border-radius: 10rpx;
padding: 32rpx; padding: 32rpx;
} }
.subTitleClass { .subTitleClass {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -111,10 +150,12 @@ export default { ...@@ -111,10 +150,12 @@ export default {
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
.subRow{
.subRow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 12rpx; margin-bottom: 12rpx;
.subTitle { .subTitle {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -124,6 +165,7 @@ export default { ...@@ -124,6 +165,7 @@ export default {
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
} }
.subContent { .subContent {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -134,5 +176,71 @@ export default { ...@@ -134,5 +176,71 @@ export default {
text-transform: none; text-transform: none;
} }
} }
.remark-container {
padding: 28rpx 46rpx 0 48rpx;
::v-deep .u-form-item__body__left__content__label {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #111111;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 14rpx;
}
}
.change-container {
padding: 28rpx 46rpx 0 48rpx;
.change-item {
width: 684rpx;
height: 140rpx;
display: flex;
align-items: center;
justify-content: center;
background: #FFFBF0;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #F4850E;
line-height: 36rpx;
font-style: normal;
}
}
}
.btns-container {
display: flex;
justify-content: center;
gap: 16rpx;
padding: 40rpx 0;
.btn {
width: 312rpx;
height: 96rpx;
border-radius: 56rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 34rpx;
line-height: 48rpx;
text-align: center;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
}
.reject-btn {
border: 2rpx solid #333399;
color: #333399;
}
.approve-btn {
background: #333399;
color: #FFFFFF;
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment