<template>
<div class="home">
<div class="home-search">
<div class="hs-left">
<img src="../../../static/img/home/map.png" class="img">
<span>阜阳</span>
</div>
<div class="hs-right">
<img src="../../../static/img/home/search.png" class="img">
<input type="text" placeholder="搜索你想要的">
</div>
</div>
<div class="home-swiper">
<swiper-item />
</div>
<!-- 图标 -->
<icon-nav :data="iconList" />
<!-- 优惠专区 -->
<zone-panel :panelList="panelList" />
<!-- 合作企业 -->
<business-pannel :bussinessList="bussinessList" />
<!-- 寻匠小课堂 -->
<class-panel :classList="classList" />
<div class="home-buttom">
<kefu-button />
<call-button mobile="17768118595" />
</div>
</div>
</template>
<script>
import SwiperItem from '@/views/swiper/SwiperItem';
import IconNav from '@/views/nav/IconNav';
import ZonePanel from '@/views/panel/ZonePanel';
import BusinessPannel from '@/views/panel/BusinessPannel';
import ClassPanel from '@/views/panel/ClassPanel';
import KefuButton from '@/components/button/KefuButton';
import CallButton from '@/components/button/CallButton'
export default {
components: {
SwiperItem,
IconNav,
ZonePanel,
BusinessPannel,
ClassPanel,
KefuButton,
CallButton
},
data() {
return {
iconList: [],
panelList: [],
bussinessList: [],
classList: [],
}
},
methods: {
async list() {
const result = await this.post({
url: 'jump/wapp',
payload: {},
auth: true,
});
if (result.code == 1) {
this.iconList = result.data.filter(x => {
return x.tag == 'service'
})
this.panelList = result.data.filter(x => {
return x.tag == 'discount'
})
this.bussinessList = result.data.filter(x => {
return x.tag == 'cooperate'
})
this.classList = result.data.filter(x => {
return x.tag == 'class'
}).map(x => {
x.created_at = this.timeF(x.created_at);
return x;
})
}
},
},
mounted() {
this.list();
}
}
</script>
<style lang="less" scoped>
.home {
.home-search {
padding: 10px;
display: flex;
flex-flow: row;
align-items: center;
background: #f7be27;
.hs-left {
display: flex;
align-items: center;
font-size: 15px;
.img {
width: 20px;
height: 25px;
}
span {
color: #3c382c;
padding-left: 5px;
}
}
.hs-right {
padding-left: 15px;
font-size: 14px;
.img {
width: 15px;
height: 15px;
position: absolute;
top: 19px;
left: 95px;
}
input {
border-radius: 20px;
padding: 2px 5px 2px 35px;
width: 240px;
background: white;
}
}
}
.home-buttom {
position: fixed;
display: flex;
flex-flow: column;
justify-content: space-around;
bottom: 60px;
right: 10px;
height: 120px;
}
}
.icon-nav {
display: flex;
flex-wrap: wrap;
// margin-left: 50px;
// margin-top: -45px;
.in-item {
margin-top: 15px;
width: 25%;
display: flex;
flex-flow: column;
align-items: center;
.i-top {
.img {
width: 40px;
height: 40px;
}
}
.i-foot {
margin-top: -5px;
font-size: 14px;
color: #686868;
}
}
}
.zone-panel {
margin-top: 15px;
padding: 20px;
.zp-title {
font-size: 20px;
font-weight: bold;
}
.zp-body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 5px;
.z-item {
margin-top: 10px;
width: 42%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
border: 1px solid #f3f4f4;
box-shadow: 0 0 10px #f3f4f4;
padding: 5px 10px;
.zi-left {
.zl-top {
font-size: 15px;
font-weight: bold;
}
.zl-foot {
font-size: 11px;
color: #99999b;
}
}
.zi-right {
.img {
width: 75px;
height: 75px;
}
}
}
}
}
.b-pannel {
padding: 20px;
.bp-title {
display: flex;
flex-wrap: row;
align-items: center;
justify-content: space-between;
.b-left {
font-size: 20px;
font-weight: bold;
}
.b-right {
font-size: 14px;
color: #ecb810;
font-weight: bold;
display: flex;
flex-flow: row;
align-items: center;
padding-right: 5px;
.left {
width: 6px;
height: 6px;
border-top: 2px solid #ecb810;
border-right: 2px solid #ecb810;
transform: rotate(45deg);
}
}
}
.bp-body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 15px;
.b-item {
margin-top: 10px;
.bi-top {
.img {
width: 162px;
height: 70px;
}
}
.bi-foot {
margin-top: -5px;
padding: 8px;
border: 1px solid #f4f4f4;
box-shadow: 0 0 10px #f3f4f4;
font-size: 14px;
color: #545454;
font-weight: bold;
}
}
}
}
.class-panel {
padding: 20px;
.cp-title {
font-size: 20px;
font-weight: bold;
}
.cp-body {
.cb-item {
display: flex;
flex-flow: row;
align-items: center;
margin-top: 15px;
.c-left {
.img {
width: 66px;
height: 68px;
}
}
.c-right {
padding-left: 8px;
.cr-top {
font-size: 18px;
font-weight: bold;
// margin-top: -20px;
}
.cr-mid {
margin-top: 8px;
font-size: 12px;
color: #969698;
}
.cr-foot {
margin-top: 10px;
display: flex;
flex-flow: row;
align-items: center;
font-size: 12px;
color: #969698;
.img {
width: 12px;
height: 12px;
}
span {
padding-left: 5px;
}
}
}
}
}
}
</style>
子组件调父组件数据
最新推荐文章于 2024-07-12 21:26:02 发布