第二次提交

mh-two-thousand-and-two

2024-03-29 d27fbd63d7840787d7f3ca5333b6e24dc3a860d4

 components/headNav/headNav.vue

@@ -1,24 +1,27 @@
<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="" style="width: .34rem;height: .34rem;" @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: 26rpx;font-size: 30rpx;font-family: cursive;font-weight: 900;">中医医事制度
            <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
               中医医事制度
            </view>
         </view> 
         <view class="NavTopr flex">
            <view class="search-container" style="">
            <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 style="background-color: #000;border-radius: 50%;margin-top: -4rpx;" class="search-logo"
                     @click="toggleSearch" src="@/static/image/search.png"></img>
                  <!-- <img  
                      src=""></img> -->
                     <view class="search-logo" @click="toggleSearch" style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
               </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="" />
            <img 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>
@@ -26,7 +29,7 @@
         <!-- 背景 -->
         <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;">
            <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>
            <el-menu default-active="1" active-text-color="#ffffff" class="el-menu-vertical-demo"
@@ -146,18 +149,18 @@
   .NavTop {
      /* background: url(@/static/image/topBg.png); */
      background-size: 100% 100%;
      padding: 25rpx;
      padding: .16rem .24rem;
      color: #fff !important;

      img {
         width: 30rpx;
         height: 30rpx;
         width: .1rem;
         height: .1rem;
         vertical-align: middle;
      }

      .logo {
         width: 40rpx;
         height: 40rpx;
         width: .32rem;
         height: .32rem;
         background: url(@/static/image/logo.png) 0 0 no-repeat;
         background-size: 100% 100%;
      }
@@ -166,7 +169,9 @@
         vertical-align: top;

         img {
            margin-right: 20rpx;
            width: .34rem;
            height: .34rem;
            margin-right: .30rem;
            vertical-align: middle;
         }
      }
@@ -174,7 +179,7 @@

   .mImage {
      width: 100%;
      height: 30rpx;
      height: .2rem;
      /* background-image: url(@/static/image/line.png); */
      background-size: cover;
      /* 背景图片覆盖整个元素 */
@@ -230,13 +235,15 @@
   }

   .search-logo {
      width: 30rpx;
      width: .34rem;
      /* logo图标的宽度 */
      height: 30rpx;
      height: .34rem;
      /* logo图标的高度 */
      margin-left: 10rpx;
      /* 与输入框之间的间距 */
      cursor: pointer;
      background-image: url(@/static/image/search.svg);
      background-size: 100% 100%;
   }

   .leftListBg {
@@ -260,29 +267,37 @@
   ::v-deep .el-menu .is-active {
      background-color: #244A7B !important;
      border-radius: 30px;

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

   .el-menu-item {
      line-height: 40px;
      height: 40px;
      margin: 20rpx 0;
      height: .34rem;
      font-size: .16rem;
      text-align: center;
      font-weight: 500;
      margin:  .13rem .14rem !important;
      display: flex;
      justify-content: center;
      align-items: center;
   }

      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;
      width: 2.51rem;
   }

   ::v-deep .el-dialog__header{
      display: none;
   }

   /* ::v-deep .el-menu-vertical-demo */
</style>