|
|
@@ -1,16 +1,14 @@
|
|
|
<template>
|
|
|
<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)"
|
|
|
>
|
|
|
- <view
|
|
|
- class="iconBox"
|
|
|
- :class="{ hover: selectedIndex == i }"
|
|
|
- >
|
|
|
+ <view class="iconBox">
|
|
|
<span class="iconfont" :class="menu.icon"></span>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -36,26 +34,38 @@
|
|
|
justify-content: space-around;
|
|
|
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%;
|
|
|
+ .iconfont {
|
|
|
+ color: rgb(187, 187, 187);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.menu_icon {
|
|
|
+ position: relative;
|
|
|
.iconBox {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
border-radius: 50%;
|
|
|
- &.hover {
|
|
|
- background: rgb(14, 92, 246);
|
|
|
- }
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.iconfont {
|
|
|
- &.hoverd {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 50%;
|
|
|
- color: rgb(187, 187, 187);
|
|
|
- }
|
|
|
+ z-index: 999;
|
|
|
color: #fff;
|
|
|
- font-size: 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
font-family: "iconfont" !important;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
@@ -71,6 +81,7 @@ export default {
|
|
|
return {
|
|
|
selectedIndex: getApp().globalData.selectedIndex,
|
|
|
showselected: false,
|
|
|
+ isSider: getApp().globalData.isSider,
|
|
|
menus: [
|
|
|
{
|
|
|
pagePath: "pages/index/index",
|
|
|
@@ -87,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
|
|
|
@@ -95,9 +113,11 @@ 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,
|
|
|
- // });
|
|
|
+ // if (index == 0) {
|
|
|
+ // getApp().globalData.isSider = false;
|
|
|
+ // } else {
|
|
|
+ // getApp().globalData.isSider = true;
|
|
|
+ // }
|
|
|
uni.navigateTo({
|
|
|
url: "/" + src,
|
|
|
});
|
