酷炫的登陆界面是应用的首要门面。而在我们的开发小程序过程中，由于显示条件的限制我们几乎都是自己一个人既要保证接口的高可用，还要尽力去美化小程序的样式。所以这个时候，寻找到靠谱且贴合需求的样式模板，这就显得尤其重要。
效果图：
完整源码：
<template> <view class="container"> <view class="bg bg-color-base margin-b20"></view>
<view class="tab vs-row vs-align-center"> <image class="tab-bg" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/banner-icon.png?sign=d63f6b91aed3733b261cc0127d2cf702&t=1604049324" mode=""></image>
<view class="vs-row vs-align-center"> <view class="vs-column vs-align-center margin-r40" @click="cur = 0"> <text class="font-50 margin-b20" :class="[cur ? 'color-black-3': 'color-base']">登录</text> <view class="line bg-color-base" v-if="!cur"></view> </view> <view class="vs-column vs-align-center" @click="cur = 1"> <text class="font-46 margin-b20" :class="[cur ? 'color-base': 'color-black-3']">注册</text> <view class="line bg-color-base" v-if="cur"></view> </view> </view> </view>
<view class="login margin-b80" v-if="!cur"> <view class="input vs-row vs-align-center margin-b40"> <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/account.png?sign=599d8600e2d55f39ebd1cbc159a04729&t=1604049340" mode=""></image> <input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱" placeholder-class="input-placeholder" /> </view> <view class="input vs-row vs-align-center margin-b40"> <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/password.png?sign=9f8fdd0ae0a1ae530a9226de8917ebbd&t=1604049354" mode=""></image> <input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码" placeholder-class="input-placeholder" /> </view> </view>
<view class="register margin-b80" v-if="cur"> <view class="input vs-row vs-align-center margin-b40"> <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/account.png?sign=599d8600e2d55f39ebd1cbc159a04729&t=1604049340" mode=""></image> <input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱" placeholder-class="input-placeholder" /> </view> <view class="input vs-row vs-align-center margin-b40"> <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/password.png?sign=9f8fdd0ae0a1ae530a9226de8917ebbd&t=1604049354" mode=""></image> <input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码" placeholder-class="input-placeholder" /> </view> </view>
<view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b20"> <text class="color-white font-34">立即{{ cur ? '注册': '登录' }}</text> </view>
<view class="vs-row vs-align-center vs-space-center margin-b100"> <text class="color-base font-28">忘记密码？</text> </view>
<view class="other"> <view class="vs-row vs-align-center margin-b40"> <view class="separator vs-flex-item"></view> <text class="color-black-3 font-28">更多登录方式</text> <view class="separator vs-flex-item"></view> </view>
<view class="other-items vs-row vs-align-center vs-space-around"> <image class="other-icon" src="/static/other/wx.png" mode=""></image> <image class="other-icon" src="/static/other/wb.png" mode=""></image> <image class="other-icon" src="/static/other/zfb.png" mode=""></image> </view> </view> <soure :url="url"></soure> </view></template>
<script> export default { data() { return { url: 'https://ext.dcloud.net.cn/plugin?id=1931', cur: 0 } } }</script>
<style lang="scss"> .container { position: relative; }
.bg { position: relative; width: 750rpx; height: 400rpx; }
.tab { position: absolute; top: 250rpx; left: 20rpx; right: 20rpx; height: 150rpx; padding: 0 50rpx; background-color: #fff; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;
&-bg { position: absolute; top: -200rpx; right: -50rpx; width: 440rpx; height: 285rpx; } }
.line { width: 25rpx; height: 7rpx; }
.login, .register { padding: 0 60rpx; }
.input { width: 580rpx; height: 90rpx; padding: 0 30rpx; background-color: rgba(80, 100, 235, 0.1); border-radius: 100rpx;
&-icon { width: 30rpx; height: 38rpx; }
&-placeholder { color: #5064eb; } }
.button { width: 630rpx; height: 90rpx; margin-left: 60rpx; border-radius: 100rpx; }
.separator { height: 2rpx; margin: 0 30rpx; background-color: #f5f5f5; }
.other { &-items { padding: 0 200rpx; }
&-icon { width: 50rpx; height: 50rpx; } }
// 下边距 .margin-b5 { margin-bottom: 5rpx; }
.margin-b10 { margin-bottom: 10rpx; }
.margin-b15 { margin-bottom: 15rpx; }
.margin-b20 { margin-bottom: 20rpx; }
.margin-b25 { margin-bottom: 25rpx; }
.margin-b30 { margin-bottom: 30rpx; }
.margin-b40 { margin-bottom: 40rpx; }
.margin-b60 { margin-bottom: 60rpx; }
.margin-b80 { margin-bottom: 80rpx; }
.margin-b100 { margin-bottom: 100rpx; }
// 右边距 .margin-r5 { margin-right: 5rpx; }
.margin-r10 { margin-right: 10rpx; }
.margin-r15 { margin-right: 15rpx; }
.margin-r20 { margin-right: 20rpx; }
.margin-r25 { margin-right: 25rpx; }
.margin-r30 { margin-right: 30rpx; }
.margin-r40 { margin-right: 40rpx; }
.margin-r60 { margin-right: 60rpx; }
// 字体大小 .font-18 { font-style: normal; font-size: 18rpx; font-family: Droid Sans Fallback; }
.font-20 { font-style: normal; font-size: 20rpx; font-family: Droid Sans Fallback; }
.font-22 { font-style: normal; font-size: 22rpx; font-family: Droid Sans Fallback; }
.font-24 { font-style: normal; font-size: 24rpx; font-family: Droid Sans Fallback; }
.font-26 { font-style: normal; font-size: 26rpx; font-family: Droid Sans Fallback; }
.font-28 { font-style: normal; font-size: 28rpx; font-family: Droid Sans Fallback; }
.font-30 { font-style: normal; font-size: 30rpx; font-family: Droid Sans Fallback; }
.font-32 { font-style: normal; font-size: 32rpx; font-family: Droid Sans Fallback; }
.font-34 { font-style: normal; font-size: 34rpx; font-family: Droid Sans Fallback; }
.font-36 { font-style: normal; font-size: 36rpx; font-family: Droid Sans Fallback; }
.font-38 { font-style: normal; font-size: 38rpx; font-family: Droid Sans Fallback; }
.font-40 { font-style: normal; font-size: 40rpx; font-family: Droid Sans Fallback; }
.font-46 { font-style: normal; font-size: 46rpx; font-family: Droid Sans Fallback; }
.font-50 { font-style: normal; font-size: 50rpx; font-family: Droid Sans Fallback; }
.font-60 { font-style: normal; font-size: 60rpx; font-family: Droid Sans Fallback; }
.font-80 { font-style: normal; font-size: 80rpx; font-family: Droid Sans Fallback; }
// 字体对齐 .text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
// color相关 .color-white { color: #FFFFFF; }
.color-red { color: #dc0000; }
// 黑色色阶向下 .color-black { color: #000; }
.color-black-3 { color: #333; }
.color-black-6 { color: #666; }
.color-black-9 { color: #999; }
// 字体宽度 .font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: bold; }
// 间隔 .spacing-20 { width: 750rpx; height: 20rpx; background-color: #f8f8f8; }
// 圆角 .radius-10 { border-radius: 10rpx; }
.radius-20 { border-radius: 20rpx; }
.radius-30 { border-radius: 30rpx; }
.radius-circle { border-radius: 50%; }
.radius-height { border-radius: 10000px; }
// flex相关 .vs-flex-item { flex: 1; }
.vs-space-between { justify-content: space-between; }
.vs-space-around { justify-content: space-around; }
.vs-space-center { justify-content: center; }
.vs-space-end { justify-content: flex-end; }
.vs-row { flex-direction: row; }
.vs-column { flex-direction: column; }
.vs-align-end { align-items: flex-end; }
.vs-align-center { display: flex; align-items: center; }
.vs-align-start { align-items: flex-start; }
.vs-item-hover { background-color: rgba(0, 0, 0, 0.05); }
.vs-btn-hover { opacity: 0.8; }
.color-base { color: #5064eb; }
.bg-color-base { background-color: #5064eb; }</style>效果图：
完整源码：
1.登录模块：
<template> <view class="content"> <view class="row-input"> <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/b4dc6deb-b506-4f79-820f-8254fb1ed4bf.png"></image> <input placeholder="账号或邮箱" maxlength="18" /> </view> <view class="row-input"> <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image> <input placeholder="请输入您的密码" maxlength="18" /> </view> <view class="login-btn"> 确认登录 </view> <view class="function-link"> <text @click="register">新用户注册</text> <text @click="forget">忘记密码</text> </view> </view></template>
<script> export default { data() { return {} }, onLoad() {
}, methods: { // 注册 register() { uni.navigateTo({ url: '/pages/login1/register' }) },
// 忘记密码 forget() { uni.navigateTo({ url: '/pages/login1/forget' }) } } }</script>
<style lang="scss"> .content { padding: 100rpx 60rpx; display: flex; flex-direction: column; }
.row-input { display: flex; justify-content: flex-start; align-items: center; padding-top: 30rpx; height: 100rpx; border-bottom: 1rpx solid #818181;
image { width: 45rpx; height: 45rpx; }
input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } }
.login-btn { display: flex; justify-content: center; align-items: center; border-radius: 10rpx; margin-top: 80rpx; height: 80rpx; font-size: 30rpx; background-color: #fd661f; color: #FFFFFF; }
.function-link { margin: 0 20rpx; height: 70rpx; display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; color: #fd661f; }</style>2.注册模块：
<template><view class="content"><view class="row-input"><image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/87427b5e-c2d8-4534-a4a0-e12b48c88440.png"></image><input placeholder="注册邮箱" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/b4dc6deb-b506-4f79-820f-8254fb1ed4bf.png"></image><input placeholder="用户名" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image><input placeholder="设置密码" maxlength="18" /></view><view class="login-btn"> 立即注册</view></view></template><script>export default { data() {return {} }, onLoad() { },methods: { } }</script><style lang="scss"> .content { padding: 100rpx 60rpx; display: flex; flex-direction: column; } .row-input { display: flex; justify-content: flex-start; align-items: center; padding-top: 30rpx; height: 100rpx; border-bottom: 1rpx solid #818181; image { width: 45rpx; height: 45rpx; } input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } } .login-btn { display: flex; justify-content: center; align-items: center; border-radius: 10rpx; margin-top: 80rpx; height: 80rpx; font-size: 30rpx; background-color: #fd661f; color: #FFFFFF; }</style>3.忘记密码模块：
<template><view class="content"><view class="row-input"><image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image><input placeholder="旧密码" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image><input placeholder="新密码" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image><input placeholder="再次新密码" maxlength="18" /></view><view class="login-btn"> 立即修改</view></view></template><script>export default { data() {return {} }, onLoad() { },methods: { } }</script><style lang="scss"> .content { padding: 100rpx 60rpx; display: flex; flex-direction: column; } .row-input { display: flex; justify-content: flex-start; align-items: center; padding-top: 30rpx; height: 100rpx; border-bottom: 1rpx solid #818181; image { width: 45rpx; height: 45rpx; } input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } } .login-btn { display: flex; justify-content: center; align-items: center; border-radius: 10rpx; margin-top: 80rpx; height: 80rpx; font-size: 30rpx; background-color: #fd661f; color: #FFFFFF; }</style>效果图：
完整源码：
<template> <view class="content"> <view class="logo"> LOGO </view> <view class="form-box"> <view class="tab-menu"> <view class="tab-name" @click="tabChange(0)"> <text :class="tabIndex==0?'tab-txt':''">登录</text> <text v-show="tabIndex==0" class="tab-active"></text> </view> <view class="tab-name" @click="tabChange(1)"> <text :class="tabIndex==1?'tab-txt':''">注册</text> <text v-show="tabIndex==1" class="tab-active"></text> </view> </view> <view v-show="tabIndex==0"> <view class="row-input"> <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/ca9b79b9-844e-4d88-8738-19a1b6fdf83a.png"></image> <input placeholder="输入账号/手机号" maxlength="11" /> </view> <view class="row-input"> <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/6b93574b-73ce-4d3e-8353-a65095e9ba87.png"></image> <input placeholder="输入密码" maxlength="18" /> </view> <view class="menu-link"> <text>忘记密码?</text> </view> <view class="login-btn"> 登录 </view> </view> <view v-show="tabIndex==1"> <view class="row-input-code"> <view class="input-box"> <image class="img" mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/ca9b79b9-844e-4d88-8738-19a1b6fdf83a.png"></image> <input placeholder="输入手机号" maxlength="11" type="number" /> </view> <view class="code-box" @click="getCode"> 获取验证码 </view> </view> <view class="row-input"> <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/8e1c961a-cf6d-4190-bedb-bdf3cdc8b66d.png"></image> <input placeholder="输入验证码" maxlength="6" type="number" /> </view> <view class="row-input"> <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/6b93574b-73ce-4d3e-8353-a65095e9ba87.png"></image> <input placeholder="输入6位密码" maxlength="6" /> </view> <view class="login-btn register"> 注册 </view> <view class="agree-txt">注册即表示您同意<text>《xx用户协议》</text></view> </view> </view> </view></template>
<script> export default { data() { return { tabIndex: 0 //登录注册下标 } }, methods: { // tab切换 tabChange(id) { this.tabIndex = id }, // 获取验证码 getCode() { uni.showToast({ title: "获取验证码" }) } } }</script>
<style lang="scss"> page { background-color: #5de97f; }
.logo { height: 25vh; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 120rpx; letter-spacing: 5rpx; font-weight: bold; }
.form-box { padding: 0 50rpx; margin: 0 70rpx; height: 750rpx; background-color: #FFFFFF; border-radius: 20rpx;
.tab-menu { padding-top: 50rpx; display: flex; justify-content: flex-start; align-items: center; height: 100rpx;
.tab-name { height: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 150rpx; font-size: 40rpx; font-weight: bold; color: #afafaf; }
.tab-txt { color: #5b5b5b; }
.tab-active { margin-top: 10rpx; width: 100rpx; height: 13rpx; background-color: #6bb3fe; border-radius: 15rpx; } }
.row-input { margin: 60rpx 0 0 0; padding: 0 20rpx; display: flex; justify-content: flex-start; align-items: center; height: 80rpx; border: 5rpx solid #bbf7c8; border-radius: 8rpx;
image { width: 30rpx; height: 30rpx; }
input { padding-left: 20rpx; font-size: 28rpx; width: 400rpx; } }
.row-input-code { margin-top: 20rpx; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 80rpx; font-size: 28rpx;
.input-box { padding: 0 20rpx; width: 60%; display: flex; justify-content: flex-start; align-items: center; height: 100%; border: 5rpx solid #bbf7c8; border-top-left-radius: 8rpx; border-bottom-left-radius: 8rpx; box-sizing: border-box;
.img { width: 40rpx; height: 30rpx; }
input { padding-left: 20rpx; font-size: 28rpx; width: 300rpx; } }
.code-box { display: flex; justify-content: center; align-items: center; width: 40%; height: 100%; color: #FFFFFF; border-top-right-radius: 8rpx; border-bottom-right-radius: 8rpx; background: linear-gradient(#44aae8, #4889e2); } }
.menu-link { display: flex; justify-content: flex-end; align-items: center; height: 70rpx; color: #007AFF; font-size: 24rpx; }
.login-btn { margin-top: 30rpx; display: flex; justify-content: center; align-items: center; height: 80rpx; background: linear-gradient(#44aae8, #4889e2); border-radius: 50rpx; color: #FFFFFF; font-size: 35rpx; font-weight: bold; letter-spacing: 4rpx; }
.register { margin-top: 50rpx; }
.agree-txt { display: flex; justify-content: center; align-items: center; height: 70rpx; font-size: 24rpx;
text { color: #007AFF; } } }效果图：
完整源码：
1.登陆模块：
<template> <view class="content"> <view class="head"> <view class="logo"> logo </view> <text class="tip">欢迎登录老K博客</text> </view> <view class="form-box"> <view class="tab-box"> <view class="row-tab" @click="tabClick(0)"> <text :class="tabIndex==0?'tab-active':''">账号登录</text> <text class="thing" v-show="tabIndex==0?true:false"></text> </view> <view class="row-tab" @click="tabClick(1)"> <text :class="tabIndex==1?'tab-active':''">验证码登录</text> <text class="thing" v-show="tabIndex==1?true:false"></text> </view> </view> <view v-show="tabIndex==0"> <view class="row-input"> <input maxlength="11" placeholder="手机号码" /> </view> <view class="row-input"> <input password maxlength="18" placeholder="密码" /> </view> </view> <view v-show="tabIndex==1"> <view class="row-input"> <input maxlength="11" placeholder="手机号码" /> <view class="code"> <text @click="getCode">获取验证码</text> </view> </view> <view class="row-input"> <input maxlength="6" placeholder="验证码" /> </view> </view> <view class="login-btn"> 登录 </view> <view class="menu-link"> <text @click="register">注册</text> <text>找回密码</text> </view> </view> </view></template>
<script> export default { data() { return { tabIndex: 0, //tab下标 } }, methods: { // tab点击 tabClick(id) { this.tabIndex = id },
// 获取验证码 getCode() { uni.showToast({ title: "获取验证码" }) },
// 注册 register() { uni.navigateTo({ url: '/pages/login4/register' }) } } }</script>
<style lang="scss"> page { background-color: #007AFF; }
.head { padding-left: 80rpx; height: 30vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
.logo { display: flex; justify-content: center; align-items: center; border-radius: 8rpx; width: 110rpx; height: 110rpx; font-size: 40rpx; color: #007AFF; font-weight: bold; background-color: #FFFFFF; }
.tip { padding-top: 50rpx; color: #FFFFFF; font-size: 40rpx; letter-spacing: 5rpx; font-weight: bold; } }
.form-box { padding: 0rpx 80rpx; height: 70vh; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; background-color: #FFFFFF;
.tab-box { padding-top: 40rpx; display: flex; justify-content: space-between; align-items: center; height: 80rpx; color: #929293; font-weight: bold;
.row-tab { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font-weight: bold; font-size: 35rpx; width: 50%; height: 100%;
.tab-active { color: #4d88f8; }
.thing { margin-top: 20rpx; width: 50rpx; height: 6rpx; background-color: #3884f6; } } }
.row-input { display: flex; justify-content: space-between; align-items: center; padding-top: 50rpx; font-size: 30rp; height: 100rpx; border-bottom: 1rpx solid #cfcfd0;
input { flex: 1; }
.code { display: flex; justify-content: flex-end; font-weight: bold; color: #0b77f7; width: 200rpx; font-size: 26rpx; } }
.login-btn { margin-top: 80rpx; display: flex; justify-content: center; align-items: center; height: 100rpx; letter-spacing: 10rpx; background: linear-gradient(to right, #0a7df7, #0f62f3); color: #FFFFFF; border-radius: 10rpx; font-size: 30rpx; }
.menu-link { position: fixed; left: 80rpx; right: 80rpx; bottom: 50rpx; display: flex; justify-content: space-between; font-size: 28rpx; font-weight: bold; } }</style>2.注册模块：
<template> <view class="content"> <view class="row-input"> <text>电话号码</text> <view class="input-box"> <input placeholder="请输入您的电话号码" maxlength="11" /> </view> </view> <view class="row-input2"> <text>验证码</text> <view class="input-box2"> <input class="input2" placeholder="请输入您的验证码" maxlength="6" /> <view class="code"> <text>获取验证码</text> </view> </view> </view> <view class="row-input"> <text>登录密码</text> <view class="input-box"> <input placeholder="请输入您的登录密码" maxlength="18" /> </view> </view> <view class="row-input"> <text>确认密码</text> <view class="input-box"> <input placeholder="再次输入登录密码" maxlength="18" /> </view> </view> <view class="row-input"> <text>邀请码</text> <view class="input-box"> <input placeholder="请输入您的邀请码" maxlength="10" /> </view> </view> <view class="register-btn"> 注册 </view> </view></template>
<script> export default { data() { return {} }, }</script>
<style lang="scss"> .content { padding: 0 40rpx;
.row-input { display: flex; flex-direction: column; font-size: 30rpx;
text { font-size: 28rpx; line-height: 100rpx; font-weight: bold; }
.input-box { display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx; height: 80rpx; border-radius: 8rpx; background-color: #f2f3f4;
.code { display: flex; justify-content: center; align-items: center; font-size: 28rpx; letter-spacing: 3rpx; width: 200rpx; height: 80rpx; border-radius: 8rpx; background-color: #0a7ff7; color: #FFFFFF; } } }
.row-input2 { display: flex; flex-direction: column; font-size: 30rpx;
text { font-size: 28rpx; line-height: 100rpx; font-weight: bold; }
.input-box2 { display: flex; justify-content: space-between; align-items: center; .input2{ padding: 0 20rpx; width: 400rpx; height: 80rpx; border-radius: 8rpx; background-color: #f2f3f4; }
.code { display: flex; justify-content: center; align-items: center; font-size: 28rpx; letter-spacing: 3rpx; width: 200rpx; height: 80rpx; border-radius: 8rpx; background-color: #0a7ff7; color: #a5ceff; } } }
.register-btn { margin-top: 60rpx; display: flex; justify-content: center; align-items: center; width: 100%; height: 100rpx; background: linear-gradient(to right, #0a7df7, #0f62f3); color: #FFFFFF; letter-spacing: 10rpx; font-size: 30rpx; border-radius: 10rpx; } }</style>本文共 499 个字数,平均阅读时长 ≈ 2分钟
评论 (0)