185 lines
6.6 KiB
HTML
185 lines
6.6 KiB
HTML
|
|
<div class="row d-flex justify-content-between mx-3 mt-3">
|
|
<!-- 天氣圖 -->
|
|
<div class="col-sm-12 col-xl-4">
|
|
<img src="..\assets\img\clouds.png"
|
|
class="img-fluid"
|
|
style="min-height: 520px; background-color: aquamarine" />
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-xl-4">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xl-6">
|
|
<div class="p-3 bg-info rounded position-relative text-white">
|
|
<h3 class="display-6 d-block m-0">21.5k</h3>
|
|
<small class="m-0">users signed up</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-6">
|
|
<div class="p-3 bg-warning rounded position-relative text-white">
|
|
<h3 class="display-6 d-block m-0">$10,203</h3>
|
|
<small class="m-0">Visual Index Figure</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 mt-4">
|
|
<div class="card text-white bg-dark" style="min-height: 390px">
|
|
<div class="card-header">昨日／今日用電比較</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Dark card title</h5>
|
|
<p class="card-text">
|
|
Some quick example text to build on the card title and make up the
|
|
bulk of the card's content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-xl-4">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xl-6">
|
|
<div class="p-3 bg-success rounded position-relative text-white">
|
|
<h3 class="display-6 d-block m-0 fw-500">- 103.72</h3>
|
|
<small class="m-0">Offset Balance Ratio</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-6">
|
|
<div class="p-3 bg-secondary rounded position-relative text-white">
|
|
<h3 class="display-6 d-block m-0 fw-500">+40%</h3>
|
|
<small class="m-0">Product level increase</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 mt-4">
|
|
<div class="card text-white bg-dark" style="min-height: 390px">
|
|
<div class="card-header">本週／上週用電比較</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Dark card title</h5>
|
|
<p class="card-text">
|
|
Some quick example text to build on the card title and make up the
|
|
bulk of the card's content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 按鈕組 卡片組 -->
|
|
<div class="row d-flex justify-content-between col mx-3 my-3">
|
|
<!-- 按鈕組 -->
|
|
<div class="col-sm-12 col-lg-8">
|
|
<div class="row">
|
|
<div class="btn-group btn-group-lg col-lg-3 mb-4"
|
|
v-for="btn in btns"
|
|
:key="btn">
|
|
<button type="button" class="btn btn-secondary col-6">
|
|
<i :class="btn.icon"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary col-6">
|
|
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 卡片組 -->
|
|
<div class="col-sm-12 col-lg-4">
|
|
<!-- 異常狀態 -->
|
|
<div class="mb-1">
|
|
<div class="card text-white bg-dark">
|
|
<div class="card-header">異常狀態</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Dark card title</h5>
|
|
<p class="card-text">
|
|
Some quick example text to build on the card title and make up the
|
|
bulk of the card's content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工單進度 -->
|
|
<div class="">
|
|
<div class="card text-white bg-dark">
|
|
<div class="card-header">工單進度</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Dark card title</h5>
|
|
<p class="card-text">
|
|
Some quick example text to build on the card title and make up the
|
|
bulk of the card's content.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
import { useStore } from 'vuex';
|
|
export default {
|
|
setup() {
|
|
const store = useStore();
|
|
|
|
return { store }
|
|
},
|
|
data() {
|
|
return {
|
|
btns: [
|
|
{
|
|
name: "照明系統",
|
|
icon: "fa-regular fa-lightbulb fa-2x",
|
|
},
|
|
{
|
|
name: "環境感測系統",
|
|
icon: "fa-solid fa-temperature-three-quarters fa-2x",
|
|
},
|
|
{
|
|
name: "電表系統",
|
|
icon: "fa-solid fa-bolt fa-2x",
|
|
},
|
|
{
|
|
name: "空調系統",
|
|
icon: "fa-solid fa-wind fa-2x",
|
|
},
|
|
{
|
|
name: "電梯系統",
|
|
icon: "fa-solid fa-elevator fa-2x",
|
|
},
|
|
{
|
|
name: "門禁系統",
|
|
icon: "fa-sharp fa-solid fa-door-closed fa-2x",
|
|
},
|
|
{
|
|
name: "照明系統",
|
|
icon: "fa-regular fa-lightbulb fa-2x",
|
|
},
|
|
{
|
|
name: "環境感測系統",
|
|
icon: "fa-solid fa-temperature-three-quarters fa-2x",
|
|
},
|
|
{
|
|
name: "電表系統",
|
|
icon: "fa-solid fa-bolt fa-2x",
|
|
},
|
|
{
|
|
name: "空調系統",
|
|
icon: "fa-solid fa-wind fa-2x",
|
|
},
|
|
{
|
|
name: "電梯系統",
|
|
icon: "fa-solid fa-elevator fa-2x",
|
|
},
|
|
{
|
|
name: "門禁系統",
|
|
icon: "fa-sharp fa-solid fa-door-closed fa-2x",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
|
|
},
|
|
};
|
|
</script> |