From 57b414cd194cfda3786f03c639752a2e90d57f7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B3=BD=E7=BD=91?= <”357099073@qq.com“>
Date: Mon, 26 May 2025 00:38:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=B8=B8=E6=88=8F=E4=B8=8B?=
 =?UTF-8?q?=E8=BD=BD=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/game/detail.php | 420 +++++++++++++++++++++++----------
 1 file changed, 298 insertions(+), 122 deletions(-)

diff --git a/app/index/view/game/detail.php b/app/index/view/game/detail.php
index ebcb611..01fa502 100644
--- a/app/index/view/game/detail.php
+++ b/app/index/view/game/detail.php
@@ -1,85 +1,137 @@
 {include file="component/head" /}
 {include file="component/header-simple" /}
 <div class="main">
-    <div class="location">
-        <div class="container">
-            <div class="location-item">
-                <a href="/">首页</a>
-                <span>></span>
-                <a href="/index/game/list" id="cateLink"><?php echo $cateName; ?></a>
+    <div class="main-top">
+        <div class="main-top-main">
+            <div class="main-title">
+                <?php echo $game['title']; ?>
+            </div>
+            <div class="location">
+                <div class="container">
+                    <div class="location-item">
+                        <a href="/">首页</a>
+                        <span>></span>
+                        <a href="/index/game/list" id="cateLink"><?php echo $cateName; ?></a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="game-detail">
-        <div class="game-info">
-            <div class="game-header">
-                <h1 class="game-title"><?php echo $game['title']; ?></h1>
-                <div class="game-meta">
-                    <span class="game-category"><?php echo $cateName; ?></span>
-                    <span class="game-views"><i class="fa-solid fa-eye"></i> <?php echo $game['views']; ?> </span>
-                    <span class="game-downloads"><i class="fa-solid fa-download"></i> <span
-                            id="gameDownloads"><?php echo $game['downloads']; ?></span> </span>
+    <div class="detail-main">
+        <div class="detail-top">
+            <div class="detail-top-card">
+                <div class="detail-top-card-left">
+                    <div class="article-cover">
+                        <img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>">
+                        <!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> -->
+                    </div>
                 </div>
-            </div>
-            <div class="game-content">
-                <div class="game-cover">
-                    <img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>"
-                        alt="<?php echo $game['title']; ?>">
-                </div>
-                <div class="game-desc">
-                    <?php echo $game['content']; ?>
-                </div>
-            </div>
-            <div class="game-actions">
-                <div style="display: flex;gap: 30px;}">
-                    <button id="downloadBtn" class="btn btn-primary">
-                        <i class="fa-solid fa-download"></i> 立即下载
-                    </button>
-                    <button id="codeBtn" class="codebtn">
-                        <i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
-                    </button>
-                </div>
-            </div>
-        </div>
-        
-        <div class="disclaimers">
-            <div class="disclaimer-item">
-                <div class="disclaimer-title">免责声明:</div>
-                <div class="disclaimer-content">
-                    <?php echo $config['disclaimers'] ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="game-navigation">
-            <div class="prev-game" id="prevGame">
-            </div>
-            <div class="next-game" id="nextGame">
-            </div>
-        </div>
-
-        <!-- 相关游戏 -->
-        <?php if (!empty($relatedGames)): ?>
-            <div class="related-games">
-                <h3>相关游戏</h3>
-                <div class="game-list">
-                    <?php foreach ($relatedGames as $related): ?>
-                        <div class="game-item"
-                            onclick="window.location.href='/index/game/detail?id=<?php echo $related['id']; ?>'">
-                            <div class="game-cover">
-                                <img src="<?php echo $related['icon'] ?: '/static/images/default-game.png'; ?>"
-                                    alt="<?php echo $related['title']; ?>">
-                            </div>
-                            <div class="game-info">
-                                <h4 class="game-title-1"><?php echo $related['title']; ?></h4>
+                <div class="detail-top-card-right">
+                    <div class="detail-top-card-right-top">
+                        <div class="collect-btn">
+                            <button class="btn btn-primary" id="collectBtn" data-game-id="<?php echo $game['id']; ?>">
+                                <i class="fa-solid fa-heart"></i> 收藏
+                            </button>
+                        </div>
+                        <div class="report-btn">
+                            <button class="btn btn-primary" id="reportBtn" style="margin-left: 20px;">
+                                <i class="fa-solid fa-flag"></i> 举报
+                            </button>
+                        </div>
+                    </div>
+                    <div class="detail-top-card-right-middle">
+                        <div class="game-info">
+                            <div class="title">Free</div>
+                            <div class="infos">
+                                <div class="infoitem"><span>更新时间：</span><?php echo date('Y-m-d', $game['create_time']); ?></div>
+                                <div class="infoitem"><span>所属分类：</span><?php echo $cateName; ?></div>
+                                <div class="infoitem"><span>程序编号：</span><?php echo $game['number']; ?></div>
+                                <div class="infoitem"><span>查看：</span><?php echo $game['views']; ?></div>
+                                <div class="infoitem"><span>下载：</span><?php echo $game['downloads']; ?></div>
                             </div>
                         </div>
