add：热门景点

cloudroam

16 小时以前 500078714411487af00161e01bd7e0b5efdc3414

 pages/home/home.vue

@@ -23,7 +23,7 @@
      </view>

      <view class="trip-card-swiper">
        <swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1850rpx;">
        <swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1650rpx;">
          <swiper-item v-for="(group, pageIndex) in pagedTripCards" :key="pageIndex">
            <TripCard v-for="(item, index) in group" :key="index" :tag="item.tag" :title="item.coverTitle"
              :subtitle="item.coverAlt" :score="item.collectCount" :imageUrl="item.coverUrl"
@@ -32,8 +32,34 @@
        </swiper>
      </view>

<!--      <SectionTitle title="全球影视地标" optitle="查看全部" goUrl="/pages/home/home-more" />-->
      <SectionTitle title="全球影视地标" optitle="查看全部" goUrl="/pages/home/home-more" />
<!--      <GlobalGeo />-->
      <view class="continent-section">
        <view class="continent-item all" @click="navigateToAll">全部</view>
        <view class="continents-container">
          <view class="continent-row" v-for="(row, index) in continentRows" :key="index">
            <view
                class="continent-item continent"
                v-for="(continent, colIndex) in row"
                :key="colIndex"
                @click="navigateToDetail(continent)"
            >
              {{ continent.name }}
            </view>
            <!-- 添加占位元素保持布局 -->
            <view
                v-for="n in (3 - row.length)"
                :key="'placeholder'+n"
                class="continent-placeholder"
            ></view>
          </view>
        </view>
        <view class="continent-item separator"></view>
        <view class="continent-item nearby" @click="navigateToNearby">
          <view>附</view>
          <view>近</view>
        </view>
      </view>

      <SectionTitle title="场景博物馆" optitle="查看全部" goUrl="/sub-pages/hot-spot/index" />
      <SceneMuseumCard v-for="(item, index) in cardList" :key="index" :image="item.image" :title="item.title"
@@ -57,7 +83,6 @@

import HomeMain from './home-main.vue'
import TripCard from './trip-card.vue'
import GlobalGeo from './global-geo.vue'
import SceneMuseumCard from './scene-museum-card.vue'
import Community from './community.vue'
import { SwiperChangeEvent } from '@dcloudio/uni-app'
@@ -70,6 +95,54 @@

// 主题
const theme = ref('light')

const continents = ref([])

const getContinents = async () => {
  try {
    const {code, data} = await $http.request('get', '/api/code/value?type=CONTINENT_TYPE')
    if (code == 0 && data) {
      continents.value = data.map(item => (
          {
            id: item.id,
            name: item.label
          })
      )
    }

  } catch (error) {
    console.log('获取洲数据失败', error)
    $message.showToast('获取洲数据失败')
  }

}

const continentRows = computed(() => {
  const rows = [];
  const continentsList = [...continents.value];

  // 将洲分成三行
  for (let i = 0; i < 3; i++) {
    const start = i * 3;
    const end = start + 3;
    rows.push(continentsList.slice(start, end));
  }

  return rows;
});

const navigateToDetail = (continent) => {
  //跳转到具体页面
  uni.navigateTo({
    url: `/sub-pages/hot-city/index?continentId=${continent.id}`
  })
}
const navigateToNearby = () => {
  //附近功能跳转
  uni.navigateTo({
    url: '/pages/nearby/nearby'
  })
}


// 当前页数
@@ -115,6 +188,7 @@
onMounted(() => {
  const localTheme = uni.getStorageSync('theme') || 'light'
  theme.value = localTheme
  getContinents()
})

onShow(() => {
@@ -255,6 +329,82 @@
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.continent-section {
  display: flex;
  align-items: stretch;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  padding: 10rpx 0;
  height: 220rpx; /* 固定高度容纳三行 */
}

.all, .nearby {
  flex-shrink: 0;
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  font-weight: bold;
}

.continents-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.continent-row {
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  height: 33.33%; /* 每行高度占三分之一 */
  padding: 5rpx 0;
}

.continent {
  flex: 0 0 30%; /* 固定宽度30% */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 28rpx;
  padding: 5rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 5%; /* 元素间间距 */
}

/* 最后一个元素不需要右边距 */
.continent:last-child {
  margin-right: 0;
}

.continent-placeholder {
  flex: 0 0 30%; /* 占位元素宽度 */
  margin-right: 5%; /* 保持与正常元素相同的间距 */
}

/* 最后一个占位元素不需要右边距 */
.continent-placeholder:last-child {
  margin-right: 0;
}

.separator {
  width: 1px;
  background-color: #ccc;
  margin: 0 10rpx;
  align-self: center;
  height: 80%; /* 分隔线高度为父容器的80% */
}

.nearby {
  flex-direction: column;
  font-size: 30rpx;
}
</style>

<style scoped lang="scss">