my-setting.vue

<template>
	<view class="main">
		<view class="return">
			<view class="return-btn"></view>
		</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profileContent:'      Must Go，本产品基于 Vue Uniapp开发，提供 Android 和iOS 端 APP，针对于“后疫情”时代的身体素质普遍下降的问题，恢复大学生们原有的朝气。该产品定位于帮助众多大学生，乃至更多青年人走出怠惰于运动的舒适圈，增强身体素质、培养积极向上的心理状态。通过该产品可以轻松且高效地搜集到周边、尤其是自身高校的赛事活动信息，及时报名参与，并突破现在运动类APP的圈子局限，不必局限于与远在天边的“朋友”分享运动成果，而可以召集小队发帖社交与近在咫尺的“队友”外出活动。',
				aboutContent:'有问题或反馈请拨打\n我们的联系电话：18960545221'
			}
		},
		methods:{
			confirmExit(){
				uni.showModal({
					title: '温馨提示',  //提示标题
					content: '确认退出你的账号吗',  //提示内容
					showCancel: true, //是否显示取消按钮
					success: function (res) {
						if (res.confirm) {  //confirm为ture，代表用户点击确定
							console.log('点击了确定按钮');
						} else if (res.cancel) {  //cancel为ture，代表用户点击取消
							console.log('点击了取消按钮');
						}
					}
				})
			}
		}
	}
</script>

<style>
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #EDEEF0;
	}
	.return{
		
		
	}
	.return-btn{
		
		width: 70rpx;
		height: 70rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		background-size:100% 100%;
		background-image:url("/static/my/exit-icon.png");
		background-repeat:no-repeat;
	}
	.profile{
		/* border: 2rpx solid #000; */
		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>