Почетна Преглед Помоћ
Регистрација Пријавите се
chenlei
/
crand-canal-museum
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

feat: support for mobile

chenlei пре 1 недеља
родитељ
a7e1ffc901
комит
460374577d
5 измењених фајлова са 173 додато и 25 уклоњено
Један поглед Покажи статистику Diff
  1. 93 1
      packages/pc/index.html
  2. 16 13
      packages/pc/src/views/Home/map.scss
  3. 61 10
      packages/pc/src/views/Home/map.vue
  4. 0 1
      packages/pc/src/views/Step2/detail.vue
  5. 3 0
      packages/pc/vite.config.js

+ 93 - 1
packages/pc/index.html
Прегледај датотеку 

@@ -5,9 +5,101 @@
 
     <link rel="icon" href="/favicon.ico" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>镇水安澜</title>
 
     <title>镇水安澜</title>
 
+    <style>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        box-sizing: border-box;
 
+      }
 
+
 
+      #app-container {
 
+        width: 100vw;
 
+        height: 100vh;
 
+        overflow-y: auto;
 
+      }
 
+
 
+      #app {
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+
 
+      @media (max-width: 768px) and (orientation: portrait) {
 
+        body:not(.in-iframe) #app-container {
 
+          position: fixed;
 
+          top: 50%;
 
+          left: 50%;
 
+          width: 100vh;
 
+          height: 100vw;
 
+          transform: translate(-50%, -50%) rotate(90deg);
 
+          transform-origin: center center;
 
+        }
 
+
 
+        body:not(.in-iframe) #app {
 
+          display: none;
 
+        }
 
+
 
+        body:not(.in-iframe) #app-iframe {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+          border: none;
 
+        }
 
+      }
 
+
 
+      body.in-iframe #app-container {
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+
 
+      body.in-iframe #app-iframe {
 
+        display: none;
 
+      }
 
+
 
+      #app-iframe {
 
+        display: none;
 
+      }
 
+    </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
-    <div id="app"></div>
 
+    <div id="app-container">
 
+      <div id="app"></div>
 
+      <iframe id="app-iframe"></iframe>
 
+    </div>
 
+    <script>
 
+      if (window.self !== window.top) {
 
+        document.body.classList.add("in-iframe");
 
+      }
 
+
 
+      if (window.self === window.top) {
 
+        function handleOrientation() {
 
+          const app = document.getElementById("app");
 
+          const iframe = document.getElementById("app-iframe");
 
+
 
+          if (
 
+            window.innerWidth <= 768 &&
 
+            window.innerHeight > window.innerWidth
 
+          ) {
 
+            app.style.display = "none";
 
+            iframe.style.display = "block";
 
+            if (!iframe.src) {
 
+              const url = new URL(window.location.href);
 
+              url.searchParams.set("iframe", "1");
 
+              iframe.src = url.toString();
 
+            }
 
+          } else {
 
+            app.style.display = "block";
 
+            iframe.style.display = "none";
 
+          }
 
+        }
 
+
 
+        handleOrientation();
 
+
 
+        window.addEventListener("resize", handleOrientation);
 
+        window.addEventListener("orientationchange", () => {
 
+          setTimeout(handleOrientation, 100);
 
+        });
 
+      }
 
+    </script>
 
     <script type="module" src="/src/main.js"></script>
 
     <script type="module" src="/src/main.js"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 16 - 13
packages/pc/src/views/Home/map.scss
Прегледај датотеку 

@@ -1,3 +1,5 @@
 
+@use "@/assets/utils.scss";

+

 .home-map {

 .home-map {

   position: relative;

   position: relative;

   padding-top: 30px;

   padding-top: 30px;

@@ -92,6 +94,9 @@
 
       transition: none;

       transition: none;

       will-change: transform;

       will-change: transform;

     }

     }

+    img {

+      width: 2752px;

+    }

     &-point {

     &-point {

       position: absolute;

       position: absolute;

       top: 0;

       top: 0;

@@ -99,26 +104,24 @@
 
       display: flex;

       display: flex;

       color: #604424;

       color: #604424;

 

 

-      // prettier-ignore

       &-label {

       &-label {

         position: relative;

         position: relative;

-        top: 40PX;

-        width: 102PX;

-        height: 170PX;

-        font-size: 27PX;

-        line-height: 102PX;

+        top: 40px;

+        width: 102px;

+        height: 170px;

+        font-size: 27px;

+        line-height: 102px;

         text-align: center;

         text-align: center;

         writing-mode: vertical-lr;

         writing-mode: vertical-lr;

-        letter-spacing: 10PX;

+        letter-spacing: 10px;

         background: url("./images/label-bg-min.png") no-repeat center / contain;

         background: url("./images/label-bg-min.png") no-repeat center / contain;

       }

       }

-      // prettier-ignore

       &-content {

       &-content {

-        padding: 20PX 85PX 20PX 25PX;

-        width: 440PX;

-        height: 142PX;

-        font-size: 16PX;

-        line-height: 26PX;

+        padding: 20px 85px 20px 25px;

+        width: 440px;

+        height: 142px;

+        font-size: 16px;

+        line-height: 26px;

         background: url("./images/card-bg-min.png") no-repeat center / contain;

         background: url("./images/card-bg-min.png") no-repeat center / contain;

       }

       }

     }

     }

