提交 55ff88a9 编写于 作者: 芊里

页面样式调整完成

上级 e992ae53
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* #endif */
.wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
width: 750rpx;
background-color: #fff;
}
.wrap-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 630rpx;
flex-direction: column;
}
.content-top-title {
font-size: 32rpx;
font-weight: 600;
padding-top: 50rpx;
}
.hidden,
page {
background-color: transparent;
}
.login-iknow {
padding-top: 24rpx;
padding-bottom: 48rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
border-radius: 6rpx;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.phone-area {
padding: 0 20rpx;
font-size: 30rpx;
}
.phone-input {
flex: 1;
border-left-width: 1px;
border-left-color: #d7d9d8;
padding: 0 20rpx;
font-size: 30rpx;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
color: #8a8f8b;
font-size: 26rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
width: 630rpx;
justify-content: center;
align-items: center;
border-radius: 6rpx;
}
.send-btn-text {
color: #fff;
}
.send-btn-active {
background-color: #007aff;
}
.auth-box {
width: 630rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.login-text {
color: #1c436e;
font-size: 26rpx;
}
.hover {
opacity: 0.8;
}
......@@ -19,7 +19,7 @@
},
link: {
type: Array,
default: []
default: ()=>[]
}
},
data() {
......
......@@ -87,121 +87,7 @@
</script>
<style>
/* #ifndef APP-NVUE */
page{
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* #endif */
.wrap{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex:1;
width: 750rpx;
background-color: #fff;
}
.wrap-content{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.content{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 630rpx;
flex-direction: column;
}
.content-top-title{
font-size: 32rpx;
font-weight: 600;
padding-top: 50rpx;
}
.hidden,page{
background-color: transparent;
}
.login-iknow {
padding-top: 24rpx;
padding-bottom: 48rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
border-radius: 6rpx;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.phone-area{
padding: 0 20rpx;
font-size: 30rpx;
}
.phone-input {
flex: 1;
border-left-width: 1px;
border-left-color: #d7d9d8;
padding: 0 20rpx;
font-size: 30rpx;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
color: #8a8f8b;
font-size: 26rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
width: 630rpx;
justify-content: center;
align-items: center;
border-radius: 6rpx;
}
.send-btn-text{
color: #fff;
}
.send-btn-active {
background-color: #007aff;
}
.auth-box{
width: 630rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.login-text {
color: #1c436e;
font-size: 26rpx;
}
.hover{
opacity: 0.8;
}
/* 首页独有 */
@import url("../../common/loginPage.css");
.content-top-title{
text-align: center;
}
......
......@@ -94,132 +94,7 @@
</script>
<style>
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* #endif */
.wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
width: 750rpx;
background-color: #fff;
}
.wrap-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 630rpx;
flex-direction: column;
}
.content-top-title {
font-size: 32rpx;
font-weight: 600;
padding-top: 50rpx;
}
.login-iknow {
padding-top: 24rpx;
padding-bottom: 36rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
border-radius: 6rpx;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.phone-area {
padding: 0 20rpx;
font-size: 30rpx;
}
.phone-input {
flex: 1;
border-left-width: 1px;
border-left-color: #d7d9d8;
padding: 0 20rpx;
font-size: 30rpx;
}
.pwd-input {
border-left-width: 0px;
}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
color: #8a8f8b;
font-size: 26rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
width: 630rpx;
justify-content: center;
align-items: center;
border-radius: 6rpx;
}
.send-btn-text {
color: #fff;
}
.send-btn-active {
background-color: #007aff;
}
.auth-box {
width: 630rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.login-text {
color: #1c436e;
font-size: 26rpx;
}
.hover {
opacity: 0.8;
}
/* 密码登录 */
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
......
<template>
<view class="flex flex-column flex-1 w-750 bg-white">
<view class="flex-1 flex flex-column justify-start align-center">
<view class="w-630 flex flex-column">
<view class="wrap">
<view class="wrap-content">
<view class="content">
<!-- 顶部文字 -->
<text class="font-32 font-blod pt-5">手机号密码登录</text>
<login-ikonw class="lgnin-iknow" :text="tipText"></login-ikonw>
<text class="content-top-title">手机号密码登录</text>
<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center">
<input type="number" :maxlength="6" class="flex-1 phone-input px-2 font-30" placeholder="请输入验证码"
<view class="phone-input-box">
<input type="number" :maxlength="6" class="phone-input" placeholder="请输入验证码"
v-model="phoneCode" />
<login-short-code @getCode="getCode"></login-short-code>
</view>
<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-2">
<input type="password" :password="true" class="flex-1 px-2 font-30" placeholder="请输入密码"
<view class="phone-input-box">
<input type="password" :password="true" class="phone-input" placeholder="请输入密码"
v-model="password" />
</view>
<!-- 发送按钮 -->
<view class="send-btn-box flex w-630 justify-center align-center round mt-5" hover-class="hover"
@click="pwdLogin" :class="canSubmit?'send-btn-active':''">
<text class="text-white">完成</text>
<view class="send-btn-box" hover-class="hover"
@click="submit" :class="canSubmit?'send-btn-active':''">
<text class="send-btn-text">完成</text>
</view>
</view>
</view>
......@@ -69,42 +69,26 @@
});
// 发送成功后开启倒计时
done();
},
/**
* 完成并提交
*/
submit(){
}
}
}
</script>
<style>
@import url("../../common/myStyle.css");
.lgnin-iknow {
padding-top: 24rpx;
padding-bottom: 36rpx;
}
.phone-input-box {
height: 85rpx;
background-color: #f9f9f9;
@import url("../../common/loginPage.css");
.phone-input-box{
margin-top: 20rpx;
}
.phone-input {}
.tip-text {
padding-top: 20rpx;
padding-bottom: 36rpx;
}
.send-btn-box {
height: 85rpx;
background-color: #d8d8da;
margin-bottom: 50rpx;
.phone-input{
border-left-width: 0;
}
.send-btn-active {
background-color: #007aff;
}
.login-text {
color: #1c436e;
.send-btn-box{
margin-top: 50rpx;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册