feat: 临时保存

.cssrem

@@ -0,0 +1,4 @@
+{
+  "rootFontSize": 16,
+  "fixedDigits": 4
+}

src/App.vue

@@ -1,8 +1,6 @@
 <template>
   <n-config-provider :theme="theme" :themeOverrides="themeOverrides">
-    <div class="main" :class="routeName">
-      <!-- <div class="left"></div>
-      <div class="right"></div> -->
+    <div class="page" :class="routeName">
       <router-view />
     </div>
   </n-config-provider>

src/components/sideMenu.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="right">
+    <div class="logo"></div>
+    <div class="back" @click="$router.push('/')"></div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: "side-menu",
+});
+</script>
+
+<style lang="scss" scoped>
+.right {
+  flex: 0 0 var(--main-sub-menu-width);
+  width: var(--main-sub-menu-width);
+  height: 100%;
+  background-image: var(--main-right-background);
+  background-position: top right;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-color: var(--logo-background-color);
+  display: flex;
+  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);
+    background-image: var(--main-sub-logo);
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-top: 77px;
+  }
+  .back {
+    margin-bottom: 77px;
+    width: var(--go-home-width);
+    height: var(--go-home-width);
+    border-radius: 50%;
+    background-color: var(--logo-background-color);
+    background-image: var(--main-right-back-btn);
+    background-position: center center;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}
+</style>

src/components/subHeader.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="header">
+    <div class="logo">
+      <img src="img/logo.png" alt="logo" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: "sub-header",
+});
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: var(--main-sub-header-height);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-image: var(--main-sub-header-background);
+  background-size: cover;
+  background-position: left top;
+  background-repeat: no-repeat;
+  z-index: 0;
+  .logo {
+    height: var(--main-sub-header-logo-height);
+    margin-left: var(--main-sub-header-margin-left);
+    img {
+      height: 100%;
+      width: auto;
+    }
+  }
+}
+</style>

src/components/surveyBox.vue

@@ -0,0 +1,28 @@
+<template>
+  <n-card :title="title">
+    {{ content }}
+    <template #footer>
+      {{ time }}
+    </template>
+  </n-card>
+</template>
+<script setup>
+defineOptions({
+  name: "survey-box",
+});
+
+defineProps({
+  title: {
+    type: String,
+    default: () => "",
+  },
+  content: {
+    type: String,
+    default: () => "",
+  },
+  time: {
+    type: String,
+    default: () => "",
+  },
+});
+</script>

src/style.css

@@ -5,7 +5,8 @@
 
 html,
 body,
