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

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

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

Write Preview
Loading…
Cancel
Save