2.4 组件结构调整,调整会员权限判断
This commit is contained in:
298
pagesStock/components/gqjg-view/gqjg-view.vue
Normal file
298
pagesStock/components/gqjg-view/gqjg-view.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<view class="com_list">
|
||||
<view class="item">
|
||||
<view class="flex">
|
||||
<view class="title">实际控制人</view>
|
||||
</view>
|
||||
<view v-if="actualControlInfo" class="com_info">
|
||||
<view class="left">
|
||||
<view class="l_top">{{actualControlInfo.actual_controller_name}}</view>
|
||||
<view class="l_bottom">
|
||||
<view class="l_b_left">{{actualControlInfo.control_type}}</view>
|
||||
<view class="l_b_right">截至 {{actualControlInfo.end_date}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="r_top">控制比例</view>
|
||||
<view v-if="actualControlInfo.holding_ratio" class="r_center">{{actualControlInfo.holding_ratio.toFixed(2)}}%</view>
|
||||
<view class="r_bottom">{{getNumStr(actualControlInfo.holding_shares)}}股</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex">
|
||||
<view class="title">股权集中度</view>
|
||||
</view>
|
||||
<view class="guquan">
|
||||
<view v-if="concentrationList.length>0" class="top">{{concentrationList[0].end_date}}</view>
|
||||
<view class="bottom">
|
||||
<view class="b_item flexWrap">
|
||||
<view v-for="(item, index) in concentrationList" :key="index" class="item_info flex">
|
||||
<view class="left flex1">{{item.stat_item}}</view>
|
||||
<view class="right flex">
|
||||
<view class="bili">{{item.holding_ratio.toFixed(2)}}%</view>
|
||||
<view v-if="item.ratio_change!=0" :class="'shengjiang flex '+(getRateUpOrDown(item.ratio_change)?'down':'up')" >
|
||||
<image v-if="getRateUpOrDown(item.ratio_change)" class="icon" src="/pagesStock/static/icon/downArrow.png"
|
||||
mode="widthFix"></image>
|
||||
<image v-else class="icon" src="/pagesStock/static/icon/upArrow.png" mode="widthFix"></image>
|
||||
<view>{{getRateStr(item.ratio_change)}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex">
|
||||
<view class="title">十大股东</view>
|
||||
</view>
|
||||
<view class="gudong">
|
||||
<view class="back">
|
||||
<view class="top action">
|
||||
<view class="head">股东名称</view>
|
||||
<view class="head">股东类型</view>
|
||||
<view class="head" style="text-align: center;">持股数量</view>
|
||||
<view class="head" style="text-align: center;">持股比例</view>
|
||||
<view class="head" style="text-align: center;">股份性质</view>
|
||||
</view>
|
||||
<view v-for="(item, index) in shareholdersList" :key="index" class="top" :class="{action: index % 2 == 1}">
|
||||
<view class="child">{{item.shareholder_name}}</view>
|
||||
<view class="child">{{item.shareholder_type?item.shareholder_type:'-'}}</view>
|
||||
<view class="child" style="text-align: center;">{{getNumStr(item.holding_shares)}}股</view>
|
||||
<view class="child" style="color: #3E87CF; font-weight: bold; text-align: center;">{{item.total_share_ratio}}%</view>
|
||||
<view class="nature">{{item.share_nature}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex">
|
||||
<view class="title">十大流通股东 </view>
|
||||
</view>
|
||||
<view class="gudong">
|
||||
<view class="back">
|
||||
<view class="top action">
|
||||
<view class="head">股东名称</view>
|
||||
<view class="head">股东类型</view>
|
||||
<view class="head" style="text-align: center;">持股数量</view>
|
||||
<view class="head" style="text-align: center;">流通股比例</view>
|
||||
<view class="head" style="text-align: center;">股份性质</view>
|
||||
</view>
|
||||
<view v-for="(item, index) in circulatingShareholdersList" :key="index" class="top" :class="{action: index % 2 == 1}">
|
||||
<view class="child">{{item.shareholder_name}}</view>
|
||||
<view class="child">{{item.shareholder_type?item.shareholder_type:'-'}}</view>
|
||||
<view class="child" style="text-align: center;">{{getNumStr(item.holding_shares)}}股</view>
|
||||
<view class="child" style="color: #893ECF; font-weight: bold; text-align: center;">{{item.total_share_ratio}}%</view>
|
||||
<view class="nature">{{item.share_nature}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getNumStr, getRateStr, getRateUpOrDown } from '@/utils/util';
|
||||
|
||||
export default {
|
||||
name: "gqjg-view",
|
||||
data() {
|
||||
return {
|
||||
getNumStr:getNumStr,
|
||||
getRateUpOrDown:getRateUpOrDown,
|
||||
getRateStr:getRateStr
|
||||
};
|
||||
},
|
||||
props:{
|
||||
actualControlInfo:Object, //实际控制人信息
|
||||
concentrationList:Array, //股权集中度列表
|
||||
shareholdersList:Array, //十大股东列表
|
||||
circulatingShareholdersList:Array, //十大流通股东列表
|
||||
competitivePositionInfo:Object, //竞争地位信息
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.com_list {
|
||||
margin-top: 38rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
color: #2B2B2B;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item {
|
||||
.com_info {
|
||||
margin: 20rpx 0;
|
||||
background-color: #FAFAFC;
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
font-weight: 500;
|
||||
|
||||
.left {
|
||||
.l_top {
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.l_bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.l_b_left {
|
||||
background-color: #99AFEC;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20rpx;
|
||||
padding: 5rpx;
|
||||
}
|
||||
|
||||
.l_b_right {
|
||||
margin-left: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #71675D;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
|
||||
.r_center {
|
||||
color: #BB8520;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 5rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guquan {
|
||||
margin: 25rpx 0;
|
||||
font-weight: 500;
|
||||
background-color: #FAFAFC;
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx 13rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top {
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
.b_item {
|
||||
.item_info {
|
||||
margin: 15rpx 0;
|
||||
margin-right: 15rpx;
|
||||
width: calc((100% - 15rpx)/2);
|
||||
.left {
|
||||
color: #666666;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.right {
|
||||
height: 35rpx;
|
||||
font-size: 20rpx;
|
||||
|
||||
.bili {
|
||||
color: #BB8520;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shengjiang {
|
||||
margin-left: 10rpx;
|
||||
padding: 0 5rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 18rpx;
|
||||
.icon {
|
||||
width: 11rpx;
|
||||
height: 25rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
.shengjiang.up
|
||||
{
|
||||
background-color: #FFDFE1;
|
||||
color: #EC3440;
|
||||
}
|
||||
.shengjiang.down
|
||||
{
|
||||
background-color: #C6F6D5;
|
||||
color: #345423;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item_info:nth-child(2n)
|
||||
{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.gudong {
|
||||
margin-top: 25rpx;
|
||||
|
||||
.back {
|
||||
margin: 25rpx 0;
|
||||
font-weight: 500;
|
||||
border-radius: 10rpx;
|
||||
color: #666666;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 166rpx repeat(4, 1fr);
|
||||
background-color: white;
|
||||
height: 60rpx;
|
||||
&.action {
|
||||
background-color: #FAFAFC;
|
||||
}
|
||||
.head
|
||||
{
|
||||
padding: 0 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.child {
|
||||
padding: 0 10rpx;
|
||||
font-size: 18rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.nature
|
||||
{
|
||||
background-color: #FFF7E9;
|
||||
margin: 10rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 18rpx;
|
||||
color: #E0AC4A;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user