首頁系統小卡顏色改變、系統監控:sidebar顏色改變、modal的定位都維持在中間

This commit is contained in:
koko 2024-10-28 16:17:57 +08:00
parent 9f09bd1b2c
commit c1ac580b28
5 changed files with 9 additions and 11 deletions

View File

@ -175,7 +175,7 @@ onMounted(() => {
:deep(.ant-menu-submenu-selected) { :deep(.ant-menu-submenu-selected) {
.ant-menu-submenu-title { .ant-menu-submenu-title {
@apply text-blue-300 ; @apply text-info;
} }
} }
@ -183,7 +183,7 @@ onMounted(() => {
@apply bg-transparent relative; @apply bg-transparent relative;
&::before { &::before {
@apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10; @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat saturate-200 z-10;
content: ""; content: "";
background: url(@ASSET/img/chart-data-background03.svg) center center; background: url(@ASSET/img/chart-data-background03.svg) center center;
} }
@ -193,7 +193,7 @@ onMounted(() => {
} }
a { a {
color: #89d2ff !important; color: #35ecec !important;
text-shadow: 0px 0px 1px #fff; text-shadow: 0px 0px 1px #fff;
} }
} }

View File

@ -140,7 +140,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
twMerge( twMerge(
'w-full sm:w-1/2 lg:w-1/4 relative my-2 ', 'w-full sm:w-1/2 lg:w-1/4 relative my-2 ',
item.sub_system_tag item.sub_system_tag
? 'saturate-200 cursor-pointer text-base' ? 'saturate-200 cursor-pointer text-base text-info'
: 'grayscale opacity-70 cursor-not-allowed text-sm' : 'grayscale opacity-70 cursor-not-allowed text-sm'
) )
" "
@ -160,7 +160,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
></FontAwesomeIcon> ></FontAwesomeIcon>
</div> </div>
<div class="icon-text"> <div class="icon-text">
<div class="text-slate-300"> <div class="">
{{ item.title }} {{ item.title }}
</div> </div>
</div> </div>

View File

@ -155,9 +155,7 @@ const isMobile = (e) => {
const getCurrentInfoModalData = (e, position, value) => { const getCurrentInfoModalData = (e, position, value) => {
const mobile = isMobile(e); const mobile = isMobile(e);
selectedDevice.value = { selectedDevice.value = {
initPos: mobile initPos: { left: `50%`, top: `50%` },
? { left: `50%`, top: `50%` }
: { left: `${position.left}px`, top: `${position.top}px` },
value, value,
isMobile: mobile, isMobile: mobile,
};; };;

View File

@ -24,8 +24,8 @@ const fitToView = (forge_dbid) => {
<p class="title">{{ d.full_name }}</p> <p class="title">{{ d.full_name }}</p>
<div class="grid grid-cols-3 gap-5"> <div class="grid grid-cols-3 gap-5">
<div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid"> <div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
<div class="item h-36" @click="() => fitToView(device.forge_dbid)"> <div class="item" @click="() => fitToView(device.forge_dbid)">
<div class="left w-4/5 h-full flex flex-wrap justify-center"> <div class="left h-full flex flex-wrap justify-center">
<div class="sec02 w-full"> <div class="sec02 w-full">
<img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8"> <img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
<span class="w-8 h-8" v-else></span> <span class="w-8 h-8" v-else></span>

View File

@ -33,7 +33,7 @@ watch(
<template> <template>
<Modal id="system_info_modal" :onCancel="onCancel" width="600" :draggable="!data?.isMobile" :backdrop="false" <Modal id="system_info_modal" :onCancel="onCancel" width="600" :draggable="!data?.isMobile" :backdrop="false"
:modalStyle="position" :class="data?.isMobile ? '-translate-x-1/2 -translate-y-1/2' : ''"> :modalStyle="position" class="-translate-x-1/2 -translate-y-1/2">
<template #modalContent> <template #modalContent>
<SystemInfoModalContent /> <SystemInfoModalContent />
</template> </template>