chore: 修改首页

package.json

@@ -20,6 +20,7 @@
     "element-plus": "^2.3.8",
     "lodash": "^4.17.21",
     "vue": "^3.2.13",
+    "vue-awesome-swiper": "^5.0.1",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   vue:
     specifier: ^3.2.13
     version: 3.3.4
+  vue-awesome-swiper:
+    specifier: ^5.0.1
+    version: registry.npmmirror.com/vue-awesome-swiper@5.0.1(swiper@8.4.7)(vue@3.3.4)
   vue-class-component:
     specifier: ^8.0.0-0
     version: 8.0.0-alpha.1(vue@3.3.4)
@@ -11442,6 +11445,14 @@ packages:
       entities: registry.npmmirror.com/entities@2.2.0
     dev: true
 
+  registry.npmmirror.com/dom7@4.0.6:
+    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dom7/-/dom7-4.0.6.tgz}
+    name: dom7
+    version: 4.0.6
+    dependencies:
+      ssr-window: registry.npmmirror.com/ssr-window@4.0.2
+    dev: false
+
   registry.npmmirror.com/domain-browser@1.2.0:
     resolution: {integrity: sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz}
     name: domain-browser
@@ -15027,6 +15038,12 @@ packages:
       tweetnacl: registry.npmmirror.com/tweetnacl@0.14.5
     dev: true
 
+  registry.npmmirror.com/ssr-window@4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz}
+    name: ssr-window
+    version: 4.0.2
+    dev: false
+
   registry.npmmirror.com/ssri@6.0.2:
     resolution: {integrity: sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ssri/-/ssri-6.0.2.tgz}
     name: ssri
@@ -15277,6 +15294,17 @@ packages:
       - supports-color
     dev: true
 
+  registry.npmmirror.com/swiper@8.4.7:
+    resolution: {integrity: sha512-VwO/KU3i9IV2Sf+W2NqyzwWob4yX9Qdedq6vBtS0rFqJ6Fa5iLUJwxQkuD4I38w0WDJwmFl8ojkdcRFPHWD+2g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/swiper/-/swiper-8.4.7.tgz}
+    name: swiper
+    version: 8.4.7
+    engines: {node: '>= 4.7.0'}
+    requiresBuild: true
+    dependencies:
+      dom7: registry.npmmirror.com/dom7@4.0.6
+      ssr-window: registry.npmmirror.com/ssr-window@4.0.2
+    dev: false
+
   registry.npmmirror.com/tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz}
     name: tapable
@@ -15866,6 +15894,19 @@ packages:
     version: 1.1.2
     dev: true
 
+  registry.npmmirror.com/vue-awesome-swiper@5.0.1(swiper@8.4.7)(vue@3.3.4):
+    resolution: {integrity: sha512-mWjFJzUqA4lG+DmsmibvMpoiBnl+IH2SSeiiQ3i5M0t1y9FknTxnGT0DsMb2YdJLgjYMEK3sYOWzqgLnZMH8Lg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-5.0.1.tgz}
+    id: registry.npmmirror.com/vue-awesome-swiper/5.0.1
+    name: vue-awesome-swiper
+    version: 5.0.1
+    peerDependencies:
+      swiper: ^7.0.0  || ^8.0.0
+      vue: 3.x
+    dependencies:
+      swiper: registry.npmmirror.com/swiper@8.4.7
+      vue: 3.3.4
+    dev: false
+
   registry.npmmirror.com/vue-demi@0.14.5(vue@3.3.4):
     resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz}
     id: registry.npmmirror.com/vue-demi/0.14.5

public/config.js

@@ -6,3 +6,66 @@ cloudScenicUrl = "https://www.baidu.com";
 
 // 单位
 company = "珠海四维看看";
