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