|
|
@@ -1,22 +1,22 @@
|
|
|
<template>
|
|
|
- <div class="hover_content">
|
|
|
- <div class="hover_menu flex">
|
|
|
- <div
|
|
|
+ <view class="hover_content">
|
|
|
+ <view class="hover_menu flex">
|
|
|
+ <div class="sider" :class="isSider ? 'hoverd' : 'hover'"></div>
|
|
|
+ <view
|
|
|
class="menu_icon"
|
|
|
v-for="(menu, i) in menus"
|
|
|
:key="i"
|
|
|
@tap="click(i, menu.pagePath)"
|
|
|
>
|
|
|
- <uni-transition mode-class="fade" show="true" v-if="selectedIndex == i">
|
|
|
- <img :src="menu.selectedIconPath" />
|
|
|
- </uni-transition>
|
|
|
- <uni-transition mode-class="fade" show="true" v-else>
|
|
|
- <img :src="menu.iconPath" />
|
|
|
- </uni-transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <view class="iconBox">
|
|
|
+ <span class="iconfont" :class="[menu.icon, selectedIndex == i? '' : 'hover']"></span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
+<style scoped src="../../static/iconfont.css">
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.hover_content {
|
|
|
z-index: 999;
|
|
|
@@ -32,13 +32,44 @@
|
|
|
.hover_menu {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
- margin-top: 10rpx;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ .sider {
|
|
|
+ position: absolute;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ left: 14%;
|
|
|
+ transition: all 0.3s;
|
|
|
+ background: rgb(14, 92, 246);
|
|
|
+ &.hover {
|
|
|
+ left: 14%;
|
|
|
+ background: rgb(14, 92, 246);
|
|
|
+ }
|
|
|
+ &.hoverd {
|
|
|
+ left: 61%;
|
|
|
+ }
|
|
|
+ }
|
|
|
.menu_icon {
|
|
|
- transition: all 0.5s;
|
|
|
- img {
|
|
|
+ position: relative;
|
|
|
+ .iconBox {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
- border-radius: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .iconfont {
|
|
|
+ z-index: 999;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+ &.hover{
|
|
|
+ color: rgb(187, 187, 187);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -50,17 +81,16 @@ export default {
|
|
|
return {
|
|
|
selectedIndex: getApp().globalData.selectedIndex,
|
|
|
showselected: false,
|
|
|
+ isSider: getApp().globalData.isSider,
|
|
|
menus: [
|
|
|
{
|
|
|
pagePath: "pages/index/index",
|
|
|
- iconPath: "/static/tabbar/home-select.png",
|
|
|
- selectedIconPath: "/static/tabbar/home-selected.png",
|
|
|
+ icon: "icon-zhuye",
|
|
|
text: "首页",
|
|
|
},
|
|
|
{
|
|
|
pagePath: "pages/selfCenter/index",
|
|
|
- iconPath: "/static/tabbar/user-select.png",
|
|
|
- selectedIconPath: "/static/tabbar/user-selected.png",
|
|
|
+ icon: "icon-geren",
|
|
|
text: "我的",
|
|
|
},
|
|
|
],
|
|
|
@@ -68,6 +98,13 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
click(index, src) {
|
|
|
+ if (index == 0) {
|
|
|
+ this.isSider = false;
|
|
|
+ getApp().globalData.isSider = false
|
|
|
+ } else {
|
|
|
+ this.isSider = true;
|
|
|
+ getApp().globalData.isSider = true
|
|
|
+ }
|
|
|
var pages = getCurrentPages(); //获取加载的页面
|
|
|
var currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
var url = currentPage.route; //当前页面url
|
|
|
@@ -76,12 +113,14 @@ export default {
|
|
|
let res_src = this.check(src);
|
|
|
// console.log(res_url,res_src);
|
|
|
if (!(res_url && res_src) && !(res_url == false && res_src == false)) {
|
|
|
- // uni.redirectTo({
|
|
|
- // url: "/" + src,
|
|
|
- // });
|
|
|
- uni.navigateTo({
|
|
|
- url: "/" + src,
|
|
|
- });
|
|
|
+ // if (index == 0) {
|
|
|
+ // getApp().globalData.isSider = false;
|
|
|
+ // } else {
|
|
|
+ // getApp().globalData.isSider = true;
|
|
|
+ // }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/" + src,
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
check(url) {
|
|
|
@@ -98,12 +137,20 @@ export default {
|
|
|
"pages/park/index",
|
|
|
"pages/park/map_search",
|
|
|
"pages/activity/index",
|
|
|
+ "pages/activity/activity_deatil",
|
|
|
"pages/supply/index",
|
|
|
"pages/supply/putSupply",
|
|
|
"pages/supply/mySupply",
|
|
|
"pages/supply/supply_detail",
|
|
|
"pages/enterprise/index",
|
|
|
+ "pages/enterprise/enterprise_detail",
|
|
|
+ "pages/enterprise/product_detail",
|
|
|
"pages/service/index",
|
|
|
+ "pages/auth/index",
|
|
|
+ "pages/notice/index",
|
|
|
+ "pages/notice/notice_deatil",
|
|
|
+ "pages/attract/index",
|
|
|
+ "pages/attract/attract_deatil",
|
|
|
];
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
let e = arr[i];
|
