<p><img src="upload/attach/202508/88_VVSVQATPD3WGTSF.png" width="801" height="716" /><img src="upload/attach/202508/88_MG473CFN4G77F2J.png" width="802" height="663" /></p>
<h3><span style="color: #000eff;">QQ会员风格设计，页面未作修改，如需使用请自行修改，直接替换</span></h3>
<pre class="language-markup"><code>&lt;div class="modal-body"&gt;
&lt;div class="container"&gt;

&lt;style&gt;
/ QQ会员风格设计 /
.vip-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
color: #fff;
}

.vip-header {
text-align: center;
margin-bottom: 30px;
position: relative;
}

.vip-header h2 {
font-size: 32px;
background: linear-gradient(90deg, #ff9700, #ff5600, #ff2975);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 15px;
font-weight: bold;
text-shadow: 0 0 10px rgba(255, 86, 0, 0.3);
}

.vip-header p {
color: #a0a0c0;
font-size: 16px;
}

.package-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}

.package-card {
flex: 1;
min-width: 180px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
position: relative;
overflow: hidden;
}

.package-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(255, 86, 0, 0.2);
background: rgba(255, 255, 255, 0.08);
}

.package-card.selected {
border: 2px solid #ff5600;
background: rgba(26, 26, 46, 0.6);
box-shadow: 0 0 15px rgba(255, 86, 0, 0.4);
}

.package-card.selected::before {
content: "✓";
position: absolute;
top: -10px;
right: -10px;
background: #ff5600;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}

.package-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}

