<template>
|
<view class="headNav">
|
<view class="NavTop flex" :style="{ backgroundImage: 'url(' + bg + ')' }">
|
<view
|
class="santiaogang"
|
style="
|
width: 0.34rem;
|
height: 0.34rem;
|
margin-right: 3rem;
|
cursor: pointer;
|
"
|
title="导航菜单"
|
@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
|
style="margin-left: 0.19rem; font-size: 0.24rem; font-weight: 900"
|
>
|
{{ text }}
|
</view>
|
</view>
|
<view class="NavTopr flex">
|
<view
|
class="flex searchCss"
|
:style="{ backgroundColor: isExpanded == true ? '#fff' : '' }"
|
style="
|
border-radius: 0.5rem;
|
width: 2.33rem;
|
margin-right: 0.3rem;
|
justify-content: flex-end;
|
"
|
>
|
<input
|
:style="{ display: isExpanded == true ? 'block' : 'none' }"
|
type="text"
|
style="
|
margin-left: 0.02rem;
|
flex: 1;
|
background-color: #fff;
|
font-size: 0.13rem;
|
"
|
@blur="InputBlur"
|
@confirm="toggleSearch"
|
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>
|
<el-dropdown trigger="click" @command="handleCommand">
|
<!-- <view @click="iconClick(2)" class="s2 ss1 "></view> -->
|
<img
|
class="cursor"
|
@click="changePassword(1)"
|
src="@/static/image/profile.svg"
|
alt=""
|
/>
|
<el-dropdown-menu v-if="isCommand" slot="dropdown">
|
<el-dropdown-item command="1">修改密码</el-dropdown-item>
|
<el-dropdown-item command="2">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<img
|
class="cursor"
|
@click="changePassword(2)"
|
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 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 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>
|
import { getlogout } from "@/api/index.js";
|
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,
|
isCommand: true
|
};
|
},
|
methods: {
|
// 修改密码
|
changePassword(index) {
|
if (index == 1) {
|
// 检查 localStorage 中是否存在 token
|
if (localStorage.getItem("access_token")) {
|
// token 存在
|
this.isCommand = true;
|
} else {
|
// token 不存在
|
this.isCommand = false;
|
// uni.navigateTo({
|
// url: '/pages/Login/Login'
|
// })
|
uni.showModal({
|
// 询问用户是否退出登录
|
title: "请重新登录",
|
content: "您确定要重新登录吗?",
|
success: async (res) => {
|
if (res.confirm) {
|
setTimeout(() => {
|
uni.reLaunch({
|
url: "/pages/Login/Login"
|
});
|
}, 1500);
|
} else if (res.cancel) {
|
// console.log('用户点击取消');
|
}
|
}
|
});
|
}
|
// uni.navigateTo({
|
// url: '/pages/changePassword/changePassword'
|
// })
|
} else if (index == 2) {
|
console.log("帮助");
|
}
|
},
|
// 修改获取退出按钮
|
handleCommand(int) {
|
if (int == 1) {
|
uni.navigateTo({
|
url: "/pages/changePassword/changePassword"
|
});
|
} else if (int == 2) {
|
uni.showModal({
|
// 询问用户是否退出登录
|
title: "退出登录",
|
content: "您确定要退出登录吗?",
|
success: (res) => {
|
if (res.confirm) {
|
// 退出接口
|
getlogout().then((res) => {
|
//确定退出拿到token并清除token
|
let TOKEN = uni.getStorageSync("access_token");
|
uni.clearStorageSync();
|
//退出成功！并跳转到其他页面
|
this.$message.success("退出成功");
|
uni.reLaunch({
|
url: "/pages/Login/Login"
|
});
|
});
|
} else if (res.cancel) {
|
// console.log('用户点击取消');
|
}
|
}
|
});
|
}
|
},
|
handleSelect(index) {
|
if (index === "0") {
|
uni.navigateTo({
|
url: "/pages/index/index?id=" + 0
|
});
|
} else if (index === "1") {
|
uni.navigateTo({
|
url: "/pages/character/index?id=" + 1
|
});
|
} else if (index === "2") {
|
uni.navigateTo({
|
url: "/pages/inherit/index?id=" + 2
|
});
|
} else if (index === "3") {
|
uni.navigateTo({
|
url: "/pages/academicGenres/index?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() {
|
this.isExpanded = !this.isExpanded;
|
this.$nextTick(() => {
|
if (this.searchInput.trim() !== "") {
|
uni.navigateTo({
|
url:
|
"/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput
|
});
|
}
|
this.searchInput = "";
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.LeftLogo {
|
width: 100%;
|
margin: 0.52rem 0 0.5rem;
|
|
.img {
|
width: 0.52rem;
|
height: 0.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: 0.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: 0.5rem;
|
}
|
|
.LeftLogo .img {
|
background-image: url(@/static/image/logo.png);
|
}
|
}
|
|
::v-deep .uni-input-placeholder {
|
padding-left: 0.05rem;
|
}
|
|
.headNav {
|
/* 粘性定位 */
|
position: sticky;
|
top: 0;
|
z-index: 9;
|
}
|
|
.NavTop {
|
/* background-image: url("../../static/image/topBg.png"); */
|
background-size: 100% 100%;
|
padding: 0.16rem 0.24rem;
|
color: #fff !important;
|
|
img {
|
width: 0.1rem;
|
height: 0.1rem;
|
vertical-align: middle;
|
}
|
|
.logo {
|
width: 0.32rem;
|
height: 0.32rem;
|
background: url(@/static/image/logo.png) 0 0 no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.NavTopr {
|
vertical-align: top;
|
|
img {
|
width: 0.34rem;
|
height: 0.34rem;
|
margin-right: 0.3rem;
|
vertical-align: middle;
|
}
|
}
|
}
|
|
.mImage {
|
width: 100%;
|
height: 0.2rem;
|
/* background-image: url(@/static/image/line.png); */
|
background-size: cover;
|
/* 背景图片覆盖整个元素 */
|
background-position: center;
|
background-color: #fff;
|
}
|
|
.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: 0.34rem;
|
/* logo图标的宽度 */
|
height: 0.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: 0.5rem;
|
|
/* padding: 0 .14rem !important; */
|
}
|
|
.el-menu-item {
|
height: 0.34rem;
|
line-height: 0.3rem;
|
font-size: 0.16rem;
|
font-weight: 500;
|
margin: 0.13rem 0.14rem !important;
|
/* display: flex;
|
justify-content: center;
|
align-items: center; */
|
text-align: left;
|
padding-left: 0.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>
|
