'修改前端的一些样式，以及美化界面，首页系统管理员图表接口联调'

@@ -8,10 +8,10 @@ VITE_PUBLIC_PATH = /
 # Please note that no line breaks
 
 # 本地
-# VITE_PROXY = [["/api","http://localhost:8080/api"]]
+VITE_PROXY = [["/api","http://192.168.10.107:8080/api"]]
 
 # 线上
-VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
+# VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 
 # 实时数据的ws地址
 VITE_WEB_SOCKET = ws://101.133.234.90:8080/api/ws/plugins/telemetry?token=  

@@ -4,6 +4,7 @@ enum HomeEnum {
   home = '/homepage/left/top',
   TenantExpireTimeList = '/homepage/right',
   EntitiesQueryFind = '/entitiesQuery/find',
+  TrendAPI = '/homepage/left/bottom',
 }
 
 export const getHomeData = () => {
@@ -62,3 +63,17 @@ export const getEntitiesId = () => {
     }
   );
 };
+
+interface TrendParamsType {
+  startTs: number;
+  endTs: number;
+  interval: number;
+  trend: 'CUSTOMER_TREND' | 'TENANT_TREND';
+}
+// 获取租户趋势或者客户趋势数据
+export const getTrendData = (params: TrendParamsType) => {
+  return defHttp.get({
+    url: HomeEnum.TrendAPI,
+    params,
+  });
+};

@@ -11,7 +11,7 @@
     @menuEvent="handleMenuEvent"
     overlayClassName="app-locale-picker-overlay"
   >
-    <span class="cursor-pointer flex items-center">
+    <span class="cursor-pointer flex items-center" style="color: #fff">
       <Icon icon="ion:language" />
       <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
     </span>

@@ -11,7 +11,7 @@
       class="ml-2 md:opacity-100"
       :class="getTitleClass"
       v-show="showTitle"
-      style="white-space: nowrap; font-size: small"
+      style="white-space: nowrap; font-size: small; color: #f3f4fb"
     >
       {{ getTitle }}
     </span>

@@ -24,16 +24,20 @@ function itemRender({ page, type, originalElement }: ItemRender) {
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
   const { t } = useI18n();
 
-  const configRef = ref<PaginationProps>({});
+  const configRef = ref<PaginationProps>({
+    hideOnSinglePage:true
+  });
   const show = ref(true);
 
   watchEffect(() => {
     const { pagination } = unref(refProps);
+    
     if (!isBoolean(pagination) && pagination) {
       configRef.value = {
         ...unref(configRef),
         ...(pagination ?? {}),
-      };
+       };
+  
     }
   });
 

 <template>
-  123
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, withDefaults } from 'vue';
+  import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { getTrendData } from '/@/api/dashboard';
 
   interface Props {
     width?: string;
     height?: string;
+    customerTrendList?: Array<[number, string]>;
   }
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     width: '100%',
     height: '280px',
+    customerTrendList: () => [],
   });
+  watch(
+    () => props.customerTrendList,
+    (newValue) => {
+      setOptions({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        xAxis: {
+          type: 'time',
+        },
+        yAxis: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        series: [
+          {
+            name: '当前趋势',
+            type: 'line',
+            data: newValue,
+          },
+        ],
+      });
+    }
+  );
 
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  onMounted(async () => {
+    const endTs = Date.now();
+    const res = await getTrendData({
+      startTs: endTs - 2592000000,
+      endTs,
+      interval: 86400000,
+      trend: 'CUSTOMER_TREND',
+    });
+    const transferResult: [number, string][] = [];
+    res.map((item) => {
+      transferResult.push([item.ts, item.value]);
+    });
+    console.log(transferResult);
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      xAxis: {
+        type: 'time',
+      },
+      yAxis: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      series: [
+        {
+          name: '当前趋势',
+          type: 'line',
+          data: transferResult,
+        },
+      ],
+    });
+  });
 </script>

@@ -3,26 +3,26 @@
     <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4">
       <div class="flex" style="height: 100px">
         <div class="mr-4"
-          ><img src="/src/assets/images/device-count.png" style="width: 5rem; height: 5rem"
+          ><img src="/src/assets/images/device-count.png" style="width: 5.625rem; height: 5.625rem"
         /></div>
         <div class="flex-auto">
           <div class="flex justify-between" style="align-items: center">
             <div style="font-size: 1.625rem; color: #333">{{
               growCardList?.deviceInfo?.sumCount
             }}</div>
