最新代码

kyy

3 天以前 ab826d12b52265bc4f25044d43a042df2104f972

 pages/BasePages/login.vue

@@ -1,16 +1,27 @@
<template>
   <uni-base-page>
      <view slot="page"
         style="background-color:#e6e6e6;margin-top: 5%;margin-left:15px;margin-right:15px;padding: 20px;border-radius: 10px;">
         <view class="image-container">
            <image src="../../static/img/bj/bg2.png" style=" max-width: 99%;"></image>
         </view>
         <uni-input-row type="text" title="账号" v-model="account" :focus="accountFocus"
            @resetFocus="e=>{accountFocus=e;}" clearable placeholder="请输入账号"></uni-input-row>
         <uni-input-row type="password" title="密码" v-model="password" :focus="passwordFocus"
            @resetFocus="e=>{passwordFocus=e}" displayable @confirm="bindLogin" placeholder="请输入密码"></uni-input-row>
         <view class="btn-row">
            <button type="primary" class="primary" @tap="bindLogin">登录</button>
      <view slot="page" class="login-container">
         <view class="login-card">
            <view class="logo-container">
               <image src="../../static/img/bj/bg2.png" class="logo-image" mode="aspectFit"></image>
            </view>
            <view class="form-title">系统登录</view>
				
            <uni-input-row type="text" title="账号" v-model="account" :focus="accountFocus"
               @resetFocus="e=>{accountFocus=e;}" clearable placeholder="请输入账号" 
               class="input-item"></uni-input-row>
				
            <uni-input-row type="password" title="密码" v-model="password" :focus="passwordFocus"
               @resetFocus="e=>{passwordFocus=e}" displayable @confirm="bindLogin" 
               placeholder="请输入密码" class="input-item"></uni-input-row>
				
            <view class="btn-row">
               <button type="primary" class="login-button" @tap="bindLogin">
                  <text class="button-text">登 录</text>
               </button>
            </view>
				
            <view class="footer-text">© 2025 广深科技版权所有</view>
         </view>
      </view>
   </uni-base-page>
@@ -31,9 +42,8 @@
            userName: '',
            password: '',
            factoryArray: [],
            //selectFactory: { value: this.$loginInfo.factoryKey||'',text:this.$loginInfo.factoryName||'',index: this.$loginInfo.factoryIndex}, //选择的账套信息
            selectFactory: {},
            selectLanguage: {}, //选择的语言
            selectLanguage: {},
         };
      },
      async onReady() {
@@ -117,41 +127,158 @@
</script>

<style>
   .action-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
   }
/* 基础样式重置 */
page {
   background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
   min-height: 100vh;
   width: 100%;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow-x: hidden;
}

   .action-row navigator {
      color: #007aff;
      padding: 0 10px;
   }
/* 自适应容器 */
.login-container {
   width: 100%;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   box-sizing: border-box;
}

   .btn-row {
      /* margin-top: 20px; */
      padding: 10px;
   }
/* 登录卡片 - 自适应设计 */
.login-card {
   background-color: #fff;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   padding: clamp(25px, 5vw, 40px);
   width: 100%;
   max-width: clamp(300px, 80vw, 450px);
   transition: all 0.3s ease;
}

   button.primary {
      background-color: #0faeff;
   }

   .img-container {
      width: 100%;
      height: auto;
      max-width: 100%;
   }

   .img-container image {
      max-width: 100%;
      height: auto;
      display: block;
/* 设备方向优化 */
@media (orientation: landscape) and (max-height: 500px) {
   .login-container {
      align-items: flex-start;
      padding-top: 30px;
   }
   
   @media screen and (min-width: 768px) {
     .img-container {
       max-width: 50%; /* 根据实际情况设置适当的宽度 */
     }
   .login-card {
      max-width: 80%;
   }
</style>
}

/* 头部Logo */
.logo-container {
   display: flex;
   justify-content: center;
   margin-bottom: clamp(15px, 3vw, 25px);
}

.logo-image {
   width: clamp(80px, 20vw, 140px);
   height: clamp(80px, 20vw, 140px);
   border-radius: 50%;
   transition: all 0.3s ease;
}

.logo-image:hover {
   transform: scale(1.05);
}

/* 标题样式 */
.form-title {
   text-align: center;
   font-size: clamp(1.5rem, 4vw, 2rem);
   font-weight: 600;
   color: #333;
   margin-bottom: clamp(20px, 5vw, 35px);
   position: relative;
}

.form-title::after {
   content: '';
   display: block;
   width: clamp(40px, 10vw, 60px);
   height: 3px;
   background-color: #0faeff;
   margin: 10px auto 0;
   border-radius: 3px;
}

/* 输入框样式 */
.input-item {
   margin-bottom: clamp(15px, 3vw, 20px);
}

uni-input-row {
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
}

uni-input-row:hover {
   box-shadow: 0 4px 15px rgba(15, 174, 255, 0.15);
}

uni-input-row .uni-input-group {
   border: none;
}

uni-input-row .uni-input-title {
   color: #555;
   font-weight: 500;
}

uni-input-row .uni-input {
   padding-right: 15px;
}

/* 按钮样式 */
.btn-row {
   margin-top: clamp(20px, 4vw, 30px);
}

.login-button {
   background-color: #0faeff;
   border-radius: 8px;
   height: clamp(40px, 10vw, 50px);
   line-height: clamp(40px, 10vw, 50px);
   font-size: clamp(1rem, 3vw, 1.2rem);
   font-weight: 500;
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(15, 174, 255, 0.3);
}

.login-button:active {
   transform: translateY(2px);
   box-shadow: 0 2px 8px rgba(15, 174, 255, 0.2);
}

.button-text {
   color: #fff;
}

/* 底部版权信息 */
.footer-text {
   text-align: center;
   color: #999;
   font-size: clamp(0.8rem, 2vw, 1rem);
   margin-top: clamp(15px, 3vw, 25px);
}

/* 动画效果 */
@keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}

.login-card {
   animation: fadeIn 0.5s ease forwards;
}
</style>