portal_website/src/views/productInfo.vue

<template>
  <div>
    <TitleGroup>
      <template slot="title">{{ contentList.productInfoEtitle }}</template>
      <template slot="subTitle">{{ contentList.productInfoCtitle }}</template>
    </TitleGroup>

    <div class="info1">
      <div class="name">技术参数</div>
    </div>
    <div class="left">
      <div v-for="i in contentList.hwProductInfoDetailList" style="margin-bottom: 40px;width: 100%">
        <div class="info2">
          <div class="name2">{{ i.productInfoDetailTitle }}</div>
        </div>
        <div style="height: auto">
          <div style="width: calc(50% - 2px);display: inline-block;height: 100%;" v-if="ii in i.children">
            <div class="tabl">{{ ii.productInfoDetailTitle }}</div>
          </div>
          <div class="tabr">
            <span>
              {{ ii.productInfoDetailDesc }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="info2">
        <div class="name2">产品图示</div>
      </div>
      <div v-for=" i  in contentList.hwProductInfoDetailList.map(e=>e.productInfoDetailPic)">
        <img :src="i.productInfoDetailPic" alt=""
             style="width: 100%">
      </div>
    </div>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import EL1 from '@/components/element/el1.vue'
import EL2 from '@/components/element/el2.vue'
import EL3 from '@/components/element/el3.vue'
import EL4 from '@/components/element/el4.vue'
import EL5 from '@/components/element/el5.vue'
import EL6 from '@/components/element/el6.vue'
import EL7 from '@/components/element/el7.vue'
import EL8 from '@/components/element/el8.vue'
import EL9 from '@/components/element/el9.vue'
// import EL10 from '@/components/element/el10.vue'
import EL11 from '@/components/element/el11.vue'
import EL12 from '@/components/element/el12.vue'
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
import TitleGroup from "@/components/TitleGroup.vue";

export default {
  name: 'ProductCenter',
  components: {
    TitleGroup,
    EL1,
    EL2,
    EL3,
    EL4,
    EL5,
    EL6,
    EL7,
    EL8,
    EL9,
    // EL10,
    EL11,
    EL12,
    ContactUs,
    Copyright,
  },
  data() {
    return {
      banner: '',
      bannerTitle: '',
      tabsActive: 0,
      tabsList: [],
      configTypeId: 0,
      contentList: {}
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    '$route'() {
      this.getData()
    }
  },
  methods: {
    getContentList(id) {
      getProductCenterProductInfos({
        configTypeId: id,
        // parentId: 0
      }).then(e => {
        this.contentList = e.data.filter(v => v.configModal === '13').sort((a, b) => a.productInfoOrder - b.productInfoOrder)?.[0]
        console.log(this.contentList)
      })
    },
    getData() {
      getPortalConfigList({
        portalConfigType: 2,
        portalConfigTypeId: this.$route.query.id,
        pageNum: 1,
        pageSize: 5
      }).then(e => {
        this.banner = e.rows?.[0]?.portalConfigPic
        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
      })
      getPortalConfigTypeList({
        parentId: this.$route.query.id,
        pageNum: 1,
        pageSize: 50
      }).then(e => {
        this.tabsList = e.rows
        this.configTypeId = e.rows?.[0]?.configTypeId
        if (e.rows?.[0]?.configTypeId) {
          this.getContentList(e.rows?.[0]?.configTypeId)
        } else {
          this.contentList = []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info1 {
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: left;
  background-color: #E5EDFE;
  margin-top: 8px;

  .name {
    margin-left: 10vw;
    font-size: 40px;
    font-weight: 800;
  }
}

.left {
  display: inline-block;
  margin-top: 12px;
  width: 35vw;
  margin-right: 5vw;
  text-align: left;

  .info2 {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: left;
    background-color: #EFEFEF;

    .name2 {
      margin-left: 8px;
      font-size: 30px;
      font-weight: 800;
    }
  }

  .tabl {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EFEFEF;
  }

  .tabr {
    width: calc(50% - 2px);
    display: inline-block;
    text-align: center;
    line-height: 44px;
    border: 1px solid #EFEFEF;
  }

}

.right {
  display: inline-block;
  margin-top: 12px;
  margin-left: 5vw;
  width: 35vw;
  vertical-align: top;

  .info2 {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: left;
    background-color: #EFEFEF;

    .name2 {
      margin-left: 8px;
      font-size: 30px;
      font-weight: 800;
    }
  }
}
</style>