molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-07 16:24:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新组件演示页面，方便用户直接使用组件，去除tn-button的默认背景色，tn-avatar修改参数默认值，修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug，tn-badge修改参数默认值，tn-collapse-item修复背景颜色失效问题，滚动通知移除默认背景颜色和字体大小，tn-count-down修复时间单位不正确问题，列表组件修复背景颜色问题，tn-nav-bar返回按钮修改为可进行修改的图标，tn-step添加点击步骤进行跳转，tn-loading修复默认激活颜色出错问题，tn-tag移除默认背景颜色，优化阴影大小css

Browse Source
This commit is contained in:
JaylenTech
2022-02-08 19:55:15 +08:00
parent 043ee3f585
commit 946bb52c03
94 changed files with 6296 additions and 4727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templatePage/login/demo1/demo1.vue
View File

@@ -76,7 +76,7 @@
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>

4
templatePage/login/demo2/demo2.vue
View File

@@ -79,7 +79,7 @@
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
@@ -131,7 +131,7 @@
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-1"
uniqueKey="login-demo-2"
:seconds="60"
@change="codeChange">
</tn-verification-code>

401
templatePage/login/demo3/demo3.vue Normal file
View File

@@ -0,0 +1,401 @@
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
</view>
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-3"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-3',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.login-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(0rem , 1rem);
}
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 100vw;
height: 100vh;
will-change: transform;
}
}
/* &--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
} */
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 403rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: rgba(255,255,255,0.6);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #FFFFFF;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 30rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: rgba(255,255,255,0.3);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #FFFFFF;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #AAAAAA;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>

420
templatePage/login/demo4/demo4.vue Normal file
View File

@@ -0,0 +1,420 @@
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
欢迎回来
</view>
<view class="tn-margin tn-color-gray--disabled tn-text-lg">
你是不是傻，菜的一撇的北北
</view>
<!-- 登录/注册切换 -->
<!-- <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view> -->
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-safe"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-safe"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 1" :class="[{'login__info__item__tips': currentModeIndex === 0}]">
<view class="tn-flex tn-flex-row-between tn-padding">
<view class="" @tap.stop="modeSwitch(0)">前往登录</view>
</view>
</view>
<view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
<view class="tn-flex tn-flex-row-between tn-padding">
<view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
<view class="tn-padding-left tn-color-gray">忘记密码</view>
</view>
</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-4"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-4',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
/* .login-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(0rem , 1rem);
}
} */
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 750rpx;
will-change: transform;
}
}
&--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
// height: 144px;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
}
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 300rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
margin-top: 100rpx;
background-color: rgba(255,255,255,0.6);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #080808;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 80rpx 30rpx 10rpx 30rpx;
padding-bottom: 0;
border-radius: 20rpx;
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #838383;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #838383;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 85rpx;
height: 85rpx;
font-size: 80rpx;
// border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
// &::after {
// content: " ";
// position: absolute;
// z-index: -1;
// width: 100%;
// height: 100%;
// left: 0;
// bottom: 0;
// border-radius: inherit;
// opacity: 1;
// transform: scale(1, 1);
// background-size: 100% 100%;
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
// }
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #838383;
}
</style>