DDAC/app/components/PlansSection.vue

<script setup>
import { plans } from '~/utils/plans'
</script>

<template>
  <section class="plans-section">
    <div class="plans-cards">
      <div v-for="(plan, index) in plans" :key="index" class="plan-card">
        <div class="plan-name">{{ plan.name }}</div>
        <div class="plan-desc">{{ plan.desc }}</div>
        <div class="old-price">
          <del>{{ plan.oldPrice }}</del>
          <span>{{ plan.save }}</span>
        </div>
        <div class="plan-price">{{ plan.price }}</div>
        <div class="plan-actions">
          <button class="btn-primary" :class="plan.buttonClass">立即选择</button>
        </div>
        <div class="plan-title">
          <div class="plan-cs">详细参数</div>
          <ul class="plan-features">
            <li v-for="(feature, fIndex) in plan.features" :key="fIndex">{{ feature }}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.plans-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 0;
  position: relative;
  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;
    transition: transform .3s ease;

    &: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%);
      transform: translateY(-5px);

      .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: rgba(255, 255, 255, 0.6);

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

  }
}
</style>