<template>
  <view
    class="home-page page2"
    :style="{ backgroundImage: `url(${baseUrl}/images/bg-2.png)` }"
  >
    <view class="logo">
      <image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
    </view>
    <!-- 内容 -->
    <view class="title"> 环节介绍 </view>
    <view class="desc">
      见证一滴牛奶华丽变身为奶粉的全过程， 了解高品质产品背后的科学知识
    </view>
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      :circular="true"
      previous-margin="90rpx"
      next-margin="90rpx"
      :current="current"
      @change="handleChange"
    >
      <block v-for="(item, index) in list" :key="index">
        <swiper-item>
          <view class="swiper-item">
            <view
              class="swiper-item-box blur-bg"
              :class="current === index ? 'swiper-item-active' : ''"
            >
              <image class="" :src="item.image" mode="scaleToFill" />
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!--  -->
    <view class="sub-title"> {{ list[current].title }} </view>
    <view class="desc" style="width: 450rpx">
      {{ list[current].desc }}
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 导入图片
import { baseUrl } from '@/reservation/config'

import s1 from '@/assets/reservation-images/s-1.png'
import s2 from '@/assets/reservation-images/s-2.png'

defineOptions({
  name: 'page2',
})

const current = ref(0)
const list = ref([
  {
    image: s1,
    title: '寓教于乐的互动体验',
    desc: '显微镇观察实验、冰淇淋DIY、手工奶片DIY、 牛奶「烟花」等',
  },
  {
    image: s2,
    title: '冰淇淋DIY',
    desc: '寓教于乐的互动体验,冰淇淋DIY、手工奶片DIY、 牛奶「烟花」',
  },
  {
    image: s1,
    title: '手工奶片DIY、 牛奶',
    desc: '冰淇淋DIY',
  },
])

const handleChange = (e) => {
  current.value = e.detail.current
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
