修改香港登录界面和样式

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/images/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Easy life</title>
+    <title>FlexiStream</title>
     <style type="text/css">
       #Loading {
         width: 100vw;

src/views/login/index.vue

@@ -5,14 +5,14 @@
       <div class="logo-text">Easy life Platform</div>
     </div>
 
-
+    <!-- 
     <div class="banner">
       <div  class="carousel-item">
         <div class="carousel-title">{{ carouselItem.slogan }}</div>
         <div class="carousel-sub-title">{{ carouselItem.subSlogan }}</div>
         <img class="carousel-image" :src="carouselItem.image" />
       </div>
-    </div>
+    </div> -->
 
     <div class="content">
       <div class="content-inner">
@@ -28,7 +28,7 @@ import { onMounted } from "vue"
 import LoginForm from './login-form.vue'
 
 import bannerImage from '@/assets/images/login-banner.png'
-const  carouselItem = {
+const carouselItem = {
   slogan: 'Easy life Platform',
   subSlogan: 'Technology serves life',
   image: bannerImage,
@@ -37,10 +37,9 @@ const  carouselItem = {
 
 <style scoped lang="less">
 .container {
-  display: flex;
   height: 100vh;
-  min-width: 1000px;
-  flex-direction: row;
+  width: 100vw;
+
   .banner {
     width: 550px;
     background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
@@ -53,7 +52,12 @@ const  carouselItem = {
     align-items: center;
     justify-content: center;
     padding-bottom: 40px;
-    background: @bg_color_2;
+    background-image: url('@/assets/images/login_Bg.jpg');
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
   }
 
   .footer {
@@ -63,6 +67,7 @@ const  carouselItem = {
     width: 100%;
   }
 }
+
 .logo {
   position: fixed;
   top: 24px;
@@ -84,6 +89,7 @@ const  carouselItem = {
   align-items: center;
   justify-content: center;
 }
+
 .carousel {
   height: 100%;
 
@@ -114,5 +120,4 @@ const  carouselItem = {
     margin-top: 30px;
   }
 }
-</style>
-
+</style>

src/views/login/login-form.vue

@@ -1,37 +1,39 @@
 <template>
   <div class="login-form-wrapper">
-    <div class="login-form-title">Easy life</div>
-    <div class="login-form-sub-title">Login to Easy life</div>
-
-    <a-form ref="loginForm" :model="formData" class="login-form" @submit-success="handleSubmit">
-      <a-form-item field="username" :rules="[{ required: true, message: '用户名不能为空' }]"
-        :validate-trigger="['change', 'blur']" hide-label>
-        <a-input v-model="formData.username" :placeholder="$t('login.userName')">
-          <template #prefix>
-            <icon-user />
-          </template>
-        </a-input>
-      </a-form-item>
-      <a-form-item field="password" :rules="[{ required: true, message: '密码不能为空' }]"
-        :validate-trigger="['change', 'blur']" hide-label>
-        <a-input-password v-model="formData.password" :placeholder="$t('login.password')" allow-clear>
-          <template #prefix>
-            <icon-lock />
-          </template>
-        </a-input-password>
-      </a-form-item>
-
-
-      <a-space :size="16" direction="vertical">
-        <div class="login-form-password-actions">
-          <a-checkbox v-model="rememberPassword">
-            {{ $t('login.RememberAccountNumber') }}
-          </a-checkbox>
-          <!-- <a-link>忘记密码</a-link> -->
-        </div>
-        <a-button type="primary" html-type="submit" long :loading="formLoading">{{ $t('login.disembark') }}</a-button>
-      </a-space>
-    </a-form>
+    <div class="item">
+      <div class="login-form-title">FlexiStream</div>
+      <div class="login-form-sub-title">Login to FlexiStream</div>
+
+      <a-form ref="loginForm" :model="formData" class="login-form" @submit-success="handleSubmit">
+        <a-form-item field="username" :rules="[{ required: true, message: '用户名不能为空' }]"
+          :validate-trigger="['change', 'blur']" hide-label>
+          <a-input v-model="formData.username" :placeholder="$t('login.userName')">
+            <template #prefix>
+              <icon-user />
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item field="password" :rules="[{ required: true, message: '密码不能为空' }]"
+          :validate-trigger="['change', 'blur']" hide-label>
+          <a-input-password v-model="formData.password" :placeholder="$t('login.password')" allow-clear>
+            <template #prefix>
+              <icon-lock />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+
+        <a-space :size="16" direction="vertical">
+          <div class="login-form-password-actions">
+            <a-checkbox v-model="rememberPassword">
+              {{ $t('login.RememberAccountNumber') }}
+            </a-checkbox>
+            <!-- <a-link>忘记密码</a-link> -->
+          </div>
+          <a-button type="primary" html-type="submit" long :loading="formLoading">{{ $t('login.disembark') }}</a-button>
+        </a-space>
+      </a-form>
+    </div>
   </div>
 </template>
 
@@ -43,8 +45,8 @@ import { useSystemStore } from "@/store/modules/systemStore"
 import { useRouter } from 'vue-router'
 import { updateRouteByMenu } from '@/router/router.update'
 import { FormLoginUser } from '@/store/modules/Login'
-import {useI18n} from 'vue-i18n'
-const {t} = useI18n();
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
 const router = useRouter()
 const systemStore = useSystemStore()
 const LoginSet = FormLoginUser()
@@ -92,15 +94,15 @@ const handleSubmit = async () => {
   await updateRouteByMenu(router, systemStore)
 
   const settingLayout = localStorage.getItem('LayoutDisposition') || false
-  if(!settingLayout) {
+  if (!settingLayout) {
     const item = {
-      crumbs:false,
-      BreadcrumbIcon:false,
-      SidebarLogo:false,
-      HeadNavigationBar:false,
-      laoutStyle:1
+      crumbs: false,
+      BreadcrumbIcon: false,
+      SidebarLogo: false,
+      HeadNavigationBar: false,
+      laoutStyle: 0
     }
-    localStorage.setItem('LayoutDisposition',JSON.stringify(item))
+    localStorage.setItem('LayoutDisposition', item)
   }
 
   router.push({
@@ -120,14 +122,27 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .login-form-wrapper {
-  margin: 0 1rem;
+  position: absolute;
+  top: 50%;
+  left: 80%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  width: 550px;
+  height: 500px;
+  border-radius: 16px;
+}
+
+.item {
+  width: 80%;
 }
 
 .login-form {
   margin-top: 32px;
 
   &-wrapper {
-    width: 320px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &-title {
@@ -153,4 +168,4 @@ onMounted(() => {
     color: @text_color_3 !important;
   }
 }
-</style>
+</style>