麻将机排行榜功能设计
本文目录导读：
我将设计一个直观且功能完善的麻将机排行榜页面，展示玩家排名、胜率、积分等关键数据。
设计思路
- 采用卡片式布局展示排行榜
- 使用徽章标识排名前列的玩家
- 提供多种排序选项和筛选功能
- 添加搜索功能便于查找特定玩家
- 使用响应式设计确保在不同设备上的良好体验
实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">麻将机排行榜</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: #333;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.search-box {
display: flex;
align-items: center;
flex: 1;
max-width: 400px;
}
.search-box input {
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 50px;
width: 100%;
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
}
.search-box input:focus {
border-color: #1a2a6c;
}
.filters {
display: flex;
gap: 15px;
}
select {
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 50px;
background: white;
font-size: 1rem;
outline: none;
cursor: pointer;
}
.leaderboard {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.player-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.player-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.player-header {
display: flex;
align-items: center;
padding: 20px;
background: linear-gradient(to right, #1a2a6c, #2a4ba0);
color: white;
}
.rank {
font-size: 2rem;
font-weight: bold;
margin-right: 15px;
min-width: 40px;
text-align: center;
}
.top-1 { color: #FFD700; }
.top-2 { color: #C0C0C0; }
.top-3 { color: #CD7F32; }
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
margin-right: 15px;
}
.player-info {
flex: 1;
}
.player-name {
font-size: 1.3rem;
margin-bottom: 5px;
}
.player-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
}
.stat {
text-align: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: #1a2a6c;
}
.stat-label {
font-size: 0.9rem;
color: #777;
}
.progress-bar {
height: 8px;
background: #eee;
border-radius: 4px;
overflow: hidden;
margin-top: 5px;
}
.progress {
height: 100%;
background: linear-gradient(to right, #1a2a6c, #2a4ba0);
border-radius: 4px;
}
.player-actions {
display: flex;
justify-content: space-around;
padding: 15px;
border-top: 1px solid #eee;
}
.btn {
padding: 8px 15px;
border: none;
border-radius: 50px;
background: #1a2a6c;
color: white;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
.btn:hover {
background: #2a4ba0;
}
@media (max-width: 768px) {
.controls {
flex-direction: column;
gap: 15px;
}
.search-box {
max-width: 100%;
}
.filters {
width: 100%;
justify-content: space-around;
}
.leaderboard {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-crown"></i> 麻将机排行榜</h1>
<p class="subtitle">顶尖玩家的荣誉殿堂</p>
</header>
<div class="controls">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索玩家...">
</div>
<div class="filters">
<select>
<option>全部地区</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>成都</option>
</select>
<select>
<option>按积分排序</option>
<option>按胜率排序</option>
<option>按对局数排序</option>
<option>按连胜排序</option>
</select>
</div>
</div>
<div class="leaderboard">
<!-- 玩家卡片 1 -->
<div class="player-card">
<div class="player-header">
<div class="rank top-1">1</div>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="玩家头像" class="avatar">
<div class="player-info">
<div class="player-name">麻将大师</div>
<div>上海 · 宗师段位</div>
</div>
</div>
<div class="player-stats">
<div class="stat">
<div class="stat-value">8,642</div>
<div class="stat-label">积分</div>
</div>
<div class="stat">
<div class="stat-value">78%</div>
<div class="stat-label">胜率</div>
<div class="progress-bar">
<div class="progress" style="width: 78%"></div>
</div>
</div>
<div class="stat">
<div class="stat-value">324</div>
<div class="stat-label">对局数</div>
</div>
<div class="stat">
<div class="stat-value">15</div>
<div class="stat-label">连胜</div>
</div>
</div>
<div class="player-actions">
<button class="btn"><i class="fas fa-user-plus"></i> 关注</button>
<button class="btn"><i class="fas fa-chart-line"></i> 战绩</button>
</div>
</div>
<!-- 玩家卡片 2 -->
<div class="player-card">
<div class="player-header">
<div class="rank top-2">2</div>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="玩家头像" class="avatar">
<div class="player-info">
<div class="player-name">幸运女神</div>
<div>北京 · 王者段位</div>
</div>
</div>
<div class="player-stats">
<div class="stat">
<div class="stat-value">7,985</div>
<div class="stat-label">积分</div>
</div>
<div class="stat">
<div class="stat-value">72%</div>
<div class="stat-label">胜率</div>
<div class="progress-bar">
<div class="progress" style="width: 72%"></div>
</div>
</div>
<div class="stat">
<div class="stat-value">298</div>
<div class="stat-label">对局数</div>
</div>
<div class="stat">
<div class="stat-value">12</div>
<div class="stat-label">连胜</div>
</div>
</div>
<div class="player-actions">
<button class="btn"><i class="fas fa-user-plus"></i> 关注</button>
<button class="btn"><i class="fas fa-chart-line"></i> 战绩</button>
</div>
</div>
<!-- 玩家卡片 3 -->
<div class="player-card">
<div class="player-header">
<div class="rank top-3">3</div>
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="玩家头像" class="avatar">
<div class="player-info">
<div class="player-name">东风不败</div>
<div>广州 · 王者段位</div>
</div>
</div>
<div class="player-stats">
<div class="stat">
<div class="stat-value">7,632</div>
<div class="stat-label">积分</div>
</div>
<div class="stat">
<div class="stat-value">70%</div>
<div class="stat-label">胜率</div>
<div class="progress-bar">
<div class="progress" style="width: 70%"></div>
</div>
</div>
<div class="stat">
<div class="stat-value">356</div>
<div class="stat-label">对局数</div>
</div>
<div class="stat">
<div class="stat-value">10</div>
<div class="stat-label">连胜</div>
</div>
</div>
<div class="player-actions">
<button class="btn"><i class="fas fa-user-plus"></i> 关注</button>
<button class="btn"><i class="fas fa-chart-line"></i> 战绩</button>
</div>
</div>
<!-- 更多玩家卡片 -->
<div class="player-card">
<div class="player-header">
<div class="rank">4</div>
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="玩家头像" class="avatar">
<div class="player-info">
<div class="player-name">清一色专家</div>
<div>成都 · 钻石段位</div>
</div>
</div>
<div class="player-stats">
<div class="stat">
<div class="stat-value">7,210</div>
<div class="stat-label">积分</div>
</div>
<div class="stat">
<div class="stat-value">68%</div>
<div class="stat-label">胜率</div>
<div class="progress-bar">
<div class="progress" style="width: 68%"></div>
</div>
</div>
<div class="stat">
<div class="stat-value">287</div>
<div class="stat-label">对局数</div>
</div>
<div class="stat">
<div class="stat-value">8</ 
