uk_front/pages/home/compareList.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>Product Comparisons</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="compare-title">
      <h1>Product Comparisons</h1>
      <div class="line"></div>
      <p>All prices exclude GST.</p>
    </div>
    <div class="compare-list">
      <ul>
        <li class="compare-item" v-for="item in compareList" :key="item.id">
          <div class="item-header item-title">
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_code }}</p>
          </div>
          <div class="item-content img">
            <img
              :src="
                $mediaRegExp.test(item.info.image)
                  ? item.info.image
                  : 'https://www.promocollection.com.au/' + item.info.image
              "
            />
          </div>
          <div class="item-title">
            <p>Primary Branding Prices</p>
          </div>
          <div class="item-content">
            <!-- <div class="Qty-Price">
              <ul>
                <li>Qty</li>
                <li>50+</li>
                <li>100+</li>
                <li>250+</li>
                <li>500+</li>
                <li>1000+</li>
                <li>2500+</li>
                <li>5000+</li>
                <li>10000+</li>
              </ul>
              <ul>
                <li>Price</li>
                <li>-</li>
                <li>-</li>
                <li>-</li>
                <li>1.04</li>
                <li>0.96</li>
                <li>0.89</li>
                <li>0.85</li>
                <li>POA</li>
              </ul>
            </div>
            <div class="Setup"><span>Setup:</span><span>＄120/col</span></div> -->
          </div>
          <div class="item-title">
            <p>Details</p>
          </div>
          <div class="item-content">
            <div class="details">
              <span>Prodect size:</span>
              <span>{{ item.info.product_size }}</span>
            </div>
            <div class="details">
              <span>Print size:</span>
              <span>{{ item.info.print_size_area }}</span>
            </div>
          </div>
          <div class="item-title">
            <p>Colours</p>
          </div>
          <div class="item-content">
            <div class="colour">{{ item.info.colors_au }}</div>
          </div>
          <div class="item-title">
            <p>Description</p>
          </div>
          <div class="item-content">
            <div class="description">{{ item.info.description }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom-info">
      <p>1.Prices are subject to change at any time and without prior notice</p>
      <p>2.Prices shown are based on the client supplying suitable artwork</p>
      <p>3.Freight is additional to prices shown and will be charged at cost</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      compareList: [],
    };
  },
  async created() {
    await this.getCompareList();
  },
  methods: {
    getCompareList() {
      this.$axios
        .post("/api/home/compare_list", { compare_keys: "keys" })
        .then((res) => {
          this.compareList = res.result;
        })
        .catch((error) => {
          this.$message.error(error.response.data.msg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.com-main {
  .compare-title {
    font-family: Proxima Nova;
    text-align: center;
    margin: 55px auto 15px;
    h1 {
      height: 30px;
      font-size: 36px;
      font-weight: bold;
      color: #00213b;
      line-height: 23px;
      margin-bottom: 10px;
    }
    .line {
      width: 99px;
      height: 4px;
      background: #e90000;
      margin: 15px auto;
    }
    p {
      height: 12px;
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      line-height: 23px;
      margin-bottom: 25px;
    }
  }
  .bottom-info {
    margin: 50px auto;
    width: 400px;
    p {
      height: 24px;
      font-size: 12px;
      font-family: Proxima Nova;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
    }
  }
  .compare-list {
    font-family: Proxima Nova;
    ul {
      display: flex;
      justify-content: center;
      // align-items: center;
      li.compare-item {
        width: 280px;
        .item-title {
          height: 38px;
          font-size: 14px;
          background: #fafafa;
          border: 1px solid #e7eaf4;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .item-content {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          min-height: 100px;
          font-size: 12px;
          padding: 10px 5px;
          color: #333333;
          border: 1px solid #e7eaf4;
          img {
            width: 70px;
            height: 70px;
          }
          .Qty-Price {
            display: flex;
            justify-content: space-around;
            ul {
              display: block;
              width: 100px;
              text-align: center;
              margin: 10px auto;
              li {
                margin-bottom: 10px;
              }
            }
          }
          .Setup {
            height: 23px;
            line-height: 23px;
            text-align: center;
            color: #333333;
            span:nth-of-type(1) {
              font-weight: bold;
              margin-right: 5px;
            }
            span:nth-of-type(2) {
              font-family: Microsoft YaHei;
              font-weight: 400;
            }
          }
          .details {
            margin-top: 5px;
            span {
              display: inline-block;
              height: 23px;
              font-weight: 400;
              line-height: 23px;
            }
            span:nth-of-type(1) {
              width: 80px;
              text-align: center;
            }
            span:nth-of-type(2) {
              width: 155px;
              margin-left: 15px;
            }
          }
          .colour,
          .description {
            text-align: left;
            word-break: break-all;
            line-height: 20px;
          }
          .description {
            height: 140px;
            overflow: hidden; 
            text-overflow: ellipsis; 
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 7;
          }
        }
        .item-header {
          height: 76px;
          p:nth-of-type(1) {
            height: 23px;
            font-size: 14px;
            font-weight: bold;
            color: #0181c9;
            line-height: 23px;
          }
          p:nth-of-type(2) {
            height: 23px;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 23px;
          }
        }
      }
    }
  }
}
</style>