web/src/app/(root)/product/page.tsx

import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import {Combo} from '@/app/(root)/product/combo'


export type ProductPageProps = {}

export default function ProductPage(props: ProductPageProps) {
  return (
    <main className={`mt-20`}>
      <Wrap className="flex flex-col py-8 gap-8">
        <BreadCrumb items={[
          {label: '产品中心', href: '/product'},
        ]}/>

        <h2 className={`text-3xl text-center`}>多种套餐选择</h2>

        <ul role={`tablist`} className={`flex justify-center items-stretch bg-white rounded-lg`}>
          <li role={`tab`}>
            <button className={`h-14 px-8 text-lg`}>短效动态套餐</button>
          </li>
          <li role={`tab`}>
            <button className={`h-14 px-8 text-lg`}>长效静态套餐</button>
          </li>
          <li role={`tab`}>
            <button className={`h-14 px-8 text-lg`}>固定套餐</button>
          </li>
          <li role={`tab`}>
            <button className={`h-14 px-8 text-lg`}>定制套餐</button>
          </li>
        </ul>

        <section role={`tabpanel`} className={`flex flex-row bg-white`}>
          <Left/>
          <Center/>
          <Right/>
        </section>
      </Wrap>
    </main>
  )
}

function Left() {
  return (
    <div className="flex-none basis-56 p-8 flex flex-col gap-4">
      <img src={`/product/banner.webp`} alt={`banner`} className={`w-full`}/>
      <h3 className={`text-lg`}>包量套餐</h3>
      <ul className={`flex flex-col gap-3`}>
        <Combo name={`3分钟`} level={[
          {number: 30000, discount: 10},
          {number: 80000, discount: 20},
          {number: 200000, discount: 30},
          {number: 450000, discount: 40},
          {number: 1000000, discount: 50},
          {number: 1600000, discount: 65},
        ]}/>
        <Combo name={`5分钟`} level={[
          {number: 30000, discount: 10},
          {number: 80000, discount: 20},
          {number: 200000, discount: 30},
          {number: 450000, discount: 40},
          {number: 1000000, discount: 50},
          {number: 1600000, discount: 65},
        ]}/>
        <Combo name={`10分钟`} level={[
          {number: 30000, discount: 10},
          {number: 80000, discount: 20},
          {number: 200000, discount: 30},
          {number: 450000, discount: 40},
          {number: 1000000, discount: 50},
          {number: 1600000, discount: 65},
        ]}/>
        <Combo name={`15分钟`} level={[
          {number: 30000, discount: 10},
          {number: 80000, discount: 20},
          {number: 200000, discount: 30},
          {number: 450000, discount: 40},
          {number: 1000000, discount: 50},
          {number: 1600000, discount: 65},
        ]}/>
        <Combo name={`30分钟`} level={[
          {number: 30000, discount: 10},
          {number: 80000, discount: 20},
          {number: 200000, discount: 30},
          {number: 450000, discount: 40},
          {number: 1000000, discount: 50},
          {number: 1600000, discount: 65},
        ]}/>
      </ul>
      <div className={`border-b border-gray-200`}></div>
      <h3 className={`text-lg`}>包时套餐</h3>
      <ul className={`flex flex-col gap-3`}>
        <li className={`flex justify-between`}>
          <span className={`text-sm text-gray-500`}>7天</span>
          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>9折</span>
        </li>
        <li className={`flex justify-between`}>
          <span className={`text-sm text-gray-500`}>30天</span>
          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>8折</span>
        </li>
        <li className={`flex justify-between`}>
          <span className={`text-sm text-gray-500`}>90天</span>
          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>7折</span>
        </li>
        <li className={`flex justify-between`}>
          <span className={`text-sm text-gray-500`}>180天</span>
          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>6折</span>
        </li>
        <li className={`flex justify-between`}>
          <span className={`text-sm text-gray-500`}>360天</span>
          <span className={`text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full`}>5折</span>
        </li>
      </ul>
    </div>
  )
}

