<template>
|
<el-container>
|
<el-header>
|
<home-header ref="header"></home-header>
|
</el-header>
|
<el-container class="main-wrapper">
|
<!-- <div v-if="color == 'red-bg'">
|
<div style="margin-top:150px;width: 1200px; margin: 200px auto;" >
|
<span class="stock-title">股票详情</span>
|
<span class="stock-title-en">STOCK DETAILS</span>
|
</div>
|
</div>-->
|
|
<div>
|
<backdrop1>
|
<div class="title-stock" style="">
|
<span class="stock-title">股票详情</span>
|
<span class="stock-title-en">STOCK DETAILS</span>
|
</div>
|
</backdrop1>
|
</div>
|
<el-main>
|
<div class="fat">
|
<div
|
class="table-box "
|
:style="color == 'black-bg'?'margin: 50px auto;':'margin-top: 200px;'"
|
>
|
<div class="table-cont-box">
|
<div class="table-search">
|
<el-row type="flex" justify="end">
|
<el-col :span="8">
|
<div class="test">
|
<el-input v-model="form.stock" placeholder="请输入股票代码和股票" class="search-public">
|
<!-- <el-button @click="getList" slot="append" icon="iconfont icon-search"></el-button> -->
|
</el-input>
|
<span @click="getList" class="iconfont icon-search search-stock"></span>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- <div class="table-title">
|
<ul class="clearfix">
|
<li class="pull-left">
|
<a class="list" href="javascript:;">股票详情</a>
|
</li>
|
</ul>
|
<div></div>
|
</div> -->
|
<table-box :list="list" :getData="getList" :handleOptions="handleOptions"></table-box>
|
</div>
|
</div>
|
</div>
|
<newFooter></newFooter>
|
<!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
import HomeHeader from "../../components/HeaderOrder";
|
import HomeFooter from "../../components/Footer";
|
import TableBox from "./components/table";
|
import * as api from "../../axios/api";
|
import backdrop1 from "@/components/backdrop1.vue";
|
import newFooter from "../../components/newFooter";
|
import { mapState } from "vuex";
|
export default {
|
components: {
|
HomeHeader,
|
TableBox,
|
HomeFooter,
|
backdrop1,
|
newFooter,
|
},
|
props: {},
|
data() {
|
return {
|
timer: null,
|
form: {
|
stock: "",
|
pageNum: 1,
|
pageSize: 15,
|
},
|
list: {
|
list: [],
|
},
|
loading: false,
|
refresh: false, // 刷新中
|
changeTextClass: {}, // 表格中的数据变化
|
siteInfo: {},
|
};
|
},
|
watch: {},
|
computed: {
|
...mapState({
|
color: (state) => state.systemColor,
|
}),
|
},
|
created() {
|
this.timer = setInterval(this.refreshList, 60000);
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
},
|
mounted() {
|
this.getList();
|
this.getInfoSite();
|
},
|
methods: {
|
async getInfoSite() {
|
// 获取站点详情
|
let result = await api.getInfoSite();
|
if (result.status === 0) {
|
this.siteInfo = result.data;
|
} else {
|
this.$message.error(result.msg);
|
}
|
},
|
async getList() {
|
// 获取表格数据
|
let opt = {
|
keyWords: this.form.stock,
|
pageNum: this.form.pageNum,
|
pageSize: 15,
|
};
|
this.loading = true;
|
let data = await api.getStock(opt);
|
if (data.status === 0) {
|
// data.data.list.forEach(element => {
|
// this.list.push(element)
|
// });
|
this.list = data.data;
|
} else {
|
this.$message.error(data.msg);
|
}
|
this.loading = false;
|
},
|
async refreshList() {
|
if (this.refresh || this.loading) {
|
return;
|
}
|
this.refresh = true;
|
this.changeTextClass = {};
|
// 获取表格数据
|
let opt = {
|
keyWords: this.form.stock,
|
pageNum: this.form.pageNum,
|
pageSize: 15,
|
};
|
let data = await api.getStock(opt);
|
this.refresh = false;
|
if (data.status === 0) {
|
data.data.list.forEach((element, i) => {
|
this.changeTextClass[i] = "";
|
if (data.data.list[i].nowPrice !== this.list.list[i].nowPrice) {
|
this.changeTextClass[i] = true; // 设置对应的动画过滤
|
this.list.list[i].nowPrice = data.data.list[i].nowPrice; // 现价
|
this.list.list[i].hcrate = data.data.list[i].hcrate; // 涨跌幅
|
this.list.list[i].today_max = data.data.list[i].today_max; // 最高
|
this.list.list[i].today_min = data.data.list[i].today_min; // 最低
|
}
|
});
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
handleOptions(opts) {
|
this.form = { ...this.form, ...opts };
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
// .el-main{
|
// margin-top: 200px;
|
// }
|
|
。
|
|
.table-box .page-box{
|
margin-top: 50px !important;
|
}
|
.red-bg{
|
.stock-title{
|
font-size: 36px;
|
}
|
.stock-title-en{
|
font-size: 22px;
|
}
|
}
|
.black-bg{
|
|
.stock-title{
|
font-size: 36px;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
.stock-title-en{
|
font-size: 22px;
|
font-weight: 400;
|
color: #E6003E;
|
line-height: 36px;
|
}
|
.title-stock{
|
width: 1200px;
|
margin: 250px auto;
|
margin-top:250px;
|
}
|
.fat{
|
overflow: hidden;
|
margin-top: 200px;
|
}
|
.table-search{
|
background-color: #0a1c27;
|
|
}
|
}
|
.red-bg {
|
.red-bg-bgd{
|
background-color: rgb(233, 233, 233);
|
}
|
.title-stock{
|
width: 1200px;
|
margin: 250px auto;
|
margin-top:200px;
|
}
|
|
}
|
/deep/.red-bg .el-container {
|
background: #e9e9e9;
|
}
|
.test {
|
display: flex;
|
position: relative;
|
}
|
.test > span {
|
position: absolute;
|
right: 20px;
|
top: 10px;
|
font-size: 20px;
|
}
|
/deep/ .el-main {
|
padding: 0;
|
}
|
.table-box {
|
margin-bottom: 100px;
|
width: 1200px;
|
margin: 0 auto;
|
}
|
|
.table-search {
|
padding: 20px 0;
|
}
|
.table-search > div {
|
justify-content: center !important;
|
}
|
// /deep/ .el-main{
|
// padding: 0;
|
// .table-box[data-v-ebd8dd76] {
|
// width: 100%;
|
// .table-search{
|
// width: 1200px;
|
// margin: 0 auto;
|
// }
|
// .table-title{
|
|
// }
|
// }
|
// div[data-v-ebd8dd76]{
|
// position: relative;
|
// background-color: pink;
|
// }
|
// }
|
</style>
|
