Browse Source

fix:修改顺序,去除tab

lanxin 4 months ago
parent
commit
016271ccb0
6 changed files with 1982 additions and 1271 deletions
  1. 1 1
      package.json
  2. 1896 1157
      pnpm-lock.yaml
  3. 21 35
      src/views/home.vue
  4. 19 23
      src/views/info-detail.vue
  5. 45 55
      src/views/info.vue
  6. BIN
      web.zip

+ 1 - 1
package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },

File diff suppressed because it is too large
+ 1896 - 1157
pnpm-lock.yaml


+ 21 - 35
src/views/home.vue

@@ -1,19 +1,10 @@
 <template>
   <div class="main">
     <div class="left">
-      <n-carousel
-        dot-placement="bottom"
-        style="width: 100%; height: 100%"
-        autoplay
-        :draggable="posters.length > 1"
-      >
+      <n-carousel dot-placement="bottom" style="width: 100%; height: 100%" autoplay :draggable="posters.length > 1">
         <template v-for="item in posters">
-          <img
-            class="carousel-img"
-            style="width: 100%; height: 100%; object-fit: cover"
-            :src="domain + item.filePath"
-            @error="$event.target.src=errorBanner"
-          />
+          <img class="carousel-img" style="width: 100%; height: 100%; object-fit: cover" :src="domain + item.filePath"
+            @error="$event.target.src = errorBanner" />
         </template>
       </n-carousel>
     </div>
@@ -22,42 +13,38 @@
         <img :src="Logo" />
       </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('/exhibition')" text>
-          展厅导览</n-button
-        >
         <n-button class="btn btn_3" @click="push('/collect')" text>
           馆藏精品
         </n-button>
+        <n-button class="btn btn_2" @click="push('/exhibition')" text>
+          展厅导览</n-button>
+        <n-button class="btn btn_1" @click="push('/info')" text>
+          场馆资讯</n-button>
         <n-button class="btn btn_4" @click="push('/survey')" text>
-          问卷调查</n-button
-        >
+          问卷调查</n-button>
         <n-button class="btn btn_5" @click="push('/feedback')" text>
-          留言反馈</n-button
-        >
+          留言反馈</n-button>
       </n-space>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useHomeStore } from "../store/home";
-import Logo from "../assets/logo.png";
-import errorBanner from "@/assets/show_banner.png";
-const { push } = useRouter();
-const homeStore = useHomeStore();
+import { computed, onMounted, ref } from "vue"
+import { useRouter } from "vue-router"
+import { useHomeStore } from "../store/home"
+import Logo from "../assets/logo.png"
+import errorBanner from "@/assets/show_banner.png"
+const { push } = useRouter()
+const homeStore = useHomeStore()
 
-const posters = computed(() => homeStore.poster || []);
+const posters = computed(() => homeStore.poster || [])
 
-const domain = ref(import.meta.env.VITE_DOMAIN_URL);
+const domain = ref(import.meta.env.VITE_DOMAIN_URL)
 
 onMounted(async () => {
-  await homeStore.getPoster();
-});
+  await homeStore.getPoster()
+})
 </script>
 <style>
 .main {
@@ -93,8 +80,7 @@ onMounted(async () => {
   width: 416px;
   // background-color: var(--main-home-right-background);
   border-top: var(--main-right-border) solid var(--main-home-right-background);
-  border-bottom: var(--main-right-border) solid
-    var(--main-home-right-background);
+  border-bottom: var(--main-right-border) solid var(--main-home-right-background);
   background-image: var(--main-right-bg-img);
   background-size: cover;
   background-repeat: no-repeat;

+ 19 - 23
src/views/info-detail.vue

@@ -10,11 +10,7 @@
             <div class="back" @click="$router.go(-1)"></div>
             <div class="info">
               <div class="show-case" v-if="detail.video">
-                <video
-                  :src="domain + detail.video"
-                  playsinline
-                  controls
-                ></video>
+                <video :src="domain + detail.video" playsinline controls></video>
               </div>
               <h3 class="title">{{ detail.name }}</h3>
 
@@ -46,45 +42,45 @@
 </template>
 
 <script setup>
-import { watchEffect, ref, onMounted, computed } from "vue";
-import subHeader from "../components/subHeader";
-import sideMenu from "../components/sideMenu";
-import heroSubTitle from "../components/heroSubTitle";
-import { useInfoStore } from "../store/info";
+import { watchEffect, ref, onMounted, computed } from "vue"
+import subHeader from "../components/subHeader"
+import sideMenu from "../components/sideMenu"
+import heroSubTitle from "../components/heroSubTitle"
+import { useInfoStore } from "../store/info"
 
-const infoStore = useInfoStore();
-const detail = computed(() => infoStore.detail);
-const domain = ref(import.meta.env.VITE_DOMAIN_URL);
+const infoStore = useInfoStore()
+const detail = computed(() => infoStore.detail)
+const domain = ref(import.meta.env.VITE_DOMAIN_URL)
 
 const typeLabel = computed(() => (type) => {
   switch (type) {
     case "exhibition":
-      return "展览";
+      return "展览"
     case "news":
-      return "新闻";
+      return "新闻"
     case "activity":
-      return "活动";
+      return "活动"
     case "notice":
-      return "通知";
+      return "通知"
   }
-});
+})
 const props = defineProps({
   id: {
     type: [String, Number],
     default: () => null,
     required: true,
   },
-});
+})
 onMounted(() => {
   if (props.id) {
-    infoStore.getDetail(props.id);
+    infoStore.getDetail(props.id)
   }
-});
+})
 watchEffect(() => {
   if (unref(detail)) {
-    document.title = unref(detail).name;
+    document.title = unref(detail).name
   }
-});
+})
 </script>
 
 <style lang="scss" scoped>

