server
/
new-api
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 Commits
2 Branches
352 MiB
 
 
 
Tree: 4533c24fa1
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '4533c24fa1'
${ noResults }
new-api/.superpowers/brainstorm/6600-1777284109/content/button-position.html

72 lines
4.8 KiB
Raw Blame History 

  1. <h2>"去体验"按钮位置选择</h2>

  2. <p class="subtitle">当前模型卡片结构示意，请选择按钮的最佳放置位置</p>

  3. 

  4. <div class="cards">

  5.   <div class="card" data-choice="bottom-center" onclick="toggleSelect(this)">

  6.     <div class="card-image">

  7.       <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; color: white;">

  8.         <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">

  9.           <div style="width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;">GPT</div>

  10.           <span style="font-weight:600;font-size:16px;">gpt-4o</span>

  11.           <span style="margin-left:auto;font-size:12px;opacity:0.7;">📋</span>

  12.         </div>

  13.         <p style="font-size:13px;opacity:0.85;margin:0 0 12px 0;line-height:1.4;">OpenAI 旗舰多模态模型，支持文本和图像输入输出</p>

  14.         <div style="display:flex;gap:6px;margin-bottom:16px;">

  15.           <span style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;">按量计费</span>

  16.           <span style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;">多模态</span>

  17.         </div>

  18.         <button style="width:100%;padding:8px 0;background:rgba(255,255,255,0.25);border:1px solid rgba(255,255,255,0.4);border-radius:6px;color:white;font-size:13px;cursor:pointer;">去体验 →</button>

  19.       </div>

  20.     </div>

  21.     <div class="card-body">

  22.       <h3>方案 A：卡片底部居中</h3>

  23.       <p>按钮占据卡片底部整行，醒目且易于点击。适合卡片高度固定的场景。</p>

  24.     </div>

  25.   </div>

  26. 

  27.   <div class="card" data-choice="footer-right" onclick="toggleSelect(this)">

  28.     <div class="card-image">

  29.       <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; color: white;">

  30.         <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">

  31.           <div style="width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;">GPT</div>

  32.           <span style="font-weight:600;font-size:16px;">gpt-4o</span>

  33.           <span style="margin-left:auto;font-size:12px;opacity:0.7;">📋</span>

  34.         </div>

  35.         <p style="font-size:13px;opacity:0.85;margin:0 0 12px 0;line-height:1.4;">OpenAI 旗舰多模态模型，支持文本和图像输入输出</p>

  36.         <div style="display:flex;align-items:center;gap:6px;">

  37.           <span style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;">按量计费</span>

  38.           <span style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;">多模态</span>

  39.           <span style="margin-left:auto;"></span>

  40.           <button style="padding:5px 12px;background:rgba(255,255,255,0.25);border:1px solid rgba(255,255,255,0.4);border-radius:6px;color:white;font-size:12px;cursor:pointer;">去体验 →</button>

  41.         </div>

  42.       </div>

  43.     </div>

  44.     <div class="card-body">

  45.       <h3>方案 B：标签行右侧</h3>

  46.       <p>按钮与标签同行，紧凑不占额外空间。但可能在小屏幕上显得拥挤。</p>

  47.     </div>

  48.   </div>

  49. 

  50.   <div class="card" data-choice="header-right" onclick="toggleSelect(this)">

  51.     <div class="card-image">

  52.       <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; color: white;">

  53.         <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">

  54.           <div style="width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;">GPT</div>

  55.           <span style="font-weight:600;font-size:16px;">gpt-4o</span>

  56.           <span style="margin-left:auto;"></span>

  57.           <button style="padding:5px 12px;background:rgba(255,255,255,0.25);border:1px solid rgba(255,255,255,0.4);border-radius:6px;color:white;font-size:12px;cursor:pointer;">去体验 →</button>

  58.           <span style="font-size:12px;opacity:0.7;">📋</span>

  59.         </div>

  60.         <p style="font-size:13px;opacity:0.85;margin:0 0 12px 0;line-height:1.4;">OpenAI 旗舰多模态模型，支持文本和图像输入输出</p>

  61.         <div style="display:flex;gap:6px;">

  62.           <span style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;">按量计费</span>

  63.           <span style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px;font-size:11px;">多模态</span>

  64.         </div>

  65.       </div>

  66.     </div>

  67.     <div class="card-body">

  68.       <h3>方案 C：标题行右侧</h3>

  69.       <p>按钮在模型名称旁边，最显眼的位置。但与复制按钮竞争空间。</p>

  70.     </div>

  71.   </div>

  72. </div>