feat：临时入场

wk

2024-10-10 79f5c0a7d45842996ef5cfbc33a64a7bfd9bcbd9

 pages/driver-page/delivery-my/delivery-my/delivery-my.vue

@@ -35,53 +35,186 @@
               label="车牌号"
               labelWidth="20%"
               borderBottom
               required>
               >
               <u--input v-model="registerFormModel.carNo"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="carNo"
               label="是否入场"
            <u-form-item prop="skin"
               label="皮重"
               labelWidth="20%"
               borderBottom
               required>
               <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
               required v-if="daydata.isWeighing==1">
               <u--input v-model="skin"
               border="surround"
                  placeholder="请输入皮重"
                  clearable></u--input>
            </u-form-item>
				
            <u-form-item prop="hair"
               label="毛重"
               labelWidth="20%"
               borderBottom
               required v-if="daydata.isWeighing==1">
               <u--input v-model="hair"
               border="surround"
                  placeholder="请输入毛重"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="clean"
               label="净重"
               labelWidth="20%"
               borderBottom
               required v-if="daydata.isWeighing==1">
               <u--input v-model="clean"
               border="surround"
               disabled
                  placeholder="请输入净重"
                  clearable></u--input>
            </u-form-item>
            <uni-table
             border 
            id="table-box"
            emptyText="暂无更多数据" v-if="daydata.isWeighing == 0 && daydata.productNames.split(',').length  <= 1">
                  <uni-tr>
                     <uni-th align="center" >产品</uni-th>
                     <uni-th align="center">数量</uni-th>			
                  </uni-tr>
                  <uni-tr v-for="(subItem, index) in tmTaskCoalList" :key="index">
                     <uni-td align="center">
                        <view class="name">{{ subItem.productName }}</view></uni-td>
                   <uni-td align="right">
                  <view>
                  <u--input
                  placeholder="请输入产品数量"
                  type='number'
                  v-model="subItem.productQuantity"
                  ></u--input>
                  </view></uni-td>
               </uni-tr>
               </uni-table>
               <u-form-item prop='contactPicture'>
                  <view class="label-text">
                     原发单据
                  </view>
                  <u-upload :fileList="fileList1"
                     @afterRead="afterRead"
                     @delete="deletePic"
                     name="1"
                     multiple
                     :maxCount="2"
                     width="250"
                     height="150"
                     :previewFullImage="true"
                     ></u-upload>
               </u-form-item>
            <!-- <u-form-item labelWidth="20%"
               label="空车出厂"
               borderBottom
               ref="roleRef"
               required>
               <u-radio-group v-model="registerFormModel.isEmptyCar"
                  placement="row"
                  size="30"
                  shape="circle"
                  iconSize="20">
                  <u-radio labelSize="14px"
                     size="20px"
                     v-for="(item, index) in radiolist1"
                     :key="index"
                     :label="item.name"
                     :name="item.value"
                     ></u-radio>
               </u-radio-group>
            </u-form-item> -->
         </u--form>
      </view>
      <view class="details">
         <view class="title"><text>配送选择</text></view>
         <view class="">
      <uni-table border
         stripe
         emptyText="暂无更多数据">
         <uni-tr>
            <uni-th align="center">供应商</uni-th>
            <uni-th align="center">产品</uni-th>
            <uni-th align="center">车数</uni-th>
            <uni-th align="center">操作</uni-th>
         </uni-tr>
         <uni-tr v-for="(item, index) in TableData"
            :key="item.id">
            <uni-td align="center">{{ item.customerName || '' }}</uni-td>
            <uni-td align="center">{{ item.productName||''  }}</uni-td>
            <uni-td align="center">{{ item.carNum || '' }}</uni-td>
            <uni-td><u-button text="选择"
                  type="primary"
                  :disabled="item.carNum == item.carNum1"
                  @click="yuYueBtnClick(item)"></u-button></uni-td>
         </uni-tr>
      </uni-table>
      <!-- <view class="history-numbers">
         <scroll-view :scroll-top="scrollTop"
            scroll-y="true"
            class="scroll-Y"
            >
            <view class="history-information"
               >
               <view class="first">
                  <view class="">{{ daydata.customerName || '' }}</view>
                  <view class=""><u-icon name="arrow-right"
                        color="#999999"
                        size="40"></u-icon></view>
               </view>
               <view class="second">
                  <view class="coal-name">{{ daydata.productName || '' }}</view>
                  <view class="order-type">{{ daydata.orderType || '' }}</view>
               </view>
               <view class="third">
                  <view class="third-line">
                     <view class="third-line_text">领取数:</view>
                     <view class="third-line_num">{{ daydata.cars2 }}</view>
                  </view>
                  <view class="third-line">
                     <view class="third-line_text">剩余数:</view>
                     <view class="third-line_num"
                        >{{ daydata.carNumSurplus1 }}</view>
                  </view>
               </view>
               <view class="fourth">
                  <view class="fourth-icon">
                     <view
                        style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/clock.png') no-repeat;background-size: cover">
                     </view>
                  </view>
                  <view class="senddate">{{ daydata.sendDate }}</view>
               </view>
               <view class="fourth">
                  <view class="fourth-icon">
                     <view
                        style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;">
                     </view>
                  </view>
                  <view class="senddate">{{ daydata.orderCode }}</view>
               </view>
            </view>
         </scroll-view>
      </view> -->
      <combined-title
         :title="yuYueData.length != 0 ? yuYueData[0].filedName + '——' + yuYueData[0].sendDate : '暂无预约列表'"></combined-title>
      <view class="appointment-table">
         <uni-table border
            stripe
            emptyText="暂无更多数据">
            <uni-tr>
               <uni-th align="center">时间段</uni-th>
               <uni-th align="center">可预约</uni-th>
               <uni-th align="center">已预约</uni-th>
               <uni-th align="center">操作</uni-th>
            </uni-tr>
            <uni-tr v-for="(item, index) in yuYueData"
               :key="item.id">
               <uni-td align="center">{{ (item.startTime || '') + '-' + (item.endTime || '') }}</uni-td>
               <uni-td align="center">{{ item.carNum || '' }}</uni-td>
               <uni-td align="center">{{ item.carNum1 || '' }}</uni-td>
               <uni-td><u-button text="选择"
                     type="primary"
                     :disabled="item.carNum == item.carNum1&&!isRCSQ"
                     @click="yuYueBtnClick(item)"></u-button></uni-td>
            </uni-tr>
         </uni-table>
      </view>
      <view class="logoutModel">
         <u-modal :show="logoutShow"
            :title="logoutTitle"
            showCancelButton
            :content="logoutContent"
            @confirm="logoutConfirm"
            @cancel="logoutCancel"></u-modal>
      </view>
		
   </view>
