minnan/src/pages/travel.vue

<template>
  <view class="home-container page-travel d-flex flex-col bg-base">
    <image 
      class="position-absolute title"
      src="/static/images/travel/Title.png"
      mode="widthFix"
    />
    <view class="content d-flex flex-col">
      
      <view class="content d-flex flex-col wing-l">
        <!-- 大图 -->
        <image 
          class="w-100"
          src="/static/images/travel/Banner.png"
          mode="widthFix" 
        />

        <!-- 分栏 -->
        <view 
          class="position-relative d-grid mt-3"
          style="grid: repeat(2, 3fr) / auto-flow; grid-gap: 20rpx;"
        >
          <view  
            v-for="(tab, k) in subTabs" 
            :key="k"
            class="d-flex bg-light-light-primary radius-base p-2 flex-column align-center"
          >
            <image class="width-100" :src="tab.icon" mode="widthFix" />
            <text class="color-title-text mt-2">{{ tab.name }}</text>
          </view>
        </view>
      </view>

      <!-- 精品路线 -->
      <HomeTitle title="精品路线" showMore inWing />
      <scroll-view scroll-x>
        <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in routeData"
            classNames="width-2-3 mr-2"
            titleColor="title-text"
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            :bottomTime="item.bottomTime"
          />
        </view>
      </scroll-view>

      <!-- 精选推荐 -->
      <HomeTitle title="精选推荐" showMore inWing />
      <scroll-view scroll-x>
        <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in recommendData"
            classNames="width-2-3 mr-2"
            titleColor="title-text"
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            :bottomLocate="item.bottomLocate"
            :bottomScore="item.bottomScore"
          />
        </view>
      </scroll-view>

      <!-- 文创好物 -->
      <HomeTitle title="文创好物" showMore inWing />
      <scroll-view scroll-x>
        <view class="padding-wing-l pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in creativeData"
            classNames="width-2-3 mr-2"
            titleColor="title-text"
            :key="i"
            :title="item.title"
            :image="item.image"
          />
        </view>
      </scroll-view>

      <!-- 近期活动 -->
      <view class="d-flex flex-col wing-l">
        <HomeTitle title="近期活动" showMore />
        <Box2LineRightShadow
          v-for="(item, i) in activityData" 
          :key="i" 
          :title="item.title"
          :desc="item.desc"
          :right="item.right"
        >
          <template #left>
            <view class="d-flex flex-col justify-center align-center radius-base bg-light-light-primary p-25 pt-2 pb-2">
              <text class="color-primary size-s">12月</text>
              <text class="color-primary size-base text-bold">28</text>
            </view>
          </template>
        </Box2LineRightShadow>
      </view>
    </view>


  </view>
  <tabbar :current="3"></tabbar>
</template>

<script setup lang="ts">
import Tabbar from '@/common/components/tabs/tabbar.vue';
import CategoryIcon1 from '@/static/images/travel/CategoryIcon1.png';
import CategoryIcon2 from '@/static/images/travel/CategoryIcon2.png';
import CategoryIcon3 from '@/static/images/travel/CategoryIcon3.png';
import CategoryIcon4 from '@/static/images/travel/CategoryIcon4.png';
import CategoryIcon5 from '@/static/images/travel/CategoryIcon5.png';
import CategoryIcon6 from '@/static/images/travel/CategoryIcon6.png';
import TestImage1 from '@/static/images/inhert/TestImage1.jpg';
import TestImage2 from '@/static/images/inhert/TestImage2.jpg';
import TestImage3 from '@/static/images/inhert/TestImage3.jpg';
import TestImage4 from '@/static/images/inhert/TestImage4.jpg';
import Box2LineLargeImageUserShadow from './parts/Box2LineLargeImageUserShadow.vue';
import Box2LineRightShadow from './parts/Box2LineRightShadow.vue';
import HomeTitle from './parts/HomeTitle.vue';

const subTabs = [
  { name: '节庆日历', icon: CategoryIcon1 },
  { name: '文化景区', icon: CategoryIcon2 },
  { name: '旅游路线', icon: CategoryIcon3 },
  { name: '文化产品', icon: CategoryIcon4 },
  { name: '示范点', icon: CategoryIcon5 },
  { name: '闽南歌曲', icon: CategoryIcon6 },
]
const routeData = [
  { 
    title: '古城文化之旅', 
    desc: '千年古镇风情',
    bottomTime: '123',
    image: TestImage3,
  },
  { 
    title: '古城文化之旅', 
    desc: '千年古镇风情',
    bottomTime: '123',
    image: TestImage4,
  },
  { 
    title: '古城文化之旅', 
    desc: '千年古镇风情',
    bottomTime: '123',
    image: TestImage3,
  },
  { 
    title: '古城文化之旅', 
    desc: '千年古镇风情',
    bottomTime: '123',
    image: TestImage4,
  },
]
const recommendData = [
  { 
    title: '南安水头', 
    desc: '千年古镇风情',
    bottomLocate: '泉州市',
    bottomScore: '5.0',
    image: TestImage3,
  },
  { 
    title: '南安水头', 
    desc: '千年古镇风情',
    bottomLocate: '泉州市',
    bottomScore: '5.0',
    image: TestImage4,
  },
  { 
    title: '南安水头', 
    desc: '千年古镇风情',
    bottomLocate: '泉州市',
    bottomScore: '5.0',
    image: TestImage3,
  },
  { 
    title: '南安水头', 
    desc: '千年古镇风情',
    bottomLocate: '泉州市',
    bottomScore: '5.0',
    image: TestImage4,
  },
]
const creativeData = [
  { 
    title: '南安水头', 
    image: TestImage3,
  },
  { 
    title: '南安水头', 
    image: TestImage4,
  },
  { 
    title: '南安水头', 
    image: TestImage3,
  },
  { 
    title: '南安水头', 
    image: TestImage4,
  },
]
const activityData = [
  {
    title: '闽南文化节',
    desc: '泉州市区',
    right: '报名中',
  },
  {
    title: '泉州市区',
    desc: '泉州市区',
    right: '已截至',
  },
]

</script>

<style lang="scss">
.page-travel {
     
  > .content {
    margin-top: 10vh;
  }
  > .title {
    width: 100rpx;
  } 
}
</style>