💄 修复村落详情页问题

src/pages/about/company.vue

@@ -73,6 +73,7 @@
 <script setup lang="ts">
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 import { ref } from 'vue';
+import { ElAmap } from '@vuemap/vue-amap';
 
 const carouselConfig = {
   itemsToShow: 1,

src/pages/village/content.vue

@@ -1,22 +1,29 @@
 <template>
-  <SimplePageContentLoader :loader="newsLoader">
-    <div class="d-flex flex-column details"> 
-      <div class="nav-back-title">
-        <img :src="BackArrow" @click="back" />
-        <h2>{{ newsLoader.content.value?.title }}</h2>
+  <div class="main-background main-background main-background-type2">
+    <div class="nav-placeholder"></div>
+    <section class="main-section">
+      <div class="content">
+        <SimplePageContentLoader :loader="newsLoader">
+          <div class="d-flex flex-column details"> 
+            <div class="nav-back-title">
+              <img :src="BackArrow" @click="back" />
+              <h2>{{ newsLoader.content.value?.title }}</h2>
+            </div>
+            <SimpleRichHtml 
+              class="news-content mt-3"
+              :contents="[
+                newsLoader.content.value?.intro ?? '',
+                newsLoader.content.value?.value ?? '',
+                newsLoader.content.value?.content ?? '',
+              ]" 
+            />
+            
+            <ContentNode />
+          </div>
+        </SimplePageContentLoader>
       </div>
-      <SimpleRichHtml 
-        class="news-content mt-3"
-        :contents="[
-          newsLoader.content.value?.intro ?? '',
-          newsLoader.content.value?.value ?? '',
-          newsLoader.content.value?.content ?? '',
-        ]" 
-      />
-      
-      <ContentNode />
-    </div>
-  </SimplePageContentLoader>
+    </section>
+  </div>
 </template>
 
 <script setup lang="ts">

src/pages/village/detail.vue

@@ -1,74 +1,81 @@
 <template>
-  <div class="d-flex flex-column village-details">
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center align-items-center"
-      style="min-height: 200px;"
-    >
-      <a-spin tip="加载中" />
-    </div>
-    <template v-else>
-      <!-- 轮播图 -->
-      <ImageSwiper
-        v-if="data.images && data.images.length > 0"
-        :items="data.images"
-        :autoplay="2500"
-        style="height:300px"
-      >
-        <template #item="{ item }">
-          <img class="swiper-slide" :src="item" />
-        </template>
-      </ImageSwiper>
-      <img 
-        v-else 
-        :src="data.image" 
-        class="swiper-slide"
-      />
-      <div class="mt-3" />
-      <div class="d-flex flex-col content-box">
-        <SimpleRichHtml
-          v-if="data.overview"
-          :contents="[ data.overview ]"
-          :tag-style="{
-            a: 'text-decoration: underline ; color: #fff;',
-            p: 'color: #fff; margin-bottom: 20px;',
-            img: 'border-radius: 10px;'
-          }"
-        />
-        <span v-else>无内容，请添加内容!</span>
-      </div>
-      <div class="mt-3" />
-      <div class="d-flex flex-row flex-wrap">
-        <div
-          v-for="(item, k) in tagsData"
-          :key="k"
-          class="tag-item"
-        >
-          <NuxtLink :to="{ 
-            path: '/village/list',
-            query: { 
-              id: item.id,
-              model_id: item.modelId,
-              main_body_column_id: item.mainBodyColumnId,
-              region: item.region,
-            }, 
-          }">
-            <img :src="item.logo" />
-            <span>{{ item.name }}</span>
-          </NuxtLink> 
+  <div class="main-background main-background main-background-type2">
+    <div class="nav-placeholder"></div>
+    <section class="main-section">
+      <div class="content">
+        <div class="d-flex flex-column village-details">
+          <div
+            v-if="loading"
+            class="d-flex justify-content-center align-items-center"
+            style="min-height: 200px;"
+          >
+            <a-spin tip="加载中" />
+          </div>
+          <template v-else>
+            <!-- 轮播图 -->
+            <ImageSwiper
+              v-if="data.images && data.images.length > 0"
+              :items="data.images"
+              :autoplay="2500"
+              style="height:300px"
+            >
+              <template #item="{ item }">
+                <img class="swiper-slide" :src="item" />
+              </template>
+            </ImageSwiper>
+            <img 
+              v-else 
+              :src="data.image" 
+              class="swiper-slide"
+            />
+            <div class="mt-3" />
+            <div class="d-flex flex-col content-box">
+              <SimpleRichHtml
+                v-if="data.overview"
+                :contents="[ data.overview ]"
+                :tag-style="{
+                  a: 'text-decoration: underline ; color: #fff;',
+                  p: 'color: #fff; margin-bottom: 20px;',
+                  img: 'border-radius: 10px;'
+                }"
+              />
+              <span v-else>无内容，请添加内容!</span>
+            </div>
+            <div class="mt-3" />
+            <div class="d-flex flex-row flex-wrap">
+              <div
+                v-for="(item, k) in tagsData"
+                :key="k"
+                class="tag-item"
+              >
+                <NuxtLink :to="{ 
+                  path: '/village/list',
+                  query: { 
+                    id: item.id,
+                    model_id: item.modelId,
+                    main_body_column_id: item.mainBodyColumnId,
+                    region: item.region,
+                  }, 
+                }">
+                  <img :src="item.logo" />
+                  <span>{{ item.name }}</span>
+                </NuxtLink> 
+              </div>
+            </div>
+            <div class="mt-3" />
+            <div class="map-container">
+              <el-amap
+                style="width: 100%;"
+                :center="center"
+                :zoom="zoom"
+                @init="handleInit"
+              />
+            </div>
+            <div style="height: 40px;flex-shrink: 0;" />
+          </template>
         </div>
       </div>
