front/pages/homepages/homes/home/home.vue

<template>
  <view class="background">
    <image class="home_text" src="@/static/homepages/homes/home/pictures/home_text.png">首页</image>
    <!--轮播图   -->
    <swiper :autoplay="true" interval="3000" duration="500" class="swiper"  :current="current" circular="true" @change="onSwiperChange">
      <swiper-item>
        <puppy_chat class="swiper_item"></puppy_chat>
      </swiper-item>
      <swiper-item>
        <read_center class="swiper_item"></read_center>
      </swiper-item>
      <swiper-item>
        <exercise class="swiper_item"></exercise>
      </swiper-item>
      <swiper-item>
        <community class="swiper_item"></community>
      </swiper-item>
    </swiper>
    <!-- 动态切换的轮播点 -->
    <image :src="dotImages[current]" class="swipe_dot"></image>
    <!--横线显示效果   -->
    <image class="line" src="@/static/homepages/homes/home/pictures/line.png"></image>
    <!--饮食专区文字   -->
    <image class="recipe_area_word" src="@/static/homepages/homes/home/pictures/recipe_area.png"></image>
    <!--饮食专区    -->
    <view class="recipe_area">
      <ai_recongize_recipe  class="ai_recognize_recipe"></ai_recongize_recipe>
      <ai_recongize_hot class="ai_recognize_hot"></ai_recongize_hot>
      <ai_recongize_fruit  class="ai_recognize_fruit"></ai_recongize_fruit>
      <my_recipe_plan  class="my_recipe_plan"></my_recipe_plan>
    </view>
    <!--运动专区文字   -->
    <image class="sport_text" src="@/static/homepages/homes/home/pictures/sport_text.png"></image>
    <view class="sport_area">
      <ai_recongize_plan class="ai_recognize_plan"></ai_recongize_plan>
      <my_exercise_plan   class="my_exercise_plan"></my_exercise_plan>
    </view>
    <!--阅读专区文字   -->
    <image class="read_text" src="@/static/homepages/homes/home/pictures/read_text.png"></image>
    <view class="read_area">
      <!--      知识图谱-->
      <image class="dictionary_background" src="@/static/components/dictionary/pictures/background.png"></image>
       <image class="dictionary_button" @click="go_to_knowledge_dictionary" src="@/static/components/dictionary/pictures/button.png"></image>
      <!--      书籍阅读-->
      <image class="read_background" src="@/static/components/read/pictures/background.png"></image>
      <image class="read_button" @click="go_to_choice_book" src="/static/components/read/pictures/button.png"></image>
    </view>
    <!--空白区域   -->
    <view class="block_area"></view>
    <!--底部菜单栏 -->
    <tarbar_home ></tarbar_home>
  </view>
</template>
<script>
import Puppy_chat from "@/components/swiper/puppy_chat.vue";
import Read_center from "@/components/swiper/read_center.vue";
import Exercise from "@/components/swiper/exercise.vue";
import Community from "@/components/swiper/community.vue";
import tarbar_home from "@/components/tarbar_home/tarbar_home.vue";
export default {
  components: {Community, Exercise, Read_center, Puppy_chat},
  data() {
    return {
      current:0,
      dotImages: [
        '/static/homepages/homes/home/pictures/dot1.png',
        '/static/homepages/homes/home/pictures/dot2.png',
        '/static/homepages/homes/home/pictures/dot3.png',
        '/static/homepages/homes/home/pictures/dot4.png',
      ], // 轮播点图片
	};
  },
  methods:{
    go_to_choice_book(){
      uni.navigateTo({
        url: '/pages/homepages/homes/choice_book/choice_book'
      });
      uni.showToast({
        title: '跳转成功',
      })
    },
    go_to_knowledge_dictionary(){
      uni.navigateTo({
        url: '/pages/homepages/homes/knowledge_dictionary/knowledge_dictionary'
      });
      uni.showToast({
        title: '跳转成功',
      })
    },
    onSwiperChange(e){
      this.current = e.detail.current;
    }
  }
}
</script>
<style lang="scss">
@import "@/static/homepages/homes/home/css/home.scss";
</style>