本文记录了一个棋牌游戏平台首页的完整开发过程，从数据库展示到 UI 美化，涵盖 ASP.NET Core MVC、Razor 视图、CSS3 动画等核心技术。
项目背景
基于网狐棋牌旗舰版（WHQJ）框架，在 .NET 10 平台上开发一个现代化的游戏展示首页，要求类似 Google Play 商店的视觉效果。
技术栈
-
**后端框架**: ASP.NET Core MVC (.NET 10)
-
**视图引擎**: Razor
-
**数据库**: SQL Server
-
**前端**: HTML5 + CSS3 + JavaScript
-
**UI 风格**: 玻璃态卡片 + 渐变色彩 + 平滑动画
开发过程
一、数据层开发
1. 实体类创建
从 WHQJAdmin 项目复制 `GameGameItem.cs` 到 WHQJFront 项目：
```csharp
namespace Game.Entity.Platform
{
Serializable
public partial class GameGameItem
{
public int GameID { get; set; }
public string GameName { get; set; }
public int SuportType { get; set; }
public string DataBaseAddr { get; set; }
public string DataBaseName { get; set; }
public int ServerVersion { get; set; }
public int ClientVersion { get; set; }
public string ServerDLLName { get; set; }
public string ClientExeName { get; set; }
}
}
```
2. 数据访问层接口
在 `IPlatformDataProvider.cs` 中添加方法：
```csharp
/// <summary>
/// 获取游戏模块列表
/// </summary>
IList<GameGameItem> GetGameGameItemList();
```
3. 数据访问层实现
在 `PlatformDataProvider.cs` 中实现：
```csharp
public IList<GameGameItem> GetGameGameItemList()
{
string sql = "SELECT * FROM GameGameItem WITH(NOLOCK) ORDER BY GameID";
return Database.ExecuteObjectList<GameGameItem>(sql);
}
```
4. 业务逻辑层
在 `PlatformFacade.cs` 中添加：
```csharp
public IList<GameGameItem> GetGameGameItemList()
{
return platformData.GetGameGameItemList();
}
```
二、控制器开发
```csharp
public class HomeController : Controller
{
public IActionResult Index()
{
ViewData["PageTitle"] = "网狐棋牌旗舰版";
// 直接使用数据库连接字符串
string connString = "Data Source=.; Initial Catalog=WHQJPlatformDB; Integrated Security=true;";
var platformData = new PlatformDataProvider(connString);
var gameList = platformData.GetGameGameItemList();
ViewData["GameList"] = gameList;
return View();
}
}
```
三、视图开发
1. 版本号转换算法
数据库中的版本号是位运算存储的，需要转换：
```csharp
// 10112249 -> 6.7.0.1
var v = game.ClientVersion;
var major = v >> 24;
var minor = ((v >> 16) << 24) >> 24;
var build = ((v >> 8) << 24) >> 24;
var revision = (v << 24) >> 24;
var versionStr = $"{major}.{minor}.{build}.{revision}";
```
2. 游戏分类逻辑
```csharp
var categoryName = "other";
if (gameName.Contains("扑克") || gameName.Contains("牛牛") || gameName.Contains("三公"))
{
categoryName = "poker";
}
else if (gameName.Contains("麻将"))
{
categoryName = "majiang";
}
else if (gameName.Contains("捕鱼") || gameName.Contains("鱼"))
{
categoryName = "fish";
}
else if (gameName.Contains("棋"))
{
categoryName = "chess";
}
```
四、UI 设计
1. 整体配色方案
```css
/* 绿色系主题 */
--primary-green: #10b981;
--dark-green: #059669;
--darker-green: #047857;
--light-green: #34d399;
--bg-green: #d1fae5;
```
2. 头部横幅
```css
.hero-section {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(16, 185, 129, 0.5);
}
```
3. 分类按钮
```css
.category-tabs .tab {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 3px 15px rgba(16, 185, 129, 0.3);
}
.tab:hover, .tab.active {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}
```
4. 游戏卡片
```css
.game-card {
background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.game-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 60px rgba(16, 185, 129, 0.5);
}
/* 悬停时淡入效果 */
.game-card::after {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.12));
}
```
5. 进入按钮
```css
.install-btn {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
}
.game-card:hover .install-btn {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
box-shadow: 0 5px 25px rgba(16, 185, 129, 0.6);
}
```
6. 热门标签
```css
.hot-tag {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
box-shadow: 0 3px 10px rgba(96, 165, 250, 0.4);
}
```
五、JavaScript 交互
分类过滤功能
```javascript
document.querySelectorAll('.category-tabs .tab').forEach(function(tab) {
tab.addEventListener('click', function() {
// 切换激活状态
document.querySelectorAll('.category-tabs .tab').forEach(function(t) {
t.classList.remove('active');
});
this.classList.add('active');
// 获取选中的分类
var category = this.getAttribute('data-category');
// 过滤游戏卡片
document.querySelectorAll('.game-card').forEach(function(card) {
var cardCategory = card.getAttribute('data-category');
if (category === 'all' || cardCategory === category) {
card.style.display = 'flex';
// 淡入动画
card.style.opacity = '0';
setTimeout(function() {
card.style.transition = 'opacity 0.3s ease';
card.style.opacity = '1';
}, 50);
} else {
card.style.display = 'none';
}
});
});
});
```
关键技术点
1. Razor 视图中的内联代码
在 `@foreach` 循环中定义变量：
```razor
@foreach (var game in gameList)
{
var colors = new[] { "color1", "color2", ... };
var iconColor = colors[game.GameID % colors.Length];
var versionStr = $"{major}.{minor}.{build}.{revision}";
<div class="game-card" data-category="@categoryName">
<!-- 卡片内容 -->
</div>
}
```
2. CSS 动画优化
使用 `cubic-bezier` 实现弹性效果：
```css
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
```
3. 玻璃态效果
```css
backdrop-filter: blur(20px);
background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
```
4. 响应式设计
```css
@media (max-width: 768px) {
.game-grid {
grid-template-columns: 1fr;
}
.category-tabs {
overflow-x: auto;
flex-wrap: nowrap;
}
}
```
最终效果
页面特性
✅ **视觉设计**
-
绿色渐变主题（头部横幅、分类按钮、进入按钮）
-
玻璃态卡片设计
-
浅蓝色热门标签
-
平滑的悬停动画（上浮 + 缩放 + 阴影）
✅ **功能特性**
-
游戏类型过滤（全部/扑克/麻将/捕鱼/棋类）
-
版本号正确显示（位运算转换）
-
游戏名称完整显示（自动换行）
-
响应式布局（移动端适配）
✅ **性能优化**
-
SQL 查询使用 `WITH(NOLOCK)` 避免锁表
-
CSS 动画使用 `transform` 触发 GPU 加速
-
淡入动画使用 `opacity` 避免重排
项目结构
```
WHQJFront/
├── Services/
│ ├── Game.Entity/ # 实体层
│ ├── Game.IData/ # 数据接口层
│ ├── Game.Data/ # 数据访问层
│ └── Game.Facade/ # 业务逻辑层
└── WebProjects/
└── Game.Web/
├── Controllers/
│ └── HomeController.cs
└── Views/
└── Home/
└── Index.cshtml
```
总结
本文完整记录了一个现代化游戏商城首页的开发过程，从数据库读取到最终 UI 展示，涵盖了：
-
**三层架构**的完整实现
-
**Razor 视图**的高级用法
-
**CSS3 渐变**和**动画**技巧
-
**JavaScript 原生**事件处理
-
**响应式设计**实践
通过本文，你可以学习到如何在 .NET 10 平台上打造具有现代感的 Web 界面。
**项目源码**: 参考本文代码片段
**运行环境**: .NET 10 + SQL Server
**访问地址**: http://localhost:5000