front/pages/homepages/homes/knowledge_dictionary/knowledge_dictionary.vue

<template>
  <view class="background">
    <image class="go_back_button" @click="go_back" src="@/static/homepages/homes/knowledge_dictionary/pictures/go_back_button.png" ></image>
    <input> </input>
    <image class="search_button" @click="search" src="@/static/homepages/homes/knowledge_dictionary/pictures/search_button.png"></image>




    <image class="strawberry_image" @click="go_to_strawberry" src="@/static/homepages/homes/knowledge_dictionary/pictures/strawberry.png"></image>
    <image class="peach_image" @click="go_to_peach"  src="@/static/homepages/homes/knowledge_dictionary/pictures/peach.png"></image>
    <image class="carrot_image" @click="go_to_carrot"   src="@/static/homepages/homes/knowledge_dictionary/pictures/carrot.png"></image>
    <image class="pineapple_image"   @click="go_to_pineapple"  src="@/static/homepages/homes/knowledge_dictionary/pictures/pineapple.png"></image>
    <image class="orange_image"  @click="go_to_orange"  src="@/static/homepages/homes/knowledge_dictionary/pictures/orange.png"></image>
    <image class="banana_image"   @click="go_to_banana"   src="@/static/homepages/homes/knowledge_dictionary/pictures/banana.png"></image>

  </view>
</template>

<script>
export default {
  data() {
    return {
      url :""//用传递后端的url
    };
  },
  methods:{
    search(){

      //和后端对接进行搜索 后端返回跳转界面的URL
      uni.showToast({
        title: '搜索成功！',
        icon: 'none',
        duration: 2000
      })
       uni.showToast({
         title: '搜索失败，知识库知识有限哦~',
         icon: 'none',
         duration: 2000
       })



    },
    go_back(){
      uni.navigateTo({
        url: '/pages/homepages/homes/home/home'
      })
      uni.showToast({
        title: '正在返回主页面',
        icon: 'none',
        duration: 2000
      })
    },
    go_to_strawberry(){
      uni.navigateTo({
        url: '/pages/homepages/homes/dictionary/strawberry/strawberry'
      })
      uni.showToast({
        title: '正在前往草莓知识页面',
        icon: 'none',
        duration: 2000
      })
    },
    go_to_peach(){
      uni.navigateTo({
        url: '/pages/homepages/homes/dictionary/pear/pear'
      })
      uni.showToast({
        title: '正在前往桃子知识页面',
        icon: 'none',
        duration: 2000
      })
    },
    go_to_carrot(){
      uni.navigateTo({
        url: '/pages/homepages/homes/dictionary/carrot/carrot'
      })
      uni.showToast({
        title: '正在前往胡萝卜知识页面',
        icon: 'none',
        duration: 2000
      })
    },
    go_to_pineapple(){
      uni.navigateTo({
        url: '/pages/homepages/homes/dictionary/pineapple/pineapple'
      })
      uni.showToast({
        title: '正在前往菠萝知识页面',
        icon: 'none',
        duration: 2000
      })
    },
    go_to_orange(){
      uni.navigateTo({
        url: '/pages/homepages/homes/dictionary/orange/orange'
      })
      uni.showToast({
        title: '正在前往橙子知识页面',
        icon: 'none',
        duration: 2000
      })
    },
    go_to_banana(){
      uni.navigateTo({
        url: '/pages/homepages/homes/dictionary/banana/banana'
      })
      uni.showToast({
        title: '正在前往香蕉知识页面',
        icon: 'none',
        duration: 2000
      })
    },
  }
}
</script>

<style lang="scss">
.background{
  background-image: url("@/static/homepages/homes/knowledge_dictionary/pictures/background.png");
  background-size: cover;
  background-position: center;
  height: 101vh;
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-end; /* 使内容向底部对齐 */
  position: relative;
}
.go_back_button{
  position: absolute;
  height: 8%;
  width: 15%;
  top: 5%;
  left: 5%;
}
.search_button{
  position: absolute;
  height: 5%;
  width: 10%;
  top: 43.5%;
  left: 83%;
}

.strawberry_image{
  position: absolute;
  height: 15%;
  width: 30%;
  top: 60%;
  left: 2%;
}

.peach_image{
  position: absolute;
  height: 15%;
  width: 30%;
  top: 60%;
  left: 34%;
}
.carrot_image{
  position: absolute;
  height: 15%;
  width: 30%;
  top: 60%;
  left: 67%;
}
.pineapple_image{
  position: absolute;
  height: 15%;
  width: 30%;
  top: 78%;
  left: 1%;
}

.orange_image{
  position: absolute;
  height: 15%;
  width: 30%;
  top: 78%;
  left: 34%;
}

.banana_image{
  position: absolute;
  height: 15%;
  width: 30%;
  top: 78%;
  left: 67%;
}
</style>