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="/static/finance/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="/static/finance/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>