From f5233339920a59103d53e8efadc6f3f5d0b64f31 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 08 五月 2024 14:45:37 +0800
Subject: [PATCH] 移动端
---
src/components/rightNavigation/NavigationBar.vue | 94 +++++++++++++++++++++--------------------------
1 files changed, 42 insertions(+), 52 deletions(-)
diff --git a/src/components/rightNavigation/NavigationBar.vue b/src/components/rightNavigation/NavigationBar.vue
index 3db494c..93d5f1a 100644
--- a/src/components/rightNavigation/NavigationBar.vue
+++ b/src/components/rightNavigation/NavigationBar.vue
@@ -1,11 +1,12 @@
<template>
<div class="navigationBar">
- <div class="menuBtn">
+ <!-- <div class="menuBtn">
<el-button class="right-menuBtn" @click="handleMenuListShow">
<img src="@/assets/img/navigation/menuicon.png" />
</el-button>
- </div>
- <div class="menuList" v-show="showMenuList.show">
+ </div> -->
+ <!-- <div class="menuList" v-show="showMenuList.show"> -->
+ <div class="menuList" v-show="true">
<ul>
<li
v-for="(value, key) in menuList"
@@ -18,7 +19,7 @@
:src="showState[value.attr].show ? value.imgActive : value.img"
:class="showState[value.attr].show ? 'Active' : 'noActive'"
/>
- <span>{{ value.name }}</span>
+ <!-- <span>{{ value.name }}</span> -->
</div>
</li>
<!-- <li @click="handleMenuClick(5)" @tap="handleMenuClick(5)" v-if="resetShowState.show">
@@ -55,13 +56,13 @@
img: require("@/assets/img/navigation/tuc.png"),
imgActive: require("@/assets/img/navigation/tucA.png"),
},
- {
- id: "0002my",
- name: "婕父",
- attr: "roam",
- img: require("@/assets/img/navigation/my.png"),
- imgActive: require("@/assets/img/navigation/myA.png"),
- },
+ // {
+ // id: "0002my",
+ // name: "婕父",
+ // attr: "roam",
+ // img: require("@/assets/img/navigation/my.png"),
+ // imgActive: require("@/assets/img/navigation/myA.png"),
+ // },
// {
// id: '0003tj',
// name: '缁熻',
@@ -69,13 +70,13 @@
// img: require("@/assets/img/navigation/tj.png"),
// imgActive: require("@/assets/img/navigation/tjA.png"),
// },
- {
- id: "0004sc",
- name: "浣嶇疆",
- attr: "location",
- img: require("@/assets/img/navigation/sc.png"),
- imgActive: require("@/assets/img/navigation/scA.png"),
- },
+ // {
+ // id: "0004sc",
+ // name: "浣嶇疆",
+ // attr: "location",
+ // img: require("@/assets/img/navigation/sc.png"),
+ // imgActive: require("@/assets/img/navigation/scA.png"),
+ // },
// {
// id: '0005sz',
// name: '璁剧疆',
@@ -120,7 +121,7 @@
// 鐐瑰嚮鍙充笂瑙掕彍鍗曢」
handleMenuClick(attr) {
- // debugger;
+ console.log("鐐瑰嚮鍙充笂瑙掕彍鍗曢」");
// 娓呴櫎瀹氱偣缁曢
if (window.pointerFly) {
window.pointerFly.end && window.pointerFly.end();
@@ -223,66 +224,55 @@
<style scoped>
.navigationBar {
position: absolute;
- top: 0.55rem;
- right: 0.15rem;
+ top: 0.75rem;
+ right: 0.1rem;
+ z-index: 10;
/* width: 64px; */
}
-.menuBtn .el-button {
- padding: 0 !important;
- font-size: 0.24rem;
- border: unset;
- float: unset;
- display: block;
+.menuBtn {
+ padding: 8px;
background: rgba(18, 126, 255, 1);
+ border-radius: 10px;
}
.menuBtn img {
- width: 24px;
- margin: 3px;
-}
-/* .menuBtn {
- margin-left: 25px;
- width: 22px;
+ width: 20px;
height: 20px;
- background-image: url("~@/assets/img/navigation/menuicon.png");
- background-repeat: no-repeat;
- background-size: 100% 100%;
-} */
+}
.menuList {
+ /* background-color: red; */
+ /* padding: 0px 2px;
position: absolute;
- width: 40px;
margin-top: 0.1rem;
- right: -0.05rem;
+ right: 0;
background-color: white;
- border-radius: 10px;
+ border-radius: 10px; */
}
.menuItem {
- width: 32px;
+ width: 0.42rem;
+ /* width: 32px;
color: black;
- margin: 0px auto;
margin-top: 10px;
margin-bottom: 7px;
- /* padding-bottom: 7px; */
border-bottom: 1px solid #e8e8e9;
+ background-color: #bfa;
text-align: center;
- cursor: pointer;
- /* border-bottom: 1px solid #e8e8e9; */
- /* pointer-events:none */
+ cursor: pointer; */
}
li:last-child .menuItem {
border: none;
}
-img {
- width: 24px;
- /* height: 24px; */
- text-align: center;
+.menuItem img {
+ width: 100%;
+ /* text-align: center; */
}
-.menuItem span {
+/* .menuItem span {
display: block;
text-align: center;
-}
+ margin-top: 2px;
+} */
</style>
--
Gitblit v1.9.3