Files
city-store-transfer/pages/index/index.vue
2023-11-06 00:16:42 +08:00

84 lines
1.8 KiB
Vue

<template>
<view class="home-base-bg">
<InputAndSwiper></InputAndSwiper>
<view class="home-content">
<HomeNavCard></HomeNavCard>
<HomeNoticeBar :text="notice"/>
<Statistics :data="statisticsNum"/>
<view class="show-and-search">
<view class="show-tab list-tab" :class="{ 'tab-activate': chooseIndex === 0 }" @click="this.chooseIndex=0">
<text>店铺列表</text>
</view>
<view class="search-tab list-tab" :class="{ 'tab-activate': chooseIndex === 1 }" @click="this.chooseIndex=1">
<text>找店列表</text>
</view>
</view>
<SearchShopList v-if="chooseIndex"/><ShowShopList v-else/>
</view>
<TabBar :current-page="0"></TabBar>
</view>
</template>
<script>
import HomeNoticeBar from "./HomeNoticeBar.vue"
import HomeNavCard from "./HomeNavCard.vue"
import Statistics from "./Statistics.vue"
export default {
components: {
HomeNavCard,
HomeNoticeBar,
Statistics
},
data() {
return {
notice: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶',
chooseIndex: 0,
statisticsNum: [231753, 1345]
}
},
onLoad() {
},
methods: {
},
computed: {
}
}
</script>
<style lang="scss" scoped>
.home-base-bg {
background-color: $uni-bg-color-grey;
width: 100%;
.home-content {
margin: 0 10px;
}
.show-and-search{
display: flex;
.list-tab {
z-index: 2;
width: 259rpx;
height: 70rpx;
background: #B7EBD2;
border-radius: 11px 100px 0px 0px;
color: #fff;
font-size: 15px;
line-height: 21px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
.search-tab {
z-index: 1;
transform: translateX(-61rpx);
}
.tab-activate {
background: linear-gradient(#E86262,#CC3333);
z-index: 3;
}
}
}
</style>