deepChartVueApp/pages/home/member.vue

<template>
	<view class="main">
		<view class="top">
			<view class="bell">
				<image class="image-bell" src="/static/my/铃铛2.png"></image>
			</view>
			<view class="msg">
				<view class="msg-left">
					<view class="avatar"></view>
				</view>
				<view class="msg-center">
					<view style="display: flex;">
						<view class="userInfo">{{ username }}</view>
						<image class="image-editName" src="/static/my/editName.png"></image>
					</view>
					<view class="userId">ID:{{ dccode }}</view>
				</view>
				<view class="msg-right">
					<image class="image-attendance" src="/static/my/签到.png" />
					<span style="font-size:10px;">签到</span>
				</view>
			</view>

			<view class="settings-buttons">
				<view class="setting-btn" @click="goToMarket">
					<image src="/static/my/行情设置.png" class="setting-icon" />
					<text>行情设置</text>
				</view>
				<view class="setting-btn" @click="goToGeneral">
					<image src="/static/my/设置.png" class="setting-icon" />
					<text>通用设置</text>
				</view>
			</view>

			<view class="share" @click="goToShare">
				<image class="img-share" src="/static/my/share.png" mode="widthFix" />
			</view>
		</view>
		<view class="bottom">
			<view class="list-item" @click="goToAccount">
				<image src="/static/my/security.png" class="list-icon" />
				<text>账号与安全</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<view class="list-item">
				<image src="/static/my/connection.png" class="list-icon" />
				<text>联系我们</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<view class="list-item" @click="goToNewVersion">
				<image src="/static/my/update.png" class="list-icon" />
				<text>新版本更新</text>
				<view class="update-tip">有新版本可更新
					<view class="circle"></view>
				</view>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<view class="list-item">
				<image src="/static/my/opinion.png" class="list-icon" />
				<text>意见反馈</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
			<view class="list-item" @click="goToAbout">
				<image src="/static/my/about.png" class="list-icon" />
				<text>关于DeepChart</text>
				<uni-icons type="arrowright" size="16" class="arrow" />
			</view>
		</view>
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ArrowRight
	} from '@element-plus/icons-vue'
	import footerBar from '../../components/footerBar.vue'

	const type = ref('member')
	const iSMT = ref(0)
	const username = ref('演示机EVA')
	const dccode = ref('90047681')
	const goToGeneral = () => {
		uni.navigateTo({
			url: '/pages/setting/general'
		})
	}
	
	const goToMarket = () => {
		uni.navigateTo({
			url: '../setting/market'
		})
	}
	
	const goToAccount = () => {
		uni.navigateTo({
			url:'../setting/account'
		})
	}
	
	const goToNewVersion = () =>{
		uni.navigateTo({
			url:'../setting/newVersion'
		})
	}
	
	const goToAbout = () =>{
		uni.navigateTo({
			url:'../setting/about'
		})
	}
	
	const goToShare = () =>{
		uni.navigateTo({
			url:'../setting/share'
		})
	}

	onMounted(() => {
		// 状态栏高度
		iSMT.value = uni.getSystemInfoSync().statusBarHeight
		console.log('??????????????', iSMT.value)
	})
</script>

<style scoped>
	.static-footer {
		position: fixed;
		bottom: 0;
	}

	.top {
		height: 47vh;
		background-color: white;
	}

	.bell {
		height: 9.6vh;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding-right: 50rpx;
	}

	.image-bell {
		width: 13px;
		height: 16px;
	}

	.msg {
		height: 10.7vh;
		display: flex;
		margin-top: 3vh;
		margin-bottom: 3vh;
	}

	.msg-left {
		width: 33.6vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 175rpx;
		height: 175rpx;
		border-radius: 50%;
		background-color: black;
	}

	.msg-center {
		width: 51.7vw;
		padding-left: 2.5vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.userInfo {
		font-size: 20px;
	}

	.userId {
		font-size: 14px;
		margin-top: 1vh;
	}

	.image-editName {
		width: 40rpx;
		height: 40rpx;
		margin-left: 2vw;
	}

	.msg-right {
		width: 14.7vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.image-attendance {
		width: 43rpx;
		height: 43rpx;
	}

	.settings-buttons {
		display: flex;
		justify-content: space-around;
	}

	.setting-btn {
		width: 349rpx;
		height: 135rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(243, 243, 243);
		border-radius: 8%;
	}

	.setting-icon {
		width: 64.7rpx;
		height: 64.7rpx;
		margin-right: 25rpx;
	}

	.setting-btn text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.share {
		height: 12.6vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img-share {
		width: 720rpx;
		height: 160rpx;
	}

	.bottom {
		height: 44.5vh;
		margin-top: 1vh;
		background-color: rgb(255, 255, 255);
	}

	.list-item {
		width: 670rpx;
		height: 7vh;
		display: flex;
		align-items: center;
		margin: 0rpx 40rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.list-item:last-child{
		border-bottom: none;
	}

	.list-icon {
		width: 42rpx;
		height: 42rpx;
		margin-right: 18rpx;
	}

	.arrow {
		margin-left: auto;
	}

	.update-tip {
		display: flex;
		color: #999;
		font-size: 24rpx;
		align-items: center;
		margin-left: 200rpx;
		justify-content: center;
	}

	.circle {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: red;
		margin-left: 10rpx;
	}
</style>