449 lines
22 KiB
HTML
449 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
|
|
<title>金价</title>
|
|
<script src="vue2/vue.min.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column; /* 使内容垂直排列 */
|
|
background-color: #252525 !important;
|
|
}
|
|
|
|
.header {
|
|
position: fixed; /* 固定在顶部 */
|
|
top: 0; /* 距离顶部0 */
|
|
left: 0; /* 距离左边0 */
|
|
right: 0; /* 距离右边0 */
|
|
display: flex; /* 使用flex布局 */
|
|
justify-content: space-between; /* 左右分开 */
|
|
align-items: center; /* 垂直居中 */
|
|
/*background-color: #4CAF50; !* 标题栏背景色 *!*/
|
|
background-color: #252525 !important;
|
|
color: white; /* 字体颜色 */
|
|
padding: 10px; /* 内边距 */
|
|
font-size: 24px; /* 字体大小 */
|
|
border-bottom: 1px solid white;
|
|
z-index: 10; /* 确保在其他内容之上 */
|
|
}
|
|
|
|
.header #time {
|
|
color: red;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex: 1; /* 使容器占满剩余空间 */
|
|
margin-top: 60px; /* 留出空间给固定的标题栏 */
|
|
}
|
|
|
|
.left {
|
|
flex: 2; /* 左边占大部分 */
|
|
background-color: #252525 !important;
|
|
|
|
/*padding-top: 0;*/
|
|
padding: 10px 20px 20px 20px;
|
|
overflow: auto; /* 允许滚动 */
|
|
}
|
|
|
|
.right {
|
|
flex: 2; /* 右边占小部分 */
|
|
background-color: #252525 !important;
|
|
/*padding: 20px;*/
|
|
padding: 10px 20px 20px 20px;
|
|
overflow: auto; /* 允许滚动 */
|
|
}
|
|
|
|
|
|
/*.table-container {*/
|
|
/* margin-top: 60px; !* 留出空间给固定头部 *!*/
|
|
/* max-height: 800px; !* 设置表格的最大高度 *!*/
|
|
/* overflow-y: auto; !* 允许垂直滚动 *!*/
|
|
/*}*/
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
/*border-collapse: collapse; !* 合并边框 *!*/
|
|
border: none; /* 无边框 */
|
|
}
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: 0; /* 固定在顶部 */
|
|
background-color: #f2f2f2; /* 表头背景色 */
|
|
z-index: 1; /* 确保表头在其他内容之上 */
|
|
}
|
|
|
|
th, td {
|
|
/*border: 1px solid white;*/
|
|
/*padding: 4px;*/
|
|
/*text-align: left;*/
|
|
border: none; /* 无边框 */
|
|
color: red; /* 表头文字颜色 */
|
|
text-align: center; /* 内容居中 */
|
|
}
|
|
|
|
/*tr:nth-child(1) {*/
|
|
/* background-color: #000; !* 表头背景色 *!*/
|
|
/*}*/
|
|
/*tr:nth-child(2n) {*/
|
|
/* background-color: #252525; !* 偶数行背景色 *!*/
|
|
/*}*/
|
|
/*tr:nth-child(2n+1) {*/
|
|
/* background-color: #000; !* 奇数行背景色 *!*/
|
|
/*}*/
|
|
tr:nth-child(odd) {
|
|
background-color: #000; /* 奇数行背景色 */
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #252525; /* 偶数行背景色 */
|
|
}
|
|
|
|
th {
|
|
background-color: #252525; /* 表头背景色 */
|
|
color: white; /* 表头文字颜色 */
|
|
}
|
|
|
|
.row-title {
|
|
color: #ffbf24;
|
|
|
|
}
|
|
p{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.down{color:#0f0}
|
|
.up{color:red}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="header">
|
|
<div>贵金属行情 <span style="color:red;font-size: 14px"> --- {{ displayStatus }}</span></div>
|
|
<div id="time">{{ time }}</div>
|
|
</div>
|
|
<div class="container" v-if="items.length > 0 && oldItems.length > 0">
|
|
<div class="left">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>商品</th>
|
|
<th>销售</th>
|
|
<th>回购</th>
|
|
<th>高/低</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<!--(items[13] && items[13].askprice >= items[13].open) ? 'up' : 'down'"-->
|
|
<td class="row-title">黄金9999</td>
|
|
<td :class="items[0].askprice >= items[0].open?'up':'down'">{{ items[0].bidprice }}</td>
|
|
<td :class="items[0].askprice >= items[0].open?'up':'down'">{{ items[0].askprice }}</td>
|
|
<td>
|
|
<p :class="items[0].high >= oldItems[0].highNumber?'up':'down'" style="color: red !important;">{{ items[0].high }}</p>
|
|
<p :class="items[0].low >= oldItems[0].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[0].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">黄金T+D</td>
|
|
<td :class="items[16].askprice >= items[16].open?'up':'down'">{{ items[16].bidprice}}</td>
|
|
<td :class="items[16].askprice >= items[16].open?'up':'down'">{{ items[16].askprice}}</td>
|
|
<td>
|
|
<p :class="items[16].high >= oldItems[16].highNumber?'up':'down'" style="color: red !important;">{{ items[16].high }}</p>
|
|
<p :class="items[16].low >= oldItems[16].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[16].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">黄金</td>
|
|
<td :class="items[1].askprice >= items[1].open?'up':'down'">{{ items[1].bidprice}}</td>
|
|
<td :class="items[1].askprice >= items[1].open?'up':'down'">{{ items[1].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[1].high >= oldItems[1].highNumber?'up':'down'" style="color: red !important;">{{ items[1].high }}</p>
|
|
<p :class=" items[1].low >= oldItems[1].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[1].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">白银</td>
|
|
<td :class="items[11].askprice >= items[11].open?'up':'down'">{{ items[11].bidprice}}</td>
|
|
<td :class="items[11].askprice >= items[11].open?'up':'down'">{{ items[11].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[11].high >= oldItems[11].highNumber?'up':'down'" style="color: red !important;">{{ items[11].high }}</p>
|
|
<p :class=" items[11].low >= oldItems[11].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[11].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">铂金</td>
|
|
<td :class="items[19].askprice >= items[19].open?'up':'down'">{{ items[19].bidprice}}</td>
|
|
<td :class="items[19].askprice >= items[19].open?'up':'down'">{{ items[19].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[19].high >= oldItems[19].highNumber?'up':'down'" style="color: red !important;">{{ items[19].high }}</p>
|
|
<p :class=" items[19].low >= oldItems[19].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[19].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">钯金</td>
|
|
<td :class="items[2].askprice >= items[2].open?'up':'down'">{{ items[2].bidprice}}</td>
|
|
<td :class="items[2].askprice >= items[2].open?'up':'down'">{{ items[2].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[2].high >= oldItems[2].highNumber?'up':'down'" style="color: red !important;">{{ items[2].high }}</p>
|
|
<p :class=" items[2].low >= oldItems[2].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[2].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">铑金</td>
|
|
<td :class="items[14].askprice >= items[14].open?'up':'down'">{{ items[14].bidprice}}</td>
|
|
<td :class="items[14].askprice >= items[14].open?'up':'down'">{{ items[14].askprice!='NaN'? items[14].askprice:'' }}</td>
|
|
<td>
|
|
<p :class=" items[14].high >= oldItems[14].highNumber?'up':'down'" style="color: red !important;">{{ items[14].high }}</p>
|
|
<p :class=" items[14].low >= oldItems[14].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[14].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">铱</td>
|
|
<td :class="items[9].askprice >= items[9].open?'up':'down'">{{ items[9].bidprice}}</td>
|
|
<td :class="items[9].askprice >= items[9].open?'up':'down'">{{ items[9].askprice!='NaN'? items[9].askprice:'' }}</td>
|
|
<td>
|
|
<p :class=" items[9].high >= oldItems[9].highNumber?'up':'down'" style="color: red !important;">{{ items[9].high }}</p>
|
|
<p :class=" items[9].low >= oldItems[9].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[9].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">钌</td>
|
|
<td :class="items[20].askprice >= items[20].open?'up':'down'">{{ items[20].bidprice}}</td>
|
|
<td :class="items[20].askprice >= items[20].open?'up':'down'">{{ items[20].askprice!='NaN'? items[20].askprice:'' }}</td>
|
|
<td>
|
|
<p :class=" items[20].high >= oldItems[20].highNumber?'up':'down'" style="color: red !important;">{{ items[20].high }}</p>
|
|
<p :class=" items[20].low >= oldItems[20].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[20].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">白银T+D</td>
|
|
<td :class="items[5].askprice >= items[5].open?'up':'down'">{{ items[5].bidprice}}</td>
|
|
<td :class="items[5].askprice >= items[5].open?'up':'down'">{{ items[5].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[5].high >= oldItems[5].highNumber?'up':'down'" style="color: red !important;">{{ items[5].high }}</p>
|
|
<p :class=" items[5].low >= oldItems[5].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[5].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">铂金9995</td>
|
|
<td :class="items[15].askprice >= items[15].open?'up':'down'">{{ items[15].bidprice}}</td>
|
|
<td :class="items[15].askprice >= items[15].open?'up':'down'">{{ items[15].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[15].high >= oldItems[15].highNumber?'up':'down'" style="color: red !important;">{{ items[15].high }}</p>
|
|
<p :class=" items[15].low >= oldItems[15].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[15].low }}</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="right">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>商品</th>
|
|
<th>销售</th>
|
|
<th>回购</th>
|
|
<th>高/低</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="row-title">美黄金</td>
|
|
<td :class="items[13].askprice >= items[13].open?'up':'down'">{{ items[13].bidprice}}</td>
|
|
<td :class="items[13].askprice >= items[13].open?'up':'down'">{{ items[13].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[13].high >= oldItems[13].highNumber?'up':'down'" style="color: red !important;">{{ items[13].high }}</p>
|
|
<p :class=" items[13].low >= oldItems[13].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[13].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">美白银</td>
|
|
<td :class="items[4].askprice >= items[4].open?'up':'down'">{{ items[4].bidprice}}</td>
|
|
<td :class="items[4].askprice >= items[4].open?'up':'down'">{{ items[4].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[4].high >= oldItems[4].highNumber?'up':'down'" style="color: red !important;">{{ items[4].high }}</p>
|
|
<p :class=" items[4].low >= oldItems[4].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[4].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">美铂金</td>
|
|
<td :class="items[12].askprice >= items[12].open?'up':'down'">{{ items[12].bidprice}}</td>
|
|
<td :class="items[12].askprice >= items[12].open?'up':'down'">{{ items[12].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[12].high >= oldItems[12].highNumber?'up':'down'" style="color: red !important;">{{ items[12].high }}</p>
|
|
<p :class=" items[12].low >= oldItems[12].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[12].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">美钯金</td>
|
|
<td :class="items[18].askprice >= items[18].open?'up':'down'">{{ items[18].bidprice}}</td>
|
|
<td :class="items[18].askprice >= items[18].open?'up':'down'">{{ items[18].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[18].high >= oldItems[18].highNumber?'up':'down'" style="color: red !important;">{{ items[18].high }}</p>
|
|
<p :class=" items[18].low >= oldItems[18].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[18].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">美铑金</td>
|
|
<td :class="items[21].askprice >= items[21].open?'up':'down'">{{ items[21].bidprice}}</td>
|
|
<td :class="items[21].askprice >= items[21].open?'up':'down'">{{ items[21].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[21].high >= oldItems[21].highNumber?'up':'down'" style="color: red !important;">{{ items[21].high }}</p>
|
|
<p :class=" items[21].low >= oldItems[21].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[21].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">伦敦金</td>
|
|
<td :class="items[7].askprice >= items[7].open?'up':'down'">{{ items[7].bidprice}}</td>
|
|
<td :class="items[7].askprice >= items[7].open?'up':'down'">{{ items[7].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[7].high >= oldItems[7].highNumber?'up':'down'" style="color: red !important;">{{ items[7].high }}</p>
|
|
<p :class=" items[7].low >= oldItems[7].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[7].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">伦敦银</td>
|
|
<td :class="items[22].askprice >= items[22].open?'up':'down'">{{ items[22].bidprice}}</td>
|
|
<td :class="items[22].askprice >= items[22].open?'up':'down'">{{ items[22].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[22].high >= oldItems[22].highNumber?'up':'down'" style="color: red !important;">{{ items[22].high }}</p>
|
|
<p :class=" items[22].low >= oldItems[22].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[22].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">伦敦铂</td>
|
|
<td :class="items[3].askprice >= items[3].open?'up':'down'">{{ items[3].bidprice}}</td>
|
|
<td :class="items[3].askprice >= items[3].open?'up':'down'">{{ items[3].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[3].high >= oldItems[3].highNumber?'up':'down'" style="color: red !important;">{{ items[3].high }}</p>
|
|
<p :class=" items[3].low >= oldItems[3].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[3].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">伦敦钯</td>
|
|
<td :class="items[6].askprice >= items[6].open?'up':'down'">{{ items[6].bidprice}}</td>
|
|
<td :class="items[6].askprice >= items[6].open?'up':'down'">{{ items[6].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[6].high >= oldItems[6].highNumber?'up':'down'" style="color: red !important;">{{ items[6].high }}</p>
|
|
<p :class=" items[6].low >= oldItems[6].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[6].low }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="row-title">美元</td>
|
|
<td :class="items[17].askprice >= items[17].open?'up':'down'">{{ items[17].bidprice}}</td>
|
|
<td :class="items[17].askprice >= items[17].open?'up':'down'">{{ items[17].askprice}}</td>
|
|
<td>
|
|
<p :class=" items[17].high >= oldItems[17].highNumber?'up':'down'" style="color: red !important;">{{ items[17].high }}</p>
|
|
<p :class=" items[17].low >= oldItems[17].lowNumber?'up':'down'" style="color: #0f0 !important;">{{ items[17].low }}</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
data: function() {
|
|
return {
|
|
message: 'Hello Vue!',
|
|
time: "",
|
|
status: null,
|
|
items: [],
|
|
oldItems: []
|
|
};
|
|
},
|
|
computed: {
|
|
displayStatus: function() {
|
|
// 根据 status 的值返回相应的字符串
|
|
if (this.status === 1) {
|
|
return '开盘';
|
|
} else if (this.status === 0) {
|
|
return '收盘';
|
|
} else {
|
|
return '未知状态'; // 处理其他可能的状态
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getFlag: function() {
|
|
var that = this;
|
|
var url = 'https://19year.cn/jin/api.php?type=flag'; // 替换为你的接口地址
|
|
fetch(url)
|
|
.then(function(response) {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
that.status = data.status; // 将获取的数据存储到 data 中
|
|
})
|
|
.catch(function(error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
getPq: function() {
|
|
var that = this;
|
|
var url = 'https://19year.cn/jin/api.php?type=pq'; // 替换为你的接口地址
|
|
fetch(url)
|
|
.then(function(response) {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
that.items = data.items;
|
|
that.oldItems = data.items;
|
|
})
|
|
.catch(function(error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
},
|
|
updateTime: function() {
|
|
var now = new Date();
|
|
var options = {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false
|
|
};
|
|
this.time = now.toLocaleString('zh-CN', options);
|
|
}
|
|
},
|
|
mounted: function() {
|
|
var that = this;
|
|
that.getFlag(); // 初始加载数据
|
|
that.getPq();
|
|
that.updateTime();
|
|
setInterval(function() {
|
|
that.getFlag(); // 每隔一定时间获取数据
|
|
that.getPq();
|
|
that.updateTime();
|
|
}, 1000); // 每秒更新一次
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|