portal_website/src/views/productCenter/detail.vue

<template>
  <div>
    <div class="banner">
      <el-image
          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
          :src="data.banner"
          fit="contain"></el-image>
      <el-image
          style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
          :src="data.banner1"
          fit="contain"></el-image>
      <div class="bannerInfo">{{ data.bannerTitle }}</div>
      <div class="bannerValue">{{ data.bannerValue }}</div>
    </div>


    <div class="product-container">
      <!-- 左侧大图 + 缩略图 -->
      <div class="product-left">
        <!-- 大图 -->
        <div class="main-img">
          <el-image :src="activeImg" fit="contain"></el-image>
        </div>

        <!-- 缩略图 -->
        <div class="thumb-list">
          <div
              v-for="(img, index) in data.imgList"
              :key="index"
              class="thumb-item"
              :class="{ active: activeIndex === index }"
              @mouseenter="changeImg(index)"
          >
            <el-image :src="img.url" fit="cover"></el-image>
          </div>
        </div>
      </div>

      <!-- 右侧文字 -->
      <div class="product-right">
        <h2 class="title">产品特点</h2>
        <ul class="features">
          <li v-for="(item, i) in data.features" :key="i">
            <i class="el-icon-circle-check"></i> {{ item.name }}
          </li>
        </ul>
      </div>
    </div>

    <div class="param-container" style="padding: 5vw 10vw;background-color: #0001">
      <h2 class="title1" style="line-height: 40px">产品参数</h2>

      <div class="paramsTable" v-for="(param, index) in data.params" :key="index">
        <div class="th">
          <div class="th1">{{ param.title }}</div>
          <div class="th2">参数值</div>
        </div>
        <div class="td">
          <div v-for="(item, idx) in param.list" :key="idx">
            <div class="td1">{{ item.name }}</div>
            <div class="td2">{{ item.value }}</div>
          </div>
        </div>
      </div>

    </div>

    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
      <h2 class="title1" style="line-height: 40px">资料下载</h2>
      <div>

        <div v-for="i in data.fileList" class="fileCard" style="text-align: left">
          <div class="cardTitle">{{ i.name }}</div>
          <div class="cardValue">{{ i.value }}</div>
          <el-button @click="downFile(i.url,i.fileName)" type="primary" class="downIcon" icon="el-icon-download "
                     circle></el-button>
        </div>
      </div>

    </div>
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {selectMenuTree} from "@/api/productCenter";
import {listHwWeb1} from "@/api/hwWeb";

