Zlpt_Portal/src/App.vue

<script setup lang="ts">
import FooterInfo from './compontents/FooterInfo/index.vue'
const router = useRouter()
const route = useRoute()
// const footFlag = ref(route.path.indexOf('/myuser/baseInfo') > -1)
const isMyInfoPage = () => {
  const currentPage = window.location.hash
  if (currentPage.indexOf("myuser/baseInfo") > -1) {
    return false
  }
}
onMounted(() => {

})

</script>


<template>
  <div class="shop-header">
    <div class="header-box">
      <ul class="header-wapper">
        <li>
          <span>
            登录
          </span>
        </li>
        <li>
          <span @click="$router.push({ name: 'myuser', query: { type: 'myuser' } })">
            个人中心
          </span>
        </li>
        <li>
          <img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="">
          <span>
            收藏夹
          </span>
        </li>
        <li>
          <img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="">
          <span class="last-span">
            手机版
          </span>
        </li>
      </ul>
    </div>

    <!-- 菜单 -->
    <div class="shop-menu-box">
      <div class="shop-menu">
        <div class="left-logo">
          <img src="@/assets/img/home/2023_12_01_beijing2/logo.png" alt="">
        </div>
        <input placeholder="输入设备关键词" type="text">
        <button class="search-btn">搜索</button>
        <div class="erweima">
          <div class="tilte">手机扫码登录</div>
          <img src="" alt="">
        </div>
      </div>
    </div>


  </div>

  <div class="container">
    <RouterView />
  </div>
  <!-- <FooterInfo v-if="isMyInfoPage()" /> -->
  <FooterInfo />
</template>


<style scoped lang="scss">
.container {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 30px;
  padding: 20px 30px;
  box-sizing: border-box;
}

.shop-header {
  height: 157px;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;

  .header-box {
    background-color: #F5F5F5;
    width: 100%;

    .header-wapper {
      width: 1200px;
      height: 37px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 37px;
        cursor: pointer;
        margin-left: 20px;


        span {
          color: #6D6D6D;
          font-size: 14px;
          // padding: 0 20px;
          padding: 0 20px 0 3px;
          border-right: 1px solid #666655;

          &:hover {
            color: #2282FF;
          }

        }

        .last-span {
          border: none;
        }

      }


    }
  }

  .shop-menu-box {
    background-color: #edeef6;

    .shop-menu {
      width: 1200px;
      height: 120px;
      margin: 0 auto;
      display: flex;
      align-items: center;


      .left-logo {
        color: #999999;
        font-weight: bold;
        font-size: 20px;

        img {
          width: 176px;
          height: 58px;
        }
      }



      input {
        width: 700px;
        height: 45px;
        border: 1px solid #5CA4FF;
        border-radius: 45px;
        margin-left: 70px;
        line-height: 45px;
        color: transparent;
        text-shadow: 0 0 0 #333;
        padding-left: 30px;
      }

      input:focus {
        outline: 1px solid #5CA4FF;
      }

      input::-webkit-input-placeholder {
        color: #949494;
      }

      .search-btn {
        width: 100px;
        height: 39px;
        transform: translateX(-110px);
        border-radius: 39px;
        background: linear-gradient(132deg, #6DE7FF 0%, #348CFF 100%);
        box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 18px;

      }


      .erweima {
        width: 100px;
        height: 80px;
        margin-left: -20px;
        padding: 10px;
        background-color: #fff;

        .tilte {
          font-size: 14px;
          color: #1F88FF;
          text-align: center;
        }
      }
    }

  }


}
</style>