<template>
  <view class="background">
    <image class="go_back_button" @click="go_back" src="@/static/homepages/homes/knowledge_dictionary/pictures/go_back_button.png" ></image>
    <image class="search_area"  src="@/static/homepages/homes/choice_book/pictures/search_area.png"></image>
    <input 
      class="input_area"
      v-model="searchText"
      placeholder="请输入搜索内容"
      placeholder-style="color: #999999;"
      @input="onSearch"
    ></input>
    <image class="book" src="@/static/homepages/homes/choice_book/pictures/book.png"></image>
    <image class="book1" src="@/static/homepages/homes/choice_book/pictures/book1.png"></image>
    <image class="book2" src="@/static/homepages/homes/choice_book/pictures/book2.png"></image>
    <image class="book3" src="@/static/homepages/homes/choice_book/pictures/book3.png"></image>
    <image class="book4" src="@/static/homepages/homes/choice_book/pictures/book4.png"></image>


  </view>
</template>

<script>
export default {
  data() {
    return {
      token: uni.getStorageSync("access_token"),
      searchText: ''
    };
  },
  methods:{
    go_back(){
    uni.navigateTo({
        url: '/pages/homepages/homes/home/home'
      })
      uni.showToast({
        title: '正在返回主页面',
        icon: 'none',
        duration: 2000
      })
    },
    onSearch() {
      console.log('搜索内容：', this.searchText)
    }
  }
}
</script>

<style lang="scss">
.background{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #98AED1;
}
.go_back_button{
  position: absolute;
  height: 8%;
  width: 15%;
  top: 5%;
  left: 5%;
}
.book{
  position: absolute;
  height: 50%;
  width: 90%;
  top: 45%;
  left: 5%;
}
.book1{
  position: absolute;
  height: 18%;
  width: 30%;
  top: 55%;
  left: 10%;


}
.book2{
  position: absolute;
  height: 18%;
  width: 30%;
  top: 55%;
  left: 59%;

}
.book3{
  position: absolute;
  height: 18%;
  width: 30%;
  left: 10%;
  top: 76%;

}
.book4{
  position: absolute;
  height: 18%;
  width: 30%;
  left: 59%;
  top: 76%;

}
.search_area{
  position: absolute;
  height: 20%;
  width: 90%;
  top: 15%;
  left: 5%;
}
.input_area{
  position: absolute;
  height: 8%;
  width: 70%;
  left: 21%;
  top: 27%;
  background: transparent;
  padding: 0 20rpx;
  font-size: 32rpx;
  color: #333;
  z-index: 2;
}


</style>
