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 54dcb78a31
commit 8769082215
1 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File

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

@ -1050,20 +1050,20 @@
{{ item.securityName }} {{ item.securityName }}
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.sort5 }} <div><span style="font-size: larger;">{{ item.sort5 }}</span>
<div> <div>
<div v-if="item.sort5Change > 0" class="plate_box_right"> <div v-if="item.sort5Change > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.sort5Change }}</div> <div style="color: gray;font-size: smaller;">{{ item.sort5Change }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
/> />
</div> </div>
<div v-if="item.sort5Change == 0" class="plate_box_right"> <div v-if="item.sort5Change == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</div>
</div> </div>
<div v-if="item.sort5Change < 0" class="plate_box_right"> <div v-if="item.sort5Change < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.sort5Change) }} {{ Math.abs(item.sort5Change) }}
</div> </div>
<img <img
@ -1075,20 +1075,20 @@
</div> </div>
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.sort10 }} <div><span style="font-size: larger;">{{ item.sort10 }}</span>
<div> <div>
<div v-if="item.sort10Change > 0" class="plate_box_right"> <div v-if="item.sort10Change > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.sort10Change }}</div> <div style="color: gray;font-size: smaller;">{{ item.sort10Change }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
/> />
</div> </div>
<div v-if="item.sort10Change == 0" class="plate_box_right"> <div v-if="item.sort10Change == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</div>
</div> </div>
<div v-if="item.sort10Change < 0" class="plate_box_right"> <div v-if="item.sort10Change < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.sort10Change) }} {{ Math.abs(item.sort10Change) }}
</div> </div>
<img <img
@ -1100,20 +1100,20 @@
</div> </div>
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.sort20 }} <div><span style="font-size: larger;">{{ item.sort20 }}</span>
<div> <div>
<div v-if="item.sort20Change > 0" class="plate_box_right"> <div v-if="item.sort20Change > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.sort20Change }}</div> <div style="color: gray;font-size: smaller;">{{ item.sort20Change }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
/> />
</div> </div>
<div v-if="item.sort20Change == 0" class="plate_box_right"> <div v-if="item.sort20Change == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</div>
</div> </div>
<div v-if="item.sort20Change < 0" class="plate_box_right"> <div v-if="item.sort20Change < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.sort20Change) }} {{ Math.abs(item.sort20Change) }}
</div> </div>
<img <img
@ -1125,20 +1125,20 @@
</div> </div>
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.sort }} <div><span style="font-size: larger;">{{ item.sort }}</span>
<div> <div>
<div v-if="item.sortChange > 0" class="plate_box_right"> <div v-if="item.sortChange > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.sortChange }}</div> <div style="color: gray;font-size: smaller;">{{ item.sortChange }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
/> />
</div> </div>
<div v-if="item.sortChange == 0" class="plate_box_right"> <div v-if="item.sortChange == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</div>
</div> </div>
<div v-if="item.sortChange < 0" class="plate_box_right"> <div v-if="item.sortChange < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.sortChange) }} {{ Math.abs(item.sortChange) }}
</div> </div>
<img <img
@ -1150,11 +1150,11 @@
</div> </div>
</div> </div>
<div class="list_plate_box_turnover"> <div class="list_plate_box_turnover">
<div>{{ (item.turnover/100).toFixed(2) }} <div style="font-size: larger;">{{ (item.turnover/100).toFixed(2) }}
<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: #d9001b">{{ (item.turnoverChange/100*-1).toFixed(2) }}</div> <div style="color: gray;font-size: smaller;">{{ (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"
@ -1164,7 +1164,7 @@
<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: gray;font-size: smaller;">
{{ Math.abs((item.turnoverChange/100).toFixed(2))*-1 }} {{ Math.abs((item.turnoverChange/100).toFixed(2))*-1 }}
</div> </div>
<img <img
@ -1176,20 +1176,20 @@
</div> </div>
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.turnoverRatio.toFixed(2) }} <div style="font-size: larger;">{{ item.turnoverRatio.toFixed(2) }}
<div> <div>
<div v-if="item.turnoverRatioChange > 0" class="plate_box_right"> <div v-if="item.turnoverRatioChange > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.turnoverRatioChange.toFixed(2) }}</div> <div style="color: gray;font-size: smaller;">{{ item.turnoverRatioChange.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"
/> />
</div> </div>
<div v-if="item.turnoverRatioChange == 0" class="plate_box_right"> <div v-if="item.turnoverRatioChange == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</div>
</div> </div>
<div v-if="item.turnoverRatioChange < 0" class="plate_box_right"> <div v-if="item.turnoverRatioChange < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.turnoverRatioChange.toFixed(2)) }} {{ Math.abs(item.turnoverRatioChange.toFixed(2)) }}
</div> </div>
<img <img
@ -1202,20 +1202,20 @@
</div> </div>
<div class="list_plate_box_turnover"> <div class="list_plate_box_turnover">
<div>{{ (item.turnover5/100).toFixed(2) }} <div style="font-size:larger;">{{ (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*-1).toFixed(2) }}</div> <div style="color: gray;font-size: smaller;">{{ (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"
/> />
</div> </div>
<div v-if="item.turnover5Change == 0" class="plate_box_right"> <div v-if="item.turnover5Change == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</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: gray;font-size: smaller;">
{{ Math.abs((item.turnover5Change/100).toFixed(2))*-1 }} {{ Math.abs((item.turnover5Change/100).toFixed(2))*-1 }}
</div> </div>
<img <img
@ -1227,20 +1227,20 @@
</div> </div>
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.turnover5Ratio.toFixed(2) }} <div style="font-size: larger;">{{ item.turnover5Ratio.toFixed(2) }}
<div> <div>
<div v-if="item.turnover5RatioChange > 0" class="plate_box_right"> <div v-if="item.turnover5RatioChange > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.turnover5RatioChange.toFixed(2) }}</div> <div style="color: gray;font-size: smaller;">{{ item.turnover5RatioChange.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"
/> />
</div> </div>
<div v-if="item.turnover5RatioChange == 0" class="plate_box_right"> <div v-if="item.turnover5RatioChange == 0" class="plate_box_right">
<div>-</div> <div style="color: gray;font-size: smaller;">-</div>
</div> </div>
<div v-if="item.turnover5RatioChange < 0" class="plate_box_right"> <div v-if="item.turnover5RatioChange < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.turnover5RatioChange.toFixed(2)) }} {{ Math.abs(item.turnover5RatioChange.toFixed(2)) }}
</div> </div>
<img <img
@ -1253,10 +1253,10 @@
</div> </div>
<div class="list_plate_box_turnover"> <div class="list_plate_box_turnover">
<div>{{ (item.turnover10/100).toFixed(2) }} <div style="font-size: larger;">{{ (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*-1).toFixed(2) }}</div> <div style="color: gray;font-size: smaller;">{{ (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"
@ -1266,7 +1266,7 @@
<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: gray;font-size: smaller;">
{{ Math.abs((item.turnover10Change/100).toFixed(2)) * -1 }} {{ Math.abs((item.turnover10Change/100).toFixed(2)) * -1 }}
</div> </div>
<img <img
@ -1278,10 +1278,10 @@
</div> </div>
</div> </div>
<div class="list_plate_box"> <div class="list_plate_box">
<div>{{ item.turnover10Ratio.toFixed(2) }} <div style="font-size: larger;">{{ item.turnover10Ratio.toFixed(2) }}
<div> <div>
<div v-if="item.turnover10RatioChange > 0" class="plate_box_right"> <div v-if="item.turnover10RatioChange > 0" class="plate_box_right">
<div style="color: #d9001b">{{ item.turnover10RatioChange.toFixed(2) }}</div> <div style="color: gray;font-size: smaller;">{{ item.turnover10RatioChange.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"
@ -1291,7 +1291,7 @@
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.turnover10RatioChange < 0" class="plate_box_right"> <div v-if="item.turnover10RatioChange < 0" class="plate_box_right">
<div style="color: #8fc320"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(item.turnover10RatioChange.toFixed(2)) }} {{ Math.abs(item.turnover10RatioChange.toFixed(2)) }}
</div> </div>
<img <img
@ -1307,7 +1307,7 @@
<div> <span style="color: #d9001b;font-size: larger;">{{ Math.trunc(item.riseNumber) }}</span> <span style="color:gray"> / </span> <span style="color: #8fc320;font-size: larger;">{{ Math.trunc(item.lossesNumber) }}</span> <span style="color:gray"> / </span> <span style="color: #666666;font-size: larger;">{{ Math.trunc(item.flatNumber) }}</span> <div> <span style="color: #d9001b;font-size: larger;">{{ Math.trunc(item.riseNumber) }}</span> <span style="color:gray"> / </span> <span style="color: #8fc320;font-size: larger;">{{ Math.trunc(item.lossesNumber) }}</span> <span style="color:gray"> / </span> <span style="color: #666666;font-size: larger;">{{ Math.trunc(item.flatNumber) }}</span>
<div style="display:flex;"> <div style="display:flex;">
<div v-if="item.riseNumberChange > 0" class="plate_box_right"> <div v-if="item.riseNumberChange > 0" class="plate_box_right">
<div style="color: gray">{{ Math.trunc(item.riseNumberChange) }}</div> <div style="color: gray;font-size: smaller;">{{ Math.trunc(item.riseNumberChange) }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
@ -1317,7 +1317,7 @@
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.riseNumberChange < 0" class="plate_box_right"> <div v-if="item.riseNumberChange < 0" class="plate_box_right">
<div style="color: gray"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(Math.trunc(item.riseNumberChange)) }} {{ Math.abs(Math.trunc(item.riseNumberChange)) }}
</div> </div>
<img <img
@ -1327,7 +1327,7 @@
</div> </div>
<div v-if="item.lossesNumberChange > 0" class="plate_box_right"> <div v-if="item.lossesNumberChange > 0" class="plate_box_right">
<div style="color: gray">{{ Math.trunc(item.lossesNumberChange) }}</div> <div style="color: gray;font-size: smaller;">{{ Math.trunc(item.lossesNumberChange) }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
@ -1337,7 +1337,7 @@
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.lossesNumberChange < 0" class="plate_box_right"> <div v-if="item.lossesNumberChange < 0" class="plate_box_right">
<div style="color: gray"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(Math.trunc(item.lossesNumberChange)) }} {{ Math.abs(Math.trunc(item.lossesNumberChange)) }}
</div> </div>
<img <img
@ -1347,17 +1347,18 @@
</div> </div>
<div v-if="item.flatNumberChange > 0" class="plate_box_right"> <div v-if="item.flatNumberChange > 0" class="plate_box_right">
<div style="color: gray">{{ Math.trunc(item.flatNumberChange) }}</div> <div style="color: gray;font-size: smaller;">{{ Math.trunc(item.flatNumberChange) }}</div>
<img <img
src="../../static/home_paiming_shangsheng.png" src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon" class="liate_box_icon"
/> />
</div> </div>
<div v-if="item.flatNumberChange == 0" class="plate_box_right"> <div v-if="item.flatNumberChange == 0" class="plate_box_right">
<div>-</div> <div>-</div>
</div> </div>
<div v-if="item.flatNumberChange < 0" class="plate_box_right"> <div v-if="item.flatNumberChange < 0" class="plate_box_right">
<div style="color: gray"> <div style="color: gray;font-size: smaller;">
{{ Math.abs(Math.trunc(item.flatNumberChange)) }} {{ Math.abs(Math.trunc(item.flatNumberChange)) }}
</div> </div>
<img <img

Write Preview
Loading…
Cancel
Save