-            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+            <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
           </div>
           <div> 设备数(个) </div>
-          <div class="flex mt-2">
-            <div class="flex mr-1" style="align-items: center; font-size: 0.75rem"
+          <div class="flex mt-2" style="font-size: 0.75rem">
+            <div class="flex mr-1" style="align-items: center"
               ><img src="/src/assets/images/online.png" class="mr-1" />
               <span>在线{{ growCardList?.deviceInfo?.onLine }}</span>
             </div>
-            <div class="flex mr-1" style="align-items: center; font-size: 0.75rem">
+            <div class="flex mr-1" style="align-items: center">
               <img src="/src/assets/images/offline.png" class="mr-1" />
               <span> 离线{{ growCardList?.deviceInfo?.offLine }} </span>
             </div>
-            <div class="flex mr-1" style="align-items: center; font-size: 0.75rem">
+            <div class="flex mr-1" style="align-items: center">
               <img src="/src/assets/images/inactive.png" class="mr-1" />
               <span> 未激活{{ growCardList?.deviceInfo?.inActive }} </span>
             </div>
@@ -39,9 +39,9 @@
           <img
             v-if="!isAdmin(role)"
             src="/src/assets/images/alarm-count.png"
-            style="width: 5rem; height: 5rem"
+            style="width: 5.625rem; height: 5.625rem"
           />
-          <img v-else src="/src/assets/images/zh.png" style="width: 5rem; height: 5rem" />
+          <img v-else src="/src/assets/images/zh.png" style="width: 5.625rem; height: 5.625rem" />
         </div>
         <div class="flex-auto">
           <div class="flex justify-between" style="align-items: center">
@@ -51,7 +51,7 @@
             <div style="font-size: 1.625rem; color: #333">{{
               growCardList?.tenantInfo?.sumCount
             }}</div>
-            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+            <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
           </div>
           <div> {{ !isAdmin(role) ? `${currentMonth}月告警数（条）` : '租户总量(个)' }}</div>
         </div>
@@ -69,8 +69,8 @@
           ><img
             v-if="!isAdmin(role)"
             src="/src/assets/images/msg-count.png"
-            style="width: 5rem; height: 5rem"
-          /><img v-else src="/src/assets/images/kf.png" style="width: 5rem; height: 5rem" />
+            style="width: 5.625rem; height: 5.625rem"
+          /><img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />
         </div>
         <div v-if="!isAdmin(role)" style="display: flex; align-items: center">
           <div>
@@ -93,7 +93,7 @@
             <div style="font-size: 1.625rem; color: #333">{{
               growCardList?.customerInfo?.sumCount
             }}</div>
-            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+            <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
           </div>
           <div>客户总量(个)</div>
         </div>

 <template>
   <div>
-    <Card title="帮助文档" v-if="!isAdmin(role)">
+    <div v-if="!isAdmin(role)">
       <div>
         <template v-for="item in helpDoc" :key="item.title">
           <AnchorLink v-bind="item" />
         </template>
       </div>
       <Card
-        v-if="!isAdmin(role)"
         :tab-list="tabListTitle"
         v-bind="$attrs"
-        :active-tab-key="activeKey"
         :bordered="false"
-        @tabChange="onTabChange"
         :bodyStyle="{ padding: 0 }"
+        :headStyle="{ padding: 0 }"
       >
-        <div v-if="activeKey === 'tab1'">
-          <List item-layout="horizontal" :dataSource="dataSource">
-            <template #renderItem="{ item }">
-              <ListItem>
-                <ListItemMeta>
-                  <template #avatar>
-                    <Avatar
-                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-                    />
-                  </template>
-                  <template #description>
-                    <span
-                      class="cursor-pointer noticeTitle"
-                      @click="go('/stationnotification/mynotification')"
-                      >{{ item.sysNotice.title }}
-                    </span>
-                  </template>
-                  <template #title>
-                    <span>{{ item.user.realName }}</span>
-                  </template>
-                </ListItemMeta>
-                <template #extra>
-                  <Time :value="item.sysNotice.senderDate" />
+        <List item-layout="horizontal" :dataSource="dataSource">
+          <template #renderItem="{ item }">
+            <ListItem>
+              <ListItemMeta>
+                <template #avatar>
+                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                 </template>
-              </ListItem>
-            </template>
-          </List>
-          <Card hoverable title="联系我们" :bordered="false">
-            <template #cover>
-              <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
-            </template>
-            <CardMeta>
-              <template #description>
-                <p>联系人: {{ getContacts }}</p>
-                <p>联系电话: {{ getTel }}</p>
-                <p>联系地址: {{ getAddress }} </p>
+                <template #description>
+                  <span
+                    class="cursor-pointer noticeTitle"
+                    @click="go('/stationnotification/mynotification')"
+                    >{{ item.sysNotice.title }}
+                  </span>
+                </template>
+                <template #title>
+                  <span>{{ item.user.realName }}</span>
+                </template>
+              </ListItemMeta>
+              <template #extra>
+                <Time :value="item.sysNotice.senderDate" />
               </template>
