ZZJ
2022-04-02 45faaf27722588e92050e2e3eace9b3704377048
src/views/index/components/rightColumn.vue
@@ -1,26 +1,26 @@
<template>
  <div class="rightColumn">
    <div class="columnItem" v-for="(item, index) in data.product" :key="index">
    <div class="columnItem" v-for="(item, index) in product" :key="index">
      <div class="title">
        <img :src="item.icon" alt="" />
        {{ item.title }}
        <img :src="'/httpImage/' + item.logoUrl" alt="" />
        {{ item.modelName }}
      </div>
      <div class="des">
        {{ item.des }}
      <div class="des limitRow2">
        {{ item.summary }}
      </div>
      <ul class="list">
        <li v-for="(v, i) in item.menu" :key="i">
          <span class="icon iconfont">&#xe60c;</span>{{ v }}
      <ul class="list scroll">
        <li>
          <span class="icon iconfont">&#xe60c;</span>{{ item.description }}
        </li>
      </ul>
      <price :priceNew="item.priceNew" :priceOld="item.priceOld"></price>
      <price :priceNew="item.priceBase"></price>
      <div class="button">立即购买</div>
    </div>
  </div>
</template>
<script>
import price from "@/views/index/components/price";
import price from "@/components/Price.vue";
export default {
  props: {
@@ -30,6 +30,18 @@
  },
  components: {
    price,
  },
  data() {
    return {
      product: [],
    };
  },
  created() {
    if (this.data.product.length > 3) {
      this.product = this.data.product.slice(0, 3);
    } else {
      this.product = this.data.product;
    }
  },
};
</script>
@@ -70,13 +82,16 @@
    }
    .des {
      height: 38px;
      font-size: 14px;
      color: #999;
    }
    .list {
      margin-top: 33px;
      height: 150px;
      margin-top: 10px;
      margin-bottom: 10px;
      height: 170px;
      overflow-y: auto;
      li {
        font-size: 14px;
        color: #666666;
@@ -91,7 +106,7 @@
      }
    }
    .price {
    .Price {
      margin-bottom: 10px;
      margin-left: 0;
    }