完成适配移动端

pages/order/[id].vue

@@ -3,39 +3,39 @@
   <!-- Banner -->
   <Banner :layout="layout"/>
   <!-- 主体部分 -->
-  <div class="xl:w-screen-xl m-auto py-4 mt-20">
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
     <el-page-header :icon="ArrowLeft" @back="goBack">
       <template #content>
-        <span class="text-large font-600 mr-3"> {{ page.title }} </span>
+        <span class="text-large font-600"> {{ page.title }} </span>
       </template>
       <template #extra>
       </template>
-      <el-card shadow="hover" class="my-10 px-2">
-        <el-row :gutter="30" justify="space-between">
-          <el-col :span="13">
+      <el-card shadow="hover" class="my-5 sm:my-10 sm:px-2">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
+          <div class="col-span-2">
             <div class="my-2">
               <el-alert title="填写您的需求，为您量身定制." type="warning"/>
             </div>
             <el-form
-                ref="formRef"
-                :model="form"
-                :rules="rules"
-                label-width="120"
-                label-position="left"
-                status-icon
+              ref="formRef"
+              :model="form"
+              :rules="rules"
+              label-width="80"
+              label-position="left"
+              status-icon
             >
               <el-form-item :label="$t('order.title')" prop="title" class="hover:bg-gray-50 p-2">
                 <el-select
-                    v-model="form.title"
-                    filterable
-                    placeholder="选择产品"
-                    @change="onWebsite"
+                  v-model="form.title"
+                  filterable
+                  placeholder="选择产品"
+                  @change="onWebsite"
                 >
                   <el-option
-                      v-for="item in siteList"
-                      :key="item.websiteId"
-                      :label="item.websiteName"
-                      :value="item.websiteId"
+                    v-for="item in siteList"
+                    :key="item.websiteId"
+                    :label="item.websiteName"
+                    :value="item.websiteId"
                   >
                     <div class="flex justify-between">
                       <span>{{ item.websiteName }}</span>
@@ -44,12 +44,6 @@
                     </span>
                     </div>
                   </el-option>
-<!--                  <el-option-->
-<!--                      v-for="item in siteList"-->
-<!--                      :key="item.websiteId"-->
-<!--                      :label="item.websiteName"-->
-<!--                      :value="`${item.websiteId}`"-->
-<!--                  />-->
                 </el-select>
               </el-form-item>
               <el-form-item :label="$t('order.content')" prop="content" class="hover:bg-gray-50 p-2">
@@ -65,9 +59,6 @@
               <el-form-item :label="$t('order.email')" prop="email" class="hover:bg-gray-50 p-2">
                 <el-input v-model="form.email" :placeholder="$t('order.email')"/>
               </el-form-item>
-              <!--              <el-form-item :label="$t('order.address')" prop="address" class="hover:bg-gray-50 p-2">-->
-              <!--                <el-input v-model="form.address" :placeholder="$t('order.address')"/>-->
-              <!--              </el-form-item>-->
               <el-form-item :label="$t('order.code')" prop="code" class="hover:bg-gray-50 p-2">
                 <el-space class="flex">
                   <el-input size="large" :placeholder="$t('order.imgCode')" maxlength="5" v-model="form.code"/>
@@ -82,11 +73,11 @@
                 </div>
               </el-form-item>
             </el-form>
-          </el-col>
-          <el-col :span="10">
+          </div>
+          <div class="hidden-sm-and-down">
             <el-image class="py-2" v-if="page.icon" :src="page.icon"/>
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </el-card>
     </el-page-header>
   </div>
@@ -268,12 +259,12 @@ const goBack = () => {
 }
 
 watch(
-    () => route.params.id,
-    (id) => {
-      navId.value = getNavIdByParamsId(id);
-      reload();
-    },
-    {immediate: true}
+  () => route.params.id,
+  (id) => {
+    navId.value = getNavIdByParamsId(id);
+    reload();
+  },
+  {immediate: true}
 );
 </script>