調整 Breadcrumb 組件位置

src/components/Common/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <el-breadcrumb
     separator="/"
-    style="margin: 15px 5px; font-size: 0.9rem; opacity: 0.7"
+    style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
   >
     <el-breadcrumb-item
       v-for="(item, idx) in breadcrumbs"

src/components/Navbar.vue

@@ -6,33 +6,37 @@
           v-if="props.isCollapse"
           src="../assets/bars-3.svg"
           alt="展開"
-          style="width: 24px; height: 24px"
+          style="width: 20px; height: 20px"
         />
         <img
           v-else
           src="../assets/x-mark.svg"
           alt="收合"
-          style="width: 24px; height: 24px"
+          style="width: 20px; height: 20px"
         />
       </el-button>
-      <span class="title">工控運維管理平台</span>
+      <Breadcrumb />
     </div>
+    <div class="title-area">
+      <span class="title">工控運維管理平台</span>
       <el-dropdown size="large">
         <el-button type="text" circle>
           <el-avatar :icon="UserFilled" />
         </el-button>
         <template #dropdown>
-        <el-dropdown-menu style="font-size: large;">
+          <el-dropdown-menu style="font-size: large">
             <el-dropdown-item>個人資料</el-dropdown-item>
             <el-dropdown-item>帳號登出</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
+    </div>
   </nav>
 </template>
 
 <script setup lang="ts">
 import { computed, defineProps, defineEmits } from "vue";
+import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import { UserFilled } from "@element-plus/icons-vue";
 
 const props = defineProps({
@@ -64,10 +68,10 @@ const toggleCollapse = () => {
 }
 .title {
   margin-bottom: 0;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   font-weight: 600;
-  color: #333;
+  color: #5d5d5d;
-  padding-left: 10px;
+  padding-right: 10px;
 }
 .collapse-btn {
   vertical-align: middle;

src/views/PlantInfo.vue

@@ -1,5 +1,4 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24">
       <el-card
@@ -8,9 +7,9 @@
         style="margin-bottom: 0"
         :body-style="{ paddingTop: '16px', paddingBottom: '0' }"
       >
-        <template #header>
+        <!-- <template #header>
           <span style="">{{ title }}</span>
-        </template>
+        </template> -->
         <el-tabs
           v-model="activeName"
           type="border-card"
@@ -27,7 +26,7 @@
               <span style="margin-left: 4px">{{ tab.label }}</span>
             </template>
             <template v-if="tab.src && activeName === tab.name">
-              <CustomIframe :src="tab.src" minHeight="calc(100vh - 300px)" />
+              <CustomIframe :src="tab.src" minHeight="calc(100vh - 210px)" />
             </template>
             <template v-else-if="tab.name === 'abnormal-record'">
               異常紀錄
@@ -42,7 +41,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import CustomIframe from "../components/Common/CustomIframe.vue";
 import {
   Odometer,

src/views/PlantReport.vue

@@ -1,5 +1,4 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24" :md="5">
       <SiteMenu
@@ -41,7 +40,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import dayjs from "dayjs";
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import SiteMenu from "../components/Report/SiteMenu.vue";
 import ReportFilter from "../components/Report/ReportFilter.vue";
 import ReportSummaryTable from "../components/Report/ReportSummaryTable.vue";

src/views/PlantSetting.vue

@@ -1,5 +1,4 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24">
       <el-card
@@ -36,7 +35,7 @@
               <span style="margin-left: 4px">{{ tab.label }}</span>
             </template>
             <template v-if="tab.src && activeName === tab.name">
-              <CustomIframe :src="tab.src" minHeight="calc(100vh - 300px)" />
+              <CustomIframe :src="tab.src" minHeight="calc(100vh - 280px)" />
             </template>
             <template v-else-if="tab.name === 'abnormal-setting'">
               異常紀錄
@@ -50,7 +49,6 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import CustomIframe from "../components/Common/CustomIframe.vue";
 import { ScaleToOriginal, Warning } from "@element-plus/icons-vue";
 

src/views/PlantsOverview.vue

@@ -1,17 +1,15 @@
 <template>
-  <Breadcrumb />
   <el-row :gutter="20" style="margin-top: 20px">
     <el-col :xs="24" >
       <CustomIframe
         src="/ord/file:^px/All.px|view:hx:HxPxView|view:?fullScreen=true"
-        minHeight="calc(100vh - 156px)"
+        minHeight="calc(100vh - 130px)"
       />
     </el-col>
   </el-row>
 </template>
 
 <script setup>
-import Breadcrumb from "../components/Common/Breadcrumb.vue";
 import CustomIframe from "../components/Common/CustomIframe.vue";
 </script>
 <style scoped></style>