-            </CardMeta>
-          </Card>
-        </div>
+            </ListItem>
+          </template>
+        </List>
       </Card>
-    </Card>
+      <Card
+        hoverable
+        title="联系我们"
+        :bordered="false"
+        v-bind="$attrs"
+        :headStyle="{ padding: 0 }"
+      >
+        <template #cover>
+          <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
+        </template>
+        <CardMeta>
+          <template #description>
+            <p>联系人: {{ getContacts }}</p>
+            <p>联系电话: {{ getTel }}</p>
+            <p>联系地址: {{ getAddress }} </p>
+          </template>
+        </CardMeta>
+      </Card>
+    </div>
 
-    <Card v-if="isAdmin(role)">
+    <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
       <Descriptions title="租户消息量TOP10" :column="1">
-        <template v-for="(item, index) in 10" :key="index">
+        <template v-for="index in 10" :key="index">
           <DescriptionsItem>
             <span
               class="mr-2"
@@ -94,13 +94,12 @@
                     ? '#f8c296'
                     : '#0b55f1;',
               }"
-              >{{ index + 1 }}</span
+              >{{ index }}</span
             >兰州天兆猪业</DescriptionsItem
           >
         </template>
       </Descriptions>
-    </Card>
-    <Card v-if="isAdmin(role)">
+      <Descriptions title="本月即将过期租户" class="mt-6" />
       <BasicTable @register="registerTable" />
     </Card>
   </div>
@@ -115,7 +114,6 @@
   import { Time } from '/@/components/Time';
   import { useGo } from '/@/hooks/web/usePage';
   import { BasicTable, useTable } from '/@/components/Table';
-  import { columns } from './props';
   import { isAdmin } from '/@/enums/roleEnum';
   import { getTenantExpireTimeList } from '/@/api/dashboard';
   export default defineComponent({
@@ -169,16 +167,24 @@
           tab: '我的通知',
         },
       ];
-      const onTabChange = (key) => {
-        activeKey.value = key;
-      };
 
       const [registerTable, { redoHeight }] = useTable({
         api: getTenantExpireTimeList,
-        title: '本月即将过期租户',
         showIndexColumn: false,
         useSearchForm: false,
-        columns,
+        bordered: true,
+        columns: [
+          {
+            title: '租户名称',
+            dataIndex: 'name',
+            width: 120,
+          },
+          {
+            title: '过期时间',
+            dataIndex: 'tenantExpireTime',
+            width: 120,
+          },
+        ],
         fetchSetting: {
           listField: 'expireTenant.items',
           totalField: 'expireTenant.total',
@@ -200,11 +206,10 @@
       });
       onMounted(async () => {
         if (isAdmin(props.role)) return;
-
-        const res = await getEnterPriseDetail();
         const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
-        userStore.setEnterPriseInfo(res);
+        const res = await getEnterPriseDetail();
         dataSource.value = notice.items;
+        userStore.setEnterPriseInfo(res);
       });
 
       return {
@@ -216,7 +221,6 @@
         getAddress,
         getTel,
         dataSource,
-        onTabChange,
         go,
         registerTable,
         isAdmin,

@@ -45,7 +45,7 @@
           />
         </div>
       </template>
-      <TenantTrend />
+      <TenantTrend :tenantTrendList="tenantTrendList" />
     </Card>
     <Card v-bind="$attrs" title="客户趋势">
       <template #extra>
@@ -64,7 +64,7 @@
           />
         </div>
       </template>
-      <CustomerTrend />
+      <CustomerTrend :customerTrendList="customerTrendList" />
     </Card>
   </div>
 </template>
@@ -382,6 +382,8 @@
   const {
     tenantDateValue,
     customerDateValue,
+    tenantTrendList,
+    customerTrendList,
     activeTenantIndex,
     activeCustomerIndex,
     TenantOrCustomerDateList,

@@ -3,18 +3,89 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, withDefaults } from 'vue';
+  import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
+  import { getTrendData } from '/@/api/dashboard/index';
 
   interface Props {
     width?: string;
     height?: string;
+    tenantTrendList?: Array<[number, string]>;
   }
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     width: '100%',
     height: '280px',
+    tenantTrendList: () => [],
   });
 