-#app {
+#app,
+.page {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -18,8 +19,8 @@ body,
 
 /* Scroll bar stylings */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 /* Track */
@@ -30,10 +31,32 @@ body,
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #888;
-  border-radius: 5px;
+  border-radius: 0.3125rem;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+.page:not(.home) .main {
+  --main-sub-header-height: 101px;
+  --main-sub-header-logo-height: 4.9375rem;
+  --main-sub-header-margin-left: 8.0625rem;
+  --main-sub-header-background: url("img/sub_title_bg.png");
+  --main-sub-menu-width: 95px;
+  --main-sub-logo: url("img/sub_logo.png");
+  --main-right-background: url("img/sub_bg.png");
+  --main-right-back-btn: url("img/sub_back_btn.png");
+  --main-left-background: grey;
+  --logo-width: 79px;
+  --go-home-width: 60px;
+  --logo-background-color: #910000;
+}
+.page:not(.home) .main .content .right {
+  position: relative;
+  z-index: 1;
+}
+.page:not(.home) .main .content .left {
+  padding-top: var(--main-sub-header-height);
+}

src/views/feedback.vue

@@ -2,6 +2,7 @@
   <div class="main">
     <div class="content">
       <div class="left">
+        
         <n-input
           v-model:value="feedBackContent"
           type="textarea"

src/views/guide-detail.vue

@@ -1,7 +1,5 @@
 <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">

src/views/home.vue

@@ -3,11 +3,10 @@
     <div class="left">
       <!-- post -->
       <n-carousel
-        direction="vertical"
-        dot-placement="right"
-        show-arrow
+        dot-placement="bottom"
         style="width: 100%; height: 100%"
         autoplay
+        draggable
       >
         <img
           class="carousel-img"
@@ -32,12 +31,25 @@
       </n-carousel>
     </div>
     <div class="right">
-      <n-space class="navi" justify="center">
-        <n-button class="btn" @click="push('/info')"> 场馆资讯</n-button>
-        <n-button class="btn" @click="push('/guide')"> 展厅导览</n-button>
-        <n-button class="btn" @click="push('/collect')"> 馆藏精品 </n-button>
-        <n-button class="btn" @click="push('/survey')"> 问卷调查</n-button>
-        <n-button class="btn" @click="push('/feedback')"> 留言反馈</n-button>
+      <div class="home_logo">
+        <img src="img/logo.png" />
+      </div>
+      <n-space class="navigate" justify="flex-start" align="center">
+        <n-button class="btn btn_1" @click="push('/info')" text>
+          场馆资讯</n-button
+        >
+        <n-button class="btn btn_2" @click="push('/guide')" text>
+          展厅导览</n-button
+        >
+        <n-button class="btn btn_3" @click="push('/collect')" text>
+          馆藏精品
+        </n-button>
+        <n-button class="btn btn_4" @click="push('/survey')" text>
+          问卷调查</n-button
+        >
+        <n-button class="btn btn_5" @click="push('/feedback')" text>
+          留言反馈</n-button
+        >
       </n-space>
     </div>
   </div>
@@ -50,16 +62,25 @@ import { useRoute, useRouter } from "vue-router";
 const { push } = useRouter();
 
 const { isFullscreen, enter, exit, toggle } = useFullscreen();
-console.log("isFullscreen", isFullscreen);
+// console.log("isFullscreen", isFullscreen);
 </script>
 <style>
 .main {
-  --main-left-background: #e2caa3;
-  --main-right-background: #910000;
+  --main-home-left-background: #e2caa3;
+  --main-home-right-background: #910000;
+  /* --main-right-bg-img: url("img/h_banner_bg.png"); */
+  --main-right-bg-btn1: url("img/guide_1.png");
+  --main-right-bg-btn2: url("img/guide_2.png");
+  --main-right-bg-btn3: url("img/guide_3.png");
+  --main-right-bg-btn4: url("img/guide_4.png");
+  --main-right-bg-btn5: url("img/guide_5.png");
+
+  --main-navigate-btn-width: 11.3125rem;
+  --main-navigate-btn-height: 6.3125rem;
 }
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 .main {
   width: 100%;
   height: 100%;
@@ -69,21 +90,65 @@ console.log("isFullscreen", isFullscreen);
 
 .left {
   flex: 1 1 70%;
-  background-color: var(--main-left-background);
+  background-color: var(--main-home-left-background);
 }
 .right {
-  flex: 0 0 30%;
-  max-width: 400px;
-  background-color: var(--main-right-background);
-}
-.navi {
+  flex: 0 0 416px;
+  width: 416px;
+  background-color: var(--main-home-right-background);
+  background-image: var(--main-right-bg-img);
+  background-size: contain;
+  background-repeat: no-repeat;
   display: flex;
   align-items: center;
-  margin-top: 30px;
-}
-:deep(.btn) {
-  color: white;
-  font-size: 26px;
-  padding: 30px 50px;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+
+  .home_logo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      display: block;
+      margin-top: 46px;
+      height: 4.5rem;
+    }
+  }
+  .navigate {
+    margin-top: 30px;
+    width: calc(var(--main-navigate-btn-width) * 2 + 16px);
+  }
+  :deep(.btn) {
+    color: transparent;
+    width: var(--main-navigate-btn-width);
+    height: var(--main-navigate-btn-height);
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding: 0;
+    margin: 0;
+    &:hover {
+      border: none;
+    }
+    &.btn_1 {
+      background-image: var(--main-right-bg-btn1);
+    }
+    &.btn_2 {
+      background-image: var(--main-right-bg-btn2);
+    }
+    &.btn_3 {
+      background-image: var(--main-right-bg-btn3);
+    }
+    &.btn_4 {
+      background-image: var(--main-right-bg-btn4);
+    }
+    &.btn_5 {
+      background-image: var(--main-right-bg-btn4);
+    }
+  }
 }
 </style>

src/views/info.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="main">
+    <sub-header />
     <div class="content">
       <div class="left">
         <n-tabs type="line">
           <template #prefix><span class="meta-title">场馆资讯</span> </template>
           <n-tab-pane name="展览" tab="展览">
-    
             <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>
@@ -60,10 +60,7 @@
           </n-tab-pane>
         </n-tabs>
       </div>
-      <div class="right">
-        <div class="logo"></div>
-        <div class="back" @click="$router.push('/')"></div>
-      </div>
+      <side-menu />
     </div>
   </div>
 </template>
@@ -72,6 +69,8 @@
 import { onMounted } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import infoBox from "../components/infoBox";
+import subHeader from "../components/subHeader";
+import sideMenu from "../components/sideMenu";
 import noticeBox from "../components/noticeBox";
 import { useInfoStore } from "../store/info";
 
@@ -134,28 +133,4 @@ onMounted(() => {
 .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/survey.vue

@@ -1,34 +1,106 @@
 <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 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>