添加 index.html
This commit is contained in:
commit
2e37fcb530
991
index.html
Normal file
991
index.html
Normal file
@ -0,0 +1,991 @@
|
||||
<script>
|
||||
var rPaddingTop = 60;
|
||||
</script>
|
||||
<script src="https://notification.randallanjie.com/r_notification.js"></script>
|
||||
<script>
|
||||
let messagekey1, messagekey2, messagekey3, messagekey4;
|
||||
rShowMessage('欢迎光临Randall的探针～<br /><a href="https://randallanjie.com/">Powered By Randall | randallanjie.com ©</a>', 0, 'up', 2000);
|
||||
function hideMessage() {
|
||||
sessionStorage.setItem('hide', 'true');
|
||||
try {
|
||||
rChangeMessage(messagekey4, '已经隐藏本次页面对话的所有弹窗，请刷新页面生效');
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
// 检查sessionStorage查看hide字段是否存在
|
||||
if (!sessionStorage.getItem('hide')) {
|
||||
messagekey1 = rShowMessage('如果有你想要的机器，可以跟我联系以获得详细资料，如果你想买机器但不知道好不好用，可以联系我让我去替你试试水👀', 0, 'down', 0);
|
||||
setTimeout(() => {
|
||||
messagekey2 = rShowMessage('点击每个设备右上角查看详情，价格，评价，购买链接（如果有的话）', 0, 'down', 0);
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
messagekey3 = rShowMessage('BTW，如果消息挡到内容了，按住对应到消息往右滑即可删除消息', 0, 'down', 0);
|
||||
messagekey4 = rShowMessage(`已经知道了？点下方隐藏本次页面对话（包括刷新）的所有弹窗<br /><button class="hide-button" onclick="hideMessage()">知道了,隐藏弹窗</button>`, 0, 'down', 0);
|
||||
}, 5000);
|
||||
}
|
||||
window.onload = function() {
|
||||
const affLinks = {
|
||||
1: {
|
||||
price: '￥139.00/月',
|
||||
notice: '24年7月30号之后续费变为149/月，新购入机器续费变为159/月'
|
||||
},
|
||||
2: {
|
||||
price: '￥139.00/月',
|
||||
notice: '24年7月30号之后续费变为149/月，新购入机器续费变为159/月'
|
||||
},
|
||||
3: {
|
||||
price: 'FREE',
|
||||
notice: '小埋六一免费送的半年，只能用来挂个探针了'
|
||||
},
|
||||
4: {
|
||||
price: '$46.60/年',
|
||||
url: 'https://bwh81.net/cart.php?a=add&pid=94'
|
||||
},
|
||||
5: {
|
||||
notice: '去年黑五购入',
|
||||
},
|
||||
6: {
|
||||
notice: '去年黑五购入',
|
||||
},
|
||||
7: {
|
||||
price: 'FREE',
|
||||
notice: '2024/06/21新开的号，看看能存活几天'
|
||||
},
|
||||
8: {
|
||||
price: 'FREE',
|
||||
notice: '2024/06/21新开的号，看看能存活几天'
|
||||
},
|
||||
9: {
|
||||
price: '$99.95/年',
|
||||
url: 'https://vps.hosting/cart/san-jose-cloud-kvm-vps/?id=145'
|
||||
},
|
||||
10: {
|
||||
price: '¥845.00/年',
|
||||
url: 'https://lisahost.com/cart.php?a=confproduct&i=0'
|
||||
},
|
||||
|
||||
13: {
|
||||
price: '$49.99/年',
|
||||
url: 'https://www.justg.com/cart.php?a=confproduct&i=1'
|
||||
},
|
||||
|
||||
14: {
|
||||
price: '$1/月',
|
||||
notice: 'Sharon打1折的机器，只有一个月，续费恢复10刀，当然我肯定不续费'
|
||||
},
|
||||
18: {
|
||||
price: '$92.29/年',
|
||||
url: 'https://bwh81.net/cart.php?a=add&pid=144'
|
||||
},
|
||||
19: {
|
||||
price: '$119.00/年',
|
||||
url: 'https://bwh81.net/cart.php?a=add&pid=131'
|
||||
},
|
||||
22: {
|
||||
price: '$3.00/月',
|
||||
url: 'https://ipraft.com/server/purchase',
|
||||
notice: '好像现在新购买的一个月就只有750G的流量了'
|
||||
},
|
||||
23: {
|
||||
price: '¥852.00/年',
|
||||
notice: '官网就是这个价，一般我等暑期特惠续费或者过年的时候续费'
|
||||
},
|
||||
24: {
|
||||
price: '¥99.00/年'
|
||||
},
|
||||
25: {
|
||||
price: '¥68.00/月'
|
||||
},
|
||||
26: {
|
||||
notice: '家里云'
|
||||
},
|
||||
};
|
||||
|
||||
const createPriceTag = (price) => {
|
||||
if (!price) return null;
|
||||
// const $priceTag = document.createElement('span');
|
||||
// $priceTag.setAttribute('style', 'background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 6px; border-radius: 3px; margin-left: 5px;');
|
||||
// $priceTag.textContent = price;
|
||||
// return $priceTag;
|
||||
return '价格: ' + price + '<br />';
|
||||
|
||||
};
|
||||
|
||||
const createPurchaseLink = (url) => {
|
||||
if (!url) return null;
|
||||
const $aLink = document.createElement('a');
|
||||
$aLink.setAttribute('class', 'buy-same-link');
|
||||
$aLink.setAttribute('target', '_blank');
|
||||
$aLink.textContent = '购买同款';
|
||||
$aLink.href = url;
|
||||
return $aLink;
|
||||
};
|
||||
|
||||
const createNotifyButton = (notice) => {
|
||||
if (!notice) return null;
|
||||
// const $btnDiv = document.createElement('div');
|
||||
// $btnDiv.setAttribute('class', 'tooltip');
|
||||
// $btnDiv.innerHTML = `<span class="tooltip-text">
|
||||
// ${notice}
|
||||
// </span>
|
||||
// <div class="tooltip-circle">
|
||||
// <span class="exclamation">!</span>
|
||||
// </div>`
|
||||
// return $btnDiv;
|
||||
return '注意事项: ' + notice + '<br />';
|
||||
};
|
||||
|
||||
const uiCards = document.querySelectorAll('.ui.card');
|
||||
uiCards.forEach((card) => {
|
||||
let cardId = card.id;
|
||||
|
||||
if (cardId && affLinks[cardId]) {
|
||||
let $aLinkBox = document.createElement('div');
|
||||
$aLinkBox.setAttribute('style', 'display: flex;\n' +
|
||||
' align-items: flex-start;\n' +
|
||||
' flex-direction: column;');
|
||||
|
||||
let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
|
||||
if ($priceTag) {
|
||||
// $aLinkBox.appendChild($priceTag);
|
||||
// $aLinkBox.innerHTML += $priceTag;
|
||||
let $purchaseLink = createPurchaseLink((typeof affLinks[cardId] === 'object') ? affLinks[cardId].url : null);
|
||||
if ($purchaseLink) {
|
||||
const $priceAndLink = document.createElement('div');
|
||||
$priceAndLink.setAttribute('style', 'display: flex; align-items: center;');
|
||||
$priceAndLink.innerHTML = $priceTag + $purchaseLink.outerHTML;
|
||||
$aLinkBox.appendChild($priceAndLink);
|
||||
} else {
|
||||
$aLinkBox.innerHTML += $priceTag;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
let $notifyBunnon = createNotifyButton((typeof affLinks[cardId] === 'object') ? affLinks[cardId].notice : null);
|
||||
if ($notifyBunnon) {
|
||||
// $aLinkBox.appendChild($notifyBunnon);
|
||||
$aLinkBox.innerHTML += $notifyBunnon;
|
||||
}
|
||||
|
||||
|
||||
// card.appendChild($aLinkBox);
|
||||
card.querySelector('.content .header .popup').insertBefore($aLinkBox, card.querySelector('.content .header .popup').children[card.querySelector('.content .header .popup').children.length - 1]);
|
||||
}
|
||||
});
|
||||
|
||||
const tooltips = document.querySelectorAll('.tooltip');
|
||||
tooltips.forEach(tooltip => {
|
||||
const tooltipText = tooltip.querySelector('.tooltip-text');
|
||||
tooltip.addEventListener('mouseenter', () => {
|
||||
// TODO: 优化位置
|
||||
});
|
||||
});
|
||||
|
||||
const td = document.querySelector('td');
|
||||
td.innerHTML = td.textContent;
|
||||
};
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.hide-button {
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.buy-same-link {
|
||||
background-color: rgb(10, 148, 242);
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
border-radius: 5px;
|
||||
margin-left: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.tooltip-circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.exclamation {
|
||||
color: black;
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
visibility: hidden;
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 10pt;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body {cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text y="1em">🍗</text></svg>'), auto;}
|
||||
|
||||
|
||||
.footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nezha-primary-btn {
|
||||
background-color: #00000073 !important;
|
||||
color: #ff84a3 !important;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.menu .container:first-child a:first-child img {
|
||||
content: url('https://randallanjie.com/static/index/img/logo.png');
|
||||
}
|
||||
|
||||
.nezha-primary-btn:hover {
|
||||
background-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--lc-color-light: rgba(235, 235, 235, 0.4);
|
||||
--bc-color-light: rgba(235, 235, 235, 0.4);
|
||||
--the-color-light: rgba(235, 235, 235, 0.6);
|
||||
--he-color-light: rgba(235, 235, 235, 0.8);
|
||||
--message-color-light: rgb(22, 22, 22, 1);
|
||||
--popup-color-light:rgba(235, 235, 235, 1);
|
||||
|
||||
--bc-color-dark: rgba(0, 0, 0, 0.4);
|
||||
--lc-color-dark: rgba(55, 55, 55, 0.4);
|
||||
--the-color-dark: rgba(35, 35, 35, 0.3);
|
||||
--he-color-dark: rgba(35, 35, 35, 0.8);
|
||||
--message-color-dark: rgb(235, 235, 235, 0.8);
|
||||
--popup-color-dark:rgba(78, 78, 78, 1);
|
||||
|
||||
|
||||
/* 注释上面一段颜色代码并取消下面注释的代码开启毛玻璃效果（图形性能开销巨大，可能导致掉帧） */
|
||||
|
||||
/* --bb: blur(15px) brightness(110%);
|
||||
--lc-color-light: rgba(255, 255, 255, 0.7);
|
||||
--bc-color-light: rgba(255, 255, 255, 0.1);
|
||||
--the-color-light: rgba(255, 255, 255, 0.4);
|
||||
--he-color-light: rgba(255, 255, 255, 0.5);
|
||||
--message-color-light: rgb(22, 22, 22, 1);
|
||||
--popup-color-light:rgba(235, 235, 235, 1);
|
||||
|
||||
--bc-color-dark: rgba(0, 0, 0, 0.3);
|
||||
--lc-color-dark: rgba(55, 55, 55, 0.8);
|
||||
--the-color-dark: rgba(70, 70, 70, 0.1);
|
||||
--he-color-dark: rgba(35, 35, 35, 0.7);
|
||||
--message-color-dark: rgb(235, 235, 235, 0.8);
|
||||
--popup-color-dark:rgba(78, 78, 78, 1); */
|
||||
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
*:not(.icon, i) {
|
||||
color: rgba(220, 220, 220, 0.95) !important;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown .menu>.item {
|
||||
color: rgba(220, 220, 220, 0.95) !important;
|
||||
}
|
||||
|
||||
|
||||
.ui .cards>.card {
|
||||
background-color: var(--lc-color-dark) !important;
|
||||
border-color: var(--lc-color-dark) !important;
|
||||
}
|
||||
|
||||
.ui .cards>.card i:not(.flag) {
|
||||
filter: saturate(60%) !important;
|
||||
}
|
||||
|
||||
|
||||
.ui.table thead th,
|
||||
.ui.table thead {
|
||||
background-color: var(--the-color-dark) !important;
|
||||
}
|
||||
|
||||
.ui.table {
|
||||
background-color: none !important;
|
||||
}
|
||||
|
||||
.ui.large.menu,
|
||||
.right.menu .menu,
|
||||
.service-status h2,
|
||||
.footer,
|
||||
.floating.message.warning,
|
||||
.floating.message.success {
|
||||
background-color: var(--he-color-dark) !important;
|
||||
}
|
||||
|
||||
.floating.message.warning,
|
||||
.floating.message.success {
|
||||
color: var(--message-color-dark) !important;
|
||||
}
|
||||
|
||||
#app .ui.fluid.accordion,
|
||||
.table {
|
||||
background-color: var(--bc-color-dark) !important;
|
||||
}
|
||||
|
||||
.ui.content.popup {
|
||||
background-color: var(--popup-color-dark) !important;
|
||||
}
|
||||
.ui.content.popup:before{
|
||||
background-color: var(--popup-color-dark) !important;
|
||||
}
|
||||
|
||||
.ui.progress small,
|
||||
td:not(.button):not(.bar):not(:has(.button, .bar)):not(:has(> small)) {
|
||||
filter: brightness(115%);
|
||||
}
|
||||
|
||||
.ui.progress .bar,
|
||||
.nb-container .ui.icon.button,
|
||||
.service-status .delay-today>i {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
.ui.button:hover {
|
||||
filter: brightness(100%) !important;
|
||||
}
|
||||
|
||||
.ui.popup:before {
|
||||
background-color: var(--popup-color-dark) !important;
|
||||
box-shadow: 0px 0px 0 0 #ffffff !important;
|
||||
}
|
||||
|
||||
.amzayo-custom-button {
|
||||
background-color: #4d4d4d8f !important;
|
||||
color: rgba(178, 178, 178, 0.95) !important;
|
||||
border: 2px solid #292929ae !important;
|
||||
}
|
||||
|
||||
.amzayo-custom-button:hover {
|
||||
background-color: #ff8457 !important;
|
||||
color: #ffffffbd !important;
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
i.amzayo-secondary-font {
|
||||
color: #727272ae !important;
|
||||
}
|
||||
|
||||
.ui.popup {
|
||||
background-color: var(--popup-color-dark) !important;
|
||||
}
|
||||
|
||||
.ui.menu .item:before {
|
||||
background: rgba(125, 125, 125, 0.15);
|
||||
}
|
||||
|
||||
.ui.menu .active.item {
|
||||
background: rgba(10, 10, 10, 0.2);
|
||||
}
|
||||
|
||||
.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
|
||||
border-left: 1px solid rgba(125, 125, 125, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* 屏幕适配 */
|
||||
|
||||
@media (min-width: 320px) {
|
||||
.ui-alerts.top-center {
|
||||
margin-left: 0px !important;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -0%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 766px) {
|
||||
.ui.container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.ui.table thead th {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--the-color-light);
|
||||
}
|
||||
|
||||
thead tr :first-child {
|
||||
border-radius: 1rem 0 0 1rem !important;
|
||||
}
|
||||
|
||||
thead tr :last-child {
|
||||
border-radius: 0 1rem 1rem 0 !important;
|
||||
}
|
||||
|
||||
/* 小卡片 */
|
||||
.ui .cards>.card {
|
||||
border-radius: 1rem;
|
||||
border: none !important;
|
||||
background-color: var(--lc-color-light);
|
||||
padding: .25rem .25rem !important;
|
||||
margin: .5rem .3rem !important;
|
||||
}
|
||||
|
||||
.cards{
|
||||
padding-left: 3.5em;
|
||||
}
|
||||
|
||||
/* 小卡片头部调整 */
|
||||
.ui.card>.content>.header,
|
||||
.ui.cards>.card>.content>.header {
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
align-items: center;
|
||||
padding-bottom: .2em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.header_info {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1rem !important;
|
||||
margin-top: .3rem !important;
|
||||
padding-right: .38rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 766px) {
|
||||
|
||||
/* 表格样式 */
|
||||
.ui.table thead {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--the-color-light);
|
||||
}
|
||||
|
||||
thead {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 小卡片 */
|
||||
.ui .cards>.card {
|
||||
border-radius: 1rem;
|
||||
background-color: var(--lc-color-light);
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* 小卡片头部调整 */
|
||||
.ui.card>.content>.header,
|
||||
.ui.cards>.card>.content>.header {
|
||||
padding-top: 0.5rem;
|
||||
display: flex;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
align-items: center;
|
||||
padding-bottom: .2em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.header_info {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1rem !important;
|
||||
padding-top: -.1rem !important;
|
||||
padding-right: .38rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义字体 */
|
||||
@font-face {
|
||||
font-family: 'Harmony Hans';
|
||||
src: url(https://cdn.amzayo.top/static/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Harmony Hans';
|
||||
}
|
||||
|
||||
*:not(.content) {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
/* 背景图片 */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: url('https://randallanjie.com/static/index/img/bg.jpg') center/cover no-repeat;
|
||||
}
|
||||
|
||||
/* 菜单颜色 */
|
||||
.ui.large.menu {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--he-color-light);
|
||||
border-radius: 0 0 1rem 1rem !important;
|
||||
}
|
||||
|
||||
.ui.menu .item:last-child {
|
||||
padding: 0 1.142em !important;
|
||||
}
|
||||
|
||||
/* 登录按钮区域 */
|
||||
.ui.simple.dropdown {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 登录之后的下拉菜单 */
|
||||
.right.menu .menu {
|
||||
border-radius: 0 0 1rem 1rem !important;
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
background-color: var(--he-color-light);
|
||||
padding: 0 0.3em !important;
|
||||
}
|
||||
|
||||
/* 登录按钮颜色（需要使用配套自定义主题） */
|
||||
.amzayo-custom-button {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: #ffffff8f;
|
||||
color: #000000cf;
|
||||
border: 2px solid #ebe1d9;
|
||||
border-radius: 1rem;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.amzayo-custom-button:hover {
|
||||
background-color: #ff8457;
|
||||
color: #ffffffbd;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/* 大卡片 */
|
||||
#app .ui.fluid.accordion {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--bc-color-light);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
#app :last-child.accordion {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 小卡片靠哪个方向对齐 */
|
||||
.cards {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.ui.card,
|
||||
.ui.cards>.card {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
|
||||
/* .ui.card,
|
||||
.ui.cards>.card {
|
||||
width: 300px !important;
|
||||
} */
|
||||
|
||||
/* 小卡片右上角的图标 */
|
||||
|
||||
i.amzayo-secondary-font {
|
||||
margin-left: auto;
|
||||
color: rgba(255, 153, 1, 0.65);
|
||||
}
|
||||
|
||||
/* 头部配置信息样式 */
|
||||
.header_info i {
|
||||
margin-top: .25rem;
|
||||
margin-right: .3rem;
|
||||
margin-left: .3rem;
|
||||
}
|
||||
|
||||
/* 更多信息卡片 */
|
||||
.ui.content.popup {
|
||||
border: none !important;
|
||||
border-radius: 1rem;
|
||||
margin: 0;
|
||||
padding: 1em !important;
|
||||
background-color: var(--popup-color-light);
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.ui.popup {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* 小三角 */
|
||||
.ui.content.popup:before {
|
||||
background-color: var(--popup-color-light);
|
||||
z-index: 9999 !important;
|
||||
border: none !important;
|
||||
box-shadow: 0px 0px 0 0 #ffffff !important;
|
||||
}
|
||||
|
||||
.ui.bottom.popup:before {
|
||||
clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
|
||||
}
|
||||
|
||||
.ui.top.popup:before {
|
||||
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
|
||||
}
|
||||
|
||||
/* 进度条圆角和颜色 */
|
||||
.ui.progress {
|
||||
border-radius: 50rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui){
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 卡片内间距，如需调整小卡片高度，可以修改下面的2rem的数字 */
|
||||
.status.cards .wide.column {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
height: 2rem !important;
|
||||
}
|
||||
|
||||
.bi::before,
|
||||
[class^="bi-"]::before,
|
||||
[class*=" bi-"]::before {
|
||||
vertical-align: middle;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
/* 状态进度条 */
|
||||
.card .bar {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.card .bar small {
|
||||
vertical-align: super;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.card .ui.progress .bar {
|
||||
min-width: 1.8em !important;
|
||||
border-radius: 13px;
|
||||
line-height: 1.65em;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
table .ui.progress .bar {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
/* 正常状态进度条颜色 */
|
||||
.nb-container .ui.progress.fine .bar {
|
||||
background-image: linear-gradient(to right, rgba(125, 252, 0, 0.6), rgba(50, 205, 50, 0.6));
|
||||
}
|
||||
|
||||
/*有点累状态进度条颜色 */
|
||||
.nb-container .ui.progress.warning .bar {
|
||||
background-image: linear-gradient(to right, rgba(255, 215, 0, 0.6), rgba(255, 125, 80, 0.6));
|
||||
}
|
||||
|
||||
/*高负载状态进度条颜色 */
|
||||
.nb-container .ui.progress.error .bar {
|
||||
background-image: linear-gradient(to right, rgba(255, 160, 120, 0.6), rgba(255, 70, 0, 0.6));
|
||||
}
|
||||
|
||||
/* 离线状态进度条颜色 */
|
||||
.ui.progress.offline .bar {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 上传下载图标颜色 */
|
||||
i.arrow.alternate.circle.down.outline.icon {
|
||||
color: rgb(0, 157, 255);
|
||||
}
|
||||
|
||||
i.arrow.alternate.circle.up.outline.icon {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
/*服务状态*/
|
||||
.nb-container .service-status .good {
|
||||
background: rgba(50, 205, 50, 0.75);
|
||||
}
|
||||
|
||||
.nb-container .service-status .warning {
|
||||
background: rgba(250, 155, 40, 0.75);
|
||||
}
|
||||
|
||||
.nb-container .service-status .danger {
|
||||
background: rgba(255, 35, 0, 0.75);
|
||||
}
|
||||
|
||||
/* 服务页面大表格背景 */
|
||||
.table {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--bc-color-light);
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
.ui.table {
|
||||
background-color: var(--bc-color-light);
|
||||
}
|
||||
|
||||
.ui.button:not(.good):not(.warning):not(.danger):hover {
|
||||
background: #e0e1e2 none;
|
||||
}
|
||||
|
||||
.ui.button:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.service-status .delay-today {
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
/* 循环流量统计标题 */
|
||||
.service-status h2 {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--he-color-light);
|
||||
border-radius: 1rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/*底部*/
|
||||
.footer {
|
||||
backdrop-filter:var(--bb);
|
||||
background-color: var(--he-color-light);
|
||||
position: fixed !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
border-radius: 1rem 1rem 0 0 !important;
|
||||
}
|
||||
|
||||
.ui.inverted.segment,
|
||||
.ui.primary.inverted.segment {
|
||||
background-color: var(--he-color-light);
|
||||
}
|
||||
|
||||
.footer .container,
|
||||
.footer .container a {
|
||||
color: var(--message-color-light);
|
||||
}
|
||||
|
||||
.footer .container a:hover {
|
||||
color: #ff8457 !important;
|
||||
}
|
||||
|
||||
/* 提示消息 */
|
||||
.floating.message.success {
|
||||
backdrop-filter: blur(15px) brightness(110%);
|
||||
background-color: var(--he-color-light);
|
||||
border: 3px solid rgba(255.255.255.0.5);
|
||||
border-radius: 1rem !important;
|
||||
color: var(--message-color-light);
|
||||
box-shadow: 0 0 15px rgba(1, 132, 255, 0.65);
|
||||
}
|
||||
|
||||
.floating.message.success .header {
|
||||
color: var(--message-color-light);
|
||||
}
|
||||
|
||||
.floating.message.warning {
|
||||
backdrop-filter: blur(15px) brightness(110%);
|
||||
background-color: var(--he-color-light);
|
||||
border: 1px solid rgba(255.255.255.0.5);
|
||||
border-radius: 1rem !important;
|
||||
color: var(--message-color-light);
|
||||
box-shadow: 0 0 15px rgba(255, 153, 1, 0.65);
|
||||
}
|
||||
|
||||
.floating.message.warning .header {
|
||||
color: var(--message-color-light);
|
||||
}
|
||||
|
||||
.cpucontent {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.rollanimation {
|
||||
animation: scroll 10s cubic-bezier(.2, 0, .8, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
以下样式为部分原版主题样式，由于原版主题样式有些强制性，不方便二次修改，故拿出来
|
||||
|
||||
*/
|
||||
|
||||
.ui.mini.message {
|
||||
width: 17rem;
|
||||
}
|
||||
|
||||
.ui-alerts {
|
||||
padding: 23px 0 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.nb-container {
|
||||
padding-top: 75px;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 65px;
|
||||
margin-bottom: -47px;
|
||||
}
|
||||
|
||||
#app .ui.fluid.accordion {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.login.nb-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: unset;
|
||||
}
|
||||
|
||||
.login.nb-container>.grid {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login.nb-container>.grid .column {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.status.cards .flag {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.status.cards .header>.info.icon {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.status.cards .wide.column {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
height: 2rem !important;
|
||||
}
|
||||
|
||||
.status.cards .three.wide.column {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column:nth-child(1) {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column:nth-child(2) {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.status.cards .description {
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.status.cards .ui.content.popup {
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.status.cards .outline.icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.progress .bar {
|
||||
min-width: 1.26em !important;
|
||||
text-align: right;
|
||||
padding-right: 0.4em;
|
||||
line-height: 1.75em;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 700;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.service-status .delay-today {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-status .delay-today>i {
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 0.6em;
|
||||
background-color: grey;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
</style>
|
||||
<!-- 网页特效 - 樱花 -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
|
||||
|
||||
<!-- 网页鼠标点击特效 - 爱心 -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
|
||||
|
||||
<!-- 网页鼠标点击特效 - 烟花波纹 -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yanhuabowen.js"></script>
|
||||
Loading…
Reference in New Issue
Block a user