<!--
 * @Date: 2024-09-29 14:26:41
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-30 10:06:55
 * @FilePath: /hager/src/views/product/detail.vue
 * @Description: 文件描述
-->
<template>
  <div class="product-detail">
    <hager-box>
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>所有产品</el-breadcrumb-item>
          <el-breadcrumb-item>配电产品</el-breadcrumb-item>
          <el-breadcrumb-item>低压主配电</el-breadcrumb-item>
          <el-breadcrumb-item>HW+系列空气断路器</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <el-row :gutter="10">
        <el-col :span="10">
          <hager-carousel></hager-carousel>
        </el-col>
        <el-col :span="14">
          <div>
            <div style="font-size: 2rem; font-weight: bold;">HW+系列空气断路器</div>
            <div style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
            <ul style="padding: 0 1rem;">
              <li>实现谐波测量，实时监测电能质量；</li>
              <li>图文显示多电量参数，系统状态一目了然；</li>
              <li>支持Modbus远程通讯协议，无线蓝牙连接等多种通讯方式，全方位提升客户的数字化体验。</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </hager-box>
    <hager-box class="box-2n">
      <hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
      <div class="product-advantage" style="">
        <div class="item">
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
        </div>
        <div class="item">
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
        </div>
        <div class="item">
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
          <p>极致的分断能力： 全系列Icu=Ics</p>
        </div>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <hager-h1 title="产品资料" sub="Product Information"></hager-h1>
      <div class="product-info">
        <div class="info-control">
          <div class="control-left">
            <div class="button active" style="margin-right: 1rem;">产品样本</div>
            <div class="button" style="margin-right: 1rem;">技术参数</div>
            <div class="button" style="margin-right: 1rem;">产品说明书</div>
            <div class="button" style="margin-right: 1rem;">安装教程</div>
          </div>
          <div>
            <div class="button">下载选中</div>
          </div>
        </div>
        <div>
          <div class="info-list">
            <div class="info-list-title">
              <i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;Hw+系列空气断路器&nbsp;&nbsp;17.77MB
            </div>
            <div class="info-list-control">
              <span>预览</span>&nbsp;
              <span>直接下载</span>&nbsp;
              <i class="el-icon-folder-checked"></i>
            </div>
          </div>
        </div>
      </div>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerCarousel from '@/components/hagerCarousel';
import hagerH1 from '@/components/common/hagerH1.vue';

export default {
  components: { hagerBox, hagerCarousel, hagerH1 },
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.product-detail {
  .box-n {
    background-color: #fff;
    padding: 2rem 0;
  }
  .box-2n {
    background-color: #f1f1f1;
    padding: 2rem 0;
  }
  .product-advantage {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    .item {
      flex: 0 1 calc(50% - 3rem); /* 每行2个元素，减去gap的宽度 */
      box-sizing: border-box;      /* 确保padding和border不会影响宽度计算 */
      padding-top: 1rem;
      background-color: #f0f0f0;
      border-top: 4px solid @primary-color;
      p {
        line-height: 2;
      }
    }
  }
  .product-info {
    .info-control {
      display: flex;
      border-bottom: 4px solid @primary-color;
      padding-bottom: 1rem;
      margin-top: 2rem;
      .control-left {
        display: flex;
        flex: 1 0 0;
      }
      .button {
        background-color: #f3f3f3;
        padding: 1rem 2.2rem;
        border-radius: 5px;
        &:hover {
          cursor: pointer;
        }
        &.active {
          background-color: @primary-color;
          color: #fff;
        }
      }
    }
    .info-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem 0;
      color: #6b6b6b;
      .info-list-title {
        display: flex; align-items: center;
      }
      .info-list-control {
        span {
          &:hover {
            cursor: pointer;
            color: @primary-color;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>