饿了么顶部栏

 navbar  顶部栏

<template>

  <nav :style="'background-image:url(' + sell.avatar + ' )'">

    <div class="background">

      <img class="img" :src="sell.avatar" alt="" />

      <div class="info">

        <img class="type" src="@/assets/img/brand@2x.png" alt="" />

        <p class="name">{{ sell.name }}</p>

        <p class="time">

          <span>{{ sell.description }} </span> /

          <span>{{ sell.deliveryTime }}分钟送达 </span>

        </p>

        <div class="discount">

          <img src="@/assets/img/decrease_1@2x.png" alt="" />

          <p class="ing">

            {{ sell.supports ? sell.supports[0].description : "" }}

          </p>

        </div>

        <p class="more">5个 ></p>

      </div>

      <div class="notice">

        <span>公告</span>

        <span class="goods">{{ sell.bulletin }} </span>

        <span>></span>

      </div>

    </div>

  </nav>

</template>

<script>

import axios from "axios";

import { getSellData } from "@/axios/index.js";

import bus from "@/eventBus.js";

export default {

  data() {

    return {

      sell: [],

    };

  },

  watch: {

    sell() {

       this.sendSell();

      this.$store.commit("changeSell", this.sell);

    },

  },

  methods: {

    sendSell() {

      bus.$emit("shareSell", this.sell);

    },

  },

  created() {

    getSellData().then(

      (res) => {

        this.sell = res.data.data;

      },

      (err) => {

        console.log(err);

      }

    );

  },

};

</script>

<style lang="less" scoped>

nav {

  height: 180px;

  width: 100%;

  position: fixed;

  background-repeat: no-repeat;

  background: rgba(7, 17, 27, 0.5);

  background-size: cover;

  overflow: hidden;

  color: #fff;

  .background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 30;

    background: rgba(7, 17, 27, 0.5);

    backdrop-filter: blur(10px);

  }

  .img {

    width: 80px;

    height: 80px;

    float: left;

    margin-top: 30px;

    margin-left: 24px;

  }

  .info {

    float: left;

    width: 250px;

    position: relative;

    .type {

      width: 36px;

      margin-top: 30px;

      margin-left: 16px;

      float: left;

    }

    .name {

      font-size: 16px;

      font-weight: bold;

      margin-left: 65px;

      margin-top: 30px;

    }

    .time {

      margin-left: 16px;

      font-size: 14px;

      margin-top: 15px;

    }

    .discount {

      margin-left: 16px;

      margin-top: -5px;

      img {

        margin-top: -3px;

        width: 20px;

        float: left;

      }

      .ing {

        margin-top: 20px;

        font-size: 12px;

        margin-left: 30px;

      }

    }

    .more {

      float: right;

      margin-top: -25px;

      margin-right: -30px;

      width: 60px;

      height: 40px;

      background-color: rgba(0, 0, 0, 0.2);

      border-radius: 20px;

      text-align: center;

      line-height: 40px;

      font-size: 12px;

    }

  }

  .notice {

    width: 100%;

    height: 35px;

    position: absolute;

    line-height: 35px;

    bottom: 0;

    background-color: rgba(7, 17, 27, 0.2);

    overflow: hidden;

    span:nth-of-type(1) {

      margin-left: 30px;

      font-size: 12px;

      position: absolute;

      left: -20px;

      background-color: #fff;

      color: black;

      height: 20px;

      display: inline-block;

      font-weight: 700;

      line-height: 20px;

      margin-top: 7px;

    }

    .goods {

      white-space: nowrap;

      width: 80%;

      display: inline-block;

      overflow: hidden;

      text-overflow: ellipsis;

      margin-left: 40px;

      font-size: 12px;

    }

    span:nth-of-type(3) {

      position: absolute;

      right: 5px;

    }

  }

}

</style>