157 lines
4.2 KiB
Vue
157 lines
4.2 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>
|