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 2c40e74577
commit d21bd93ffe
1 changed files with 274 additions and 1 deletions
Show Stats Download Patch File Download Diff File

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

@ -163,6 +163,152 @@
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<div class="rosefall">
<div class="rosefall_head">
<div
v-for="(item, index) in trendTimePeriod"
:key="index"
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
@click="trendTimePeriodClick(item.name)"
>
{{ item.name }}
</div>
</div>
<div class="rosefall_list_head">
<div class="rosefall_head_left">
<div class="arosefall__head_date">交易日期</div>
<div class="rosefall_head_name">东财行业指数2级</div>
<div class="rosefall_head_breakeven">涨停数</div>
<div class="rosefall_head_breakeven">涨停数变化</div>
<div class="rosefall_head_plate_box">
<div class="rosefall_head_plate" @click="selectPlateRank">
排名
</div>
<div class="rosefall_module_head_icon" v-if="allPlateRank">
<img
src="../../static/shengxu_true.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
</div>
<div class="rosefall_module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
</div>
</div>
</div>
<div class="rosefall_head_ranking_box" @click="selectRankChange">
<div>排名变化</div>
<div class="rosefall_module_head_icon" v-if="allRankChange">
<img
src="../../static/shengxu_true.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
</div>
<div class="rosefall_module_head_icon" v-else>
<img
src="../../static/shengxu_false.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_true.png"
class="rosefall_head_icon"
mode="scaleToFill"
/>
</div>
</div>
</div>
<div
v-if="tendencyList.length == 0"
style="
font-weight: bold;
color: #999999;
text-align: center;
margin-top: 50px;
"
>
暂无数据
</div>
<div v-else>
<div
class="rosefall_all_list"
v-for="(item, index) in tendencyList"
:key="index"
@click="rowClick(item)"
>
<div class="rosefall_all_list_left">
<div class="rosefall_all_list_date">
{{ item.businessDate }}
</div>
<div class="rosefall_all_list_name">
{{ item.securityName }}
</div>
<div class="rosefall_all__list_breakeven">涨停</div>
<div class="rosefall_all__list_breakeven">跌停</div>
<div class="rosefall_list_plate_box">
<div>{{ item.sort }}</div>
<div>
<div v-if="item.sortChange > 0" class="rosefall_plate_box_right">
<img
src="../../static/home_paiming_shangsheng.png"
class="rosefall_liate_box_icon"
/>
<div style="color: #d9001b">{{ item.sortChange }}</div>
</div>
<div v-if="item.sortChange == 0" class="rosefall_plate_box_right">
<div>-</div>
</div>
<div v-if="item.sortChange < 0" class="rosefall_plate_box_right">
<img
src="../../static/home_paiming_xiajiang.png"
class="rosefall_liate_box_icon"
/>
<div style="color: #8fc320">
{{ Math.abs(item.sortChange) }}
</div>
</div>
</div>
</div>
</div>
<div class="rosefall_all_list_right">
{{ item.sortChange }}
</div>
</div>
</div>
<div class="rosefall_all_pagination" v-if="allTotal > 20">
<el-pagination
layout="prev, pager, next"
:total="allTotal"
background
:page-size="20"
@current-change="currentChange"
>
</el-pagination>
</div>
</div>
<div class="highlow">
</div>
<!--
<div class="rose"> <div class="rose">
<div class="rose_head">涨停个股</div> <div class="rose_head">涨停个股</div>
<div class="rose_list_head"> <div class="rose_list_head">
@ -340,7 +486,7 @@
> >
</el-pagination> </el-pagination>
</div> </div>
</div> </div>-->
</div> </div>
<el-dialog <el-dialog
title="提示" title="提示"
@ -1642,6 +1788,133 @@ export default {
bottom: 0; bottom: 0;
} }
} }
.rosefall {
.rosefall_head {
padding: 20px 0;
display: flex;
align-items: center;
font-size: 14px;
position: sticky;
top: 0;
background-color: white;
}
.rosefall_head > div {
margin-left: 20px;
cursor: pointer;
}
.rosefall_list_head {
position: sticky;
top: 56px;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background-color: #fff9f3;
.rosefall_head_left {
display: flex;
align-items: center;
.rosefall__head_date {
width: 80px;
}
.rosefall_head_name {
width: 140px;
text-align: center;
}
.rosefall_head_breakeven {
width: 90px;
text-align: center;
}
.rosefall_head_plate_box {
text-align: center;
width: 60px;
display: flex;
justify-content: center;
cursor: pointer;
.rosefall_module_head_icon {
margin-left: 4px;
display: flex;
flex-direction: column;
.rosefall_head_icon {
width: 9px;
height: 5px;
margin-top: 2px;
}
}
}
}
.rosefall_head_ranking_box {
text-align: center;
width: 100px;
display: flex;
justify-content: center;
cursor: pointer;
.rosefall_module_head_icon {
margin-left: 4px;
display: flex;
flex-direction: column;
.rosefall_head_icon {
width: 9px;
height: 5px;
margin-top: 2px;
}
}
}
}
.rosefall_all_list {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
border-bottom: 1px solid #ececec;
.rosefall_all_list_left {
display: flex;
align-items: center;
.rosefall_all_list_date {
width: 80px;
}
.rosefall_all_list_name {
width: 140px;
text-align: center;
}
.rosefall_all__list_breakeven {
width: 70px;
text-align: center;
}
.rosefall_list_plate_box {
text-align: center;
width: 90px;
display: flex;
justify-content: center;
.rosefall_plate_box_right {
display: flex;
align-items: center;
margin-left: 10px;
}
.rosefall_liate_box_icon {
width: 9px;
height: 5px;
}
}
}
.rosefall_all_list_right {
text-align: center;
flex: 1;
}
}
.rosefall_all_pagination {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
position: relative;
bottom: 0;
}
}
.rose_head { .rose_head {
font-weight: bold; font-weight: bold;
padding: 20px; padding: 20px;

Write Preview
Loading…
Cancel
Save