+  watch(
+    () => props.tenantTrendList,
+    (newValue) => {
+      setOptions({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        xAxis: {
+          type: 'time',
+        },
+        yAxis: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        series: [
+          {
+            name: '当前趋势',
+            type: 'line',
+            data: newValue,
+          },
+        ],
+      });
+    }
+  );
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  onMounted(async () => {
+    const endTs = Date.now();
+    const res = await getTrendData({
+      startTs: endTs - 2592000000,
+      endTs,
+      interval: 86400000,
+      trend: 'TENANT_TREND',
+    });
+    const transferResult = res.map((item) => {
+      return [item.ts, item.value];
+    });
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      xAxis: {
+        type: 'time',
+      },
+      yAxis: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      series: [
+        {
+          name: '当前趋势',
+          type: 'line',
+          data: transferResult,
+        },
+      ],
+    });
+  });
 </script>

@@ -47,6 +47,7 @@
           type: 'bar',
           stack: 'Total',
           data: props.alarmList,
+          color: '#3C78FF',
         },
       ],
     });
@@ -77,6 +78,7 @@
             name: '告警数',
             type: 'bar',
             stack: 'Total',
+            color: '#3C78FF',
             data: newValue,
           },
         ],

@@ -68,14 +68,14 @@
             type: 'bar',
             stack: 'total',
             data: newValue,
-            color: '#9fe080',
+            color: '#5AEEED',
           },
           {
             name: '传输消息量',
             type: 'bar',
             stack: 'total',
             data: newValue1,
-            color: '#5c7bd9',
+            color: '#3C78FF',
           },
         ],
       });

 import { PropType } from 'vue';
-import type { BasicColumn } from '/@/components/Table';
 export interface BasicProps {
   width: string;
   height: string;
@@ -14,16 +13,3 @@ export const basicProps = {
     default: '280px',
   },
 };
-
-export const columns: BasicColumn[] = [
-  {
-    title: '租户名称',
-    dataIndex: 'name',
-    width: 120,
-  },
-  {
-    title: '过期时间',
-    dataIndex: 'tenantExpireTime',
-    width: 120,
-  },
-];

 import { ref } from 'vue';
