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 3b20d63a85
commit 1fa13abb1d
1 changed files with 108 additions and 7 deletions
Show Stats Download Patch File Download Diff File

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

@ -63,9 +63,96 @@
/>
</div>
</div>
<div>成交额</div>
<div>成交占比</div>
<div>成交排名</div>
<div class="head_plate_box">
<div class="all__head_plate" @click="selectPlateRank">
5日排名
</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="all__head_plate" @click="selectPlateRank">
10日排名
</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="all__head_plate" @click="selectPlateRank">
20日排名
</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_turnover">成交额</div>
<div class="all_head_turnover_ratio">成交占比</div>
<div class="all_head_turnover_sort">成交排名</div>
<div class="all_head_breakeven">上涨</div>
<div class="all_head_breakeven">平盘</div>
<div class="all_head_breakeven">下跌</div>
@ -281,7 +368,7 @@
</el-pagination>
</div>
</div>
<div class="highlow">
<!-- <div class="highlow">
<div class="highlow_head">
<div
v-for="(item, index) in trendTimePeriod"
@ -423,7 +510,7 @@
>
</el-pagination>
</div>
</div>
</div>-->
<!--
<div class="rose">
<div class="rose_head">涨停个股</div>
@ -1906,13 +1993,14 @@ export default {
justify-content: space-between;
}
.main > div {
width: 33%;
// width: 33%;
height: calc(100vh - 150px);
background-color: white;
border-radius: 8px;
overflow-y: auto;
}
.all {
width: 66%;
.all_head {
padding: 20px 0;
display: flex;
@ -1946,6 +2034,18 @@ export default {
width: 120px;
text-align: center;
}
.all_head_turnover{
width: 85%0px;
text-align: center;
}
.all_head_turnover_ratio{
width: 80px;
text-align: center;
}
.all_head_turnover_sort{
width: 80px;
text-align: center;
}
.all_head_breakeven {
width: 60px;
text-align: center;
@ -2040,6 +2140,7 @@ export default {
}
}
.rosefall {
width: 33%;
.rosefall_head {
padding: 20px 0;
display: flex;

Write Preview
Loading…
Cancel
Save