smart-admin/rc-busness/pages/resentation/resentation.vue

<template>
  <div class="rc-padding-y--lg">
    <Myheader></Myheader>
    <div class="rc-top"></div>
    <div class="ts-banner-swiper-container">
		<picture>
		  <source
		    media="(max-width: 768px)"
		    srcset="/images/rc-phone.png"
		  />
		  <source
		    media="(min-width: 769px)"
		    srcset="/images/userbanner.png"
		  />
		  <img src="/images/banner/pc-weixin.png" />
		</picture>
    </div>
	<div>
		<ul class="ts-product-list rc-margin-bottom--lg">
		  <li
		    v-for="(item, index) in dataList.amature"
		    :key="index"
		    class="rc-margin-top--md"
		  >
			<h2 class="rc-beta rc-margin-y--md">{{ index==1?'明星犬粮':'明星猫粮' }}</h2>
		    <div
		      class="rc-click rc-margin-bottom--md"
		      @click="selectproduce(item, index)"
		    >
		      <div class="rc-rccontair">
		        <img :src="item.productimage" alt="" />
		      </div>
		    </div>
		    <div class="rc-column">
		      <div class="rc-click" @click="selectproduce(item, index)">
		        <span>{{ item.title }}</span>
				<div class="desc">{{ item.detail }}</div>
		      </div>
		      <strong
		        class="
		          ts-standard-btn ts-standard-btn--two
		          rc-margin-y--md
		          center
		        "
		        @click="selectproduce(item, index)"
		        >点击查看</strong
		      >
		    </div>
		  </li>
		</ul>
	</div>
    <div class="contair">
      <nuxt-link :to="`/productdetails/productlist/`">
        <span class="ts-standard-btn center">查看更多</span>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import envData from "~/config/env-data.js";
export default {
  data() {
    return {
		envData,
		dataList:{amature:[]}
	};
  },
  components: {
    Myheader,
  },
  mounted(){
	  let env=process.env.NODE_ENV;
	  this.dataList=this.envData[env];
  },
  methods:{
      selectproduce(item) {
        let isRxGoods = false;
        let productCode = [];
        let mainProductCode = item.productCode;
        if (!item.ecPrice && !item.price) {
          isRxGoods = 1;
          productCode = [item.productCode];
        } else {
          for (let i of item.productList) {
            productCode.push(i.productCode);
          }
        }
        this.$router.push({
          path: "/productdetails/producted",
          query: {
            stype: 1,
            isRxGoods: isRxGoods,
            mainProductCode: mainProductCode,
            productCode: productCode.join(","),
          },
        });
      },
  }
};
</script>

<style lang="less" scoped >
.ts-banner-swiper-container {
    img {
      width: 100%;
      height: auto;
	  object-fit: contain;
    }
  }
.ts-product-list li{
	border:none;
	max-width:22.75rem;
	min-width:22.75rem;
	width:22.75rem;
	h2{
		margin-left:auto;
		margin-right:auto;
		font-weight: bold;
	}
	.rc-column span {
		height:auto;
	}
	.desc {
		width:13rem;
		height:auto;
	}
}
</style>