foster-pc-vue/src/views/deliciousPage/components/header.vue

<template>
  <div class="header">
    <div class="bg"></div>
    <div class="logo center">
      <img src="@/assets/images/delicious/logo.png" alt="" />
      <span>飞鸟有味</span>
    </div>
    <div class="tabs center">
      <div
        :class="['tab-item center', { active: index === active }]"
        @click="handleActive(index)"
        v-for="(item, index) in tabs"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="search">
      <el-input
        v-model="input"
        prefix-icon="Search"
        style="width: 340px"
        placeholder="搜索水果名称/地区"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const active = ref(0);
const tabs = ["首页","有味介绍", "有味指数", "地理风物", "关于我们"];

const handleActive = (i) => {
  active.value = i;
};

const input = ref("");
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #eb8e8e 0%, #ffeeef 80%);
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
  .center {
    display: flex;
    align-items: center;
  }
  .logo {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
    margin-right: 70px;
    img {
      width: 30px;
      height: 30px;
      margin: 0 20px 0 30px;
    }
    span {
      font-family: "PangMenZhengDao";
    }
  }
  .tabs {
    height: 100%;
    position: relative;
    z-index: 2;
    margin-right: 30px;
    .tab-item {
      font-weight: 400;
      font-size: 20px;
      width: 110px;
      height: 100%;
      justify-content: center;
      text-align: center;
      margin-right: 33px;
      cursor: pointer;
      font-family: "PangMenZhengDao";
      &.active {
        background: #fff;
        color: #f56d83;
      }
    }
  }
  .search {
    ::v-deep {
      .el-input__wrapper {
        box-shadow: none;
        border-radius: 20px;
      }
    }
  }
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: url("@/assets/images/delicious/header-bg.png") no-repeat center
      center / 100% 100%;
  }
}
</style>