底部和管理页

src/assets/styles/public.scss

@@ -1,6 +1,6 @@
 .L-main {
   height: 100%;
-  width: 100%;
+  width: 102%;
   display: flex;
   flex-direction: column;
   background-color: #F2F4F6;

src/components/HeaderSearch/index.vue

@@ -213,7 +213,7 @@ watch(searchPool, (list) => {
     display: flex;
     height: 48px;
     align-items: center;
-    padding-right: 10px;
+    // padding-right: 10px;
 
     .left {
       width: 60px;

src/layout/components/AppMain.vue

@@ -37,7 +37,7 @@ function addIframe() {
 .app-main {
   /* 50= navbar  50  */
   border-radius: 5px;
-  min-height: calc(100vh - 50px);
+  height: calc(100vh - 50px);
   width: calc(100% - 20px);
   position: relative;
   background-color: #fff;
@@ -51,7 +51,8 @@ function addIframe() {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    height: calc(100vh - 84px);
+    width: 100%;
   }
 
   .fixed-header + .app-main {

src/layout/index.vue

@@ -1,48 +1,69 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    :class="classObj"
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    class="app-wrapper"
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    :style="{ '--current-color': theme }"
+  >
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar
+      v-if="!sidebar.hide"
+      class="sidebar-container"
+    />
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
         <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
       <settings ref="settingRef" />
+      <div class="dibutishi">
+        <span>主办单位：</span>中共太仓市委网信办 <span class="kongge"></span>
+        <span>技术支持单位：</span>杭州安恒信息技术股份有限公司
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize } from "@vueuse/core";
-import Sidebar from './components/Sidebar/index.vue'
+import Sidebar from "./components/Sidebar/index.vue";
-import { AppMain, Navbar, Settings, TagsView } from './components'
+import { AppMain, Navbar, Settings, TagsView } from "./components";
-import useAppStore from '@/store/modules/app'
+import useAppStore from "@/store/modules/app";
-import useSettingsStore from '@/store/modules/settings'
+import useSettingsStore from "@/store/modules/settings";
-
+
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
-const theme = computed(() => settingsStore.theme)
+const theme = computed(() => settingsStore.theme);
-const sideTheme = computed(() => settingsStore.sideTheme)
+const sideTheme = computed(() => settingsStore.sideTheme);
-const sidebar = computed(() => useAppStore().sidebar)
+const sidebar = computed(() => useAppStore().sidebar);
-const device = computed(() => useAppStore().device)
+const device = computed(() => useAppStore().device);
-const needTagsView = computed(() => settingsStore.tagsView)
+const needTagsView = computed(() => settingsStore.tagsView);
-const fixedHeader = computed(() => settingsStore.fixedHeader)
+const fixedHeader = computed(() => settingsStore.fixedHeader);
 
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
   openSidebar: sidebar.value.opened,
   withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile'
+  mobile: device.value === "mobile",
-}))
+}));
 
-const { width, height } = useWindowSize()
+const { width, height } = useWindowSize();
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const WIDTH = 992; // refer to Bootstrap's responsive design
 
-watch(() => device.value, () => {
+watch(
+  () => device.value,
+  () => {
     // if (device.value === 'mobile' && sidebar.value.opened) {
     //   useAppStore().closeSideBar({ withoutAnimation: false })
     // }
-})
+  }
+);
 
 watchEffect(() => {
   // if (width.value - 1 < WIDTH) {
@@ -51,15 +72,15 @@ watchEffect(() => {
   // } else {
   //   useAppStore().toggleDevice('desktop')
   // }
-})
+});
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false })
+  useAppStore().closeSideBar({ withoutAnimation: false });
 }
 
-const settingRef = ref(null)
+const settingRef = ref(null);
 function setLayout() {
-  settingRef.value.openSetting()
+  settingRef.value.openSetting();
 }
 </script>
 
@@ -109,4 +130,20 @@ function setLayout() {
 .mobile .fixed-header {
   width: 100%;
 }
+.dibutishi {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 5px;
+  color: #909399;
+
+  .kongge {
+    margin: 0 10px;
+  }
+
+  span {
+    color: #909399;
+
+  }
+}
 </style>