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

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

@ -42,27 +42,17 @@
<span style="color: #6fbb60">下跌{{ marketEqual }}家</span>
</div>
</div>
<div class="left_nav">
<div class="nav_market_text">推荐信息</div>
<div class="nav_market_right" @click="marketDetail">
<div class="left_suggest_nav">
<div class="suggest_nav_market_text">推荐信息</div>
<div class="suggest_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 class="left_suggest">
<div class="suggest_nav_list">
<div
v-for="(item, index) in tendencyNav"
v-for="(item, index) in suggestTopNav"
:key="index"
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
@click="tendencyNavClick(item.name)"
@ -70,70 +60,116 @@
{{ 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 class="list">
<el-table
:data="suggestList"
style="width: 100%"
@row-click="rowClick"
:height="tableHeight"
>
<el-table-column prop="securityCode" label="股票代码">
</el-table-column>
<el-table-column prop="securityName" label="股票名称">
</el-table-column>
<el-table-column prop="openingPrice" label="开盘价">
</el-table-column>
<el-table-column prop="closingPrice" label="收盘价">
</el-table-column>
<el-table-column prop="highestPrice" label="最高价">
</el-table-column>
<el-table-column prop="lowestPrice" label="最低价"> </el-table-column>
<el-table-column label="当日涨跌幅">
<template slot-scope="scope">
<div
style="color: #d9001b"
v-if="scope.row.riseLossesCurrentDay > 0"
>
{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
</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 style="color: #6fbb60" v-else>
-{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
</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"
/>
</template>
</el-table-column>
<el-table-column label="是否涨停">
<!-- riseStop -->
<template slot-scope="scope">
{{ scope.row.riseStop == 1 ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column label="是否跌停">
<template slot-scope="scope">
{{ scope.row.lossesStop == 1 ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column prop="volume" label="成交量"> </el-table-column>
<el-table-column prop="turnover" label="成交额"> </el-table-column>
<el-table-column prop="freeCapitalization" label="自由流通市值">
</el-table-column>
<el-table-column
prop="totalInstitutionalPositions"
label="机构持仓合计"
>
</el-table-column>
<!-- <el-table-column prop="ban" label="几天几板" width="150"> -->
<!-- </el-table-column> -->
<el-table-column prop="dayAndPlate" width="150">
<template slot="header" slot-scope="scope">
<div class="plate_sift" @click="selectPlateSift">
<div>几天几板</div>
<div class="module_head_icon" v-if="plateSift">
<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="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>
</template>
</el-table-column>
<el-table-column
prop="dongCaiIndustryIndexLevel2"
label="所属东财行业指数2级"
>
</el-table-column>
</el-table>
<div class="pagination" v-if="total > 20" ref="footer">
<el-pagination
layout="prev, pager, next"
:total="total"
background
:page-size="20"
@current-change="currentChange"
>
</el-pagination>
</div>
</div>
<!-- <div class="suggest_list_head">
<div class="suggest_head_left">
<div class="suggest_head_date">交易日期</div>
<div class="suggest_head_name">名称</div>
<div class="suggest_head_industry_name">东财行业指数2级</div>
</div>
</div>
<div
v-if="tendencyList.length == 0"
v-if="suggestList.length == 0"
style="
font-weight: bold;
color: #999999;
@ -145,8 +181,8 @@
</div>
<div v-else>
<div
class="trend_list"
v-for="(item, index) in tendencyList"
class="suggest_list"
v-for="(item, index) in suggestList"
:key="index"
>
<div class="trend_list_left">
@ -185,7 +221,7 @@
{{ item.sortChange }}
</div>
</div>
</div>
</div> -->
<!-- <div class="market_bottom_nav_text">
<div
v-for="(item, index) in marketBottomNav"
@ -564,6 +600,8 @@ export default {
current: 30,
},
],
// 推荐数据
suggestList:[],
// 趋势板块数据
tendencyList: [
{
@ -1405,6 +1443,7 @@ export default {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
//大盘信息
.left_nav {
display: flex;
align-items: center;
@ -1474,6 +1513,84 @@ export default {
cursor: pointer;
}
}
//推荐
.left_suggest_nav{
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.suggest_nav_market_text {
font-weight: bold;
}
.suggest_nav_market_right {
cursor: pointer;
font-size: 14px;
display: flex;
// align-items: center;
color: #999999;
}
.el-icon-arrow-right {
margin-left: 5px;
line-height: 16px;
}
}
.left_suggest {
margin-top: 20px;
// padding: 20px;
border: 1px solid #e8e8e8;
.suggest_nav_list {
padding: 20px 20px 5px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.suggest_list_head{
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 20px;
margin-top: 12px;
background-color: #fff9f3;
.suggest_head_left {
display: flex;
align-items: center;
.suggest_head_date {
width: 90px;
}
.suggest_head_name {
width: 120px;
text-align: center;
}
.suggest_head_industry_name{
width: 120px;
text-align: center;
}
}
}
::v-deep .el-table td {
text-align: center;
border: 0;
}
::v-deep .el-table th.is-leaf {
text-align: center;
background-color: #fff9f3;
color: #333333;
padding: 13px 0;
}
.columnar_value {
display: flex;
align-items: center;
justify-content: center;
}
.columnar_value > span {
margin-right: 30px;
}
}
}
.main_right {
// background-color: white;

Write Preview
Loading…
Cancel
Save