<template>
|
<view class="headNav">
|
<view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
|
<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="{ 'expanded': isExpanded ,'search-bar':isExpanded}">
|
<input v-if="isExpanded" type="text" @blur="InputBlur" class="search-input"
|
v-model="searchInput" placeholder="请输入搜索内容" />
|
<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 @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="对话框标题">
|
<!-- 背景 -->
|
<img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" />
|
<view class="" style="position: relative;z-index: 999;">
|
<view class="flex flex-center LeftLogo">
|
<!-- <img src="@/static/image/logo.png" ></img> -->
|
<view class="img"></view>
|
</view>
|
<el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo"
|
@select="handleSelect">
|
<el-menu-item index="0">
|
<span slot="title">首页</span>
|
</el-menu-item>
|
<el-menu-item index="1">
|
<span slot="title">中医人物数据库</span>
|
</el-menu-item>
|
<el-menu-item index="2">
|
<span slot="title">世医医家数据库</span>
|
</el-menu-item>
|
<el-menu-item index="3">
|
<span slot="title">中医医学流派</span>
|
</el-menu-item>
|
<el-menu-item index="4">
|
<span slot="title">中医地域图谱</span>
|
</el-menu-item>
|
<el-menu-item index="5">
|
<span slot="title">中医医事制度</span>
|
</el-menu-item>
|
</el-menu>
|
</view>
|
</el-dialog>
|
<!-- <view class="" style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">水水水水</view> -->
|
<!-- <el-card v-if="menuNav"
|
style="position: fixed;left: 0;top: 0; z-index: 999999999; width: 240px;height: 100vh;">
|
|
</el-card> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "headNav",
|
props: {
|
text:{
|
type:String,
|
default () {
|
return '标题'
|
}
|
},
|
searchBg :{
|
type: Boolean,
|
default () {
|
return true
|
}
|
},
|
bg: {
|
type: String,
|
default () {
|
return '/static/image/topBg.png'
|
}
|
},
|
bg1: {
|
type: String,
|
default () {
|
return '/static/image/line.png'
|
}
|
},
|
idIndex: {
|
type: String,
|
default () {
|
return '1'
|
}
|
}
|
},
|
data() {
|
return {
|
isExpanded: false, // 控制搜索框是否展开
|
searchInput: '', // 搜索框输入的内容
|
menuNav: false,
|
dialogVisible: false
|
};
|
},
|
methods: {
|
// 修改密码
|
changePassword() {
|
uni.navigateTo({
|
url: '/pages/changePassword/changePassword'
|
})
|
},
|
aaa() {
|
console.log('ss');
|
},
|
handleSelect(index) {
|
console.log(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/zhongyi/zhongyi?id='+2
|
});
|
} else if (index === '3') {
|
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
|
});
|
}
|
},
|
// 搜索框的的移出
|
InputBlur() {
|
|
// this.isExpanded = !this.isExpanded;
|
// this.searchInput = '';
|
},
|
// 切换搜索框的展开和收起状态
|
toggleSearch() {
|
// console.log('撒旦范德萨发生的',this.searchInput);
|
this.isExpanded = !this.isExpanded;
|
this.$nextTick(() => {
|
if (this.searchInput.trim() !== '') {
|
console.log('搜索', this.searchInput);
|
} else {
|
console.log('不搜索');
|
}
|
|
this.searchInput = '';
|
console.log(this.isExpanded);
|
})
|
}
|
}
|
}
|
</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;
|
|
img {
|
width: .1rem;
|
height: .1rem;
|
vertical-align: middle;
|
}
|
|
.logo {
|
width: .32rem;
|
height: .32rem;
|
background: url(@/static/image/logo.png) 0 0 no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.NavTopr {
|
vertical-align: top;
|
|
img {
|
width: .34rem;
|
height: .34rem;
|
margin-right: .30rem;
|
vertical-align: middle;
|
}
|
}
|
}
|
|
.mImage {
|
width: 100%;
|
height: .2rem;
|
/* background-image: url(@/static/image/line.png); */
|
background-size: cover;
|
/* 背景图片覆盖整个元素 */
|
background-position: center;
|
}
|
|
|
|
|
|
.search-container {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 20rpx;
|
|
img {
|
margin: 0 !important;
|
margin-bottom: 4rpx !important;
|
}
|
}
|
|
.search-bar {
|
width: 160rpx;
|
/* 初始宽度 */
|
transition: width 0.3s ease;
|
/* 过渡动画 */
|
display: flex;
|
align-items: center;
|
position: relative;
|
border-radius: 5px;
|
overflow: hidden;
|
border-radius: 30rpx;
|
background-color: #fff;
|
}
|
|
.search-bar.expanded {
|
width: 100%;
|
/* 展开后的宽度 */
|
}
|
|
.search-input {
|
flex: 1;
|
/* 占据剩余空间 */
|
padding-left: 10rpx;
|
box-sizing: border-box;
|
/* border: 1rpx solid #fff; */
|
outline: none;
|
color: #000;
|
height: auto;
|
min-height: auto;
|
}
|
|
.search-logo {
|
width: .34rem;
|
/* logo图标的宽度 */
|
height: .34rem;
|
/* logo图标的高度 */
|
margin-left: 10rpx;
|
/* 与输入框之间的间距 */
|
cursor: pointer;
|
background-image: url(@/static/image/search.svg);
|
background-size: 100% 100%;
|
}
|
|
.leftListBg {
|
border-radius: 0;
|
|
.leftListBgImage {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
transform: scale(1.29);
|
}
|
}
|
|
.el-menu-vertical-demo {
|
border-right: 0 !important;
|
background-color: transparent;
|
}
|
|
::v-deep .el-menu .is-active {
|
background-color: #244A7B !important;
|
border-radius: .5rem;
|
|
/* padding: 0 .14rem !important; */
|
}
|
|
.el-menu-item {
|
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 {
|
padding-top: 0 !important;
|
}
|
|
::v-deep .el-dialog {
|
margin-top: 0 !important;
|
position: fixed;
|
top: 0;
|
left: 0;
|
height: 100vh;
|
width: 2.51rem;
|
}
|
|
::v-deep .el-dialog__header {
|
display: none;
|
}
|
|
/* ::v-deep .el-menu-vertical-demo */
|
</style>
|
