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

.gitignore

@@ -14,3 +14,4 @@
 package-lock.json
 yarn.lock
 
+doc/*

pages/approval_detail/baseDetail.vue

 <template>
   <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="title">
         基础数据变更（生产角色管理）
       </view>
-    </view>
-    <view class="step-container">
-      <vertical-steps
-          :steps="steps"
-          :current-step="1">
-
-        <!-- 自定义第二步内容 -->
-        <template v-for="(step, index) in steps" #[`content-${index}`]>
-          <view class="custom-table">
-            <view class="subTitleClass">
-              <view class="subRow">
-                <view class="subTitle">
-                  发起时间
-                </view>
-                <view class="subContent">
-                  {{ step.subtitle  }}
-                </view>
-              </view>
-              <view class="subRow">
-                <view class="subTitle">
-                  发起人
+      <!-- 步骤图区 -->
+      <view class="step-container">
+        <vertical-steps :steps="steps" :current-step="1">
+
+          <!-- 自定义第二步内容 -->
+          <template v-for="(step, index) in steps" #[`content-${index}`]>
+            <view class="custom-table">
+              <view class="subTitleClass">
+                <view class="subRow">
+                  <view class="subTitle">
+                    发起时间
+                  </view>
+                  <view class="subContent">
+                    {{ step.subtitle }}
+                  </view>
                 </view>
-                <view class="subContent">
-                  {{ step.subtitle  }}
+                <view class="subRow">
+                  <view class="subTitle">
+                    发起人
+                  </view>
+                  <view class="subContent">
+                    {{ step.subtitle }}
+                  </view>
                 </view>
-              </view>
-              <view class="subRow">
-                <view class="subTitle">
-                  审批人
+                <view class="subRow">
+                  <view class="subTitle">
+                    审批人
+                  </view>
+                  <view class="subContent">
+                    {{ step.subtitle }}
+                  </view>
                 </view>
-                <view class="subContent">
-                  {{ step.subtitle  }}
-                </view>
-              </view>
-              <view class="subRow">
-                <view class="subTitle">
-                  结束时间
-                </view>
-                <view class="subContent">
-                  {{ step.subtitle  }}
+                <view class="subRow">
+                  <view class="subTitle">
+                    结束时间
+                  </view>
+                  <view class="subContent">
+                    {{ step.subtitle }}
+                  </view>
                 </view>
               </view>
             </view>
-          </view>
-        </template>
-      </vertical-steps>
+          </template>
+        </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>
 </template>
@@ -61,11 +93,14 @@ import VerticalSteps from '@/components/vertical-steps/vertical-steps'
 export default {
   name: "baseDetail",
   onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
-    console.log('id',option.id); //打印出上个页面传递的参数。
+    console.log('id', option.id); //打印出上个页面传递的参数。
   },
   components: { VerticalSteps },
   data() {
     return {
+      formData: {
+        remark: ''
+      },
       steps: [
         { title: '申请提交', subtitle: '2023-08-01 14:00' },
         { title: '部门审批', subtitle: '进行中' },
@@ -77,11 +112,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.base-detail{
+.base-detail {
   background: #FFFFFF;
-  height: 100vh;
-  .container{
-    .title{
+
+  // height: 100vh;
+  .container {
+    .title {
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
       font-size: 40rpx;
@@ -91,17 +127,20 @@ export default {
       text-transform: none;
       padding: 52rpx 32rpx 20rpx 32rpx;
       border-bottom: 2rpx solid #F2F2F2;
-   }
+    }
   }
-  .step-container{
-   padding-left: 44rpx;
+
+  .step-container {
+    padding-left: 44rpx;
     padding-right: 26rpx;
- }
-  .custom-table{
+  }
+
+  .custom-table {
     background: #F9F9F9;
     border-radius: 10rpx;
     padding: 32rpx;
   }
+
   .subTitleClass {
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
@@ -111,10 +150,12 @@ export default {
     font-style: normal;
     text-transform: none;
   }
-  .subRow{
+
+  .subRow {
     display: flex;
     justify-content: space-between;
     margin-bottom: 12rpx;
+
     .subTitle {
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
@@ -124,6 +165,7 @@ export default {
       font-style: normal;
       text-transform: none;
     }
+
     .subContent {
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
@@ -134,5 +176,71 @@ export default {
       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>
\ No newline at end of file