Files
JiaZhiQianYan/pagesStock/stockCenterDetails/stockCenterDetails.vue
2026-01-09 17:43:20 +08:00

969 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<navBar leftText="平安银行(000001)" :hideNavBg="true"></navBar>
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="keywords" placeholder="输入股票代码或名称" placeholder-style="color:#eeeeee" confirm-type="search" @confirm="clickSearch()"/>
</view>
<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
<view class="basicInfoC">
<view class="categoryLabelC flex">
<view class="category">金融·银行</view>
<view class="">沪深300上证180</view>
</view>
<view class="priceC flex">
<view class="currentChgC">
<view class="current">11.53</view>
<view class="chg">+0.44%</view>
</view>
<view class="priceIndexC">
<view class="flex">
<view class="indexC flex">
<view class="title">今开</view>
<view class="content">11.47</view>
</view>
<view class="indexC flex marginR">
<view class="title">昨收</view>
<view class="content">11.47</view>
</view>
</view>
<view class="flex">
<view class="indexC flex">
<view class="title">最高</view>
<view class="content up">11.58</view>
</view>
<view class="indexC flex marginR">
<view class="title">最低</view>
<view class="content down">11.42</view>
</view>
</view>
</view>
</view>
<view class="section">关键指标</view>
<view class="infoC flex">
<view class="flex flex1">
<view class="title">市盈率 (PE)</view>
<view class="content flex1 important marginR">5.37</view>
</view>
<view class="rightInfoC flex flex1">
<view class="title">流通股本</view>
<view class="content flex1">194.06亿股</view>
</view>
</view>
<view class="infoC flex">
<view class="flex flex1">
<view class="title">流通市值</view>
<view class="content flex1 important marginR">2237.47亿</view>
</view>
<view class="rightInfoC flex flex1">
<view class="title">换手率</view>
<view class="content flex1">0.36%</view>
</view>
</view>
<view class="infoC flex">
<view class="flex flex1">
<view class="title">发行总股本</view>
<view class="content flex1 marginR">194.06亿股</view>
</view>
<view class="rightInfoC flex flex1">
<view class="title">52周波动</view>
<view class="content flex1">10.48-13.33</view>
</view>
</view>
<view class="section">主力动态</view>
<view class="infoC flex">
<view class="flex flex1">
<view class="title">主力净流入</view>
<view class="content flex1 marginR up">+0.10亿</view>
</view>
<view class="rightInfoC flex flex1">
<view class="title">机构持仓</view>
<view class="content flex1 important">23.83%</view>
</view>
</view>
<view class="progressC relative">
<view class="buy absolute"></view>
</view>
<view class="buySaleC flex">
<view class="buy">买入 42%</view>
<view class="sale flex1">卖出 58%</view>
</view>
<view class="infoC flex">
<view class="flex flex1">
<image class="icon" src="/pagesStock/static/icon/establishedTime.png" mode="widthFix"></image>
<view class="title">成立</view>
<view class="content flex1 marginR">1987/12/22</view>
</view>
<view class="rightInfoC flex flex1">
<image class="icon" src="/pagesStock/static/icon/registeredCapital.png" mode="widthFix"></image>
<view class="title">注册资本</view>
<view class="content flex1">194.06亿元</view>
</view>
</view>
<view class="infoC flex">
<view class="flex flex1">
<image class="icon" src="/pagesStock/static/icon/location.png" mode="widthFix"></image>
<view class="title">所在地</view>
<view class="content flex1 marginR">广东 深圳市</view>
</view>
<view class="rightInfoC flex flex1">
<image class="icon" src="/pagesStock/static/icon/visitWebsite.png" mode="widthFix"></image>
<view class="title important">访问逛网</view>
<view class="flex1"></view>
</view>
</view>
<view class="companyInfo">
<view class="title">公司简介</view>
<view class="flex1">深圳发展银行股份有限公司系在对中华人民共和国深圳经济特区内原6家农村信用社进行股份制改造的基础上设立的股份制商业银行...
<text class="expand">展开全文</text>
</view>
</view>
</view>
<view class="otherInfoC">
<scroll-view scroll-x class="tabC">
<view :class="'item '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index" @click="clickTabItem(index)">{{item.title}}</view>
</scroll-view>
<block v-if="selectTab==0">
<view class="companyFilesList">
<view :class="'item '+(selectCompanyFiles==index?'select':'')" v-for="(item,index) in companyFilesList" :key="index" @click="clickCompanyFilesItem(index)">{{item.title}}</view>
</view>
<view v-if="selectCompanyFiles==0" class="branchList">
<view class="item">
<view class="flex">
<view class="title">平安银行股份有限公司北京分行</view>
</view>
</view>
</view>
<view v-if="selectCompanyFiles==1" class="managementTeamList">
<view class="positionNumC flex">
<view class="position">董事</view>
<view class="num director">15</view>
</view>
<view class="item flex">
<view class="avatarC flexCenter relative director">
<view class="sexC flexCenter absolute male">
<image class="icon" src="/pagesStock/static/icon/female.png" mode="widthFix"></image>
</view>
</view>
<view class="flex1">
<view class="flex">
<view class="name">郭晓涛</view>
<view class="position">非执行董事</view>
<view class="date flex1">任职日期2024-10-08</view>
</view>
<view class="educationAgeC flex">
<view class="education label">博士研究生</view>
<view class="age label">59</view>
</view>
</view>
</view>
<view class="expandMoreC flexCenter">
<view>展开查看</view>
<image class="arrow" src="/pagesStock/static/icon/lookMoreArrow.png" mode="widthFix"></image>
</view>
</view>
<view v-if="selectCompanyFiles==2" class="branchList">
<view class="item">
<view class="titleStatusC flex">
<view class="title flex1">平安银行股份有限公司北京分行</view>
<view class="statusC exist flex">
<image class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
<view>存续</view>
</view>
</view>
<view class="infoC topInfo flex">
<view class="infoItem leftInfo flex flex1">
<view class="title">注册资本</view>
<view class="content flex1">20亿元</view>
</view>
<view class="infoItem rightInfo flex flex1">
<view class="title">法人代表</view>
<view class="content flex1">张伟</view>
</view>
</view>
<view class="infoC flex">
<view class="infoItem leftInfo flex flex1">
<view class="title">成立日期</view>
<view class="content flex1">2007-03-15</view>
</view>
<view class="infoItem rightInfo flex flex1">
<view class="title">关联企业</view>
<view class="content flex1">156 </view>
</view>
</view>
</view>
</view>
<view v-if="selectCompanyFiles==3" class="businessInfoList">
<view class="section">工商信息</view>
<view class="infoC">
<view class="infoItem flex">
<view class="title">统一信用代码</view>
<view class="content code flex1 rightAlign">914403001000010008</view>
</view>
<view class="infoItem flex">
<view class="title">公司规模</view>
<view class="content flex1 rightAlign">大型企业(员工超3万人)</view>
</view>
<view class="infoItem flex">
<view class="title">注册地址</view>
<view class="content flex1 rightAlign">深圳市罗湖区深南东路5047号</view>
</view>
<view class="infoItem flex">
<view class="title">办公地址</view>
<view class="content flex1 rightAlign">深圳市福田区益田路5023号平</view>
</view>
</view>
<view class="section">服务机构</view>
<view class="infoC">
<view class="title infoItem">会计师事务所</view>
<view class="content infoItem">普华永道中天会计师事务所(特殊普通合伙)</view>
<view class="title infoItem">会计师事务所</view>
<view class="content infoItem">普华永道中天会计师事务所(特殊普通合伙)</view>
</view>
<view class="section">主营业务</view>
<view class="infoC mainBussiness">
<text class="title">吸收公众存款发放贷款办理结算票据贴现资金拆借银行卡业务代理收付款项外汇业务等商业银行业务</text>
</view>
<view class="section">经营范围</view>
<view class="infoC">
<text class="title">吸收公众存款;发放短期中期和长期贷款;办理国内外结算;办理票据兑与贴现;发行金融债券;代理发行代理兑付承销政府债券;买卖政府债买卖外汇;从事银行卡业务提供信用证服务及担保代理收付款项及代理保险业务;提供保管箱服务;经有关监管机构批准的其他业务</text>
</view>
</view>
</block>
<block v-if="selectTab==1">
<view class="companyFilesList">
<view :class="'item '+(selectInDepthAnalysis==index?'select':'')" v-for="(item,index) in inDepthAnalysisList" :key="index" @click="clickInDepthAnalysisItem(index)">{{item.title}}</view>
</view>
<view v-if="selectInDepthAnalysis==0" class="strategicAnalysisList">
<view class="section">核心定位</view>
<view class="section">投资亮点</view>
<view class="section">商业模式</view>
<view class="infoC">
<view class="title">零售银行核心驱动</view>
<view class="content">以零售银行业务为核心驱动依托平安集团综合金融平台构建智能化移动化综合化三位一体发展模式</view>
</view>
<view class="infoC">
<view class="title">科技赋能转型</view>
<view class="content">通过科技赋能实现业务流程数字化降本增效的同时提升客户体验</view>
</view>
<view class="infoC">
<view class="title">对公业务聚焦</view>
<view class="content">聚焦供应链金融和产业互联网服务实体经济高质量发展</view>
</view>
<view class="section">战略分析</view>
<view class="infoC">
<view class="title">战略方向</view>
<view class="content">"零售做强、对公做精、同业做专"为主线通过压降高风险资产深耕科技绿色普惠强化集团协同实现轻资本弱周期高股息的高质量增长</view>
</view>
<view class="infoC">
<view class="title">战略举措</view>
<view class="content">2025年A1138个项目落地构建智能风控智能投顾与智能运营目标3年降低单位成本10%以上;发行800亿元资本债用于置换存量高成本次级债并支持科技绿色贷款扩张目合金融优势技绿色贷款占比提升至15%</view>
</view>
<view class="infoC">
<view class="title">竞争优势</view>
<view class="content">背靠平安集团综合金融生态零售客户数超1.25亿AUM近4.2万亿元科技投入持续高位数字化经营与风控模型行业领先对公绿色科创普惠贷款增速均超10%非息收入占比提升至36%以上资本充足率高于监管底线且拨备覆盖率250%+资产质量稳健</view>
</view>
<view class="infoC">
<view class="title">竞争劣势</view>
<view class="content">净息差仅1.87%且同比收窄51bps营收与净利润双降个人贷款规模下滑10.6%规模增速3.3%低于行业平均ROE跌破11%成本收入比27.7%仍高于股份行头部标杆对公与同业业务市场份额仍小存款成本刚性利率下行周期盈利弹性受限</view>
</view>
</view>
<view v-if="selectInDepthAnalysis==1" class="">
<view class="section">业务结构分析</view>
<view class="section">业务板块详情</view>
</view>
</block>
</view>
</scroll-view>
<view class="bottomC fixed flex">
<view class="inputC flex1">
<input type="text" v-model="eventComment" placeholder="对比股票..." placeholder-style="color:#666" confirm-type="send" @confirm="sendEventComment()"/>
</view>
<view class="contrastShareC flex">
<view class="item">
<image class="icon" src="/pagesStock/static/icon/contrast.png" mode="heightFix"></image>
<view>对比</view>
</view>
<view class="item" @click="clickComment()">
<image class="icon" src="/pagesStock/static/icon/optional.png" mode="heightFix"></image>
<view>自选</view>
</view>
<view class="item" @click="clickFollow()">
<image class="icon" src="/pagesStock/static/icon/share.png" mode="heightFix"></image>
<view>分享</view>
</view>
</view>
</view>
<uni-popup ref="industryRank" type="bottom">
</uni-popup>
</view>
</template>
<script >
import { inject } from 'vue'
export default {
data() {
return {
navH:inject('navHeight'),
keywords:'',
contentTop:'',
tabList:[{
title:'公司档案'
},
{
title:'深度分析'
},
{
title:'股票行情'
},
{
title:'财务全景'
},
{
title:'盈利预测'
}],
selectTab:0,
companyFilesList:[{
title:'股权结构'
},
{
title:'管理团队'
},
{
title:'分支机构'
},
{
title:'工商信息'
}], //公司档案分类
selectCompanyFiles:0,
inDepthAnalysisList:[{
title:'战略分析'
},
{
title:'业务结构'
},
{
title:'产业链'
},
{
title:'发展历程'
}],//深度分析分类
selectInDepthAnalysis:0,
}
},
onLoad() {
this.contentTop = this.navH + (20+70+30)/750*inject('windowWidth')
},
methods: {
/**
* @param {Object} index
*/
clickTabItem(index)
{
if(this.selectTab!=index) {
this.selectTab = index
}
},
/**
* 点击选择公司档案
* @param {Object} index
*/
clickCompanyFilesItem(index)
{
if(this.selectCompanyFiles!=index) {
this.selectCompanyFiles = index
}
},
/**
* @param {Object} index
*/
clickInDepthAnalysisItem(index)
{
if(this.selectInDepthAnalysis!=index) {
this.selectInDepthAnalysis = index
}
}
}
}
</script>
<style lang="less">
page
{
background-color: #070707;
}
.topBg
{
top: 0;
left: 0;
width: 100%;
height: auto;
}
.searchC
{
background-color: #292929B3;
left: 0;
right: 0;
margin: 20rpx 25rpx 0;
padding: 0 25rpx;
height: 70rpx;
border-radius: 35rpx;
font-size: 22rpx;
font-weight: 500;
.icon
{
margin-right: 12rpx;
width: 25rpx;
height: auto;
}
input
{
height: 100%;
color: white;
}
}
.stockDetailsC
{
left: 0;
right: 0;
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));;
.basicInfoC {
background-color: white;
margin: 0 25rpx;
padding: 22rpx 20rpx 40rpx;
border-radius: 10rpx;
.categoryLabelC
{
font-size: 24rpx;
font-weight: 500;
color: #71675D;
.category
{
margin-right: 14rpx;
padding: 0 12rpx;
line-height: 34rpx;
border: solid 1rpx #71675D;
border-radius: 5rpx;
}
}
.priceC
{
margin-top: 10rpx;
padding: 0 6rpx 16rpx;
border-bottom: solid 1rpx #E7E7E7;
font-weight: 500;
.currentChgC
{
margin-right: 40rpx;
color: #EC3440;
.current
{
font-size: 48rpx;
font-weight: 900;
}
.chg
{
font-size: 24rpx;
text-align: center;
}
}
.priceIndexC
{
font-size: 24rpx;
color: #71675D;
.indexC
{
height: 40rpx;
.content.up
{
color: #EC3440;
}
.content.down
{
color: #345423;
}
}
.indexC.marginR
{
margin-left: 80rpx;
}
}
}
.section
{
margin-top: 14rpx;
font-size: 28rpx;
font-weight: bold;
color: #2B2B2B;
}
.infoC
{
height: 40rpx;
font-size: 22rpx;
color: #71675D;
.rightInfoC {
margin-left: 32rpx;
}
.icon
{
margin-right: 15rpx;
width: 26rpx;
height: auto;
}
.title
{
margin-right: 18rpx;
font-weight: 500;
}
.content
{
font-weight: bold;
text-align: right;
}
.title.important,.content.important
{
color: #BB8520;
}
.content.up
{
color: #EC3440;
}
}
.progressC
{
background-color: #345423;
margin: 20rpx 10rpx 0;
height: 10rpx;
border-radius: 5rpx;
.buy
{
background-color: #EC3440;
width: 42%;
height: 100%;
border-radius: 5rpx;
}
}
.buySaleC
{
margin: 10rpx 0;
padding: 0 10rpx 20rpx;
font-size: 22rpx;
font-weight: bold;
border-bottom: solid 1rpx #E7E7E7;
.buy
{
color: #EC3440;
}
.sale
{
color: #345423;
text-align: right;
}
}
.companyInfo
{
display: flex;
margin-top: 16rpx;
font-size: 22rpx;
font-weight: 500;
color: #71675D;
.title
{
margin-right: 10rpx;
font-weight: bold;
}
.expand
{
color: #BB8520;
}
}
}
.otherInfoC
{
background-color: white;
margin: 20rpx 25rpx 0;
border-radius: 10rpx;
.tabC
{
white-space: nowrap;
margin: 0 20rpx;
border-bottom: solid 1rpx #E7E7E7;
.item
{
display: inline-block;
margin-right: 40rpx;
line-height: 70rpx;
font-size: 26rpx;
font-weight: 500;
color: #999;
}
.item.select
{
border-bottom: solid 1rpx#F2C369;
font-size: 28rpx;
font-weight: bold;
color: #2B2B2B;
}
}
.companyFilesList
{
white-space: nowrap;
margin: 22rpx 26rpx 0;
.item
{
display: inline-block;
background-color: #F6F6F6;
margin-right: 20rpx;
padding: 0 12rpx;
line-height: 46rpx;
border-radius: 5rpx;
font-size: 24rpx;
font-weight: 500;
color: #939393;
}
.item.select
{
background-color: #F3C368;
font-weight: bold;
color: #070707;
}
}
.managementTeamList {
padding: 0 20rpx;
.positionNumC
{
height: 70rpx;
.position
{
margin-right: 11rpx;
font-size: 28rpx;
font-weight: bold;
}
.num
{
padding: 0 14rpx;
line-height: 30rpx;
border-radius: 5rpx;
font-size: 20rpx;
font-weight: bold;
color: white;
}
.num.director
{
background-color: #99AFEC;
}
.num.supervisor
{
background-color: #B499EC;
}
.num.other
{
background-color: #B5B5C9;
}
}
.item
{
background-color: #FAFAFC;
margin-bottom: 20rpx;
padding: 20rpx 25rpx 20rpx 20rpx;
border-radius: 10rpx;
.avatarC
{
margin-right: 18rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
font-size: 30rpx;
font-weight: bold;
color: white;
.sexC
{
right: 0;
bottom: 0;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
border: solid 2rpx white;
.icon
{
width: 16rpx;
height: auto;
}
}
.sexC.female
{
background-color: #FA5A93;
}
.sexC.male
{
background-color: #3E6CFC;
}
}
.avatarC.director
{
background-color: #99AFEC;
}
.avatarC.supervisor
{
background-color: #B499EC;
}
.avatarC.other
{
background-color: #B5B5C9;
}
.name
{
margin-right: 13rpx;
font-size: 24rpx;
font-weight: bold;
color: #666;
}
.position
{
font-size: 22rpx;
font-weight: 500;
color: #999;
}
.date
{
font-size: 20rpx;
font-weight: 500;
color: #999;
text-align: right;
}
.educationAgeC
{
margin-top: 8rpx;
.label
{
margin-right: 10rpx;
background-color: #F1F1F1;
line-height: 30rpx;
padding: 0 16rpx;
font-size: 20rpx;
font-weight: 500;
color: #999;
}
}
}
.expandMoreC
{
height: 80rpx;
border-bottom: solid 1rpx #E7E7E7;
font-size: 24rpx;
font-weight: 500;
color: #C9C9C9;
.arrow
{
margin-left: 18rpx;
width: 11rpx;
height: auto;
}
}
}
.branchList
{
margin-top: 38rpx;
padding: 0 20rpx;
.item
{
background-color: #FAFAFC;
margin-bottom: 20rpx;
padding: 20rpx;
border-radius: 10rpx;
.titleStatusC
{
font-size: 28rpx;
font-weight: bold;
color: #2B2B2B;
.statusC
{
padding: 0 10rpx;
line-height: 28rpx;
border-radius: 15rpx;
font-size: 20rpx;
font-weight: 500;
}
.statusC.exist
{
background-color: #FFF7E9;
border: solid 1rpx #F2C369;
color: #F2C369;
.icon
{
margin-right: 3rpx;
width: 16rpx;
height: auto;
}
}
}
.infoC
{
height: 50rpx;
.infoItem
{
.title
{
margin-right: 16rpx;
font-size: 22rpx;
font-weight: 500;
color: #999;
}
.content
{
font-size: 24rpx;
font-weight: bold;
color: #2A2A2A;
text-align: right;
}
}
.infoItem.leftInfo
{
margin-right: 20rpx;
}
.infoItem.rightInfo
{
margin-left: 20rpx;
}
}
.infoC.topInfo
{
margin-top: 10rpx;
}
}
}
.businessInfoList
{
padding: 0 20rpx;
.section
{
line-height: 72rpx;
font-size: 28rpx;
font-weight: bold;
color: #2B2B2B;
}
.infoC
{
background-color: #FAFAFC;
border-radius: 10rpx;
padding: 12rpx 20rpx;
.infoItem
{
line-height: 40rpx;
}
.title
{
font-size: 22rpx;
font-weight: 500;
color: #999;
}
.content
{
font-size: 24rpx;
font-weight: 500;
color: #2A2A2A;
}
.content.code
{
color: #BB8520;
}
.content.rightAlign
{
text-align: right;
}
}
.infoC.mainBussiness
{
padding: 20rpx;
}
}
.strategicAnalysisList
{
padding: 0 20rpx;
.section
{
line-height: 72rpx;
font-size: 28rpx;
font-weight: bold;
color: #2B2B2B;
}
.infoC
{
background-color: #FAFAFC;
border-radius: 10rpx;
padding: 12rpx 20rpx;
margin-bottom: 20rpx;
.infoItem
{
line-height: 40rpx;
}
.title
{
font-size: 22rpx;
font-weight: 500;
color: #2A2A2A;
}
.content
{
margin-top: 10rpx;
font-size: 20rpx;
font-weight: 500;
color: #999;
}
.content.code
{
color: #BB8520;
}
.content.rightAlign
{
text-align: right;
}
}
}
}
}
.bottomC
{
background-color: black;
padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
left: 0;
right: 0;
bottom: 0;
.inputC
{
background-color:#424143;
margin-right: 20rpx;
padding: 0 33rpx;
height: 70rpx;
border-radius: 35rpx;
input
{
height: 100%;
font-size: 26rpx;
font-weight: 500;
}
}
.contrastShareC
{
.item
{
font-size: 24rpx;
font-weight: 500;
color: #FEFAF6;
text-align: center;
.icon
{
margin: 0 30rpx;
width: auto;
height: 26rpx;
}
}
}
}
</style>