feat: 各个模块的detail

src/App.vue

@@ -1,14 +1,26 @@
 <template>
   <n-config-provider :theme="theme" :themeOverrides="themeOverrides">
-    <router-view />
+    <div class="main" :class="routeName">
+      <!-- <div class="left"></div>
+      <div class="right"></div> -->
+      <router-view />
+    </div>
   </n-config-provider>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { themeOverrides } from "./theme/override.js";
 import { darkTheme } from "naive-ui";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const routeName = ref();
 const theme = ref(null);
+router.beforeEach((to, from, next) => {
+  document.title = to.meta.title;
+  routeName.value = to.name;
+  next();
+});
 </script>
 
 <style scoped>
@@ -19,4 +31,11 @@ const theme = ref(null);
 .n-layout-scroll-container {
   overflow: hidden;
 }
+
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
 </style>

src/router/index.js

@@ -20,7 +20,7 @@ const routes = [
 
   {
     path: "/guide",
-    name: "Guide",
+    name: "guide",
     component: () => import("@/views/guide.vue"),
     meta: {
       title: "展厅导览",
@@ -56,7 +56,23 @@ const routes = [
     name: "infoDetail",
     component: () => import("@/views/info-detail.vue"),
     meta: {
-      title: "留言反馈",
+      title: "",
+    },
+  },
+  {
+    path: "/guide-detail/:id",
+    name: "guideDetail",
+    component: () => import("@/views/guide-detail.vue"),
+    meta: {
+      title: "",
+    },
+  },
+  {
+    path: "/collect-detail/:id",
+    name: "collectDetail",
+    component: () => import("@/views/collect-detail.vue"),
+    meta: {
+      title: "",
     },
   },
 ];

src/views/collect-detail.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="main">
+    <div class="content">
+      <div class="left"></div>
+      <div class="right">
+        <div class="logo"></div>
+        <div class="back" @click="$router.push('/')"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import { useInfoStore } from "../store/info";
+
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+const InfoStore = useInfoStore();
+
+onMounted(() => {
+  InfoStore.getData();
+});
+</script>
+
+<style>
+.main {
+  --main-left-background: grey;
+  --main-right-background: rgba(0, 0, 0, 0.8);
+  --logo-width: 100px;
+  --go-home-width: 60px;
+  --logo-background-color: rgba(0, 0, 0, 0.5);
+  --left-content-padding: 50px;
+  --right-content-padding: 50px;
+}
+</style>
+
+<style lang="scss" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+}
+.meta-title {
+  font-size: 34px;
+  padding-right: 50px;
+}
+.head {
+  width: 100%;
+  height: 60px;
+}
+.content {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  overflow: hidden;
+}
+.left {
+  flex: 1;
+  background-color: var(--main-left-background);
+  padding: var(--left-content-padding);
+  .n-tabs {
+    height: 100%;
+    overflow: hidden;
+    :deep(.n-tab-pane) {
+      overflow-y: scroll;
+    }
+  }
+}
+.n-tabs {
+  --n-tab-font-size: 26px !important;
+}
+.right {
+  flex: 0 0 10%;
+  min-width: 120px;
+  /* max-width: 120px; */
+  height: calc(100% - var(--right-content-padding) * 2);
+  background-color: var(--main-right-background);
+  display: flex;
+  padding: 50px 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .logo {
+    width: var(--logo-width);
+    height: var(--logo-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+  }
+  .back {
+    width: var(--go-home-width);
+    height: var(--go-home-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+  }
+}
+</style>

src/views/feedback.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="main">
     <div class="content">
-      
+      <n-input
+      v-model:value="value"
+      type="textarea"
+      placeholder="请填入内容，5-500字"
+    />
     </div>
   </div>
 </template>

src/views/guide-detail.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="main">
+    <!-- <div class="head"></div> -->
+    <!-- <Teleport to=".n-tabs-nav"> xxx </Teleport> -->
+    <div class="content">
+      <div class="left">
+        <n-tabs type="line">
+          <template #prefix><span class="meta-title">场馆资讯</span> </template>
+          <n-tab-pane name="展览" tab="展览">
+            <!-- <n-scrollbar style="height: 100%" trigger="none"> -->
+            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+              <template v-for="(_, index) in 16">
+                <n-gi>
+                  <infoBox
+                    :id="index + 1"
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="活动" tab="活动">
+            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <infoBox
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="新闻" tab="新闻">
+            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <infoBox
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="通知" tab="通知">
+            <n-grid y-gap="20" :cols="1" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <notice-box
+                    title="这是一段标题这是一段标题"
+                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+        </n-tabs>
+      </div>
+      <div class="right">
+        <div class="logo"></div>
+        <div class="back" @click="$router.push('/')"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import infoBox from "../components/infoBox";
+import noticeBox from "../components/noticeBox";
+import { useInfoStore } from "../store/info";
+
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+const InfoStore = useInfoStore();
+
+onMounted(() => {
+  InfoStore.getData();
+});
+</script>
+
+<style>
+.main {
+  --main-left-background: grey;
+  --main-right-background: rgba(0, 0, 0, 0.8);
+  --logo-width: 100px;
+  --go-home-width: 60px;
+  --logo-background-color: rgba(0, 0, 0, 0.5);
+  --left-content-padding: 50px;
+  --right-content-padding: 50px;
+}
+</style>
+
+<style lang="scss" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+}
+.meta-title {
+  font-size: 34px;
+  padding-right: 50px;
+}
+.head {
+  width: 100%;
+  height: 60px;
+}
+.content {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  overflow: hidden;
+}
+.left {
+  flex: 1;
+  background-color: var(--main-left-background);
+  padding: var(--left-content-padding);
+  .n-tabs {
+    height: 100%;
+    overflow: hidden;
+    :deep(.n-tab-pane) {
+      overflow-y: scroll;
+    }
+  }
+}
+.n-tabs {
+  --n-tab-font-size: 26px !important;
+}
+.right {
+  flex: 0 0 10%;
+  min-width: 120px;
+  /* max-width: 120px; */
+  height: calc(100% - var(--right-content-padding) * 2);
+  background-color: var(--main-right-background);
+  display: flex;
+  padding: 50px 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .logo {
+    width: var(--logo-width);
+    height: var(--logo-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+  }
+  .back {
+    width: var(--go-home-width);
+    height: var(--go-home-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+  }
+}
+</style>

src/views/guide.vue

@@ -1,34 +1,163 @@
 <template>
   <div class="main">
-    
+    <!-- <div class="head"></div> -->
+    <!-- <Teleport to=".n-tabs-nav"> xxx </Teleport> -->
+    <div class="content">
+      <div class="left">
+        <n-tabs type="line">
+          <template #prefix><span class="meta-title">场馆资讯</span> </template>
+          <n-tab-pane name="展览" tab="展览">
+            <!-- <n-scrollbar style="height: 100%" trigger="none"> -->
+            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+              <template v-for="(_, index) in 16">
+                <n-gi>
+                  <infoBox
+                    :id="index + 1"
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="活动" tab="活动">
+            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <infoBox
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="新闻" tab="新闻">
+            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <infoBox
+                    title="卡片"
+                    cover="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+          <n-tab-pane name="通知" tab="通知">
+            <n-grid y-gap="20" :cols="1" class="tab-grid">
+              <template v-for="item in 16">
+                <n-gi>
+                  <notice-box
+                    title="这是一段标题这是一段标题"
+                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
+                    time="2023-01-02"
+                  />
+                </n-gi>
+              </template>
+            </n-grid>
+          </n-tab-pane>
+        </n-tabs>
+      </div>
+      <div class="right">
+        <div class="logo"></div>
+        <div class="back" @click="$router.push('/')"></div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { onMounted } from "vue";
 import { useFullscreen } from "@vueuse/core";
+import infoBox from "../components/infoBox";
+import noticeBox from "../components/noticeBox";
+import { useInfoStore } from "../store/info";
+
 const { isFullscreen, enter, exit, toggle } = useFullscreen();
-console.log("isFullscreen", isFullscreen);
+const InfoStore = useInfoStore();
+
+onMounted(() => {
+  InfoStore.getData();
+});
 </script>
+
 <style>
 .main {
-  --main-left-background: #e2caa3;
-  --main-right-background: #910000;
+  --main-left-background: grey;
+  --main-right-background: rgba(0, 0, 0, 0.8);
+  --logo-width: 100px;
+  --go-home-width: 60px;
+  --logo-background-color: rgba(0, 0, 0, 0.5);
+  --left-content-padding: 50px;
+  --right-content-padding: 50px;
 }
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 .main {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+}
+.meta-title {
+  font-size: 34px;
+  padding-right: 50px;
+}
+.head {
+  width: 100%;
+  height: 60px;
+}
+.content {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
   flex-direction: row;
+  overflow: hidden;
 }
 .left {
-  flex: 0 0 70%;
+  flex: 1;
   background-color: var(--main-left-background);
+  padding: var(--left-content-padding);
+  .n-tabs {
+    height: 100%;
+    overflow: hidden;
+    :deep(.n-tab-pane) {
+      overflow-y: scroll;
+    }
+  }
+}
+.n-tabs {
+  --n-tab-font-size: 26px !important;
 }
 .right {
-  flex: 0 0 30%;
+  flex: 0 0 10%;
+  min-width: 120px;
+  /* max-width: 120px; */
+  height: calc(100% - var(--right-content-padding) * 2);
   background-color: var(--main-right-background);
+  display: flex;
+  padding: 50px 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .logo {
+    width: var(--logo-width);
+    height: var(--logo-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+  }
+  .back {
+    width: var(--go-home-width);
+    height: var(--go-home-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+  }
 }
 </style>

src/views/info.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="main">
-    <!-- <div class="head"></div> -->
-    <!-- <Teleport to=".n-tabs-nav"> xxx </Teleport> -->
-
     <div class="content">
       <div class="left">
         <n-tabs type="line">
           <template #prefix><span class="meta-title">场馆资讯</span> </template>
           <n-tab-pane name="展览" tab="展览">
-            <!-- <n-scrollbar style="height: 100%" trigger="none"> -->
+    
             <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>

src/views/survey-detail.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="main">
+    <n-input
+      v-model:value="value"
+      type="textarea"
+      placeholder="请填入内容，5-500字"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useFullscreen } from "@vueuse/core";
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+console.log("isFullscreen", isFullscreen);
+</script>
+<style>
+.main {
+  --main-left-background: #e2caa3;
+  --main-right-background: #910000;
+}
+</style>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.left {
+  flex: 0 0 70%;
+  background-color: var(--main-left-background);
+}
+.right {
+  flex: 0 0 30%;
+  background-color: var(--main-right-background);
+}
+</style>

src/views/survey.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="main">feedback</div>
+  <div class="main">
+    <n-input
+      v-model:value="value"
+      type="textarea"
+      placeholder="请填入内容，5-500字"
+    />
+  </div>
 </template>
 
 <script setup>