<template>
  <view
    class="home-page page2"
    :style="{
      backgroundImage: `url(${baseUrl}/farqbxzczytcami/images/bg-3.png)`,
    }"
  >
    <view class="logo">
      <image src="@/assets/reservation-images/logo.svg" mode="widthFix"></image>
    </view>
    <!-- 内容 -->
    <view class="title" style="margin-bottom: 46rpx"> 相关知识 </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' : ''"
            >
              <video
                :src="item.url"
                autoplay
                loop
                :controls="false"
                :play-strategy="1"
                :enable-progress-gesture="false"
                object-fit="cover"
              ></video>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!--  -->
    <view class="sub-title" style="margin-bottom: 26rpx">
      {{ list[current].title }}
    </view>
    <view
      class="desc"
      style="width: 600rpx; text-align: left; margin-top: 0; line-height: 36rpx"
      v-html="list[current].desc"
    >
    </view>
  </view>
</template>

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

defineOptions({
  name: 'page3',
})
const current = ref(0)
const list = ref([
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_know_01.mp4',
    title: '生命早期1000天',
    desc: '世卫组织研究表明，生命早期1000天是一个人生长发育的“机遇窗口期"，超过80%的大脑发育在这一阶段完成。飞鹤联合哈佛BCH以及北大医学，并邀请诺贝尔奖得主迈克尔·莱维特先生作为飞鹤首席科学顾问，围绕宝宝生长发育的规律和生长曲线，对脑发育及生命早期1000天大脑发育进行更加系统化、体系化的研究。',
  },
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_know_02.mp4',
    title: '北纬47度',
    desc: `这里是荣获认证的中国婴幼儿黄金奶源地，更是独一无二的湿地奶源。<br/>这里空气高于世界卫生组织空气标准30倍以上，富含全球仅存1%的万年黑土。<br/>拥有世界三大冷矿泉之一的水质。好水好土养好牛，更成就优质的新鲜生牛乳。`,
  },
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_know_03.mp4',
    title: '什么是WCM世界级制造?',
    desc: 'TPM奖是全球制造企业竞争能力的标志。其评选机构和颁奖方JPM评审委员会，是世界领先的生产管理许估和认证组织，是全球最具权威的”世界级制造”生产实施评估机构之一。此次中国飞鹤获TPM奖，标志生产管理水平已经达到世界领先水平。',
  },
  {
    url: 'https://factory-walk.feihe.com/farqbxzczytcami/mp4/cut_know_04.mp4',
    title: '新一代母源科技',
    desc: '飞鹤星飞帆卓睿作为飞鹤专研大脑营养的匠心之作，含脑磷脂群等15大活性脑营养，其中5大脑磷脂促进宝宝认知发育，此外 DHA和ARA达到了1:1.7的黄金配比，贴合中国母源，更适合中国宝宝，还含有HMOs帮助大脑发展新思维，简直是教科书级的学霸配方，多维度助力哺育聪明宝宝!',
  },
])

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

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