<template>
  <view class="home-page page2" :style="{ backgroundImage: `url(${baseUrl}/images/bg-3.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 {
    baseUrl
  } from '@/reservation/config'
  import {
    ref
  } from 'vue'
  import s1 from '@/assets/reservation-images/s-1.png'
  import s2 from '@/assets/reservation-images/s-2.png'

  defineOptions({
    name: 'page3',
  })

  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>