fix:移动端修改

pages/m_user.vue

@@ -10,7 +10,9 @@
       <img src="~/public/favicon.ico" style="width: 24px;" alt="">
     </div>
     <div class="w-[24px]">
+      <a href="tel:17723267692">          
       <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
+        </a>
     </div>
   </div>
   <!-- 图片 -->
@@ -211,43 +213,52 @@
           </div>
     </n-drawer-content>
   </n-drawer>
-  <n-modal v-model:show="showModal">
-    <n-card style="width: 300px" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
-      <div class="text-[#999999] text-[12px] pt-[15px] pb-[30px]">
-        为了我们能更好的服务您，请您填写以下信息，如遇到问题，请您拨打免费服务热线
+  <!-- <van-overlay :show="showModal" @click="showModal = false"> -->
+    <van-dialog v-model:show="showModal" :show-confirm-button="false" title="申请试用">
+  <div class="wrapper" @click.stop>
+    <div class="text-[#999999] text-[12px] pt-[10px] text-center" >
+        为了我们能更好的服务您，请您填写以下信息，
+      </div>
+      <div class="text-[#999999] text-[12px] pb-[20px] mx-auto text-center">
+        如遇到问题，请您拨打免费服务热线
       </div>
       <n-form ref="formRef" :model="customer" :rules="rules">
-        <n-form-item path="companyName" label="公司名称">
-          <n-input v-model:value="customer.companyName" @keydown.enter.prevent class="h-[55px] leading-[55px]"
+        <n-form-item path="companyName" label="公司名称" style="width: 343px;">
+          <n-input v-model:value="customer.companyName" @keydown.enter.prevent  class="h-[40px] leading-[40px]"
             placeholder="请输入公司名称" />
         </n-form-item>
         <n-form-item path="city" label="所在城市">
-          <n-input v-model:value="customer.city" class="h-[55px] leading-[55px]" placeholder="请选择所在城市" />
-          <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[55px] leading-[55px]"
+          <n-input v-model:value="customer.city" class="h-[40px] leading-[40px]"  placeholder="请选择所在城市" />
+          <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[40px] leading-[40px]"
             :options="provice" check-strategy="child" :show-path="true" value-field="name" label-field="name" @update:value="handleUpdateValue"
             /> -->
         </n-form-item>
         <n-form-item path="customName" label="姓名">
-          <n-input v-model:value="customer.customName" class="h-[55px] leading-[55px]" placeholder="请输入姓名" />
+          <n-input v-model:value="customer.customName" class="h-[40px] leading-[40px]"  placeholder="请输入姓名" />
         </n-form-item>
         <n-form-item path="phone" label="联系方式">
-          <n-input v-model:value="customer.phone" class="h-[55px] leading-[55px]" placeholder="请输入联系方式" />
+          <n-input v-model:value="customer.phone" class="h-[40px] leading-[40px]"  placeholder="请输入联系方式" />
         </n-form-item>
         <n-form-item path="verifyCode" label="验证码" class="">
-          <n-input v-model:value="customer.verifyCode" class="h-[55px] leading-[55px]" placeholder="请输入验证码" />
-          <n-button type="info" class="w-[100px] h-[50px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
+          <n-input v-model:value="customer.verifyCode" class="h-[40px] leading-[40px]"  placeholder="请输入验证码" />
+          <n-button type="info" class="w-[124px] h-[40px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
             @click="verifyCodeFn">
             {{ countdown == 0 ? '获取验证码' : countdown }}
           </n-button>
         </n-form-item>
         <div class="flex justify-center">
-          <n-button type="info" class="w-[300px] h-[50px] text-[#fff] bg-[#1f4df5]" @click="handleValidateButtonClick">
+          <n-button type="info" class="w-[303px] h-[40px] text-[#fff] bg-[#1f4df5]" @click="handleValidateButtonClick">
             立即提交
           </n-button>
         </div>
       </n-form>
+  </div>
+</van-dialog>
+  <!-- <n-modal v-model:show="showModal">
+    <n-card style="width: 343px;height: 529px;" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
+
     </n-card>
-  </n-modal>
+  </n-modal> -->
   <!-- <nuxt-link to="/list/123">news-1</nuxt-link> -->
 </template>
 <script lang="ts" setup>
@@ -582,4 +593,29 @@ p {
   color: #fff !important;
   background: #131820 !important;
 }
+// 移动端样式
+::v-deep(.n-input:not(.n-input--autosize)){
+  width: 260px !important;
+}
+::v-deep(.n-card-header__main){
+  font-size: 18px;
+}
+::v-deep(.n-card-header) {
+  padding: 0 !important;
+  padding-top: 20px !important;
+}
+::v-deep(.n-form){
+  padding: 0 20px !important;
+  padding-bottom: 30px !important;
+}
+::v-deep(.van-popup--center){
+  width: 343px !important;
+  height: 529px !important;
+}
+::v-deep(.van-button__content){
+  display: none !important;
+}
+::v-deep(.n-form-item){
+  --n-label-height: 5px !important;
+}
 </style>