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> <span style="color: #6fbb60">下跌{{ marketEqual }}家</span>
</div> </div>
</div> </div>
<div class="left_nav"> <div class="left_suggest_nav">
<div class="nav_market_text">推荐信息</div> <div class="suggest_nav_market_text">推荐信息</div>
<div class="nav_market_right" @click="marketDetail"> <div class="suggest_nav_market_right" @click="marketDetail">
<div>我的收藏</div> <div>我的收藏</div>
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
</div> </div>
<div class="left_bottom_nav"> <div class="left_suggest">
<div class="market_top_nav_text"> <div class="suggest_nav_list">
<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 <div
v-for="(item, index) in tendencyNav" v-for="(item, index) in suggestTopNav"
:key="index" :key="index"
:style="{ color: item.is ? '#EC7C00' : '#999999' }" :style="{ color: item.is ? '#EC7C00' : '#999999' }"
@click="tendencyNavClick(item.name)" @click="tendencyNavClick(item.name)"
@ -70,70 +60,116 @@
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<div class="trend_list_head"> <div class="list">
<div class="trend_head_left"> <el-table
<div class="trend__head_date">交易日期</div> :data="suggestList"
<div class="trend__head_name">东财行业指数2级</div> style="width: 100%"
<div class="head_plate_box"> @row-click="rowClick"
<div class="trend__head_plate" @click="selectPlateRank"> :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>
<div class="module_head_icon" v-if="plateRank"> <div style="color: #6fbb60" v-else>
<img -{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
src="../../static/shengxu_true.png"
class="head_icon"
mode="scaleToFill"
/>
<img
src="../../static/jiangxu_false.png"
class="head_icon"
mode="scaleToFill"
/>
</div> </div>
<div class="module_head_icon" v-else> </template>
<img </el-table-column>
src="../../static/shengxu_false.png" <el-table-column label="是否涨停">
class="head_icon" <!-- riseStop -->
mode="scaleToFill" <template slot-scope="scope">
/> {{ scope.row.riseStop == 1 ? "是" : "否" }}
<img </template>
src="../../static/jiangxu_true.png" </el-table-column>
class="head_icon" <el-table-column label="是否跌停">
mode="scaleToFill" <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> </template>
</div> </el-table-column>
<div class="head_ranking_box" @click="selectRankChange"> <el-table-column
<div>排名变化</div> prop="dongCaiIndustryIndexLevel2"
<div class="module_head_icon" v-if="rankChange"> label="所属东财行业指数2级"
<img >
src="../../static/shengxu_true.png" </el-table-column>
class="head_icon" </el-table>
mode="scaleToFill" <div class="pagination" v-if="total > 20" ref="footer">
/> <el-pagination
<img layout="prev, pager, next"
src="../../static/jiangxu_false.png" :total="total"
class="head_icon" background
mode="scaleToFill" :page-size="20"
/> @current-change="currentChange"
</div> >
<div class="module_head_icon" v-else> </el-pagination>
<img </div>
src="../../static/shengxu_false.png" </div>
class="head_icon" <!-- <div class="suggest_list_head">
mode="scaleToFill" <div class="suggest_head_left">
/> <div class="suggest_head_date">交易日期</div>
<img <div class="suggest_head_name">名称</div>
src="../../static/jiangxu_true.png" <div class="suggest_head_industry_name">东财行业指数2级</div>
class="head_icon"
mode="scaleToFill"
/>
</div>
</div> </div>
</div> </div>
<div <div
v-if="tendencyList.length == 0" v-if="suggestList.length == 0"
style=" style="
font-weight: bold; font-weight: bold;
color: #999999; color: #999999;
@ -145,8 +181,8 @@
</div> </div>
<div v-else> <div v-else>
<div <div
class="trend_list" class="suggest_list"
v-for="(item, index) in tendencyList" v-for="(item, index) in suggestList"
:key="index" :key="index"
> >
<div class="trend_list_left"> <div class="trend_list_left">
@ -185,7 +221,7 @@
{{ item.sortChange }} {{ item.sortChange }}
</div> </div>
</div> </div>
</div> </div> -->
<!-- <div class="market_bottom_nav_text"> <!-- <div class="market_bottom_nav_text">
<div <div
v-for="(item, index) in marketBottomNav" v-for="(item, index) in marketBottomNav"
@ -564,6 +600,8 @@ export default {
current: 30, current: 30,
}, },
], ],
// 推荐数据
suggestList:[],
// 趋势板块数据 // 趋势板块数据
tendencyList: [ tendencyList: [
{ {
@ -1405,6 +1443,7 @@ export default {
background-color: #ffffff; background-color: #ffffff;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
//大盘信息
.left_nav { .left_nav {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1474,6 +1513,84 @@ export default {
cursor: pointer; 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 { .main_right {
// background-color: white; // background-color: white;

Write Preview
Loading…
Cancel
Save