<template>
  <div class="page-column">
      <image class="w h-350" src="/assets/images/index_banner.jpg"></image>
    <div class="search-hot">
      <div class="box" for="(index, item) in hotList">
          <text class="title_"> {{ item.title }}</text>
         <div class="hot-list" >
          <text class="hot-item"  @click="toPage(items.path)" for="(indexs, items) in item.list">{{
            items.name
          }}</text>
        </div>
      </div>
      <div>
        <text @click="fnTest('vibrator')">震动</text>
      </div>
    </div>
  </div>
</template>

<script>
import { bookListData } from '../../assets/data/book-list.js'
import vibrator from '@system.vibrator'
import router from '@system.router'
export default {
  props: [],
  data: {
    hotList: [
		{
			title:'基础功能',
			list:[
				{name:'一键省电',icon:'fa-battery',bg:'#cfffcd',color:'#60b956',path:'yiJianShengDian'},
				{name:'声波除尘',icon:'fa-volume-control-phone',bg:'#ffd8db',color:'#fb5e53',path:'shengBoChuChen'},
				{name:'网络信息',icon:'fa-rss-square',bg:'#ccccfe',color:'#8370ee',path:'wangLuoXinXi'},
				{name:'手机测距',icon:'fa-hard-of-hearing',bg:'#80fafb',color:'#02cfdf',path:'shouJiCeJu'},
				{name:'WiFi管理',icon:'fa-wifi',bg:'#9ed1fe',color:'#3d9aee',path:'wifiGuanLi'},
				{name:'手机清理',icon:'fa-rocket',bg:'#fad2ec',color:'#ff4bb9',path:'shouJiQingLi'},
				{name:'精选壁纸',icon:'fa-image',bg:'#fec2f8',color:'#c95884',path:'jingXuanBiZhi'},
			],
		},
		{
			title:'趣味测评',
			list:[
				{name:'趣味测评',icon:'fa-search',bg:'#e8ffc4',color:'#98ec05',path:'quWeiCePing'},
			],
		},
		{
			title:'知识课堂',
			list:[
				{name:'养生课堂',icon:'fa-wheelchair',bg:'#fdd1c0',color:'#fc7f43',path:'yangShengKeTang'},
				{name:'运动计步',icon:'fa-wheelchair-alt',bg:'#9ce4fd',color:'#3d9afb',path:'yunDongJiBu'},
				{name:'字体大小',icon:'fa-text-width',bg:'#edcbfd',color:'#d617d1',path:'ziTiDaXiao'},
			],
		}
	],
    page: 1
  },
  onReady() {
    // this.refreshHostList()
    console.log('onReady')
  },
  fnTest(type){
    console.log('type',type)
    vibrator.vibrate({
        mode: 'long'
    })
  },
  toPage(path) {
    router.push({
        uri: `pages/tools/${ path }`,
        params: { key: 1 }
      })
  },
}
</script>

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

.search-hot {
  background-color: @white;
  width: 100%;
  padding: @gap-4;
  .flex-box-mixins(column, flex-start, flex-start);
  .search-title {
    width: 100%;
    margin-bottom: @gap-4;
    .flex-box-mixins(row, space-between, center);
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: column;
    .title_{
      font-size: 30px;
      margin: 10px 0;
      color: #000;
    }
  }
  .hot-list {
    width: 100%;
    flex-wrap: wrap;
  }
  .hot-item {
    width: 200px;
    padding: @gap-1 0;
    text-align: center;
    border: 1px solid @grey;
    border-radius: 30px;
    margin: 15px @gap-4 15px 0;
  }
}
.search-refresh {
  .text-primary;
  .iconfont;
  padding: 0 @gap-3;
}
</style>
