bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/pages_adjust/pages/OrderDetail/OrderDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1037 @@
<template>
   <view>
      <workOrderInfo :orederMessage="info" />
      <!-- <view class="bg_cate">
         <view @click="clickIten(index)" :class="typeView == index ? 'bg_cate_item active' : 'bg_cate_item'"
            v-for="(item, index) in cate" :key="index">{{ item.name }}</view>
      </view> -->
      <div class="bg_list">
         <div class="bg_list_item">
            <div class="bg_list_item_top">
               <div class="bg_list_item_top_left">
                  <div class="bg_list_item_top_left_x bg_m"></div>
                  <span>投料明细</span>
               </div>
            </div>

            <template v-if="feedingData && feedingData.length > 0">
               <view>
                  <view v-for="(item, index) in feedingData" :key="index">
                     <div class="bg_list_item_h">
                        <div class="bg_list_item_num">
                           <div class="bg_list_item_num_item">
                              <div class="bg_list_item_num_item_wl">
                                 <span> {{ item.materialName || '墙体砖' }}{{ item.procedureName ? `&nbsp;|&nbsp;${item.procedureName}` : ''
                                 }}</span>
                                 <div class="bg_list_item_num_item_wl_lx">
                                    <span class="green" v-if="item.qualityType == 0">合格&nbsp;/&nbsp;</span>
                                    <span class="orange" v-if="item.qualityType == 1">不良&nbsp;/&nbsp;</span>
                                    <span class="red" v-if="item.qualityType == 2">报废&nbsp;/&nbsp;</span>
                                    <span>{{ item.locationName }}</span>
                                    <span>{{ item.batch ? `&nbsp;/&nbsp;${item.batch}` : '' }}</span>
                                 </div>
                              </div>
                              <div class="bg_list_item_num_item_sr">
                                 <view class="cY">
                                    <view class="mr10">{{ item.num }}</view>
                                    <span v-if="info.umodel">{{ info.umodel.name }}</span>
                                 </view>

                              </div>
                           </div>
                        </div>
                     </div>
                  </view>
               </view>

            </template>
            <template v-else>
               <div class="kong">
                  <span>暂无数据</span>
               </div>
            </template>
         </div>
         <div class="bg_list_item">
            <div class="bg_list_item_top">
               <div class="bg_list_item_top_left">
                  <div class="bg_list_item_top_left_x bg_m"></div>
                  <span>产出明细</span>
               </div>
               <div class="bg_list_item_top_right" @click="proRecord">
                  <span style="color: #4275FC;">查看检验记录</span>
                  <u-icon name="arrow-right" color="#4275FC" />
               </div>
            </div>
            <div class="bg_list_item_h">
               <div class="bg_list_item_num">
                  <div class="bg_list_item_num_item">
                     <span>良品数{{ info.umodel ? `(${info.umodel.name})` : '' }}</span>
                     <div class="bg_list_item_num_item_sr">
                        <view class="mr10">{{ produceFrom.qualified }}</view>
                        <span v-if="info.umodel">{{ info.umodel.name }}</span>
                     </div>
                  </div>
               </div>
            </div>
            <div class="bg_list_item_h">
               <div class="bg_list_item_num">
                  <div class="bg_list_item_num_item">
                     <span>不良数{{ info.umodel ? `(${info.umodel.name})` : '' }}</span>
                     <div class="bg_list_item_num_item_sr">
                        <view class="mr10">{{ produceFrom.undesirable }}</view>
                        <span v-if="info.umodel">{{ info.umodel.name }}</span>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="bg_list_item">
            <div class="bg_list_item_top">
               <div class="bg_list_item_top_left">
                  <div class="bg_list_item_top_left_x bg_m"></div>
                  <span>生产点检</span>
               </div>
            </div>
            <template v-if="djData && djData.length > 0">
               <div class="details_dj">
						
                  <div class="details_dj_list">
                     <scroll-view scroll-y="true" refresher-enabled="true" @scrolltolower="getLists">
                        <view v-for="(item, index) in djData" :key="index">
                           <div class="details_dj_list_item">
                              <span>{{ item.attrName }}：{{ item.val }}</span>
                              <span>{{ item.userName }} {{ item.createTime }}</span>
                           </div>
                        </view>
                     </scroll-view>
                  </div>
               </div>
            </template>
            <template v-else>
               <div class="kong">
                  <span>暂无数据</span>
               </div>
            </template>
         </div>
      </div>
		
   </view>
</template>

