my-setting.vue

<template>
	<view class="main">
		<view class="top">
			<image @click="goBack" class="back" src="/static/discover/back.png"></image>
		</view>
		<view class="profile">
			<view class="profile-title">
				<view class="profile-icon"></view>
				<view class="profile-name">我们的简介</view>
			</view>
			<view class="profile-content">
				<textarea :disabled="true" :value="profileContent"></textarea>
			</view>
		</view>
		<view class="about">
			<view class="about-title">
				<view class="about-icon"></view>
				<view class="about-name">我们的简介</view>
			</view>
			<view class="about-content">
				<textarea :disabled="true" :value="aboutContent"></textarea>
			</view>
		</view>
		<view class="exit">
			<button class="exit-btn" @click="confirmExit()">退出账号</button>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定退出你的账号吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profileContent: '      Must Go，本产品基于 Vue Uniapp开发，提供 Android 和iOS 端 APP，针对于“后疫情”时代的身体素质普遍下降的问题，恢复大学生们原有的朝气。该产品定位于帮助众多大学生，乃至更多青年人走出怠惰于运动的舒适圈，增强身体素质、培养积极向上的心理状态。通过该产品可以轻松且高效地搜集到周边、尤其是自身高校的赛事活动信息，及时报名参与，并突破现在运动类APP的圈子局限，不必局限于与远在天边的“朋友”分享运动成果，而可以召集小队发帖社交与近在咫尺的“队友”外出活动。',
				aboutContent: '有问题或反馈请致电我们\n联系电话：18960545221'
			}
		},
		methods: {
			dialogConfirm() {
				uni.reLaunch({
					url: '/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 300
				})
				this.$refs.alertDialog.close();
			},
			dialogClose() {
				this.$refsalertDialog.close();
			},
			confirmExit() {
				this.$refs.alertDialog.open();
			},
			goBack() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			onload() {
				plus.navigator.setStatusBarBackground('#EDEEF0');
			}
		}
	}
</script>

<style>
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #EDEEF0;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;

	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.profile {
		width: 80%;
		height: 55%;
		margin-top: 10rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.profile-title {

		height: 12%;
		color: #F1992D;

	}

	.profile-icon {

		width: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		background-size: 100% 100%;
		background-image: url("/static/my/my-setting/profile-icon.png");
		background-repeat: no-repeat;
		float: left;
	}

	.profile-name {

		width: 200rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-right: 280rpx;

		font-size: 40rpx;
		text-align: left;
		float: right;
	}

	.profile-content {

		height: 88%;
	}

	.profile-content textarea {
		width: 80%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.about {

		width: 80%;
		height: 15%;
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.about-title {

		height: 40%;
		color: #F1992D;

	}

	.about-icon {

		width: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		background-size: 100% 100%;
		background-image: url("/static/my/my-setting/about-icon.png");
		background-repeat: no-repeat;
		float: left;
	}

	.about-name {

		width: 200rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-right: 280rpx;

		font-size: 40rpx;
		text-align: left;
		float: right;
	}

	.about-content {

		height: 60%;
	}

	.about-content textarea {
		width: 80%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.exit {}

	.exit-btn {
		background-color: #F1992D;
		color: #FFFFFF;
		width: 70%;
		height: 85rpx;
		line-height: 85rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 20rpx;
	}
</style>