function Center() {
  return (
    <div className={`flex-auto p-8 flex flex-col relative gap-4 `}>

      <h3>计费方式</h3>
      <div className={`grid grid-cols-2 auto-cols-fr place-items-stretch gap-4`}>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
          <h4>包量套餐</h4>
          <p className={`text-sm text-gray-500`}>适用于短期或不定期高提取业务场景</p>
        </button>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col items-start gap-2 cursor-pointer`}>
          <h4>包时套餐</h4>
          <p className={`text-sm text-gray-500`}>适用于每日提取量稳定的业务场景</p>
        </button>
      </div>

      <h3 className={`mt-2`}>IP 时效</h3>
      <div className={`grid grid-cols-5 auto-cols-fr place-items-stretch gap-4`}>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
          <span>3 分钟</span>
          <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
        </button>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
          <span>3 分钟</span>
          <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
        </button>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
          <span>3 分钟</span>
          <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
        </button>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
          <span>3 分钟</span>
          <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
        </button>
        <button className={`p-4 bg-blue-50 border border-blue-500 rounded-lg flex flex-col gap-2 cursor-pointer`}>
          <span>3 分钟</span>
          <span className={`text-sm text-gray-500`}>￥0.005/IP</span>
        </button>
      </div>

      {/* 赠送 IP 数 */}
      <h3 className={`mt-2`}>赠送IP总数</h3>
      <div className={`flex gap-4`}>
        <button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>-</button>
        <input type="number" className={`w-40 h-10 border border-gray-200 rounded-sm`}/>
        <button className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}>+</button>
      </div>

      {/* 产品特性 */}
      <h3 className={`mt-2`}>产品特性</h3>
      <div className={`grid grid-cols-3 auto-rows-fr gap-y-4`}>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>支持高并发提取</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>完备的API接口</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>完备的API接口</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
        </p>
        <p className={`flex gap-2 items-center`}>
          <img src={`/product/check.svg`} alt={`check`} aria-hidden className={`w-4 h-4`}/>
          <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
        </p>
      </div>

      {/* 左右的边框 */}
      <div className={`absolute inset-0 my-8 border-l border-r border-gray-200 pointer-events-none`}></div>
    </div>
  )
}

function Right() {
  return (
    <div className={`flex-none basis-80 p-8 flex flex-col gap-4`}>
      <h3>订单详情</h3>
      <ul className={`flex flex-col gap-4`}>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>套餐名称</span>
          <span className={`text-sm`}>包量套餐</span>
        </li>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>套餐时长</span>
          <span className={`text-sm`}>3分钟</span>
        </li>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>购买 IP 量</span>
          <span className={`text-sm`}>1000个</span>
        </li>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>实到 IP 量</span>
          <span className={`text-sm`}>1000个</span>
        </li>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>原价</span>
          <span className={`text-sm`}>￥50</span>
        </li>
      </ul>
      <div className={`border-b border-gray-200`}></div>
      <p className={`flex justify-between items-center`}>
        <span>实付价格</span>
        <span className={`text-xl text-orange-500`}>￥50</span>
      </p>
      <div className={`flex gap-4`}>
        <button className={`flex-1 p-3 bg-blue-50 border border-blue-500 rounded-lg flex justify-center items-center gap-2`}>
          <img src={`/product/alipay.svg`} alt={`alipay`} className={`w-5 h-5`}/>
          <span className={`text-sm`}>支付宝</span>
        </button>
        <button className={`flex-1 p-3 bg-blue-50 border border-blue-500 rounded-lg flex justify-center items-center gap-2`}>
          <img src={`/product/wechat.svg`} alt={`wechat`} className={`w-5 h-5`}/>
          <span className={`text-sm`}>微信</span>
        </button>
      </div>
      <button className={`mt-4 h-12 bg-blue-500 text-white rounded-lg`}>
        立即支付
      </button>
    </div>
  )
}