xiangqin/pages/profile/myPage.vue

<template>
	<view class="page flex-col">
		<view class="group_1 flex-col justify-between">
			 <view class="box_37 flex-col">
					  
			       
			        <view class="box_3 flex-col">
			          <view class="text-wrapper_25 flex-row">
			            <text class="text_29">{{info.fans}}</text>
			            <text class="text_30">粉丝</text>
			            <text class="text_31">{{info.follow}}</text>
			            <text class="text_32">关注</text>
			          </view>
			          <view class="box_38 flex-row">
			            <view class="image-text_45 flex-row">
			              <text class="text_4">{{info.nickname}}</text>
			              <view class="box_20 flex-row u-row-around" style="align-items: center;">
			                <view class="image-text_46 flex-row justify-between">
			                 <!-- <view class="box_21 flex-col"></view>
			                  <text class="text-group_20">已认证</text> -->
							  <image src="../../static/profile/8@2x.png" mode="" style="width: 96rpx;height: 32rpx" v-show="info.vip_level==0"></image>
			                </view>
			                <!-- <view class="image-text_47 flex-row justify-between">
			                  <view class="box_21 flex-col"></view>
			                  <text class="text-group_20">已认证</text>
			                </view> -->
							<!-- <image src="../../static/profile/ganxingqu@2x.png" mode="" style="width: 152rpx;height: 52rpx;"></image> -->
			              </view>
			            </view>
			          </view>
			          <image
			            class="image_1"
			            referrerpolicy="no-referrer"
			            :src="info.headimg"
			          />
			        </view>
			      </view>
			<view class="box_22 flex-col">
				<view class="text-wrapper_26 flex-row justify-between">
					<text class="text_33" @click="itemclick(index)" :class="{'select':current==index}" :key="index"
						v-for="(item,index) in list">{{item}}</text>
					
				</view>

				<view class="" v-show="current==0">
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">性别</text>
						<view class="flex-row">
							<text class="text_50">{{info.sex==1?'男':'女'}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">年龄</text>
						<view class="flex-row">
							<input type="text" disabled v-model='info.age' style="text-align: right;">
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">星座</text>
						<view class="flex-row">
							<input type="text" disabled v-model='info.constellation' style="text-align: right;">
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">身高</text>
						<view class="flex-row">
							<text class="text_50">{{info.height?info.height+'cm':''}}</text>
							<!-- <input type="text" disabled v-model='info.height' style="text-align: right;"> -->
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">体重</text>
						<view class="flex-row">
							<text class="text_50">{{info.weight?info.weight+'kg':''}}</text>
							<!-- <input type="text" disabled v-model='info.weight' style="text-align: right;"> -->
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">学历</text>
						<view class="flex-row">
							<text class="text_50">{{info.education||''}}</text>
						</view>
					</view>

					<view class="group_50 flex-row  justify-between">
						<text class="text_49">毕业院校</text>
						<view class="flex-row">
							<input type="text" disabled v-model='info.graduation_school' style="text-align: right;">
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">兴趣爱好</text>
						<view class="flex-row">
							<text class="text_50">{{info.hobby||''}}</text>
							<!-- <input type="text" disabled v-model='info.hobby' style="text-align: right;"> -->
						</view>
					</view>
				
				</view>
				<view class="" v-show="current==1">
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">姓名</text>
						<view class="flex-row">
							<text class="text_50">{{info.username}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">工作单位</text>
						<view class="flex-row">
							<text class="text_50">{{info.danwei||''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">工作性质</text>
						<view class="flex-row">
							<text class="text_50">{{info.xingzhi||''}}</text>
						</view>
					</view>
					<!-- <view class="group_50 flex-row  justify-between">
						<text class="text_49">职务</text>
						<view class="flex-row">
							<input type="text" disabled v-model='info.position' style="text-align: right;">
						</view>
					</view> -->
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">月收入</text>
						<view class="flex-row">
							<input type="text" disabled v-model='info.income' style="text-align: right;">
						</view>
					</view>
				</view>
				<view class="" v-show="current==2">
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">婚史</text>
						<view class="flex-row">
							<!-- <input type="text" disabled v-model='info.hunshi' style="text-align: right;"> -->
							<text>{{info.status==1?'未婚':info.status==2?'离异':info.status==3?'丧偶':''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">有无子女</text>
						<view class="flex-row">
							<text>{{info.is_zinv==1?'有':info.is_zinv==2?'无':''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between" v-if="info.is_zinv==1">
						<text class="text_49">子女性别</text>
						<view class="flex-row">
							<text>{{info.zinv_sex==1?'男':info.zinv_sex==2?'女':''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">是否独生子女</text>
						<view class="flex-row">
							<text>{{info.is_du==1?'是':info.is_du==2?'否':''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between" v-if="info.is_du==2">
						<text class="text_49">兄弟姊妹几人</text>
						<view class="flex-row">
							<text>{{info.children||0}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">居住情况</text>
						<view class="flex-row">
							<text>{{info.home==1?'自有产权房':info.home==2?'租住':info.home==3?'与父母同住':''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">是否有车</text>
						<view class="flex-row">
							<text>{{info.is_car==1?'是':info.is_car==2?'否':''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between" v-if="info.is_car==1">
						<text class="text_49">车辆型号</text>
						<view class="flex-row">
							<text>{{info.car_model||''}}</text>
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">父亲工作</text>
						<view class="flex-row">
							<text class="text_50">{{info.fa_work||''}}</text>
							<!-- <input type="text" disabled placeholder="" v-model='info.fa_work'
								style="text-align: right;"> -->
						</view>
					</view>
					<view class="group_50 flex-row  justify-between">
						<text class="text_49">母亲工作</text>
						<view class="flex-row">
							<text class="text_50">{{info.ma_work||''}}</text>
							<!-- <input type="text" disabled placeholder="" v-model='info.ma_work'
								style="text-align: right;"> -->
						</view>
					</view>
				</view>
				<view class="" v-show="current==3">
					<view class="person" @click="toPerson">
						<image :src="personPhoto[0].url" mode="aspectFill" v-if="personPhoto.length!=0"
							style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;width: 690rpx;height: 400rpx;">
						</image>
						<view class="bag">
							个人照片
						</view>
						<view class="u-flex-col" style="margin-top: 98rpx;" v-show="personPhoto.length==0">
							<image src="../../static/auth/2@2x.png" mode="" style="width: 55rpx;height: 55rpx;"></image>
							<text style="font-size: 20rpx;color: #666666;margin-top: 28rpx;">还未上传照片，去上传</text>
						</view>
					</view>
					<view class="person" @click="toLife">
						<image :src="lifePhoto[0].url" mode="aspectFill" v-if="lifePhoto.length!=0"
							style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;width: 690rpx;height: 400rpx;">
						</image>
						<view class="bag">
							生活照片
						</view>
						<view class="u-flex-col" style="margin-top: 98rpx;" v-show="lifePhoto.length==0">
							<image src="../../static/auth/2@2x.png" mode="" style="width: 55rpx;height: 55rpx;"></image>
							<text style="font-size: 20rpx;color: #666666;margin-top: 28rpx;">还未上传照片，去上传</text>
						</view>
					</view>
				</view>
				<!-- <view class="text-wrapper_13 flex-col" v-show="current!=4" @click="storage">
					<text class="text_46">保存修改</text>
				</view> -->
		</view>
		</view>
		<u-picker :show="showsex" :columns="sexcolumns" keyName="name" @confirm='changesex' @cancel='showsex=false'
			:closeOnClickOverlay='true'>
		</u-picker>
		<u-picker :show="showEducation" @cancel='showEducation=false' title="学历" ref="uPicker"
			:columns="educationcolumns" @confirm="confirmEducation">
		</u-picker>
		<u-picker :show="showunit" :columns="unitcolumns" keyName="name" @confirm='changeunit' @cancel='showunit=false'
			:closeOnClickOverlay='true'>
		</u-picker>
		<u-picker :show="shownature" @cancel='shownature=false' title="工作性质" @confirm='confirmWork' keyName="name"
			:columns="naturecolumns"></u-picker>
	</view>
</template>
<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		components: {
			AddressPicker
		},
		data() {
			return {
				shownature: false,
				showunit: false,
				showEducation: false,
				showsex: false,
				list: ['个人档案', '工作职业', '家庭情况', '相册'],
				current: 0,
				value: false,
				info: {},
				personPhoto: [],
				lifePhoto: [],
				sexcolumns: [
					['男', '女']
				],
				educationcolumns: [
					['高中', '大专', '本科', '硕士', '博士']
				],
				unitcolumns: [
					[]
				],
				naturecolumns: [
					[]
				],
			};
		},
		onLoad() {
			this.getWorking()
			this.getWork()
		},
		onShow() {
			this.getInfo()
			this.getpersonPhoto()
			this.getlifePhoto()
		},
		methods: {
			storage() {
				uni.showLoading({

				})
				let data1 = {
					sex: this.info.sex,
					constellation: this.info.constellation,
					height: this.info.height,
					age: this.info.age,
					weight: this.info.weight,
					education: this.info.education,
					graduation_school: this.info.graduation_school,
					province_id: this.info.province_id,
					city_id: this.info.city_id,
					area_id: this.info.area_id

				}

				let data2 = {
					working: this.info.working,
					nature: this.info.nature,
					position: this.info.position,
					income: this.info.income
				}
				let data3 = {
					is_du: this.info.is_du,
					fa_work: this.info.fa_work,
					ma_work: this.info.ma_work,
					home: this.info.home,
				}
				uni.$u.http.post('/api/user/user_info', data1).then(res => {
					if (res.code == 1) {
						uni.$u.http.post('/api/user/user_work', data2).then(res => {
							if (res.code == 1) {
								uni.$u.http.post('/api/user/user_home', data3).then(res => {
									uni.hideLoading()
									this.$u.toast('个人信息已更新')
								})
							}
						})
					}
				})
			},
			confirmWork(e) {
				console.log(e)
				this.info.xingzhi = e.value[0].name
				this.info.nature = e.value[0].id
				this.shownature = false
			},
			getWork() {
				uni.$u.http.post('/api/index/WorkNature').then(res => {
					this.naturecolumns = [res.data]
				})
			},
			getWorking() {
				uni.$u.http.post('/api/Publics/working').then(res => {
					this.unitcolumns = [res.data]
				})
			},
			changeunit(e) {
				// this.current = e.value[0]
				this.info.danwei = e.value[0].name
				this.info.working = e.value[0].id
				this.showunit = false
			},
			change(result) {
				this.info.province_id = result.data[0].id
				this.info.city_id = result.data[1].id
				this.info.area_id = result.data[2].id
				this.info.address = '';
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.info.address += item.name
					} else {
						this.info.address += '-' + item.name
					}
				});
				let arr = this.info.address.split('-');
			},
			confirmEducation(e) {
				this.info.education = e.value[0]
				this.showEducation = false
			},
			changesex(e) {
				this.info.sex = e.indexs[0] * 1 + 1
				this.showsex = false
			},
			getpersonPhoto() {
				uni.$u.http.post('/api/user/personal_album', {
					id: uni.getStorageSync('userId')
				}).then(res => {
					if (res.code == 1) {
						this.personPhoto = res.data
					}
				})
			},
			getlifePhoto() {
				uni.$u.http.post('/api/user/life_album', {
					id: uni.getStorageSync('userId')
				}).then(res => {
					if (res.code == 1) {
						this.lifePhoto = res.data
					}
				})
			},
			getInfo() {
				uni.$u.http.post('/api/user/userinfo').then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			itemclick(index) {
				if (this.current != index) {
					this.current = index
				}
			},
			tojubao() {
				uni.navigateTo({
					url: './jubao'
				})
			},
			toPerson() {
				uni.navigateTo({
					url: './personPhoto'
				})
			},
			toLife() {
				uni.navigateTo({
					url: './lifePhoto'
				})
			}
		},
	};
</script>
<style lang="scss">
	@import '@/common/common.css';

	page {}

	.person {
		position: relative;
		padding: 26rpx 20rpx;
		margin: 0 auto 20rpx;
		width: 690rpx;
		height: 400rpx;
		background: #F3F4F6;
		border-radius: 20rpx;

		.bag {
			position: relative;
			z-index: 11;
			text-align: center;
			width: 140rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: #000000;
			border-radius: 26rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.page {
		background-color: #FBF8FD;
		position: relative;
		width: 750rpx;
		overflow: hidden;
	}

	.group_1 {
		width: 750rpx;
		/* height: 1624rpx; */

	}

	.box_37 {
		width: 750rpx;
		/* height: 514rpx; */
	}

	.group_45 {
		width: 680rpx;
		height: 34rpx;
		margin: 30rpx 0 0 42rpx;
	}

	.text-wrapper_24 {
		width: 108rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		font-size: 0;
		letter-spacing: -0.2800000011920929px;
		font-family: Helvetica;
		text-align: center;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_56 {
		width: 108rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 28rpx;
		font-family: Helvetica;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_57 {
		width: 108rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 28rpx;
		font-family: Helvetica;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.group_46 {
		width: 34rpx;
		height: 22rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) -2rpx -2rpx no-repeat;
		background-size: 36rpx 24rpx;
		margin: 6rpx 0 0 438rpx;
	}

	.group_47 {
		width: 30rpx;
		height: 22rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) -2rpx 0rpx no-repeat;
		background-size: 32rpx 24rpx;
		margin: 4rpx 0 0 10rpx;
	}

	.group_48 {
		width: 50rpx;
		height: 24rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin: 4rpx 0 0 10rpx;
	}

	.group_49 {
		width: 706rpx;
		height: 74rpx;
		margin: 24rpx 0 0 30rpx;
	}

	.section_4 {
		width: 64rpx;
		height: 64rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
	}

	.text_3 {
		width: 146rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 36rpx;
		letter-spacing: 0.2266666740179062px;
		font-family: PingFangSC-Medium;
		text-align: right;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 22rpx 0 0 208rpx;
	}

	.section_33 {
		width: 168rpx;
		height: 60rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin: 14rpx 0 0 120rpx;
	}

	.box_3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px 14px 0px 0px;
		height: 232rpx;
		width: 750rpx;
		position: relative;
		margin: 98rpx 0 22rpx 0;
	}

	.text-wrapper_25 {
		width: 318rpx;
		height: 60rpx;
		margin: 48rpx 0 0 336rpx;
	}

	.text_29 {
		width: 54rpx;
		height: 60rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 52rpx;
		letter-spacing: 0.7607405185699463px;
		font-family: DINAlternate-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: 60rpx;
	}

	.text_30 {
		width: 50rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 24rpx;
		letter-spacing: 0.3511109948158264px;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 20rpx 0 0 8rpx;
	}

	.text_31 {
		width: 28rpx;
		height: 60rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 52rpx;
		letter-spacing: 0.7607405185699463px;
		font-family: DINAlternate-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: 60rpx;
		margin-left: 120rpx;
	}

	.text_32 {
		width: 50rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 24rpx;
		letter-spacing: 0.3511109948158264px;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 20rpx 0 0 8rpx;
	}

	.box_38 {
		width: 100%;
		height: 44rpx;
		margin: 50rpx 0 30rpx 40rpx;
	}

	.image-text_45 {
		width: 100%;
		height: 44rpx;
	}

	.text_4 {
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 32rpx;
		letter-spacing: 0.46814799308776855px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.box_20 {
		position: relative;
		height: 32rpx;
		background-size: 100% 100%;
		margin-top: 6rpx;
	}

	.image-text_46 {
		width: 86rpx;
		height: 28rpx;
		margin-left: 4rpx;
	}

	.box_21 {
		width: 24rpx;
		height: 24rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin-top: 4rpx;
	}

	.text-group_20 {
		width: 62rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		letter-spacing: 0.29259249567985535px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.image-text_47 {
		position: absolute;
		left: 4rpx;
		top: 0;
		width: 86rpx;
		height: 28rpx;
	}

	.image_1 {
		border-radius: 50%;
		position: absolute;
		left: 40rpx;
		top: -60rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.box_22 {
		background-color: rgba(255, 255, 255, 1);
		width: 750rpx;
		margin-top: -2rpx;
	}

	.text-wrapper_26 {
		width: 690rpx;
		height: 44rpx;
		margin: 36rpx 0 28rpx 30rpx;
	}

	.text_33 {
		position: relative;
		width: 130rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: #999999;
		font-size: 32rpx;
		letter-spacing: 0.20148147642612457px;
		font-family: PingFangSC-Medium;
		text-align: center;
		white-space: nowrap;
		line-height: 44rpx;
		padding-bottom: 12rpx;
	}

	.select {
		position: relative;
		color: #222222;
	}

	.select::before {
		content: '';
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		width: 40rpx;
		height: 8rpx;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		border-radius: 4rpx;
	}

	.text_34 {
		width: 122rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 2rpx 0 0 84rpx;
	}

	.text_35 {
		width: 122rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 2rpx 0 0 86rpx;
	}

	.text_36 {
		width: 62rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 2rpx 0 0 84rpx;
	}

	.box_23 {
		width: 40rpx;
		height: 8rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin: 2rpx 0 0 76rpx;
	}

	.box_24 {
		background-color: rgba(242, 242, 242, 1);
		width: 690rpx;
		height: 2rpx;
		margin: 28rpx 0 0 30rpx;
	}

	.group_50 {
		width: 690rpx;
		height: 42rpx;
		margin: 20rpx 0 0 30rpx;
	}

	.text_49 {
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.text_50 {
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.section_32 {
		width: 28rpx;
		height: 28rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin: 8rpx 0 0 4rpx;
	}

	.group_51 {
		width: 690rpx;
		height: 112rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.text-group_32 {
		width: 62rpx;
		height: 112rpx;
	}

	.text_44 {
		width: 62rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.text_38 {
		width: 62rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
		margin-top: 28rpx;
	}

	.text-group_33 {
		width: 92rpx;
		height: 112rpx;
	}

	.text_45 {
		width: 92rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.text-group_21 {
		width: 92rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
		margin-top: 28rpx;
	}

	.text-wrapper_27 {
		width: 690rpx;
		height: 42rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.text_39 {
		width: 62rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.text-group_22 {
		width: 72rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.group_52 {
		width: 690rpx;
		height: 42rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.text_41 {
		width: 62rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.text-group_24 {
		width: 92rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
		margin-left: 504rpx;
	}

	.group_39 {
		width: 28rpx;
		height: 28rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin: 8rpx 0 0 4rpx;
	}

	.text-wrapper_28 {
		width: 690rpx;
		height: 42rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.text_51 {
		width: 122rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.text_52 {
		width: 122rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.group_53 {
		width: 690rpx;
		height: 42rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.text_53 {
		width: 122rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.image-text_48 {
		width: 216rpx;
		height: 42rpx;
	}

	.text-group_29 {
		width: 184rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 30rpx;
		letter-spacing: 0.18888889253139496px;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.group_41 {
		width: 28rpx;
		height: 28rpx;
		background: url(https://oss.wdmeta.art/a7835b5dd05ecd99/011781dfdfb589a0.png) 100% no-repeat;
		background-size: 100% 100%;
		margin-top: 8rpx;
	}

	.text-wrapper_13 {
		position: fixed;
		bottom: 84rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 92rpx;

		border-radius: 46rpx;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		background-size: 100% 100%;
		width: 650rpx;
	}

	.text_46 {
		width: 146rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		letter-spacing: 0.2266666740179062px;
		font-family: PingFangSC-Medium;
		text-align: right;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 22rpx 0 0 252rpx;
	}
</style>