明树Git Lab

Skip to content

J
jt_front
Commit 99ce2cfd authored by zhanghan's avatar zhanghan
Browse files
Options

登录页样式修改

parent e5425827
Pipeline #108473 passed with stage
    in 24 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 158 additions and 144 deletions
    src/assets/images/login.png
    View replaced file @ e5425827 View file @ 99ce2cfd
    This image diff could not be displayed because it is too large. You can view the blob instead.
    src/views/login/index.vue
    View file @ 99ce2cfd
    <template> <template>
    <div class="login-container"> <div class="login-container">
    <div class="login-header">葛洲坝集团交通投资有限公司投资决策分析系统</div>
    <div class="login-form-wrapper"> <div class="login-form-wrapper">
    <div class="company-logo"></div> <div class="left">
    <el-form <div class="login-title">葛洲坝集团交通投资有限公司</div>
    ref="loginFormRef" <div class="login-title">投资决策分析系统</div>
    :model="loginForm" <div class="logo-wrapper">
    :rules="loginRules" <img
    label-width="70px" src="@/assets/images/logo_right.png"
    class="login-form" alt="中国能建"
    labelPosition="top" class="logo"
    @keydown.enter="handleLogin" />
    > <img
    <el-form-item label="手机号" prop="mobile"> src="@/assets/images/logo_left.png"
    <el-input alt="中国能建"
    :prefix-icon="User" class="logo"
    v-model="loginForm.mobile" />
    placeholder="请输入手机号" </div>
    prefix-icon="el-icon-user" </div>
    ></el-input>
    </el-form-item> <!-- 右侧表单区域（已修改为截图样式） -->
    <el-form-item label="密码" prop="password"> <div class="login-form">
    <el-input <div class="form-head">
    prefix-icon="Lock" <h1 class="greeting">您好！</h1>
    v-model="loginForm.password" <p class="sub-title">欢迎登录投资决策分析系统</p>
    type="password" </div>
    placeholder="请输入密码" <el-form
    show-password ref="loginFormRef"
    ></el-input> :model="loginForm"
    </el-form-item> :rules="loginRules"
    <el-form-item> label-width="0px"
    <el-button @keydown.enter="handleLogin"
    type="primary" >
    class="login-btn" <el-form-item prop="account">
    :loading="loading" <el-input
    @click="handleLogin" :prefix-icon="User"
    > v-model="loginForm.account"
    登录 placeholder="账号"
    </el-button> size="large"
    </el-form-item> ></el-input>
    </el-form> </el-form-item>
    <el-form-item prop="password">
    <el-input
    :prefix-icon="Lock"
    v-model="loginForm.password"
    type="password"
    placeholder="请输入密码"
    show-password
    size="large"
    ></el-input>
    </el-form-item>
    <el-form-item>
    <el-button
    type="primary"
    class="login-btn"
    :loading="loading"
    @click="handleLogin"
    size="large"
    >
    登录
    </el-button>
    </el-form-item>
    </el-form>
    </div>
    </div> </div>
    </div> </div>
    </template> </template>
    ...@@ -57,15 +79,15 @@ const router = useRouter(); ...@@ -57,15 +79,15 @@ const router = useRouter();
    const loginFormRef = ref(); const loginFormRef = ref();
    const loading = ref(false); const loading = ref(false);
    // 登录表单数据 // 登录表单数据（将mobile改为account）
    const loginForm = ref({ const loginForm = ref({
    mobile: "", account: "",
    password: "", password: "",
    }); });
    // 表单验证规则 // 表单验证规则
    const loginRules = ref({ const loginRules = ref({
    mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }], account: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }], password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    }); });
    ...@@ -77,7 +99,7 @@ const handleLogin = async () => { ...@@ -77,7 +99,7 @@ const handleLogin = async () => {
    url: "/api/user/login", url: "/api/user/login",
    data: { data: {
    encryptLogStr: CryptoJS.AES.encrypt( encryptLogStr: CryptoJS.AES.encrypt(
    `${loginForm.value.mobile},${loginForm.value.password}`, `${loginForm.value.account},${loginForm.value.password}`,
    "GFG5w5AP0Ja2rNaa", "GFG5w5AP0Ja2rNaa",
    ).toString(), ).toString(),
    }, },
    ...@@ -99,130 +121,122 @@ const handleLogin = async () => { ...@@ -99,130 +121,122 @@ const handleLogin = async () => {
    background-size: cover; background-size: cover;
    background-position: center; background-position: center;
    background-repeat: no-repeat; background-repeat: no-repeat;
    padding-top: 15px;
    }
    .login-header {
    color: #fff;
    font-size: 42px;
    font-weight: bold;
    padding-left: 20px;
    margin: 0 20px;
    border-radius: 5px;
    display: flex; display: flex;
    justify-content: left;
    align-items: center; align-items: center;
    height: 60px; justify-content: center;
    line-height: 60px;
    background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.3)
    );
    } }
    .login-form-wrapper { .login-form-wrapper {
    background-color: rgba(0, 0, 0, 0.8); display: flex;
    position: absolute; height: 596px;
    top: 50%; width: 1200px;
    right: 1%; margin: 0 auto;
    transform: translateY(-50%);
    padding: 15px;
    box-sizing: border-box; box-sizing: border-box;
    width: 375px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    height: 350px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 8px; border-radius: 8px;
    :deep(.el-form-item) { overflow: hidden;
    margin-bottom: 16px;
    .el-form-item__content { // 左侧区域样式
    .el-input { .left {
    height: 48px; width: 600px;
    border-radius: 4px; background: rgba(255, 255, 255, 0.1);
    .el-input__wrapper { backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.9); background-size: cover;
    } background-position: center;
    .el-input__inner { display: flex;
    color: #333; flex-direction: column;
    } padding: 160px 40px 0;
    }
    .el-form-item__label { .login-title {
    color: #fff; font-size: 36px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    margin: 8px 0;
    }
    .logo-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    .logo {
    height: 40px;
    } }
    } }
    } }
    :deep(.el-form-item__label) {
    color: #fff; // 右侧表单样式
    .login-form {
    background-color: #fff;
    width: 600px;
    padding: 104px 140px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .form-head {
    margin-bottom: 40px;
    .greeting {
    font-size: 48px;
    font-weight: 500;
    color: #1d2129;
    margin: 0 0 8px 0;
    line-height: 1.2;
    }
    .sub-title {
    font-size: 18px;
    color: #86909c;
    margin: 0;
    line-height: 1.4;
    }
    }
    .login-btn {
    width: 100%;
    height: 36px;
    border-radius: 4px;
    background-color: #1890ff;
    margin-top: 16px;
    font-size: 18px;
    }
    } }
    } }
    .company-logo { // 表单通用样式
    width: 100%; :deep(.el-form-item) {
    height: 45px; margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    background-image: url(/src/assets/images/logo.png);
    background-size: 100% 80%;
    background-position: center;
    background-repeat: no-repeat;
    }
    .login-form { .el-input__wrapper {
    .login-btn { background-color: #f5f7fa;
    width: 100%; box-shadow: none;
    height: 30px; padding: 1px 16px;
    border-radius: 4px; border-radius: 4px;
    background-color: #1890ff;
    margin-top: 18px;
    }
    .forgot-password {
    color: #fff;
    float: right;
    margin-top: 10px;
    } }
    }
    .captcha-image { .el-input__inner {
    position: absolute; font-size: 16px;
    right: 0; color: #1d2129;
    top: 0;
    cursor: pointer;
    img {
    width: 120px;
    height: 40px;
    border-radius: 4px;
    } }
    }
    :deep(.el-form-item__content) { .el-input__prefix-inner {
    position: relative; color: #86909c;
    &.el-form-item__content--with-captcha { font-size: 18px;
    padding-right: 130px;
    } }
    } }
    :deep(.el-input__inner) { :deep(.el-button--primary) {
    color: #333; background-color: #1890ff;
    } border-color: #1890ff;
    :deep(.el-input__prefix-inner) { &:hover,
    color: #909399; &:focus {
    } background-color: #40a9ff;
    .login-form { border-color: #40a9ff;
    :deep(.el-form-item) {
    .el-form-item__content {
    .el-input {
    height: 30px;
    }
    }
    }
    :deep(.el-form-item--label-top) {
    .el-form-item__label {
    line-height: 15px;
    }
    } }
    } }
    </style> </style>
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment