From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期三, 03 四月 2024 18:44:07 +0800
Subject: [PATCH] 三
---
components/headNav/headNav.vue | 175 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 131 insertions(+), 44 deletions(-)
diff --git a/components/headNav/headNav.vue b/components/headNav/headNav.vue
index 2f106c4..0db4e57 100644
--- a/components/headNav/headNav.vue
+++ b/components/headNav/headNav.vue
@@ -1,26 +1,34 @@
<template>
- <view>
+ <view class="headNav">
<view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
- <view class="" style="width: .34rem;height: .34rem;" @click="menuNav = !menuNav"><img
+ <view class="" style="width: .34rem;height: .34rem;margin-right: 3rem;" @click="menuNav = !menuNav"><img
style="width: 100%;height: 100%;" src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view>
<view class="flex" style="letter-spacing: 5rpx;">
<view class="logo"></view>
<view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
- 涓尰鍖讳簨鍒跺害
+ {{text}}
</view>
</view>
<view class="NavTopr flex">
- <view class="search-container" style="margin-right: .30rem;">
+ <!-- <view class="search-container" style="margin-right: .30rem;">
<view :class="{ 'expanded': isExpanded ,'search-bar':isExpanded}">
<input v-if="isExpanded" type="text" @blur="InputBlur" class="search-input"
v-model="searchInput" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" />
- <!-- <img
- src=""></img> -->
- <view class="search-logo" @click="toggleSearch" style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
+ <view class="search-logo" @click="toggleSearch"
+ style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
</view>
+ </view> -->
+ <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}"
+ style="overflow: hidden; border-radius: .5rem; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;">
+ <input :style="{'display': isExpanded == true ? 'block' : 'none'}" type="text"
+ style="flex: 1; background-color: #fff; font-size: .13rem;" @blur="InputBlur"
+ class="search-input" v-model="searchInput" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" />
+ <view class="search-logo" @click="toggleSearch"
+ :style="{'backgroundColor':searchBg==true?'#244A7B':'#DA7A2B'}"
+ style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
</view>
<!-- <img style="border-radius: 50%;display: inline-block;" src="../../static/image/search.png" alt="" /> -->
- <img src="@/static/image/profile.svg" alt="" />
+ <img @click="changePassword" src="@/static/image/profile.svg" alt="" />
<img src="@/static/image/quote.svg" style="margin-right: 0;" alt="" />
</view>
</view>
@@ -29,28 +37,29 @@
<!-- 鑳屾櫙 -->
<img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" />
<view class="" style="position: relative;z-index: 999;">
- <view class="flex" style="justify-content: center;margin: .52rem 0 .46rem 0;">
- <img src="@/static/image/logo.png" style="width: 100rpx;height: 100rpx;"></img>
+ <view class="flex flex-center LeftLogo">
+ <!-- <img src="@/static/image/logo.png" ></img> -->
+ <view class="img"></view>
</view>
- <el-menu default-active="1" active-text-color="#ffffff" class="el-menu-vertical-demo"
+ <el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo"
@select="handleSelect">
- <el-menu-item index="1" style=" border-radius: 30px;">
+ <el-menu-item index="0">
<span slot="title">棣栭〉</span>
</el-menu-item>
- <el-menu-item index="2">
+ <el-menu-item index="1">
<span slot="title">涓尰浜虹墿鏁版嵁搴�</span>
</el-menu-item>
- <el-menu-item index="3">
+ <el-menu-item index="2">
<span slot="title">涓栧尰鍖诲鏁版嵁搴�</span>
</el-menu-item>
- <el-menu-item index="4">
+ <el-menu-item index="3">
<span slot="title">涓尰鍖诲娴佹淳</span>
</el-menu-item>
- <el-menu-item index="5">
+ <el-menu-item index="4">
<span slot="title">涓尰鍦板煙鍥捐氨</span>
</el-menu-item>
- <el-menu-item index="6">
- <span slot="title">涓尰鍦板煙鍥捐氨</span>
+ <el-menu-item index="5">
+ <span slot="title">涓尰鍖讳簨鍒跺害</span>
</el-menu-item>
</el-menu>
</view>
@@ -67,6 +76,18 @@
export default {
name: "headNav",
props: {
+ text:{
+ type:String,
+ default () {
+ return '鏍囬'
+ }
+ },
+ searchBg :{
+ type: Boolean,
+ default () {
+ return true
+ }
+ },
bg: {
type: String,
default () {
@@ -77,6 +98,12 @@
type: String,
default () {
return '/static/image/line.png'
+ }
+ },
+ idIndex: {
+ type: String,
+ default () {
+ return '1'
}
}
},
@@ -89,35 +116,41 @@
};
},
methods: {
+ // 淇敼瀵嗙爜
+ changePassword() {
+ uni.navigateTo({
+ url: '/pages/changePassword/changePassword'
+ })
+ },
aaa() {
console.log('ss');
},
handleSelect(index) {
console.log(index);
- if (index === '1') {
- // uni.navigateTo({
- // url: '/pages/index/index'
- // });
+ if (index === '0') {
+ uni.navigateTo({
+ url: '/pages/index/index?id=' + 0
+ });
+ } else if (index === '1') {
+ uni.navigateTo({
+ url: '/pages/repository/repository?id=' + 1
+ });
} else if (index === '2') {
- // uni.navigateTo({
- // url: '/pages/option2Page'
- // });
+ uni.navigateTo({
+ url: '/pages/zhongyi/zhongyi?id='+2
+ });
} else if (index === '3') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
+ uni.navigateTo({
+ url: '/pages/dataDisplay/dataDisplay?id=' + 3
+ });
} else if (index === '4') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
+ uni.navigateTo({
+ url: '/pages/territory/territory?id=' + 4
+ });
} else if (index === '5') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
- } else if (index === '6') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
+ uni.navigateTo({
+ url: '/pages/TcmSystem/TcmSystem?id=' + 5
+ });
}
},
// 鎼滅储妗嗙殑鐨勭Щ鍑�
@@ -128,7 +161,7 @@
},
// 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬�
toggleSearch() {
- console.log(this.searchInput);
+ // console.log('鎾掓棪鑼冨痉钀ㄥ彂鐢熺殑',this.searchInput);
this.isExpanded = !this.isExpanded;
this.$nextTick(() => {
if (this.searchInput.trim() !== '') {
@@ -146,8 +179,60 @@
</script>
<style scoped>
+ .LeftLogo {
+ width: 100%;
+ margin: .52rem 0 .5rem;
+
+ .img {
+ width: .52rem;
+ height: .52rem;
+ background-image: url(@/static/image/logo3.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ /* image-rendering: pixelated; */
+ }
+ }
+
+ @media screen and (min-width:2560px)and (max-width:3840px) {
+
+ ::v-deep .el-menu .is-active {
+ background-color: #244A7B !important;
+ border-radius: .5rem;
+
+ }
+
+ .LeftLogo .img {
+ background-image: url(@/static/image/logo4.png);
+ }
+ }
+
+ @media screen and (min-width:1366px) and (max-width:1920px) {
+
+ ::v-deep .el-menu .is-active {
+ background-color: #244A7B !important;
+ border-radius: .5rem;
+
+ }
+
+ .LeftLogo .img {
+ background-image: url(@/static/image/logo.png);
+ }
+ }
+
+ ::v-deep .uni-input-placeholder {
+ padding-left: .05rem;
+ }
+
+ .headNav {
+ /* 绮樻�у畾浣� */
+ position: sticky;
+ top: 0;
+ z-index: 9999999999999999999999999999999999999999999999 !important;
+ }
+
.NavTop {
/* background: url(@/static/image/topBg.png); */
+
background-size: 100% 100%;
padding: .16rem .24rem;
color: #fff !important;
@@ -266,20 +351,22 @@
::v-deep .el-menu .is-active {
background-color: #244A7B !important;
- border-radius: 30px;
+ border-radius: .5rem;
/* padding: 0 .14rem !important; */
}
.el-menu-item {
height: .34rem;
+ line-height: .3rem;
font-size: .16rem;
- text-align: center;
font-weight: 500;
- margin: .13rem .14rem !important;
- display: flex;
+ margin: .13rem .14rem !important;
+ /* display: flex;
justify-content: center;
- align-items: center;
+ align-items: center; */
+ text-align: left;
+ padding-left: .4rem !important;
}
::v-deep .el-dialog__body {
--
Gitblit v1.9.1