<template>
  <div style="width: 100%;">
    <!-- 顶部容器，设置最小宽度和flex布局 -->
    <div id="topContainer"
      style="min-width: 1400px; width: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center">

      <!-- 横幅区域 -->
      <div :class="detailData.title === '裸金属产品' ? 'bannerOne' : 'banner'">
        <div class="content">
          <!-- 产品标题 -->
          <span class="title">{{ detailData.title }}</span>
          <!-- 产品描述 -->
          <p style="line-height: 1.6" class="description">{{ detailData.description }}</p>
          <!-- 咨询按钮 -->
          <span @click="openTalk" class="btnStyle">立即咨询</span>
        </div>
      </div>

      <!-- 产品规格区域 -->
      <div :class="detailData.title !== '裸金属产品'?'main':'mainBox'">
        <div class="proAd">
          <!-- 裸金属产品显示规格标题 -->
          <div v-show="detailData.title === '裸金属产品'" class="title">产品<span class="gradient-text">规格</span></div>

          <!-- 新增：选择区域 -->
          <div v-show="detailData.title === '裸金属产品'" class="selection-area">
            <div class="selection-row">
              <div class="selection-group">
                <span class="selection-label">计算方式：</span>
                <span class="selection-option active">包月</span>
                <span class="selection-option">包年</span>
              </div>
            </div>
            <div class="selection-row">
              <div class="selection-group">
                <span class="selection-label">选择地区：</span>
                <span class="selection-option active">随机可用区</span>
                <span class="selection-option">北京二区</span>
                <span class="selection-option">新昌A区</span>
                <span class="selection-option">杭州A区</span>
                <span class="selection-option">深圳A区</span>
              </div>
            </div>
            <div class="selection-row">
              <div class="selection-group">
                <span class="selection-label">国产算力：</span>
                <span class="selection-option">A800-80GB</span>
                <span class="selection-option">H800-80GB</span>
                <span class="selection-option">A100-80GB</span>
                <span class="selection-option">RTX3090</span>
              </div>
            </div>
            <div class="selection-row">
              <div class="selection-group">
                <span class="selection-label">NVIDIA:</span>
                <span class="selection-option">A800-80GB</span>
                <span class="selection-option">H800-80GB</span>
                <span class="selection-option">A100-80GB</span>
              </div>
            </div>
          </div>

          <!-- 裸金属产品的规格卡片 -->
          <div v-show="detailData.title === '裸金属产品'" class="cardBox">
            <div class="card">
              <ul class="cardUl">
                <!-- 遍历产品规格列表 -->
                <li class="cardLi" v-for="(i, index) in detailData.products" :key="index">
                  <span class="cardTitle"> {{ i.title }}</span>
                  <!-- 规格参数列表 -->
                  <ul class="tagUl">
                    <li v-for="(item, index) in i.list" :key="index">
                      <span class="param-name">{{ item.name }}</span>
                      <span class="param-content">{{ item.content }}</span>
                    </li>
                  </ul>

                  <!-- 新增：虚线分隔 -->
                  <div class="dashed-divider"></div>

                  <!-- 价格和咨询按钮 -->
                  <div class="towBtn">
                    <div class="price-container">
                      <span class="basePrice">
                        <span style="font-weight: bold;">￥</span>
                        <span style="font-weight: bold;font-size: 30px">{{ i.price }}</span>
                        <span style="color: #7a82a0">/{{ i.price_unit }}</span>
                        <span style="color: #c3c6d4">（可短租）</span>
                      </span>
                    </div>
                    <div @click="openTalk" class="zixun">立即咨询</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 非裸金属产品显示优势标题 -->
          <div style="padding: 50px 0" v-if="detailData.title !== '裸金属产品'" class="title">产品<span
              class="gradient-text">优势</span></div>
          <!-- 产品优势列表 -->
          <div v-if="detailData.title !== '裸金属产品'" class="product">
            <div v-for="(item, index) in detailData.adList" :key="index" class="product-box">
              <div class="leftBox">
                <img :src="item.img" alt="">
              </div>
              <div class="rightBox">
                <div class="subTitle">{{ item.title }}</div>
                <div class="subDescription">
                  {{ item.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 产品功能区域 -->
      <div v-if="detailData.title !== '裸金属产品'" style="justify-content: flex-start!important;" class="proUse">
        <div style="padding-top: 50px" class="title">产品<span class="gradient-text">功能</span></div>
        <ul class="useUl">
          <!-- 遍历功能列表 -->
          <li v-for="(item, index) in detailData.useList" :key="index" class="useLi">
            <span v-if="item.title" class="useTitle">{{ item.title }}</span>
            <span v-if="item.description" class="useDescription">{{ item.description }}</span>
            <!-- 功能网格布局 -->
            <div class="function-grid-container">
              <!-- 上排4个功能项 -->
              <div class="function-top-row">
                <div v-for="(i, d) in getTopRowItems(item.content)" :key="d" class="function-grid-item">
                  <div class="function-icon-wrapper">
                    <img :src="getFunctionIcon(d)" alt="" class="function-icon">
                  </div>
                  <div class="function-content">
                    <span class="function-title">{{ i.title }}</span>
                    <span class="function-desc">{{ i.description }}</span>
                  </div>
                </div>
              </div>
              <!-- 下排3个功能项 -->
              <div class="function-bottom-row">
                <div v-for="(i, d) in getBottomRowItems(item.content)" :key="d + 4" class="function-grid-item">
                  <div class="function-icon-wrapper">
                    <img :src="getFunctionIcon(d + 4)" alt="" class="function-icon">
                  </div>
                  <div class="function-content">
                    <span class="function-title">{{ i.title }}</span>
                    <span class="function-desc">{{ i.description }}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- 应用场景区域 -->
      <div v-if="detailData.title !== '裸金属产品'" class="application">
        <div class="title">应用 <span class="gradient-text">场景</span> </div>
        <!-- 场景菜单 -->
        <ul class="menu">
          <li v-for="(item, index) in detailData.applicationList" :key="index" @click="clickMenu(item)"
            :class="activeMenu === item.id ? 'activeLi' : ''">
            {{ item.memuName }}
          </li>
        </ul>
        <!-- 场景详情 -->
        <div class="realApp">
          <div style="display: none" class="leftBox">
            <img :src="menuObj.img" alt="">
          </div>
          <div class="rightBox">
            <div v-if="menuObj.title_r" class="topBox">
              <span class="topTitle">{{ menuObj.title_r }}</span>
              <span style="line-height: 2" class="topDEscription">{{ menuObj.description_r }}</span>
            </div>
            <!-- 场景提供的功能 -->
            <div class="boxBox">
              <div v-for="(item, index) in menuObj.provide" class="bottomBox">
                <span style="margin: 15px 0; font-weight: 600; color: #111e52;">{{ item.title }}</span>
                <span class="content">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 咨询对话框组件 -->
    <Talk></Talk>
  </div>
</template>

<script>
// 引入Vue和相关依赖
import Vue from 'vue'
import { reqHotProduct, reqNewHomeDetail } from "@/api/newHome"; // API请求
import Talk from "@/views/homePage/dialog/talk/index.vue"; // 咨询对话框组件

export default Vue.extend({
  name: "detail", // 组件名称
  components: { Talk }, // 注册子组件

  data() {
    return {
      loading: null, // 加载状态
      activeMenu: 0, // 当前激活的菜单项ID
      detailData: {}, // 产品详情数据
      menuObj: { // 默认菜单对象
        id: "13",
        memuName: "个人建站应用、专属空间 ",
        img: "https://vstecscloud-file-manage.eos-beijing-4.cmecloud.cn/blade-oss/e7d1d90e439246d7879b1c1f8974f376@:,_y3.png",
        title_r: "知识效率管理，工具垂手可得",
        description_r: "选择精品镜像创建个人网站，企业官网",
        provide: {
          title: "支持的系统镜像",
          content: "WordPress、Lamp、Joomla、Drupal"
        }
      },
      suan: {} // 热销产品数据
    }
  },

  mounted() {
    // 组件挂载后获取详情和初始化数据
    this.getDetail()
    this.initData()
  },

  watch: {
    // 监听路由变化
    '$route'(to, from) {
      console.log("asdsad", to.query.id === '2113')
      // 如果路由ID为2113，重新初始化数据
      if (to.query.id === '2113') {
        this.initData()
      }
      // 如果路由ID发生变化，重新获取详情
      if (to.query.id !== from.query.id) {
        this.getDetail();
      }
    }
  },

  methods: {
    // 获取功能图标
    getFunctionIcon(index) {
      const icons = [
        require('./img/1.png'),
        require('./img/2.png'),
        require('./img/3.png'),
        require('./img/4.png'),
        require('./img/5.png'),
        require('./img/6.png'),
        require('./img/7.png')
      ];
      return icons[index] || icons[0];
    },

    // 获取上排4个功能项
    getTopRowItems(content) {
      return content ? content.slice(0, 4) : [];
    },

    // 获取下排3个功能项
    getBottomRowItems(content) {
      return content ? content.slice(4, 7) : [];
    },

    // 初始化热销产品数据
    initData() {
      reqHotProduct().then(res => {
        if (res.status) {
          this.suan = res.data.suan
          this.suanItem = this.suan.hot
        }
      })
    },

    // 打开咨询对话框
    openTalk() {
      this.$store.commit('setShowTalk', true)
    },

    // 显示全屏加载
    openFullScreen2() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },

    // 点击菜单项
    clickMenu(item) {
      this.activeMenu = item.id
      this.menuObj = item
    },

    // 获取产品详情
    getDetail() {
      this.openFullScreen2() // 显示加载
      reqNewHomeDetail({ id: this.$route.query.id }).then(res => {
        this.loading.close() // 关闭加载
        this.detailData = res.data // 设置详情数据
        this.activeMenu = res.data.applicationList[0].id // 设置默认激活菜单
        this.menuObj = res.data.applicationList[0] // 设置默认菜单对象
      })
    }
  }
})
</script>

<style scoped lang="scss">
.bannerOne {
  width: 100%;
  height: 500px;
  background: url('./img/FrameOne.png') no-repeat center center;
  background-size: 100% 100%;
  /* 背景图片 */
  position: relative;

  .content {
    margin: 0 240px;
    margin-top: 80px;
    width: 700px;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .title {
      font-size: 30px;
      font-weight: 600;
    }

    .description {
      font-size: 16px;
      color: #8890ab;
      line-height: 2 !important;
    }

    /* 咨询按钮样式 */
    .btnStyle {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      /* 渐变背景 */
      color: white;
      padding: 8px 15px;
      border-radius: 8px;
      margin-top: 15px;

      &:hover {
        cursor: pointer;
        background: linear-gradient(90deg, #275AFF 0%, #1089c1 100%);
        /* 悬停效果 */
      }
    }
  }
}

/* 横幅区域样式 */
.banner {
  width: 100%;
  height: 500px;
  background: url('./img/Frame.png') no-repeat center center;
  /* 背景图片 */
  position: relative;
  background-size: 110% 100%;

  .content {
    margin: 0 240px;
    margin-top: 80px;
    width: 700px;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .title {
      font-size: 30px;
      font-weight: 600;
    }

    .description {
      font-size: 16px;
      color: #8890ab;
      line-height: 2 !important;
    }

    /* 咨询按钮样式 */
    .btnStyle {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      /* 渐变背景 */
      color: white;
      padding: 8px 15px;
      border-radius: 8px;
      margin-top: 15px;

      &:hover {
        cursor: pointer;
        background: linear-gradient(90deg, #275AFF 0%, #1089c1 100%);
        /* 悬停效果 */
      }
    }
  }
}

/* 通用标题样式 */
.title {
  margin: 15px 0;
  font-size: 30px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 产品优势区域样式 */
.proAd {
  max-width: 1250px;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;

}

.mainBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: #fff;
  background: linear-gradient(to bottom,#fff, #f2f6fb, #fff);

}
.main{
    width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #f5f7fc, #f3f6fb, #e8edfa);
}

/* 产品功能区域样式 */
.proUse {
  width: 100%;
  min-width: 1400px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: linear-gradient(to bottom, #e8edfa, #fff);
  /* 灰色背景 */

  .useUl {
    height: fit-content;
    margin-bottom: 25px;
    width: 1400px;
    border-bottom: 1px solid rgba(228, 231, 237, 1);

    &:last-child {
      border-bottom: none;
      /* 最后一个无边框 */
    }

    .useLi {
      padding-top: 0;
      margin-top: 0;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;

      .useTitle {
        font-size: 18px;
        margin-bottom: 14px;
      }

      .useDescription {
        font-size: 12px;
        margin-bottom: 14px;
        line-height: 2 !important;
      }
    }

    /* 功能网格布局样式 */
    .function-grid-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .function-top-row {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* 4列网格 */
      gap: 20px;
      display: flex;
      justify-content: center;
    }

    .function-bottom-row {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* 3列网格 */
      gap: 20px;
      justify-items: center;
    }

    /* 功能项卡片样式 */
    .function-grid-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding: 25px 20px;
      min-height: 140px;
      width: 300px;
      border-radius: 12px;
      transition: all 0.3s ease;
      text-align: center;

      &:hover {
        transform: translateY(-5px);
        /* 悬停上浮效果 */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      }
    }

    /* 功能项图标样式 */
    .function-icon-wrapper {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background: #e7f2fd;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      flex-shrink: 0;
    }

    .function-icon {
      width: 30px;
      height: 30px;
    }

    .function-content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    .function-title {
      margin-bottom: 12px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      line-height: 1.4;
    }

    .function-desc {
      color: #666;
      line-height: 1.8;
      font-size: 14px;
      text-align: center;
    }

    /* 下排功能项宽度调整 */
    .function-bottom-row .function-grid-item {
      max-width: 380px;
      width: 100%;
    }
  }
}

.product {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 改为两列布局 */
  gap: 20px;
  /* 列间距 */
  width: 100%;
  max-width: 1250px;
  margin-bottom: 50px;

  .product-box {
    padding: 30px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #e8edfa, #fff);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 160px;
    /* 固定高度确保一致性 */
    box-sizing: border-box;

    // 添加悬停效果 - 变为蓝色主题
    &:hover {
      background: linear-gradient(to bottom, #275AFF, #2EBDFA);
      box-shadow: 0 8px 25px rgba(39, 90, 255, 0.3);

      .leftBox {
        background-color: white;

        /* 修复：使用更合适的滤镜或直接改变图标颜色 */
        img {
          filter: brightness(0) saturate(100%) invert(21%) sepia(95%) saturate(2593%) hue-rotate(218deg) brightness(96%) contrast(101%);
          /* 这个滤镜会将图标变成蓝色，与背景形成对比 */
        }
      }

      .rightBox {

        .subTitle,
        .subDescription {
          color: white;
        }
      }
    }

    .leftBox {
      width: 70px;
      height: 70px;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      flex-shrink: 0;
      /* 防止图标容器被压缩 */

      img {
        width: 35px;
        height: 35px;
        transition: all 0.3s ease;
      }
    }

    .rightBox {
      padding-left: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      /* 占据剩余空间 */

      .subTitle {
        font-size: 18px;
        color: #333;
        font-weight: bold;
        transition: all 0.3s ease;
        margin-bottom: 10px;
      }

      .subDescription {
        font-size: 14px;
        color: #999;
        line-height: 1.6;
        transition: all 0.3s ease;
      }
    }
  }
}

/* 应用场景区域样式 */
.application {
  padding: 0;
  width: 100%;

  .menu {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(228, 231, 237, 1);

    /* 激活菜单项样式 */
    .activeLi {
      color: #1b5bff;
      border-bottom: 3px solid #1b5bff;
      font-size: 20px;
      transition: all 0.3s ease;
    }

    li {
      flex: 1;
      height: 50px;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 0 10px;
      position: relative;

      &:hover {
        color: #1b5bff;
      }
    }
  }

  .realApp {
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    background: url('./img/Group.png') no-repeat center / cover;
    background-size: 100% 100%;
    min-height: 400px;
    transition: all 0.5s ease;

    .leftBox {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;

      img {
        width: 100%;
        height: 100%;
      }

      width: 0;
      height: 100%;
      background: #e5e5e5;
    }

    .rightBox {
      padding: 40px;
      width: 100%;
      height: 100%;

      .topBox {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(216, 216, 216, 1);
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        .topTitle {
          margin-top: 25px;
          font-size: 20px;
          font-weight: 600;
        }

        .topDEscription {
          font-size: 14px;
          color: #6d7696;
          margin-top: 15px;
        }
      }

      .bottomBox {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        .content {
          color: #6d7696;
          font-size: 14px;
          padding-right: 25px;
          line-height: 2;
        }
      }
    }
  }
}

/* 选择区域样式 */
.selection-area {
  width: 100%;
  max-width: 1400px;
  padding: 20px;
  margin-bottom: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.selection-row {
  margin-bottom: 15px;
  display: flex;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }
}

.selection-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.selection-label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.selection-option {
  padding: 6px 15px;
  margin-right: 10px;
  margin-bottom: 5px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: #275AFF;
    color: #275AFF;
  }

  &.active {
    background: #275AFF;
    color: white;
    border-color: #275AFF;
  }
}

/* 裸金属产品卡片样式 */
.cardBox {
  padding-bottom: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  .card {
    border-radius: 12px !important;
    /* 卡片背景 */
    background-size: cover;
    background-position: center;
    padding: 20px;
    box-sizing: border-box;
  }
}

.cardUl {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px; /* 添加间距 */

  .cardLi {
    min-height: 400px; /* 降低高度 */
    margin: 10px 0;
    padding: 25px 20px; /* 减少内边距 */
    width: calc(25% - 15px); /* 调整为4个一排 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .cardTitle {
      font-size: 16px; /* 减小字体 */
      font-weight: bold;
      margin-bottom: 15px;
      color: #111e52;
      width: 100%;
      text-align: left;
    }

    .tagUl {
      width: 100%;
      margin-bottom: 15px;
      flex: 1;

      li {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px; /* 减小字体 */

        .param-name {
          color: #000;
          font-size: 13px;
          min-width: 55px;
        }

        .param-content {
          color: #7A82A0;
          font-size: 12px;
          flex: 1;
          text-align: left;
          padding-left: 8px;
        }
      }
    }
  }
}

/* 虚线分隔样式 */
.dashed-divider {
  width: 100%;
  height: 1px;
  background: transparent;
  border-bottom: 1px dashed #e0e0e0;
  margin: 20px 0;
}

/* 折扣标签样式 */
.discount-tag {
  position: absolute;
  top: 30px;
  right: 30px;
  background: #F62424;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

/* 咨询按钮样式 */
.zixun {
  background: linear-gradient(90deg, #275aff, #2ebdfa);
  /* 渐变背景 */
  padding: 10px 20px; /* 减小内边距 */
  border-radius: 6px;
  color: white;
  font-weight: bold;
  font-size: 14px; /* 减小字体 */
  transition: all 0.3s ease;
  text-align: center;
  width: 100%;
  margin-top: 15px;

  &:hover {
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
  }
}

/* 价格样式 */
.basePrice {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px; /* 减小字体 */
  color: #F62424;
  /* 红色价格 */

  * {
    color: #F62424;
  }
}

/* 底部按钮容器 */
.towBtn {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
}

.price-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 应用场景内容容器 */
.boxBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .bottomBox {
    width: 50%;
    /* 两列布局 */
  }
}

/* 渐变文字效果 */
.gradient-text {
  background: linear-gradient(to right, #0066FF, #66CCFF);
  /* 蓝到浅蓝渐变 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* 响应式调整 - 在小屏幕上变为一列 */
@media (max-width: 768px) {
  .product {
    grid-template-columns: 1fr;
  }

  .cardUl .cardLi {
    width: 100%;
  }

  .selection-area {
    padding: 15px;
  }

  .selection-option {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* 在中等屏幕上调整为2个一排 */
@media (max-width: 1200px) {
  .cardUl .cardLi {
    width: calc(50% - 10px);
  }
}

/* 在大屏幕上保持4个一排 */
@media (min-width: 1201px) {
  .cardUl .cardLi {
    width: calc(25% - 15px);
  }
}
</style>
