'commit'
This commit is contained in:
HuangHai
@@ -781,3 +781,153 @@ body {
|
||||
background-color: #1e293b !important; /* 稍亮的条纹背景 */
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
AD OVERLAY STYLES
|
||||
========================================= */
|
||||
|
||||
.ad-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ad-content {
|
||||
background: linear-gradient(145deg, #1e293b, #0f172a);
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 15px rgba(59, 130, 246, 0.2);
|
||||
position: relative;
|
||||
animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ad-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ad-close:hover {
|
||||
background: rgba(239, 68, 68, 0.8);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.ad-header h2 {
|
||||
margin: 0 0 30px 0;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(to right, #60a5fa, #c084fc);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 2px 10px rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
|
||||
.ad-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.ad-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.ad-item:hover {
|
||||
transform: translateX(5px);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.ad-icon-wrapper {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(167, 139, 250, 0.2));
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ad-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ad-item p {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #cbd5e1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ad-item strong {
|
||||
color: #60a5fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ad-footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.1);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.auto-close-text {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
font-family: monospace;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(30px) scale(0.95); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,47 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- Ad Overlay -->
|
||||
<transition name="fade">
|
||||
<div class="ad-overlay" v-if="showAd">
|
||||
<div class="ad-content">
|
||||
<button class="ad-close" @click="closeAd">×</button>
|
||||
<div class="ad-header">
|
||||
<h2>⚡ 系统特性介绍</h2>
|
||||
</div>
|
||||
<div class="ad-body">
|
||||
<div class="ad-item">
|
||||
<div class="ad-icon-wrapper">
|
||||
<span class="ad-icon">📱</span>
|
||||
</div>
|
||||
<p>本系统采用 <strong>手机爬虫</strong> 获取4家充电供应商准实时各时段电价</p>
|
||||
</div>
|
||||
<div class="ad-item">
|
||||
<div class="ad-icon-wrapper">
|
||||
<span class="ad-icon">🧠</span>
|
||||
</div>
|
||||
<p>结合 <strong>数据仓库与AI技术</strong>，对我司电价进行智能分析，给出定价建议</p>
|
||||
</div>
|
||||
<div class="ad-item">
|
||||
<div class="ad-icon-wrapper">
|
||||
<span class="ad-icon">📊</span>
|
||||
</div>
|
||||
<p>对我司的各场站营业情况进行 <strong>分析，查询</strong></p>
|
||||
</div>
|
||||
<div class="ad-item">
|
||||
<div class="ad-icon-wrapper">
|
||||
<span class="ad-icon">🎯</span>
|
||||
</div>
|
||||
<p>未来：可以根据用户充电信息，形成用户画像，结合企业微信，实现 <strong>用户广告的精准推送</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ad-footer">
|
||||
<p class="auto-close-text">{{ adCountdown }} 秒后自动关闭</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<header class="dashboard-header">
|
||||
<div class="dashboard-title">⚡ 驿来特AI智能数据分析平台</div>
|
||||
|
||||
|
||||
@@ -6,6 +6,12 @@ createApp({
|
||||
// Common State
|
||||
// ==========================================
|
||||
const activeTab = ref('dashboard');
|
||||
|
||||
// Ad Overlay State
|
||||
const showAd = ref(true);
|
||||
const adCountdown = ref(10);
|
||||
let adTimer = null;
|
||||
|
||||
const apiBase = ref(window.location.origin || "http://localhost:8000");
|
||||
const isMobile = ref(window.innerWidth <= 768);
|
||||
|
||||
@@ -498,6 +504,11 @@ createApp({
|
||||
}
|
||||
});
|
||||
|
||||
const closeAd = () => {
|
||||
showAd.value = false;
|
||||
if (adTimer) clearInterval(adTimer);
|
||||
};
|
||||
|
||||
// ==========================================
|
||||
// Lifecycle
|
||||
// ==========================================
|
||||
@@ -514,6 +525,14 @@ createApp({
|
||||
renderChart();
|
||||
}, 10000);
|
||||
|
||||
// Ad Auto Close Timer
|
||||
adTimer = setInterval(() => {
|
||||
adCountdown.value--;
|
||||
if (adCountdown.value <= 0) {
|
||||
closeAd();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Degree QR Code
|
||||
if (!isMobile.value && typeof QRCode !== 'undefined') {
|
||||
const qrEl = document.getElementById("qrcode");
|
||||
@@ -538,7 +557,9 @@ createApp({
|
||||
loadAllOperatorsPrices, exportAllPrices, exportAiReport, startAiAnalysis, formatCell, getPriceColor, renderedAiText,
|
||||
// Degree
|
||||
userQuery, queryLoading, queryResult, examples,
|
||||
handleDegreeSearch, setExample, renderedResult, stopDegreeGeneration
|
||||
handleDegreeSearch, setExample, renderedResult, stopDegreeGeneration,
|
||||
// Ad
|
||||
showAd, adCountdown, closeAd
|
||||
};
|
||||
}
|
||||
}).use(ElementPlus).mount("#app");
|
||||
|
||||
Reference in New Issue
Block a user