<template>
|
<el-container>
|
<!-- 头部 -->
|
<el-header>
|
<view style="
|
display: flex;
|
height: 50px;
|
width: 100%;
|
justify-content: space-between;
|
align-items: center;
|
background-color: #C98A49;
|
">
|
<view class="header-one" style="padding-left: 1.5%; ">
|
<i class="el-icon-s-unfold" style="font-size: 24px;"></i>
|
</view>
|
<view class="header-two" style="font-size: 20px; color: aliceblue">
|
中医世医传承数据库
|
</view>
|
<view class="header-three">
|
<view>
|
<i class="el-icon-search" style="font-size: 24px; "></i>
|
<i class="el-icon-question" style="font-size: 24px;"></i>
|
<i class="el-icon-user-solid" style="font-size: 24px;"></i>
|
</view>
|
</view>
|
</view>
|
<view class="huawenimg">
|
</view>
|
</el-header>
|
<!-- 主体部分 -->
|
<el-main>
|
<view style="
|
display: flex;
|
justify-content: center;
|
border-bottom: 1px solid gray;">
|
<view style="display: flex; justify-content: flex-start; margin-right: auto">
|
<el-button class="button" @click="hideNodesAndLinks()">返回</el-button>
|
</view>
|
<!-- 添加一个flex容器来包裹el-menu，并设置其flex属性以占据剩余空间 -->
|
<view style="display: flex; justify-content: center; flex: 1;">
|
<!-- 这里是菜单的切换 -->
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
|
@select="handleSelect">
|
<el-menu-item index="1" class="small-menu-item">
|
<router-link to="zhongyione" class="router-link-active">
|
世医传承</router-link>
|
</el-menu-item>
|
<el-menu-item index="2" class="small-menu-item">
|
<router-link to="zhongyitwo" class="router-link-active">
|
世医文化</router-link></el-menu-item>
|
</el-menu>
|
</view>
|
</view>
|
<router-view>
|
</router-view>
|
</el-main>
|
</el-container>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
export default {
|
data() {
|
return {
|
activeIndex:1
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.huawenimg {
|
display: flex;
|
width: 100%;
|
height: 20px;
|
background-image: url('https://img2.baidu.com/it/u=4259428193,1811830338&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710954000&t=bf5d6b76e71d6e508efef90cf933ea05');
|
background-repeat: repeat-x;
|
/* 水平平铺 */
|
background-size: auto 100%;
|
/* 设置背景图片高度与容器一致，宽度自适应 */
|
border-bottom: 2px solid #C98A49;
|
/* 设置橙色的下边框，宽度为2px */
|
}
|
|
/* 给返回按钮设置样式 */
|
.button {
|
border: none !important;
|
/* 取消边框 */
|
color: #C98A49 !important;
|
/* 字体颜色 */
|
background-color: transparent !important;
|
;
|
/* 设置背景为透明 */
|
}
|
|
.small-menu-item {
|
border-bottom: 1px solid #EA7A28 !important;
|
/* 橙色的边框 */
|
font-size: 15px !important;
|
/* 调整字体大小 */
|
padding: 0px 5px 0px 0px !important;
|
/* 调整内边距 */
|
margin: 0px 0px 0px 0px !important;
|
/* 其他你想要的样式 */
|
}
|
|
/* 设置el-menu的背景颜色为透明 */
|
.el-menu-demo {
|
border-bottom: 1px solid #EA7A28 !important;
|
/* 橙色的边框 */
|
background-color: transparent !important;
|
/* 使用!important来确保覆盖默认样式 */
|
}
|
|
/* 伪类（鼠标选中时的样式） */
|
.el-menu-item:hover {
|
/* 当鼠标悬停在菜单项上时 */
|
background-color: #EA7A28 !important;
|
/* 设置背景色为橙色，并使用 !important 来确保覆盖其他样式 */
|
color: white !important;
|
;
|
/* 可能还需要设置文本颜色以确保可读性 */
|
}
|
|
/* 设置el-menu-item在选中时的背景颜色为橙色 */
|
.el-menu-item.is-active {
|
color: #FDFCFD !important;
|
;
|
background-color: #EA7A28 !important;
|
/* 使用!important来确保覆盖默认样式 */
|
border-bottom: 1px solid #EA7A28 !important;
|
/* 在底部添加橙色的边框 */
|
}
|
|
/* 如果你希望链接在被选中时也有橙色背景，你可能还需要覆盖router-link的样式 */
|
.router-link-active.is-active {
|
color: #FDFCFD !important;
|
/* 使用!important来确保覆盖默认样式 */
|
/* background-color: #EA7A28 !important; */
|
}
|
</style>
|
