eta_forum_front/src/views/Login.vue

<script setup>
import { useTemplateRef } from "vue"


const telCodeOpts = ref([
  {
    label: '+86',
    value: '86'
  }
])

const keepLogin=ref(false)
const FORM_RULES = { 
  telVerifyCode: [{ required: true, message: '请输入验证码' }],
  tel:[{ required: true, message: '请输入手机号' }],
  imgVerifyCode:[{ required: true, message: '请输入图像验证码' }],
};
const formData = reactive({
  tel: '',
  telCode: '',
  telVerifyCode: '',
  imgVerifyCode: '',
})

const formIns=useTemplateRef('formIns')
async function onSubmit(){
	const validate=await formIns.value.validate()
	if(validate!==true) return
}


</script>

<template>
  <div class="login-page">
    <img class="bg-img" src="@/assets/imgs/login_bg.png" alt="" />
    <div class="flex main-wrap">
      <img class="logo-icon" src="@/assets/imgs/logo_login.png" alt="" />
      <div class="login-form-wrap">
        <div class="en-login-label">Login</div>
        <div class="login-label">登录</div>
        <div class="login-tips">sign in to continue</div>
        <t-form
          ref="formIns"
					:rules="FORM_RULES"
          :data="formData"
          :colon="true"
          :label-width="0"
          @submit="onSubmit"
        >
          <t-form-item name="tel">
            <div class="flex form-item-box">
              <t-select v-model="formData.telCode" style="width:80px">
                <t-option
                  v-for="item in telCodeOpts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </t-select>
							<t-input class="tel-input" placeholder="请输入手机号" v-model="formData.tel" style="flex:1"></t-input>
            </div>
          </t-form-item>
					<t-form-item name="telVerifyCode">
            <div class="flex form-item-box">
							<t-input placeholder="请输入验证码" v-model="formData.telVerifyCode" style="flex:1"></t-input>
							<span class="get_telcode_btn">获取验证码</span>
            </div>
          </t-form-item>
					<t-form-item name="imgVerifyCode">
            <div class="flex form-item-box" style="padding-top:6px;padding-bottom:6px;">
							<t-input placeholder="请输入图形验证码" v-model="formData.imgVerifyCode" style="flex:1"></t-input>
							<img class="img-code" src="" alt="">
            </div>
          </t-form-item>
					<div>
						<t-checkbox v-model="keepLogin">60天内保持登录</t-checkbox>
					</div>
					<t-button class="submit-btn" block shape="round" type="submit">登录</t-button>

        </t-form>
				<p class="bottom-tips">共享社区资源，共创市场领先</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #edf2f7;
  .bg-img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
  }
  .main-wrap {
    height: 100%;
    padding-top: 67px;
    padding-left: 39px;
    position: relative;
    z-index: 10;
    flex-direction: column;
    .logo-icon {
      width: 374px;
    }
    .login-form-wrap {
			margin-left: 160px;
      width: 400px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .en-login-label {
        font-size: 34px;
        line-height: 47px;
      }
      .login-label {
        font-size: 54px;
        line-height: 75px;
      }
      .login-tips {
        color: #999999;
        margin-bottom: 28px;
      }
      .form-item-box {
        border: 1px solid #3d5eff;
        padding: 10px 40px 10px 16px;
        border-radius: 40px;
        width: 100%;
				background-color: #fff;
				align-items: center;
				:deep(.t-input){
					border: none;
				}
				:deep(.t-input--focused){
					box-shadow: none;
				}
				.tel-input{
					border-left: 1px solid var(--border-color);
				}
				.get_telcode_btn{
					color: var(--td-brand-color);
					cursor: pointer;
					display: block;
				}
				.img-code{
					width: 80px;
					height: 40px;
				}
      }
			.submit-btn{
				background: linear-gradient(90deg, #7C54FF 0%, #4B64F7 100%);
				height: 40px;
				margin-top: 40px;
				border: none;
			}
			.bottom-tips{
				text-align: center;
				color: #999999;
				font-size: 20px;
				margin-top: 60px;
			}
    }
  }
}
</style>