feat: 登录页移动端适配

src/style/global-scrollbar.scss

@@ -32,3 +32,14 @@
   height: 6px;
   background-color: $color-border-4;
 }
+
+// arco滚动条样式
+// 横向
+.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
+  height: 6px !important;
+}
+
+// 纵向
+.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
+  width: 6px !important;
+}

src/views/file/document-library/components/file-table.vue

@@ -47,6 +47,7 @@
       :bordered="{
         cell: true
       }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
       :loading="loading"
       :data="list"
       :row-selection="rowSelection"
@@ -94,7 +95,7 @@
             </a-space>
           </template>
         </a-table-column>
-        <a-table-column title="操作" :width="200">
+        <a-table-column title="操作" :width="200" fixed="right">
           <template #cell="cell">
             <a-space>
               <a-button size="mini" type="primary">详情</a-button>

src/views/login/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="login">
-      <LoginBanner />
+      <LoginBanner v-if="isPc" />
       <div class="login_box">
         <div class="login_title">Welcome Back</div>
         <div class="login_title_desc">国际化，路由配置，状态管理应有尽有</div>
@@ -15,6 +15,8 @@
 <script setup lang="ts">
 import LoginBanner from "@/views/login/components/login-banner.vue";
 import LoginForm from "@/views/login/components/login-form.vue";
+import { useDevicesSize } from "@/hooks/useDevicesSize";
+const { isPc } = useDevicesSize();
 </script>
 
 <style lang="scss" scoped>
@@ -28,7 +30,7 @@ import LoginForm from "@/views/login/components/login-form.vue";
     left: 50%;
     display: flex;
     align-items: center;
-    width: 1000px;
+    max-width: 1000px;
     height: 500px;
     box-shadow: 0 0 8px 1px $color-fill-2;
     transform: translate(-50%, -50%);

src/views/table/common-table/common-table.vue

@@ -2,23 +2,23 @@
   <div class="snow-page">
     <div class="snow-inner">
       <a-form ref="formRef" :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
-        <a-row :gutter="16">
+        <a-row :gutter="16" justify="start">
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="name" label="姓名">
               <a-input v-model="formData.form.name" placeholder="请输入姓名" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="phone" label="手机号">
               <a-input v-model="formData.form.phone" placeholder="请输入手机号" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="email" label="邮箱">
               <a-input v-model="formData.form.email" placeholder="请输入邮箱" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-space>
               <a-button type="primary" @click="getCommonTableList">
                 <template #icon>
@@ -42,13 +42,13 @@
             </a-space>
           </a-col>
         </a-row>
-        <a-row :gutter="16" v-if="formData.search">
+        <a-row :gutter="16" justify="start" v-if="formData.search">
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="address" label="地址">
               <a-input v-model="formData.form.address" placeholder="请输入地址" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="status" label="用户状态">
               <a-select v-model="formData.form.status" placeholder="请选择用户状态" allow-clear>
                 <a-option value="1">停用</a-option>
@@ -64,6 +64,7 @@
         :bordered="{
           cell: true
         }"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :loading="loading"
         :columns="columns"
         :data="data"
@@ -166,7 +167,9 @@ const columns = [
   {
     title: "操作",
     slotName: "optional",
-    align: "center"
+    align: "center",
+    fixed: "right",
+    width: "200"
   }
 ];
 const formRef = ref();