'增加服务端文件'
This commit is contained in:
453
server/index.html
Normal file
453
server/index.html
Normal file
@@ -0,0 +1,453 @@
|
||||
<!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="js/vue.global.prod.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">
|
||||
<div class="left">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品</th>
|
||||
<th>销售</th>
|
||||
<th>回购</th>
|
||||
<th>高/低</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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]?.bidprice}}</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>
|
||||
|
||||
|
||||
const {createApp} = Vue
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
message: 'Hello Vue!',
|
||||
time: "",
|
||||
status: null,
|
||||
items: [],
|
||||
oldItems: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
displayStatus() {
|
||||
let that = this
|
||||
// 根据 status 的值返回相应的字符串
|
||||
if (that.status === 1) {
|
||||
return '开盘';
|
||||
} else if (that.status === 0) {
|
||||
return '收盘';
|
||||
} else {
|
||||
return '未知状态'; // 处理其他可能的状态
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFlag() {
|
||||
let that = this
|
||||
fetch('https://19year.cn/jin/api.php?type=flag') // 替换为你的接口地址
|
||||
.then(response => {
|
||||
// console.log(response)
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// console.log(data)
|
||||
that.status = data.status; // 将获取的数据存储到 data 中
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was a problem with the fetch operation:', error);
|
||||
});
|
||||
},
|
||||
getPq() {
|
||||
let that = this
|
||||
// let items = reactive({items:[]});
|
||||
fetch('https://19year.cn/jin/api.php?type=pq') // 替换为你的接口地址
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
that.items = data.items
|
||||
that.oldItems = data.items
|
||||
// that.status = data.status; // 将获取的数据存储到 data 中
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was a problem with the fetch operation:', error);
|
||||
});
|
||||
},
|
||||
updateTime() {
|
||||
let that = this
|
||||
const now = new Date();
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
};
|
||||
that.time = now.toLocaleString('zh-CN', options);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getFlag(); // 初始加载数据
|
||||
this.getPq();
|
||||
this.updateTime();
|
||||
setInterval(() => {
|
||||
this.getFlag(); // 每隔一定时间获取数据
|
||||
this.getPq();
|
||||
this.updateTime();
|
||||
}, 1000); // 5000 毫秒（5 秒）
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user