novelQuick/src/components/tools-mall/index.ux

<template>
  <div class="page-column">
      <image class="w h-350" src="https://ytnovels.oss-cn-shanghai.aliyuncs.com/appStatic/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" >
           background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
           <!-- style="background-color: {{items.bg}}" -->
           <div class="hot-item {{ items.bg }}"
            @click="toPage(items.path)" for="(indexs, items) in item.list">
            <text class="icon-font-span icon {{ items.name =='一键省电'?'left_0':'left_28' }}" style="color:{{  items.color }}">{{ items.icon }}</text>
            <text class="name"  style="color:{{ items.color }};"> {{  items.name }}</text>
            <text class="btn" style="background-color:{{ items.color }};">立即使用 <span style="font-size: 18px;">▶</span></text>
           </div>
        </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:'\ue607',bg:'bg_cfffcd',color:'#60b956',path:'yiJianShengDian'},
				{name:'声波除尘',icon:'\ue7dc',bg:'bg_ffd8db',color:'#fb5e53',path:'shengBoChuChen'},
				{name:'网络信息',icon:'\ue61d',bg:'bg_ccccfe',color:'#8370ee',path:'wangLuoXinXi'},
				{name:'手机测距',icon:'\uea07',bg:'bg_80fafb',color:'#02cfdf',path:'shouJiCeJu'},
				// {name:'WiFi管理',icon:'\ue76c',bg:'bg_9ed1fe',color:'#3d9aee',path:'wifiGuanLi'},
				// {name:'手机清理',icon:'\ue60e',bg:'bg_fad2ec',color:'#ff4bb9',path:'shouJiQingLi'},
				{name:'精选壁纸',icon:'\ue640',bg:'bg_fec2f8',color:'#c95884',path:'jingXuanBiZhi'},
			],
		},
		{
			title:'趣味测评',
			list:[
				{name:'趣味测评',icon:'\ue6cc',bg:'bg_e8ffc4',color:'#98ec05',path:'quWeiCePing'},
			],
		},
		{
			title:'知识课堂',
			list:[
				{name:'养生课堂',icon:'\ue650',bg:'bg_fdd1c0',color:'#fc7f43',path:'yangShengKeTang'},
				{name:'运动计步',icon:'\ue61c',bg:'bg_9ce4fd',color:'#3d9afb',path:'yunDongJiBu'},
				{name:'字体大小',icon:'\ue7b1',bg:'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';
@font-face {
  font-family: iconfont;
  src: url("/assets/iconfont/iconfont.ttf");
}
.bg_cfffcd{
  background: linear-gradient(to bottom, #cfffcd, #fff);
}
.bg_ffd8db{
  background: linear-gradient(to bottom, #ffd8db, #fff);
}
.bg_ccccfe{
  background: linear-gradient(to bottom, #ccccfe, #fff);
}
.bg_80fafb{
  background: linear-gradient(to bottom, #80fafb, #fff);
}
.bg_9ed1fe{
  background: linear-gradient(to bottom, #9ed1fe, #fff);
}
.bg_fad2ec{
  background: linear-gradient(to bottom, #fad2ec, #fff);
}
.bg_fec2f8{
  background: linear-gradient(to bottom, #fec2f8, #fff);
}
.bg_e8ffc4{
  background: linear-gradient(to bottom, #e8ffc4, #fff);
}
.bg_fdd1c0{
  background: linear-gradient(to bottom, #fdd1c0, #fff);
}
.bg_9ce4fd{
  background: linear-gradient(to bottom, #9ce4fd, #fff);
}
.bg_edcbfd{
  background: linear-gradient(to bottom, #edcbfd, #fff);
}
.icon-font-span {
  font-family: iconfont;
  font-size: 92px;
  /* color: #ff0000; */
}
.left_0{
  left: -18px;
}
.left_28{
  left: 28px;
}
.icon{
  position: absolute;
  top: 14px;
  /* left: 28px; */
}
.name{
  position: absolute;
  font-size: 30px;
  letter-spacing: 2px;
  right: 50px;
  top: 40px;
}
.btn{
    position: absolute;
    background-color: skyblue;
    padding: 8px 10px;
    border-radius: 30px;
    color: #fff;
    font-size: 22px;
    right: 40px;
    bottom: 30px;
  }
.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: 320px;
    height: 200px;
    padding: @gap-1 0;
    text-align: center;
    border-radius: 20px;
    margin: 15px @gap-4 15px 0;
  }
}
.search-refresh {
  .text-primary;
  .iconfont;
  padding: 0 @gap-3;
}
</style>