179 lines
4.3 KiB
Vue
179 lines
4.3 KiB
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>
|