论坛任务奖励更新
<!----- 任务卡片：自适应 + 多配色 -----><div id="ycoo-task-card">
<ul class="task-list">
<!-- 推广 -->
<li class="task-item daily">
<div class="task-main">
<strong class="task-name">推广任务</strong>
<span class="task-tag">每日</span>
<p class="task-desc">注册再+5</p>
</div>
<span class="task-reward">+20星币</span>
</li>
<!-- 发帖 -->
<li class="task-item daily">
<div class="task-main">
<strong class="task-name">发帖任务</strong>
<span class="task-tag">每日</span>
</div>
<span class="task-reward">+5星币</span>
</li>
<!-- 每日签到 -->
<li class="task-item daily">
<div class="task-main">
<strong class="task-name">每日签到</strong>
<span class="task-tag">每日</span>
<p class="task-desc">普通1-2星币，繁星2-5星币</p>
</div>
<span class="task-reward">随机</span>
</li>
<!-- 邮箱验证 -->
<li class="task-item once">
<div class="task-main">
<strong class="task-name">邮箱验证</strong>
<span class="task-tag">一次性</span>
</div>
<span class="task-reward">+3星币</span>
</li>
<!-- 上传头像 -->
<li class="task-item once">
<div class="task-main">
<strong class="task-name">上传头像</strong>
<span class="task-tag">一次性</span>
</div>
<span class="task-reward">+3星币</span>
</li>
</ul>
<footer>
<a class="task-btn" href="https://ycoo.net/home.php?mod=task&item=doing" target="_blank">
立即前往任务页
</a>
</footer>
</div>
<style>
:root{
/* 主色 & 辅助色 */
--primary:#3EBBFD;
--deep:#0078D4;
--light:#E5F5FF;
--bg:#fff;
--radius:12px;
--shadow:0 2px 10px rgba(0,0,0,.06);
--text:#222;
--sub:#666;
}
/* 通用重置 */
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
#ycoo-task-card{
max-width:640px;
margin:16px auto;
background:var(--bg);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
/* 列表 */
.task-list{list-style:none;}
.task-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 24px;
border-bottom:1px solid #f0f0f0;
transition:.2s;
}
.task-item:hover{background:var(--light);}
.task-main{flex:1;}
.task-name{font-size:16px;color:var(--text);}
.task-tag{
display:inline-block;
margin-left:8px;
padding:2px 6px;
font-size:11px;
color:#fff;
border-radius:3px;
}
.task-item.daily .task-tag{background:#3EBBFD;}
.task-item.once.task-tag{background:#FF7A45;}
.task-desc{margin-top:4px;font-size:13px;color:var(--sub);}
.task-reward{
font-size:17px;
font-weight:600;
color:var(--deep);
white-space:nowrap;
}
/* 底部按钮 */
footer{padding:16px 24px;text-align:center;background:#fff;}
.task-btn{
display:inline-block;
padding:10px 32px;
font-size:15px;
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--deep));
border-radius:50px;
text-decoration:none;
transition:.25s;
}
.task-btn:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(62,187,253,.35);
}
/* ====== 响应式断点 ====== */
@media(max-width:480px){
#ycoo-task-card{margin:0;border-radius:0;box-shadow:none;}
.task-item{
flex-direction:column;
align-items:flex-start;
padding:16px 20px;
}
.task-reward{margin-top:6px;align-self:flex-end;}
footer{padding:14px 20px;}
}
@media(min-width:481px) and (max-width:768px){
.task-item{padding:16px 20px;}
}
@media(min-width:769px){
.task-item{padding:18px 24px;}
}
</style>
支持支持支持 有点麻烦 收到 收到，包回复信息的 支持一下 收到 好的 收到 这个还挺好的