更新前端展示页

2025-06-19 17:40:02 +08:00 · 2025-06-19 17:40:02 +08:00 · 10d5d90dd5
commit 10d5d90dd5
parent 8e96995e1c
3 changed files with 166 additions and 94 deletions
--- a/app/index/view/game/detail.php
+++ b/app/index/view/game/detail.php
@ -44,11 +44,17 @@
                        <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 class="infoitem"><span>更新时间：</span><span
+                                        class="infoitem-value"><?php echo date('Y-m-d', $game['create_time']); ?></span>
+                                </div>
+                                <div class="infoitem"><span>所属分类：</span><span
+                                        class="infoitem-value"><?php echo $cateName; ?></span></div>
+                                <div class="infoitem"><span>程序编号：</span><span
+                                        class="infoitem-value"><?php echo $game['number']; ?></span></div>
+                                <div class="infoitem"><span>查看：</span><span
+                                        class="infoitem-value"><?php echo $game['views']; ?></span></div>
+                                <div class="infoitem"><span>下载：</span><span
+                                        class="infoitem-value"><?php echo $game['downloads']; ?></span></div>
                            </div>
                        </div>
                    </div>
@ -143,7 +149,7 @@

 <script>
    // 页面加载完成后执行
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
        // 获取游戏ID
        const gameId = new URLSearchParams(window.location.search).get('id');
        if (!gameId) {
@ -153,10 +159,10 @@

        // 获取游戏详情
        fetch('/index/game/detail?id=' + gameId, {
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            })
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
            .then(response => response.json())
            .then(result => {
                if (result.code === 1) {
@ -195,13 +201,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 => {
                        if (!response.ok) {
                            throw new Error('网络响应失败');
@ -236,7 +242,7 @@
        //复制分享码
        const codeBtn = document.getElementById('codeBtn');
        if (codeBtn) {
-            codeBtn.addEventListener('click', function() {
+            codeBtn.addEventListener('click', function () {
                const code = '<?php echo $game['code']; ?>';
                if (code) {
                    // 创建一个临时输入框
@ -266,7 +272,7 @@
        const goToTop = document.getElementById('goToTop');

        // 监听滚动事件
-        window.addEventListener('scroll', function() {
+        window.addEventListener('scroll', function () {
            if (window.pageYOffset > 300) {
                goToTop.classList.add('show');
            } else {
@ -275,7 +281,7 @@
        });

        // 点击返回顶部
-        goToTop.addEventListener('click', function() {
+        goToTop.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
@ -286,13 +292,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) {
@ -705,6 +711,14 @@
    .disclaimer-content p {
        margin-bottom: 0;
    }
+
+    .infoitem-value {
+        border: 1px #0d6efd dashed;
+        padding: 3px 6px;
+        font-size: 13px;
+        background-color: #0081ff12;
+        border-radius: 5px;
+    }
 </style>

 {include file="component/foot" /}
--- a/app/index/view/resources/detail.php
+++ b/app/index/view/resources/detail.php
@ -20,52 +20,80 @@

    <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 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 class="detail-top-left">
+                <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 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 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 style="display: flex;">
+                                        <div class="infoitem">
+                                            <span>程序编号：</span>
+                                            <span class="infoitem-value"><?php echo $game['number']; ?></span>
+                                        </div>
+                                        <div class="infoitem">
+                                            <span>所属分类：</span>
+                                            <span class="infoitem-value"><?php echo $cateName; ?></span>
+                                        </div>
+                                    </div>
+                                    <div style="display: flex;">
+                                        <div class="infoitem">
+                                            <span>更新时间：</span>
+                                            <span
+                                                class="infoitem-value"><?php echo date('Y-m-d', $game['create_time']); ?></span>
+                                        </div>
+                                        <div class="infoitem">
+                                            <span>查看：</span>
+                                            <span class="infoitem-value"><?php echo $game['views']; ?></span>
+                                            <span>次</span>
+                                        </div>
+                                        <div class="infoitem">
+                                            <span>下载：</span>
+                                            <span class="infoitem-value"><?php echo $game['downloads']; ?></span>
+                                            <span>次</span>
+                                        </div>
+                                    </div>
+                                </div>
                            </div>
                        </div>
-                    </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 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>
            </div>
+            <div class="detail-top-right">
+这里放个人信息
+            </div>
        </div>
        <div class="detail-middle">
            <div class="detial-middle-left">
@ -143,7 +171,7 @@

 <script>
    // 页面加载完成后执行
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
        // 获取游戏ID
        const gameId = new URLSearchParams(window.location.search).get('id');
        if (!gameId) {
@ -153,10 +181,10 @@

        // 获取游戏详情
        fetch('/index/game/detail?id=' + gameId, {
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            })
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
            .then(response => response.json())
            .then(result => {
                if (result.code === 1) {
@ -195,13 +223,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 => {
                        if (!response.ok) {
                            throw new Error('网络响应失败');
@ -236,7 +264,7 @@
        //复制分享码
        const codeBtn = document.getElementById('codeBtn');
        if (codeBtn) {
-            codeBtn.addEventListener('click', function() {
+            codeBtn.addEventListener('click', function () {
                const code = '<?php echo $game['code']; ?>';
                if (code) {
                    // 创建一个临时输入框
@ -266,7 +294,7 @@
        const goToTop = document.getElementById('goToTop');

        // 监听滚动事件
-        window.addEventListener('scroll', function() {
+        window.addEventListener('scroll', function () {
            if (window.pageYOffset > 300) {
                goToTop.classList.add('show');
            } else {
@ -275,7 +303,7 @@
        });

        // 点击返回顶部
-        goToTop.addEventListener('click', function() {
+        goToTop.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
@ -286,13 +314,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) {
@ -356,6 +384,17 @@
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        display: flex;
+        justify-content: space-between;
+    }
+
+    .detail-top-left {
+        width: 70%;
+    }
+
+    .detail-top-right {
+        width: 30%;
+        border-left: 1px solid #eee ;
+        margin: 20px;
    }

    .detail-top-card {
@ -368,9 +407,10 @@


    .detail-top-card img {
-        width: 400px;
-        height: auto;
+        width: 350px;
+        height: 260px;
        border-radius: 8px;
+        object-fit: cover;
        overflow: hidden;
    }

@ -384,8 +424,7 @@

    .detail-top-card-right-top {
        display: flex;
-        justify-content: flex-end;
-        align-items: center;
+        margin-top: 25px;
    }

    .detail-top-card-right-middle {}
@ -398,7 +437,7 @@
    }

    .detail-top-card-right-middle .game-info .title {
-        font-size: 40px;
+        font-size: 30px;
        font-weight: 700;
        color: #42d697;
        margin-bottom: 15px;
@ -406,10 +445,12 @@

    .detail-top-card-right-middle .game-info .infos {
        display: flex;
+        flex-direction: column;
+        gap: 20px;
    }

    .detail-top-card-right-middle .game-info .infos .infoitem {
-        margin-right: 60px;
+        margin-right: 40px;
    }

    .detail-top-card-right-middle .game-info .infos .infoitem span {
@ -705,6 +746,14 @@
    .disclaimer-content p {
        margin-bottom: 0;
    }
+
+    .infoitem-value {
+        border: 1px #0d6efd dashed;
+        padding: 3px 6px;
+        font-size: 13px;
+        background-color: #0081ff12;
+        border-radius: 5px;
+    }
 </style>

 {include file="component/foot" /}
--- a/app/index/view/resources/list.php
+++ b/app/index/view/resources/list.php
@ -19,7 +19,7 @@
                <div class="resource-card">
                    <div class="card-image">
                        <img src="{$resource.icon|default='/static/images/default-resource.jpg'}"
-                            alt="{$resource.name}">
+                            alt="{$resource.title}">
                        <div class="image-overlay"></div>
                    </div>
                    <div class="card-content">
@ -27,7 +27,7 @@
                            <span class="resource-number">{$resource.number}</span>
                            <time class="create-date">{$resource.create_time|date="Y-m-d"}</time>
                        </div>
-                        <h3 class="resource-title">{$resource.name}</h3>
+                        <h3 class="resource-title">{$resource.title}</h3>
                        <div class="card-footer">
                            <div class="resource-stats">
                                <span class="stat-item">
@ -186,6 +186,15 @@
        margin: 0 0 15px;
        color: #333;
        line-height: 1.4;
+        border-top: 1px solid #f0f0f0;
+        padding-top: 10px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        max-height: 3.2em;
    }

    .card-footer {