143 lines
5.0 KiB
Vue
143 lines
5.0 KiB
Vue
<template>
|
||
<div class="table-container">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>交易所</th>
|
||
<th>项目</th>
|
||
<th>价格 (RMB)</th>
|
||
<th>地区</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
<div class="scroll-wrapper">
|
||
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
|
||
<table>
|
||
<tbody>
|
||
<tr v-for="(item, index) in tableData" :key="index">
|
||
<td :style="{ color: item.exchangeColor }">{{ item.name }}</td>
|
||
<td>{{ item.project }}</td>
|
||
<td :style="{ color: item.priceColor }">{{ item.price }}</td>
|
||
<td :style="{ color: item.regionColor }">{{ item.area }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||
import { currentGET } from 'api/modules'
|
||
export default {
|
||
components: { vueSeamlessScroll },
|
||
data() {
|
||
return {
|
||
scrollOptions: {
|
||
step: 0.3, // 滚动速度
|
||
limitMoveNum: 2, // 限制单步滚动的条数
|
||
hoverStop: true, // 鼠标悬停是否暂停
|
||
direction: 1, // 方向（1：向上滚动）
|
||
},
|
||
tableData: [
|
||
// { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||
// { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
|
||
// { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
|
||
// { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
|
||
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
||
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||
// { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||
// { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
|
||
// { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
|
||
// { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
|
||
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
||
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||
],
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getExchangeData();
|
||
},
|
||
methods: {
|
||
getExchangeData() {
|
||
currentGET("big4").then(res => {
|
||
|
||
console.log("交易所数据：");
|
||
//console.log(this.tableData1);
|
||
console.log(res.data);
|
||
this.tableData = res.data;
|
||
this.tableData.forEach((item, index) => {
|
||
|
||
if(index % 2 !== 0)
|
||
{
|
||
|
||
item.exchangeColor = "#1976d2";
|
||
item.priceColor = "#333333";
|
||
item.regionColor = "#333333";
|
||
this.$set(this.tableData, index, item);
|
||
}
|
||
else
|
||
{
|
||
//console.log("偶数index: " + index);
|
||
item.exchangeColor = "#ff9800";
|
||
item.priceColor = "#ff9800";
|
||
item.regionColor = "#ff9800";
|
||
this.$set(this.tableData, index, item);
|
||
//this.$set(this.tableData, index, modifiedItem);
|
||
}
|
||
});
|
||
|
||
});
|
||
// console.log("转换后交易所数据：");
|
||
// console.log(this.tableData);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.table-container {
|
||
width: 100%;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
padding-top: 10px; /* 添加顶部内边距 */
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: left;
|
||
}
|
||
|
||
th, td {
|
||
padding: 12px;
|
||
color: #333333;
|
||
font-size: 14px;
|
||
width: 25%;
|
||
}
|
||
|
||
thead {
|
||
background: #f5f7fa;
|
||
padding: 10%;
|
||
}
|
||
|
||
.scroll-wrapper {
|
||
height: 250px; /* 适配大屏，数据较多可增加高度 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-container table {
|
||
width: 100%;
|
||
}
|
||
|
||
tr {
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
tr:nth-child(even) {
|
||
background: rgba(25, 118, 210, 0.05);
|
||
}
|
||
</style>
|