11

src/components/TravelContractConfirm.vue

-<style>
+<style>
   * {
     margin: 0;
     padding: 0;
@@ -349,7 +349,6 @@
     background: #fff;
     border-top: 1px solid #ccc;
     z-index: 1000;
-    padding-bottom: 32px;
   }
 
   .TCdiv_content .signSpan .sign {
@@ -609,16 +608,7 @@
 
     <template v-if="CtObj.CType==1">
       <div class="TCdiv_content" :class="dialogVisible?'CisHideen':''">
-        <!-- 签字 -->
-        <div class="signSpan">
-          <div @click="dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign">
-            <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
-            <span style="font-size:2rem"
-              v-if="CtObj.Tourists_Sign==''||CtObj.Tourists_Sign==null">{{$t('objFill.v101.qianzhi')}}</span>
-            <span style="font-size:2rem" v-else>重新签字</span>
-          </div>
-          <div style="width:100%;height:50px;">&nbsp;</div>
-        </div>
+
         <!-- 开始进入弹窗 -->
         <div class=TipTc v-if="tcShow">
           <div class="TipsDiv" style="text-align:center;line-height:2">
@@ -644,7 +634,8 @@
                 <li :class="ActiveTab==2?'ActiveLi':''" @click="ChangeTab(2)">相关告知及提示</li>
                 <li :class="ActiveTab==3?'ActiveLi':''" @click="ChangeTab(3)">单项委托/组合服务合同 预定项目及要求</li>
                 <li :class="ActiveTab==4?'ActiveLi':''" @click="ChangeTab(4)">签字盖章</li>
-                 <li v-if=" CtObj.ContractGuestList&& CtObj.ContractGuestList.length>1" :class="ActiveTab==10?'ActiveLi':''" @click="ChangeTab(10)">签约委托书</li>
+                <li v-if=" CtObj.ContractGuestList&& CtObj.ContractGuestList.length>1"
+                  :class="ActiveTab==10?'ActiveLi':''" @click="ChangeTab(10)">签约委托书</li>
               </ul>
             </div>
           </div>
@@ -803,7 +794,7 @@
                 <p>{{$t('scen.sc_tel')}}：<font>{{CtObj.Tourists_EmergencyLinkTel}}</font>
                 </p>
                 <br>
-                
+
                 <p><b>二、预定项目及要求：</b></p>
                 <br>
                 <ul class="gzqzUl Danxiang_Ul">
@@ -1412,7 +1403,7 @@
                   <p class="bold colorRed">電話番号：0748－65－1011</p>
                   <p class="bold colorRed">SWIFT CODE: BOKFJPJZ</p>
                 </template>
-                 <p class="bold colorRed">款项必须支付至本合同指定公账，如转账到其他账户或私人账户则与公司无关、支付无效，视为未支付旅游费用，公司有权选择解除合同或者继续向旅游者要求费用支付</p>
+                <p class="bold colorRed">款项必须支付至本合同指定公账，如转账到其他账户或私人账户则与公司无关、支付无效，视为未支付旅游费用，公司有权选择解除合同或者继续向旅游者要求费用支付</p>
                 <br>
                 <p><b>四、旅游者、旅行社双方确认：</b></p>
                 <p>1、旅游者知悉且同意本合同《相关告知及提示》和《预定项目及要求》内容。并确认预定信息无误。</p>
@@ -1528,34 +1519,40 @@
                   </li>
                 </ul>
               </div>
-               <!-- 签约委托书 -->
-          <div class="item_content" v-if="ActiveTab===10&&CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
-             <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;"><span style="text-decoration: underline;">{{CtObj.TravelAgency_Name}}:</span></p>
-            <p style="margin-bottom: 10px;">我自愿参加贵社组织的旅行团， <template v-if="CtObj.C_TCNUM&&CtObj.C_TCNUM.length>0">团号:<span style="text-decoration: underline;"> {{CtObj.C_TCNUM}}</span>，</template> 并全权委托<span style="text-decoration: underline;">{{CtObj.Tourists_Name}}</span>代表我与贵社签订《单项委托协议[平台版2018]》(合同编号:<span style="text-decoration: underline;">{{CtObj.T_ContractNum}}</span>)，按《单项委托协议[平台版2018]》约定，承担责任。</p>
-            <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;">委托人:</p>
-          <ul class="guestUl">
+              <!-- 签约委托书 -->
+              <div class="item_content"
+                v-if="ActiveTab===10&&CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
+                <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;"><span
+                    style="text-decoration: underline;">{{CtObj.TravelAgency_Name}}:</span></p>
+                <p style="margin-bottom: 10px;">我自愿参加贵社组织的旅行团， <template
+                    v-if="CtObj.C_TCNUM&&CtObj.C_TCNUM.length>0">团号:<span style="text-decoration: underline;">
+                      {{CtObj.C_TCNUM}}</span>，</template> 并全权委托<span
+                    style="text-decoration: underline;">{{CtObj.Tourists_Name}}</span>代表我与贵社签订《单项委托协议[平台版2018]》(合同编号:<span
+                    style="text-decoration: underline;">{{CtObj.T_ContractNum}}</span>)，按《单项委托协议[平台版2018]》约定，承担责任。</p>
+                <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;">委托人:</p>
+                <ul class="guestUl">
                   <li v-for="(item,index) in CtObj.ContractGuestList" :key="index">
                     <template v-if="getKongge(CtObj.Tourists_Name)!=getKongge(item.CGuestName)">
-                    <el-row>
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">{{$t('system.query_name')}}：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestName}}</el-col>
-                      </el-col>
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">性别：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestSex}}</el-col>
-                      </el-col>
-                    </el-row>
-                    <el-row style="padding:6px 0">
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">{{$t('objFill.zhengjianhm')}}：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestCertificateNum}}</el-col>
-                      </el-col>
-                    </el-row>
+                      <el-row>
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">{{$t('system.query_name')}}：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestName}}</el-col>
+                        </el-col>
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">性别：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestSex}}</el-col>
+                        </el-col>
+                      </el-row>
+                      <el-row style="padding:6px 0">
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">{{$t('objFill.zhengjianhm')}}：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestCertificateNum}}</el-col>
+                        </el-col>
+                      </el-row>
                     </template>
                   </li>
                 </ul>
-          </div>
+              </div>
               <!-- 文明旅游公约 -->
               <div v-if="ActiveTab==8" class="item_content" style="text-align:center;line-height:2">
                 <div style="width:90%;margin:auto;text-align:left;">
@@ -1577,16 +1574,7 @@
     </template>
     <template v-if="CtObj.CType==2">
       <div class="TCdiv_content" :class="dialogVisible?'CisHideen':''">
-        <!-- 签字 -->
-        <div class="signSpan">
-          <div @click="dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign">
-            <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
-            <span style="font-size:2rem"
-              v-if="CtObj.Tourists_Sign==''||CtObj.Tourists_Sign==null">{{$t('objFill.v101.qianzhi')}}</span>
-            <span style="font-size:2rem" v-else>重新签字</span>
-          </div>
-          <div style="width:100%;height:50px;">&nbsp;</div>
-        </div>
+
         <!-- 开始进入弹窗 -->
         <div class=TipTc v-if="tcShow">
           <div class="TipsDiv" style="text-align:center;line-height:2">
@@ -1612,7 +1600,8 @@
                 <li :class="ActiveTab==2?'ActiveLi':''" @click="ChangeTab(2)">合同信息</li>
                 <li :class="ActiveTab==3?'ActiveLi':''" @click="ChangeTab(3)">盖章签字</li>
                 <li :class="ActiveTab==4?'ActiveLi':''" @click="ChangeTab(4)">游客名单</li>
-                  <li v-if=" CtObj.ContractGuestList&& CtObj.ContractGuestList.length>1" :class="{'ActiveLi':ActiveTab==10}" @click="ChangeTab(10)">签约委托书</li>
+                <li v-if=" CtObj.ContractGuestList&& CtObj.ContractGuestList.length>1"
+                  :class="{'ActiveLi':ActiveTab==10}" @click="ChangeTab(10)">签约委托书</li>
                 <li :class="ActiveTab==5?'ActiveLi':''" @click="ChangeTab(5)">团队行程</li>
                 <li :class="ActiveTab==6?'ActiveLi':''" @click="ChangeTab(6)">自愿购物活动补充协议</li>
                 <li :class="ActiveTab==7?'ActiveLi':''" @click="ChangeTab(7)">
@@ -1973,7 +1962,7 @@
                   </p>
                   <p class="bold colorRed">支付宝收款账号：392336499@qq.com</p>
                 </template>
-                 <p class="bold colorRed">款项必须支付至本合同指定公账，如转账到其他账户或私人账户则与公司无关、支付无效，视为未支付旅游费用，公司有权选择解除合同或者继续向旅游者要求费用支付</p>
+                <p class="bold colorRed">款项必须支付至本合同指定公账，如转账到其他账户或私人账户则与公司无关、支付无效，视为未支付旅游费用，公司有权选择解除合同或者继续向旅游者要求费用支付</p>
                 <h3>
                   <p class="toTopDistance">
                     {{$t('objFill.v101.Contract.diershiertiao')}}&nbsp;&nbsp;{{$t('objFill.v101.Contract.rensywshbx')}}
@@ -2246,34 +2235,43 @@
                   </li>
                 </ul>
               </div>
-             <!-- 签约委托书 -->
-          <div class="item_content" v-if="ActiveTab===10&&CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
-             <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;"><span style="text-decoration: underline;">{{CtObj.TravelAgency_Name}}:</span></p>
-            <p style="margin-bottom: 10px;">我自愿参加贵社组织的<template v-if="CtObj.C_ProductName&&CtObj.C_ProductName.length>0"><span style="text-decoration: underline;" >{{CtObj.C_ProductName}}</span></template><template v-if="CtObj.C_DayNum>0"> <span style="text-decoration: underline;" > {{CtObj.C_DayNum}}天</span> </template>  旅行团，<template v-if="CtObj.C_TCNUM&&CtObj.C_TCNUM.length>0">团号:<span style="text-decoration: underline;"> {{CtObj.C_TCNUM}}</span>，</template> 并全权委托<span style="text-decoration: underline;">{{CtObj.Tourists_Name}}</span>代表我与贵社签订《大陆境内旅游合同2014》(合同编号:<span style="text-decoration: underline;">{{CtObj.T_ContractNum}}</span>)，按《大陆境内旅游合同2014》约定，承担责任。</p>
-            <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;">委托人:</p>
-          <ul class="guestUl">
+              <!-- 签约委托书 -->
+              <div class="item_content"
+                v-if="ActiveTab===10&&CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
+                <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;"><span
+                    style="text-decoration: underline;">{{CtObj.TravelAgency_Name}}:</span></p>
+                <p style="margin-bottom: 10px;">我自愿参加贵社组织的<template
+                    v-if="CtObj.C_ProductName&&CtObj.C_ProductName.length>0"><span
+                      style="text-decoration: underline;">{{CtObj.C_ProductName}}</span></template><template
+                    v-if="CtObj.C_DayNum>0"> <span style="text-decoration: underline;"> {{CtObj.C_DayNum}}天</span>
+                  </template> 旅行团，<template v-if="CtObj.C_TCNUM&&CtObj.C_TCNUM.length>0">团号:<span
+                      style="text-decoration: underline;"> {{CtObj.C_TCNUM}}</span>，</template> 并全权委托<span
+                    style="text-decoration: underline;">{{CtObj.Tourists_Name}}</span>代表我与贵社签订《大陆境内旅游合同2014》(合同编号:<span
+                    style="text-decoration: underline;">{{CtObj.T_ContractNum}}</span>)，按《大陆境内旅游合同2014》约定，承担责任。</p>
+                <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;">委托人:</p>
+                <ul class="guestUl">
                   <li v-for="(item,index) in CtObj.ContractGuestList" :key="index">
                     <template v-if="getKongge(CtObj.Tourists_Name)!=getKongge(item.CGuestName)">
-                    <el-row>
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">{{$t('system.query_name')}}：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestName}}</el-col>
-                      </el-col>
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">性别：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestSex}}</el-col>
-                      </el-col>
-                    </el-row>
-                    <el-row style="padding:6px 0">
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">{{$t('objFill.zhengjianhm')}}：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestCertificateNum}}</el-col>
-                      </el-col>
-                    </el-row>
+                      <el-row>
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">{{$t('system.query_name')}}：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestName}}</el-col>
+                        </el-col>
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">性别：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestSex}}</el-col>
+                        </el-col>
+                      </el-row>
+                      <el-row style="padding:6px 0">
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">{{$t('objFill.zhengjianhm')}}：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestCertificateNum}}</el-col>
+                        </el-col>
+                      </el-row>
                     </template>
                   </li>
                 </ul>
-          </div>
+              </div>
               <!-- 团队行程 -->
               <div v-if="ActiveTab==5" class="item_content">
                 <ul class="gzqzUl imTips">
@@ -2451,17 +2449,7 @@
     <!-- 一日游 -->
     <template v-if="CtObj.CType==3">
       <div class="TCdiv_content" :class="dialogVisible?'CisHideen':''">
-        <!-- 签字 -->
-        <div class="signSpan">
-          <div @click="dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign">
-            <!-- <span><span class="sp1"></span></p> -->
-            <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
-            <span style="font-size:2rem"
-              v-if="CtObj.Tourists_Sign==''||CtObj.Tourists_Sign==null">{{$t('objFill.v101.qianzhi')}}</span>
-            <span style="font-size:2rem" v-else>重新签字</span>
-          </div>
-          <div style="width:100%;height:50px;">&nbsp;</div>
-        </div>
+
         <!-- 开始进入弹窗 -->
         <div class=TipTc v-if="tcShow">
           <div class="TipsDiv" style="text-align:center;line-height:2">
@@ -2490,9 +2478,9 @@
                 <li :class="ActiveTab==3?'ActiveLi':''" @click="ChangeTab(3)">合同信息</li>
                 <li :class="ActiveTab==4?'ActiveLi':''" @click="ChangeTab(4)">签字盖章</li>
                 <li :class="ActiveTab==5?'ActiveLi':''" @click="ChangeTab(5)">游客名单</li>
-                   <template  v-if="CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
-              <li  :class="{'active':ActiveTab==10}" @click="ChangeTab(10)">签约委托书</li>
-               </template>
+                <template v-if="CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
+                  <li :class="{'active':ActiveTab==10}" @click="ChangeTab(10)">签约委托书</li>
+                </template>
                 <li :class="ActiveTab==6?'ActiveLi':''" @click="ChangeTab(6)">团队行程</li>
                 <li :class="ActiveTab==7?'ActiveLi':''" @click="ChangeTab(7)">自愿购物活动补充协议</li>
                 <li :class="ActiveTab==8?'ActiveLi':''" @click="ChangeTab(8)">文明旅游公约</li>
@@ -2633,7 +2621,7 @@
                   <p>電話番号：0748－65－1011</p>
                   <p>SWIFT CODE: BOKFJPJZ</p>
                 </template>
-                 <p class="bold colorRed">款项必须支付至本合同指定公账，如转账到其他账户或私人账户则与公司无关、支付无效，视为未支付旅游费用，公司有权选择解除合同或者继续向旅游者要求费用支付</p>
+                <p class="bold colorRed">款项必须支付至本合同指定公账，如转账到其他账户或私人账户则与公司无关、支付无效，视为未支付旅游费用，公司有权选择解除合同或者继续向旅游者要求费用支付</p>
                 <p>交通安排：</p>
                 <p>使用形式</p>
                 <p>
@@ -2894,34 +2882,42 @@
                   </li>
                 </ul>
               </div>
-               <!-- 签约委托书 -->
-          <div class="item_content" v-if="ActiveTab==10&&CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
-            <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;"><span style="text-decoration: underline;">{{CtObj.TravelAgency_Name}}:</span></p>
-            <p style="margin-bottom: 10px;">我自愿参加贵社组织的 <template v-if="CtObj.C_ProductName&&CtObj.C_ProductName.length>0"><span style="text-decoration: underline;" >{{CtObj.C_ProductName}}</span></template><template v-if="CtObj.C_DayNum>0"> <span style="text-decoration: underline;" > {{CtObj.C_DayNum}}天</span> </template>旅行团， <template v-if="CtObj.C_TCNUM&&CtObj.C_TCNUM.length>0">团号:<span style="text-decoration: underline;"> {{CtObj.C_TCNUM}}</span>，</template>并全权委托<span style="text-decoration: underline;">{{CtObj.Tourists_Name}}</span>代表我与贵社签订《一日游旅游合同》(合同编号:<span style="text-decoration: underline;">{{CtObj.T_ContractNum}}</span>)，按《一日游旅游合同》约定，承担责任。</p>
-            <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;">委托人:</p>
-            <ul class="guestUl">
+              <!-- 签约委托书 -->
+              <div class="item_content" v-if="ActiveTab==10&&CtObj.ContractGuestList&&CtObj.ContractGuestList.length>1">
+                <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;"><span
+                    style="text-decoration: underline;">{{CtObj.TravelAgency_Name}}:</span></p>
+                <p style="margin-bottom: 10px;">我自愿参加贵社组织的 <template
+                    v-if="CtObj.C_ProductName&&CtObj.C_ProductName.length>0"><span
+                      style="text-decoration: underline;">{{CtObj.C_ProductName}}</span></template><template
+                    v-if="CtObj.C_DayNum>0"> <span style="text-decoration: underline;"> {{CtObj.C_DayNum}}天</span>
+                  </template>旅行团， <template v-if="CtObj.C_TCNUM&&CtObj.C_TCNUM.length>0">团号:<span
+                      style="text-decoration: underline;"> {{CtObj.C_TCNUM}}</span>，</template>并全权委托<span
+                    style="text-decoration: underline;">{{CtObj.Tourists_Name}}</span>代表我与贵社签订《一日游旅游合同》(合同编号:<span
+                    style="text-decoration: underline;">{{CtObj.T_ContractNum}}</span>)，按《一日游旅游合同》约定，承担责任。</p>
+                <p style="font-size: 14px;font-weight: bolder;margin-bottom: 10px;">委托人:</p>
+                <ul class="guestUl">
                   <li v-for="(item,index) in CtObj.ContractGuestList" :key="index">
                     <template v-if="getKongge(CtObj.Tourists_Name)!=getKongge(item.CGuestName)">
-                    <el-row>
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">{{$t('system.query_name')}}：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestName}}</el-col>
-                      </el-col>
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">性别：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestSex}}</el-col>
-                      </el-col>
-                    </el-row>
-                    <el-row style="padding:6px 0">
-                      <el-col :span="12">
-                        <el-col :span="8" style="text-align:right">{{$t('objFill.zhengjianhm')}}：</el-col>
-                        <el-col :span="16" style="text-align:left">{{item.CGuestCertificateNum}}</el-col>
-                      </el-col>
-                    </el-row>
+                      <el-row>
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">{{$t('system.query_name')}}：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestName}}</el-col>
+                        </el-col>
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">性别：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestSex}}</el-col>
+                        </el-col>
+                      </el-row>
+                      <el-row style="padding:6px 0">
+                        <el-col :span="12">
+                          <el-col :span="8" style="text-align:right">{{$t('objFill.zhengjianhm')}}：</el-col>
+                          <el-col :span="16" style="text-align:left">{{item.CGuestCertificateNum}}</el-col>
+                        </el-col>
+                      </el-row>
                     </template>
                   </li>
                 </ul>
-          </div>
+              </div>
               <!-- 团队行程 -->
               <div v-if="ActiveTab==6" class="item_content">
                 <ul class="guestUl imTips">
@@ -3952,6 +3948,18 @@
         </div>
       </div>
     </template>
+    <!-- 签字 -->
+    <div class="TCdiv_content">
+      <div class="signSpan">
+        <div @click="dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign">
+          <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
+          <span style="font-size:2rem"
+            v-if="CtObj.Tourists_Sign==''||CtObj.Tourists_Sign==null">{{$t('objFill.v101.qianzhi')}}</span>
+          <span style="font-size:2rem" v-else>重新签字</span>
+        </div>
+        <div style="width:100%;height:calc(50px + env(safe-area-inset-bottom, 34px));padding-bottom:env(safe-area-inset-bottom, 34px);">&nbsp;</div>
+      </div>
+    </div>
     <div class="CliSignDiv" :class="dialogVisible?'isShowSign':''" @touchmove.prevent>
       <div class="CliSignDiv" style="height:100%;background:#fff;z-index:100">
         <div class="CanvasDiv">
@@ -3960,7 +3968,7 @@
             </div>
           </div>
         </div>
-        <div class="bottom" style="text-align:center;height:100px;line-height:100px;">
+        <div class="bottom" style="text-align:center;height:80px;line-height:80px;">
           <el-row>
             <el-col :span="12">
               <div style="width:100%;" @click="handelClearEl()">
@@ -3976,7 +3984,7 @@
             </el-col>
           </el-row>
         </div>
-        <div style="width:100%;height:50px;">&nbsp;</div>
+          <div style="width:100%;height:calc(50px + env(safe-area-inset-bottom, 34px));padding-bottom:env(safe-area-inset-bottom, 34px);">&nbsp;</div>
       </div>
     </div>
   </div>
@@ -4159,8 +4167,8 @@
         }
         return serviceCount;
       },
- getKongge(str){
-      return  str.replace(/\s+/g, "");
+      getKongge(str) {
+        return str.replace(/\s+/g, "");
       },
       ChangeTab(num) {
         this.ActiveTab = num;