feat: 临时保存

src/components/infoBox.vue

@@ -1,9 +1,10 @@
 <template>
   <n-card class="info-box">
     <template #cover>
-      <img :src="cover" />
+      <div class="cover">
+        <img :src="cover" />
+      </div>
     </template>
-    <!-- <div class="cover" :style="{ backgroundImage: `url(${cover})` }"></div> -->
     <div class="info-line">
       <div class="title">{{ title }}</div>
       <div class="time-line">
@@ -44,9 +45,15 @@ defineProps({
   padding: 10px;
   --n-padding-left: 0 !important;
   --n-padding-bottom: 0 !important;
+  // width: 515px;
+  // height: 424px;
+  background: #f5f5f5;
+  box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
+  border-radius: 13px;
   .cover {
-    min-height: 250px;
     background-color: gray;
+    overflow: hidden;
+    max-height: 284px;
   }
   .title {
     font-size: 28px;

src/components/sideMenu.vue

@@ -13,7 +13,6 @@ defineOptions({
 
 <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);
@@ -25,6 +24,12 @@ defineOptions({
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  border-top-left-radius: var(--main-sub-menu-border-radius);
+  border-bottom-left-radius: var(--main-sub-menu-border-radius);
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
   .logo {
     width: var(--logo-width);
     height: var(--logo-width);

src/components/subHeader.vue

@@ -18,15 +18,13 @@ defineOptions({
   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;
+  flex: 0 0 var(--main-sub-header-height);
+
   .logo {
     height: var(--main-sub-header-logo-height);
     margin-left: var(--main-sub-header-margin-left);

src/style.css

@@ -38,25 +38,58 @@ body,
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
-
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+}
 .page:not(.home) .main {
-  --main-sub-header-height: 101px;
+  --main-sub-header-height: 6.3125rem;
   --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-menu-width: 5.9375rem;
+  --main-sub-menu-border-radius: 2.5rem;
   --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;
+
+  --main-left-background: #ffffff;
+  --logo-width: 4.9375rem;
+  --go-home-width: 3.75rem;
   --logo-background-color: #910000;
+
+  --main-sub-nav-background: url("img/sub_nav_bg.png");
+  --main-sub-nav-height: 3.5rem;
+  --main-sub-nav-title-width: 21.375rem;
+}
+.page:not(.home) .main .content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+}
+.page:not(.home) .main .content .left {
+  flex-grow: 0;
+  margin-right: var(--main-sub-menu-width);
+  background-color: var(--main-left-background);
+  height: calc(100% - var(--main-sub-header-height));
 }
+
 .page:not(.home) .main .content .right {
-  position: relative;
+  position: absolute;
   z-index: 1;
+  top: 0;
+  right: 0;
 }
-.page:not(.home) .main .content .left {
-  padding-top: var(--main-sub-header-height);
+.page:not(.home) .main .n-tabs .n-tabs-nav {
+  height: var(--main-sub-nav-height);
+  width: 100%;
+  background-image: var(--main-sub-nav-background);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: left center;
 }

src/views/info.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="main">
-    <sub-header />
     <div class="content">
+      <sub-header />
       <div class="left">
-        <n-tabs type="line">
-          <template #prefix><span class="meta-title">场馆资讯</span> </template>
+        <n-tabs type="line" pane-class="tab-content">
+          <template #prefix>
+            <span class="meta-title">
+              <img src="img/subtitle_1.png" />
+            </span>
+          </template>
           <n-tab-pane name="展览" tab="展览">
-            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+            <n-grid x-gap="30" y-gap="30" :cols="3" class="tab-grid">
               <template v-for="(_, index) in 16">
                 <n-gi>
                   <infoBox
@@ -20,7 +24,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="活动" tab="活动">
-            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+            <n-grid x-gap="30" y-gap="30" :cols="3" class="tab-grid">
               <template v-for="item in 16">
                 <n-gi>
                   <infoBox
@@ -33,7 +37,7 @@
             </n-grid>
           </n-tab-pane>
           <n-tab-pane name="新闻" tab="新闻">
-            <n-grid x-gap="12" y-gap="12" :cols="3" class="tab-grid">
+            <n-grid x-gap="30" y-gap="30" :cols="3" class="tab-grid">
               <template v-for="item in 16">
                 <n-gi>
                   <infoBox
@@ -82,55 +86,38 @@ onMounted(() => {
 });
 </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;
+  font-size: 1.375rem;
+  text-align: center;
+  width: var(--main-sub-nav-title-width);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: auto;
+    height: calc(var(--main-sub-nav-height) - 0.75rem);
+  }
 }
-.content {
-  flex: 1;
-  display: flex;
-  width: 100%;
+
+:deep(.n-tabs) {
+  --n-tab-font-size: 1.25rem !important;
+  --n-tab-gap: 60px !important;
   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-tab-pane {
+    overflow-y: scroll;
+  }
+  .n-tabs-bar {
+    height: 0.25rem;
+    border-radius: 1.875rem !important;
   }
 }
-.n-tabs {
-  --n-tab-font-size: 26px !important;
+.tab-content {
+  width: calc(100% - 12rem);
+  margin: 0 auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>