+
+// 云游景区 url 配置
+SCENIC_MUSEUM_POS = [
+  {
+    id: 37,
+    name: "徐州市",
+    left: 229,
+    top: 136,
+    url: "https://baidu.com",
+  },
+  { id: 47, name: "宿迁市", left: 349, top: 227 },
+  {
+    id: 41,
+    name: "连云港市",
+    left: 520,
+    top: 40,
+  },
+  {
+    id: 42,
+    name: "淮安市",
+    left: 470,
+    top: 270,
+  },
+  { id: 43, name: "盐城市", left: 690, top: 316 },
+  {
+    id: 44,
+    name: "扬州市",
+    left: 540,
+    top: 400,
+  },
+  { id: 46, name: "泰州市", left: 700, top: 635 },
+  {
+    id: 35,
+    name: "南京市",
+    left: 374,
+    top: 757,
+  },
+  { id: 45, name: "镇江市", left: 555, top: 731 },
+  {
+    id: 40,
+    name: "南通市",
+    left: 892,
+    top: 696,
+  },
+  {
+    id: 38,
+    name: "常州市",
+    left: 594,
+    top: 840,
+  },
+  {
+    id: 36,
+    name: "无锡市",
+    left: 770,
+    top: 854,
+  },
+  {
+    id: 39,
+    name: "苏州市",
+    left: 885,
+    top: 904,
+  },
+];

src/App.vue

@@ -12,7 +12,7 @@
     </router-view>
 
     <ScreenSavers
-      v-show="showScreenSavers"
+      v-if="showScreenSavers"
       :autoPlay="autoPlay"
       :list="screenList"
       @onClick="closeScreen"

src/background.ts

@@ -3,6 +3,7 @@
 import { app, protocol, BrowserWindow } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
+import path from "path";
 const isDevelopment = process.env.NODE_ENV !== "production";
 
 // Scheme must be registered before the app is ready
@@ -23,6 +24,7 @@ async function createWindow() {
         .ELECTRON_NODE_INTEGRATION as unknown as boolean,
       contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
     },
+    icon: path.join(__dirname, "./public/imgs/app.png"),
   });
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
@@ -36,7 +38,7 @@ async function createWindow() {
   }
 
   win.setMenu(null);
-  win.webContents.openDevTools();
+  // win.webContents.openDevTools();
 }
 
 // Quit when all windows are closed.

src/global.d.ts

@@ -2,4 +2,11 @@ interface Window {
   museum: string;
   cloudScenicUrl: string;
   company: string;
+  SCENIC_MUSEUM_POS: {
+    id: number;
+    name: string;
+    left: number;
+    top: number;
+    url: string;
+  }[];
 }

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import HomeView from "../views/home/index.vue";
+import HomeView from "../views/ver-scroll-home/index.vue";
 import MuseumDetail from "../views/museum-detail/index.vue";
 import CloudMuseum from "../views/cloud-museum/index.vue";
 import VenueReservation from "../views/venue-reservation/index.vue";

src/views/home/components/card/index.vue

@@ -20,16 +20,28 @@ const props = defineProps<{
   name: string;
   left: number;
   top: number;
+  url?: string;
+  isScenic?: boolean;
 }>();
-const { name, left, top, id } = toRefs(props);
+const { name, left, top, id, url, isScenic } = toRefs(props);
 const router = useRouter();
 
 const handleClick = () => {
-  router.push({
-    name: "cloudMuseum",
-    params: {
-      id: id.value,
-    },
-  });
+  if (isScenic.value) {
+    url?.value &&
+      router.push({
+        name: "iframe",
+        params: {
+          url: encodeURIComponent(url.value),
+        },
+      });
+  } else {
+    router.push({
+      name: "cloudMuseum",
+      params: {
+        id: id.value,
+      },
+    });
+  }
 };
 </script>

src/views/home/index.scss

