frontend-app/pages/finance/finance.vue

<template>
	<view class="finance_warp">
		<view class="finance_header_warp">
			<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpMine"></up-image>
			<view class="finance_header_type_warp">
				<view :class="type === 1 ? 'finance_header_item_warp finance_header_item_sel_warp' : 'finance_header_item_warp'"
					@click="type = 1">股权架构</view>
				<view :class="type === 2 ? 'finance_header_item_warp finance_header_item_sel_warp' : 'finance_header_item_warp'"
					@click="type = 2">营收数据</view>
			</view>
		</view>
		<view class="finance_content_warp" v-if="type === 1">
			<view class="finance_image_comm">
				<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/gqjg.png" width="310" height="310"
					bgColor="#f1f6ff00" @click="jumpMine"></up-image>
			</view>
			<view class="finance_card_comm">
				<view class="finance_card_item_comm" v-for="(item, index) in equityStructureData" :key="index">
					<view class="finance_card_item_title">
						<view class="finance_card_item_y_comm" :style="{ 'background': item.color }"></view>{{ item.title }}
					</view>
					<view class="finance_card_item_value">净利润分红占比：<text class="_zb_warp" :style="{ 'color': item.color }">{{
						item.zb }}</text></view>
				</view>
			</view>
		</view>
		<view class="finance_content_warp" v-if="type === 2">
			<view class="finance_image_comm">
				<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/yssj.png" width="332" height="280"
					bgColor="#f1f6ff00" @click="jumpMine"></up-image>
			</view>
			<view class="finance_card_comm">
				<view class="finance_card_item_comm" v-for="(item, index) in revenueData" :key="index">
					<view class="finance_card_item_title">
						<view class="finance_card_item_y_comm" :style="{ 'background': item.color }"></view>{{ item.title }}
					</view>
					<view class="finance_card_item_value">金额：<text class="_zb_warp" :style="{ 'color': item.color }">{{ item.zb
					}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			equityStructureData: [
				{
					color: "#FC5E05",
					title: "市场股东",
					zb: "61%",
				}, {
					color: "#FCC139",
					title: "原始股东",
					zb: "22%",
				}, {
					color: "#BC52FD",
					title: "团队激励",
					zb: "10%",
				}, {
					color: "#0474E0",
					title: "机构投资",
					zb: "7%",
				}
			],// 股权架构
			revenueData: [
				{
					color: "#FC5E05",
					title: "股东分红",
					zb: "2514.71",
				}, {
					color: "#FCC139",
					title: "运营支撑",
					zb: "1508.83",
				}, {
					color: "#BC52FD",
					title: "市场品牌推广",
					zb: "502.94",
				}, {
					color: "#0474E0",
					title: "基金投资",
					zb: "502.94",
				}
			],// 营收数据
		};
	},
	methods: {
		jumpMine() {
			uni.switchTab({ url: '/pages/mine/mine' });
		}
	}
}
</script>

<style lang="scss" scoped>
.finance_warp {
	height: 100%;

	.finance_header_warp {
		position: relative;
		padding: 100rpx 30rpx 30rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;

		.finance_header_type_warp {
			position: absolute;
			left: 30%;
			display: flex;
			align-items: center;
			background: #EEEEEE;
			border-radius: 34rpx;
		}

		.finance_header_item_warp {
			padding: 16rpx 30rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}

		.finance_header_item_sel_warp {
			background: #FF8431;
			color: #EEEEEE;
			border-radius: 34rpx;
		}
	}

	.finance_content_warp {
		padding: 0rpx 30rpx 30rpx;

		.finance_image_comm {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;
		}

		.finance_card_comm {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 29rpx 0rpx #E5E5E5;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-top: 50rpx;
		}

		.finance_card_item_comm {
			margin-bottom: 30rpx;
		}

		.finance_card_item_title {
			display: flex;
			align-items: center;
		}

		.finance_card_item_value {
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			margin-top: 10rpx;

			._zb_warp {
				font-weight: 800;
				font-size: 32rpx;
			}
		}

		.finance_card_item_y_comm {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
}
</style>