baozhida-figure-platter/pages/setting/index.vue

<template>
	<!-- 设置 -->
	<view class="card_setting">
		<view class="bg_color_head" :style="{paddingTop:(safetyTop + 20)+'px'}">
			<view class="space_between card_user_box">
				<view class="same_row_in">
					<image class="box_head_portrait" mode="scaleToFill" :src="src"></image>
					<view class="name_title_login">
						<view class="login_title">登录/注册</view>
						<view class="login_hint"><span class="hint_title">初学弟子</span>您已研究0个八字</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#ffffff" size="22"></u-icon>
			</view>
			<view class="card_box_fingerpost">
				<view class="box_instrument">
					<view class="box_guide" v-for="(item,index) in guideList" :key="index">
						<u-icon name="question-circle" size="30"></u-icon>
						<view class="title_guide">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="card_box_fingerpost">
				<span class="headline_title">其他工具</span>
				<view class="box_instrument">
					<view class="box_guide" v-for="(item,index) in otherTools" :key="index">
						<u-icon name="question-circle" size="30"></u-icon>
						<view class="title_guide">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safetyTop: 0,
				src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				guideList: [{
					title: '新手指南',
				}, {
					title: '2.4.6版本',
				}, {
					title: '联系反馈',
				}],
				otherTools: [{
					title: '紫薇斗数',
				}, {
					title: '吉真万年历',
				}, {
					title: '五运六气',
				}, {
					title: '问真罗盘',
				}]
			}
		},
		onLoad() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			if (safeAreaInsets) {
				this.safetyTop = safeAreaInsets.top
			}
		},
	}
</script>

<style lang="scss">
	.bg_color_head {
		padding-top: 30rpx;
		width: 100%;
		height: 260rpx;
		background-color: rgba(42, 42, 52, 1);
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.card_user_box {
		width: calc(100% - 60rpx) !important;
		padding: 30rpx 30rpx 50rpx 30rpx;
	}

	.box_head_portrait {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.name_title_login {
		display: flex;
		flex-direction: column;
	}

	.login_title {
		color: #fff;
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}

	.login_hint {
		color: #fff;
		font-size: 28rpx;

		.hint_title {
			color: $color-subject;
			margin-right: 10rpx;
		}
	}

	.card_box_fingerpost {
		display: flex;
		flex-direction: column;
		margin: 0rpx 30rpx 30rpx 30rpx;
		width: calc(100% - 60rpx);
		// height: 100rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0rpx;
	}

	.box_guide {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0rpx 30rpx;

		.title_guide {
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	}

	.headline_title {
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}

	.box_instrument {
		display: flex;
	}
</style>