@@ -1,11 +1,10 @@
 .home {
+  position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  background: url("./imgs/bg2.jpg") no-repeat center / 100%;
 
-  &__bg {
-    display: block;
-  }
   // &-primary-card {
   //   position: absolute;
   //   top: 635px;
@@ -32,7 +31,7 @@
   // }
   &-menu {
     position: fixed;
-    right: 1.25rem /* 100/80 */;
+    right: 2.8rem /* 224/80 */;
     bottom: calc(2.5rem /* 200/80 */ + 1.3125rem /* 105/80 */);
     z-index: 2;
 
@@ -60,7 +59,7 @@
     align-items: center;
     justify-content: center;
     position: fixed;
-    right: 1.875rem /* 150/80 */;
+    right: 3.375rem /* 270/80 */;
     bottom: 6%;
     color: #ffffff;
     z-index: 2;

src/views/home/index.vue

@@ -1,24 +1,15 @@
 <template>
   <div class="home">
-    <DragView :maxTranslateXLength="maxWidth" :maxTranslateYLength="maxHeight">
-      <img
-        ref="imgRef"
-        class="home__bg"
-        draggable="false"
-        :src="bgImg"
-        :style="{ width: IMG_WIDTH + 'px' }"
-      />
+    <Card
+      v-for="item in MUSEUM_POS"
+      :key="item.name"
+      :name="item.name"
+      :top="item.top"
+      :id="item.id"
+      :left="item.left"
+    />
 
-      <Card
-        v-for="item in MUSEUM_POS"
-        :key="item.name"
-        :name="item.name"
-        :top="item.top"
-        :id="item.id"
-        :left="item.left"
-      />
-
-      <!-- <div
+    <!-- <div
         class="home-primary-card"
         @click="
           () =>
@@ -34,140 +25,71 @@
           <span>扬州中国大运河博物馆</span>
         </div>
       </div> -->
-
-      <div class="home-menu">
-        <div class="home-menu-list">
-          <img
-            draggable="false"
-            src="./imgs/btn_museum_active@2x.png"
-            @click="router.push({ name: 'cloudMuseum', params: { id: 0 } })"
-          />
-          <img
-            draggable="false"
-            src="./imgs/btn_scenery_normal@2x.png"
-            @click="goScenic"
-          />
-          <img
-            draggable="false"
-            src="./imgs/btn_reservation_normal@2x.png"
-            @click="router.push({ name: 'venueReservation' })"
-          />
-        </div>
-
-        <img
-          draggable="false"
-          class="home-menu__border"
-          src="./imgs/label@2x.png"
-        />
-      </div>
-
-      <div class="home-helper">
-        <img draggable="false" src="./imgs/icon_gesture@2x.png" />
-        <span>可通过滑动查看地图</span>
-      </div>
-    </DragView>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref } from "vue";
-import { DragView } from "@/components";
-import { getImageRect } from "@/utils";
-import bgImg from "./imgs/bg2.jpg";
 import Card from "./components/card/index.vue";
-import { useRouter } from "vue-router";
 import "./index.scss";
 
-const IMG_WIDTH = 1920;
-const maxWidth = ref(0);
-const maxHeight = ref(0);
-const imgRef = ref<null | HTMLElement>(null);
-const router = useRouter();
-
-onMounted(() => {
-  init();
-
-  window.addEventListener("resize", init);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", init);
-});
-
-const init = async () => {
-  if (!imgRef.value) return;
-  await getImageRect(bgImg);
-  maxWidth.value = imgRef.value.clientWidth - window.innerWidth;
-  maxHeight.value = imgRef.value.clientHeight - window.innerHeight;
-};
-
 const MUSEUM_POS = [
   {
     id: 37,
     name: "徐州市",
-    left: 300,
-    top: 140,
+    left: 229,
+    top: 136,
   },
-  { id: 47, name: "宿迁市", left: 449, top: 290 },
+  { id: 47, name: "宿迁市", left: 349, top: 227 },
   {
     id: 41,
     name: "连云港市",
-    left: 690,
-    top: 106,
+    left: 540,
+    top: 102,
   },
   {
     id: 42,
     name: "淮安市",
-    left: 656,
-    top: 404,
+    left: 515,
+    top: 312,
   },
-  { id: 43, name: "盐城市", left: 935, top: 376 },
+  { id: 43, name: "盐城市", left: 739, top: 316 },
   {
     id: 44,
     name: "扬州市",
-    left: 725,
-    top: 512,
+    left: 574,
+    top: 414,
   },
-  { id: 46, name: "泰州市", left: 896, top: 819 },
+  { id: 46, name: "泰州市", left: 700, top: 635 },
   {
     id: 35,
     name: "南京市",
-    left: 469,
-    top: 952,
+    left: 374,
+    top: 757,
   },
-  { id: 45, name: "镇江市", left: 706, top: 967 },
+  { id: 45, name: "镇江市", left: 555, top: 731 },
   {
     id: 40,
     name: "南通市",
-    left: 1116,
-    top: 917,
+    left: 892,
+    top: 696,
   },
   {
     id: 38,
     name: "常州市",
-    left: 758,
-    top: 1077,
+    left: 594,
+    top: 840,
   },
   {
     id: 36,
     name: "无锡市",
-    left: 970,
-    top: 1100,
+    left: 770,
+    top: 854,
   },
   {
     id: 39,
     name: "苏州市",
-    left: 1131,
-    top: 1157,
+    left: 885,
+    top: 904,
   },
 ];
-
-const goScenic = () => {
-  router.push({
-    name: "iframe",
-    params: {
-      url: encodeURIComponent(window.cloudScenicUrl),
-    },
-  });
-};
 </script>

src/views/home/scenic.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="scenic-home">
+    <Card
+      v-for="item in MUSEUM_POS"
+      :key="item.name"
+      :name="item.name"
+      :top="item.top"
+      :id="item.id"
+      :left="item.left"
+      :url="item.url"
+      is-scenic
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Card from "./components/card/index.vue";
+
+const MUSEUM_POS = window.SCENIC_MUSEUM_POS;
+</script>
+
+<style lang="scss">
+.scenic-home {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: url("./imgs/bg3.jpg") no-repeat center / 100%;
+}
+</style>

src/views/ver-scroll-home/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="scroll-page">
+    <Swiper
+      :loop="false"
+      direction="vertical"
+      :grab-cursor="true"
+      :resistance-ratio="0"
+      style="width: 100vw; height: 100vh; overflow: hidden"
+      @slide-change-transition-end="handleChange"
+    >
+      <SwiperSlide>
+        <Home />
+      </SwiperSlide>
+      <SwiperSlide>
+        <ScenicHome />
+      </SwiperSlide>
+    </Swiper>
+
+    <div class="home-menu">
+      <div class="home-menu-list">
+        <img
+          v-for="(item, index) in menuList"
+          :key="item.icon"
+          draggable="false"
+          :src="curIndex === index ? item.activeIcon : item.icon"
+          @click="item.event"
+        />
+      </div>
+
+      <img
+        draggable="false"
+        class="home-menu__border"
+        src="./imgs/label@2x.png"
+      />
+    </div>
+
+    <div class="home-helper">
+      <img draggable="false" src="./imgs/icon_gesture@2x.png" />
+      <span>可通过上下滑动切换地图</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import { useRouter } from "vue-router";
+import Home from "../home/index.vue";
+import ScenicHome from "../home/scenic.vue";
+import { computed, ref } from "vue";
+import MuseumNormalImg from "./imgs/btn_museum_normal@2x.png";
+import MuseumActiveImg from "./imgs/btn_museum_active@2x.png";
+import SceneryNormalImg from "./imgs/btn_scenery_normal@2x.png";
+import SceneryActiveImg from "./imgs/btn_scenery_active@2x.png";
+import ReservationNormalImg from "./imgs/btn_reservation_normal@2x.png";
+import ReservationActiveImg from "./imgs/btn_reservation_active@2x.png";
+
+const router = useRouter();
+const curIndex = ref(0);
+const menuList = computed(() => [
+  {
+    icon: MuseumNormalImg,
+    activeIcon: MuseumActiveImg,
+    event() {
+      router.push({ name: "cloudMuseum", params: { id: 0 } });
+    },
+  },
+  {
+    icon: SceneryNormalImg,
+    activeIcon: SceneryActiveImg,
+    event() {
+      router.push({ name: "iframe", params: { url: window.cloudScenicUrl } });
+    },
+  },
+  {
+    icon: ReservationNormalImg,
+    activeIcon: ReservationActiveImg,
+    event() {
+      router.push({ name: "venueReservation" });
+    },
+  },
+]);
+
+const handleChange = (swiper: any) => {
+  curIndex.value = swiper.snapIndex;
+};
+</script>

vue.config.js

@@ -20,6 +20,11 @@ module.exports = defineConfig({
       builderOptions: {
         productName: "江苏省文旅厅",
         asar: false,
+        nsis: {
+          oneClick: false,
+          allowToChangeInstallationDirectory: true,
+        },
+        win: { target: "nsis", icon: "./public/imgs/app.png" },
       },
     },
   },