|
|
@@ -0,0 +1,123 @@
|
|
|
+<template>
|
|
|
+ <div class="weatherView">
|
|
|
+ <!-- Right Sidebar -->
|
|
|
+ <aside class="sidebar-right panel">
|
|
|
+ <div class="weather-summary">
|
|
|
+ <div class="weather-temp">
|
|
|
+ <span class="icon">☀️</span>
|
|
|
+ <div>
|
|
|
+ <span class="value">20<small>°C</small></span>
|
|
|
+ <div class="weather-info">
|
|
|
+ <span class="condition">晴转多云, 空气质量极佳</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span>☰</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="market-demand">
|
|
|
+ <strong>生活气象指数</strong>
|
|
|
+ <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px; font-size: 12px; opacity: 0.9;">
|
|
|
+ <span>● 穿衣：大衣类(15°C ～ 20°C)</span>
|
|
|
+ <span>● 感冒：易发(早晚温差大)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-section">
|
|
|
+ <h3>天气信息--宁夏</h3>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">平均风向</span><span class="value">12.9°</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">风速</span><span class="value">3.6m/s</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">空气质量指数</span><span class="value">>200 <span class="tag blue">蓝色预警</span></span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">湿度</span><span class="value">64.0% <span class="tag green">✔</span></span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">降水</span><span class="value">20mm</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">大气压力</span><span class="value">997.5hPa</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-section">
|
|
|
+ <h3>操作信息</h3>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">可用性</span><span class="value">100%</span>
|
|
|
+ </div>
|
|
|
+ <div class="op-progress-bar"><div class="op-progress-bar-inner" style="width: 100%;"></div></div>
|
|
|
+ <div class="info-item" style="margin-top: 15px;">
|
|
|
+ <span class="label">容量因子</span><span class="value">32.6%</span>
|
|
|
+ </div>
|
|
|
+ <div class="op-progress-bar"><div class="op-progress-bar-inner" style="width: 32.6%;"></div></div>
|
|
|
+ </div>
|
|
|
+ <div class="devBox market-demand">
|
|
|
+ <devBox :viewer="viewer" />
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import devBox from "@/components/devInfoBox.vue"
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ viewer: {
|
|
|
+ type: Object,
|
|
|
+ default: () => null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ devBox
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.panel {
|
|
|
+ background: rgba(248, 249, 252, 0.85);
|
|
|
+ backdrop-filter: blur(15px);
|
|
|
+ -webkit-backdrop-filter: blur(15px);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+/* --- Right Sidebar --- */
|
|
|
+.sidebar-right {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ width: 300px;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+.weather-summary { display: flex; align-items: center; justify-content: space-between; }
|
|
|
+.weather-temp { display: flex; align-items: center; gap: 10px; }
|
|
|
+.weather-temp .value { font-size: 28px; font-weight: 500; }
|
|
|
+.weather-temp .icon { font-size: 24px; }
|
|
|
+.weather-info .condition { font-size: 12px; color: #6c757d; }
|
|
|
+.market-demand { background-color: #134ac0; color: white; padding: 15px 10px; border-radius: 8px; font-size: 14px; }
|
|
|
+.info-section { font-size: 13px; }
|
|
|
+.info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 15px; }
|
|
|
+.info-item { display: flex; justify-content: space-between; margin-bottom: 12px; }
|
|
|
+.info-item .label { color: #212529; }
|
|
|
+.info-item .value { color: #6c757d; display: flex; align-items: center; gap: 5px; }
|
|
|
+.tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
|
|
|
+.tag.blue { background-color: #e7f1ff; color: #134ac0; }
|
|
|
+.tag.green { background-color: #e6f7f0; color: #28a745; }
|
|
|
+.op-progress-bar { height: 6px; background: #e9ecef; border-radius: 3px; margin-top: 5px; }
|
|
|
+.op-progress-bar-inner { height: 100%; background: #134ac0; border-radius: 3px; }
|
|
|
+.devBox{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
sunzehao
