wine-seller/src/pages/WineListPage.vue

<template>
  <div class="wines">
    <div class="wine" v-for="(wine, index) in wines" :key="keys[index]" @click="detail_of(index)">
      <img class="wine-picture" :src="wine.picture" alt="wine-image">
      <h2>{{ wine.name }}</h2>
      <div class="info">
        <h3>￥<span class="price">{{ wine.price_in_yuan }}</span>/两</h3>
        <div class="remain">剩余：<span :style="`color: ${color_of_remain(index)};`">{{ wine.remain_in_weight }}</span> 两
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let Timer = null;
export default {
  name: "WineListPage",
  data() {
    return {
      wines: this.$utils.Wines,
      keys: [10, 11, 12, 13]
    };
  },
  methods: {
    Start() {
      for (let i = 0; i < 4; i++) this.keys[i]++;
      this.clear_timer();
      Timer = setTimeout(() => {
        this.$emit("list2adv");
      }, this.$utils.ParamMap.ListTimeOut * 1000);
    },
    Over() {
      this.clear_timer();
    },
    get_icon(name) {
      return `${process.env.BASE_URL}icon/${name}.svg`;
    },
    color_of_remain(index) {
      if (this.wines[index].remain > this.$utils.ParamMap.WarnLine) return "green";
      else if (this.wines[index].remain > this.$utils.ParamMap.DangerLine) return "goldenrod";
      return "red";
    },
    clear_timer() {
      if (Timer !== null) clearTimeout(Timer);
      Timer = null;
    },
    detail_of(index) {
      this.$emit("list2detail", index);
    }
  }
}
</script>

<style scoped>
.wines {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.wine {
  width: 400px;
  height: 650px;
  cursor: pointer;
  background-color: white;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 30px 20px;
}

.wine:active {
  transform: scale(0.99);
  box-shadow: 1px 2px 4px lightgray;
}

.wine-picture {
  width: 280px;
  height: 400px;
  object-fit: cover;
}

h2 {
  font-size: 30px;
  text-align: center;
  margin-block-start: 5px;
  margin-block-end: 10px;
}

.info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

h3 {
  font-size: 22px;
  margin-block-start: 0;
  margin-block-end: 0;
  color: red;
}

.price {
  font-size: 38px;
}

.remain {
  color: rgba(0, 0, 0, .4);
  font-size: 20px;
}
</style>