301 lines
7.4 KiB
Vue
301 lines
7.4 KiB
Vue
<template>
|
||
<view class="com_list">
|
||
<view class="item">
|
||
<view class="flex">
|
||
<view class="title">平安银行股份有限公司北京分行</view>
|
||
</view>
|
||
<view class="com_info">
|
||
<view class="left">
|
||
<view class="l_top">中国平安保险(集团）股份有限公司</view>
|
||
<view class="l_bottom">
|
||
<view class="l_b_left">企业法人</view>
|
||
<view class="l_b_right">截至 2024-09-30</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="r_top">控制比例</view>
|
||
<view class="r_center">52.38%</view>
|
||
<view class="r_bottom">101.69亿股</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex">
|
||
<view class="title">股权集中度</view>
|
||
</view>
|
||
<view class="guquan">
|
||
<view class="top">2025-09-30 00:00:00</view>
|
||
<view class="bottom">
|
||
<view class="b_item">
|
||
<view v-for="(item, index) in 4" class="item_info">
|
||
<view class="left">
|
||
前1大股东
|
||
</view>
|
||
<view class="right">
|
||
<view class="bili">49.56%</view>
|
||
<view class="shengjiang" :class="{action : index % 2 == 0}">
|
||
<image
|
||
:src="index % 2 == 0 ? '/pagesStock/static/icon/upArrow.png' : '/pagesStock/static/icon/downArrow.png'"
|
||
mode="widthFix"></image>0.35%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 15rpx;"></view>
|
||
<view class="b_item">
|
||
<view v-for="(item, index) in 4" class="item_info">
|
||
<view class="left">
|
||
前1大流通股东
|
||
</view>
|
||
<view class="right">
|
||
<view class="bili">49.56%</view>
|
||
<view v-if="0" class="shengjiang" :class="{action : index % 2 == 0}">
|
||
<image
|
||
:src="index % 2 == 0 ? '/pagesStock/static/icon/upArrow.png' : '/pagesStock/static/icon/downArrow.png'"
|
||
mode="widthFix"></image>0.35%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex">
|
||
<view class="title">十大股东</view>
|
||
</view>
|
||
|
||
<view class="gudong">
|
||
<view class="back">
|
||
<view class="top action" style="height: 54rpx;">
|
||
<view>股东名称</view>
|
||
<view>股东类型</view>
|
||
<view style="text-align: center;">持股数量</view>
|
||
<view style="text-align: center;">持股比例</view>
|
||
<view style="text-align: center;">股份性质</view>
|
||
</view>
|
||
<view v-for="(item, index) in 10" class="top" :class="{action: index % 2 == 1}">
|
||
<view class="child">中国平安保险（啊山东科技发啦设计费）</view>
|
||
<view class="child">保险公司</view>
|
||
<view class="child" style="text-align: center;">96.19亿</view>
|
||
<view class="child" style="color: #3E87CF; font-weight: bold; text-align: center;">49.57%</view>
|
||
<view class="child"
|
||
style="background-color: #FFF7E9; color: #E0AC4A; border-radius: 5rpx; padding: 5rpx 10rpx; text-align: center;">
|
||
流通A股</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex">
|
||
<view class="title">十大流通股东 </view>
|
||
</view>
|
||
|
||
<view class="gudong">
|
||
<view class="back">
|
||
<view class="top action" style="height: 54rpx;">
|
||
<view>股东名称</view>
|
||
<view>股东类型</view>
|
||
<view style="text-align: center;">持股数量</view>
|
||
<view
|
||
style="text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
流通股比例</view>
|
||
<view style="text-align: center;">股份性质</view>
|
||
</view>
|
||
<view v-for="(item, index) in 10" class="top" :class="{action: index % 2 == 1}">
|
||
<view class="child">中国平安保险（啊山东科技发啦设计费）</view>
|
||
<view class="child">保险公司</view>
|
||
<view class="child" style="text-align: center;">96.19亿</view>
|
||
<view class="child" style="color: #893ECF; font-weight: bold; text-align: center;">49.57%</view>
|
||
<view class="child"
|
||
style="background-color: #FFF7E9; color: #E0AC4A; border-radius: 5rpx; padding: 5rpx 10rpx; text-align: center;">
|
||
流通A股</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "gqjg-view",
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
}
|
||
}
|
||
</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 {
|
||
flex: 1;
|
||
|
||
.item_info {
|
||
margin: 15rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
color: #666666;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.right {
|
||
height: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
|
||
.bili {
|
||
color: #BB8520;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.shengjiang {
|
||
margin-left: 10rpx;
|
||
box-sizing: border-box;
|
||
padding: 5rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #C6F6D5;
|
||
color: #345423;
|
||
font-size: 18rpx;
|
||
|
||
image {
|
||
width: 11rpx;
|
||
height: 25rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
&.action {
|
||
background-color: #FFDFE1;
|
||
color: #EC3440;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.gudong {
|
||
margin-top: 25rpx;
|
||
|
||
.back {
|
||
margin: 25rpx 0;
|
||
font-weight: 500;
|
||
background-color: #FAFAFC;
|
||
border-radius: 10rpx;
|
||
padding: 25rpx 13rpx;
|
||
box-sizing: border-box;
|
||
color: #666666;
|
||
|
||
.top {
|
||
width: 100%;
|
||
display: grid;
|
||
gap: 20rpx;
|
||
grid-template-columns: 130rpx repeat(4, 1fr);
|
||
font-size: 22rpx;
|
||
background-color: white;
|
||
|
||
&.action {
|
||
background-color: #FAFAFC;
|
||
}
|
||
|
||
.child {
|
||
font-size: 18rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
margin: 10rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |