update: 修改项目logo仅保留一个新logo，修改注册、开店、忘记密码UI统一。
This commit is contained in:
mixtan
parent
6a18ad3dce
commit
eeabb08a79
@ -16,7 +16,7 @@
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
|
||||
<link rel="icon" href="./static/xiaofa-logo.png">
|
||||
<link rel="icon" href="./static/logo.jpg">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@ -16,13 +16,16 @@
|
||||
:color="'#555555'"
|
||||
:clearable="true"
|
||||
:maxlength="11"
|
||||
placeholder="请输入您的手机号码"
|
||||
placeholder="请输入手机号码"
|
||||
:height="60"
|
||||
:auto-height="true"
|
||||
:placeholder-style="'color:#999999;'"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">手机号</text>
|
||||
<u-icon
|
||||
class="input_icon"
|
||||
name="phone"
|
||||
></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
<!--密码-->
|
||||
@ -33,13 +36,16 @@
|
||||
:color="'#555555'"
|
||||
:border="'false'"
|
||||
:clearable="true"
|
||||
:placeholder="'请输入新的密码'"
|
||||
:placeholder="'请输入新密码'"
|
||||
:height="60"
|
||||
:auto-height="true"
|
||||
:placeholder-style="'color: #999999;'"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">新的密码</text>
|
||||
<u-icon
|
||||
class="input_icon"
|
||||
name="lock"
|
||||
></u-icon>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<u-icon
|
||||
@ -61,14 +67,17 @@
|
||||
:type="'text'"
|
||||
:border="'false'"
|
||||
:clearable="true"
|
||||
placeholder="请输入您的验证码"
|
||||
placeholder="请输入验证码"
|
||||
:height="60"
|
||||
:auto-height="true"
|
||||
style="margin-bottom: 20rpx"
|
||||
:maxlength="4"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">验证码</text>
|
||||
<u-icon
|
||||
class="input_icon"
|
||||
name="file-text"
|
||||
></u-icon>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<u-button
|
||||
@ -270,7 +279,11 @@ export default {
|
||||
overflow: hidden;
|
||||
|
||||
.forget-pwd-content {
|
||||
padding: 60rpx 40rpx 0 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 88rpx);
|
||||
padding: 0 40rpx;
|
||||
|
||||
.forget-pwd-block {
|
||||
width: 200rpx;
|
||||
@ -280,7 +293,7 @@ export default {
|
||||
margin: 0 auto;
|
||||
|
||||
.forget-pwd-img {
|
||||
// background-image: url("../../static/xiaofa-logo.png");
|
||||
// background-image: url("../../static/logo.jpg");
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -288,9 +301,8 @@ export default {
|
||||
}
|
||||
|
||||
.account-content {
|
||||
margin-top: 120rpx;
|
||||
border-radius: 44rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
.login-type {
|
||||
@ -326,25 +338,19 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.input-content {
|
||||
margin: 68rpx 44rpx;
|
||||
.input_icon {
|
||||
/deep/ .u-icon__icon {
|
||||
font-size: 36rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-block {
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 32rpx !important;
|
||||
height: 80rpx;
|
||||
color: #999999;
|
||||
border-bottom: 1px solid #000;
|
||||
.input-content {
|
||||
.u-input {
|
||||
height: 96rpx;
|
||||
border-bottom: 1px solid rgba(100, 100, 100, 0.1);
|
||||
border-radius: 0%;
|
||||
color: #555555;
|
||||
|
||||
.input-label {
|
||||
width: 148rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-input {
|
||||
height: 80rpx;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -360,13 +366,14 @@ export default {
|
||||
margin: 120rpx 0;
|
||||
|
||||
.btn-register {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: none;
|
||||
letter-spacing: 10px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 10rpx;
|
||||
font-size: 28rpx;
|
||||
background: $base-color;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@ -409,10 +416,14 @@ export default {
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
height: 60rpx;
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
color: $base-color;
|
||||
padding: 0 !important;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<view class="login-select-index-container">
|
||||
<view class="logo-content"></view>
|
||||
<view class="app-name">小发同城</view>
|
||||
<view class="app-title">商家中心</view>
|
||||
<view class="app-name">欢迎登录小发同城商家平台</view>
|
||||
<!-- <view class="app-title">商家中心</view> -->
|
||||
<view class="btn-content">
|
||||
<view class="btn-block">
|
||||
<u-button class="btn" :hairline="false" @click="skipuLogin()">
|
||||
<u-button class="btn btn-login" :hairline="false" @click="skipuLogin()">
|
||||
登录
|
||||
</u-button>
|
||||
<view class="btn-tips">已有门店 直接登录</view>
|
||||
@ -74,10 +74,10 @@ export default {
|
||||
position: relative;
|
||||
color: #333333;
|
||||
.logo-content {
|
||||
background-image: url("../../static/logo-2.png");
|
||||
background-image: url("../../static/logo.jpg");
|
||||
background-size: 100% 100%;
|
||||
width: 260rpx;
|
||||
height: 240rpx;
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
margin: 50% auto;
|
||||
margin-bottom: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
@ -85,10 +85,16 @@ export default {
|
||||
}
|
||||
|
||||
.app-name {
|
||||
background: url("../../static/title.png") no-repeat 50% 50%;
|
||||
background-size: 100% 100%;
|
||||
width: 616rpx;
|
||||
height: 41rpx;
|
||||
margin: auto;
|
||||
font-size: 72rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
text-indent: -999999px;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
@ -122,6 +128,16 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-register {
|
||||
background: #fff;
|
||||
color: $base-color;
|
||||
border: 1rpx solid $base-color;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tips {
|
||||
margin-top: 40rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<view class="login-container">
|
||||
<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true">
|
||||
<template slot="right">
|
||||
<!-- <template slot="right">
|
||||
<view class="btn-register" @click="skipuRegister">开店</view>
|
||||
</template>
|
||||
</template> -->
|
||||
</u-navbar>
|
||||
<view class="login-content">
|
||||
<view class="account-content">
|
||||
@ -12,14 +12,13 @@
|
||||
:class="['login-type-item', { active: loginType == 0 }]"
|
||||
@click="handleActiveLoginType(0)"
|
||||
>
|
||||
账号登录
|
||||
<view class="text">账号登录</view>
|
||||
</view>
|
||||
<view class="login-type-line"></view>
|
||||
<view
|
||||
:class="['login-type-item', { active: loginType == 1 }]"
|
||||
@click="handleActiveLoginType(1)"
|
||||
>
|
||||
验证码登录
|
||||
<view class="text">验证码登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-content">
|
||||
@ -38,9 +37,13 @@
|
||||
:placeholder-style="'color:#999999;'"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">
|
||||
<!-- <text class="input-label">
|
||||
{{ isPHone ? "手机号" : "账号/手机号" }}
|
||||
</text>
|
||||
</text> -->
|
||||
<u-icon
|
||||
class="input_icon"
|
||||
:name="isPHone ? 'phone' : 'account'"
|
||||
></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
<u-input
|
||||
@ -57,9 +60,13 @@
|
||||
:maxlength="showPassWord() == 'number' ? 4 : 99"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">
|
||||
<!-- <text class="input-label">
|
||||
{{ loginType == 0 ? "密码" : "验证码" }}
|
||||
</text>
|
||||
</text> -->
|
||||
<u-icon
|
||||
class="input_icon"
|
||||
:name="loginType == 0 ? 'lock' : 'email'"
|
||||
></u-icon>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<u-button
|
||||
@ -67,6 +74,7 @@
|
||||
class="verify-btn"
|
||||
:hair-line="false"
|
||||
size="mini"
|
||||
plain
|
||||
@click="getSmsCode"
|
||||
>
|
||||
{{ verifyText }}
|
||||
@ -74,15 +82,15 @@
|
||||
<u-icon
|
||||
name="eye"
|
||||
v-if="[0, 2, 3].includes(loginType) && !showPwd"
|
||||
:color="'#555555'"
|
||||
size="24"
|
||||
:color="'#666'"
|
||||
size="16"
|
||||
@click="showPwd = !showPwd"
|
||||
></u-icon>
|
||||
<u-icon
|
||||
name="eye-fill"
|
||||
v-if="[0, 2, 3].includes(loginType) && showPwd"
|
||||
:color="'#555555'"
|
||||
size="24"
|
||||
:color="'#666'"
|
||||
size="16"
|
||||
@click="showPwd = !showPwd"
|
||||
></u-icon>
|
||||
</template>
|
||||
@ -94,7 +102,7 @@
|
||||
:color="'#555555'"
|
||||
:border="'false'"
|
||||
:clearable="true"
|
||||
:placeholder="'输入验证码'"
|
||||
:placeholder="'请输入图形验证码'"
|
||||
:height="60"
|
||||
:auto-height="true"
|
||||
:placeholder-style="'color: #999999;'"
|
||||
@ -102,7 +110,10 @@
|
||||
:maxlength="4"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">验证码</text>
|
||||
<u-icon
|
||||
class="input_icon"
|
||||
name="file-text"
|
||||
></u-icon>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<u--image
|
||||
@ -122,6 +133,14 @@
|
||||
</view>
|
||||
|
||||
<view class="btn-content">
|
||||
<view class="tool">
|
||||
<view v-if="loginType == 0" class="left" @click="skipuForgetPwd"
|
||||
>忘记密码</view
|
||||
>
|
||||
<view class="right" @click="skipuRegister"
|
||||
>没有店铺? <text>立即开店</text></view
|
||||
>
|
||||
</view>
|
||||
<u-button
|
||||
class="btn-login"
|
||||
:ripple="true"
|
||||
@ -131,7 +150,6 @@
|
||||
>
|
||||
登录
|
||||
</u-button>
|
||||
<view class="forget-pwd" @click="skipuForgetPwd">忘记密码?</view>
|
||||
</view>
|
||||
<!-- <view class="agreement-content">
|
||||
登录代表你已经同意
|
||||
@ -156,16 +174,16 @@ export default {
|
||||
registerCode: "",
|
||||
loginType: 0,
|
||||
placeholderArr: [
|
||||
"请输入您的账号/手机号",
|
||||
"请输入您的手机号",
|
||||
"请输入您的手机号",
|
||||
"请输入用户名",
|
||||
"请输入手机号",
|
||||
"请输入手机号",
|
||||
"请输入您的邮箱",
|
||||
],
|
||||
placeholderArr2: [
|
||||
"请输入您的密码",
|
||||
"请输入您的验证码",
|
||||
"请输入您的密码",
|
||||
"请输入您的密码",
|
||||
"请输入密码",
|
||||
"请输入验证码",
|
||||
"请输入密码",
|
||||
"请输入密码",
|
||||
],
|
||||
verifyText: "获取验证码",
|
||||
time: 60,
|
||||
@ -257,7 +275,7 @@ export default {
|
||||
async accountLogin() {
|
||||
if (!this.account) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的手机号",
|
||||
message: "请输入手机号",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -265,7 +283,7 @@ export default {
|
||||
}
|
||||
if (!this.password) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的密码",
|
||||
message: "请输入密码",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -273,7 +291,7 @@ export default {
|
||||
}
|
||||
if (!this.accountCode) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的验证码",
|
||||
message: "请输入验证码",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -295,7 +313,7 @@ export default {
|
||||
async smsLogin() {
|
||||
if (!this.account) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的手机号",
|
||||
message: "请输入手机号",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -303,7 +321,7 @@ export default {
|
||||
}
|
||||
if (!this.password) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的验证码",
|
||||
message: "请输入验证码",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -341,7 +359,7 @@ export default {
|
||||
console.log(this.account);
|
||||
if (!this.account) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的手机号",
|
||||
message: "请输入手机号",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -410,7 +428,16 @@ export default {
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding: 18% 40rpx 0 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 88rpx);
|
||||
padding: 0 40rpx;
|
||||
|
||||
.account-content {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.logo-block {
|
||||
width: 200rpx;
|
||||
@ -420,7 +447,7 @@ export default {
|
||||
margin: 0 auto;
|
||||
|
||||
.logo-img {
|
||||
background-image: url("../../static/xiaofa-logo.png");
|
||||
background-image: url("../../static/logo.jpg");
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -430,17 +457,21 @@ export default {
|
||||
.login-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
|
||||
.login-type-item {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
margin-right: 60rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #aaaaaa;
|
||||
font-size: 28px;
|
||||
.text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.login-type-line {
|
||||
@ -453,34 +484,37 @@ export default {
|
||||
|
||||
.active {
|
||||
background: #fff;
|
||||
color: $base-color;
|
||||
color: #000;
|
||||
font-size: 44rpx;
|
||||
|
||||
&::before {
|
||||
// position: absolute;
|
||||
// content: "";
|
||||
// left: 89px;
|
||||
// top: 39px;
|
||||
// border-top: 9px solid red;
|
||||
// //border-left和border-right换成透明色 才能形成三角形 不然是长方形
|
||||
// border-left: 12px solid transparent;
|
||||
// border-right: 12px solid transparent;
|
||||
//background-color: red;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 70rpx;
|
||||
width: 40%;
|
||||
height: 10rpx;
|
||||
border-radius: 10px;
|
||||
background-color: $base-color;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input_icon {
|
||||
/deep/ .u-icon__icon {
|
||||
font-size: 36rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-content {
|
||||
margin: 68rpx 44rpx;
|
||||
padding: 40rpx 0;
|
||||
|
||||
.u-input {
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 32rpx !important;
|
||||
height: 80rpx;
|
||||
color: #999999;
|
||||
border-bottom: 1px solid #000;
|
||||
height: 96rpx;
|
||||
border-bottom: 1px solid rgba(100, 100, 100, 0.1);
|
||||
border-radius: 0%;
|
||||
color: #555555;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.yan-zheng-ma-input-block {
|
||||
@ -498,27 +532,40 @@ export default {
|
||||
justify-content: space-between;
|
||||
margin: 0 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: red;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
margin: 40rpx 0;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.btn-login {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: none;
|
||||
letter-spacing: 10px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 10rpx;
|
||||
font-size: 28rpx;
|
||||
background: $base-color;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
|
||||
.forget-pwd {
|
||||
margin-top: 60rpx;
|
||||
.tool {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
color: #7f7f7f;
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
text {
|
||||
color: $base-color;
|
||||
margin-left: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -563,12 +610,10 @@ export default {
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 152rpx;
|
||||
height: 64rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: $base-color;
|
||||
color: $base-color;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
margin-left: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 160rpx;
|
||||
background-image: url("../../../static/logo-2.png");
|
||||
background-image: url("../../../static/logo.jpg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
width: 228rpx;
|
||||
height: 228rpx;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../static/logo-2.png");
|
||||
background-image: url("../../static/logo.jpg");
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -856,7 +856,7 @@ export default {
|
||||
],
|
||||
commodityArr: [
|
||||
{
|
||||
imrUrl: "../../static/logo.png",
|
||||
imrUrl: "../../static/logo.jpg",
|
||||
name: "猪肉",
|
||||
barcode: "11131312123",
|
||||
specification: "500g*1袋",
|
||||
@ -864,7 +864,7 @@ export default {
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
imrUrl: "../../static/logo.png",
|
||||
imrUrl: "../../static/logo.jpg",
|
||||
name: "猪肉",
|
||||
barcode: "11131312123",
|
||||
specification: "500g*1袋",
|
||||
@ -872,7 +872,7 @@ export default {
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
imrUrl: "../../static/logo.png",
|
||||
imrUrl: "../../static/logo.jpg",
|
||||
name: "猪肉",
|
||||
barcode: "11131312123",
|
||||
specification: "500g*1袋",
|
||||
@ -893,7 +893,7 @@ export default {
|
||||
},
|
||||
},
|
||||
shopNmae: "",
|
||||
logoUrl: "@/static/xiaofa-logo.png",
|
||||
logoUrl: "@/static/logo.jpg",
|
||||
sfStatus: [
|
||||
{
|
||||
id: 1,
|
||||
@ -1190,7 +1190,7 @@ export default {
|
||||
.shop-logo-img {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background-image: url("../../static/logo.png");
|
||||
background-image: url("../../static/logo.jpg");
|
||||
background-size: 100% 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="register-container">
|
||||
<view class="title">免费开店</view>
|
||||
<view class="register-content">
|
||||
<view class="title">注册开店</view>
|
||||
<view class="account-content">
|
||||
<view class="input-content">
|
||||
<view class="account-register">
|
||||
@ -14,13 +14,13 @@
|
||||
:color="'#555555'"
|
||||
:clearable="true"
|
||||
:maxlength="11"
|
||||
placeholder="请输入您的手机号码"
|
||||
placeholder="请输入手机号码"
|
||||
:height="60"
|
||||
:auto-height="true"
|
||||
:placeholder-style="'color: #999999;'"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">手机号</text>
|
||||
<u-icon class="input_icon" name="phone"></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
<u-input
|
||||
@ -30,7 +30,7 @@
|
||||
:color="'#555555'"
|
||||
:border="'false'"
|
||||
:clearable="true"
|
||||
placeholder="请输入您的验证码"
|
||||
placeholder="请输入验证码"
|
||||
:height="60"
|
||||
:auto-height="true"
|
||||
:placeholder-style="'color: #999999;'"
|
||||
@ -38,13 +38,14 @@
|
||||
:maxlength="4"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<text class="input-label">验证码</text>
|
||||
<u-icon class="input_icon" name="file-text"></u-icon>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<u-button
|
||||
class="verify-btn"
|
||||
:hair-line="false"
|
||||
size="mini"
|
||||
plain
|
||||
@click="getSmsCode"
|
||||
>
|
||||
{{ parseInt(verifyText) > 0 ? `${verifyText}S` : verifyText }}
|
||||
@ -55,6 +56,11 @@
|
||||
</view>
|
||||
|
||||
<view class="btn-content">
|
||||
<view class="tool">
|
||||
<view class="right" @click="goLoginPage"
|
||||
>已有账号? <text>立即登录</text></view
|
||||
>
|
||||
</view>
|
||||
<u-button
|
||||
class="btn-register"
|
||||
:ripple="true"
|
||||
@ -126,11 +132,14 @@ export default {
|
||||
onHide() {},
|
||||
methods: {
|
||||
...mapActions("user", ["GetLogin", "GetSmsCode", "GetAccountLogin"]),
|
||||
goLoginPage() {
|
||||
uni.navigateTo({ url: "/pages/login/login" });
|
||||
},
|
||||
// 手机注册
|
||||
async handleRegister() {
|
||||
if (!this.account) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的手机号",
|
||||
message: "请输入手机号",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -180,7 +189,7 @@ export default {
|
||||
async getSmsCode() {
|
||||
if (!this.account) {
|
||||
this.$refs["uToast"].show({
|
||||
message: "请输入您的手机号",
|
||||
message: "请输入手机号",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
@ -242,29 +251,28 @@ export default {
|
||||
<style lang="scss">
|
||||
@import "@/styles/variables.scss";
|
||||
.register-container {
|
||||
overflow: hidden;
|
||||
.register-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 88rpx);
|
||||
padding: 0 40rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
margin: 100rpx 0%;
|
||||
font-size: 28px;
|
||||
margin-bottom: 100rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-content {
|
||||
padding: 12% 40rpx 0 40rpx;
|
||||
|
||||
.register-block {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
.account-content {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.account-content {
|
||||
border-radius: 44rpx;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
.input_icon {
|
||||
/deep/ .u-icon__icon {
|
||||
font-size: 36rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.login-type {
|
||||
@ -301,16 +309,12 @@ export default {
|
||||
}
|
||||
|
||||
.input-content {
|
||||
margin: 68rpx 44rpx;
|
||||
|
||||
.u-input {
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 32rpx !important;
|
||||
height: 80rpx;
|
||||
color: #999999;
|
||||
border-bottom: 1px solid #000;
|
||||
height: 96rpx;
|
||||
border-bottom: 1px solid rgba(100, 100, 100, 0.1);
|
||||
border-radius: 0%;
|
||||
color: #555555;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@ -332,16 +336,36 @@ export default {
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
margin: 120rpx 0;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.tool {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 26rpx;
|
||||
color: #7f7f7f;
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
text {
|
||||
color: $base-color;
|
||||
margin-left: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-register {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: none;
|
||||
letter-spacing: 10px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 10rpx;
|
||||
font-size: 28rpx;
|
||||
background: $base-color;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@ -386,12 +410,10 @@ export default {
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 152rpx;
|
||||
height: 64rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #fe4119;
|
||||
color: $base-color;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
BIN
java-mall-app-shop-admin/static/logo.jpg
Normal file
BIN
java-mall-app-shop-admin/static/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
BIN
java-mall-app-shop-admin/static/title.png
Normal file
BIN
java-mall-app-shop-admin/static/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Loading…
Reference in New Issue
Block a user