删除 More/t.php.bak
This commit is contained in:
120
Main/ProductsModule/HK-FREE-EP/Main.php
Normal file
120
Main/ProductsModule/HK-FREE-EP/Main.php
Normal file
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
|
||||
function kanglehost_CreateSign($a, $r)
|
||||
{
|
||||
return md5($a . "hsxKjJeampw7AJtw" . $r);
|
||||
}
|
||||
|
||||
function kanglehost_GetUrl($info, $skey, $r)
|
||||
{
|
||||
$url = "";
|
||||
foreach ($info as $k => $v) {
|
||||
$url .= $k . "=" . $v . "&";
|
||||
}
|
||||
return "http://38.55.233.203:3312/api/index.php?" . $url . "r=" . $r . "&s=" . $skey . "&json=1";
|
||||
}
|
||||
|
||||
|
||||
function 展示产品($业务元数据,$产品元数据) {
|
||||
$Page = file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/Main/ProductsModule/HK-FREE-EP/s.html');
|
||||
$Page = @str_replace("<业务元数据>", 转JSON($业务元数据), $Page);
|
||||
$Page = @str_replace("<产品元数据>", 转JSON($产品元数据), $Page);
|
||||
$Page = @str_replace("<登录元数据>", 转JSON($业务元数据["extra_data"]), $Page);
|
||||
return $Page;
|
||||
}
|
||||
|
||||
function 开通产品($产品元数据,$产品唯一标识符) {
|
||||
$a = "add_vh";
|
||||
$r = rand(100000, 999999);
|
||||
|
||||
$user = 唯一随机字符串(10); // 随机生成用户名
|
||||
$pass = 唯一随机字符串(15); // 随机生成密码
|
||||
|
||||
$currentDate = date('Y-m-d'); // 获取当前日期
|
||||
$futureDate = date('Y-m-d', strtotime($currentDate . ' +30 days')); // 计算30天后的日期
|
||||
|
||||
$info = [
|
||||
"c" => "whm",
|
||||
"a" => $a,
|
||||
"init" => 1,
|
||||
"name" => $user,
|
||||
"passwd" => $pass,
|
||||
"product_id" => $产品元数据["extra_info"]
|
||||
];
|
||||
|
||||
$skey = kanglehost_CreateSign($a, $r); // 修正函数名称大小写
|
||||
$url = kanglehost_GetUrl($info, $skey, $r); // 修正函数名称大小写
|
||||
$re = @file_get_contents($url);
|
||||
$re = json_decode($re, true);
|
||||
|
||||
if (!isset($re['result'])) {
|
||||
$code = 100; // 错误处理：如果result不存在，设为100
|
||||
} else {
|
||||
$code = $re['result'];
|
||||
}
|
||||
|
||||
$储存数据 = [];
|
||||
$储存数据["username"] = $user;
|
||||
$储存数据["password"] = $pass;
|
||||
$data["data"] = $储存数据;
|
||||
if ($code == 200) {
|
||||
$data['msg'] = $re;
|
||||
$data['code'] = 200;
|
||||
} else {
|
||||
$data['msg'] = $re;
|
||||
$data['code'] = 100;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
function show_product($data) {
|
||||
$templatePath = './mods/us_m/index.html'; // 模板路径
|
||||
$variables = $data;
|
||||
|
||||
return h_t($templatePath, $variables);
|
||||
}
|
||||
|
||||
function long_product($data) {
|
||||
$date = new DateTime($data['dqtime']);
|
||||
$date->modify('+' . $data['Today'] . ' days'); // 假设'Today'是$data数组中的一个键
|
||||
|
||||
$data['dqtime'] = $date->format('Y-m-d');
|
||||
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function 删除业务($业务元数据,$产品元数据) {
|
||||
|
||||
|
||||
$username = @JSON解析($业务元数据["extra_data"])["username"];
|
||||
|
||||
$a = "del_vh";
|
||||
$r = rand(100000, 999999);
|
||||
$info = ["c" => "whm", "a" => $a, "name" => $username];
|
||||
|
||||
|
||||
$skey = kanglehost_CreateSign($a, $r); // 修正函数名称大小写
|
||||
$url = kanglehost_GetUrl($info, $skey, $r); // 修正函数名称大小写
|
||||
$re = @file_get_contents($url);
|
||||
$data['msg'] = $re;
|
||||
$re = json_decode($re, true);
|
||||
|
||||
$data['code'] = $re["result"];
|
||||
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function ready_products($data) {
|
||||
$templatePath = './mods/us_m/ready.html'; // 模板路径
|
||||
$variables = $data;
|
||||
$variables["id"] = $_GET["id"];
|
||||
return h_t($templatePath, $variables);
|
||||
}
|
||||
120
Main/ProductsModule/HK-FREE-EP/Main.php.bak
Normal file
120
Main/ProductsModule/HK-FREE-EP/Main.php.bak
Normal file
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
|
||||
function kanglehost_CreateSign($a, $r)
|
||||
{
|
||||
return md5($a . "hsxKjJeampw7AJtw" . $r);
|
||||
}
|
||||
|
||||
function kanglehost_GetUrl($info, $skey, $r)
|
||||
{
|
||||
$url = "";
|
||||
foreach ($info as $k => $v) {
|
||||
$url .= $k . "=" . $v . "&";
|
||||
}
|
||||
return "http://38.55.233.203:3312/api/index.php?" . $url . "r=" . $r . "&s=" . $skey . "&json=1";
|
||||
}
|
||||
|
||||
|
||||
function 展示产品($业务元数据,$产品元数据) {
|
||||
$Page = file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/Main/ProductsModule/HK-FREE-EP/s.html');
|
||||
$Page = @str_replace("<业务元数据>", 转JSON($业务元数据), $Page);
|
||||
$Page = @str_replace("<产品元数据>", 转JSON($产品元数据), $Page);
|
||||
$Page = @str_replace("<登录元数据>", 转JSON($业务元数据["extra_data"]), $Page);
|
||||
return $Page;
|
||||
}
|
||||
|
||||
function 开通产品($产品元数据,$产品唯一标识符) {
|
||||
$a = "add_vh";
|
||||
$r = rand(100000, 999999);
|
||||
|
||||
$user = 唯一随机字符串(10); // 随机生成用户名
|
||||
$pass = 唯一随机字符串(15); // 随机生成密码
|
||||
|
||||
$currentDate = date('Y-m-d'); // 获取当前日期
|
||||
$futureDate = date('Y-m-d', strtotime($currentDate . ' +30 days')); // 计算30天后的日期
|
||||
|
||||
$info = [
|
||||
"c" => "whm",
|
||||
"a" => $a,
|
||||
"init" => 1,
|
||||
"name" => $user,
|
||||
"passwd" => $pass,
|
||||
"product_id" => $产品元数据["extra_info"]
|
||||
];
|
||||
|
||||
$skey = kanglehost_CreateSign($a, $r); // 修正函数名称大小写
|
||||
$url = kanglehost_GetUrl($info, $skey, $r); // 修正函数名称大小写
|
||||
$re = @file_get_contents($url);
|
||||
$re = json_decode($re, true);
|
||||
|
||||
if (!isset($re['result'])) {
|
||||
$code = 100; // 错误处理：如果result不存在，设为100
|
||||
} else {
|
||||
$code = $re['result'];
|
||||
}
|
||||
|
||||
$储存数据 = [];
|
||||
$储存数据["username"] = $user;
|
||||
$储存数据["password"] = $pass;
|
||||
$data["data"] = $储存数据;
|
||||
if ($code == 200) {
|
||||
$data['msg'] = $re;
|
||||
$data['code'] = 200;
|
||||
} else {
|
||||
$data['msg'] = $re;
|
||||
$data['code'] = 100;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
function show_product($data) {
|
||||
$templatePath = './mods/us_m/index.html'; // 模板路径
|
||||
$variables = $data;
|
||||
|
||||
return h_t($templatePath, $variables);
|
||||
}
|
||||
|
||||
function long_product($data) {
|
||||
$date = new DateTime($data['dqtime']);
|
||||
$date->modify('+' . $data['Today'] . ' days'); // 假设'Today'是$data数组中的一个键
|
||||
|
||||
$data['dqtime'] = $date->format('Y-m-d');
|
||||
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function 删除业务($业务元数据,$产品元数据) {
|
||||
|
||||
|
||||
$data['status'] = '已到期';
|
||||
|
||||
$a = "del_vh";
|
||||
$r = rand(100000, 999999);
|
||||
$info = ["c" => "whm", "a" => $a, "name" => $data['username']];
|
||||
|
||||
|
||||
$skey = kanglehost_CreateSign($a, $r); // 修正函数名称大小写
|
||||
$url = kanglehost_GetUrl($info, $skey, $r); // 修正函数名称大小写
|
||||
$re = @file_get_contents($url);
|
||||
$data['msg'] = $re;
|
||||
$re = json_decode($re, true);
|
||||
|
||||
$data['code'] = $re["result"];
|
||||
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function ready_products($data) {
|
||||
$templatePath = './mods/us_m/ready.html'; // 模板路径
|
||||
$variables = $data;
|
||||
$variables["id"] = $_GET["id"];
|
||||
return h_t($templatePath, $variables);
|
||||
}
|
||||
374
Main/ProductsModule/HK-FREE-EP/s.html
Normal file
374
Main/ProductsModule/HK-FREE-EP/s.html
Normal file
@@ -0,0 +1,374 @@
|
||||
<!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 {
|
||||
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>
|
||||
375
Main/ProductsModule/HK-FREE-EP/s.html.bak
Normal file
375
Main/ProductsModule/HK-FREE-EP/s.html.bak
Normal file
@@ -0,0 +1,375 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user