+ 45 - 55
src/views/info.vue

@@ -10,26 +10,17 @@
               <img src="@/assets/subtitle_1.png" />
             </span>
           </template>
-          <n-tab-pane
-            name="exhibitions"
-            tab="展览"
-            v-infinite-scroll="onLoadMore"
-          >
+          <n-tab-pane name="exhibitions" tab="展览" v-infinite-scroll="onLoadMore">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in exhibitions">
                 <n-gi>
-                  <info-box
-                    :id="item.id"
-                    :title="item.name"
-                    :cover="domain + item.thumb"
-                    :time="item.publishDate"
-                  />
+                  <info-box :id="item.id" :title="item.name" :cover="domain + item.thumb" :time="item.publishDate" />
                 </n-gi>
               </template>
             </n-grid>
             <empty :show="exhibitions.length === 0" :height="500" />
           </n-tab-pane>
-          <n-tab-pane name="activates" tab="活动">
+          <!-- <n-tab-pane name="activates" tab="活动">
             <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in activates">
                 <n-gi>
@@ -43,32 +34,23 @@
               </template>
             </n-grid>
             <empty :show="activates.length === 0" :height="500" />
-          </n-tab-pane>
+          </n-tab-pane> -->
           <n-tab-pane name="news" tab="新闻">
-            <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
+            <div>123</div>
+            <!-- <n-grid :x-gap="XGap" :y-gap="YGap" :cols="3" class="tab-grid">
               <template v-for="item in news">
                 <n-gi>
-                  <info-box
-                    :id="item.id"
-                    :title="item.name"
-                    :cover="domain + item.thumb"
-                    :time="item.publishDate"
-                  />
+                  <info-box :id="item.id" :title="item.name" :cover="domain + item.thumb" :time="item.publishDate" />
                 </n-gi>
               </template>
-            </n-grid>
+            </n-grid> -->
             <empty :show="news.length === 0" :height="500" />
           </n-tab-pane>
           <n-tab-pane name="notices" tab="通知">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="item in notices">
                 <n-gi>
-                  <notice-box
-                    :id="item.id"
-                    :title="item.name"
-                    :content="item.richText"
-                    :time="item.publishDate"
-                  />
+                  <notice-box :id="item.id" :title="item.name" :content="item.richText" :time="item.publishDate" />
                 </n-gi>
               </template>
             </n-grid>
@@ -82,48 +64,56 @@
 </template>
 
 <script setup>
-import { onMounted, watch, computed } from "vue";
-import { vInfiniteScroll } from "@vueuse/components";
-import infoBox from "../components/infoBox";
-import subHeader from "../components/subHeader";
-import sideMenu from "../components/sideMenu";
-import noticeBox from "../components/noticeBox";
-import empty from "../components/empty.vue";
-import { useInfoStore } from "../store/info";
-import { useLoadingBar } from "naive-ui";
+import { onMounted, watch, computed } from "vue"
+import { vInfiniteScroll } from "@vueuse/components"
+import infoBox from "../components/infoBox"
+import subHeader from "../components/subHeader"
+import sideMenu from "../components/sideMenu"
+import noticeBox from "../components/noticeBox"
+import empty from "../components/empty.vue"
+import { useInfoStore } from "../store/info"
+import { useLoadingBar } from "naive-ui"
 
-const infoStore = useInfoStore();
-const loadingBar = useLoadingBar();
-const domain = ref(import.meta.env.VITE_DOMAIN_URL);
-const currentTab = ref("exhibitions");
-const news = computed(() => infoStore.news);
-const notices = computed(() => infoStore.notices);
-const activates = computed(() => infoStore.activates);
-const exhibitions = computed(() => infoStore.exhibitions);
+const infoStore = useInfoStore()
+const loadingBar = useLoadingBar()
+const domain = ref(import.meta.env.VITE_DOMAIN_URL)
+const currentTab = ref("exhibitions")
+const news = computed(() => infoStore.news)
+const notices = computed(() => infoStore.notices)
+const activates = computed(() => infoStore.activates)
+const exhibitions = computed(() => infoStore.exhibitions)
 const handleTabFetch = async (type) => {
-  loadingBar.start();
-  await infoStore.switchTab(type);
-  loadingBar.finish();
-};
+  loadingBar.start()
+  await infoStore.switchTab(type)
+  loadingBar.finish()
+}
 
 watch(
   currentTab,
   (val) => {
-    console.log("currentTab", val);
-    handleTabFetch(val);
+    if (val === "news") {
+      window.open("http://www.qsqyhsjng.com/szjq/jqxw/")
+      currentTab.value = "exhibitions"
+    }
+    if (val === "notices") {
+      window.open("http://www.qsqyhsjng.com/jqgk/tzgg/")
+      currentTab.value = "exhibitions"
+    }
+    console.log("currentTab", val)
+    handleTabFetch(val)
   },
   {
     immediate: true,
   }
-);
-const XGap = ref(50);
-const YGap = ref(50);
+)
+const XGap = ref(50)
+const YGap = ref(50)
 
 const onLoadMore = () => {
   if (infoStore.isLoad) {
-    infoStore.loadMore(currentTab.value);
+    infoStore.loadMore(currentTab.value)
   }
-};
+}
 </script>
 
 <style lang="scss" scoped></style>

BIN
web.zip