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 baced88345
commit 0a0fb2619c
1 changed files with 207 additions and 3 deletions
Show Stats Download Patch File Download Diff File

210
src/views/home/index.vue
Unescape View File

@ -42,8 +42,151 @@
<span style="color: #6fbb60">下跌{{ marketEqual }}家</span> <span style="color: #6fbb60">下跌{{ marketEqual }}家</span>
</div> </div>
</div> </div>
<div class="market_bottom"> <div class="left_nav">
<div class="market_bottom_nav_text"> <div class="nav_market_text">推荐信息</div>
<div class="nav_market_right" @click="marketDetail">
<div>我的收藏</div>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="left_bottom_nav">
<div class="market_top_nav_text">
<div
v-for="(item, index) in suggestTopNav"
:key="index"
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
@click="marketTopNavClick(item.name)"
>
{{ item.name }}
</div>
</div>
<div class="trend_nav_list">
<div
v-for="(item, index) in tendencyNav"
:key="index"
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
@click="tendencyNavClick(item.name)"
>
{{ item.name }}
</div>
</div>
<div class="trend_list_head">
<div class="trend_head_left">
<div class="trend__head_date">交易日期</div>
<div class="trend__head_name">东财行业指数2级</div>
<div class="head_plate_box">
<div class="trend__head_plate" @click="selectPlateRank">
板块排名
</div>
<div class="module_head_icon" v-if="plateRank">
<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 class="head_ranking_box" @click="selectRankChange">
<div>排名变化</div>
<div class="module_head_icon" v-if="rankChange">
<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
v-if="tendencyList.length == 0"
style="
font-weight: bold;
color: #999999;
text-align: center;
margin-top: 50px;
"
>
暂无数据
</div>
<div v-else>
<div
class="trend_list"
v-for="(item, index) in tendencyList"
:key="index"
>
<div class="trend_list_left">
<div class="trend_list_date">
{{ item.businessDate }}
</div>
<div class="trend_list_name">
{{ item.securityName }}
</div>
<div class="list_plate_box">
<div>{{ item.sort }}</div>
<div>
<div v-if="item.sortChange > 0" class="plate_box_right">
<img
src="../../static/home_paiming_shangsheng.png"
class="liate_box_icon"
/>
<div style="color: #d9001b">{{ item.sortChange }}</div>
</div>
<div v-if="item.sortChange == 0" class="plate_box_right">
<div>-</div>
</div>
<div v-if="item.sortChange < 0" class="plate_box_right">
<img
src="../../static/home_paiming_xiajiang.png"
class="liate_box_icon"
/>
<div style="color: #8fc320">
{{ Math.abs(item.sortChange) }}
</div>
</div>
</div>
</div>
</div>
<div class="trend_list_right">
{{ item.sortChange }}
</div>
</div>
</div>
<!-- <div class="market_bottom_nav_text">
<div <div
v-for="(item, index) in marketBottomNav" v-for="(item, index) in marketBottomNav"
:key="index" :key="index"
@ -53,7 +196,7 @@
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<div id="myChart" :style="{ width: '100%', height: '600px' }"></div> <div id="myChart" :style="{ width: '100%', height: '600px' }"></div> -->
</div> </div>
</div> </div>
<div class="main_right"> <div class="main_right">
@ -282,30 +425,85 @@ export default {
name: "全部", name: "全部",
is: true, is: true,
current: "", current: "",
// 是否已缓存
hasMarkedData: false,
// 大盘上涨
marketRose: "",
// 大盘下跌
marketFall: "",
// 大盘平
marketEqual: "",
}, },
{ {
name: "上证指数", name: "上证指数",
is: false, is: false,
current: "SH", current: "SH",
code: "000001", code: "000001",
// 是否已缓存
hasMarkedData: false,
// 大盘上涨
marketRose: "",
// 大盘下跌
marketFall: "",
// 大盘平
marketEqual: "",
}, },
{ {
name: "深证指数", name: "深证指数",
is: false, is: false,
current: "SZ", current: "SZ",
code: "399001", code: "399001",
// 是否已缓存
hasMarkedData: false,
// 大盘上涨
marketRose: "",
// 大盘下跌
marketFall: "",
// 大盘平
marketEqual: "",
}, },
{ {
name: "创业板", name: "创业板",
is: false, is: false,
current: "30", current: "30",
code: "399006", code: "399006",
// 是否已缓存
hasMarkedData: false,
// 大盘上涨
marketRose: "",
// 大盘下跌
marketFall: "",
// 大盘平
marketEqual: "",
}, },
{ {
name: "科创板", name: "科创板",
is: false, is: false,
current: "688", current: "688",
code: "000688", code: "000688",
// 是否已缓存
hasMarkedData: false,
// 大盘上涨
marketRose: "",
// 大盘下跌
marketFall: "",
// 大盘平
marketEqual: "",
},
],
//推荐信息导航
suggestTopNav:[
{
name: "版块",
is: true,
// 是否已缓存
hasMarkedData: false
},
{
name: "个股",
is: false,
// 是否已缓存
hasMarkedData: false
}, },
], ],
// 大盘信息K线图导航 // 大盘信息K线图导航
@ -473,6 +671,7 @@ export default {
}; };
}, },
created() { created() {
//获取数据redis中最晚的
this.marketTopDate = this.getTime(Date.parse(new Date())); this.marketTopDate = this.getTime(Date.parse(new Date()));
this.rending(); this.rending();
document.title = "首页"; document.title = "首页";
@ -580,12 +779,17 @@ export default {
marketTopNavClick(name) { marketTopNavClick(name) {
this.marketTopNav.forEach((item) => { this.marketTopNav.forEach((item) => {
if (item.name == name) { if (item.name == name) {
console.log("marketRose: ",item.marketRose);
item.is = true; item.is = true;
riseLossesStatistics({ riseLossesStatistics({
businessDate: this.marketTopDate, businessDate: this.marketTopDate,
securityType: item.current, securityType: item.current,
}) })
.then((res) => { .then((res) => {
item.marketRose = res.data.riseNum;
item.marketFall = res.data.lossesNum;
item.marketEqual = res.data.equalNum;
this.marketRose = res.data.riseNum; this.marketRose = res.data.riseNum;
this.marketFall = res.data.lossesNum; this.marketFall = res.data.lossesNum;
this.marketEqual = res.data.equalNum; this.marketEqual = res.data.equalNum;

Write Preview
Loading…
Cancel
Save