Zlpt_Portal/src/App.vue

<script setup lang="ts">
import FooterInfo from './compontents/FooterInfo/index.vue'
</script>


<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-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">
        <div class="erweima">二维码占位</div>
      </div>
    </div>


  </div>

  <div class="container">
      <RouterView />
  </div>

  <FooterInfo />
</template>


<style scoped lang="scss">
.container{
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.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;


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

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

  }


}
</style>