登录

src/views/Login/Login.vue

@@ -3,30 +3,11 @@
     :class="prefixCls"
     class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
   >
-    <div class="relative mx-auto h-full flex">
+  
-      <div
+  <div class="box">
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+    <img src="../../assets/imgs/logo_huatao.png" alt="" class="logo"/>
-      >
+ 
-        <!-- 左上角的 logo + 系统标题 -->
+    <div class="absolute w-[33%] mx-auto h-full flex right-[7%]">
-        <div class="relative flex items-center text-white">
-          <img alt="" class="mr-10px h-24px w-48px" src="@/assets/imgs/logo.png" />
-          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
-        </div>
-        <!-- 左边的背景图 + 欢迎语 -->
-        <div class="h-[calc(100%-60px)] flex items-center justify-center">
-          <TransitionGroup
-            appear
-            enter-active-class="animate__animated animate__bounceInLeft"
-            tag="div"
-          >
-            <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
-            <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
-            <div key="3" class="mt-5 text-14px font-normal text-white">
-              {{ t('login.message') }}
-            </div>
-          </TransitionGroup>
-        </div>
-      </div>
       <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
         <!-- 右上角的主题、语言选择 -->
         <div
@@ -60,6 +41,11 @@
         </Transition>
       </div>
     </div>
+    <div class="footer">
+      <div>Copyright ©2012-2023闻荫科技吉ICP备100114504646号-6 ICP证书:吉B2-2018005497977吉林工商吉公网安备3101150204979086755号</div>
+      <div>出版物经营许可证(吉)批字第Y8813号广播电视节目制作经营许可正(吉)字第03283号网络文化经营许可证吉网文{2012)1460-055号</div>
+    </div>
+  </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -101,4 +87,25 @@ $prefix-cls: #{$namespace}-login;
     }
   }
 }
+.box{
+  background: url(../../assets/imgs/bg_login.png) no-repeat top left;
+  background-size: 100% 100%;
+  width: 100%;
+  height:100%;
+}
+.logo{
+  position: absolute;
+  left: 4vw;
+  top: 5vh;
+  width: 30%;
+}
+.footer{
+  position: absolute;
+  bottom:4vh;
+  text-align: center;
+  padding: 0px 30px;
+  width: calc(100% - 60px);
+  color: #989898;
+  font-size: 14px;
+}
 </style>

src/views/Login/components/LoginForm.vue

@@ -4,29 +4,30 @@
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <LoginFormTitle style="width: 100%" />
+          <!-- <LoginFormTitle style="width: 100%" /> -->
+          <div class="font-size-18px">您好，欢迎使用<span class="color-[rgb(74,154,236)]">长春华涛SPC系统</span></div>
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
+        <el-form-item v-if="loginData.tenantEnable === 'true'"  label="租户名称">
           <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
-            :prefix-icon="iconHouse" link type="primary" />
+             link type="primary" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-        <el-form-item prop="username">
+        <el-form-item  label="用户名">
           <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
             :prefix-icon="iconAvatar" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-        <el-form-item prop="password">
+        <el-form-item label="密码">
           <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
             :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-        <el-form-item prop="code">
+        <el-form-item prop="code"  label="验证码">
           <div class="flex w-[100%]">
             <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
               style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
@@ -275,4 +276,12 @@ onMounted(() => {
     cursor: pointer;
   }
 }
+.login-form{
+  background: white;
+  width: 100%;
+  box-shadow: 0px 0px 20px rgba(0,0,0,0.1)
+}
+::v-deep.el-form-item--large{
+  // margin-bottom: 15px;
+}
 </style>