列表样式

ZZJ

2022-07-15 b200eed05d5bff2e12a45331bdc062f4b00bebf7

 src/views/index/components/commendContent.vue

@@ -1,24 +1,24 @@
<template>
  <div class="commendContent">
    <div class="refresh"><span class="icon iconfont">&#xe606;</span>换一批</div>
    <div class="refresh" @click="refresh">
      <span class="icon iconfont">&#xe606;</span>换一批
    </div>
    <div
      class="commendTabsItem"
      v-for="(item, index) in commendData"
      :key="index"
    >
      <div class="icon">
        <img :src="item.img" alt="" />
      </div>
      <div class="title">{{ item.title }}</div>
      <div class="des">{{ item.des }}</div>
      <price :priceNew="item.priceNew" :priceOld="item.priceOld"></price>
      <div class="button">立即购买</div>
      <ImageShow :src="item.logoUrl"> </ImageShow>
      <div class="title">{{ item.productName }}</div>
      <div class="des limitRow2">{{ item.description }}</div>
      <price :priceNew="item.priceBase ? item.priceBase : 0"></price>
      <div class="button" @click="buyProduct(item.id)">立即购买</div>
    </div>
  </div>
</template>

<script>
import price from "./price.vue";
import price from "@/components/Price.vue";

export default {
  props: {
@@ -28,6 +28,19 @@
  },
  components: {
    price,
  },
  methods: {
    refresh() {
      this.$emit("refresh");
    },
    buyProduct(id) {
      this.$router.push({
        path: "/productDetail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
@@ -40,6 +53,9 @@
  margin: 0 auto;

  .commendTabsItem {
    position: relative;
    max-width: 302px;
    height: 332px;
    flex: 1;
    padding-top: 20px;
    text-align: center;
@@ -50,7 +66,8 @@
      margin-right: 0;
    }

    .icon img {
    img {
      height: 96px;
      width: 96px;
    }

@@ -62,13 +79,16 @@
    }

    .des {
      height: 38px;
      margin: 0 20px 20px 20px;
      color: #666666;
      font-size: 14px;
    }

    .button {
      margin-top: 25px;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 40px;
      box-shadow: 0px 2px 8px rgba(0, 43, 106, 0.12);