From fc1f22df5322aa89ffcf60040b01eff0451df3a3 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期三, 07 六月 2023 17:56:05 +0800
Subject: [PATCH] 页面样式调整，功能调整
---
src/components/topBtn.vue | 73 +++++++++++++++++++++++++++---------
1 files changed, 54 insertions(+), 19 deletions(-)
diff --git a/src/components/topBtn.vue b/src/components/topBtn.vue
index e51214e..ad62ff9 100644
--- a/src/components/topBtn.vue
+++ b/src/components/topBtn.vue
@@ -4,16 +4,41 @@
<div
class="first_Menu"
:title="item.name"
- v-for="(item,i) in menuOptions"
+ v-for="(item, i) in menuOptions"
+ :key="i"
@click="setMenuClick(item)"
>
<div class="First_img">
<img
class="imgIcon"
- :src="require('../assets/img/topBtn/'+item.imgUrl)"
- >
+ :src="require('../assets/img/topBtn/' + item.imgUrl)"
+ />
</div>
- <div
+ <div class="menu_second">
+ <div class="upTop">
+ <div class="upimg"></div>
+ </div>
+ <div class="second_Box">
+ <div
+ class="second_Menu"
+ :title="res.name"
+ v-for="(res, j) in item.children"
+ :key="j"
+ @click="setMenuClick(res)"
+ :class="{ second_Menu_click: checkFlag == res.id }"
+ >
+ <img
+ class="imgIcon"
+ style="margin-bottom: 5px"
+ :src="require('../assets/img/topBtn/' + res.imgUrl)"
+ />
+ <div class="name_box">
+ {{ res.name }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <div
class="menu_second"
v-if="item.children && item.children.length > 0"
v-show="menuFlag == item.id"
@@ -25,24 +50,22 @@
<div
class="second_Menu"
:title="res.name"
- v-for="(res,j) in item.children"
+ v-for="(res, j) in item.children"
+ :key="j"
@click="setMenuClick(res)"
- :class="{'second_Menu_click':checkFlag == res.id}"
+ :class="{ second_Menu_click: checkFlag == res.id }"
>
<img
class="imgIcon"
- style="margin-bottom: 5px;"
- :src="require('../assets/img/topBtn/'+res.imgUrl)"
- >
- <div>
+ style="margin-bottom: 5px"
+ :src="require('../assets/img/topBtn/' + res.imgUrl)"
+ />
+ <div class="name_box">
{{ res.name }}
</div>
-
</div>
</div>
-
- </div>
-
+ </div> -->
</div>
</div>
</div>
@@ -100,7 +123,7 @@
height: 30px;
}
.first_Menu {
- min-width: 50px;
+ width: 50px;
height: 50px;
margin-right: 7px;
background: url("../assets/img/topBtn/鍥炬爣bj.png") no-repeat;
@@ -113,6 +136,7 @@
align-items: center;
}
}
+
.upTop {
width: 100%;
height: 10px;
@@ -125,13 +149,15 @@
}
}
.menu_second {
- margin-top: 0px;
+ display: none;
}
.second_Box {
+ min-width: 50px;
background: #07080e;
box-shadow: inset 0px 0px 15px 0px rgb(38, 47, 71, 0.68);
.second_Menu {
+ min-width: 50px;
background: #07080e;
box-shadow: inset 0px 0px 8px 0px rgb(38, 47, 71, 0.68);
margin-top: 1px;
@@ -140,9 +166,12 @@
padding: 10px 10px;
font-weight: 300;
color: #d1e0ff;
- line-height: 7px;
+ // display: flex;
text-align: center;
- border: 1px solid none;
+ .name_box {
+ line-height: 7px;
+ white-space: nowrap;
+ }
}
.second_Menu_click {
@@ -153,6 +182,12 @@
0px 7px 8px 0px rgba(38, 47, 71, 0.68);
}
}
+ .first_Menu:hover .menu_second {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 0px;
+ }
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3