mirror of
https://gitee.com/mirrors/AllinSSL.git
synced 2026-03-08 07:41:10 +08:00
882 lines
40 KiB
HTML
882 lines
40 KiB
HTML
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>域名注册 - 1分钟拥有专属域名</title>
|
||
<link href="/font-awesome.min.css" rel="stylesheet" />
|
||
</head>
|
||
|
||
<body>
|
||
<div class="font-sans bg-white text-secondary">
|
||
<!-- 首屏Banner -->
|
||
<section class="pt-28 pb-20 md:pt-24 md:pb-28 bg-gradient-to-b">
|
||
<div class="container mx-auto px-4">
|
||
<div class=" mx-auto text-center">
|
||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6 animate-fade-in">
|
||
低价域名，就选<span class="text-primary">宝塔域名</span>
|
||
</h1>
|
||
<p class="text-[clamp(1rem,2vw,1.25rem)] text-secondary-80 mb-10 max-w-2xl mx-auto">
|
||
.com低至53.9元，.cn低至19.9元！部分后缀新人9.9元注册
|
||
</p>
|
||
<!-- Tab功能区域 -->
|
||
<div class="max-w-3xl mx-auto" style="padding-bottom: 8px;">
|
||
<!-- Tab切换按钮 -->
|
||
<div class="domain-search-tabs">
|
||
<div class="tab-buttons flex">
|
||
<button id="tab-normal-index" class="tab-btn active">
|
||
域名注册
|
||
</button>
|
||
<button id="tab-ai-index" class="tab-btn">
|
||
<i class="fa fa-search"></i>AI域名推荐
|
||
<span class="new-badge">new</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 域名注册面板 -->
|
||
<div id="normal-search-panel-index" class="search-panel">
|
||
<div id="search-section" class="flex flex-col sm:flex-row gap-4">
|
||
<div class="input-container">
|
||
<input type="text" placeholder="输入您想注册的域名（如：yourbrand）" class="search-input" id="domain-query-input" />
|
||
<i class="fa fa-times-circle clear-input-button" id="clear-input-button" title="清空输入"></i>
|
||
<div class="mt-2 text-left"><a class="text-primary hover:text-primary" style="text-decoration: none;" href="/domain/domain/transfer">域名转入 .cn低至29.9元</a></div>
|
||
</div>
|
||
<div class="flex gap-4 relative">
|
||
<a id="domain-query-button"
|
||
class="primary-action-button text-lg hover:shadow-primary-30 hover:-translate-y-1">立即查询</a>
|
||
<a id="cart-button"
|
||
class="cart-action-button text-lg border-2 border-green-500 text-green-500 hover:bg-green-50 hover:-translate-y-1"
|
||
style="display: none;" href="/new/domain-query-register.html" title="查看购物车">
|
||
<i class="fa fa-shopping-cart mr-2"></i>
|
||
<span>购物车</span>
|
||
</a>
|
||
<a class="absolute btlink" href="https://qm.qq.com/q/fxbto4wZkk" target="_blank" rel="noopener" style="text-decoration: none;bottom: 0;right: 0;">加入QQ群</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI推荐面板 -->
|
||
<div id="ai-search-panel-index" class="search-panel hidden">
|
||
<div class="flex w-full">
|
||
<!-- 整体渐变容器 -->
|
||
<div class="ai-search-container">
|
||
<div class="ai-search-inner">
|
||
<form autocomplete="off">
|
||
<div class="flex flex-col lg:flex-row gap-3 w-full">
|
||
<!-- 品牌名称输入框 -->
|
||
<div class="ai-input-group flex-1">
|
||
<i class="ai-input-icon fa fa-building"></i>
|
||
<input
|
||
type="text"
|
||
id="brand-name-input-index"
|
||
class="ai-search-input"
|
||
placeholder="请输入品牌/公司/个人/产品名称"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
>
|
||
</div>
|
||
|
||
<!-- 行业信息输入框 -->
|
||
<div class="ai-input-group flex-1">
|
||
<i class="ai-input-icon fa fa-search"></i>
|
||
<input
|
||
type="text"
|
||
id="industry-input-index"
|
||
class="ai-search-input"
|
||
placeholder="请输入行业信息"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
>
|
||
</div>
|
||
|
||
<!-- AI推荐按钮 -->
|
||
<button type="button" id="ai-recommend-btn-index" class="ai-transparent-button">
|
||
<i class="ai-button-icon fa fa-search"></i>
|
||
<span class="ai-button-text">AI推荐</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 0.01秒杀活动区域 -->
|
||
<div class="seckill-activity-section py-20" id="seckill-activity" style="display: none;">
|
||
<div class="container">
|
||
<!-- 活动标题与规则说明 -->
|
||
<div class="activity-header text-center mb-6">
|
||
<h2 class="activity-title text-2xl md:text-3xl font-bold text-primary mb-3">
|
||
开学季专属福利 · 0.01元限量秒杀
|
||
</h2>
|
||
<div class="activity-rules flex flex-col sm:flex-row items-center justify-center gap-4 text-sm text-secondary-70">
|
||
<div class="rule-item flex items-center gap-2">
|
||
<i class="fa fa-star text-primary"></i>
|
||
<span>每日限量100个名额</span>
|
||
</div>
|
||
<div class="rule-item flex items-center gap-2">
|
||
<i class="fa fa-ban text-primary"></i>
|
||
<span>每个账号一个实名仅限参与1次</span>
|
||
</div>
|
||
<div class="rule-item flex items-center gap-2">
|
||
<i class="fa fa-ticket text-primary"></i>
|
||
<span>领取资格后即可使用</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 扁平化商品卡片 -->
|
||
<div class="seckill-flat-card">
|
||
<div class="flat-card-container">
|
||
<!-- 左侧：产品信息区 -->
|
||
<div class="product-info-section">
|
||
<div class="product-badge">
|
||
<i class="fa fa-fire"></i>
|
||
<span>10:00准时开抢</span>
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 class="product-name">域名注册 0.01元秒杀</h3>
|
||
<p class="product-desc">.icu/.xyz/.cyou后缀每日限量100个名额，每日上午10:00准时开枪</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：购买信息区（水平4列） -->
|
||
<div class="purchase-info-section">
|
||
<!-- 第1列：购买时长 -->
|
||
<div class="info-column">
|
||
<div class="column-label">购买时长</div>
|
||
<div class="column-value">1年</div>
|
||
</div>
|
||
|
||
<!-- 第2列：购买数量 -->
|
||
<div class="info-column">
|
||
<div class="column-label">购买数量</div>
|
||
<div class="column-value">1</div>
|
||
</div>
|
||
|
||
<!-- 第3列：价格信息 -->
|
||
<div class="info-column price-column">
|
||
<div class="current-price-info">
|
||
<span class="price-symbol">¥</span>
|
||
<span class="price-number">0.01</span>
|
||
<span class="price-unit">元/1年</span>
|
||
</div>
|
||
<div class="original-price-info">
|
||
<span>官网价格：</span>
|
||
<span class="strikethrough">¥97.9元/1年</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第4列：倒计时与操作 -->
|
||
<div class="info-column action-column">
|
||
<!-- 进度信息（活动开始后显示，替代倒计时） -->
|
||
<div class="progress-info" id="progress-info-section" style="display: none;">
|
||
<span class="progress-text" id="progress-text-flat">已售0%</span>
|
||
<div class="progress-bar-mini">
|
||
<div class="progress-fill-mini" id="progress-fill-flat" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 倒计时区域（活动开始前显示） -->
|
||
<div class="countdown-section" id="countdown-section">
|
||
<div class="countdown-label-mini">距离下次开抢</div>
|
||
<div class="countdown-display-mini">
|
||
<span class="time-digit-mini" id="countdown-hours-flat">00</span>
|
||
<span class="time-sep">:</span>
|
||
<span class="time-digit-mini" id="countdown-minutes-flat">00</span>
|
||
<span class="time-sep">:</span>
|
||
<span class="time-digit-mini" id="countdown-seconds-flat">00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="seckill-btn-flat" id="seckill-action-btn-flat">
|
||
<span class="btn-text">即将开始</span>
|
||
<div class="btn-loading" style="display: none;">
|
||
<i class="fa fa-spinner fa-spin"></i>
|
||
</div>
|
||
</button>
|
||
<div class="action-tips-mini" id="action-tips-flat">
|
||
活动即将开始，请耐心等待
|
||
</div>
|
||
</div>
|
||
<div class="action-tips-mini action-tips-footer-info">
|
||
* 活动截止时间是2025年9月15日，抢到秒杀资格后请尽快使用
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 组队领取top优惠券区域 -->
|
||
<div id="team-coupon" class="activity-container act-super_discount pb-[100px]" style="scroll-margin-top: 100px;">
|
||
<div class="title-container">
|
||
<div class="title-container-title">组队领取0.01元.top及超低价.com/.cn购买资格</div>
|
||
<div class="title-container-desc">
|
||
满4人即可享受超低价首年购，数量有限，先到先得，数量领完则活动截止
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="activity-simulated-table opt-super_discount w-container">
|
||
<div class="table-header">
|
||
<div class="table-header-item">
|
||
<div class="header-tr">
|
||
<div
|
||
class="table-header-th table-left border-left-[1px] border-top-[1px] bg-white">
|
||
</div>
|
||
<div
|
||
class="table-header-th !h-[60px] bg-[#E9F6EB] border-left-[2px] border-top-[2px] bg-white">
|
||
<div class="title-desc">超值优惠</div>
|
||
<div class="title">
|
||
<span>队长达标价格（首年）</span>
|
||
<span class="tips">最划算</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="table-header-th !h-[60px] bg-[#E9F6EB] border-left-[2px] border-top-[2px] bg-white">
|
||
<div class="title">
|
||
<span>队员达标价格（首年）</span>
|
||
</div>
|
||
</div>
|
||
<div class="table-header-th border-top-[1px] bg-white">
|
||
<div class="table-daily-price">
|
||
<div class="title">日常价格 (首年)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-body">
|
||
|
||
</div>
|
||
</div>
|
||
<a href="javascript:void(0)" id="initiate-team-btn" class="initiate-team-btn !w-[400px]" style="margin-top:20px">
|
||
<div class="team-icon"></div>
|
||
<span>发起组队</span>
|
||
</a>
|
||
|
||
<div class="action-activity-desc">
|
||
* 优惠资格有效期：4人组队成功后开始计时，72小时内有效，逾期未使用则自动失效，可再次组队领取。
|
||
<br>
|
||
* 使用限制：每个用户实名只能使用1次，优惠资格不可折现、不可转赠。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 价格表格 -->
|
||
<div class="mx-auto max-w-[900px]">
|
||
<div class="text-center mb-8">
|
||
<h2 class="text-clamp font-bold text-dark mb-4" style="margin-top: 120px">域名价格一览表</h2>
|
||
<div class="text-secondary-80 max-w-4xl mx-auto px-4">
|
||
透明的价格体系，无隐藏费用，让您明明白白消费，更多服务请<a class="border-b border-dashed border-primary text-secondary-80" href="https://qm.qq.com/q/fxbto4wZkk" target="_blank" rel="noopener" style="text-decoration: none;">加入QQ群</a>或者<span
|
||
class="contact-service-trigger cursor-pointer border-b border-dashed border-primary relative">请联系客服咨询
|
||
<!-- 二维码悬浮层 -->
|
||
<div
|
||
class="qr-code-popup absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 opacity-0 invisible transition-all duration-300 z-50">
|
||
<div class="bg-white rounded-lg shadow-xl p-4 border border-gray-200">
|
||
<div class="text-center mb-2">
|
||
<p class="text-sm font-medium text-gray-700">扫码联系客服</p>
|
||
</div>
|
||
<!-- 二维码SVG -->
|
||
<img src="https://www.bt.cn/Public/new/images/wechat-qrcode.png" alt="二维码"
|
||
class="w-24 h-24 mx-auto" />
|
||
<div class="text-center mt-2">
|
||
<p class="text-xs text-gray-500">微信客服</p>
|
||
</div>
|
||
<!-- 小箭头 -->
|
||
<div
|
||
class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-white">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto px-4 md:px-0">
|
||
<!-- 现代化价格表格 -->
|
||
<div class="modern-price-table bg-white overflow-hidden shadow-lg">
|
||
<!-- 表头 -->
|
||
<div class="price-table-header bg-gradient-to-r from-primary to-green-600 text-white py-4 px-4">
|
||
<div class="grid grid-cols-4 gap-4 text-center">
|
||
<div class="text-sm md:text-base font-semibold">域名后缀</div>
|
||
<div class="text-sm md:text-base font-semibold">首年价格</div>
|
||
<div class="text-sm md:text-base font-semibold">续费价格</div>
|
||
<div class="text-sm md:text-base font-semibold">转入续费</div>
|
||
</div>
|
||
</div>
|
||
<!-- 表格内容 -->
|
||
<div class="price-table-body" id="price-table-body">
|
||
<!-- 动态生成的价格表格内容 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 为什么选择我们 -->
|
||
<section id="features" class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-clamp font-bold text-dark mb-4">我们的优势</h2>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 max-w-6xl mx-auto px-4 m">
|
||
<!-- 特点1 -->
|
||
<div class="bg-light rounded-xl p-8 card-shadow hover-lift">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-bolt text-primary text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 text-dark">极速注册，实时生效</h3>
|
||
<p class="text-secondary-80 text-sm">
|
||
"查询→购买→使用"在已实名的情况下全流程最快1分钟搞定，付款即拥有域名所有权，支持立即解析绑定网站。ps:实名认证最快5分钟内搞定审核！
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 特点2 -->
|
||
<div class="bg-light rounded-xl p-8 card-shadow hover-lift">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-dollar text-primary text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 text-dark">更低的价格，让好域名触手可及</h3>
|
||
<p class="text-secondary-80 text-sm">
|
||
我们的域名注册费用极具性价比，几乎是市场上最低的价格，让创业和建站负担更低。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 特点3 -->
|
||
<div class="bg-light rounded-xl p-8 card-shadow hover-lift">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-tag text-primary text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 text-dark">全程无套路，价格透明到底</h3>
|
||
<p class="text-secondary-80 text-sm">
|
||
首年价格、续费价格、转入费用全部明示，无隐藏手续费，无强制捆绑消费，买不买、续不续，你说了算。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 特点4 -->
|
||
<div class="bg-light rounded-xl p-8 card-shadow hover-lift">
|
||
<div class="w-12 h-12 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-server text-primary text-xl"></i>
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 text-dark">协同宝塔面板，一站式完成建站与SSL签发</h3>
|
||
<p class="text-secondary-80 text-sm">
|
||
与宝塔面板深度集成，域名注册后可一键部署网站、自动申请SSL证书，省去繁琐配置，让您专注于网站内容创作。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 注册流程 -->
|
||
<section id="process" class="py-20 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-clamp font-bold text-dark mb-4">注册域名，就像网购一样简单</h2>
|
||
</div>
|
||
|
||
<div class="max-w-6xl mx-auto px-4 md:px-0">
|
||
<!-- 移动端步骤切换器 -->
|
||
<div class="md:hidden" id="step-switcher">
|
||
<div class="relative bg-light rounded-2xl p-6">
|
||
<!-- 步骤指示器 -->
|
||
<div class="flex justify-center mb-6">
|
||
<div class="flex space-x-2">
|
||
<div class="step-indicator w-2 h-2 rounded-full bg-primary cursor-pointer" data-step="0"></div>
|
||
<div class="step-indicator w-2 h-2 rounded-full bg-gray-300 cursor-pointer" data-step="1"></div>
|
||
<div class="step-indicator w-2 h-2 rounded-full bg-gray-300 cursor-pointer" data-step="2"></div>
|
||
<div class="step-indicator w-2 h-2 rounded-full bg-gray-300 cursor-pointer" data-step="3"></div>
|
||
<div class="step-indicator w-2 h-2 rounded-full bg-gray-300 cursor-pointer" data-step="4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤内容容器 -->
|
||
<div class="step-container relative overflow-hidden" style="height: 160px">
|
||
<div class="step-wrapper flex transition-transform duration-300 ease-in-out" style="width: 500%">
|
||
<div class="step-content text-center flex-shrink-0" style="width: 20%" id="mobile-step-0">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg mx-auto">
|
||
1
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-lg">查域名</h3>
|
||
<p class="text-sm text-secondary-80">输入你想要的域名，点击查询是否可注册</p>
|
||
</div>
|
||
|
||
<div class="step-content text-center flex-shrink-0" style="width: 20%" id="mobile-step-1">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg mx-auto">
|
||
2
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-lg">选后缀</h3>
|
||
<p class="text-sm text-secondary-80">从可注册列表中挑选心仪的后缀</p>
|
||
</div>
|
||
|
||
<div class="step-content text-center flex-shrink-0" style="width: 20%" id="mobile-step-2">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg mx-auto">
|
||
3
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-lg">填信息</h3>
|
||
<p class="text-sm text-secondary-80">填写简单个人/企业信息，全程加密</p>
|
||
</div>
|
||
|
||
<div class="step-content text-center flex-shrink-0" style="width: 20%" id="mobile-step-3">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg mx-auto">
|
||
4
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-lg">付个钱</h3>
|
||
<p class="text-sm text-secondary-80">支持多种支付方式，10秒完成支付</p>
|
||
</div>
|
||
|
||
<div class="step-content text-center flex-shrink-0" style="width: 20%" id="mobile-step-4">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg mx-auto">
|
||
5
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-lg">用起来</h3>
|
||
<p class="text-sm text-secondary-80">跳转解析页面，绑定IP即可使用</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航按钮 -->
|
||
<div class="flex justify-between items-center mt-6">
|
||
<button
|
||
class="prev-btn w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-400 disabled:opacity-50"
|
||
disabled aria-label="上一步">
|
||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||
</button>
|
||
<span class="text-sm text-secondary-70" id="step-counter">1 / 5</span>
|
||
<button class="next-btn w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center"
|
||
aria-label="下一步">
|
||
<i class="fa fa-chevron-right" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤条 -->
|
||
<div class="hidden md:block relative">
|
||
<div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
|
||
|
||
<div class="grid grid-cols-5 gap-8 relative z-10">
|
||
<!-- 步骤1 -->
|
||
<div class="flex flex-row items-center text-center justify-center">
|
||
<div class="flex flex-col items-center">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg">
|
||
1
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-base">查域名</h3>
|
||
<p class="text-sm text-secondary-80 whitespace-pre-line">输入你想要的域名<br />点击查询是否可注册</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤2 -->
|
||
<div class="flex flex-row items-center text-center justify-center">
|
||
<div class="flex flex-col items-center">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg">
|
||
2
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-base">选后缀</h3>
|
||
<p class="text-sm text-secondary-80 whitespace-pre-line">从可注册列表中<br />挑选心仪的后缀</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤3 -->
|
||
<div class="flex flex-row items-center text-center justify-center">
|
||
<div class="flex flex-col items-center">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg">
|
||
3
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-base">填信息</h3>
|
||
<p class="text-sm text-secondary-80 whitespace-pre-line">填写简单个人/企业信息<br />全程加密</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤4 -->
|
||
<div class="flex flex-row items-center text-center justify-center">
|
||
<div class="flex flex-col items-center">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg">
|
||
4
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-base">付个钱</h3>
|
||
<p class="text-sm text-secondary-80 whitespace-pre-line">支持多种支付方式<br />10秒完成支付</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤5 -->
|
||
<div class="flex flex-row items-center text-center justify-center">
|
||
<div class="flex flex-col items-center">
|
||
<div
|
||
class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mb-4 font-bold text-xl shadow-lg">
|
||
5
|
||
</div>
|
||
<h3 class="font-bold text-dark mb-2 text-base">用起来</h3>
|
||
<p class="text-sm text-secondary-80 whitespace-pre-line">跳转解析页面<br />绑定IP即可使用</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示语 -->
|
||
<div class="text-center mt-12 text-sm text-secondary-70">
|
||
<p>
|
||
<i class="fa fa-info-circle text-primary mr-1"></i>
|
||
全程有引导，新手也能1次搞定，不懂可随时call客服
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section id="faq" class="py-20 bg-rating">
|
||
<div class="container mx-auto px-4">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-clamp font-bold text-dark mb-4">这些问题，90%的人都会问</h2>
|
||
</div>
|
||
|
||
<div class="max-w-3xl mx-auto px-4 md:px-0">
|
||
<!-- FAQ 折叠面板 -->
|
||
<div class="space-y-3 md:space-y-4">
|
||
<!-- 问题1 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>域名注册后，能改名字吗？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">
|
||
不能直接改，但支持"域名过户"（转给他人）或"重新注册新域名"，建议注册前仔细确认哦。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 问题2 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>个人能注册.cn后缀吗？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">可以，只需提供身份证实名认证，10分钟审核通过，无额外要求。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 问题3 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>如果域名到期忘了续费，会怎么样？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">
|
||
到期后有30天赎回期，期间可正常续费；超过赎回期未处理，域名会被释放至公共池，可能被他人抢注，所以记得看提醒呀～
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 问题4 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>注册后不想用了，能退款吗？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">
|
||
域名属于即时产品，以最终付款和提交注册成功为准。域名注册成功后将不支持退款，请仔细核对域名。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 问题5 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>域名注册后去哪里备案？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">
|
||
域名备案需要在您的网站托管服务商处进行，不是在域名注册商处。请前往您网站部署的云服务商（如阿里云、腾讯云等）的备案管理系统提交备案申请。详情请参考<a class="text-[#20a53a] hover:text-[#20a53a]-800 text-sm underline cursor-pointer" href="https://docs.bt.cn/domain/user-guide/domain-filing" target="_blank" rel="noopener noreferrer">帮助文档</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 问题6 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>堡塔怎么转入其他注册商的域名？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">
|
||
域名转入需要满足注册满60天、距到期15天以上等条件，在原注册商获取转移密码后，登录堡塔域名控制台提交转入申请并支付费用（含1年续费），通常1-7个工作日完成。详情请参考文档：<a class="text-[#20a53a] hover:text-[#20a53a]-800 text-sm underline cursor-pointer" href="https://docs.bt.cn/domain/user-guide/domain-transfer-in" target="_blank" rel="noopener noreferrer">帮助文档</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 问题7 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<button
|
||
class="text-sm faq-toggle w-full cursor-pointer flex justify-between items-center p-6 text-left font-bold text-dark hover:bg-gray-50 transition-colors">
|
||
<span>域名注册失败了怎么办？</span>
|
||
<i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
|
||
</button>
|
||
<div class="faq-content hidden p-6">
|
||
<p class="text-secondary-80 text-sm">
|
||
域名注册失败通常是因为域名已被注册、信息模板异常、包含敏感词或支付问题等原因，请根据具体错误提示进行相应处理，如仍有问题请联系客服。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部行动区 -->
|
||
<section class="pt-24 md:pt-32 pb-16 md:pb-20">
|
||
<div class="container mx-auto px-4">
|
||
<div class="max-w-3xl mx-auto text-center">
|
||
<h2 class="text-2xl md:text-clamp font-bold text-dark mb-4 md:mb-6" style="padding-top: 60px">
|
||
使用宝塔注册域名，您的业务上线快人一步
|
||
</h2>
|
||
<button id="scroll-to-search-btn"
|
||
class="primary-action-button inline-block px-8 md:px-10 py-4 md:py-5 text-lg md:text-lg mb-6 md:mb-8">
|
||
立即查询您的专属域名
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Notification模板 -->
|
||
<!-- Notification容器模板 -->
|
||
<script type="text/template" id="notification-container-template">
|
||
<div id="{{id}}" class="fixed {{positionClass}} z-{{zIndex}} transform translate-y-8 opacity-0 transition-all duration-300 ease-out">
|
||
<!-- Notification内容将动态插入 -->
|
||
</div>
|
||
</script>
|
||
|
||
<!-- Notification内容模板 -->
|
||
<script type="text/template" id="notification-content-template">
|
||
<div class="{{bgClass}} {{textClass}} px-6 py-4 rounded-lg shadow-lg flex items-center min-w-[300px] max-w-[400px]">
|
||
<i class="fa {{iconClass}} {{iconColor}} text-xl mr-3 flex-shrink-0"></i>
|
||
<div class="flex-1">
|
||
{{#if title}}<div class="font-medium mb-1">{{title}}</div>{{#end if}}
|
||
<div class="{{#if title}}text-sm{{#else}}font-medium{{#end if}}">{{message}}</div>
|
||
</div>
|
||
{{#if closable}}
|
||
<button class="ml-3 text-white hover:text-gray-200 transition-colors notification-close">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
{{#end if}}
|
||
</div>
|
||
</script>
|
||
|
||
<!-- 价格表-行模板（供 src/pages/index.ts 的 renderTemplateList 使用） -->
|
||
<script type="text/template" id="tpl-price-row">
|
||
<div class="price-row grid grid-cols-4 gap-4 py-4 px-4 hover:bg-gray-50 transition-all duration-200 border-b border-gray-100 last:border-b-0">
|
||
<div class="price-cell text-center">
|
||
<span class="font-medium text-dark text-sm md:text-base">{{suffix}}</span>
|
||
</div>
|
||
<div class="price-cell text-center">
|
||
<div class="price-main text-orange-400 text-sm md:text-base">
|
||
{{firstYearPrice}}元/首年
|
||
{{#if isWan}}
|
||
<span class="text-[10px] text-gray-500">(仅限前十万单)</span>
|
||
{{#end if}}
|
||
</div>
|
||
<div class="price-original text-gray-400 line-through text-xs mt-1">原价{{originalPrice}}元</div>
|
||
</div>
|
||
<div class="price-cell text-center">
|
||
<div class="price-main text-secondary-70 text-sm md:text-base">{{renewPrice}}元/年</div>
|
||
<div class="price-original text-gray-400 line-through text-xs mt-1">原价{{originalPrice}}元</div>
|
||
</div>
|
||
<div class="price-cell text-center">
|
||
<div class="price-main text-secondary-70 text-sm md:text-base">{{transferPrice}}元/年</div>
|
||
<div class="price-original text-gray-400 line-through text-xs mt-1">原价{{originalPrice}}元</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/template" id="team-rule-modal-template">
|
||
<div>
|
||
<div class="rule-item">
|
||
<div class="flex items-center gap-x-3 mb-4">
|
||
<img src="/static/new/images/724/user-team.svg" />
|
||
<h3 class="text-2xl font-bold">组队规则</h3>
|
||
</div>
|
||
<div class="pl-12 text-[#666] leading-loose">
|
||
<p><span class="font-bold text-black">组队时间：</span>即日起 - 9月30日，逾期未完成组队视为自动放弃参与资格</p>
|
||
<p><span class="font-bold text-black">活动对象：</span>所有宝塔平台注册用户均可参与本次组队活动</p>
|
||
<p><span class="font-bold text-black">发起组队：</span>用户发起组队，无限制条件，新老用户均可参加，完成指定人数，领取对应的优惠资格。.top后缀4.9元组队活动与0.01元组队活动仅可参与一个,如需更换请
|
||
<span class="cursor-pointer border-b border-dashed border-primary relative rule-customer">
|
||
联系客服
|
||
</span>。</p>
|
||
<p><span
|
||
class="font-bold text-black">组队邀请：</span>发起者通过活动页面生成专属邀请链接或二维码，邀请好友加入组队，被邀请用户需在活动时间内点击链接或扫描二维码并完成平台注册（已注册用户直接加入），才算成功加入组队。
|
||
</p>
|
||
<p><span
|
||
class="font-bold text-black">组队成功：</span>达到所需组队人数后，系统自动判定组队成功，若在活动时间截止时，组队人数未达标，则该组队失败，队员无法获得优惠资格。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="rule-item" style="margin-top: 15px;">
|
||
<div class="flex items-center gap-x-3 mb-4">
|
||
<img src="/static/new/images/724/coupon.svg" />
|
||
<h3 class="text-2xl font-bold">优惠使用规则</h3>
|
||
</div>
|
||
<div class="pl-12 text-[#666] leading-loose">
|
||
<p><span class="font-bold text-black">优惠资格有效期：</span>4人组队成功后开始计时，72小时内有效，逾期未使用则自动失效，可再次组队领取。</p>
|
||
<p><span class="font-bold text-black">使用限制：</span>0.01元购买资格仅用于.xyz/.icu/.cyou后缀，且仅可以使用1次，优惠资格不可折现、不可转赠。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/template" id="team-modal-template">
|
||
<div class="team-modal-container">
|
||
<div class="team-modal-header">
|
||
<h2 class="team-modal-title">确认发起组队</h2>
|
||
<!-- <p class="team-modal-subtitle">组队成功后将根据最终人数自动发放对应的购买资格</p> -->
|
||
</div>
|
||
<div class="team-modal-details">
|
||
<!-- <h4>优惠详情</h4> -->
|
||
<div class="team-modal-table">
|
||
<div class="team-modal-table-header">
|
||
<div class="team-modal-table-cell" style="text-align: left;">参与活动的域名后缀</div>
|
||
<div class="team-modal-table-cell">队长价格 (首年)</div>
|
||
<div class="team-modal-table-cell">队员价格 (首年)</div>
|
||
</div>
|
||
<div class="team-modal-table-body">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="team-modal-notes">
|
||
<h4>重要说明</h4>
|
||
<ol>
|
||
<li>每个账户只能参与1次组队，参与过队长/队员的，无法再次参与其他组队。</li>
|
||
<li>4人组队成功后开始计时，72小时内有效，逾期未使用则自动失效，可再次组队领取。</li>
|
||
<li>每个用户实名只能使用1次，优惠资格不可折现、不可转赠。</li>
|
||
</ol>
|
||
</div>
|
||
<div class="team-modal-footer">
|
||
<button class="btn btn-cancel">取消</button>
|
||
<button class="btn btn-confirm">确认发起</button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/template" id="my-team-modal-template">
|
||
<div class="my-team-container">
|
||
<div class="team-modal-header">
|
||
<h2 class="team-modal-title">我的队伍 (1人)</h2>
|
||
<p class="team-modal-subtitle">继续邀请好友, 获得购买资格哦</p>
|
||
</div>
|
||
<div class="my-team-body">
|
||
<div class="current-tier-section">
|
||
<div class="tier-content-wrapper">
|
||
<div class="tier-card">
|
||
<div class="tier-info">
|
||
<p id="my-team-milestone-info">当前 <strong>1</strong> 人，再邀请 <strong>2</strong> 人即可达标 <strong>【3人组队目标】</strong><span class="btn-quit refresh-team-icon"></span></p>
|
||
<p class="tier-description" id="my-team-milestone-desc">3人组队目标将享受单域名78元优惠, 通配符588元优惠</p>
|
||
</div>
|
||
<!-- The inline styles for the progress bar are kept here as they are dynamically updated by JavaScript -->
|
||
<div class="tier-progress-bar" id="my-team-progress-bar">
|
||
<div class="progress-line" style="width: 0%;"></div>
|
||
<div class="progress-milestone active" style="left: 10px" data-member="1">
|
||
<div class="progress-milestone-icon no-icon"></div>
|
||
<span>1人</span>
|
||
</div>
|
||
<div class="progress-milestone" style="left: 33.3%;" data-member="3">
|
||
<div class="progress-milestone-icon">
|
||
<img src="/static/new/images/724/discount.svg" alt="gift">
|
||
</div>
|
||
<span>2人</span>
|
||
</div>
|
||
<div class="progress-milestone" style="left: 66.6%;" data-member="5">
|
||
<div class="progress-milestone-icon">
|
||
<img src="/static/new/images/724/discount.svg" alt="gift">
|
||
</div>
|
||
<span>3人</span>
|
||
</div>
|
||
<div class="progress-milestone" style="right:-20px" data-member="10">
|
||
<div class="progress-milestone-icon">
|
||
<img src="/static/new/images/724/discount.svg" alt="gift">
|
||
</div>
|
||
<span>4人</span>
|
||
</div>
|
||
</div>
|
||
<div class="tier-members" id="my-team-members">
|
||
<div class="member-item">
|
||
<div class="member-avatar leader">
|
||
<img src="/static/new/images/724/avatar.svg" alt="队长">
|
||
</div>
|
||
<span class="member-label">队长</span>
|
||
</div>
|
||
<div class="member-item add-member-item">
|
||
<div class="add-member"></div>
|
||
<span class="member-label">添加成员</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tier-status" id="my-team-status">
|
||
<div class="status-icon"></div>
|
||
<span>未达标</span>
|
||
<p>继续邀请好友加入</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="team-modal-body my-team-share-section">
|
||
<div id="claimed-coupons-section" class="claimed-coupons-section">
|
||
<h4>已解锁的购买资格(已自动发放)</h4>
|
||
<ul id="claimed-coupons-list" class="coupon-list"></ul>
|
||
</div>
|
||
<div id="my-team-qr-section" class="team-qr-code-section">
|
||
<h4>微信扫码参与组队</h4>
|
||
<div id="my-team-qr-code"></div>
|
||
<p>使用微信扫码上方二维码即可快速加入队伍</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="team-modal-footer">
|
||
<!-- <button class="btn btn-quit">退出组队</button> -->
|
||
<button class="btn btn-invite">邀请好友加入</button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
</div>
|
||
|
||
<!-- 组队模态框 -->
|
||
<div id="custom-modal" class="modal-overlay">
|
||
<div class="modal-content">
|
||
<button class="modal-close" type="button" title="关闭"></button>
|
||
<div class="modal-body">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- JavaScript -->
|
||
<script type="text/javascript" src="/jquery-3.6.0.min.js"></script>
|
||
<script type="text/javascript" src="https://www.bt.cn/Public/js/qrcode.min.js"></script>
|
||
<script type="text/javascript" src="https://www.bt.cn/Public/js/clipboard.min.js?2.2"></script>
|
||
<script type="module" src="src/pages/index.ts"></script>
|
||
|
||
</body>
|
||
|
||
</html> |