-                    <?php endforeach; ?>
+                    </div>
+                    <div class="detail-top-card-right-bottom">
+                        <div class="game-actions1">
+                            <div style="display: flex;gap: 30px;}">
+                                <button id="downloadBtn" class="btn btn-primary">
+                                    <i class="fa-solid fa-download"></i> 立即下载
+                                </button>
+                                <button id="codeBtn" class="codebtn">
+                                    <i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-        <?php endif; ?>
+        </div>
+        <div class="detail-middle">
+            <div class="detial-middle-left">
+                <div class="game-detail">
+                    <div class="game-info">
+                        <div class="game-content">
+                            <div class="game-desc">
+                                <?php echo $game['content']; ?>
+                            </div>
+                        </div>
+                        <div class="game-actions">
+                            <div style="display: flex;gap: 30px;}">
+                                <button id="downloadBtn" class="btn btn-primary">
+                                    <i class="fa-solid fa-download"></i> 立即下载
+                                </button>
+                                <button id="codeBtn" class="codebtn">
+                                    <i class="fa-solid fa-download"></i> 分享码：<?php echo $game['code']; ?>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="disclaimers">
+                        <div class="disclaimer-item">
+                            <div class="disclaimer-title">免责声明:</div>
+                            <div class="disclaimer-content">
+                                <?php echo $config['disclaimers'] ?>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="game-navigation">
+                        <div class="prev-game" id="prevGame">
+                        </div>
+                        <div class="next-game" id="nextGame">
+                        </div>
+                    </div>
+
+                    <!-- 相关游戏 -->
+                    <?php if (!empty($relatedGames)): ?>
+                        <div class="related-games">
+                            <h3>相关游戏</h3>
+                            <div class="game-list">
+                                <?php foreach ($relatedGames as $related): ?>
+                                    <div class="game-item"
+                                        onclick="window.location.href='/index/game/detail?id=<?php echo $related['id']; ?>'">
+                                        <div class="game-cover">
+                                            <img src="<?php echo $related['icon'] ?: '/static/images/default-game.png'; ?>"
+                                                alt="<?php echo $related['title']; ?>">
+                                        </div>
+                                        <div class="game-info">
+                                            <h4 class="game-title-1"><?php echo $related['title']; ?></h4>
+                                        </div>
+                                    </div>
+                                <?php endforeach; ?>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+            <div class="detial-middle-right">
+
+            </div>
+        </div>
     </div>
+
 </div>
 
 <!-- 返回顶部按钮 -->
@@ -91,7 +143,7 @@
 
 <script>
     // 页面加载完成后执行
-    document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', function() {
         // 获取游戏ID
         const gameId = new URLSearchParams(window.location.search).get('id');
         if (!gameId) {
@@ -101,41 +153,41 @@
 
         // 获取游戏详情
         fetch('/index/game/detail?id=' + gameId, {
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        })
-        .then(response => response.json())
-        .then(result => {
-            if (result.code === 1) {
-                // 渲染上一篇
-                const prevGame = document.getElementById('prevGame');
-                if (result.data.prevGame) {
-                    prevGame.innerHTML = `
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(result => {
+                if (result.code === 1) {
+                    // 渲染上一篇
+                    const prevGame = document.getElementById('prevGame');
+                    if (result.data.prevGame) {
+                        prevGame.innerHTML = `
                         <a href="/index/game/detail?id=${result.data.prevGame.id}">
                             <i class="fa fa-arrow-left"></i> 上一篇：${result.data.prevGame.title}
                         </a>
                     `;
-                } else {
-                    prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
-                }
+                    } else {
+                        prevGame.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
+                    }
 
-                // 渲染下一篇
-                const nextGame = document.getElementById('nextGame');
-                if (result.data.nextGame) {
-                    nextGame.innerHTML = `
+                    // 渲染下一篇
+                    const nextGame = document.getElementById('nextGame');
+                    if (result.data.nextGame) {
+                        nextGame.innerHTML = `
                         <a href="/index/game/detail?id=${result.data.nextGame.id}">
                             下一篇：${result.data.nextGame.title} <i class="fa fa-arrow-right"></i>
                         </a>
                     `;
-                } else {
-                    nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
+                    } else {
+                        nextGame.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
+                    }
                 }
-            }
-        })
-        .catch(error => {
-            console.error('获取游戏详情失败:', error);
-        });
+            })
+            .catch(error => {
+                console.error('获取游戏详情失败:', error);
+            });
 
         // 更新访问次数
         updateGameViews(gameId);
