update: 修改项目logo仅保留一个新logo,修改注册、开店、忘记密码UI统一。

This commit is contained in:
mixtan 2025-07-02 08:28:12 +08:00
parent 6a18ad3dce
commit eeabb08a79
13 changed files with 248 additions and 154 deletions

View File

@ -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>

View File

@ -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;
}
} }
} }

View File

@ -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">已有门店&nbsp;&nbsp;直接登录</view> <view class="btn-tips">已有门店&nbsp;&nbsp;直接登录</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;

View File

@ -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-leftborder-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;

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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%;
} }

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB