记录页面——一个蛮好看的登录页（uni-app）

效果图

<template><view class="container"><view class="flex-col login-box"><view class="flex-col" style="width: 80%"><view class="flex-col"><text class="welcome-text-font">嗨～</text><text class="welcome-text-font welcome-text">现在加入我们吧！</text></view><text class="welcome-title text_99">欢迎来到XXXX，</text><text class="welcome-title text_102">有很多人在期盼你的到来呢</text><uni-forms :modelValue="formData" ref="form" :rules="rules"><uni-forms-item label="" name="username"><view class="password-box flex-row"><view class="password-input items-center flex-row"><view class="password-font"><inputtype="text"v-model="formData.username"placeholder="请输入账号"/></view></view></view></uni-forms-item><uni-forms-item label="" name="password"><view class="password-box flex-row"><viewclass="password-input items-center flex-row justify-between"><view class="password-font"><inputclass="password-input2":type="isShowPassword ? 'text' : 'password'"v-model="formData.password"placeholder="请输入密码"/></view><imageclass="shrink-0 image_53"src="../../assets/icon/see.png"@click="checkPassword"/><imagev-if="false"class="shrink-0 image_53"src="../../assets/icon/no_see.png"@click="checkPassword"/></view></view></uni-forms-item><uni-forms-item label="" name="authCode"><view class="password-box flex-row"><view class="password-input items-center flex-row"><view class="password-font"><inputtype="text"v-model="formData.authCode"placeholder="密钥（可选）"/></view></view></view></uni-forms-item></uni-forms></view><view class="button-box flex-row justify-center"><buttonclass="login-button flex-row justify-center items-center"@click="submitForm":loading="loading"type="primary">登录→</button></view></view><!-- <view class="content"><uni-forms :modelValue="formData" ref="form" :rules="rules"><uni-forms-item label="账号" name="username"><inputtype="text"v-model="formData.username"placeholder="请输入账号"/></uni-forms-item><uni-forms-item label="密码" name="password"><inputtype="password"v-model="formData.password"placeholder="请输入密码"/></uni-forms-item></uni-forms><button @click="submitForm" :loading="loading" type="primary">登录</button></view> --></view>
</template><script>
import * as dd from "dingtalk-jsapi";
import { exemption, longinByUsername } from "@/api/login";export default {data() {return {formData: {username: "",password: "",authCode: "",},loading: false,rules: {username: {rules: [{required: true,errorMessage: "请输入账号",},],},password: {rules: [{required: true,errorMessage: "请输入密码",},],},},isShowPassword: false // 是否显示密码};},onReady() {// 需要在onReady中设置规则this.$refs.form.setRules(this.rules);returnif (dd.env.platform !== "notInDingTalk") {dd.ready(() => {dd.runtime.permission.requestAuthCode({corpId: "corpId",onSuccess: (info) => {exemption(info.code).then((res) => {console.log("登录结果", res.data.token);this.getUserInfo(res.data.token);}).catch((cth) => {console.log("不管如和的登录结果", cth);});},onFail: (err) => {alert("fail");},});});}},methods: {submitForm(form) {this.$refs.form.validate().then((res) => {console.log(res);longinByUsername(res).then((resp) => {// console.log(resp);if (resp.code === 200) {this.getUserInfo(resp.data.token);}});}).catch((err) => {console.log('表单错误信息：', err);});},getUserInfo(token) {//将token存到本地uni.setStorageSync("token", token);//获取用户信息this.$request({url: "/auth/currentUserInfo",method: "POST",data: token,}).then((res) => {// console.log(res);const id = res.data.user.id;uni.setStorageSync("id", id);});uni.showToast({icon: "success",title: "登陆成功",});setTimeout(function () {uni.navigateTo({url: "/pages/index/index",});}, 1000);clearTimeout();},checkPassword() {this.isShowPassword = !this.isShowPassword}},
};
</script><style scoped lang="scss">
.container {font-size: 14px;width: 100vw;height: 100vh;background-color: #ebecf3;
}
::v-deep .uni-forms-item__content[data-v-61dfc0d0] {display: flex;align-items: center;
}.login-box {width: 100%;overflow: hidden;align-items: center;.password-box {width: 100%;padding-top: 15px;.password-input {width: 100%;border-radius: 50px;background-color: #ecf2ff;height: 50px;padding: 0 20px;.password-font {font-size: 14px;line-height: 13px;color: rgba(52, 57, 101, 0.5);.password-input2 {background-color: rgba(52, 57, 101, 0);color: rgba(52, 57, 101, 0.5);font-size: 14px;border: none;          /* 去掉边框 */outline: none;        /* 去掉聚焦时的轮廓 */}}}}.button-box {width: 100%;.login-button {background-color: #4963f4;width: 80%;height: 50px;border-radius: 50px;margin-top: 120px;}}
}
.welcome-text-font {font-size: 30px;font-family: NotoSansSC;line-height: 37px;font-weight: 700;color: rgb(52, 57, 101);
}
.welcome-text {margin-left: 18px;
}
.welcome-title {font-size: 12px;font-family: NotoSansSC;line-height: 14px;color: rgb(52, 57, 101);opacity: 0.5;
}
.text_102 {margin-left: 8px;
}
.text_99 {margin-top: 16px;
}
.image_53 {opacity: 0.5;width: 20px;height: 20px;
}
</style>