+ 61 - 10
packages/pc/src/views/Home/map.vue
Прегледај датотеку 

@@ -41,7 +41,7 @@
 
 </template>

 </template>

 

 

 <script setup>

 <script setup>

-import { ref, computed, onUnmounted, watch, nextTick } from "vue";

+import { ref, computed, onUnmounted, watch, nextTick, onMounted } from "vue";

 import { IRON_BULL_LIST } from "@canal/base";

 import { IRON_BULL_LIST } from "@canal/base";

 

 

 const mapContainer = ref(null);

 const mapContainer = ref(null);

@@ -53,7 +53,10 @@ const currentX = ref(0);
 
 const currentY = ref(0);

 const currentY = ref(0);

 const activeIndex = ref(-1);

 const activeIndex = ref(-1);

 const enableTransition = ref(false);

 const enableTransition = ref(false);

-const POSITIONS = {

+const ORIGINAL_IMAGE_WIDTH = 2752; // 原始图片宽度（px）

+

+// 原始坐标（基于 2752px 宽度）

+const ORIGINAL_POSITIONS = {

   0: {

   0: {

     x: -17,

     x: -17,

     y: 380,

     y: 380,

@@ -76,6 +79,24 @@ const POSITIONS = {
 
   },

   },

 };

 };

 

 

+// 根据图片实际渲染尺寸动态计算坐标

+const POSITIONS = computed(() => {

+  if (!mapImage.value) return ORIGINAL_POSITIONS;

+

+  const actualWidth = mapImage.value.getBoundingClientRect().width;

+  const scale = actualWidth / ORIGINAL_IMAGE_WIDTH;

+

+  const positions = {};

+  Object.keys(ORIGINAL_POSITIONS).forEach((key) => {

+    positions[key] = {

+      x: ORIGINAL_POSITIONS[key].x * scale,

+      y: ORIGINAL_POSITIONS[key].y * scale,

+    };

+  });

+

+  return positions;

+});

+

 const imageStyle = computed(() => {

 const imageStyle = computed(() => {

   return {

   return {

     transform: `translate(${currentX.value}px, ${currentY.value}px)`,

     transform: `translate(${currentX.value}px, ${currentY.value}px)`,

@@ -96,6 +117,21 @@ const handleMouseDown = (e) => {
 
   document.addEventListener("mouseup", handleMouseUp);

   document.addEventListener("mouseup", handleMouseUp);

 };

 };

 

 

+const DESIGN_VIEWPORT_WIDTH = 1920;

+const MAP_OFFSET_X_RATIO = 395 / DESIGN_VIEWPORT_WIDTH;

+const MAP_OFFSET_Y_RATIO = 30 / DESIGN_VIEWPORT_WIDTH;

+

+const getMapOffsets = () => {

+  const fallback = { offsetX: 395, offsetY: 30 };

+  if (!mapContainer.value) return fallback;

+

+  const { width } = mapContainer.value.getBoundingClientRect();

+  return {

+    offsetX: width * MAP_OFFSET_X_RATIO,

+    offsetY: width * MAP_OFFSET_Y_RATIO,

+  };

+};

+

 const handleMouseMove = (e) => {

 const handleMouseMove = (e) => {

   if (!isDragging.value) return;

   if (!isDragging.value) return;

 

 

@@ -107,15 +143,17 @@ const handleMouseMove = (e) => {
 
     const containerRect = mapContainer.value.getBoundingClientRect();

     const containerRect = mapContainer.value.getBoundingClientRect();

     const imageRect = mapImage.value.getBoundingClientRect();

     const imageRect = mapImage.value.getBoundingClientRect();

 

 

+    const { offsetX, offsetY } = getMapOffsets();

+

     // 获取图片的实际尺寸（考虑缩放）

     // 获取图片的实际尺寸（考虑缩放）

-    const imageWidth = imageRect.width + 395;

-    const imageHeight = imageRect.height + 30;

+    const imageWidthValue = imageRect.width + offsetX;

+    const imageHeight = imageRect.height + offsetY;

     const containerWidth = containerRect.width;

     const containerWidth = containerRect.width;

     const containerHeight = containerRect.height;

     const containerHeight = containerRect.height;

 

 

     // 计算允许的最大和最小偏移量

     // 计算允许的最大和最小偏移量

     const maxX = 0;

     const maxX = 0;

-    const minX = containerWidth - imageWidth;

+    const minX = containerWidth - imageWidthValue;

     const maxY = 0;

     const maxY = 0;

     const minY = containerHeight - imageHeight;

     const minY = containerHeight - imageHeight;

 

 

@@ -140,8 +178,10 @@ const centerOnPoint = (index) => {
 
     const containerRect = mapContainer.value.getBoundingClientRect();

     const containerRect = mapContainer.value.getBoundingClientRect();

     const imageRect = mapImage.value.getBoundingClientRect();

     const imageRect = mapImage.value.getBoundingClientRect();

 

 

-    const imageWidth = imageRect.width + 395;

-    const imageHeight = imageRect.height + 30;

+    const { offsetX, offsetY } = getMapOffsets();

+

+    const imageWidthValue = imageRect.width + offsetX;

+    const imageHeight = imageRect.height + offsetY;

     const containerWidth = containerRect.width;

     const containerWidth = containerRect.width;

     const containerHeight = containerRect.height;

     const containerHeight = containerRect.height;

 

 

@@ -150,12 +190,12 @@ const centerOnPoint = (index) => {
 
     const centerY = containerHeight / 2;

     const centerY = containerHeight / 2;

 

 

     // 计算目标位置：让点位于容器中心

     // 计算目标位置：让点位于容器中心

-    const targetX = centerX - POSITIONS[index].x - 395;

-    const targetY = centerY - POSITIONS[index].y;

+    const targetX = centerX - POSITIONS.value[index].x - offsetX;

+    const targetY = centerY - POSITIONS.value[index].y;

 

 

     // 计算允许的最大和最小偏移量

     // 计算允许的最大和最小偏移量

     const maxX = 0;

     const maxX = 0;

-    const minX = containerWidth - imageWidth;

+    const minX = containerWidth - imageWidthValue;

     const maxY = 0;

     const maxY = 0;

     const minY = containerHeight - imageHeight;

     const minY = containerHeight - imageHeight;

 

 

@@ -171,15 +211,26 @@ const centerOnPoint = (index) => {
 
   });

   });

 };

 };

 

 

+const handleResize = () => {

+  if (activeIndex.value !== -1) {

+    centerOnPoint(activeIndex.value);

+  }

+};

+

 watch(activeIndex, (newIndex) => {

 watch(activeIndex, (newIndex) => {

   if (newIndex !== -1) {

   if (newIndex !== -1) {

     centerOnPoint(newIndex);

     centerOnPoint(newIndex);

   }

   }

 });

 });

 

 

+onMounted(() => {

+  window.addEventListener("resize", handleResize);

+});

+

 onUnmounted(() => {

 onUnmounted(() => {

   document.removeEventListener("mousemove", handleMouseMove);

   document.removeEventListener("mousemove", handleMouseMove);

   document.removeEventListener("mouseup", handleMouseUp);

   document.removeEventListener("mouseup", handleMouseUp);

+  window.removeEventListener("resize", handleResize);

 });

 });

 </script>

 </script>

+ 0 - 1
packages/pc/src/views/Step2/detail.vue
Прегледај датотеку 

@@ -28,7 +28,6 @@
 
         <swiper-slide v-for="(item, index) in detail.imgs" :key="item.thumb">

         <swiper-slide v-for="(item, index) in detail.imgs" :key="item.thumb">

           <el-image

           <el-image

             :src="baseUrl + item.thumb"

             :src="baseUrl + item.thumb"

-            lazy

             fit="cover"

             fit="cover"

             preview-teleported

             preview-teleported

             :preview-src-list="detail.imgs.map((item) => baseUrl + item.img)"

             :preview-src-list="detail.imgs.map((item) => baseUrl + item.img)"

+ 3 - 0
packages/pc/vite.config.js
Прегледај датотеку 

@@ -10,6 +10,9 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
 // https://vite.dev/config/
 
 // https://vite.dev/config/
 
 export default defineConfig({
 
 export default defineConfig({
 
   base: "./",
 
   base: "./",
 
+  server: {
 
+    host: "0.0.0.0",
 
+  },
 
   plugins: [
 
   plugins: [
 
     vue(),
 
     vue(),
 
     AutoImport({
 
     AutoImport({