export default {
  name: 'ProductCenter',
  components: {
    ContactUs,
    Copyright,
  },
  data() {
    return {
      activeIndex: 0,
      data: {}
    }
  },
  computed: {
    activeImg() {
      return this.data.imgList[this.activeIndex];
    },
  },
  mounted() {
    this.getData()
  },
  watch: {
    '$route'() {
      this.getData()
    }
  },
  methods: {
    changeImg(index) {
      this.activeIndex = index;
    },
    getData() {
      listHwWeb1({webCode: this.$route.query.type, deviceId: this.$route.query.id}).then(e => {
        console.log(e)
        this.data = e.rows?.[0]?.webJsonString ? JSON.parse(e.rows[0].webJsonString) : {
          banner: '',
          banner1: '',
          bannerTitle: '设备名称',
          bannerValue: '设备介绍',

          imgList: [],
          features: [],
          params: [],

          fileList: [],
        }
      })
    },
    async downFile(url, filename) {
      try {
        const response = await fetch(url, {mode: 'cors'});
        if (!response.ok) throw new Error('网络错误');

        const blob = await response.blob(); // 获取文件数据
        const blobUrl = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = filename || url.split('/').pop();
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

        URL.revokeObjectURL(blobUrl); // 释放内存
      } catch (err) {
        console.error('下载失败:', err);
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 40%;
    text-align: left;
    font-size: 2.5vw;
    color: #000;
    font-weight: 700;
    line-height: 3vw;
    letter-spacing: 2px;
    word-break: break-all;
  }

  .bannerValue {
    position: absolute;
    top: calc(35% + 3vw);
    left: 19%;
    width: 40%;
    text-align: left;
    font-size: 1vw;
    color: #000;
    font-weight: 500;
    line-height: 2vw;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 50%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(50% - 3px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}


.tabs {
  text-align: left;
  margin-top: 2.3vw;

  /deep/ .el-tabs__header {
    margin: 0 10vw 15px;
  }

  /deep/ .el-tabs__content {
    padding: 0 10vw;
    background-color: fade(@standard-color, 10);
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }

  /deep/ .el-tabs__item {
    letter-spacing: 3px;
    padding: 0 2vw;
    height: 2.9vw;
    font-size: 1.6vw;
  }

  /deep/ .el-tabs__item {
    line-height: 2.9vw;
  }

  /deep/ .el-tabs__item.is-active {
    font-weight: 600;
    color: @standard-color;
  }

  /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: @standard-color;
  }

  .content {
    padding: 2.2vw 0;
    display: inline-block;
    width: 47%;
    cursor: pointer;

    &:nth-child(2n) {
      margin-left: 5%;
    }

    &:hover {

      .itemTitle {
        color: #5c8eff;
      }

      .img-wrap {
        .image {
          transform: scale(1.2);
        }
      }
    }

    .custom-card {
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      display: inline-block;

    }

    .itemTitle {
      font-size: 26px;
      font-weight: 600;
      margin: 0;
      text-align: center;
      transition: all 0.5s ease;
    }

    .description {
      font-size: 14px;
      color: #666;
      margin: 0;
      margin-top: 12px;
      line-height: 1.6;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 限制两行 */
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
    }

    .more-btn {
      margin-top: 12px;
      background-color: transparent;
      border: 1px solid #dcdfe6;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .more-btn:hover {
      border-color: #409eff;
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.05);
    }

    .icon {
      font-size: 16px;
      margin-left: 4px;
    }

    .img-wrap {
      margin-top: 12px;
      overflow: hidden;

      .image {
        transition: transform 0.5s ease;
      }
    }
  }

}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}

.product-container {
  padding: 5vw 10vw;
  display: flex;
  gap: 40px;
}

.product-left {
  width: 400px;
}

.main-img {
  width: 100%;
  height: 300px;
  border: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumb-list {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.thumb-item {
  width: 80px;
  height: 60px;
  border: 2px solid transparent;
  cursor: pointer;
}

.thumb-item.active {
  border-color: #409eff;
}

.thumb-item .el-image {
  width: 100%;
  height: 100%;
}

.product-right {
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features li {
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
  display: flex;
  align-items: center;
  line-height: 24px;
}

.features i {
  color: #409eff;
  margin-right: 6px;
}

.paramsTable {
  .th {
    background-color: #DBDFE7;
    line-height: 3vw;
    font-size: 1.3vw;
    font-weight: 700;
    text-align: left;

    .th1 {
      width: calc(30% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
      border-right: 1px solid #0001
    }

    .th2 {
      width: calc(70% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
    }
  }

  .td {
    line-height: 3vw;
    font-size: 0.9vw;
    text-align: left;

    .td1 {
      background-color: #F2F4F8;
      width: calc(30% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
      border: 1px solid #0001
    }

    .td2 {
      background-color: #EEEEEE;
      width: calc(70% - 2vw - 2px);
      display: inline-block;
      padding-left: 2vw;
      border: 1px solid #0001
    }
  }
}

.fileCard {
  display: inline-block;
  width: 40%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 1vw;
  position: relative;

  .cardTitle {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 45px;
    width: calc(100% - 80px);
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  .cardValue {
    position: absolute;
    top: 55px;
    width: calc(100% - 80px);
    left: 20px;
    font-size: 14px;
    line-height: 45px;
    color: #aaa;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  .downIcon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  &:nth-child(2n) {
    margin-left: 5%;
  }
}
</style>