1.
This commit is contained in:
178
pagesStock/stockCenterDetails/bkydmx.vue
Normal file
178
pagesStock/stockCenterDetails/bkydmx.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="板块异动明细" :hideNavBg="true"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
||||
|
||||
<view class="stockDetailsC fixed" style="background-color: white; border-radius: 10rpx; overflow: hidden; margin: 25rpx;" :style="'top:'+contentTop+'px;'">
|
||||
|
||||
<view style="height: 86rpx;">
|
||||
<scroll-view scroll-x style="white-space: nowrap; height: 100%;">
|
||||
<view style="display: flex; align-items: center; height: 100%; font-weight: 500;">
|
||||
<view @click="activeIndex = index" v-for="(item,index) in bkList" :key="index" style="display: flex; align-items: center; justify-content: center; line-height: 85rpx; margin: 0 20rpx;" :style="{color: (activeIndex == index ? '#2B2B2B' : '#999999'), 'border-bottom': (activeIndex == index ? '1rpx solid #F2C369' : 'none'), 'font-size' : (activeIndex == index ? '28rpx' : '26rpx')}">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view style="height: 1rpx; background-color: #E7E7E7; margin: 0 20rpx;"></view>
|
||||
|
||||
<view style="height: 48rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; margin: 23rpx 40rpx;">
|
||||
<view @click="filterIndex = index" style="height: 45rpx; display: flex; align-items: center; justify-content: center; color: #939393; font-size: 24rpx; font-weight: 500; border-radius: 5rpx;" :style="{color: (filterIndex == index ? '#070707' : '#939393'), 'border': (filterIndex == index ? '1rpx solid #F2C369' : '1rpx solid #E5E5E5'), 'background-color' : (filterIndex == index ? '#F2C369' : '#fff')}" v-for="(item,index) in bkFilters" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view style="margin: 0 20rpx; background-color: #FAFAFC; display: grid; grid-template-columns: 35% 20% 20% 25%;">
|
||||
<view v-for="(item,index) in ['名称', '涨幅', '连板', '板块']" :key="index" style="font-size: 22rpx; color: #666666; padding: 0 15rpx; box-sizing: border-box; font-weight: 500; line-height: 60rpx;" :style="{'text-align' : index == 0 ? 'left' : 'center'}">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y style="position: absolute; top: 241rpx; left: 0; right: 0; bottom: 0; font-size: 20rpx; font-weight: 500;">
|
||||
<view v-for="(item, index) in 30" style="margin: 0 20rpx; display: grid; grid-template-columns: 35% 20% 20% 25%;" :style="{'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
|
||||
<view style="display: flex; align-items: center; color: #666666; height: 60rpx;">
|
||||
<view style="display: flex; align-items: center; background-color: #FFF0E6; border-radius: 5rpx; padding: 0 10rpx; margin-left: 14rpx;">
|
||||
<image style="width: 15rpx; height: 17rpx;" src="/pagesStock/static/icon/all-icon-4.png" mode="widthFix"></image>
|
||||
<view style="color: #F97316; margin-left: 5rpx;">跟风</view>
|
||||
</view>
|
||||
<view style="margin-left: 10rpx;">康强电子</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; align-items: center; justify-content: center;">
|
||||
<view style="font-size: 24rpx; color: #EC3440; font-weight: bold;">+10.00%</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; align-items: center; justify-content: center;">
|
||||
<view style="color: #F3B800; padding: 0 10rpx; border-radius: 5rpx; background-color: #FFF9E6; border: 1rpx solid #F3B800; display: flex; align-items: center; justify-content: center;">2连板</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; align-items: center; justify-content: center;">
|
||||
<view style="background-color: #F4EFFF; border-radius: 5rpx; padding: 0 10rpx; color: #8B5CF6;">芯片(封装材料)</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
inject
|
||||
} from 'vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navH: inject('navHeight'),
|
||||
contentTop: '',
|
||||
activeIndex: 0,
|
||||
bkList: [{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
}, {
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
},
|
||||
{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
}
|
||||
],
|
||||
bkFilters: [
|
||||
'按涨幅',
|
||||
'按连板数',
|
||||
'只看龙头'
|
||||
],
|
||||
filterIndex: 0
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.activeIndex = e.index
|
||||
this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page {
|
||||
background-color: #070707;
|
||||
}
|
||||
|
||||
.topBg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.stockDetailsC {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user