饿了么商家信息页面

<template>

  <div class="business">

    <div class="top">

      <div class="name">

        <h3>{{ sell.name }}</h3>

        <Star :score="sell.score" />

        <span class="rating">({{ sell.ratingCount }})</span>

        <span class="count">月售{{ sell.sellCount }}单</span>

        <p>

          <span

            class="iconfont icon-xiai"

            :class="{ changeState }"

            @click="changeState = !changeState"

          ></span>

          <span class="like">已收藏</span>

        </p>

      </div>

      <div class="sell">

        <div class="item">

          <p>起送价</p>

          <span class="price">{{ sell.minPrice }}</span>

          <span>元</span>

        </div>

        <div class="item">

          <p>商家起送</p>

          <span class="price">{{ sell.deliveryPrice }}</span>

          <span class="yuans">元</span>

        </div>

        <div class="item">

          <p>平均配送时间</p>

          <span class="price">{{ sell.deliveryTime }}</span>

          <span>分钟</span>

        </div>

      </div>

    </div>

    <div class="notices">

      <h3>公告与活动</h3>

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

      <ul>

        <li>

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

          <p>{{ sell.supports ? sell.supports[0].description : "" }}</p>

        </li>

        <li>

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

          <p>{{ sell.supports ? sell.supports[1].description : "" }}</p>

        </li>

        <li>

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

          <p>{{ sell.supports ? sell.supports[2].description : "" }}</p>

        </li>

        <li>

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

          <p>{{ sell.supports ? sell.supports[3].description : "" }}</p>

        </li>

        <li>

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

          <p>{{ sell.supports ? sell.supports[4].description : "" }}</p>

        </li>

      </ul>

    </div>

    <div class="scences">

      <h3>商家实景</h3>

      <div class="scence">

        <div v-for="(item, index) in sell.pics" :key="index">

          <img :src="item" alt="" />

        </div>

      </div>

    </div>

    <div class="message">

      <h3>商家信息</h3>

      <ul>

        <li v-for="(info, index) in sell.infos" :key="index">{{ info }}</li>

      </ul>

    </div>

  </div>

</template>

<script>

import Star from "@/components/Star.vue";

export default {

  name: "business",

  data() {

    return {

      sell: [],

      changeState: true,

    };

  },

  components: {

    Star,

  },

  created() {

    this.sell = this.$store.state.esell;

    //  console.log(this.sell);

  },

};

</script>

<style lang="less" scoped>

.business {

  width: 100vw;

  height: 100vh;

  background-color: #f3f5f7;

  overflow-y: scroll;

  // top: 250px;

}

.top {

  //  position: fixed;

  background-color: #fff;

  box-sizing: border-box;

  padding: 18px;

  border-bottom: 2px solid rgba(15, 16, 18, 0.1);

  margin-bottom: 18px;

  .name {

    height: 81px;

    position: relative;

    width: 330px;

    border-bottom: 1px solid rgba(13, 14, 15, 0.1);

    .star {

      width: 120px;

      float: left;

    }

    .iconfont {

      font-size: 24px;

      position: absolute;

      right: 0;

      top: -2px;

    }

    .like {

      position: absolute;

      right: -5px;

      top: 24px;

      font-size: 12px;

      color: rgb(77, 85, 93);

    }

    .rating {

      bottom: 6px;

      position: absolute;

      font-size: 12px;

      color: rgb(77, 85, 93);

    }

    .count {

      position: absolute;

      margin-left: 30px;

      bottom: 6px;

      font-size: 12px;

      color: rgb(77, 85, 93);

    }

  }

  .sell {

    width: 100%;

    box-sizing: border-box;

    padding: 18px;

    padding-left: 0;

    display: flex;

    justify-content: space-around;

    .item {

      height: 60px;

      position: relative;

      width: 220px;

      text-align: center;

      border-right: 1px solid rgba(13, 14, 15, 0.1);

      p {

        left: 30px;

        color: rgb(147, 153, 159);

        font-size: 12px;

        height: 16px;

        position: absolute;

        top: 10px;

        line-height: 16px;

      }

      .price:nth-of-type(1) {

        left: 20px;

      }

      .price {

        position: absolute;

        bottom: -10px;

        left: 25px;

        font-size: 24px;

        font-weight: 700;

      }

      .yuans {

        margin-left: 0;

      }

      span {

        position: absolute;

        bottom: -14px;

        // right: 30px;

        font-size: 12px;

        margin-left: 10px;

      }

    }

    .item:nth-of-type(3) {

      border-right: 0;

    }

  }

}

.notices {

  border-top: 1px solid rgba(13, 14, 15, 0.1);

  margin-bottom: 18px;

  background-color: #fff;

  width: 100%;

  padding: 18px;

  box-sizing: border-box;

  //   height: 900px;

  .bulletin {

    margin-top: 10px;

    font-size: 12px;

    color: rgb(240, 20, 20);

    line-height: 24px;

    height: 110px;

    border-bottom: 1px solid rgba(13, 14, 15, 0.1);

  }

  ul {

    font-size: 12px;

    li {

      height: 48px;

      font-size: 14px;

      line-height: 48px;

      position: relative;

      margin-bottom: 12px;

      // margin-left: 40px;

      border-bottom: 1px solid rgba(13, 14, 15, 0.1);

      img {

        height: 16px;

        margin-bottom: 5px;

        position: absolute;

        top: 15px;

        left: 5px;

      }

      p {

        margin-left: 30px;

      }

    }

  }

}

.scences {

  height: 180px;

  box-sizing: border-box;

  margin-bottom: 18px;

  position: relative;

  padding: 18px;

    background-color: #fff;

  h3 {

   

    position: absolute;

    // top: 18px;

  }

  .scence {

    display: flex;

    overflow-x: scroll;

    overflow-y: none;

  }

  img {

    margin-top: 48px;

    margin-right: 10px;

    width: 120px;

    height: 90px;

  }

}

.message {

  padding: 18px;

  box-sizing: border-box;

  height: 530px;

  background-color: #fff;

  ul {

    li {

      padding-left: 12px;

      box-sizing: border-box;

      height: 48px;

      border-top: 1px solid rgba(13, 14, 15, 0.1);

      font-size: 12px;

      line-height: 48px;

    }

  }

}

.changeState {

  color: rgb(240, 20, 20);

}

</style>