Pad_New/src/pages/home/index.vue

<template>
  <!-- <div class="page_home">
    <div class="top">
      <div class="header">
        <img src="../../assets/images/hospital.png" alt />
        <van-dropdown-menu>
          <van-dropdown-item v-model="value" :options="hospitals" />
        </van-dropdown-menu>
      </div>
      <div class="search" @click="ToSearch()">
        <el-input
          placeholder=" 姓名 / 首拼 / 透析号"
          prefix-icon="el-icon-search"
          v-model="searchVal"
        ></el-input>
      </div>
      <div class="banner">
        <img src="../../assets/images/homebanner.jpg" alt />
      </div>
      <div class="myDesk">
        <h2>我的工作台</h2>
        <div class="list">
          <ul class="all">
            <li class="one">
              <img src="../../assets/images/m09.png" alt />
              <p @click="patientManagement()">病人管理</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m02.png" alt />
              <p>透析记录</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m04.png" alt />
              <p>质控分析</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m05.png" alt />
              <p>院感管理</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m06.png" alt />
              <p>微商城</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m07.png" alt />
              <p>微官网</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m08.png" alt />
              <p>医院二维码</p>
            </li>
            <li class="one">
              <img src="../../assets/images/m03.png" alt />
              <p>基础配置</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="tab">
      <div class="btn">
        <i class="iconfont icon-zhuye"></i>
        <span>首页</span>
      </div>
      <div class="btn">
        <i class="iconfont icon-wode"></i>
        <span>我的</span>
      </div>
    </div>

  </div>-->
  <div class="page_home">
    <div>
      <router-view />
    </div>
    <div class="homeBottom">
      <van-tabbar class="tab" v-model="active">
        <router-link to="/homeIndex" class="link" replace>
          <van-tabbar-item>
            <i class="iconfont icon-zhuye iconOne"></i>
            <div>首页</div>
          </van-tabbar-item>
        </router-link>
        <!--<router-link to="/active">-->
          <!--<van-tabbar-item>-->
            <!--<i class="iconfont icon-jishiben iconOne"></i>-->
            <!--<div>致敬医护</div>-->
          <!--</van-tabbar-item>-->
        <!--</router-link>-->
        <!--<router-link to="/service">-->
          <!--<van-tabbar-item>-->
            <!--<i class="iconfont icon-fuwu2 iconOne"></i>-->
            <!--<div>服务</div>-->
          <!--</van-tabbar-item>-->
        <!--</router-link>-->
<!--        <router-link to="/shop" replace>-->
<!--          <van-tabbar-item>-->
<!--            <i class="iconfont icon-shangcheng iconOne"></i>-->
<!--            <div>商城</div>-->
<!--          </van-tabbar-item>-->
<!--        </router-link>-->
        <router-link to="/newMy" replace>
          <van-tabbar-item>
            <i class="iconfont icon-wode iconOne"></i>
            <div>我的</div>
          </van-tabbar-item>
        </router-link>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import "../../styles/newStyle.scss";
import { setRem } from "@/libs/functionRem";
export default {
  data() {
    return {
      active: 0,
      value: "",
      hospitals: [
        {
          text: "",
          value: 0
        }
      ],
      searchVal: ""
    };
  },
  methods: {
    // patientManagement() {
    //   var id = this.$route.query.id;
    //   this.$router.push("/patientmanagement?id=" + id);
    // },
    // ToSearch() {
    //   this.$router.push("/search");
    // }
  },
  created() {
    const id = this.$route.query.id;
    // this.getAllOrgName(id);
    setRem();

  },
  mounted(){
    let currenttabbar = window.location.hash.split("/")[1]
     if (currenttabbar === 'homeIndex') {
      this.active = 0
    } else if (currenttabbar === 'newMy') {
      this.active = 2
    } else if (currenttabbar === 'active') {
      this.active = 1
    }
  }
};
</script>

