Lxy
/
gupiao_web_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改趋势板块表头内容、、）

Browse Source
dev
laixingyu 3 years ago
parent a146b432c0
commit 635d18b11a
1 changed files with 204 additions and 26 deletions
Show Stats Download Patch File Download Diff File

230
src/views/trend/index.vue
Unescape View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!--v-show 用于创建多个不同的头--> <!--v-show 用于创建多个不同的头-->
<div class="all_list_head" v-show="trendTimePeriod[0].is"> <div class="all_list_head" v-if="trendTimePeriod[0].is">
<div class="all_head_left"> <div class="all_head_left">
<div class="all_head_name">东财指数</div> <div class="all_head_name">东财指数</div>
<div class="head_plate_box"> <div class="head_plate_box">
@ -424,7 +424,7 @@
</div> </div>
</div> </div>
<!--当日趋势--> <!--当日趋势-->
<div class="all_list_head" v-show="trendTimePeriod[1].is"> <div class="all_list_head" v-else-if="trendTimePeriod[1].is">
<div class="all_head_left"> <div class="all_head_left">
<div class="all_head_name">东财指数</div> <div class="all_head_name">东财指数</div>
<div class="head_plate_box"> <div class="head_plate_box">
@ -456,6 +456,36 @@
/> />
</div> </div>
</div> </div>
<div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank">
能量值
</div>
<div class="module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
<div class="module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
</div>
<div class="all_head_breakeven">涨跌幅</div>
<div class="head_plate_box"> <div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank"> <div class="all__head_plate" @click="selectPlateRank">
成交额 成交额
@ -485,6 +515,35 @@
/> />
</div> </div>
</div> </div>
<div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank">
成交排名
</div>
<div class="module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
<div class="module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
</div>
<div class="head_plate_box"> <div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank"> <div class="all__head_plate" @click="selectPlateRank">
成交占比 成交占比
@ -659,19 +718,113 @@
/> />
</div> </div>
</div> </div>
<div class="all_head_breakeven">涨停占比</div> <div class="head_plate_box">
<div class="all_head_breakeven">跌停占比</div> <div class="all__head_plate" @click="selectPlateRank">
<div class="all_head_breakeven">上涨占比</div> 下跌
<div class="all_head_breakeven">平盘占比</div>
<div class="all_head_breakeven">下跌占比</div>
</div> </div>
<div class="module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div> </div>
<div class="all_list_head" v-show="!trendTimePeriod[0].is && !trendTimePeriod[1].is"> <div class="module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
</div>
<div class="all_head_breakeven">是否新高</div>
<div class="all_head_breakeven">是否新低</div>
</div>
</div>
<div class="all_list_head" v-else-if="!trendTimePeriod[0].is && !trendTimePeriod[1].is">
<div class="all_head_left"> <div class="all_head_left">
<div class="all_head_name">东财指数</div> <div class="all_head_name">东财指数</div>
<div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank" v-if = "trendTimePeriod[2].is">
5日排名
</div>
<div class="all__head_plate" @click="selectPlateRank" v-else-if = "trendTimePeriod[3].is">
10日排名
</div>
<div class="all__head_plate" @click="selectPlateRank" v-else-if = "trendTimePeriod[4].is">
20日排名
</div>
<div class="all__head_plate" @click="selectPlateRank" v-else>
30日排名
</div>
<div class="module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
<div class="module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
</div>
<div class="head_plate_box"> <div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank"> <div class="all__head_plate" @click="selectPlateRank">
当日排名 能量值
</div>
<div class="module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
<div class="module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
</div>
<div class="all_head_breakeven">涨跌幅</div>
<div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank">
成交排名
</div> </div>
<div class="module_head_icon" v-if="allPlateRank"> <div class="module_head_icon" v-if="allPlateRank">
<img <img
@ -901,11 +1054,35 @@
/> />
</div> </div>
</div> </div>
<div class="all_head_breakeven">涨停占比</div> <div class="head_plate_box">
<div class="all_head_breakeven">跌停占比</div> <div class="all__head_plate" @click="selectPlateRank">
<div class="all_head_breakeven">上涨占比</div> 下跌
<div class="all_head_breakeven">平盘占比</div> </div>
<div class="all_head_breakeven">下跌占比</div> <div class="module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
<div class="module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -1033,8 +1210,9 @@
<div class="list_plate_box_turnover"> <div class="list_plate_box_turnover">
<div>{{ (item.turnover/100).toFixed(2) }} <div>{{ (item.turnover/100).toFixed(2) }}
<div> <div>
<div v-if="item.turnoverChange > 0" class="plate_box_right"> <!--成交量计算为 前一日 - 当前日，所以正值表示缩量，负值为放量-->
<div style="color: #d9001b">{{ (item.turnoverChange/100).toFixed(2) }}</div> <div v-if="item.turnoverChange < 0" class="plate_box_right">
<div style="color: #d9001b">{{ (item.turnoverChange/100*-1).toFixed(2) }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
@ -1043,9 +1221,9 @@
<div v-if="item.turnoverChange == 0" class="plate_box_right"> <div v-if="item.turnoverChange == 0" class="plate_box_right">
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.turnoverChange < 0" class="plate_box_right"> <div v-if="item.turnoverChange > 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: #8fc320">
{{ Math.abs((item.turnoverChange/100).toFixed(2)) }} {{ Math.abs((item.turnoverChange/100).toFixed(2))*-1 }}
</div> </div>
<img <img
src="../../static/home_paiming_xiajiang.png" src="../../static/home_paiming_xiajiang.png"
@ -1084,8 +1262,8 @@
<div class="list_plate_box_turnover"> <div class="list_plate_box_turnover">
<div>{{ (item.turnover5/100).toFixed(2) }} <div>{{ (item.turnover5/100).toFixed(2) }}
<div> <div>
<div v-if="item.turnover5Change > 0" class="plate_box_right"> <div v-if="item.turnover5Change < 0" class="plate_box_right">
<div style="color: #d9001b">{{ (item.turnover5Change/100).toFixed(2) }}</div> <div style="color: #d9001b">{{ (item.turnover5Change/100*-1).toFixed(2) }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
@ -1094,9 +1272,9 @@
<div v-if="item.turnover5Change == 0" class="plate_box_right"> <div v-if="item.turnover5Change == 0" class="plate_box_right">
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.turnover5Change < 0" class="plate_box_right"> <div v-if="item.turnover5Change > 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: #8fc320">
{{ Math.abs((item.turnover5Change/100).toFixed(2)) }} {{ Math.abs((item.turnover5Change/100).toFixed(2))*-1 }}
</div> </div>
<img <img
src="../../static/home_paiming_xiajiang.png" src="../../static/home_paiming_xiajiang.png"
@ -1135,8 +1313,8 @@
<div class="list_plate_box_turnover"> <div class="list_plate_box_turnover">
<div>{{ (item.turnover10/100).toFixed(2) }} <div>{{ (item.turnover10/100).toFixed(2) }}
<div> <div>
<div v-if="item.turnover10Change > 0" class="plate_box_right"> <div v-if="item.turnover10Change < 0" class="plate_box_right">
<div style="color: #d9001b">{{ (item.turnover10Change/100).toFixed(2) }}</div> <div style="color: #d9001b">{{ (item.turnover10Change/100*-1).toFixed(2) }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
@ -1145,9 +1323,9 @@
<div v-if="item.turnover10Change == 0" class="plate_box_right"> <div v-if="item.turnover10Change == 0" class="plate_box_right">
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.turnover10Change < 0" class="plate_box_right"> <div v-if="item.turnover10Change > 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: #8fc320">
{{ Math.abs((item.turnover10Change/100).toFixed(2)) }} {{ Math.abs((item.turnover10Change/100).toFixed(2)) * -1 }}
</div> </div>
<img <img
src="../../static/home_paiming_xiajiang.png" src="../../static/home_paiming_xiajiang.png"

Write Preview
Loading…
Cancel
Save