82 lines
2.3 KiB
Vue
82 lines
2.3 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
// 假資料
|
|
const mockData = ref([
|
|
{ title: "Elevator system", icon: "EL", isError: false },
|
|
{ title: "CCTV system", icon: "C", isError: true },
|
|
{ title: "Emergency rescue system", icon: "P", isError: true },
|
|
{ title: "Air Conditioning System", icon: "M10", isError: false },
|
|
{ title: "Lighting system", icon: "L1", isError: false },
|
|
{ title: "Fire Equipment", icon: "F1", isError: false },
|
|
{ title: "Water supply system", icon: "W2", isError: false },
|
|
{
|
|
title: "Sewage and wastewater equipment",
|
|
icon: "P1",
|
|
isError: false,
|
|
},
|
|
{ title: "High voltage switchboard", icon: "E1", isError: false },
|
|
{ title: "Low voltage switchboard", icon: "E2", isError: false },
|
|
{ title: "Meter system", icon: "E4-1", isError: false },
|
|
{ title: "Emergency generator", icon: "E3", isError: false },
|
|
{ title: "Shutdown system", icon: "PSC", isError: false },
|
|
{ title: "Access control system", icon: "R", isError: false },
|
|
{
|
|
title: "Environmental sensing equipment",
|
|
icon: "M12",
|
|
isError: false,
|
|
},
|
|
{
|
|
title: "Air supply and exhaust system",
|
|
icon: "M5-2",
|
|
isError: false,
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap -mx-1">
|
|
<div
|
|
v-for="(item, index) in mockData"
|
|
:key="index"
|
|
class="w-full sm:w-1/2 lg:w-1/4 relative my-2"
|
|
>
|
|
<img
|
|
v-if="item.isError"
|
|
src="@ASSET/img/equipment-item-background05.svg"
|
|
/>
|
|
<img v-else src="@ASSET/img/equipment-item-background04.svg" />
|
|
|
|
<div class="equipment-item">
|
|
<div class="w-20">
|
|
<img
|
|
class="w-14 p-2 m-auto"
|
|
:src="`./icon/${item.icon}.png`"
|
|
alt="icon"
|
|
/>
|
|
</div>
|
|
<div class="icon-text">
|
|
<div class="text-slate-300 text-xs">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.equipment-item {
|
|
@apply flex items-center absolute top-1/2 w-[90%] left-0 right-0 m-auto text-center -translate-y-1/2;
|
|
}
|
|
.icon-text {
|
|
@apply text-start font-light p-1 relative z-20;
|
|
}
|
|
.icon-text:before {
|
|
@apply absolute -left-3 top-0 bottom-0 m-auto h-10 w-5 z-10;
|
|
content: "";
|
|
background-image: url(@ASSET/img/equipment-item-background.svg);
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|