-      <div class="mt-3" />
-      <div class="map-container">
-        <el-amap
-          style="width: 100%;"
-          :center="center"
-          :zoom="zoom"
-          @init="handleInit"
-        />
-      </div>
-      <div style="height: 40px;flex-shrink: 0;" />
-    </template>
+    </section>
   </div>
 </template>
 
@@ -76,6 +83,7 @@
 import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';
 import { useRoute } from 'vue-router';
 import { ref, watch } from 'vue';
+import { ElAmap } from '@vuemap/vue-amap';
 import VillageApi, { VillageMenuListItem } from '@/api/village/VillageApi';
 import ImageSwiper from '@/components/content/ImageSwiper.vue';
 
@@ -98,13 +106,18 @@ let map: any = null;
 
 function handleInit(mapRef: any) {
   map = mapRef;
+  console.log('handleInit', mapRef);
+
+  
 }
 
 watch(route, () => {
   loading.value = true;
-  setTimeout(() => {
-    loadInfo();
-  }, 500);
+  if (import.meta.client) {
+    setTimeout(() => {
+      loadInfo();
+    }, 500);
+  }
 }, { immediate: true })
 
 async function loadInfo() {
@@ -120,6 +133,10 @@ async function loadInfo() {
   } else {
     center.value = [118.850895, 28.982787];
   }
+
+  console.log('map.value', map);
+
+  
   map?.add(new AMap.Marker({
     position: center.value as [number, number]
   }));
@@ -142,16 +159,21 @@ async function loadInfo() {
     object-fit: cover;
   }
   .tag-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     width: 13%;
-    cursor: pointer;
 
-    img {
-      width: 40px;
-      height: 40px;
+    a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      text-decoration: none;
+      color: colors.$text-color;
+
+      img {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
   .content-box {
@@ -166,6 +188,7 @@ async function loadInfo() {
     position: relative;
     width: 100%;
     height: 250px;
+    margin: 40px 0;
     overflow: hidden;
     border-radius: 8px;
     flex-shrink: 0;

src/pages/village/index.vue

@@ -12,30 +12,19 @@
     :tagsData="tagsData"
     :defaultSelectTag="tagsData[0]?.id"
   />
-    <!--  -->
-  <ContentDialog v-model:show="popupContentShow" light :small="smallDialog">
-    <RouterView></RouterView>
-  </ContentDialog>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import VillageApi from '@/api/village/VillageApi';
-import ContentDialog from '@/components/parts/ContentDialog.vue';
 import CommonContent from '@/api/CommonContent';
 
 const route = useRoute();
 const router = useRouter();
-const popupContentShow = ref(false);
-const smallDialog = computed(() => {
-  return route.name === 'VillageList2' || route.name === 'VillageDetail'; 
-})
 
 async function showDetail(item: any) {
-  popupContentShow.value = true;
   localStorage.setItem('VillageTemp', JSON.stringify(item));
-
   setTimeout(() => {
     router.push({
       path: '/village/detail',

src/pages/village/list.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="details w-100">
-    <!-- 传统村落 -->
-    <CommonListBlock
-      ref="list"
-      :title="'传统村落'"
-      showNav
-      :dropDownNames="[]"
-      :pageSize="8"
-      :rowCount="1"
-      :rowType="3"
-      :load="loadData"
-      :showDetail="showDetail"
-    />
-    <!-- :defaultSelectTag="tagsData[0].id" -->
+  <div class="main-background main-background main-background-type2">
+    <div class="nav-placeholder"></div>
+    <section class="main-section">
+      <div class="content">
+        <div class="details w-100">
+          <!-- 传统村落 -->
+          <CommonListBlock
+            ref="list"
+            :title="'传统村落'"
+            showNav
+            :dropDownNames="[]"
+            :pageSize="8"
+            :rowCount="1"
+            :rowType="3"
+            :load="loadData"
+            :showDetail="showDetail"
+          />
+        </div>
+      </div>
+    </section>
   </div>
 </template>