|
|
@@ -5,9 +5,12 @@
|
|
|
<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 class="hot-item" style="background-color: {{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>
|
|
|
@@ -28,27 +31,27 @@ export default {
|
|
|
{
|
|
|
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'},
|
|
|
+ {name:'一键省电',icon:'\ue607',bg:'#cfffcd',color:'#60b956',path:'yiJianShengDian'},
|
|
|
+ {name:'声波除尘',icon:'\ue7dc',bg:'#ffd8db',color:'#fb5e53',path:'shengBoChuChen'},
|
|
|
+ {name:'网络信息',icon:'\ue61d',bg:'#ccccfe',color:'#8370ee',path:'wangLuoXinXi'},
|
|
|
+ {name:'手机测距',icon:'\uea07',bg:'#80fafb',color:'#02cfdf',path:'shouJiCeJu'},
|
|
|
+ {name:'WiFi管理',icon:'\ue76c',bg:'#9ed1fe',color:'#3d9aee',path:'wifiGuanLi'},
|
|
|
+ {name:'手机清理',icon:'\ue60e',bg:'#fad2ec',color:'#ff4bb9',path:'shouJiQingLi'},
|
|
|
+ {name:'精选壁纸',icon:'\ue640',bg:'#fec2f8',color:'#c95884',path:'jingXuanBiZhi'},
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
title:'趣味测评',
|
|
|
list:[
|
|
|
- {name:'趣味测评',icon:'fa-search',bg:'#e8ffc4',color:'#98ec05',path:'quWeiCePing'},
|
|
|
+ {name:'趣味测评',icon:'\ue6cc',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'},
|
|
|
+ {name:'养生课堂',icon:'\ue650',bg:'#fdd1c0',color:'#fc7f43',path:'yangShengKeTang'},
|
|
|
+ {name:'运动计步',icon:'\ue61c',bg:'#9ce4fd',color:'#3d9afb',path:'yunDongJiBu'},
|
|
|
+ {name:'字体大小',icon:'\ue7b1',bg:'#edcbfd',color:'#d617d1',path:'ziTiDaXiao'},
|
|
|
],
|
|
|
}
|
|
|
],
|
|
|
@@ -75,7 +78,43 @@ export default {
|
|
|
|
|
|
<style lang="less">
|
|
|
@import '../../assets/styles/index.less';
|
|
|
-
|
|
|
+@font-face {
|
|
|
+ font-family: iconfont;
|
|
|
+ src: url("/assets/iconfont/iconfont.ttf");
|
|
|
+}
|
|
|
+.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%;
|
|
|
@@ -101,11 +140,11 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.hot-item {
|
|
|
- width: 200px;
|
|
|
+ width: 320px;
|
|
|
+ height: 200px;
|
|
|
padding: @gap-1 0;
|
|
|
text-align: center;
|
|
|
- border: 1px solid @grey;
|
|
|
- border-radius: 30px;
|
|
|
+ border-radius: 20px;
|
|
|
margin: 15px @gap-4 15px 0;
|
|
|
}
|
|
|
}
|