</template>

<script>
   import { apiRegister } from '@/api/publicInterface.js';
   import { mapMutations } from 'vuex';
   import { BaseUrl } from '@/api/publicInterface.js';
   import BigNumber from "bignumber.js"
   export default {
      // 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
      onReady() {
@@ -89,6 +222,10 @@
      },
      onLoad(params) {
         let that=this
         if (params.id) {
           this.id = params.id
         }
         this.fileList1 = []
         this.GetMyDelivery()
         uni.getStorage({
             key: 'myDelivery',
@@ -96,26 +233,61 @@
                 Object.assign(that.registerFormModel, res.data)
             }
         });
         uni.getStorage({
             key: 'isshow',
             success: function (res) {
               that.isshow=res.data
             }
         });
         this.ids=null
      },
      data() {
         return {
            ids:null,
            logoutShow: false,
            logoutTitle: '提示',
            logoutContent: '入场需要扫描车牌照和刷身份证入场，请携带身份证原件',
            isshow:true,
            scrollTop: 0,
            id:"",
            value: 0,
            range: [{"value": 0,"text": "否"   },{"value": 1,"text": "是"}],
            daydata:{},
            tmTaskCoalList:[],
            range: [{"value": 0,"label": "否"   },{"value": 1,"label": "是"}],
            carNumShow: false,
            yuYueData: [],
            fileList1: [], //图片列表
            contactPicture:"",
            registerFormModel: {
               phone: '',
               driver: '',
               idNumber: '',
               carNo: '',
            },
            skin:"",
            hair:"",
            TableData:[],
            radiolist1: [{
                  name: '否',
                  value:"0"
               },
               {
                  name: '是',
                  value:"1"
               }
            ],
            rules: {
               driver: {
               driver: [{
                  type: 'string',
                  required: true,
                  message: '请填写姓名',
                  trigger: ['blur', 'change']
               },
               {
                     pattern: /^[\u4e00-\u9fa5\s]+$/,
                     message: '姓名只能是中文',
                     trigger: ['blur', 'change']
                  }],
               idNumber: [{
                     type: 'string',
                     required: true,
@@ -147,59 +319,366 @@
                     trigger: ['change', 'blur']
                  }
               ],
               carNo: [{
               idNumber: [{
                     type: 'string',
                     required: true,
                     message: '请输入车牌号',
                     message: '请输入身份证号',
                     trigger: ['blur', 'change']
                  },
                  {
                     transform(value) {
                        return String(value);
                     },
                     validator: (rule, value, callback) => {
                        return uni.$u.test.carNo(value);
                     },
                     message: '请输入正确的车牌号',
                     trigger: ['change', 'blur']
                  }
               ],
               // carNo: [{
               //       type: 'string',
               //       required: true,
               //       message: '请输入车牌号',
               //       trigger: ['blur', 'change']
               //    },
               //    {
               //       transform(value) {
               //          return String(value);
               //       },
               //       validator: (rule, value, callback) => {
               //          return uni.$u.test.carNo(value);
               //       },
               //       message: '请输入正确的车牌号',
               //       trigger: ['change', 'blur']
               //    }
               // ],
            },
         };
      },
      computed:{
         clean() {
            if(this.daydata.isWeighing==1){
            let xx = BigNumber(this.hair ? this.hair : 0)
            let yy = BigNumber(this.skin ? this.skin : 0)
            return xx.minus(yy).toNumber() > 0 ? xx.minus(yy).toNumber().toFixed(2) : 0
            }else{
               //数量
               if(!this.tmTaskCoalList.length){
                  return false
               }else{
                  const reslut = this.tmTaskCoalList.find(item=>!item.productQuantity);
                  if(reslut){
                     return false
                  }else{
                     return true
                  }
               }
            }
         }
      },
      methods: {
         ...mapMutations(['changeisUploadimg']),
         yuYueBtnClick(item){
            this.$refs.regesterFormRef.validate().then(res => {
            this.$reqPost('saveMyDelivery',{
               coalName:item.productName,
               customerId:item.customerId,
               deptId:item.deptId,
               filedId:item.filedId,
               orderPlanId:item.id,
               orderTye:item.orderType,
               sendDate:item.sendDate,
               ...this.registerFormModel
            }, 'json').then(res => {
               uni.setStorage({
                   key: 'myDelivery',
                   data: this.registerFormModel,
         // input聚焦
         inputFocus(v) {
            if (v == 1) {
               this.isfocus1 = true;
            } else {
               this.isfocus2 = true;
            }
         },
         // input失焦
         inputBlur() {
            this.isfocus1 = false;
            this.isfocus2 = false;
         },
         inputChange() {
            if (Number(this.originInfoForm.coalContactHair) > 0 && Number(this.originInfoForm.coalContactSkin >
                  0)) {
               this.isInputOrigin = true;
            }
         },
         deletePic(event) {
            this.changeisUploadimg(true);
            this[`fileList${event.name}`].splice(event.index, 1);
         },
         async afterRead(event) {
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file);
            let fileListLen = this[`fileList${event.name}`].length;
            lists.map(item => {
               this[`fileList${event.name}`].push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               });
               if (res.code === 0) {
                  uni.$u.toast('预约成功')
						
               } else {
                  uni.$u.toast(res.msg ? res.msg : '预约失败')
            });
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url, event.name);
               let item = this[`fileList${event.name}`][fileListLen];
               this[`fileList${event.name}`].splice(
                  fileListLen,
                  1,
                  Object.assign(item, {
                     status: 'success',
                     message: '上传成功',
                     url: result
                  })
               );
               fileListLen++;
            }
         },
         uploadFilePromise(url, num) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: BaseUrl + '/admin/sys-file/uploadUnToken',
                  filePath: url,
                  name: 'file',
                  success: res => {
                     if (num == 1) {
                        this.contactPicture = JSON.parse(res.data)
                           .data.url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     }
                  }
               });
            });
         },
         logoutConfirm() {
            this.$refs.regesterFormRef.validate().then(res => {
            if(this.daydata.orderType=='外购'){
               if(this.daydata.isWeighing==1){
                  this.$reqPost('saveMyDelivery',{
                     productName:this.daydata.productName,
                     customerId:this.daydata.customerId,
                     deptId:this.daydata.deptId,
                     filedId:this.daydata.filedId,
                     orderPlanId:this.daydata.id,
                     orderTye:this.daydata.orderType,
                     sendDate:this.daydata.sendDate,
                     carNumSurplus:this.daydata.carNumSurplus,
                     yyId:this.ids.id,
                     ...this.registerFormModel,
                     tmTaskCoalContact:{
                        coalName:this.daydata.productName,
                        contactPicture:this.contactPicture,
                        skin:this.skin,
                        hair:this.hair,
                        clean:this.clean
                     }
                  }, 'json').then(res => {
                     uni.setStorage({
                         key: 'myDelivery',
                         data: this.registerFormModel,
                     });
                     uni.setStorage({
                         key: 'isshow',
                         data: false,
                     });
                     this.logoutShow=false
                     this.isshow=false
                     if (res.code === 0) {
                        uni.$u.toast('预约成功')
                        this.GetMyDeliverys()
                     } else {
                        uni.$u.toast(res.msg ? res.msg : '预约失败')
                     }
                  })
               }else{
                  let numDtoList=this.tmTaskCoalList.map(item=>{
                     return {tmId:item.productId,num:item.productQuantity,coalName:item.coalName}
                  })
                  this.$reqPost('saveMyDelivery',{
                     productName:this.daydata.productName,
                     customerId:this.daydata.customerId,
                     deptId:this.daydata.deptId,
                     filedId:this.daydata.filedId,
                     orderPlanId:this.daydata.id,
                     orderTye:this.daydata.orderType,
                     sendDate:this.daydata.sendDate,
                     carNumSurplus:this.daydata.carNumSurplus,
                     yyId:this.ids.id,
                     ...this.registerFormModel,
                     tmTaskCoalContact:{								
                        contactPicture:this.contactPicture,
                        numDtoList:numDtoList
                     }
                  }, 'json').then(res => {
                     uni.setStorage({
                         key: 'myDelivery',
                         data: this.registerFormModel,
                     });
                     uni.setStorage({
                         key: 'isshow',
                         data: false,
                     });
                     this.logoutShow=false
                     this.isshow=false
                     if (res.code === 0) {
                        uni.$u.toast('预约成功')
                        this.GetMyDeliverys()
                     } else {
                        uni.$u.toast(res.msg ? res.msg : '预约失败')
                     }
                  })
               }
            })
				
				
					
            }else{
               this.$reqPost('saveMyDelivery',{
                  productName:this.daydata.productName,
                  customerId:this.daydata.customerId,
                  deptId:this.daydata.deptId,
                  filedId:this.daydata.filedId,
                  orderPlanId:this.daydata.id,
                  orderTye:this.daydata.orderType,
                  sendDate:this.daydata.sendDate,
                  carNumSurplus:this.daydata.carNumSurplus,
                  yyId:this.ids.id,
                  ...this.registerFormModel
               }, 'json').then(res => {
                  uni.setStorage({
                      key: 'myDelivery',
                      data: this.registerFormModel,
                  });
                  uni.setStorage({
                      key: 'isshow',
                      data: false,
                  });
                  this.logoutShow=false
                  this.isshow=false
                  if (res.code === 0) {
                     uni.$u.toast('预约成功')
                     this.GetMyDeliverys()
                  } else {
                     uni.$u.toast(res.msg ? res.msg : '预约失败')
                  }
               })
            }
            })
         },
         GetMyDelivery() {
            this.$reqGet('myDelivery').then(res => {
         logoutCancel() {
            this.logoutShow = false;
         },
         yuYueBtnClick(item){
            this.$refs.regesterFormRef.validate().then(res => {
               if(this.isshow){
                  this.logoutShow = true;
                  this.ids=item
               }else{
                  if(this.daydata.orderType=='外购'){
                     if(this.daydata.isWeighing==1){
                        this.$reqPost('saveMyDelivery',{
                           productName:this.daydata.productName,
                           customerId:this.daydata.customerId,
                           deptId:this.daydata.deptId,
                           filedId:this.daydata.filedId,
                           orderPlanId:this.daydata.id,
                           orderTye:this.daydata.orderType,
                           sendDate:this.daydata.sendDate,
                           carNumSurplus:this.daydata.carNumSurplus,
                           yyId:item.id,
                           ...this.registerFormModel,
                           tmTaskCoalContact:{
                              coalName:this.daydata.productName,
                              contactPicture:this.contactPicture,
                              skin:this.skin,
                              hair:this.hair,
                              clean:this.clean
                           }
                        }, 'json').then(res => {
                           uni.setStorage({
                               key: 'myDelivery',
                               data: this.registerFormModel,
                           });
                           if (res.code === 0) {
                              uni.$u.toast('预约成功')
                              this.GetMyDeliverys()
                           } else {
                              uni.$u.toast(res.msg ? res.msg : '预约失败')
                           }
                        })
                     }else{
                        let numDtoList=this.tmTaskCoalList.map(item=>{
                           return {tmId:item.productId,num:item.productQuantity,coalName:item.coalName}
                        })
                        this.$reqPost('saveMyDelivery',{
                           productName:this.daydata.productName,
                           customerId:this.daydata.customerId,
                           deptId:this.daydata.deptId,
                           filedId:this.daydata.filedId,
                           orderPlanId:this.daydata.id,
                           orderTye:this.daydata.orderType,
                           sendDate:this.daydata.sendDate,
                           carNumSurplus:this.daydata.carNumSurplus,
                           yyId:item.id,
                           ...this.registerFormModel,
                           tmTaskCoalContact:{								
                              contactPicture:this.contactPicture,
                              numDtoList:numDtoList
                           }
                        }, 'json').then(res => {
                           uni.setStorage({
                               key: 'myDelivery',
                               data: this.registerFormModel,
                           });
                           if (res.code === 0) {
                              uni.$u.toast('预约成功')
                              this.GetMyDeliverys()
                           } else {
                              uni.$u.toast(res.msg ? res.msg : '预约失败')
                           }
                        })
                     }
							
                  }else{
                     this.$reqPost('saveMyDelivery',{
                        productName:this.daydata.productName,
                        customerId:this.daydata.customerId,
                        deptId:this.daydata.deptId,
                        filedId:this.daydata.filedId,
                        orderPlanId:this.daydata.id,
                        orderTye:this.daydata.orderType,
                        sendDate:this.daydata.sendDate,
                        carNumSurplus:this.daydata.carNumSurplus,
                        yyId:item.id,
                        ...this.registerFormModel
                     }, 'json').then(res => {
                        uni.setStorage({
                            key: 'myDelivery',
                            data: this.registerFormModel,
                        });
                        if (res.code === 0) {
                           uni.$u.toast('预约成功')
                           this.GetMyDeliverys()
                        } else {
                           uni.$u.toast(res.msg ? res.msg : '预约失败')
                        }
                     })
                  }
               }
            })
         },
         GetMyDeliverys() {
            this.$reqGet('driverYuYueList', {orderPlanId:this.id}).then(res => {
               if (res.code == 0) {
                  this.yuYueData = res.data;
               } else {
                  this.$u.toast('加载失败');
               }
            });
            this.$reqGetId('myDelivery',this.id).then(res => {
               if (res.data) {
                  this.TableData=res.data
                  this.daydata=res.data
                  this.tmTaskCoalList=res.data.jhOrderPlanList
               }
            });
         },
         GetMyDelivery() {
            uni.showLoading({
               title: '加载中...'
            });
            this.$reqGet('driverYuYueList', {orderPlanId:this.id}).then(res => {
               uni.hideLoading();
               if (res.code == 0) {
                  this.yuYueData = res.data;
               } else {
                  this.$u.toast('加载失败');
               }
            });
            this.$reqGetId('myDelivery',this.id).then(res => {
               if (res.data) {
                  this.daydata=res.data
                  this.tmTaskCoalList=res.data.jhOrderPlanList
               }
            });
         }
@@ -209,50 +688,148 @@

<style lang="scss"
   scoped>
   ::v-deep.register {
      width: 94%;
      padding: 0 0 vww(20) 0;
      margin: 0 auto;
      .details {
         margin-top: vww(24);
         .title {
            color: #111111;
            font-weight: 400;
            border: 1px solid #eeeeee;
            padding: 0 vww(12) 0 vww(12);
            border-bottom: none;
            height: vww(40);
            line-height: vww(40);
            background-color: #f5f5f5;
   @mixin flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   .history-numbers {
      width: 100%;
      position: relative;
      top: vww(10);
	
      .history-information {
         width: 690rpx;
         height: 398rpx;
         margin: vww(10) 0;
         background: #ffffff;
         box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
         border-radius: 20rpx;
         @include flex flex-direction: column;
         align-items: flex-start;
         justify-content: space-evenly;
         overflow: hidden;
	
         .first {
            width: 96%;
            height: 34rpx;
            font-size: 32rpx;
            font-weight: 300;
            color: #303030;
            @include flex;
            margin: vww(10) vww(10) 0;
         }
         .uni-table-scroll {
	
         .second {
            width: 100%;
            overflow-x: hidden;
            .uni-table {
               min-width: 0 !important;
               .uni-table-tr {
                  padding: 0;
                  font-size: vww(13);
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;
            justify-content: flex-start;
	
            .coal-name {
               min-width: vww(30);
               height: vww(20);
               margin-right: vww(21);
            }
	
            .order-type {
               color: #035cfb;
               border: 2px solid #035cfb;
               border-radius: 4rpx;
               padding: vww(2) vww(4);
               text-align: center;
            }
         }
	
         .third {
            width: 96%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;
	
            .third-line {
               @include flex;
	
               &_text {
                  color: #919090;
               }
	
               &_num {
                  color: #035cfb;
               }
            }
         }
	
         .fourth {
            width: 100%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;
	
            .fourth-icon {
               width: vww(13);
               height: vww(13);
               margin-right: vww(14);
            }
	
            .senddate {
               flex: 1;
            }
         }
      }
   }
   ::v-deep.appointment-table{
      width: 94%;
      margin: 0 auto;
      // 表格
      .uni-table-scroll {
         width: 100%;
         overflow-x: hidden;
			
         .uni-table {
            min-width: 0 !important;
			
            .uni-table-tr {
               padding: 0;
               font-size: vww(13);
			
               .uni-table-th {
                  height: vww(32);
                  line-height: vww(20);
                  padding: vww(5) 0;
                  padding: vww(5) vww(10);
                  color: #111111;
                  font-weight: 550;
                  background: #f5f5f5;
               }
			
               .uni-table-td {
                  height: vww(32);
                  line-height: vww(20);
                  padding: vww(5) vww(10);
                  color: #111111;
			
                  .u-button {
                     height: vww(23);
                  }
               }
               }
            }
         }
      }
   }

   ::v-deep.register {
      width: 94%;
      padding: 0 0 vww(20) 0;
      margin: 0 auto;
   }
</style>