<style lang="scss">
.page_home {
  height: 100%;
  display: flex;
  flex-direction: column;
  > div:first-child {
    flex: 1;
    overflow-y: auto;
  }
  .homeBottom {
    height: 3.125rem;
    padding-bottom: env(safe-area-inset-bottom);
  }
  ::-webkit-scrollbar {
    width: 0;
  }
  .van-tabbar-item {
    height: 100%;
  }
  .van-tabbar-item__text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .van-tabbar {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #e5e5e5;
  }
  .iconOne {
    font-size: 1.25rem;
  }
  .van-tabbar-item--active {
    .iconfont {
      color: #1989fa;
    }
  }

  // .header {
  //   padding: 0 15px;
  //   box-sizing: border-box;
  //   height: 3.125rem;
  //   width: 100%;
  //   line-height: 3.125rem;
  //   img {
  //     float: left;
  //     width: 1.375rem;
  //     height: 1.375rem;
  //     margin-top: 0.625rem;
  //   }
  //   .van-dropdown-menu {
  //     width: 8.5rem;
  //     height: 3.125rem;
  //   }
  //   .van-dropdown-menu__item {
  //     flex: none;
  //   }
  //   .van-ellipsis {
  //     width: 6.25rem;
  //     height: 3.125rem;
  //     line-height: 3.125rem;
  //     font-size: 0.875rem;
  //     white-space: nowrap;
  //     text-overflow: ellipsis;
  //     overflow: hidden;
  //   }
  // }
  // .search {
  //   width: 21.5625rem;
  //   height: 2.125rem;
  //   padding: 0 15px;
  //   box-sizing: border-box;
  //   .el-input__inner {
  //     width: 21.5625rem;
  //     height: 2.125rem;
  //     border: none;
  //     background: rgba(244, 244, 244, 1);
  //     border-radius: 17px;
  //     color: #999999;
  //   }
  //   .el-input__prefix {
  //     margin-top: -0.125rem;
  //     color: #999999;
  //   }
  // }
  // .banner {
  //   overflow: hidden;
  //   margin-top: 1.25rem;
  //   // width: 21.4375rem;
  //   // height: 8.3125rem;
  //   // border-radius: 10px;
  //   width: 23.4375rem;
  //   height: 8.3125rem;
  //   // background: rgba(188, 188, 188, 0.1);
  //   // opacity: 0.2;
  //   img {
  //     margin: 0 15px;
  //     width: 21.4375rem;
  //     height: 8.3125rem;
  //     box-sizing: border-box;
  //   }
  // }
  // .myDesk {
  //   padding: 0 15px;
  //   box-sizing: border-box;
  //   padding-top: 1.5625rem;
  //   width: 23.4375rem;
  //   height: 17.0625rem;
  //   // background: rgba(188, 188, 188, 0.1);
  //   h2 {
  //     height: 1.1875rem;
  //     font-size: 1.25rem;
  //     font-weight: 600;
  //     color: rgba(0, 0, 0, 1);
  //     line-height: 0.9375rem;
  //   }
  //   .list {
  //     margin-top: 0.9375rem;
  //     width: 21.4375rem;
  //     height: 14rem;
  //     background: rgba(255, 255, 255, 1);
  //     border-radius: 10px;
  //     box-shadow: 0px 3px 12px 0px rgba(188, 188, 188, 0.2);
  //     display: flex;
  //     align-items: center;
  //     .all {
  //       display: flex;
  //       justify-content: space-around;
  //       flex-wrap: wrap;
  //     }
  //     .one {
  //       width: 25%;
  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;
  //       justify-content: space-around;
  //       height: 6.25rem;
  //       img {
  //         width: 2.8125rem;
  //         height: 2.8125rem;
  //       }
  //       p {
  //         margin-top: -0.625rem;
  //         height: 0.8125rem;
  //         font-size: 0.8125rem;
  //         color: rgba(60, 60, 60, 1);
  //         line-height: 0.9375rem;
  //       }
  //     }
  //   }
  // }
  // .tab {
  //   display: flex;
  //   width: 23.4375rem;
  //   height: 3.0625rem;
  //   background: rgba(255, 255, 255, 1);
  //   justify-content: space-around;
  //   box-shadow: 3px 0px 12px 3px rgba(188, 188, 188, 0.2);

  //   > div:last-child {
  //     span {
  //       color: #bfbfbf;
  //     }
  //   }
  //   .btn {
  //     display: flex;
  //     flex-direction: column;
  //     align-items: center;
  //     align-self: center;
  //     i {
  //       font-size: 1.5rem;
  //       color: rgba(79, 115, 254, 1);
  //     }
  //     .icon-wode {
  //       color: #bfbfbf;
  //     }

  //     span {
  //       font-size: 0.75rem;
  //       color: rgba(79, 115, 254, 1);
  //       margin-top: 0.25rem;
  //     }
  //   }
  // }
}
</style>