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 | 242 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 172 insertions(+), 70 deletions(-)
diff --git a/components/headNav/headNav.vue b/components/headNav/headNav.vue
index 36226f6..0db4e57 100644
--- a/components/headNav/headNav.vue
+++ b/components/headNav/headNav.vue
@@ -1,53 +1,65 @@
<template>
- <view>
+ <view class="headNav">
<view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
- <view class="" @click="menuNav = !menuNav"><img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view>
- <view class="flex" style="font-size: 24rpx;letter-spacing: 5rpx;">
+ <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: 26rpx;font-size: 30rpx;font-family: cursive;font-weight: 900;">涓尰鍖讳簨鍒跺害
+ <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
+ {{text}}
</view>
- </view>
+ </view>
<view class="NavTopr flex">
- <view class="search-container" style="">
+ <!-- <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 style="background-color: #000;border-radius: 50%;margin-top: -4rpx;" class="search-logo"
- @click="toggleSearch" src="@/static/image/search.png"></img>
+ <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/people.png" style="display: inline-block;" alt="" />
- <img src="@/static/image/question.png" alt="" />
+ <img @click="changePassword" src="@/static/image/profile.svg" alt="" />
+ <img src="@/static/image/quote.svg" style="margin-right: 0;" alt="" />
</view>
</view>
<view class="mImage" :style="{backgroundImage: 'url('+ bg1 + ')'}"></view>
- <el-dialog :visible.sync="menuNav" class="leftListBg" :modal="false" title="瀵硅瘽妗嗘爣棰�">
+ <el-dialog :visible.sync="menuNav" class="leftListBg" :modal="false" title="瀵硅瘽妗嗘爣棰�">
<!-- 鑳屾櫙 -->
<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: 90rpx 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;">
- <span slot="title" >棣栭〉</span>
+ <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>
@@ -64,16 +76,34 @@
export default {
name: "headNav",
props: {
- bg:{
+ text:{
type:String,
- default(){
+ default () {
+ return '鏍囬'
+ }
+ },
+ searchBg :{
+ type: Boolean,
+ default () {
+ return true
+ }
+ },
+ bg: {
+ type: String,
+ default () {
return '/static/image/topBg.png'
}
},
- bg1:{
- type:String,
- default(){
+ bg1: {
+ type: String,
+ default () {
return '/static/image/line.png'
+ }
+ },
+ idIndex: {
+ type: String,
+ default () {
+ return '1'
}
}
},
@@ -86,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'
- // });
- }else if (index === '4') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
- }else if (index === '5') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
- }else if (index === '6') {
- // uni.navigateTo({
- // url: '/pages/option3Page'
- // });
+ uni.navigateTo({
+ url: '/pages/dataDisplay/dataDisplay?id=' + 3
+ });
+ } else if (index === '4') {
+ uni.navigateTo({
+ url: '/pages/territory/territory?id=' + 4
+ });
+ } else if (index === '5') {
+ uni.navigateTo({
+ url: '/pages/TcmSystem/TcmSystem?id=' + 5
+ });
}
},
// 鎼滅储妗嗙殑鐨勭Щ鍑�
@@ -125,7 +161,7 @@
},
// 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬�
toggleSearch() {
- console.log(this.searchInput);
+ // console.log('鎾掓棪鑼冨痉钀ㄥ彂鐢熺殑',this.searchInput);
this.isExpanded = !this.isExpanded;
this.$nextTick(() => {
if (this.searchInput.trim() !== '') {
@@ -143,21 +179,73 @@
</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: 25rpx;
+ padding: .16rem .24rem;
color: #fff !important;
img {
- width: 30rpx;
- height: 30rpx;
+ width: .1rem;
+ height: .1rem;
vertical-align: middle;
}
.logo {
- width: 40rpx;
- height: 40rpx;
+ width: .32rem;
+ height: .32rem;
background: url(@/static/image/logo.png) 0 0 no-repeat;
background-size: 100% 100%;
}
@@ -166,7 +254,9 @@
vertical-align: top;
img {
- margin-right: 20rpx;
+ width: .34rem;
+ height: .34rem;
+ margin-right: .30rem;
vertical-align: middle;
}
}
@@ -174,7 +264,7 @@
.mImage {
width: 100%;
- height: 30rpx;
+ height: .2rem;
/* background-image: url(@/static/image/line.png); */
background-size: cover;
/* 鑳屾櫙鍥剧墖瑕嗙洊鏁翠釜鍏冪礌 */
@@ -230,13 +320,15 @@
}
.search-logo {
- width: 30rpx;
+ width: .34rem;
/* logo鍥炬爣鐨勫搴� */
- height: 30rpx;
+ height: .34rem;
/* logo鍥炬爣鐨勯珮搴� */
margin-left: 10rpx;
/* 涓庤緭鍏ユ涔嬮棿鐨勯棿璺� */
cursor: pointer;
+ background-image: url(@/static/image/search.svg);
+ background-size: 100% 100%;
}
.leftListBg {
@@ -259,30 +351,40 @@
::v-deep .el-menu .is-active {
background-color: #244A7B !important;
- border-radius: 30px;
+ border-radius: .5rem;
+
+ /* padding: 0 .14rem !important; */
}
.el-menu-item {
- line-height: 40px;
- height: 40px;
- margin: 20rpx 0;
-
- span {
- vertical-align: top;
- }
+ height: .34rem;
+ line-height: .3rem;
+ font-size: .16rem;
+ font-weight: 500;
+ margin: .13rem .14rem !important;
+ /* display: flex;
+ justify-content: center;
+ align-items: center; */
+ text-align: left;
+ padding-left: .4rem !important;
}
- ::v-deep .el-dialog__body{
+
+ ::v-deep .el-dialog__body {
padding-top: 0 !important;
}
+
::v-deep .el-dialog {
margin-top: 0 !important;
position: fixed;
top: 0;
left: 0;
height: 100vh;
- width: 500rpx;
+ width: 2.51rem;
}
- ::v-deep .el-dialog__header{
+
+ ::v-deep .el-dialog__header {
display: none;
}
+
+ /* ::v-deep .el-menu-vertical-demo */
</style>
\ No newline at end of file
--
Gitblit v1.9.1