s

postcss.config.js

@@ -1,9 +1,31 @@
-// postcss.config.js
+import postcss from 'postcss';
 import pxToViewport from 'postcss-px-to-viewport';
+import { customPostCSSPlugin } from "./src/utils/custom-postcss-plugin.js"; // 替换为实际的路径
+
+// 将 pxToViewport 应用到 navigation 文件夹下的文件
+const customPxToViewportPlugin = postcss.plugin('custom-px-to-viewport', (options) => {
+    const pxToViewportInstance = pxToViewport({
+        viewportWidth: options.viewportWidth,
+        // ... 其他 pxToViewport 参数，如果需要的话
+    });
+
+    return (root, result) => {
+        const file = result.opts.from;
+        // 确保路径中包含 navigation 文件夹
+        if (file && file.includes('navigation')) {
+            pxToViewportInstance(root, result);
+        }
+    };
+});
+
 export default {
     plugins: [
-        pxToViewport({
+        customPostCSSPlugin({
+            // ... 你的自定义插件选项
+        }),
+        customPxToViewportPlugin({
             viewportWidth: 1920,
         }),
-    ]
+        // ... 其他通用 PostCSS 插件
+    ],
 };

src/utils/custom-postcss-plugin.js

@@ -0,0 +1,16 @@
+// 使用 ES6 模块导入
+import postcss from 'postcss';
+
+// 创建并导出插件
+export const customPostCSSPlugin = postcss.plugin('custom-postcss-plugin', (options) => {
+    return (root, result) => {
+        const file = result.opts.from; // 获取正在处理的文件的路径
+        // 判断是否是目标文件
+        if (file && file.includes(options.filename)) {
+            // 执行特定的 PostCSS 操作
+            root.walkRules((rule) => {
+                rule.selectors = rule.selectors.map(selector => `.special-scope ${selector}`);
+            });
+        }
+    };
+});

src/views/aboutpage.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="min-height: 100vh"
        class="100vw">
-    <div style="height: 80px; background: #000"
+    <div v-if="currentDevice==='pc'" style="height: 80px; background: #000"
          class="color-white row items-center">
       <template v-if="currentDevice==='pc'">
         <div class="col-3 col-md-4 row items-center justify-center">

src/views/commonpage.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="min-height: 100vh"
        class="100vw">
-    <div style="height: 80px; background: #000"
+    <div v-if="currentDevice==='pc'" style="height: 80px; background: #000"
          class="color-white row items-center">
       <div class="col-3 col-md-4 row items-center justify-center">
         <img src="../assets/images/icon-title.png"
@@ -196,6 +196,8 @@ import {
   watch,
   nextTick,
 } from "vue";
+import {useAdaptation} from '@/utils/self-adaption.js'
+const {currentDevice}= useAdaptation()
 import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();

src/views/homepage.vue

@@ -1,9 +1,9 @@
 <template>
   <div style="min-height: 100vh"
        class="100vw">
-    <div style="height: 80px; background: #000"
+    <div v-if="currentDevice==='pc'" style="height: 80px; background: #000"
          class="color-white row items-center">
-      <template v-if="currentDevice==='pc'">
+
         <div class="col-3 col-md-4 row items-center justify-center">
           <img src="../assets/images/icon-title.png"
                style="width: 40px; height: 40px" /><span class="fl-ml-sm">延庆博物馆</span>
@@ -65,15 +65,10 @@
             </div>
           </div>
         </div>
-      </template>
-      <template v-if="currentDevice==='mobile'">
-        <div class="mobile-title">{{route.meta.title}}</div>
-      </template>
     </div>
     <div>
       <router-view></router-view>
     </div>
-
     <div style="height: 145px; background: #000"
          class="row justify-center color-white relative">
 <template v-if="currentDevice==='pc'">
@@ -265,16 +260,16 @@ const handleSecMenuClick = () => {
     align-items: center;
     .wrap2{
       margin-left: 15px;
-      font-size: 77px;
+      font-size: 15px;
       color: #fff;
 
     }
     .wrap1{
-      width: 137px;
-      height: 137px;
+      width: 26.69px;
+      height: 26.69px;
       img{
-        width: 137px;
-        height: 137px;
+        width: 26.69px;
+        height: 26.69px;
 
       }
     }