375 lines
12 KiB
HTML
375 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>虚拟主机详情 - Fuxsto Host V4</title>
|
|
|
|
<script src="https://cdn.fss.fuxsto.cn/d/vue@3/dist/vue.global.js"></script>
|
|
<style>
|
|
:root {
|
|
--primary: #2A5EE5;
|
|
--secondary: #00C9B8;
|
|
--dark: #1A1F36;
|
|
--light: #F8F9FE;
|
|
}
|
|
button {
|
|
background: none; /* 去除背景色 */
|
|
border: none; /* 去除边框 */
|
|
padding: 0; /* 去除内边距 */
|
|
font: inherit; /* 继承父元素字体 */
|
|
color: inherit; /* 继承父元素字体颜色 */
|
|
cursor: pointer; /* 保持鼠标指针样式 */
|
|
}
|
|
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: var(--light);
|
|
color: var(--dark);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
padding: 3rem 0;
|
|
background: linear-gradient(135deg, var(--primary), #1A3D8C);
|
|
color: white;
|
|
border-radius: 0 0 2rem 2rem;
|
|
margin-bottom: 2rem;
|
|
animation: slideDown 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.status-badge {
|
|
background: #2ECC71;
|
|
color: white;
|
|
padding: 0.5rem 1.5rem;
|
|
border-radius: 2rem;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 1px;
|
|
animation: scaleIn 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.metric-card {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
opacity: 0;
|
|
animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
|
}
|
|
|
|
.metric-card:nth-child(1) { animation-delay: 0.4s; }
|
|
.metric-card:nth-child(2) { animation-delay: 0.6s; }
|
|
.metric-card:nth-child(3) { animation-delay: 0.8s; }
|
|
|
|
.metric-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
margin: 1rem 0;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.detail-section {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
margin: 2rem 0;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
|
|
opacity: 0;
|
|
animation: fadeInUp 0.6s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
|
}
|
|
|
|
.grid-2col {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.detail-item {
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid #EEE;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.detail-item:hover {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
.tag {
|
|
background: #FFD70020;
|
|
color: #FFA500;
|
|
padding: 0.3rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.tag:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 12px rgba(255, 165, 0, 0.2);
|
|
}
|
|
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 1rem;
|
|
color: var(--primary);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.metric-card:hover .icon {
|
|
transform: rotate(15deg) scale(1.1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="app">
|
|
<div class="header">
|
|
<div class="container">
|
|
<h1>{{a.name}}</h1>
|
|
<p class="status-badge">{{a.status}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
<div class="metric-value">4 vCPU</div>
|
|
<div class="metric-label">计算核心</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
|
</svg>
|
|
<div class="metric-value">4 GB</div>
|
|
<div class="metric-label">内存容量</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M12 2v20M2 12h20"/>
|
|
</svg>
|
|
<div class="metric-value">7 M</div>
|
|
<div class="metric-label">带宽</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h2>主机详情</h2>
|
|
<div class="grid-2col">
|
|
<div>
|
|
<div class="detail-item">
|
|
<span>主机区域</span>
|
|
<span class="tag">香港🇭🇰</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>业务ID</span>
|
|
<span>{{a.purchase_id}}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>控制面板</span>
|
|
<span>Kangle EasyPanel</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="detail-item">
|
|
<span>创建时间</span>
|
|
<span>{{a.purchase_time}}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>到期时间</span>
|
|
<span>{{a.expiry_time}}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>网络类型</span>
|
|
<span class="tag">CN2 Max</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h2>账号配置</h2>
|
|
<div class="detail-item">
|
|
<span>登陆地址</span>
|
|
<span>38.55.233.203:3312</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>登陆账号</span>
|
|
<span class="tag">{{ username }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>登陆密码</span>
|
|
<span class="tag">{{ password }}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>一键登陆</span>
|
|
<span><form normal action="http://38.55.233.203:3312/vhost/index.php?c=session&a=login" method="post" target="_blank">
|
|
<input type="hidden" name="username" :value="username" />
|
|
<input type="hidden" name="passwd" :value="password" />
|
|
<button type="submit" class="tag">登录面板</button>
|
|
</form></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const { createApp } = Vue;
|
|
|
|
// 自定义主题
|
|
const customTheme = {
|
|
"--hsl-primary": "212, 100%, 38%",
|
|
"--color-primary": "hsla(var(--hsl-primary), 1)",
|
|
"--hsl-on-primary": "0, 0%, 100%",
|
|
"--color-on-primary": "hsla(var(--hsl-on-primary), 1)",
|
|
"--hsl-primary-container": "225, 100%, 92%",
|
|
"--color-primary-container": "hsla(var(--hsl-primary-container), 1)",
|
|
"--hsl-on-primary-container": "216, 100%, 13%",
|
|
"--color-on-primary-container": "hsla(var(--hsl-on-primary-container), 1)",
|
|
"--hsl-info": "224, 13%, 39%",
|
|
"--color-info": "hsla(var(--hsl-info), 1)",
|
|
"--hsl-on-info": "0, 0%, 100%",
|
|
"--color-on-info": "hsla(var(--hsl-on-info), 1)",
|
|
"--hsl-info-container": "226, 71%, 92%",
|
|
"--color-info-container": "hsla(var(--hsl-info-container), 1)",
|
|
"--hsl-on-info-container": "223, 38%, 13%",
|
|
"--color-on-info-container": "hsla(var(--hsl-on-info-container), 1)",
|
|
"--hsl-warning": "296, 15%, 39%",
|
|
"--color-warning": "hsla(var(--hsl-warning), 1)",
|
|
"--hsl-on-warning": "0, 0%, 100%",
|
|
"--color-on-warning": "hsla(var(--hsl-on-warning), 1)",
|
|
"--hsl-warning-container": "298, 86%, 92%",
|
|
"--color-warning-container": "hsla(var(--hsl-warning-container), 1)",
|
|
"--hsl-on-warning-container": "291, 41%, 13%",
|
|
"--color-on-warning-container": "hsla(var(--hsl-on-warning-container), 1)",
|
|
"--hsl-danger": "0, 75%, 42%",
|
|
"--color-danger": "hsla(var(--hsl-danger), 1)",
|
|
"--hsl-on-danger": "0, 0%, 100%",
|
|
"--color-on-danger": "hsla(var(--hsl-on-danger), 1)",
|
|
"--hsl-danger-container": "6, 100%, 92%",
|
|
"--color-danger-container": "hsla(var(--hsl-danger-container), 1)",
|
|
"--hsl-on-danger-container": "358, 100%, 13%",
|
|
"--color-on-danger-container": "hsla(var(--hsl-on-danger-container), 1)",
|
|
"--hsl-body": "285, 100%, 99%",
|
|
"--color-body": "hsla(var(--hsl-body), 1)",
|
|
"--hsl-text": "240, 7%, 11%",
|
|
"--color-text": "hsla(var(--hsl-text), 1)",
|
|
"--hsl-on-surface-variant": "224, 7%, 29%",
|
|
"--color-on-surface-variant": "hsla(var(--hsl-on-surface-variant), 1)",
|
|
"--hsl-outline": "228, 4%, 48%",
|
|
"--color-outline": "hsla(var(--hsl-outline), 1)",
|
|
"--hsl-inverse-surface": "240, 3%, 19%",
|
|
"--color-inverse-surface": "hsla(var(--hsl-inverse-surface), 1)"
|
|
|
|
|
|
};
|
|
|
|
|
|
// 创建 Vue 应用
|
|
const app = createApp({
|
|
data() {
|
|
return {
|
|
a: <业务元数据>,
|
|
b: <产品元数据>,
|
|
aw: <登录元数据>,
|
|
username: null,
|
|
password: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.aw = Object.fromEntries(Object.entries(JSON.parse(this.aw)));
|
|
this.username = this.aw.username;
|
|
this.password = this.aw.password;
|
|
|
|
},
|
|
watch: {
|
|
},
|
|
methods: {
|
|
}
|
|
});
|
|
|
|
app.mount('#app');
|
|
</script>
|
|
</html> |