罗世杰：feat：初始化统计色块，完成店铺列表和找店列表的切换，完成首页导航
This commit is contained in:
LuoShijie
77
pages/index/HomeNavCard.vue
Normal file
77
pages/index/HomeNavCard.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="nav-card">
|
||||
<u-grid :col="4" customStyle="height: 334rpx;align-content: normal" >
|
||||
<u-grid-item v-for="(item, index) in navItems" :key="item.icon" @click="handleItemClick(index)">
|
||||
<u-icon :name="item.icon" :size="46"></u-icon>
|
||||
<view class="grid-text">{{ item.text }}</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navItems: [{
|
||||
icon: "/static/navbar/sy_icon_zrxx.png",
|
||||
text: "转让信息"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_zdxx.png",
|
||||
text: "找店信息"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_czxx.png",
|
||||
text: "出租信息"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_xmzs.png",
|
||||
text: "项目招商"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_cjal.png",
|
||||
text: "成交案例"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_spdt.png",
|
||||
text: "速配地图"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_zmhb.png",
|
||||
text: "招募合伙"
|
||||
},
|
||||
{
|
||||
icon: "/static/navbar/sy_icon_lxwm.png",
|
||||
text: "联系我们"
|
||||
}
|
||||
// 可以继续添加更多的项目
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleItemClick(index) {
|
||||
// 在这里处理点击事件，并使用下标值
|
||||
console.log(`项目 ${index} 被点击了`);
|
||||
// 或者执行其他需要的操作
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.nav-card {
|
||||
margin: 15px 0px;
|
||||
padding: 10px 0;
|
||||
background-color: $uni-bg-color;
|
||||
|
||||
border-radius: $uni-border-radius-lg;
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
|
||||
|
||||
.grid-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,14 +18,14 @@
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @property @property {String} 需要显示的消息
|
||||
* @property {String} text 需要显示的消息
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default() {
|
||||
return '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶'
|
||||
return ' '
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
56
pages/index/Statistics.vue
Normal file
56
pages/index/Statistics.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view class="root u-flex">
|
||||
<view class="left">
|
||||
<view>
|
||||
<u-image src="/static/statistics/sy_icon_ljyh.png"
|
||||
width="356rpx"
|
||||
height="320rpx"
|
||||
/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>
|
||||
<u-image src="/static/statistics/sy_icon_ljzd1.png"
|
||||
width="340rpx"
|
||||
height="150rpx"
|
||||
/>
|
||||
</view>
|
||||
<view>
|
||||
<u-image src="/static/statistics/sy_icon_ljzd0.png"
|
||||
width="340rpx"
|
||||
height="150rpx"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.root {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.left {
|
||||
color: #06562E;
|
||||
.text1 {
|
||||
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,10 +3,17 @@
|
||||
<InputAndSwiper></InputAndSwiper>
|
||||
<view class="home-content">
|
||||
<HomeNavCard></HomeNavCard>
|
||||
<HomeNoticeBar></HomeNoticeBar>
|
||||
<ShowShopList/>
|
||||
<SearchShopListItem></SearchShopListItem>
|
||||
<SearchShopListItem></SearchShopListItem>
|
||||
<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>
|
||||
@@ -14,13 +21,19 @@
|
||||
|
||||
<script>
|
||||
import HomeNoticeBar from "./HomeNoticeBar.vue"
|
||||
import HomeNavCard from "./HomeNavCard.vue"
|
||||
import Statistics from "./Statistics.vue"
|
||||
export default {
|
||||
components: {
|
||||
HomeNoticeBar
|
||||
HomeNavCard,
|
||||
HomeNoticeBar,
|
||||
Statistics
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
notice: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶',
|
||||
chooseIndex: 0,
|
||||
statisticsNum: [231753, 1345]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -28,6 +41,11 @@
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
isActive(currentIndex) {
|
||||
// 怎么完善此处的代码
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -39,6 +57,31 @@
|
||||
.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>
|
||||
Reference in New Issue
Block a user