<template>
|
<view>
|
<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="logo"></view>
|
<view class="" style="margin-left: 26rpx;font-size: 30rpx;font-family: cursive;font-weight: 900;">中医医事制度
|
</view>
|
</view>
|
<view class="NavTopr flex">
|
<view class="search-container" style="">
|
<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>
|
</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="" />
|
</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" style="justify-content: center;margin: 90rpx 0;">
|
<img src="@/static/image/logo.png" style="width: 100rpx;height: 100rpx;"></img>
|
</view>
|
<el-menu default-active="1" 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>
|
<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-item index="6">
|
<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: {
|
bg:{
|
type:String,
|
default(){
|
return '/static/image/topBg.png'
|
}
|
},
|
bg1:{
|
type:String,
|
default(){
|
return '/static/image/line.png'
|
}
|
}
|
},
|
data() {
|
return {
|
isExpanded: false, // 控制搜索框是否展开
|
searchInput: '', // 搜索框输入的内容
|
menuNav: false,
|
dialogVisible: false
|
};
|
},
|
methods: {
|
aaa() {
|
console.log('ss');
|
},
|
handleSelect(index) {
|
console.log(index);
|
if (index === '1') {
|
// uni.navigateTo({
|
// url: '/pages/index/index'
|
// });
|
} else if (index === '2') {
|
// uni.navigateTo({
|
// url: '/pages/option2Page'
|
// });
|
} 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'
|
// });
|
}
|
},
|
// 搜索框的的移出
|
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>
|
.NavTop {
|
/* background: url(@/static/image/topBg.png); */
|
background-size: 100% 100%;
|
padding: 25rpx;
|
color: #fff !important;
|
|
img {
|
width: 30rpx;
|
height: 30rpx;
|
vertical-align: middle;
|
}
|
|
.logo {
|
width: 40rpx;
|
height: 40rpx;
|
background: url(@/static/image/logo.png) 0 0 no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.NavTopr {
|
vertical-align: top;
|
|
img {
|
margin-right: 20rpx;
|
vertical-align: middle;
|
}
|
}
|
}
|
|
.mImage {
|
width: 100%;
|
height: 30rpx;
|
/* 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: 30rpx;
|
/* logo图标的宽度 */
|
height: 30rpx;
|
/* logo图标的高度 */
|
margin-left: 10rpx;
|
/* 与输入框之间的间距 */
|
cursor: pointer;
|
}
|
|
.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: 30px;
|
}
|
|
.el-menu-item {
|
line-height: 40px;
|
height: 40px;
|
margin: 20rpx 0;
|
|
span {
|
vertical-align: top;
|
}
|
}
|
::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;
|
}
|
::v-deep .el-dialog__header{
|
display: none;
|
}
|
</style>
|
