于继渤 2 years ago
parent
commit
45c4b0f3fa

+ 41 - 1
package-purchase/pages/purchase-return/detail/detail.js

@@ -8,11 +8,51 @@ Page({
 
     },
 
+    openSacn(e) {
+      // this.setData({
+      //   sacnFlag: true
+      // })
+      let param = e.currentTarget.dataset.item
+      // param.ascpId = app.globalData.user.ascpId
+      // wx.navigateTo({
+      //     url: '/package7/pages/scan-show-purchase-returns/scan-show-purchase-returns?item=' + encodeURIComponent(JSON.stringify(param)) + '&scanBarcodeName=关闭扫描' + '&page=detail',
+      // })
+  },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-
+      
+      this.setData({
+        outStatusString:options.outStatusString,
+        form:{
+          customerName:'佛山恒洁供应商',
+          contactName:'王售后',
+          contactPhones:'156 5678 5643',
+          addressFull:'佛山市禅城区XXX路XXX号库房',
+          sumRejectAmount:15999,
+        },
+        goodsList:[
+          {
+            brandName:'恒洁卫浴',
+            skuCode:'HE900A智能',
+            skuName:'HE900A 智能一体机盖板',
+            rejectPrice:10000,
+            thisTimeRejectQuantity:-1,
+            thisTimeRejectQuantityTemp:-1,
+          },
+          {
+            brandName:'恒洁卫浴',
+            skuCode:'HE900A智能',
+            skuName:'HE900A 智能一体机盖板',
+            rejectPrice:5999,
+            thisTimeRejectQuantity:-1,
+            thisTimeRejectQuantityTemp:-1,
+          }
+        ],
+        canReturnAmount:25999,
+        sumEndAmount:10000,
+      })
     },
 
     /**

+ 2 - 1
package-purchase/pages/purchase-return/detail/detail.json

@@ -1,3 +1,4 @@
 {
-    "usingComponents": {}
+    "usingComponents": {},
+    "navigationBarTitleText": "采购退货详情"
 }

+ 348 - 2
package-purchase/pages/purchase-return/detail/detail.wxml

@@ -1,2 +1,348 @@
-<!--package-purchase/pages/purchase-return/detail/detail.wxml-->
-<text>package-purchase/pages/purchase-return/detail/detail.wxml</text>
+<wxs src='../../../../utils/numberFormat.wxs' module="numberFormat"></wxs>
+<wxs src='../../../../utils/wxmlUtil.wxs' module="wxmlUtil"></wxs>
+<van-dialog id="van-dialog" />
+<loading wx:if="{{loading}}" loadingName="加载中" backgroundColor="#f2f2f2;" opacity="0.8"></loading>
+
+<!-- 客户信息组件 -->
+<view class="return-style-blue">
+  <view style="flex-direction: column;justify-content: center;align-items: flex-start;background: linear-gradient(90.12deg, #718AC6 0.84%, #4A5E98 99.43%);border-radius: 15rpx 15rpx 0rpx 0rpx;">
+    <view style="padding-right: 32rpx;padding-bottom: 15rpx;">
+      <!-- 供应商 -->
+      <view style="display: flex;padding-right: 32rpx;">
+        <view style="padding-left: 32rpx;padding-top: 19rpx;width: 39rpx;">
+          <view catchtap="toCustomer" style="width: 39rpx;height: 39rpx;background-color: #95A8CB;border-radius:50%;">
+            <view style="width: 39rpx; height: 39rpx;text-align: center;">
+              <van-image round width="28rpx" height="28rpx" src="/static/img/purchase-order-icon.png" />
+            </view>
+          </view>
+        </view>
+        <view style="padding-left: 14rpx;padding-top: 19rpx;font-size: 26rpx;line-height: 36rpx;color: #FFFFFF;">
+          {{form.customerName}}
+        </view>
+      </view>
+      <!-- 收货人 -->
+      <view style="display: flex;padding-right: 32rpx;">
+        <view style="padding-left: 32rpx;padding-top: 19rpx;width: 39rpx;">
+          <view catchtap="toCustomer" style="width: 39rpx;height: 39rpx;background-color: #95A8CB;border-radius:50%;">
+            <view style="width: 39rpx; height: 39rpx;text-align: center;">
+              <van-image round width="20rpx" height="24rpx" src="/static/img/Vector.png" />
+            </view>
+          </view>
+        </view>
+        <view style="padding-left: 14rpx;padding-top: 19rpx;font-size: 26rpx;line-height: 36rpx;color: #FFFFFF;">
+          {{form.contactName}}
+        </view>
+        <view style="padding-left: 22rpx;padding-top: 19rpx;font-size: 26rpx;line-height: 36rpx;color: #FFFFFF;">
+          {{form.contactPhones}}
+        </view>
+      </view>
+      <!-- 地址 -->
+      <view style="display: flex;padding-right: 32rpx;">
+        <view style="padding-left: 32rpx;padding-top: 15rpx;font-size: 26rpx;line-height: 36rpx;color: #FFFFFF;">
+          {{ wxmlUtil.addressToIndexOf(form.addressFull)}}
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+
+<!--收款金额  -->
+<view class="return-style">
+  <view style="display: flex;  margin-bottom: 3vw;">
+    <view style="width:50%;color:#1B365D;text-align: center;font-size:4vw; border-right: 1rpx lightgray solid ;" bindtap="toChooseGoods">
+      <view style="font-weight:bold;font-size:15px; margin-bottom: -11px;">
+        <!-- 合计金额 - 合计退货金额 -->
+        <dk-cell left="0rpx" center="center" fontSize="13" contentFontSize="13" contentColor="#1B365D" spaceWidth="0" contentFontWeight="bold" content="{{canReturnAmount}}"></dk-cell>
+      </view>
+      <view style="font-size:13px;">退货前总额</view>
+    </view>
+    <view style="width:50%;color:#1B365D;text-align: center;font-size:4vw; " bindtap="scanQRCode">
+      <view style="margin-bottom: -11px;">
+        <!-- 退货后总额 =  退货前 + 合计 -->
+        <dk-cell left="0rpx" center="center" fontSize="13" contentFontSize="13" contentColor="#A5814A" spaceWidth="0" contentFontWeight="bold" content="{{sumEndAmount}}"></dk-cell>
+      </view>
+      <view style="font-size:13px;">退货后总额</view>
+    </view>
+  </view>
+</view>
+
+<!-- 空高度  -->
+<view style="margin-top: 10rpx;"></view>
+<!--商品明细  -->
+<view style="margin: 26rpx 34rpx 26rpx 34rpx;box-shadow:2px 2px 5px #e5e5e6;">
+  <view style="background: #FFFFFF;box-shadow: 0rpx 10rpx 20rpx rgba(225, 229, 238, 0.6);border-radius: 15rpx;">
+    <view style="padding: 10px 32rpx 10px 32rpx;color: #1B365D;font-size: 32rpx;display: flex;">
+      <view style="width: 70%;font-weight: bold;">商品明细 <text style="{{outStatusString != '已出库' ? 'color:red;font-size:30rpx':'font-size:30rpx'}}">{{ outStatusString ? ' ('+outStatusString+') ' : '' }}</text></view>
+      <view style="width: 30%;font-size: 26rpx;display: flex; justify-content: flex-end;">
+        <view style="display: flex;justify-content: right;align-items: center;">
+          <view  wx:if="{{outStatusString == '已出库'}}" style="display: flex;" catchtap="openSacn" data-item="{{form}}">
+            <van-image width="32rpx" height="32rpx" src="/static/img/scan-code-p.png" />
+            <view style="padding-left: 10rpx;">添加条码</view>
+          </view>
+
+        </view>
+      </view>
+    </view>
+
+    <van-cell wx:if="{{goodsList.length==0}}" border="{{ false }}">
+      <van-empty description="暂未选择商品" />
+    </van-cell>
+    <view wx:for="{{goodsList}}" wx:key="index" border="{{ true }}">
+      <van-card wx:if="{{index < 2  || collapseFlag}}">
+        <view slot="thumb" data-item="{{item}}" data-index="{{index}}" bind:tap="openChoosedItemInfo">
+          <van-image radius="5px" width="80" height="80" src="{{item.iconPath }}" />
+        </view>
+        <view slot="title" data-item="{{item}}" data-index="{{index}}" bind:tap="openChoosedItemInfo">
+          <dk-title titleTag="{{item.brandName}}" title="{{item.skuCode}}"></dk-title>
+        </view>
+        <view slot="desc" data-item="{{item}}" data-index="{{index}}" bind:tap="openChoosedItemInfo">
+          <dk-text value="{{item.skuName}}"></dk-text>
+        </view>
+        <view slot="price">
+          <view style="display: flex;width: 100%;flex-direction: row;">
+            <view style="width:100%;font-family:'PingFang HK';font-style:normal;" data-item="{{item}}" data-index="{{index}}" bind:tap="openChoosedItemInfo">
+              <dk-cell  contentFontSize="14" fontWeight="bold" left="0rpx" contentColor="#CAA977" content="{{ item.rejectPrice}}"></dk-cell>
+            </view>
+            <view style="width: 100%;text-align: right;justify-content: center;display: flex;align-items: center;">
+
+              <van-stepper integer="{{true}}" value="{{ item.thisTimeRejectQuantity}}" max="{{-1}}" min="{{item.thisTimeRejectQuantityTemp}}" data-index="{{index}}" bind:change="onChangeStepper" />
+            </view>
+          </view>
+        </view>
+        <view slot="footer">
+          <view class="hr"></view>
+
+
+
+
+          <view style="display: flex;width: 100%;margin-top:5px; align-items: center;">
+            <view catchtap="openRemarkFlag" data-item="{{item}}" data-index="{{index}}" style="width: 70%;text-align: left;font-size:24rpx;color: #95A8CB;">
+              <van-image width="19rpx" height="20rpx" src="/static/img/remerk-edit.png" />
+              备注:<span style="line-height:56rpx;">{{item.remarks ? item.remarks : '请输入内容'}}</span>
+            </view>
+            <view style="width: 50%;text-align: right;">
+
+              <dk-cell contentFontSize="14" fontWeight="bold" contentRight="{{true}}" left="0rpx" contentColor="#CAA977" content="{{ item.rejectAmount}}"></dk-cell>
+            </view>
+          </view>
+        </view>
+
+      </van-card>
+
+    </view>
+
+    <view catchtap="collapseFlagChange" data-index="{{index}}" wx:if="{{goodsList.length > 2}}" style="padding: 30rpx 32rpx 30rpx 32rpx;border-radius: 16rpx;color:#95A8CB;text-align: center;font-size: 26rpx;display: flex;justify-content: center;">
+      <view>{{!collapseFlag ? '展开查看更多' : '收起查看更多'}}</view>
+      <view style="padding-left: 10rpx;">
+        <van-icon name="{{!collapseFlag ? 'arrow-down':'arrow-up'}}" size="24rpx" />
+      </view>
+    </view>
+
+
+    <!-- 合计金额 -->
+    <view style="display:flex;  " >
+      <view style="width: 50%;">
+        <view style="padding-left: 30rpx;padding-top: 10px;padding-bottom: 10px;">
+          <text style="color: #95A8CB;font-size: 13px;">{{spuCategoryNum ? spuCategoryNum + '品类,' : ''}} 共计 {{sumRejectQuantity}} 件</text>
+        </view>
+      </view>
+      <view style="width: 50%;padding-top: 10px;padding-bottom: 10px;" >
+        <dk-cell titleColor="#1B365D" height="39rpx" spaceWidth="20rpx" contentColor="#CAA977" fontSize="15" contentFontWeight="bolder" title="合计金额" content="{{form.sumRejectAmount}}"></dk-cell>
+      </view>
+    </view>
+
+  </view>
+</view>
+
+
+<!-- 其他信息 -->
+<view style="margin: 10px 32rpx 10px 32rpx;margin-top: 41rpx;border-radius: 15rpx;box-shadow:2px 2px 5px #e5e5e6;">
+  <view style="background: #FFFFFF;box-shadow: 0rpx 10rpx 20rpx rgba(225, 229, 238, 0.6);border-radius: 0px 0px 15rpx 15rpx;">
+    <view style=" padding: 10px 32rpx 10px 32rpx;color: #1B365D;font-size: 32rpx;">其他信息</view>
+    <van-field input-width="200rpx" input-class="dk-cell-value-class" input-align="left" label-class="nomal-label" data-key="remarks" maxlength="50" value="{{ form.remarks }}" input-align="right" label="备注" placeholder="请输入备注" autosize border="{{ false }}" bind:change="changeField">
+    </van-field>
+
+    <view style="display:flex;width:100%;margin: 1vw;padding-top:20rpx;">
+      <view style="width: 30%; flex:1;color: #95A8CB;font-size: 28rpx;padding-left: 27rpx;">附件</view>
+      <view style="width: 70%;text-align: left;">
+        <van-uploader max-count="5" accept="image" style="margin-left: 4%;border-radius: 15rpx;" preview-size="160rpx;" file-list="{{ fileList }}" bind:delete="deleteImg" bind:after-read="afterRead" multiple="true" imageFit="aspectFit" />
+      </view>
+    </view>
+
+
+    <view style="height: 40rpx;"></view>
+  </view>
+
+
+</view>
+
+
+<!-- 空高度  -->
+<view style="width: 100%;height: 100px;"></view>
+
+<!-- 备注 -->
+<van-popup show="{{ remarkFlag }}" style="z-index: 999;" round="{{true}}" position="bottom" bind:close="closeChoosedItemInfo_remark">
+  <van-cell-group>
+    <van-cell border="{{ true }}">
+      <view style="width:100%;font-size:5vw;color:#34495e;text-align:left;">
+        备注修改
+      </view>
+    </van-cell>
+    <van-divider />
+    <van-field label="备注" bind:focus="clearZero" type="quantity" bind:change="changeRemarksField" data-item="{{remarks}}" data-key="remarks" value="{{remarks}}" input-align="right" placeholder="请输入备注" border="{{ true }}" />
+    <view style="height: 50px;"></view>
+    <view style="padding:35rpx 34rpx 62rpx 34rpx;">
+      <van-button size="large" round color="#1B365D" custom-style="height:88rpx;" bind:click="updateToChooseList_remark" type="default">确定
+      </van-button>
+    </view>
+
+  </van-cell-group>
+</van-popup>
+
+<!-- 底部按钮相关 -->
+<view class="bottom-class-1">
+  <view style="padding:10rpx 34rpx 61rpx 43rpx; display: flex;">
+    <view style="width:50%;padding-top: 10rpx;" >
+      <view style="color: #CAA977;font-size: 30rpx;padding-top: 10rpx;">
+        退货总额:
+      </view>
+      <dk-cell contentFontSize="16" height="44rpx" fontWeight="600" left="0rpx" contentColor="#CAA977" title="" content="{{ form.sumRejectAmount}}"></dk-cell>
+    </view>
+    <view style="width:50%;padding-top: 10rpx;" >
+    </view>
+    <!-- 保存确定区域 -->
+    <view style="width: 50%; display: flex;padding-top: 42rpx;">
+      <view style="border-radius: 15rpx;width: 196rpx; height: 88rpx;font-size: 32rpx;line-height: 40rpx;">
+        <van-button wx:if="{{form.outStatus === '出库状态-完成' && !saleLinkPsiSystem}}" round plain size="large" color="#1B365D" custom-style="height:88rpx;" bind:click="submit" data-key="出库回退" data-type="save" type="info">
+          出库回退
+        </van-button>
+        <van-button wx:if="{{form.outStatus !== '出库状态-完成'&& form.erpApvResult !='审-审中' && !saleLinkPsiSystem && form.rejectStatusName !=='审批拒绝'}}" round plain size="large" color="#1B365D" custom-style="height:88rpx;" bind:click="submit"  data-key="扫码出库"  type="info">
+          扫码出库
+        </van-button>
+      </view>
+      <view style="width: 19rpx;"></view>
+      <view style="border-radius: 15rpx;width: 196rpx; height: 88rpx;font-size: 32rpx;line-height: 40rpx;">
+        <van-button wx:if="{{form.outStatus === '出库状态-完成'}}" round size="large" color="#1B365D" custom-style="height:88rpx;" bind:click="submit" data-key="关闭" type="info">关闭
+        </van-button>
+
+        <van-button wx:if="{{form.outStatus !== '出库状态-完成' && form.erpApvResult !='审-审中' && !saleLinkPsiSystem && form.rejectStatusName !=='审批拒绝'}}" round size="large" color="#1B365D" custom-style="height:88rpx;" bind:click="submit" data-key="出库办理" type="info">出库办理
+        </van-button>
+      </view>
+    </view>
+  </view>
+</view>
+
+
+
+
+<van-popup show="{{ sacnFlag }}" style="z-index: 999;box-shadow: 0px -8px 24px 0px #0010271A;" round="{{true}}" position="bottom" bind:close="closeChoosedItemInfo_scan">
+  <view style="padding:20rpx;">
+    <view style="font-size: 32rpx;display: flex; justify-content:center;">
+      <van-image style="padding-top: 4rpx;" width="33rpx" height="33rpx" src="/static/img/scan-code-p.png" />
+      <view style="padding-left: 10rpx; color:#1B365D;">查看条码(8个)</view>
+    </view>
+  </view>
+
+  <scroll-view scroll-y="{{true}}" style="height: 50vh;">
+
+
+
+
+
+    <view style="margin:20rpx;">
+      <van-collapse value="{{ activeNames }}" bind:change="onChange">
+
+
+      </van-collapse>
+
+
+
+
+      <view wx:for="{{sacnList}}" data-item="{{item}}" wx:for-index="index" wx:key="key">
+        <van-cell title="{{item.title}}" custom-class="dk-collapse-item" value="{{item.checked ? '收起' :'展开'}}" value-width="15%" title-width="85%" bind:click="onClickScan" data-index="{{index}}" />
+        <view class="test" wx:if="{{item.checked }}">
+          <view wx:for="{{item.detail}}" data-item="{{item_}}" wx:for-item="item_" wx:for-index="index_" wx:key="key_">
+            <view style="display: flex;padding:20rpx;font-size: 30rpx;color:#1B365D;">
+              <view>条码:</view>
+              <view>{{item_.no}}</view>
+            </view>
+          </view>
+        </view>
+
+        <view style="height: 20rpx;"></view>
+
+      </view>
+    </view>
+
+
+
+
+
+
+
+    <view style="height: 100rpx;"></view>
+  </scroll-view>
+
+  <view style="padding:20rpx;">
+    <van-button plain round size="large" custom-style="height:88rpx; width:100%;color:#1B365D;" bind:click="closeChoosedItemInfo_scan" type="default">取消
+    </van-button>
+    <view style="height: 20rpx;"></view>
+  </view>
+
+
+</van-popup>
+
+
+
+<!-- 编辑商品 -->
+<van-popup custom-class="dk-popup" show="{{ showEditProduct }}" round="{{true}}" position="bottom" bind:close="closeChoosedItemInfo">
+  <view style="position:relative; top:280rpx;z-index:  1;background-color: transparent; height: 44rpx;"></view>
+  <view class="special-topic">
+    <!-- 图片 -->
+    <view class="special-topic-content">
+      <van-image radius="15rpx" custom-class="goods-pop-image" fit="fill" src="{{ currentChoosedItem.iconPath }}"></van-image>
+    </view>
+    <view class="special-topic-title">
+      <!-- 标签 标题-->
+      <dk-title id="titleTagPop" titleTag="{{currentChoosedItem.brandName}}" title="{{currentChoosedItem.skuCode}}"></dk-title>
+      <view style="padding-top: 10rpx;">
+        <dk-text fontWeight="" value="{{currentChoosedItem.skuName}}"> </dk-text>
+      </view>
+    </view>
+  </view>
+
+  <!--内容-->
+  <view class="pop-content-class">
+    <van-cell-group border="{{ false }}">
+      <view style="height:calc({{windowHeight+'px'}} - 676rpx);overflow-y: scroll;overflow-x: hidden;">
+        <!--数量-->
+        <van-cell title="数量" title-class="red-label" border="{{ false }}">
+          <van-stepper integer="{{true}}" value="{{currentChoosedItem.rejectQuantity}}" data-item="{{currentChoosedItem}}" min="{{currentChoosedItem.rejectQuantityTemp}}" max="{{-1}}" bind:change="changeChooseItemQuantity" />
+        </van-cell>
+        <van-cell  border="{{ false }}" title-width="410rpx" title-class="red-label">
+          <view slot="title">
+            采购价格
+          </view>
+          <view Cell Slot="value">
+            <dk-number-input center="right" data-key="rejectPrice" inputValue="{{currentChoosedItem.rejectPrice}}" bind:triggerBindValue="changeSalesPriceField"></dk-number-input>
+          </view>
+        </van-cell>
+
+        <van-cell title-class="title-class-copy" title="可售量" value="{{0}}" border="{{ false }}">
+        </van-cell>
+
+        <van-field input-width="200rpx" input-class="dk-cell-value-pop-class" label-class="nomal-label" input-align="left" data-key="warehouse" maxlength="100" type="text" value="{{ currentChoosedItem.whName }}" label="库区" placeholder="请选择库区" autosize border="{{ false }}" color="#95A8CB" data-type='warehouse'  readonly="{{true}}">
+        </van-field>
+
+
+        <!--备注-->
+        <van-field label-class="nomal-label" input-class="dk-cell-value-pop-class" label="备注" maxlength="1000" bind:change="changeCurrentChoosedItemField" data-key="remarks" value="{{currentChoosedItem.remarks}}" input-align="right" placeholder="请输入备注" border="{{ false }}" />
+
+        <view style="height: 100rpx;"></view>
+      </view>
+      <view style="text-align: center;">
+        <van-button round size="large" color="#1B365D" custom-style="height:88rpx;width:640rpx;" type="info" data-item="{{currentChoosedItem}}" data-index="{{index}}" size="small" bindtap="updateToChooseList">确定</van-button>
+      </view>
+    </van-cell-group>
+  </view>
+</van-popup>

+ 109 - 1
package-purchase/pages/purchase-return/detail/detail.wxss

@@ -1 +1,109 @@
-/* package-purchase/pages/purchase-return/detail/detail.wxss */
+.input_red {
+  color: red !important;
+  text-align: revert !important;
+}
+
+.cell-value-staff-org {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.return-style {
+  /* width: 96.5%; */
+  background-color: white;
+  /* padding-top: 20rpx; */
+  padding-bottom: 16rpx;
+  margin-left: 34rpx;
+ margin-right: 34rpx;
+  background: #FFFFFF;
+  box-shadow: 0px 10px 15px rgba(225, 229, 238, 0.6);
+  border-radius: 0px 0px 12px 12px;
+  /* margin: 8px auto; */
+  /* margin-top: -9rpx; */
+ 
+}
+
+.return-style-blue {
+
+  background-color: white;
+  /* padding-top: 20rpx;
+  padding-bottom: 22rpx; */
+ margin-left: 34rpx;
+ margin-right: 34rpx;
+  background: #FFFFFF;
+  box-shadow: 0px 10px 15px rgba(225, 229, 238, 0.6);
+  border-radius: 0px 0px 15rpx 15rpx;
+  /* margin: 8px auto; */
+ 
+ 
+}
+.bottom-class-1{
+  background:#fff;
+  position:fixed;
+  bottom:0;
+  width:100%;
+  height: 182rpx; 
+  border-top:1px solid #efefef;
+  z-index: 7;
+  box-shadow: 0px -8rpx 24rpx rgba(0, 16, 39, 0.1);
+  border-radius: 30rpx 30rpx 0rpx 0rpx;
+}
+.goods-detail{
+  background: #FFFFFF;
+  box-shadow: 0px 10px 20px rgba(225, 229, 238, 0.6);
+  border-radius: 12px;
+  margin: 2vw;
+  padding: 1vw;
+}
+.color-style{
+color: #95A8CB;
+}
+ 
+.title-cell-style{
+  
+  color: #95A8CB;
+}
+.value-cell-style{
+  margin-left: 50px;
+  text-align: left !important;
+}
+.title-cell-style-fee{
+  
+  color: #95A8CB;
+}
+.value-cell-style-fee{
+  margin-left: 50px;
+  text-align: left !important;
+}
+.van-field__label{
+  color: #95A8CB !important;
+}
+.van-field__input{
+  color: #1B365D !important;
+
+}
+.title-class{
+  color: #1B365D !important;
+} 
+.title-class-copy{
+  color:#95A8CB !important;
+}
+.rightTitp{
+  padding:10rpx;
+   border-radius: 20rpx;
+   text-align: center;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
+.isSaleNumClass{
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #95A8CB;
+  font-size: 24rpx;
+  text-align: center;
+}