Zlpt_Portal/src/App.vue

<script setup lang="ts">
import FooterInfo from './compontents/FooterInfo/index.vue'
const route = useRoute()


// 判断是否是个人中心页面 如果是则隐藏页脚
const isMyInfoPage = () => {
  if (route.path.indexOf("myuser") === -1) {
    return true
  } else {
    return false
  }
}


// 搜索查询绑定值
const keywordIptValue = ref('')

// 输入框下方历史搜索记录
const searchHistoryList = ref(
  [
    { name: '220E履带挖掘机' },
    { name: '3443挖掘机' },
    { name: '塔式起重机' },
    { name: '轮式牵引铲运机' },
  ]
)

// 搜索按钮
const searchKeywordBtn = () => {

  console.log('搜索关键字', keywordIptValue.value);

}

// 点击下方搜索记录时 
const handleHistory = (hisValue: any) => {
  keywordIptValue.value = hisValue
}


onMounted(() => {

})

</script>


<template>
  <div class="shop-header">
    <div class="header-box">
      <ul class="header-wapper">
        <li>
          <span>
            <a href="">登录</a>/
            <a href="" style="color:#6D6D6D">注册</a>
          </span>
        </li>
        <li>
          <span @click="$router.push({ name: '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" @click="$router.push('/home')">
          <!-- 首页Logo -->
          <img src="@/assets/img/home/2023_12_01_beijing2/logo.png" alt="首页" title="首页">
        </div>
        <input placeholder="输入设备关键词" type="text" v-model="keywordIptValue">
        <button class="search-btn" @click="searchKeywordBtn">搜索</button>
        <div class="erweima">
          <div class="tilte">手机扫码登录</div>
          <img src="" alt="">
        </div>


        <div class="ipt-down">
          <a @click="handleHistory(item.name)" v-for="item in searchHistoryList" :key="item.name">{{ item.name }}</a>
        </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 0 3px;
          border-right: 1px solid #666655;

          &:hover {
            color: #2282FF;
          }

          a {
            text-decoration: none;
            color: #2282FF;
          }

        }

        .last-span {
          border: none;
          padding: 0;

        }

      }


    }
  }

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

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


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

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



      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 {
        // display: none;
        width: 100px;
        height: 80px;
        margin-left: -20px;
        padding: 10px;
        background-color: #fff;

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

      .ipt-down {
        position: absolute;
        bottom: 20px;
        left: 22%;
        overflow: hidden;

        a {
          padding: 0 10px;
          color: #727272;
          font-size: 14px;
          cursor: pointer;
        }
      }

    }

  }


}
</style>