DDAC/app/components/PlansSection.vue

<template>
  <section class="plans-section">
    <div class="plans-cards">
      <div class="plan-card">
        <div class="plan-name">Lite Plan</div>
        <div class="plan-desc">适合项目上线初期集成</div>
        <div class="old-price">
          <del>$1500</del>
          <span>节省20.04%</span>
        </div>
        <div class="plan-price">$999</div>
        <div class="plan-actions">
          <button class="btn-primary">立即选择</button>
        </div>
        <div class="plan-title">
          <div class="plan-cs">详细参数</div>
          <ul class="plan-features">
            <li>防护目标数：3个</li>
            <li>峰值设备数：200</li>
            <li>智能BGP线路</li>
            <li>带宽峰值：20M</li>
            <li>DDoS防御：无上限</li>
            <li>CC防御：100%</li>
          </ul>
        </div>
      </div>

      <div class="plan-card">
        <div class="plan-name">Basic Plan</div>
        <div class="plan-desc">最经济实惠的个人开发者套餐</div>
        <div class="old-price">
          <del>$2500</del>
          <span>节省20.04%</span>
        </div>
        <div class="plan-price">$1999</div>
        <div class="plan-actions">
          <button class="btn-primary">立即选择</button>
        </div>
        <div class="plan-title">
          <div class="plan-cs">详细参数</div>
          <ul class="plan-features">
            <li>防护目标数：10个</li>
            <li>峰值设备数：2000</li>
            <li>智能CN2/BGP线路</li>
            <li>带宽峰值：50M</li>
            <li>DDoS防御：无上限</li>
            <li>CC防御：100%</li>
          </ul>
        </div>
      </div>

      <div class="plan-card">
        <div class="plan-name">Standard Plan</div>
        <div class="plan-desc">企业入门级畅销精选套餐</div>
        <div class="old-price">
          <del>$6000</del>
          <span>节省16.68%</span>
        </div>
        <div class="plan-price">$4999</div>
        <div class="plan-actions">
          <button class="btn-primary ghost">立即选择</button>
        </div>
        <div class="plan-title">
          <div class="plan-cs">详细参数</div>
          <ul class="plan-features">
            <li>防护目标数：15个</li>
            <li>峰值设备数：10000</li>
            <li>智能CN2/BGP线路</li>
            <li>带宽峰值：80M</li>
            <li>DDoS防御：无上限</li>
            <li>CC防御：100%</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.plans-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 1;


  .plans-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }

  .plan-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    padding: 45px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 608px;

    &:hover {
      border: 2px solid rgba(178, 161, 255, 0.80);
      background: linear-gradient(180deg, rgba(146, 116, 254, 0.20) 0%, rgba(125, 70, 255, 0.20) 100%);

      .plan-actions .btn-primary {
        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
      }
    }


    .plan-name {
      text-align: center;
      
      font-size: 36px;
      font-weight: 700;
      line-height: 26px;
      color: #ffffff;
    }

    .plan-desc {
      margin-top: 40px;
      text-align: center;
      
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      color: #e0d3ff;
    }

    .old-price {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;

      del {
        color: #A39DFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }

      span {
        display: flex;
        border-radius: 17.5px;
        background: #7D46FF;
        color: #fff;
        width: 145px;
        height: 35px;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }

    .plan-price {
      padding: 42px;
      
      text-align: center;
      font-size: 65px;
      font-weight: 700;
      line-height: 65px;
      color: #ffffff;
      margin: 8px 0;
    }

    .plan-actions {
      display: flex;
      gap: 12px;
      align-items: center;

      .btn-primary {
        flex: 1;
        height: 64px;
        border-radius: 50px;
        background: linear-gradient(91deg, rgba(163, 157, 255, 0.20) 1.24%, rgba(125, 70, 255, 0.20) 122.93%);
        border: none;
        color: #fff;
        
        font-size: 24px;
        cursor: pointer;
        transition: opacity 0.3s ease;

        &:hover {
          opacity: 0.85;
        }
      }

    }

    .plan-title {
      .plan-cs {
        margin: 22px 0;
        color: #fff;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
      }

      .plan-features {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        li {
          position: relative;
          
          padding-left: 20px;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #ffffff;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #a39dff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &::after {
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            content: "✓";
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }

  }
}
</style>