Zlpt_Portal/src/App.vue

<template>
  <div class="shop-header">
    <div class="header-box">
      <div class="header-wapper">
        <a>登录</a>
        <!-- <a>注册</a> -->
        <a @click="$router.push('/myuser')">个人中心</a>
        <a>收藏夹</a>
        <a>手机版</a>
      </div>
    </div>

    <!-- 菜单 -->
    <div class="shop-menu">
      <div class="left-logo">
        <img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
      </div>
      <input placeholder="输入设备关键词" type="text">
      <div class="erweima">二维码占位</div>
    </div>
  </div>

  <RouterView />
</template>
<script setup lang="ts">
</script>

<style scoped lang="scss">
.shop-header {
  height: 157px;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;

  .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;


      a {
        color: #6D6D6D;
        font-size: 14px;
        padding: 0 20px;
        border-right: 1px solid #666655;
        cursor: pointer;

        &:last-child {
          border: none;
        }

        &:hover {
          color: #2282FF;
        }
      }
    }
  }



  .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;
      // margin-left: 190px;
    }

    .erweima {
      width: 80px;
      height: 80px;
      line-height: 80px;
      margin-left: 30px;
      background-color: skyblue;
    }
  }
}
</style>