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 1fa13abb1d
commit 314a9aa134
1 changed files with 522 additions and 15 deletions
Show Stats Download Patch File Download Diff File

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

@ -31,12 +31,13 @@
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<div class="all_list_head"> <!--v-show 用于创建多个不同的头-->
<div class="all_list_head" v-show="trendTimePeriod[0].is">
<div class="all_head_left"> <div class="all_head_left">
<div class="all_head_name">名称(东财2级)</div> <div class="all_head_name">东财指数</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">
排名 5日排名
</div> </div>
<div class="module_head_icon" v-if="allPlateRank"> <div class="module_head_icon" v-if="allPlateRank">
<img <img
@ -65,7 +66,7 @@
</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">
5日排名 10日排名
</div> </div>
<div class="module_head_icon" v-if="allPlateRank"> <div class="module_head_icon" v-if="allPlateRank">
<img <img
@ -94,7 +95,7 @@
</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">
10日排名 20日排名
</div> </div>
<div class="module_head_icon" v-if="allPlateRank"> <div class="module_head_icon" v-if="allPlateRank">
<img <img
@ -123,7 +124,123 @@
</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">
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="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="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="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">
5日占比
</div> </div>
<div class="module_head_icon" v-if="allPlateRank"> <div class="module_head_icon" v-if="allPlateRank">
<img <img
@ -150,12 +267,393 @@
/> />
</div> </div>
</div> </div>
<div class="all_head_turnover">成交额</div> <div class="head_plate_box">
<div class="all_head_turnover_ratio">成交占比</div> <div class="all__head_plate" @click="selectPlateRank">
<div class="all_head_turnover_sort">成交排名</div> 10日成交
<div class="all_head_breakeven">上涨</div> </div>
<div class="all_head_breakeven">平盘</div> <div class="module_head_icon" v-if="allPlateRank">
<div class="all_head_breakeven">下跌</div> <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">
上涨
</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">
平盘
</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">
下跌
</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 class="all_list_head" v-show="!trendTimePeriod[0].is">
<div class="all_head_left">
<div class="all_head_name">东财指数</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="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="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="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="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="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="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="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="all_head_breakeven">跌停占比</div>
<div class="all_head_breakeven">上涨占比</div>
<div class="all_head_breakeven">平盘占比</div>
<div class="all_head_breakeven">下跌占比</div>
</div> </div>
</div> </div>
<div <div
@ -239,7 +737,7 @@
<div class="rosefall_list_head"> <div class="rosefall_list_head">
<div class="rosefall_head_left"> <div class="rosefall_head_left">
<div class="arosefall__head_date">交易日期</div> <div class="arosefall__head_date">交易日期</div>
<div class="rosefall_head_name">东财行业指数2级</div> <div class="rosefall_head_name">东财2级行业指数</div>
<div class="rosefall_head_breakeven">涨停数</div> <div class="rosefall_head_breakeven">涨停数</div>
<div class="rosefall_head_breakeven">涨停数变化</div> <div class="rosefall_head_breakeven">涨停数变化</div>
<div class="rosefall_head_plate_box"> <div class="rosefall_head_plate_box">
@ -792,9 +1290,13 @@ export default {
// 趋势时间段选择 // 趋势时间段选择
trendTimePeriod: [ trendTimePeriod: [
{ {
name: "当日趋势", name: "综合趋势",
is: true, is: true,
}, },
{
name: "当日趋势",
is: false,
},
{ {
name: "5日趋势", name: "5日趋势",
is: false, is: false,
@ -2001,6 +2503,7 @@ export default {
} }
.all { .all {
width: 66%; width: 66%;
height: 50%;
.all_head { .all_head {
padding: 20px 0; padding: 20px 0;
display: flex; display: flex;
@ -2033,6 +2536,8 @@ export default {
.all_head_name { .all_head_name {
width: 120px; width: 120px;
text-align: center; text-align: center;
white-space: normal;
word-wrap: break-word;
} }
.all_head_turnover{ .all_head_turnover{
width: 85%0px; width: 85%0px;
@ -2052,10 +2557,12 @@ export default {
} }
.head_plate_box { .head_plate_box {
text-align: center; text-align: center;
width: 90px; width: 80px;
display: flex; display: flex;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
white-space: normal;
word-break: break-word;
.module_head_icon { .module_head_icon {
margin-left: 4px; margin-left: 4px;
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save