.package-title.month { color: #ff9700; }
.package-title.season { color: #ff5600; }
.package-title.half_year { color: #ff2975; }
.package-title.year { color: #c2185b; }

.package-duration {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
background: linear-gradient(90deg, #ff9700, #ff5600);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.package-benefit {
text-align: center;
font-size: 14px;
color: #c5c5e0;
min-height: 40px;
}

.package-price {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffd700;
margin: 15px 0;
}

.package-grow {
text-align: center;
font-size: 14px;
color: #4fc3f7;
background: rgba(79, 195, 247, 0.1);
border-radius: 20px;
padding: 5px 10px;
margin-top: 10px;
}

.input-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
margin: 25px 0;
}

.input-group {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.input-label {
flex: 0 0 120px;
font-size: 16px;
color: #a0a0c0;
}

.input-field {
flex: 1;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 12px 15px;
color: white;
font-size: 16px;
}

.input-field:focus {
outline: none;
border-color: #ff5600;
box-shadow: 0 0 0 2px rgba(255, 86, 0, 0.2);
}

.summary-box {
display: flex;
justify-content: space-between;
margin-top: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 15px;
}

.summary-item {
text-align: center;
flex: 1;
}

.summary-label {
font-size: 14px;
color: #a0a0c0;
margin-bottom: 5px;
}

.summary-value {
font-size: 20px;
font-weight: bold;
}

.summary-value.payment { color: #ffd700; }
.summary-value.growth { color: #4fc3f7; }

.purchase-btn {
display: block;
width: 100%;
background: linear-gradient(90deg, #ff9700, #ff5600);
color: white;
border: none;
border-radius: 50px;
padding: 16px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 86, 0, 0.3);
}

.purchase-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(255, 86, 0, 0.4);
}

.purchase-btn:active {
transform: translateY(1px);
}

.vip-badge {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(90deg, #ff2975, #c2185b);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
}

.vip-footer {
text-align: center;
margin-top: 20px;
font-size: 12px;
color: #6c757d;
}

@media (max-width: 768px) {
.package-container {
flex-direction: column;
}

.input-group {
flex-direction: column;
align-items: flex-start;
}

.input-label {
margin-bottom: 10px;
}

.summary-box {
flex-direction: column;
gap: 15px;
}
}
&lt;/style&gt;

&lt;div class="vip-container"&gt;
&lt;div class="vip-header"&gt;
&lt;h2&gt;开通VIP会员&lt;/h2&gt;
&lt;p&gt;尊享多项特权，提升您的社交体验&lt;/p&gt;
&lt;div class="vip-badge"&gt;VIP尊享&lt;/div&gt;
&lt;/div&gt;

&lt;form action="my-tt_vip_open.htm" method="post" id="form"&gt;
&lt;!-- 购买选项 - 卡片式布局 --&gt;
&lt;div class="package-container"&gt;
&lt;label for="buy_month" class="package-card selected" id="month-card"&gt;
&lt;div class="package-title month"&gt;月度会员&lt;/div&gt;
&lt;div class="package-duration"&gt;31天&lt;/div&gt;
&lt;div class="package-benefit"&gt;基础特权体验，适合初次尝试&lt;/div&gt;
&lt;div class="package-price"&gt;30 点卷&lt;/div&gt;
&lt;div class="package-grow"&gt;赠送 300 成长值&lt;/div&gt;
&lt;input type="radio" name="buy_type" id="buy_month" value="month" checked="" style="display: none;"&gt;
&lt;/label&gt;

&lt;label for="buy_season" class="package-card" id="season-card"&gt;
&lt;div class="package-title season"&gt;季度会员&lt;/div&gt;
&lt;div class="package-duration"&gt;93+7天&lt;/div&gt;
&lt;div class="package-benefit"&gt;性价比之选，长期特权体验&lt;/div&gt;
&lt;div class="package-price"&gt;60 点卷&lt;/div&gt;
&lt;div class="package-grow"&gt;赠送 500 成长值&lt;/div&gt;
&lt;input type="radio" name="buy_type" id="buy_season" value="season" style="display: none;"&gt;
&lt;/label&gt;

&lt;label for="buy_half_year" class="package-card" id="half_year-card"&gt;
&lt;div class="package-title half_year"&gt;半年会员&lt;/div&gt;
&lt;div class="package-duration"&gt;186+21天&lt;/div&gt;
&lt;div class="package-benefit"&gt;超值体验，特权升级&lt;/div&gt;
&lt;div class="package-price"&gt;90 点卷&lt;/div&gt;
&lt;div class="package-grow"&gt;赠送 1000 成长值&lt;/div&gt;
&lt;input type="radio" name="buy_type" id="buy_half_year" value="half_year" style="display: none;"&gt;
&lt;/label&gt;

&lt;label for="buy_year" class="package-card" id="year-card"&gt;
&lt;div class="package-title year"&gt;年度会员&lt;/div&gt;
&lt;div class="package-duration"&gt;372+60天&lt;/div&gt;
&lt;div class="package-benefit"&gt;尊享特权，最佳选择&lt;/div&gt;
&lt;div class="package-price"&gt;120 点卷&lt;/div&gt;
&lt;div class="package-grow"&gt;赠送 3000 成长值&lt;/div&gt;
&lt;input type="radio" name="buy_type" id="buy_year" value="year" style="display: none;"&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;!-- 输入控制 --&gt;
&lt;div class="input-section"&gt;
&lt;div class="input-group"&gt;
&lt;div class="input-label"&gt;购买数量&lt;/div&gt;
&lt;input type="number" class="input-field" min="1" max="999" value="1" id="jnum" name="buy_num"&gt;
&lt;/div&gt;

&lt;div class="summary-box"&gt;
&lt;div class="summary-item"&gt;
&lt;div class="summary-label"&gt;需要支付&lt;/div&gt;
&lt;div class="summary-value payment" id="jpay"&gt;30 点卷&lt;/div&gt;
&lt;/div&gt;

&lt;div class="summary-item"&gt;
&lt;div class="summary-label"&gt;赠送成长值&lt;/div&gt;
&lt;div class="summary-value growth" id="jgrow"&gt;300&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;!-- 提交按钮 --&gt;
&lt;button type="button" class="purchase-btn" id="jbutton"&gt;立即开通会员&lt;/button&gt;
&lt;/form&gt;

&lt;div class="vip-footer"&gt;
&lt;p&gt;开通即代表同意《某某论坛会员服务协议[](@replace=10001)》&lt;/p&gt;
&lt;p&gt;&copy; 2025 某某论坛 版权所有&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;</code></pre>