@@ -143,13 +195,13 @@
         // 下载功能
         const downloadBtn = document.getElementById('downloadBtn');
         if (downloadBtn) {
-            downloadBtn.addEventListener('click', function () {
+            downloadBtn.addEventListener('click', function() {
                 fetch('/index/game/downloadurl?id=' + gameId, {
-                    method: 'GET',
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
+                        method: 'GET',
+                        headers: {
+                            'X-Requested-With': 'XMLHttpRequest'
+                        }
+                    })
                     .then(response => response.json())
                     .then(data => {
                         if (data.code === 1) {
@@ -185,7 +237,7 @@
                     tempInput.value = code;
                     document.body.appendChild(tempInput);
                     tempInput.select();
-                    
+
                     try {
                         // 尝试使用传统的复制方法
                         document.execCommand('copy');
@@ -207,7 +259,7 @@
         const goToTop = document.getElementById('goToTop');
 
         // 监听滚动事件
-        window.addEventListener('scroll', function () {
+        window.addEventListener('scroll', function() {
             if (window.pageYOffset > 300) {
                 goToTop.classList.add('show');
             } else {
@@ -216,7 +268,7 @@
         });
 
         // 点击返回顶部
-        goToTop.addEventListener('click', function () {
+        goToTop.addEventListener('click', function() {
             window.scrollTo({
                 top: 0,
                 behavior: 'smooth'
@@ -227,13 +279,13 @@
     // 更新游戏访问次数
     function updateGameViews(gameId) {
         fetch('/index/game/updateViews', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-                'X-Requested-With': 'XMLHttpRequest'
-            },
-            body: 'id=' + gameId
-        })
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: 'id=' + gameId
+            })
             .then(response => response.json())
             .then(result => {
                 if (result.code === 1) {
@@ -250,14 +302,137 @@
 </script>
 
 <style>
-    .location {
+    .main-top {
+        width: 100%;
+        height: 400px;
+        background-color: #0081ff;
+        /* background: url('/static/images/top-bg.jpg') no-repeat center center; */
+        position: relative;
+    }
+
+    .main-top-card {
+        max-width: 1400px;
+        margin: 0 auto;
+        margin-top: 30px;
+        border-radius: 8px;
+        background-color: #fff;
+        height: 300px;
+    }
+
+    .main-top-main {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding-top: 50px;
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        z-index: 1;
+    }
+
+    .main-top-main .main-title {
+        font-size: 30px;
+        font-weight: 700;
         max-width: 1000px;
+        color: #fff;
+    }
+
+    .detail-top {
+        max-width: 1400px;
+        /* height: 300px; */
         margin: 30px auto;
+        position: relative;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+        display: flex;
+    }
+
+    .detail-top-card {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+    }
+
+
+    .detail-top-card img {
+        width: 400px;
+        height: auto;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .detail-top-card-right {
+        /* height: 230px; */
+        display: flex;
+        width: 100%;
+        margin-left: 20px;
+        flex-direction: column;
+    }
+
+    .detail-top-card-right-top {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    .detail-top-card-right-middle {}
+
+    .detail-top-card-right-middle .game-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+    }
+
+    .detail-top-card-right-middle .game-info .title {
+        font-size: 40px;
+        font-weight: 700;
+        color: #42d697;
+        margin-bottom: 15px;
+    }
+
+    .detail-top-card-right-middle .game-info .infos {
+        display: flex;
+    }
+
+    .detail-top-card-right-middle .game-info .infos .infoitem {
+        margin-right: 60px;
+    }
+
+    .detail-top-card-right-middle .game-info .infos .infoitem span {
+        color: #7d879c;
+    }
+
+    .detail-middle {
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+
+    .detail-main {
+        position: relative;
+        top: -200px;
+        left: 0;
+        width: 100%;
+        z-index: 2;
+    }
+
+    .location {
+        color: #fff;
+        display: flex;
+        align-items: center;
+    }
+
+    .location a {
+        color: #fff !important;
     }
 
     .game-detail {
-        max-width: 1000px;
-        margin: 30px auto;
         padding: 50px;
         background: #fff;
         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -343,6 +518,11 @@
         border-bottom: 1px solid #eee;
     }
 
+    .game-actions1 {
+        display: flex;
+        margin: 20px 0;
+    }
+
     .game-navigation {
         display: flex;
         justify-content: space-between;
@@ -369,7 +549,7 @@
     .btn {
         /* background: #f57005; */
         color: #fff;
-        padding: 15px 30px;
+        padding: 5px 15px;
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.3s ease;
@@ -380,8 +560,8 @@
         transform: translateY(-2px);
     }
 
-    .codebtn{
-        color:#0d6efd;
+    .codebtn {
+        color: #0d6efd;
         padding: 15px 30px;
         border-radius: 8px;
         border: 1px solid #0d6efd;
@@ -398,7 +578,7 @@
         margin: 40px 0;
     }
 
-    .related-games h3{
+    .related-games h3 {
         font-size: 20px;
         font-weight: 600;
         margin-bottom: 20px;
@@ -497,10 +677,6 @@
         }
     }
 
-    .location-item a {
-        color: #000 !important;
-    }
-    
     .disclaimers {
         color: #b1b1b1;
         width: 80%;