修改底部导航
This commit is contained in:
赵毅
parent
87a645078b
commit
dbe6137a4e
@ -1,4 +1,3 @@
|
||||
|
||||
.foot-fixed {
|
||||
position: fixed;
|
||||
bottom: -1px;
|
||||
@ -8,14 +7,17 @@
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #E8E8E8;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item {
|
||||
width: 20%;
|
||||
float: left;
|
||||
@ -27,48 +29,88 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
.foot-fixed .foot-item .foot-icon-box{
|
||||
.foot-fixed .foot-item .foot-icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 66rpx;
|
||||
height: 66rpx;
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item .foot-icon {
|
||||
width: 47rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item .foot-icon2 {
|
||||
width: 66rpx;
|
||||
height: 66rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.foot-icon3{
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.foot-fixed .foot-item .foot-label {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item .foot-label {
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.foot-fixed .foot-item span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.foot-fixed .scan-item {
|
||||
position: relative;
|
||||
margin-top: -30rpx;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.foot-fixed .scan-item .foot-icon-box {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20rpx rgba(255, 77, 79, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: -20rpx;
|
||||
}
|
||||
|
||||
.foot-fixed .scan-item .foot-icon {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.foot-fixed .scan-item .foot-label {
|
||||
margin-top: 10rpx;
|
||||
color: #FF4D4F;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 自定义导航栏 */
|
||||
.nav-box {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@click="jump"
|
||||
:data-idx="index"
|
||||
:data-url="item.url"
|
||||
class="foot-item"
|
||||
:class="{ 'foot-item': true, 'scan-item': item.isScan }"
|
||||
>
|
||||
<view class="foot-icon-box">
|
||||
<image
|
||||
@ -22,7 +22,7 @@
|
||||
}"
|
||||
></image>
|
||||
<image
|
||||
class="foot-icon2"
|
||||
:class="{ 'foot-icon3': item.photo.includes('footer_richScan.png'), 'foot-icon2': !item.photo.includes('footer_richScan.png') }"
|
||||
:src="item.photoAc"
|
||||
mode="widthFix"
|
||||
v-if="current == index"
|
||||
@ -44,6 +44,12 @@ export default {
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
foot_width() {
|
||||
// 动态计算导航项宽度，确保均匀分布
|
||||
return (100 / this.navList.length).toFixed(2) + '%';
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navList: [
|
||||
@ -52,9 +58,25 @@ export default {
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
|
||||
photoAc:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png",
|
||||
nav_name: "首页",
|
||||
nav_name: "智慧首页",
|
||||
url: "/pages/index/index",
|
||||
},
|
||||
{
|
||||
photo:
|
||||
"http://localhost:8080/footer_facility.png",
|
||||
photoAc:
|
||||
"http://localhost:8080/footer_facilityAc.png",
|
||||
nav_name: "智能设备",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
photo:
|
||||
"http://localhost:8080/footer_richScan.png",
|
||||
photoAc:
|
||||
"http://localhost:8080/footer_richScan.png",
|
||||
url: "",
|
||||
isScan: true,
|
||||
},
|
||||
{
|
||||
photo:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
|
||||
@ -63,39 +85,38 @@ export default {
|
||||
nav_name: "我的小区",
|
||||
url: "/packages/community/index/index",
|
||||
},
|
||||
{
|
||||
photo: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLife.png",
|
||||
photoAc: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLifeAc.png",
|
||||
nav_name: "本地生活",
|
||||
url: "/packages/localLife/index/index",
|
||||
},
|
||||
{
|
||||
photo:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
|
||||
photoAc:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
|
||||
nav_name: "优选商城",
|
||||
url: "/packages/shop/index/index",
|
||||
},
|
||||
{
|
||||
photo:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
||||
photoAc:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
||||
nav_name: "到家服务",
|
||||
url: "/packages/homeServer/index/index",
|
||||
},
|
||||
// {
|
||||
// photo: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLife.png",
|
||||
// photoAc: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLifeAc.png",
|
||||
// nav_name: "本地生活",
|
||||
// url: "/packages/localLife/index/index",
|
||||
// },
|
||||
// {
|
||||
// photo:
|
||||
// "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
|
||||
// photoAc:
|
||||
// "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
|
||||
// nav_name: "优选商城",
|
||||
// url: "/packages/shop/index/index",
|
||||
// },
|
||||
// {
|
||||
// photo:
|
||||
// "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
||||
// photoAc:
|
||||
// "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
||||
// nav_name: "到家服务",
|
||||
// url: "/packages/homeServer/index/index",
|
||||
// },
|
||||
{
|
||||
photo:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png",
|
||||
photoAc:
|
||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png",
|
||||
nav_name: "我的",
|
||||
nav_name: "个人中心",
|
||||
url: "/pages/user/index",
|
||||
},
|
||||
],
|
||||
foot_width: "16.5%",
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFootnav() {
|
||||
@ -139,16 +160,22 @@ export default {
|
||||
},
|
||||
|
||||
jump(e) {
|
||||
const url = e.currentTarget.dataset.url;
|
||||
// 检查url是否存在且不为空
|
||||
if (!url || url.trim() === '') {
|
||||
this.NotOpen();
|
||||
return;
|
||||
}
|
||||
|
||||
const ctoken = uni.getStorageSync("ctoken");
|
||||
const authen = [
|
||||
"/pages/index/index",
|
||||
"/pages/user/index",
|
||||
"/pages/user/index",
|
||||
];
|
||||
// 除首页及个人中心页不需要鉴定ctoken， 其他tab页均需存在登录态才可访问
|
||||
if (authen.includes(e.currentTarget.dataset.url)) {
|
||||
if (authen.includes(url)) {
|
||||
uni.redirectTo({
|
||||
url: e.currentTarget.dataset.url,
|
||||
url: url,
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -160,7 +187,7 @@ export default {
|
||||
}
|
||||
|
||||
uni.redirectTo({
|
||||
url: e.currentTarget.dataset.url,
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@ -154,7 +154,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav-footer :current="1" />
|
||||
<nav-footer :current="3" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<nav-footer :current="4" />
|
||||
<!-- <nav-footer :current="4" /> -->
|
||||
|
||||
<!-- 回到顶部 -->
|
||||
<div class="toUp" @click="scrollToTop">
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
</div>
|
||||
<div class="btnList_after"></div>
|
||||
|
||||
<nav-footer :current="2" />
|
||||
<!-- <nav-footer :current="2" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -305,7 +305,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav-footer :current="3" />
|
||||
<!-- <nav-footer :current="3" /> -->
|
||||
|
||||
<div class="shop_car" @click="shopCar">
|
||||
<u-badge
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<nav-footer :current="5"/>
|
||||
<nav-footer :current="4"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
<view>客服</view>
|
||||
</view>
|
||||
<view style="padding-top: 174rpx;"></view>
|
||||
<nav-footer :current="5"/>
|
||||
<nav-footer :current="4"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user