<script>
   import workOrderInfo from '@/components/workOrderInfo.vue'
   import {
      getBarcodeContent,
      queryById,
      getOrocessRecord,
      deleteCT,
      updateById,
      comfirmDone,
      comfirmDoneStandard,
      getListByCondition,
      allForStandard,
      pageDJ,
      deletedj,
      dealWorkorderRecordStandard,
      getWorkorderRecordListStandard,
      createMaterial,
      createMaterialStandard
   } from '@/util/api/WorkOrderAPI'
   import {
      categoryExtList,
      queryOne,
      queryList
   } from '@/util/api/PlanningAPI'
   import {
      REGULAR
   } from '@/util/utils'
   export default {
      components: {
         workOrderInfo
      },
      data() {
         return {
            workorderId: '',
            cate: [{
                  name: '生产'
               },
               {
                  name: '点检'
               }
            ],
            form: {
               time: '',
               efective: [],
               defectiveName: '',
               durationName: '0小时0分钟',
               duration: 0,
               type: 0,
               index: 0
            },
            info: {},
            TimeShow: false,
            badShow: false,
            typeView: 0,
            feedingData: [],
            options: [{
               text: '删除',
               style: {
                  backgroundColor: 'red',
               }
            }],
            arrType: [],
            // äº§å‡ºåˆæ ¼/不良
            produceFrom: {
               qualifiedId: '',
               qualified: '', // åˆæ ¼
               undesirableId: '',
               undesirable: 5 // ä¸è‰¯
            },
            djData: [],
            cateList: [],
            finished: true,
         };
      },
      onLoad(obj) {
         this.workorderId = obj.id
         this.queryByIds()
         this.getOrocessRecords()
         this.getData()
         this.getOrocessRecordCC()
         uni.$on('spotAdd', () => {
            if (this.typeView == 1) {
               this.pages.page = 1
               this.pageDJs()
            }
         })
      },
      computed: {
         expectedSalary() {
            if (this.arrType.length === 0) return 0;
            // æŒ‰ä»¶è®¡ç®—
            if (this.arrType[this.form.index].type == 0) {
               if (!this.produceFrom.qualified) return 0
               if (this.arrType[this.form.index].unqualified == 1) { // æ˜¯å¦è®¡å…¥ä¸è‰¯å“
                  let total = Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable)
                  return (total * (this.arrType[this.form.index].salary / 100)).toFixed(2) || 0
               } else {
                  return (Number(this.produceFrom.qualified) * (this.arrType[this.form.index].salary / 100)).toFixed(
                     2) || 0
               }
            } else {
               if (!this.form.duration) return 0;
               let h = (this.form.duration / 60 / 60).toFixed(2)
               return (Number(h) * (this.arrType[this.form.index].salary / 10 / 10)).toFixed(2) || 0
            }
         },
         complianceRate() {
            if (this.arrType.length === 0) return 0;
            if (!this.produceFrom.qualified && !this.produceFrom.undesirable) return 0;
            if (!this.form.duration) return 0;
            if (!this.arrType[this.form.index].num) return 0;
            // æŒ‰ä»¶è®¡ç®—
            // if (infoBox.value.type == 0) {
            if (this.arrType[this.form.index].unqualified == 1) { // æ˜¯å¦è®¡å…¥ä¸è‰¯å“
               let a = ((Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable)) / (this.form
                  .duration / 3600)).toFixed(2)
               let b = (this.arrType[this.form.index].num / (this.arrType[form.index].times / 3600)).toFixed(2)
               return ((Number(a) / Number(b)) * 100).toFixed(2)
               // let total = (Number(from.qualified) + Number(from.undesirable)) / ((from.duration * 60 * 60) * infoBox.value.num / )
               // return total * infoBox.value.salary;
            } else {
               let a = (this.produceFrom.qualified / (this.form.duration / 3600)).toFixed(2)
               let b = (this.arrType[this.form.index].num / (this.arrType[this.form.index].times / 3600)).toFixed(2)
               return ((Number(a) / Number(b)) * 100).toFixed(2)
               // return Number(from.qualified) * infoBox.value.salary;
            }
         }
      },
      methods: {
         getData() {
            categoryExtList({
               cateType: "3"
            }).then(res => {
               if (res.code === 200) {
                  res.data.forEach(item => {
                     item.active = false
                     item.num = ''
                  })
                  this.cateList = res.data
               }
            })
         },
         clickIten(index) {
            this.typeView = index
            if (this.typeView == 1) {
               this.pages.page = 1
               this.finished = true
               this.pageDJs()
            }
         },
         getLists() {
            if (!this.finished) {
               return
            }
            this.finished = false
            this.pages.page += 1
            this.pageDJs()
         },
         timeConfirm({
            value
         }) {
            console.log(value)
            let h = Number(value.substring(0, 2))
            let m = Number(value.substring(3, 5))
            let s = 0
            if (h > 0) {
               s += h * 60 * 60
            }
            if (m > 0) {
               s += m * 60
            }
            this.form.duration = s
            this.form.durationName = `${h}小时${m}分钟`
            this.TimeShow = false
         },
         // ç¼–辑投料/产出
         change(id, num, type, maxNum, item, unitAttribute) {
            let obj = item
            if (type === 'T') {
               if (unitAttribute == 0 && num != '') {
                  if (!REGULAR.positiveInteger.test(num)) {
                     obj.num = obj.ynum
                     uni.$u.toast('只能输入正整数')
                     return
                  }
               }
               if (unitAttribute == 1 && num != '') {
                  if (!REGULAR.number.test(num)) {
                     uni.$u.toast('只能输入正整数或小数（最多四位）')

                     obj.num = obj.ynum
                     return
                  }
               }
               if (num > maxNum) {
                  obj.num = obj.ynum
                  uni.$u.toast('超出工装总数')

                  return
               }
            } else if (type === 'C' && num > info.value.planNum) {
               obj.num = obj.ynum
               uni.$u.toast('产出数量不能超过计划数量')

               return
            }

         },
         clickPerformanceType(item, index) {
            this.form.index = index
            this.form.type = item.type
         },
         submit() {

         },
         jumpdj() {
            uni.navigateTo({
               url: `/pages_adjust/pages/spotCheck/spotCheck?id=${this.workorderId}`
            })
         },
         proRecord() {
            uni.navigateTo({
               url: `/pages_inspect/pages/InspectionRecords/InspectionRecords?id=${this.workorderId}`
            })
         },
         pageDJs() {
            pageDJ({
                  capacity: this.pages.capacity,
                  page: this.pages.page,
                  model: {
                     workorderId: this.workorderId
                  }
               }).then(res => {
                  let {
                     data
                  } = res
                  if (data.page == 1) {
                     this.djData = []
                  }
                  this.djData.push(...data.records)
                  // loading.value = false
               }).catch(err => {
                  // loading.value = false
                  // finished.value = true
               })
               .finally(() => {
                  this.finished = true
               })
         },
         dele(id) {
            deletedj(id)
               .then(res => {
                  if (res.code === 200) {
                     this.finished = false
                     this.pages.page = 1
                     this.pageDJs()
                  }
               })
         },
         confirm() {
            let isOpen = false
            this.cateList.forEach((item, index) => {
               if (item.active) {
                  isOpen = true
               }
            })
            if (!isOpen) {
               uni.showToast({
                  title: '请选择不良项',
                  duration: 2000,
                  icon: 'none'
               })
               return
            }
            let arr = []
            let total = 0
            let name = ''
            this.cateList.forEach((item, index) => {
               if (item.active) {
                  if (item.num <= 0) {
                     uni.showToast({
                        title: '不良数量必须大于0',
                        duration: 2000,
                        icon: 'none'
                     })
                     return
                  }
                  total = total += item.num
                  arr.push(item)
                  name += item.name + item.num + '；'
               }
            })
            if (total != Number(this.produceFrom.undesirable)) {
               uni.showToast({
                  title: '不良数必须等于产出不良数',
                  duration: 2000,
                  icon: 'none'
               })
               return
            }
            this.form.defective = arr
            this.form.defectiveName = name
            this.badShow = false
         },
         changeChecked(i) {
            this.cateList[i].active = !this.cateList[i].active
         },
         queryByIds() {
            queryById(this.workorderId)
               .then(res => {
                  this.info = res.data
                  queryList({
                     deleted: 0,
                     departId: res.data.factoryId,
                     materialId: res.data.materialId,
                     procedureId: res.data.procedureId
                  }).then(result => {
                     if (result.code === 200) {
                        if (result.data && result.data.length > 0) {
                           result.data.forEach((item, index) => {
                              item.name = item.type == 0 ? '计件' : '计时'
                              item.id = item.type
                              item.active = index == 0
                           })
                           this.arrType = result.data
                        } else {
                           this.arrType = []
                        }
                     }
                  })
               })
         },
         getOrocessRecords() {
            this.feedingData = []
            allForStandard({
               workorderId: this.workorderId,
               type: 0
            }).then(res => {
               if (res.code === 200) {
                  this.feedingData = res.data
               }
            })
         },
         getOrocessRecordCC() {
            getWorkorderRecordListStandard({
               workorderId: this.workorderId
            }).then(res => {
               if (res.data.length > 0) {
                  this.produceFrom.qualified = res.data[0].qualifiedNum
                  this.produceFrom.undesirable = res.data[0].unqualifiedNum
               }
            })
         },
         jumpTL() {
            uni.navigateTo({
               // url: ''
               url: `/pages_adjust/pages/manualFeed/manualFeed?id=${this.workorderId}`
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .bg_cate {
      width: 100%;
      height: 88rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;

      .active {
         box-sizing: border-box;
         color: #305ED5 !important;
         font-weight: 500;
         border-bottom: 3rpx solid #305ED5;
      }

      .bg_cate_item {
         flex: 1;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 30rpx;
         font-weight: 400;
         color: #555555;
      }
   }

   .bg_list {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 30rpx;

      .bg_list_item {
         display: flex;
         flex-direction: column;
         // margin-bottom: 40rpx;
         border-bottom: 40rpx #f7f7f7 solid;

         .kong {
            text-align: center;
            padding: 30rpx 0;
            background: #ffffff;
            font-size: 25rpx;

            span {
               color: #474747;
            }
         }

         .bg_list_item_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 30rpx;
            padding-right: 30rpx;
            margin-bottom: 30rpx;

            .bg_list_item_top_left {
               display: flex;
               align-items: center;

               .left {
                  margin-left: 12rpx;
                  font-size: 28rpx;
               }

               .warning {
                  width: 8rpx;
                  height: 30rpx;
                  border-radius: 2rpx;
                  margin-right: 12rpx;
                  // background: $nav-stateColor5 !important;
               }

               .error {
                  width: 8rpx;
                  height: 30rpx;
                  border-radius: 2rpx;
                  margin-right: 12rpx;
                  // background: $nav-stateColor4 !important;
               }

               .bg_list_item_top_left_x {
                  width: 8rpx;
                  height: 30rpx;
                  // background: $nav-color;
                  border-radius: 2rpx;
                  margin-right: 12rpx;
               }

               span {
                  font-size: 32rpx;
                  font-weight: 500;
                  color: #222222;
                  display: flex;
                  align-items: center;
               }
            }

            .bg_list_item_top_right {
               display: flex;
               align-items: center;

               image {
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 12rpx;
               }

               span {
                  font-size: 28rpx;
                  font-weight: 400;
               }
            }
         }

         .bg_list_item_h {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            background: white;

            .bg_list_item_num {
               width: 100%;
               min-height: 98rpx;
               background: white;
               display: flex;
               justify-content: center;
               align-items: center;
               border-bottom: 1rpx solid #E5E5E5;

               &:last-child {
                  border: none !important;
               }

               .kong {
                  text-align: center;
                  font-size: 25rpx;
                  padding: 30rpx 0;
                  background: #ffffff;
               }

               .bg_list_item_num_item {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  // height: 118rpx;
                  padding: 15rpx 0;
                  box-sizing: border-box;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #E5E5E5;

                  &:last-child {
                     border: none;
                  }

                  .bg_list_item_num_item_list {
                     display: flex;
                     align-items: center;

                     .active {
                        background: #305ED5 !important;
                        color: #FFFFFF !important;
                     }

                     .bg_list_item_num_item_list_item {
                        width: 116rpx;
                        height: 62rpx;
                        line-height: 62rpx;
                        text-align: center;
                        background: #F2F2F2;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-right: 20rpx;

                        &:last-child {
                           margin: 0 !important;
                        }
                     }
                  }

                  .bg_list_item_num_item_wl {
                     flex-shrink: 0;
                     display: flex;
                     flex-direction: column;
                     font-size: 34rpx;
                     color: #222222;

                     .bg_list_item_num_item_wl_lx {
                        margin-top: 10rpx;
                        color: #222222;
                        font-size: 28rpx;
                     }
                  }

                  // .warning {
                  //    color: $nav-stateColor5 !important;
                  // }

                  // .err {
                  //    color: $nav-stateColor4 !important;
                  // }

                  img {
                     width: 12rpx;
                     height: 24rpx;
                     margin-left: 20rpx;
                  }

                  span {
                     flex-shrink: 0;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;

                     b {
                        font-size: 30rpx;
                        color: red;
                        margin-right: 5rpx;
                     }

                     // .warning {
                     //    color: $nav-stateColor5 !important;
                     //    margin-right: 5rpx;
                     // }

                     // .err {
                     //    color: $nav-stateColor4 !important;
                     //    margin-right: 5rpx;
                     // }

                     &:nth-child(1) {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #222222;
                     }

                     &:nth-child(2) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #333333;
                        flex-shrink: 0;
                     }
                  }

                  .bg_list_item_num_item_sr {
                     flex: 1;
                     display: flex;
                     align-items: center;
                     justify-content: flex-end;
                     font-size: 28rpx;
                     .color1 {
								
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                     }

                     input::-webkit-input-placeholder {
                        font-size: 28rpx;
                     }

                     input {
                        text-align: right;
                        width: 180rpx;
                        height: 60rpx;
                        border-radius: 8rpx;
                        border: 1rpx solid #E5E5E5;
                        margin-right: 20rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #333333;
                        padding: 0 30rpx
                     }

                     .wulll {
                        width: 400rpx;
                        text-align: right;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                     }

                     span {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #999999;
                     }
                  }
               }
            }
         }
      }
   }

   .bg_plan {
      width: 100%;
      // height: 98px;
      padding: 30rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
         font-size: 30rpx;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #222222;

         b {
            color: red;
         }
      }

      .bg_plan_nr {
         display: flex;
         flex-direction: column;

         span {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-top: 20rpx;

            &:first-child {
               font-size: 32rpx;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
               color: #333333;
               margin-top: 0 !important;
            }
         }
      }

      .bg_plan_label_val {
         display: flex;
         align-items: center;

         span {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
         }


      }
   }

   .img_ar {
      width: 12rpx;
      height: 24rpx;
      margin-left: 20rpx;
   }

   .bh_zw {
      height: 160rpx;
   }

   .bg_footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 30rpx 30rpx 60rpx 30rpx;
      box-sizing: border-box;

      .bg_footer_submit1 {
         width: 690rpx;
         height: 76rpx;
         background: #FFFFFF;
         border-radius: 36rpx;
         border: 1rpx solid #E5E5E5;
         display: flex;
         align-items: center;
         justify-content: center;

         .fornt-img {
            width: 28rpx;
            height: 28rpx;
            margin-right: 12rpx;
         }

         span {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #305ED5;
         }
      }

      .bg_footer_submit {
         width: 690rpx;
         height: 88rpx;
         box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
         border-radius: 8rpx;
         font-size: 30rpx;
         font-weight: 500;
         color: #FFFFFF;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   }

   .details_dj {
      display: flex;
      flex-direction: column;

      .details_dj_list {
         width: 100%;
         box-sizing: border-box;
         background: #ffffff;
         display: flex;
         flex-direction: column;

         .details_dj_list_item {
            display: flex;
            flex-direction: column;
            border-bottom: 1rpx solid #E5E5E5;
            padding: 30rpx;
            line-height: 42rpx;

            span {
               &:nth-child(1) {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #222222;
               }

               &:nth-child(2) {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #999999;
               }
            }
         }
      }

      .details_dj_title {
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 30rpx 30rpx;
         box-sizing: border-box;

         .details_dj_title_left {
            display: flex;
            align-items: center;

            span {
               font-size: 32rpx;
               font-weight: 500;
               color: #222222;
            }
         }

      }
   }

   .contanir {
      height: calc(env(safe-area-inset-bottom) + 720rpx);

      .content {
         margin-top: 20rpx;

         .type-style {
            width: 325rpx;
            margin-bottom: 20rpx;
         }
      }
   }

   .bottom-view {
      left: 40rpx;
      right: 40rpx;
      bottom: 0
   }

   .bl_list {
      width: 100%;
      height: calc(100% - 168rpx);
      overflow-y: scroll;
      margin-top: 30rpx;

      .bl_list_item {
         width: 100%;
         height: 96rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1rPX solid #E5E5E5;

         &:last-child {
            border: none !important;
         }

         .bl_list_item_left {
            flex: 1;
            display: flex;
            align-items: center;

            input {
               width: 30rpx;
               height: 30rpx;
               border: 1rpX solid #CCCCCC;
               margin: 0 !important;
            }

            span {
               font-size: 30rpx;
               color: #222222;
               margin-left: 10rpx;
            }
         }

         .bl_list_item_right {
            flex: 1;
            height: 50rpx;
            text-align: right;

            input {
               padding-left: 5rpx;
               width: 160rpx;
               height: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               text-align: right;
               font-size: 28rpx;
               color: #333333;
               border-radius: 10rpx;
               border: 1rPX solid #CCCCCC;

               &::-webkit-input-placeholder {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
               }
            }
         }
      }
   }
</style>