|
|
@@ -1,10 +1,8 @@
|
|
|
<template>
|
|
|
- <view class="login-container">
|
|
|
- <!-- 顶部高级渐变背景 -->
|
|
|
+ <view class="login-page">
|
|
|
<view class="gradient-bg"></view>
|
|
|
|
|
|
<view class="content-wrapper">
|
|
|
- <!-- Logo 区域 -->
|
|
|
<view class="logo-section">
|
|
|
<view class="logo-outer">
|
|
|
<image class="logo-img" :src="assets.logo" mode="aspectFill"></image>
|
|
|
@@ -13,281 +11,36 @@
|
|
|
<text class="app-subtitle">简洁 · 高效 · 数字化管理</text>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 按钮区域 -->
|
|
|
- <view class="action-section">
|
|
|
- <button class="main-btn" @click="startLoginFlow">
|
|
|
- <image class="btn-icon" :src="assets.wechat" mode="aspectFit"></image>
|
|
|
- <text>授权手机号码登录</text>
|
|
|
- </button>
|
|
|
-
|
|
|
- <view class="agreement-box">
|
|
|
- <label class="checkbox-label" @click="toggleAgreed">
|
|
|
- <checkbox :checked="isAgreed" color="#C1001C" style="transform:scale(0.7)" />
|
|
|
- <text class="agreement-text">我已阅读并同意
|
|
|
- <text class="link" @click.stop="showProtocol('user')">《用户协议》</text> 与
|
|
|
- <text class="link" @click.stop="showProtocol('privacy')">《隐私政策》</text>
|
|
|
- </text>
|
|
|
- </label>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 页脚 -->
|
|
|
- <view class="footer-section">
|
|
|
- <text>© 2026 ERP Order System. All Rights Reserved.</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 全局遮罩 -->
|
|
|
- <view class="global-mask" v-if="activeModal" @click="closeAllModals"></view>
|
|
|
-
|
|
|
- <!-- 1. 协议拦截确认弹窗 -->
|
|
|
- <view class="confirm-modal center-card" v-if="activeModal === 'confirm'">
|
|
|
- <view class="card-title">服务协议提示</view>
|
|
|
- <view class="card-body">请您阅读并同意我们的协议内容,以便为您提供更安全的服务体验。</view>
|
|
|
- <view class="card-footer-btns">
|
|
|
- <view class="btn-item cancel" @click="activeModal = ''">拒绝</view>
|
|
|
- <view class="btn-item agree" @click="agreeAndClose">同意并继续</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 2. 头像昵称授权弹窗 (原生能力适配) -->
|
|
|
- <view class="simulated-profile-pop bottom-pop" v-if="activeModal === 'profile'">
|
|
|
- <view class="pop-header-bar">
|
|
|
- <text class="pop-cancel" @click="activeModal = ''">取消</text>
|
|
|
- <text class="pop-main-title">获取头像昵称</text>
|
|
|
- <text class="pop-done" @click="activeModal = 'phone'">保存</text>
|
|
|
- </view>
|
|
|
- <view class="profile-edit-content">
|
|
|
- <view class="avatar-edit-box">
|
|
|
- <!-- 使用微信原生头像选择能力 -->
|
|
|
- <button class="avatar-wrapper-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
|
- <image class="current-avatar"
|
|
|
- :src="avatarPreviewUrl || 'https://img.icons8.com/color/144/user.png'"></image>
|
|
|
- <view class="camera-icon">
|
|
|
- <image src="https://img.icons8.com/ios-glyphs/30/999999/camera.png" mode="aspectFit">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- </button>
|
|
|
- <text class="edit-hint">点击修改头像</text>
|
|
|
- </view>
|
|
|
- <view class="nickname-edit-box">
|
|
|
- <text class="label">昵称</text>
|
|
|
- <!-- 使用微信原生昵称填写能力 -->
|
|
|
- <input class="nickname-input" type="nickname" :value="userName" placeholder="请输入昵称"
|
|
|
- @blur="onNicknameBlur" @input="onNicknameChange" />
|
|
|
- </view>
|
|
|
- <view class="auth-notice-box">
|
|
|
- <text class="notice-text">授权后,开发者将获得您的头像和昵称,用于展示您的个人资料。</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottom-action">
|
|
|
- <button class="confirm-btn-fixed" @click="goToPhoneAuth">确定</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 3. 模拟手机号授权 -->
|
|
|
- <view class="phone-auth-pop bottom-pop" v-if="activeModal === 'phone'">
|
|
|
- <view class="p-header">
|
|
|
- <image class="p-mini-logo" :src="assets.logo" mode="aspectFill"></image>
|
|
|
- <text class="p-app-name">ERP 智能下单系统 申请</text>
|
|
|
- </view>
|
|
|
- <view class="p-body">
|
|
|
- <text class="p-title">获取您的手机号</text>
|
|
|
- <text class="p-phone-hint">是否允许我们获取您的手机号,用于登录和订单通知?</text>
|
|
|
- </view>
|
|
|
- <view class="p-footer-btns">
|
|
|
- <button class="p-btn-fixed p-deny" @click="activeModal = ''">拒绝</button>
|
|
|
- <button class="p-btn-fixed p-allow" open-type="getPhoneNumber"
|
|
|
- @getphonenumber="handleGetPhoneNumber">允许</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 4. 协议富文本弹窗 (样式专项修复) -->
|
|
|
- <view class="protocol-modal center-card" v-if="activeModal === 'protocol'">
|
|
|
- <view class="p-pop-header">
|
|
|
- <text class="p-pop-title">{{ currentProtocol.title }}</text>
|
|
|
- <text class="p-pop-close" @click="activeModal = ''">×</text>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y class="p-pop-scroll">
|
|
|
- <view class="rich-text-wrapper">
|
|
|
- <rich-text :nodes="currentProtocol.content"></rich-text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="p-pop-footer">
|
|
|
- <button class="p-pop-btn" @click="activeModal = ''">我已了解</button>
|
|
|
- </view>
|
|
|
+ <AccountLogin @login-success="onLoginSuccess" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import assets from '@/utils/assets.js';
|
|
|
-import { getAgreement } from '@/api/system/agreement.js';
|
|
|
-import { wechatLogin, getWechatPhone, wechatRegister } from '@/api/auth/index.js';
|
|
|
-import { uploadFile } from '@/api/resource/oss.js';
|
|
|
+import AccountLogin from './components/AccountLogin.vue';
|
|
|
+
|
|
|
export default {
|
|
|
+ components: { AccountLogin },
|
|
|
data() {
|
|
|
return {
|
|
|
- assets, isAgreed: false, activeModal: '',
|
|
|
- avatarOssId: null, avatarPreviewUrl: '', userName: '微信用户',
|
|
|
- currentProtocol: { title: '', content: '' },
|
|
|
- protocols: {
|
|
|
- user: { title: '', content: '' },
|
|
|
- privacy: { title: '', content: '' }
|
|
|
- },
|
|
|
- openId: '',
|
|
|
- unionId: '',
|
|
|
- phoneNumber: ''
|
|
|
+ assets
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- toggleAgreed() { this.isAgreed = !this.isAgreed; },
|
|
|
- startLoginFlow() {
|
|
|
- if (!this.isAgreed) this.activeModal = 'confirm';
|
|
|
- else this.performLogin();
|
|
|
- },
|
|
|
- agreeAndClose() {
|
|
|
- this.isAgreed = true;
|
|
|
- this.activeModal = '';
|
|
|
- },
|
|
|
- async performLogin() {
|
|
|
- try {
|
|
|
- uni.showLoading({ title: '登录中...' });
|
|
|
-
|
|
|
- const loginRes = await new Promise((resolve, reject) => {
|
|
|
- wx.login({
|
|
|
- success: resolve,
|
|
|
- fail: reject
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- if (!loginRes.code) {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({ title: '获取登录凭证失败', icon: 'none' });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const res = await wechatLogin({ loginCode: loginRes.code });
|
|
|
-
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- if (res.data && res.data.access_token) {
|
|
|
- uni.setStorageSync('token', res.data.access_token);
|
|
|
- uni.setStorageSync('isLogin', true);
|
|
|
- uni.showToast({ title: '登录成功', icon: 'success' });
|
|
|
- setTimeout(() => {
|
|
|
- uni.reLaunch({ url: '/pages/order/index' });
|
|
|
- }, 1000);
|
|
|
- } else if (res.data && res.data.openid) {
|
|
|
- this.openId = res.data.openid;
|
|
|
- this.unionId = res.data.unionid || '';
|
|
|
- this.activeModal = 'profile';
|
|
|
- } else {
|
|
|
- uni.showToast({ title: '登录失败', icon: 'none' });
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- uni.hideLoading();
|
|
|
- console.error('登录错误:', error);
|
|
|
- uni.showToast({ title: error || '登录失败', icon: 'none' });
|
|
|
- }
|
|
|
- },
|
|
|
- async onChooseAvatar(e) {
|
|
|
- const tempPath = e.detail.avatarUrl;
|
|
|
- console.log('[微信信息] 头像临时路径:', tempPath);
|
|
|
- this.avatarPreviewUrl = tempPath;
|
|
|
- try {
|
|
|
- uni.showLoading({ title: '上传头像...' });
|
|
|
- const res = await uploadFile(tempPath);
|
|
|
- uni.hideLoading();
|
|
|
- this.avatarOssId = res.ossId;
|
|
|
- this.avatarPreviewUrl = res.url;
|
|
|
- console.log('[微信信息] 头像OSS上传成功, ossId:', this.avatarOssId);
|
|
|
- } catch (err) {
|
|
|
- uni.hideLoading();
|
|
|
- console.error('[微信信息] 头像上传失败:', err);
|
|
|
- uni.showToast({ title: err || '头像上传失败', icon: 'none' });
|
|
|
- }
|
|
|
- },
|
|
|
- onNicknameBlur(e) {
|
|
|
- this.userName = e.detail.value;
|
|
|
- console.log('[微信信息] 昵称(blur):', this.userName);
|
|
|
- },
|
|
|
- onNicknameChange(e) {
|
|
|
- this.userName = e.detail.value;
|
|
|
- console.log('[微信信息] 昵称(input):', this.userName);
|
|
|
- },
|
|
|
- async goToPhoneAuth() {
|
|
|
- this.phoneNumber = '';
|
|
|
- this.activeModal = 'phone';
|
|
|
- },
|
|
|
- async handleGetPhoneNumber(e) {
|
|
|
- if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
|
|
- uni.showToast({ title: '获取手机号失败,请重试', icon: 'none' });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- uni.showLoading({ title: '获取手机号中...' });
|
|
|
-
|
|
|
- const phoneRes = await getWechatPhone({
|
|
|
- phoneCode: e.detail.code,
|
|
|
- openId: this.openId
|
|
|
- });
|
|
|
-
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- this.phoneNumber = phoneRes.data;
|
|
|
-
|
|
|
- uni.showLoading({ title: '注册中...' });
|
|
|
-
|
|
|
- const registerRes = await wechatRegister({
|
|
|
- openId: this.openId,
|
|
|
- unionId: this.unionId,
|
|
|
- phone: this.phoneNumber,
|
|
|
- nickname: this.userName,
|
|
|
- avatar: this.avatarOssId
|
|
|
- });
|
|
|
-
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- this.performLogin();
|
|
|
- } catch (error) {
|
|
|
- uni.hideLoading();
|
|
|
- console.error('注册错误:', error);
|
|
|
- uni.showToast({ title: error || '注册失败', icon: 'none' });
|
|
|
- }
|
|
|
- },
|
|
|
- showProtocol(type) {
|
|
|
- this.currentProtocol = this.protocols[type];
|
|
|
- this.activeModal = 'protocol';
|
|
|
- },
|
|
|
- closeAllModals() { this.activeModal = ''; }
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- try {
|
|
|
- const [userRes, privacyRes] = await Promise.all([
|
|
|
- getAgreement(1),
|
|
|
- getAgreement(2)
|
|
|
- ]);
|
|
|
- this.protocols.user = { title: userRes.data.title, content: userRes.data.content };
|
|
|
- this.protocols.privacy = { title: privacyRes.data.title, content: privacyRes.data.content };
|
|
|
- } catch (e) {
|
|
|
- console.error('[协议] 加载失败', e);
|
|
|
- uni.showToast({ title: e || '加载协议失败', icon: 'none' });
|
|
|
+ onLoginSuccess() {
|
|
|
+ uni.reLaunch({ url: '/pages/order/index' });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* 基础容器 */
|
|
|
-.login-container {
|
|
|
+.login-page {
|
|
|
width: 100%;
|
|
|
min-height: 100vh;
|
|
|
background: #fff;
|
|
|
position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.gradient-bg {
|
|
|
@@ -303,32 +56,27 @@ export default {
|
|
|
.content-wrapper {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 0 80rpx;
|
|
|
- box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.logo-section {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- margin-top: 360rpx;
|
|
|
- margin-bottom: 120rpx;
|
|
|
+ padding-top: 200rpx;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
}
|
|
|
|
|
|
.logo-outer {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
background: #fff;
|
|
|
- border-radius: 48rpx;
|
|
|
- box-shadow: 0 40rpx 80rpx rgba(193, 0, 28, 0.35), 0 10rpx 30rpx rgba(0, 0, 0, 0.1), inset 0 4rpx 10rpx rgba(255, 255, 255, 0.8);
|
|
|
+ border-radius: 36rpx;
|
|
|
+ box-shadow: 0 30rpx 60rpx rgba(193, 0, 28, 0.3), 0 8rpx 20rpx rgba(0, 0, 0, 0.08), inset 0 4rpx 10rpx rgba(255, 255, 255, 0.8);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
overflow: hidden;
|
|
|
- margin-bottom: 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
.logo-img {
|
|
|
@@ -337,7 +85,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.app-title {
|
|
|
- font-size: 48rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
font-weight: bold;
|
|
|
color: #1a1a1a;
|
|
|
letter-spacing: 2rpx;
|
|
|
@@ -346,398 +94,7 @@ export default {
|
|
|
.app-subtitle {
|
|
|
font-size: 26rpx;
|
|
|
color: #999;
|
|
|
- margin-top: 10rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
letter-spacing: 6rpx;
|
|
|
}
|
|
|
-
|
|
|
-.main-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%);
|
|
|
- border-radius: 50rpx;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- box-shadow: 0 12rpx 30rpx rgba(193, 0, 28, 0.2);
|
|
|
- border: none;
|
|
|
- margin-bottom: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-icon {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.agreement-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.link {
|
|
|
- color: #C1001C;
|
|
|
- margin: 0 4rpx;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.footer-section {
|
|
|
- margin-top: auto;
|
|
|
- padding-bottom: 60rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #dcdcdc;
|
|
|
-}
|
|
|
-
|
|
|
-/* 弹窗通用基础 */
|
|
|
-.global-mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 998;
|
|
|
-}
|
|
|
-
|
|
|
-.center-card {
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 620rpx;
|
|
|
- background: #fff;
|
|
|
- border-radius: 32rpx;
|
|
|
- z-index: 1000;
|
|
|
- box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.15);
|
|
|
- padding: 50rpx 40rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.bottom-pop {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background: #fff;
|
|
|
- border-radius: 40rpx 40rpx 0 0;
|
|
|
- z-index: 1001;
|
|
|
- padding: 40rpx;
|
|
|
- padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
|
|
|
- box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.05);
|
|
|
-}
|
|
|
-
|
|
|
-/* 按钮对齐辅助 */
|
|
|
-button {
|
|
|
- display: flex !important;
|
|
|
- align-items: center !important;
|
|
|
- justify-content: center !important;
|
|
|
- padding: 0 !important;
|
|
|
- line-height: normal !important;
|
|
|
-}
|
|
|
-
|
|
|
-button::after {
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-/* 协议拦截弹窗 */
|
|
|
-.card-title {
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.card-body {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
- line-height: 1.6;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.card-footer-btns {
|
|
|
- display: flex;
|
|
|
- gap: 24rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-item {
|
|
|
- flex: 1;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 45rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- display: flex !important;
|
|
|
- align-items: center !important;
|
|
|
- justify-content: center !important;
|
|
|
- text-align: center;
|
|
|
- line-height: 90rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-item.cancel {
|
|
|
- background: #f8f8f8;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-item.agree {
|
|
|
- background: #C1001C;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-/* 协议内容弹窗专项修复 */
|
|
|
-.p-pop-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-pop-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1a1a1a;
|
|
|
-}
|
|
|
-
|
|
|
-.p-pop-close {
|
|
|
- font-size: 48rpx;
|
|
|
- color: #ccc;
|
|
|
- padding: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-pop-scroll {
|
|
|
- max-height: 55vh;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.rich-text-wrapper {
|
|
|
- padding: 10rpx 0;
|
|
|
- color: #444;
|
|
|
- font-size: 28rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-pop-footer {
|
|
|
- padding-top: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-pop-btn {
|
|
|
- width: 100%;
|
|
|
- height: 90rpx;
|
|
|
- background: #C1001C;
|
|
|
- color: #fff;
|
|
|
- border-radius: 45rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-/* 头像授权弹窗 */
|
|
|
-.pop-header-bar {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 60rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.pop-cancel {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.pop-main-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.pop-done {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #C1001C;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.profile-edit-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.avatar-wrapper-btn {
|
|
|
- width: 170rpx;
|
|
|
- height: 170rpx;
|
|
|
- border-radius: 85rpx;
|
|
|
- background: #f8f8f8;
|
|
|
- position: relative;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding: 0 !important;
|
|
|
- overflow: visible;
|
|
|
- display: flex !important;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-.current-avatar {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 85rpx;
|
|
|
- border: 4rpx solid #fff;
|
|
|
- box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
|
|
|
-}
|
|
|
-
|
|
|
-.camera-icon {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- background: #fff;
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- border-radius: 28rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
|
|
|
- z-index: 5;
|
|
|
-}
|
|
|
-
|
|
|
-.camera-icon image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.edit-hint {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-bottom: 70rpx;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.nickname-edit-box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 36rpx 0;
|
|
|
- border-top: 1rpx solid #f0f0f0;
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
- margin-bottom: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.nickname-edit-box .label {
|
|
|
- width: 130rpx;
|
|
|
- font-size: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.nickname-input {
|
|
|
- flex: 1;
|
|
|
- font-size: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.notice-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #bfbfbf;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- margin-bottom: 60rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.confirm-btn-fixed {
|
|
|
- width: 100%;
|
|
|
- height: 96rpx;
|
|
|
- background: #C1001C;
|
|
|
- color: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-/* 手机号授权弹窗 */
|
|
|
-.p-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 50rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-mini-logo {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-app-name {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #7f7f7f;
|
|
|
-}
|
|
|
-
|
|
|
-.p-title {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- margin-bottom: 44rpx;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.p-phone-hint {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #666;
|
|
|
- line-height: 1.5;
|
|
|
- display: block;
|
|
|
- margin-bottom: 60rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-number-card {
|
|
|
- background: #fbfbfb;
|
|
|
- padding: 36rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- border: 1rpx solid #f0f0f0;
|
|
|
-}
|
|
|
-
|
|
|
-.p-real-num {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1a1a1a;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.p-num-hint {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.p-other-link {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #576b95;
|
|
|
- display: block;
|
|
|
- margin-bottom: 60rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-footer-btns {
|
|
|
- display: flex;
|
|
|
- gap: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.p-btn-fixed {
|
|
|
- flex: 1;
|
|
|
- height: 96rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-.p-deny {
|
|
|
- background: #f2f2f2;
|
|
|
- color: #C1001C;
|
|
|
-}
|
|
|
-
|
|
|
-.p-allow {
|
|
|
- background: #C1001C;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
</style>
|