<template>
	<view class="page fc">
		<uni-nav-bar fixed statusBar right-icon="gear" background-color="transparent" :border="false"
			:style="{ '--right-padding': getMenuInfoList + 'px' }" @clickRight="tosetUp" title="我的"></uni-nav-bar>
		<view class="back"></view>
		<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar>
			<view class="body">
				<view class="user">
					<view class="user_body">
						<view class="user_content fa">
							<view class="user_wrapper">
								<image class="user_avatar"
									:src="getBobbiesList.avatar ? getBobbiesList.avatar : '/static/images/avatar.png'"
									mode="aspectFill"></image>
								<!-- APP环境下使用普通按钮 -->
								<!-- #ifdef APP-PLUS -->
								<button class="user_button" @click="chooseAvatar">
									选择头像
								</button>
								<!-- #endif -->

								<!-- 小程序环境下使用微信原生头像选择 -->
								<!-- #ifndef APP-PLUS -->
								<button class="user_button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								</button>
								<!-- #endif -->
							</view>
							<view class="user_module f1">
								<view class="user_name fa">
									<image class="user_logo" v-if="getBobbiesList.vip >= 1"
										src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/c7dc9393a0d08ba379cb24b485e3e43e.png"
										mode="widthFix"></image>
									{{ getBobbiesList.nickname ? getBobbiesList.nickname : '四青上将'
									}}
									<image class="user_name_image" @click="nameClick" src="/static/images/mine_edit.png"
										mode="widthFix">
									</image>
								</view>
								<view class="user_id">
									ID：{{ getBobbiesList.user_number ? getBobbiesList.user_number : '135497645' }}
								</view>
							</view>
						</view>
						<!-- <view class="user_tag">隔壁班的下坡男神</view> -->
						<view class="user_detail fa wp">
							<view class="user_item faj" v-for="(item, index) in getBobbiesList.hobbies" :key="index">
								{{ item }}
								<!-- <image v-if="editStats" src="/static/images/replacement_delete.png"></image> -->
							</view>
							<image class="user_edit" v-if="!editStats" @click="editClick"
								src="/static/images/mine_edit.png" mode="widthFix"></image>
							<view class="user_text faj" @click="alertClick()" v-if="editStats">+</view>
							<view class="user_text faj" @click="successClick" v-if="editStats">完成</view>
						</view>
					</view>
				</view>
				<view class="member" @click="tomember">
					<view class="member_content" v-if="getBobbiesList.vip == 0">
						<view class="member_title">开启您会员之旅</view>
						<view class="member_desc">首次购买，最低可享受8元无限畅聊+语音</view>
						<view class="member_btn faj">开通会员</view>
					</view>
					<view class="member_contents fa" v-if="getBobbiesList.vip != 0">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20260104/06d13ae30ec708df26b922bd101a70e4.png"
							mode="widthFix"></image>
						<view class="member_module">
							<view class="member_title">您已开通VIP会员</view>
							<view class="member_time">到期时间: {{ vipEndTimeFormatted }}</view>
						</view>
					</view>
				</view>
				<view class="intimate" @click="toIntimacy">
					<view class="intimate_content fa">
						<image src="/static/images/index_intimate.png" mode="widthFix"></image>
						<view class="intimate_text">亲密度（Lv.{{ getBobbiesList.level ? getBobbiesList.level : 0 }}）</view>
					</view>
					<view class="intimate_module fa sb">
						<view class="intimate_detail">
							<view class="intimate_level">Lv.{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</view>
							<view class="intimate_progress fa">
								<view class="intimate_line" :style="{ width: calculateProgressWidth() + 'rpx' }">
								</view>
							</view>
							<!-- next_level_intimacy总亲密度，intimacy当前的，intimacy_percent百分比 -->
						</view>
						<image :src="loverBasicList.image_url ? loverBasicList.image_url : '/static/images/avatar.png'"
							mode="aspectFill"></image>
					</view>
					<view class="intimate_desc">每日登录、消费将提升亲密度</view>
				</view>
				<view class="list fa sb">
					<view class="list_content f1 faj" @click="toaccount">
						<view class="list_module">
							<view class="list_title">我的金币</view>
							<view class="list_num">{{ getBobbiesList.money ? getBobbiesList.money : 0 }}</view>
						</view>
						<image class="list_logo" src="/static/images/mine_b1.png" mode="aspectFill"></image>
					</view>
					<view class="list_content f1 faj" @click="tostore">
						<view class="list_module">
							<view class="list_title">金币商店</view>
							<view class="list_desc">装扮来了</view>
						</view>
						<image class="list_logo" src="/static/images/mine_b2.png" mode="aspectFill"></image>
					</view>
				</view>
				<image class="banner" @click="toinvite"
					src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/87ad5de553f5a119109468d2e27b21c1.png"
					mode="widthFix"></image>
			</view>
		</scroll-view>
		<tab-bar></tab-bar>
		<view class="alert faj" v-if="alertStats">
			<view class="alert_content">
				<image src="/static/images/close.png" mode="widthFix" @click="alertClick()"></image>
				<view class="alert_title">添加标签</view>
				<view class="alert_module fa wp">
					<view class="alert_item" :class="{ 'alert_active': selectedHobbies.includes(item.name) }"
						v-for="(item, index) in selectCList" :key="index" @click="toggleHobby(item.name)">
						{{ item.name }}
					</view>
				</view>
				<view class="alert_detail fa">
					<input class="f1" v-model="Addform.name" placeholder="请输入自定义标签" placeholder-class="alert_input" />
					<view class="alert_add faj" @click="AddClick">添加</view>
				</view>
				<view class="alert_sure faj"><text class="faj" @click="saveHobbies()">确定</text></view>
			</view>
		</view>
		<view class="name faj" v-if="nameStats">
			<view class="name_content">
				<image src="/static/images/close.png" mode="widthFix" @click="nameClick()"></image>
				<view class="name_title">修改名称</view>
				<view class="name_detail fa">
					<input type="nickname" class="f1" v-model="form.nickname" placeholder="请输入名称"
						placeholder-class="name_input" />
				</view>
				<view class="name_sure faj"><text class="faj" @click="saveName()">确定</text></view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	GetBobbies,
	GetUserBasic,
	AddBobbies,
	SetUserBasicSingle,
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
import tabBar from '@/components/tab-bar.vue';
import Image from '../create/image.vue';
export default {
	components: {
		notHave,
		topSafety,
		tabBar,
	},
	data() {
		return {
			global: this.baseURL,
			form: {
				nickname: '',
				hobbies: [],
				avatar: ''
			},
			editStats: false,
			alertStats: false,
			nameStats: false,
			selectCList: [],
			getBobbiesList: '',
			Addform: {
				name: ''
			},
			selectedHobbies: [],
			loverBasicList: '',
			getMenuInfoList: '',
		}
	},
	computed: {
		vipEndTimeFormatted() {
			if (!this.getBobbiesList.vip_endtime) return '';
			// 只取日期部分，去掉时间部分
			return this.getBobbiesList.vip_endtime.split(' ')[0];
		}
	},
	onLoad() {

	},
	onShow() {
		// #ifdef MP-WEIXIN
		this.getMenuInfo()
		// #endif
		this.getBobbies()
		this.getUserBasic()
		this.loverBasicList = uni.getStorageSync('loverBasicList') || '';
	},
	methods: {
		getBobbies() {
			GetBobbies({}).then(res => {
				if (res.code == 1) {
					this.selectCList = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		getUserBasic() {
			GetUserBasic({}).then(res => {
				if (res.code == 1) {
					this.getBobbiesList = res.data
					if (res.data.hobbies && Array.isArray(res.data.hobbies)) {
						this.selectedHobbies = [...res.data.hobbies] // 复制数组，避免引用问题
					}
					console.log('getBobbiesList', this.getBobbiesList)
					uni.setStorageSync('userinfo', this.getBobbiesList);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		addBobbies() {
			AddBobbies(this.Addform).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
					this.Addform.name = ''
					this.getBobbies()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		setUserBasicSingle() {
			console.log(this.form)
			SetUserBasicSingle(this.form).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
					this.getUserBasic()
					this.form.nickname = ''
					this.form.hobbies = []
					this.form.avatar = ''
					this.alertStats = false;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		loverBasic() {
			LoverBasic().then(res => {
				if (res.code == 1) {
					this.loverBasicList = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		toggleHobby(name) {
			const index = this.selectedHobbies.indexOf(name);
			if (index > -1) {
				// 如果已存在，则移除
				this.selectedHobbies.splice(index, 1);
			} else {
				// 如果不存在，则添加
				this.selectedHobbies.push(name);
			}
		},
		// 小程序环境下选择头像
		// #ifndef APP-PLUS
		onChooseAvatar(e) {
			console.log(this.baseURL)
			uni.uploadFile({
				url: this.baseURL + '/api/common/upload',
				filePath: e.detail.avatarUrl,
				name: 'file',
				header: {
					"Content-Type": "application/x-www-form-urlencoded",
					'token': uni.getStorageSync('token'),
				},
				success: (res) => {
					var data = JSON.parse(res.data);
					console.log(data)
					this.form.avatar = data.data.fullurl;
					console.log(this.form.avatar)
					this.setUserBasicSingle()
				}
			});
		},
		// #endif
		calculateProgressWidth() {
			//  next_level_intimacy总亲密度，intimacy当前的，intimacy_percent百分比
			if (this.getBobbiesList.intimacy == null || this.getBobbiesList.next_level_intimacy == null) {
				return 0;
			}
			// 根据比例计算实际宽度，确保不超过最大宽度400rpx
			const actualWidth = (this.getBobbiesList.intimacy / this.getBobbiesList.next_level_intimacy) * 400;
			const result = Math.min(actualWidth, 400);

			return result;
		},
		// APP环境下选择头像
		// #ifdef APP-PLUS
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const avatarPath = res.tempFilePaths[0];
					this.uploadAvatar(avatarPath);
				},
				fail: (err) => {
					console.error('选择头像失败:', err);
					uni.showToast({
						title: '选择头像失败',
						icon: 'none'
					});
				}
			});
		},
		// #endif

		// 上传头像
		uploadAvatar(avatarPath) {
			uni.uploadFile({
				url: this.baseURL + '/api/common/upload',
				filePath: avatarPath,
				name: 'file',
				header: {
					"Content-Type": "application/x-www-form-urlencoded",
					'token': uni.getStorageSync('token'),
					'sid': this.sid
				},
				success: (res) => {
					var data = JSON.parse(res.data);
					console.log(data)
					this.form.avatar = data.data.fullurl;
					console.log(this.form.avatar)
					this.setUserBasicSingle()
				},
				fail: (err) => {
					console.error('上传头像失败:', err);
					uni.showToast({
						title: '上传头像失败',
						icon: 'none'
					});
				}
			});
		},
		saveName() {
			this.nameStats = false
			this.setUserBasicSingle()
		},
		AddClick() {
			this.addBobbies()
		},
		editClick() {
			this.editStats = true
		},
		successClick() {
			this.editStats = false
		},
		alertClick() {
			if (this.alertStats) {
				if (this.getBobbiesList.hobbies && Array.isArray(this.getBobbiesList.hobbies)) {
					this.selectedHobbies = [...this.getBobbiesList.hobbies];
				}
				this.alertStats = false
			} else {
				this.alertStats = true
			}
		},
		nameClick() {
			if (this.nameStats) {
				this.nameStats = false
			} else {
				this.nameStats = true
			}
		},
		tosetUp() {
			uni.navigateTo({
				url: '/pages/mine/setUp'
			})
		},
		tomember() {
			uni.navigateTo({
				url: '/pages/mine/member'
			})
		},
		toaccount() {
			uni.navigateTo({
				url: '/pages/mine/account'
			})
		},
		tostore() {
			if (this.getBobbiesList.reg_step != 4) {
				uni.showToast({
					title: '请先完善恋人资料',
					icon: 'none',
					position: 'top'
				})
				return
			} else {
				uni.navigateTo({
					url: '/pages/mine/store'
				})
			}
		},
		toinvite() {
			uni.navigateTo({
				url: '/pages/mine/invite'
			})
		},
		toIntimacy() {
			// 检查是否开启了青少年模式
			const underAgeEnabled = uni.getStorageSync('underAgeEnabled');
			if (underAgeEnabled) {
				uni.showToast({
					title: '青少年模式下无法访问此功能',
					icon: 'none',
					position: 'top'
				});
				return;
			}
			if (this.getBobbiesList.reg_step != 4) {
				uni.showToast({
					title: '请先完善恋人资料',
					icon: 'none',
					position: 'top'
				})
				return
			} else {
				uni.navigateTo({
					url: '/pages/index/intimacy'
				})
			}
		},
		saveHobbies() {
			this.form.hobbies = [...this.selectedHobbies];
			console.log(this.form.hobbies);
			this.setUserBasicSingle()
		},
		getMenuInfo() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			console.log('胶囊信息:', menuButtonInfo);

			// 胶囊宽度
			const capsuleWidth = menuButtonInfo.width;

			// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
			const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;

			console.log('胶囊宽度:', capsuleWidth);
			console.log('胶囊距离右侧的距离:', distanceFromRight);

			this.getMenuInfoList = capsuleWidth + distanceFromRight;

			return {
				width: capsuleWidth,
				distanceFromRight: distanceFromRight,
				menuButtonInfo: menuButtonInfo
			};
		},
	}
}
</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style>
.page {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.scroll-view {
	overflow: hidden;
}

.body {
	position: relative;
	padding: 40rpx 40rpx 200rpx 40rpx;
}

.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 596rpx;
	background: linear-gradient(180deg, #FFE3E9 0%, #F7F7F7 100%);
}

.user {
	position: relative;
	width: 100%;
	background: linear-gradient(rgba(250, 234, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
	border: 3rpx solid #FFFFFF;
	border-radius: 24rpx;
}

.user_body {
	position: relative;
	padding: 36rpx 30rpx 16rpx 30rpx;
}

.user_content {
	position: relative;
}

.user_wrapper {
	position: relative;
	display: inline-block;
}

.user_avatar {
	width: 128rpx;
	height: 128rpx;
	border-radius: 50%;
	flex-shrink: 0;
	display: block;
}

.user_button {
	position: absolute;
	top: 0;
	left: 0;
	width: 128rpx;
	height: 128rpx;
	border-radius: 50%;
	opacity: 0;
	/* 使按钮透明，但保持可点击 */
	background: transparent;
	border: none;
}

.user_button::after {
	border: none;
	/* 去除按钮默认边框 */
}

.user_module {
	position: relative;
	margin: 0 0 0 22rpx;
}

.user_logo {
	margin: 0 14rpx 0 0;
	width: 50rpx;
	height: 50rpx;
	display: block;
}

.user_name {
	font-weight: 500;
	font-size: 36rpx;
	color: #000000;
	line-height: 50rpx;
}

.user_name_image {
	margin: 0 0 0 14rpx;
	width: 26rpx;
	height: 26rpx;
}

.user_id {
	margin: 10rpx 0 0 0;
	font-weight: 400;
	font-size: 24rpx;
	color: #A7A7A7;
	line-height: 50rpx;
}

.user_tag {
	margin: 24rpx 0 0 0;
	font-weight: 500;
	font-size: 30rpx;
	color: #333333;
	line-height: 50rpx;
}

.user_detail {
	position: relative;
	margin: 24rpx 0 0 0;
}

.user_item {
	position: relative;
	margin: 0 20rpx 20rpx 0;
	padding: 0 20rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FF51B3;
	line-height: 50rpx;
	background: rgba(255, 81, 179, 0.1);
	border-radius: 10rpx;
}

.user_item image {
	position: absolute;
	right: 0;
	top: 0;
	width: 20rpx;
	height: 20rpx;
}

.user_edit {
	margin: 0 20rpx 20rpx 0;
	width: 30rpx;
	height: 30rpx;
}

.user_text {
	margin: 0 20rpx 20rpx 0;
	padding: 0 18rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FF51B3;
	line-height: 50rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
}

.member {
	position: relative;
	margin: 30rpx 0 0 0;
	box-sizing: border-box;
}

.member_content {
	position: relative;
	padding: 60rpx 30rpx;
	width: 100%;
	background: linear-gradient(135deg, #8EA0FF 0%, #8449FE 100%);
	border-radius: 32rpx;
	box-sizing: border-box;
}

.member_contents {
	position: relative;
	padding: 0 30rpx;
	width: 100%;
	background: linear-gradient(135deg, #FF72C7 0%, #8449FE 100%);
	border-radius: 32rpx;
	box-sizing: border-box;
}

.member_contents image {
	margin: 0 15rpx 0 0;
	width: 220rpx;
	height: 220rpx;
	display: block;
}

.member_title {
	width: 350rpx;
	font-weight: 500;
	font-size: 34rpx;
	color: #FCFCFC;
	line-height: 41rpx;
}

.member_desc {
	margin: 18rpx 0 0 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #DBDBDB;
	line-height: 38rpx;
}

.member_time {
	margin: 18rpx 0 0 0;
	font-weight: 400;
	font-size: 28rpx;
	color: #FCFCFC;
	line-height: 38rpx;
}

.member_btn {
	position: absolute;
	top: 28rpx;
	right: 40rpx;
	padding: 15rpx 20rpx 15rpx 32rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #5909FF;
	line-height: 36rpx;
	background: linear-gradient(134deg, #D0E3FF 0%, #8973FF 100%);
	clip-path: polygon(20rpx 0%, 100% 0%, 100% 100%, 20rpx 100%, 0% 100%);
	border-radius: 10rpx;
}

.intimate {
	position: relative;
	margin: 30rpx 0 0 0;
	padding: 24rpx 32rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
}

.intimate_content {
	position: relative;
}

.intimate_content image {
	width: 40rpx;
	height: 40rpx;
}

.intimate_text {
	margin: 0 0 0 24rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.intimate_module {
	position: relative;
}

.intimate_detail {
	position: relative;
}

.intimate_level {
	margin: 0 0 0 30rpx;
	font-weight: 500;
	font-size: 32rpx;
	line-height: 50rpx;
	color: linear-gradient(28.45468288413665deg, #E72F9F 0%, #9147F9 100%);
}

.intimate_progress {
	position: relative;
	margin: 12rpx 0 0 0;
	width: 400rpx;
	height: 8rpx;
	background: #FFDDF0;
	clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
}

.intimate_line {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #8D48FE 0%, #EC2E99 100%);
	clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
}

.intimate_module image {
	width: 109rpx;
	height: 109rpx;
	display: block;
	border-radius: 50%;
	flex-shrink: 0;
}

.intimate_desc {
	font-weight: 400;
	font-size: 26rpx;
	color: #222222;
	line-height: 50rpx;
}

.list {
	position: relative;
	margin: 30rpx 0 0 0;
}

.list_content {
	position: relative;
	margin: 0 50rpx 0 0;
	padding: 32rpx 15rpx 34rpx 34rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	justify-content: space-between;
}

.list_content:nth-child(2) {
	margin: 0 0 0 0;
}

.list_module {
	/* position: relative; */
}

.list_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_num {
	margin: 10rpx 0 0 0;
	font-weight: 700;
	font-size: 40rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: center;
}

.list_desc {
	margin: 10rpx 0 0 0;
	font-weight: 400;
	font-size: 30rpx;
	color: #A7A7A7;
	line-height: 50rpx;
	/* text-align: center; */
}

.list_logo {
	/* margin: 0 0 0 30rpx; */
	width: 82rpx;
	height: 82rpx;
	/* display: block; */
}

.banner {
	margin: 30rpx 0 0 0;
	width: 100%;
	display: block;
	border-radius: 32rpx;
}

.alert {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 40rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.alert_content {
	position: relative;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 80rpx 50rpx;
}

.alert_content image {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	width: 30rpx;
	height: 30rpx;
}

.alert_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #161616;
	line-height: 38rpx;
	text-align: center;
}

.alert_module {
	position: relative;
	margin: 30rpx 0 0 0;
}

.alert_item {
	margin: 0 20rpx 20rpx 0;
	padding: 0 18rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #9E9E9E;
	line-height: 50rpx;
	background: #F6F8FA;
	border-radius: 10rpx;
}

.alert_active {
	color: #FF51B3;
	background: #FCE6F3;
}

.alert_detail {
	position: relative;
	margin: 20rpx 0 0 0;
}

.alert_detail input {
	padding: 15rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #000000;
	line-height: 50rpx;
	border-radius: 12rpx;
	border: 1px solid #989898;
}

.alert_input {
	color: #161616;
}

.alert_add {
	margin: 0 0 0 10rpx;
	padding: 15rpx 30rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 10rpx;
}

.alert_sure {
	margin: 20rpx 0 0 0;
}

.alert_sure text {
	padding: 15rpx 60rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 10rpx;
}

.name {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 40rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.name_content {
	position: relative;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 60rpx 100rpx;
}

.name_content image {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	width: 30rpx;
	height: 30rpx;
}

.name_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #161616;
	line-height: 38rpx;
	text-align: center;
}

.name_detail {
	position: relative;
	margin: 20rpx 0 0 0;
}

.name_detail input {
	padding: 15rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #000000;
	line-height: 50rpx;
	border-radius: 12rpx;
	border: 1px solid #989898;
}

.name_input {
	color: #161616;
}

.name_sure {
	margin: 20rpx 0 0 0;
}

.name_sure text {
	padding: 15rpx 60rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 10rpx;
}

.uni-navbar__header-btns {
	padding-right: var(--right-padding, 0);
}
</style>