142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<template>
|
|
<app-layout btnType="unset" title="分类" pageBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6">
|
|
<view class="search">
|
|
<view class="input-box">
|
|
<view class="icon">
|
|
<text class="iconfont icon-sousuo"></text>
|
|
</view>
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
:model="keywords"
|
|
placeholder="搜索您需要的服务"
|
|
placeholder-class="placeholder"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="cate">
|
|
<app-cate
|
|
:offsetHeight="195"
|
|
:data="data"
|
|
cateType="cate"
|
|
@clickCate="clickCate"
|
|
/>
|
|
</view>
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import AppLayout from "@/components/layout/layout";
|
|
import AppCate from "@/components/cate/cate";
|
|
export default {
|
|
name: "service-cate",
|
|
data() {
|
|
return {
|
|
keywords: "",
|
|
data: [
|
|
{
|
|
id: 1,
|
|
name: "热门推荐",
|
|
icon: "",
|
|
child: [
|
|
{
|
|
id: 2,
|
|
name: "空调安装",
|
|
icon: require("@/static/temp/cate/1.png"),
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "空调拆卸",
|
|
icon: require("@/static/temp/cate/2.png"),
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "热水器安装",
|
|
icon: require("@/static/temp/cate/3.png"),
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "油烟机安装",
|
|
icon: require("@/static/temp/cate/4.png"),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "电器安装",
|
|
icon: "",
|
|
child: [
|
|
{
|
|
id: 6,
|
|
name: "空调安装",
|
|
icon: require("@/static/temp/cate/2.png"),
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "空调拆卸",
|
|
icon: require("@/static/temp/cate/3.png"),
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "热水器安装",
|
|
icon: require("@/static/temp/cate/4.png"),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
AppCate,
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {
|
|
clickCate(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/service/list?id=" + id,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.search {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 30rpx;
|
|
.input-box {
|
|
width: 670rpx;
|
|
height: auto;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 65rpx;
|
|
.icon,
|
|
.input,
|
|
.placeholder {
|
|
color: #bebebe;
|
|
}
|
|
.icon {
|
|
width: 85rpx;
|
|
height: 65rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
}
|
|
.input {
|
|
width: 585rpx;
|
|
height: 65rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |