1.
This commit is contained in:
zw199166
252
pagesStock/stockCenterDetails/cwDetails.vue
Normal file
252
pagesStock/stockCenterDetails/cwDetails.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="平安银行(000001)" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
<view class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
|
||||
<view style="margin: 0 20rpx; height: 99rpx;">
|
||||
<scroll-view scroll-x style="white-space: nowrap;" scroll-with-animation="true"
|
||||
:scroll-into-view="'tab-' + activeIndex" show-scrollbar="false">
|
||||
<view style="display: inline-block; box-sizing: border-box;">
|
||||
<view @click="activeIndex = index" v-for="(item,index) in tabList" :key="index"
|
||||
:id="'tab-' + index" style="display: inline-block; text-align: center; line-height: 98rpx;"
|
||||
:style="{'margin-right': (index == tabList.length - 1 ? '0' : '40rpx'), color: (activeIndex == index ? '#2B2B2B' : '#999999'), 'font-size': (activeIndex == index ? '28rpx' : '26rpx'), 'border-bottom': (activeIndex == index ? '1rpx solid #F2C369' : 'none'), 'font-weight': (activeIndex == index ? 'bold' : '500')}">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view style="height: 1rpx; background-color: #E7E7E7; margin: 0 20rpx;"></view>
|
||||
|
||||
<view style="height: 84rpx; display: flex; align-items: center; margin: 0 20rpx;">
|
||||
<view style="flex: 1; display: grid; gap: 28rpx; overflow: scroll; white-space: nowrap; margin-right: 20rpx;" :style="{'grid-template-columns': `repeat(${filterList.length}, 110rpx)`}">
|
||||
<view @click="filterIndex = index" v-for="(item,index) in filterList" :key="index" style="height: 45rpx; margin-top: 30rpx; font-size: 24rpx; color: #070707; font-weight: 500; display: flex; align-items: center; justify-content: center; color: #939393; background-color: #F6F6F6; font-size: 22rpx; font-weight: 500; border-radius: 5rpx; padding: 3rpx 10rpx;" :style="{color: (filterIndex == index ? '#070707' : '#939393'), 'background-color': (filterIndex == index ? '#F2C369' : '#F6F6F6')}">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view style="color: #F2C369; font-size: 22rpx; font-weight: 500; border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx; height: 43rpx; display: flex; align-items: center; justify-content: center;">
|
||||
<text>最近8期</text>
|
||||
<image style="width: 11rpx; height: 6rpx; margin-left: 10rpx;" src="/pagesStock/static/icon/all-down-ed.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+(otherTop)+'px;'">
|
||||
<view style="display: flex; color: #666666; font-size: 20rpx; font-weight: 500; margin: 0 20rpx;">
|
||||
<view>
|
||||
<view style="height: 60rpx; background-color: #FAFAFC;"></view>
|
||||
<view v-for="(item,index) in leftList" :key="index" style="line-height: 60rpx; padding-right: 20rpx;" :style="{'background-color' : (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="flex: 1; white-space: nowrap; overflow: scroll; display: flex;">
|
||||
<view v-for="(item,index) in 8" :key="index" style="font-size: 18rpx; text-align: center;">
|
||||
<view style="padding: 0 10rpx; line-height: 60rpx; background-color: #FAFAFC;">2025Q3</view>
|
||||
<view v-for="(item,index) in leftList" :key="index" style="line-height: 60rpx;" :style="{'background-color' : (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
|
||||
1.87
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
inject
|
||||
} from 'vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navH: inject('navHeight'),
|
||||
contentTop: '',
|
||||
otherTop: '',
|
||||
activeIndex: 0,
|
||||
tabList: ['盈利能力', '每股指标', '成长能力', '资产负债表', '现金流量指标'],
|
||||
filterIndex: 0,
|
||||
filterList: ['全部','年报','中报','一季度','三季度'],
|
||||
|
||||
leftList: ['营收增长率%', '净利润增长率%', '扣非净利润增长率%', '归母净利润增长率%', '经营现金流增长率%', '总资产增长率%', '净资产增长率%', '固定']
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.activeIndex = e.index
|
||||
this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
|
||||
this.otherTop = this.navH + 204 / 750 * inject('windowWidth')
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page {
|
||||
background-color: #070707;
|
||||
}
|
||||
|
||||
.topBg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.stockDetailsC {
|
||||
left: 25rpx;
|
||||
width: calc(100vw - 50rpx);
|
||||
background-color: white;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
overflow: hidden;
|
||||
bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.industryRankPop {
|
||||
background-color: white;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
|
||||
.popTitle {
|
||||
margin: 0 20rpx;
|
||||
line-height: 100rpx;
|
||||
border-bottom: solid 1rpx #E7E7E7;
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.closeC {
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 40rpx 26rpx;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 20rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionDateC {
|
||||
padding: 30rpx 26rpx;
|
||||
|
||||
.section {
|
||||
margin-right: 11rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #2B2B2B;
|
||||
}
|
||||
|
||||
.industryC {
|
||||
background-color: #FFF7E9;
|
||||
padding: 0 15rpx;
|
||||
line-height: 34rpx;
|
||||
border: solid 1rpx #F2C369;
|
||||
border-radius: 18rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #F2C369;
|
||||
|
||||
.icon {
|
||||
margin-right: 3rpx;
|
||||
width: 16rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #71675D;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 25rpx;
|
||||
|
||||
.item {
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
width: calc((100% - 40rpx)/2);
|
||||
border: solid 1rpx #FCE2B2;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.detailPopup {
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user