三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 components/headNav/headNav.vue

@@ -1,26 +1,34 @@
<template>
   <view>
   <view class="headNav">
      <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
         <view class="" style="width: .34rem;height: .34rem;" @click="menuNav = !menuNav"><img
         <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="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  
                      src=""></img> -->
                     <view class="search-logo" @click="toggleSearch" style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
                  <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/profile.svg" alt="" />
            <img @click="changePassword" src="@/static/image/profile.svg" alt="" />
            <img src="@/static/image/quote.svg" style="margin-right: 0;" alt="" />
         </view>
      </view>
@@ -29,28 +37,29 @@
         <!-- 背景 -->
         <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: .52rem 0 .46rem 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;">
               <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>
@@ -67,6 +76,18 @@
   export default {
      name: "headNav",
      props: {
         text:{
            type:String,
            default () {
               return '标题'
            }
         },
         searchBg :{
            type: Boolean,
            default () {
               return true
            }
         },
         bg: {
            type: String,
            default () {
@@ -77,6 +98,12 @@
            type: String,
            default () {
               return '/static/image/line.png'
            }
         },
         idIndex: {
            type: String,
            default () {
               return '1'
            }
         }
      },
@@ -89,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'
               // });
               uni.navigateTo({
                  url: '/pages/dataDisplay/dataDisplay?id=' + 3
               });
            } else if (index === '4') {
               // uni.navigateTo({
               //   url: '/pages/option3Page'
               // });
               uni.navigateTo({
                  url: '/pages/territory/territory?id=' + 4
               });
            } else if (index === '5') {
               // uni.navigateTo({
               //   url: '/pages/option3Page'
               // });
            } else if (index === '6') {
               // uni.navigateTo({
               //   url: '/pages/option3Page'
               // });
               uni.navigateTo({
                  url: '/pages/TcmSystem/TcmSystem?id=' + 5
               });
            }
         },
         // 搜索框的的移出
@@ -128,7 +161,7 @@
         },
         // 切换搜索框的展开和收起状态  
         toggleSearch() {
            console.log(this.searchInput);
            // console.log('撒旦范德萨发生的',this.searchInput);
            this.isExpanded = !this.isExpanded;
            this.$nextTick(() => {
               if (this.searchInput.trim() !== '') {
@@ -146,8 +179,60 @@
</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;
@@ -266,20 +351,22 @@

   ::v-deep .el-menu .is-active {
      background-color: #244A7B !important;
      border-radius: 30px;
      border-radius: .5rem;

      /* padding: 0 .14rem !important; */
   }

   .el-menu-item {
      height: .34rem;
      line-height: .3rem;
      font-size: .16rem;
      text-align: center;
      font-weight: 500;
      margin:  .13rem .14rem !important;
      display: flex;
      margin: .13rem .14rem !important;
      /*    display: flex;
      justify-content: center;
      align-items: center;
      align-items: center; */
      text-align: left;
      padding-left: .4rem !important;
   }

   ::v-deep .el-dialog__body {