+import { getTrendData } from '/@/api/dashboard';
 export function useDate() {
   const tenantDateValue = ref([]);
   const customerDateValue = ref([]);
+  const tenantTrendList = ref([]);
+  const customerTrendList = ref([]);
   const activeTenantIndex = ref(0);
   const activeCustomerIndex = ref(0);
   const TenantOrCustomerDateList = ref([
@@ -11,21 +14,34 @@ export function useDate() {
   ]);
 
   // 租户趋势和客户趋势快速选择时间
-  function quickQueryTenantOrCustomerTime(
+  async function quickQueryTenantOrCustomerTime(
     index: number,
     value: number,
     flag: 'tenant' | 'customer'
   ) {
+    const endTs = Date.now();
     if (flag === 'tenant') {
       if (activeTenantIndex.value === index) return;
       activeTenantIndex.value = index;
       tenantDateValue.value = [];
-      console.log(value);
+      const res = await getTrendData({
+        startTs: endTs - value,
+        endTs,
+        interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000,
+        trend: 'TENANT_TREND',
+      });
+      tenantTrendList.value = res.map((item) => [item.ts, item.value]);
     } else {
       if (activeCustomerIndex.value === index) return;
       activeCustomerIndex.value = index;
       customerDateValue.value = [];
-      console.log(value);
+      const res = await getTrendData({
+        startTs: endTs - value,
+        endTs,
+        interval: value === 2592000000 ? 86400000 : value === 7776000000 ? 172800000 : 2592000000,
+        trend: 'CUSTOMER_TREND',
+      });
+      customerTrendList.value = res.map((item) => [item.ts, item.value]);
     }
   }
   // 租户选择日期
@@ -41,6 +57,8 @@ export function useDate() {
   return {
     tenantDateValue,
     customerDateValue,
+    tenantTrendList,
+    customerTrendList,
     activeTenantIndex,
     activeCustomerIndex,
     TenantOrCustomerDateList,

@@ -10,7 +10,12 @@
       </div>
     </div>
     <div class="md:w-3/10 w-full enter-y">
-      <HelpDoc :role="role" />
+      <Card
+        :style="{ width: '100%', height: !isAdmin(role) ? '100%' : '98.5%' }"
+        :title="!isAdmin(role) ? '帮助文档' : ''"
+      >
+        <HelpDoc :role="role" />
+      </Card>
     </div>
   </div>
 </template>

@@ -6,6 +6,7 @@
     :canFullscreen="false"
     centered
     @ok="dispatchCustomer"
+    @cancel="resetFields"
     :minHeight="150"
     okText="分配"
   >
@@ -59,6 +60,7 @@
         registerModal,
         registerForm,
         dispatchCustomer,
+        resetFields,
       };
     },
   });

@@ -5,42 +5,27 @@
         :alwaysShowTitle="true"
         style="z-index: 99; position: absolute; width: 40px; height: 100px; left: 10%; top: -20px"
       />
+
+      <AppDarkModeToggle
+        class="absolute top-3 right-10 enter-x"
+        v-if="!sessionTimeout"
+        @click="toggleDark"
+      />
       <AppLocalePicker
         class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
         :showText="false"
         v-if="!sessionTimeout && showLocale"
       />
-      <AppDarkModeToggle
-        class="absolute top-3 right-7 enter-x"
-        v-if="!sessionTimeout"
-        @click="toggleDark"
-      />
     </div>
     <div class="login-container" :class="{ light1: isDark, dark: !isDark }">
-      <div class="login-description">
-        <h1>物联网平台</h1>
-        <h2>输入您的个人详细信息开始使用！</h2>
-      </div>
       <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
+        <div class="login-description absolute right-65 top-30">
+          <h1>物联网平台</h1>
+          <h2>输入您的个人详细信息开始使用！</h2>
+        </div>
         <div
           :class="`${prefixCls}-form`"
-          class="
-            relative
-            w-full
-            px-5
-            py-8
-            mx-auto
-            my-auto
-            rounded-md
-            shadow-md
-            xl:ml-16 xl:bg-transparent
-            sm:px-8
-            xl:p-4 xl:shadow-none
-            sm:w-3/4
-            lg:w-2/4
-            xl:w-auto
-            enter-x
-          "
+          class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
           :style="{ backgroundColor: isDark ? '#fff' : '#1a2030' }"
         >
           <LoginForm />
@@ -50,7 +35,17 @@
           <QrCodeForm />
         </div>
       </div>
-      <div style="position: absolute; bottom: 20px; left: 45%">{{ getCopyRight }}</div>
+      <div
+        style="
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          position: absolute;
+          bottom: 1.25rem;
+          color: #fff;
+        "
+        >{{ getCopyRight }}</div
+      >
     </div>
   </div>
 </template>
@@ -82,7 +77,10 @@
   };
   const userStore = useUserStore();
   const getCopyRight = computed(() => {
-    return (userStore.platInfo?.copyright ?? '') + (userStore.platInfo?.presentedOurselves ?? '');
+    return (
+      (userStore.platInfo?.copyright ?? 'Copyright@ 云腾五洲 蜀ICP') +
+      (userStore.platInfo?.presentedOurselves ?? '')
+    );
   });
 </script>
 <style lang="less">
@@ -104,9 +102,6 @@
       height: 60px;
       width: 100%;
       background-color: #1d3794;
-      .vben-dark-switch {
-        margin-left: 1840px;
-      }
     }
 
     .login-container {
@@ -117,28 +112,25 @@
       height: calc(100% - 60px);
       background-size: 100% 100%;
       background-repeat: no-repeat;
-      .vben-login-form {
-        position: absolute;
-
-        width: 410px;
-        right: 200px;
-        top: 50%;
-        margin-top: -180px;
-      }
       .login-description {
-        position: absolute;
-        right: 13%;
-        top: 15%;
+        text-align: center;
         h1 {
-          font-size: 26px;
           color: #5aeeed;
-          text-align: center;
+
+          font-size: 26px;
         }
         h2 {
-          font-size: 20px;
           color: #5aeeed;
+          font-size: 20px;
         }
       }
+      .vben-login-form {
+        position: absolute;
+        width: 25.625rem;
+        right: 12.5rem;
+        top: 50%;
+        margin-top: -11.25rem;
+      }
     }
   }
 </style>