diff --git a/src/main/java/com/budwk/app/sys/controller/v4/SysV4AppsController.java b/src/main/java/com/budwk/app/sys/controller/v4/SysV4AppsController.java index 45bc3b9f..15fb6eb9 100644 --- a/src/main/java/com/budwk/app/sys/controller/v4/SysV4AppsController.java +++ b/src/main/java/com/budwk/app/sys/controller/v4/SysV4AppsController.java @@ -67,10 +67,11 @@ public class SysV4AppsController { Sql sql = Sqls.create(""" SELECT m.id, - m.name, + m.`name`, m.href, m.icon, m.picIcon, + sm.`name` AS moduleName, CASE WHEN f.userId IS NOT NULL THEN 1 ELSE 0 @@ -79,6 +80,7 @@ public class SysV4AppsController { sys_menu m LEFT JOIN sys_user_favorite_app f ON m.id = f.appId AND f.userId = @userId + LEFT JOIN sys_module sm ON sm.id = m.moduleId $condition """); Cnd cnd = Cnd.NEW(); @@ -138,10 +140,11 @@ public class SysV4AppsController { Sql sql = Sqls.create(""" SELECT m.id, - m.name, + m.`name`, m.href, m.icon, m.picIcon, + sm.`name` AS moduleName, 1 AS isFavorite FROM sys_user_favorite_app f @@ -149,6 +152,7 @@ public class SysV4AppsController { sys_menu m ON f.appId = m.id + LEFT JOIN sys_module sm ON sm.id = m.moduleId WHERE f.userId = @userId AND m.platform = 'PC' diff --git a/src/main/resources/views/layouts/v4/apps.html b/src/main/resources/views/layouts/v4/apps.html index 122c562c..e6556874 100644 --- a/src/main/resources/views/layouts/v4/apps.html +++ b/src/main/resources/views/layouts/v4/apps.html @@ -159,6 +159,7 @@ layout("/layouts/v4/baseLayout.html"){ align-items: center; padding: 15px; position: relative; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .app-card:hover { @@ -193,7 +194,7 @@ layout("/layouts/v4/baseLayout.html"){ .favorite-icon { position: absolute; - bottom: 10px; + top: 10px; right: 10px; cursor: pointer; transition: all 0.3s; @@ -380,7 +381,7 @@ layout("/layouts/v4/baseLayout.html"){
{{ app.name }}
-
{{ app.department }}
+
{{ app.moduleName }}
{{ app.status }}
- -
- 工会活动 -
-
@@ -86,13 +81,13 @@ const act = { }, breakpoints: { 768: { - slidesPerView: 2, + slidesPerView: 1, }, 1024: { - slidesPerView: 3, + slidesPerView: 2, }, 1200: { - slidesPerView: 4, + slidesPerView: 3, } } }) @@ -125,12 +120,6 @@ const act = { width: 100%; } - .section-act { - width: 80%; - max-width: 80%; - margin: 30px auto; - } - .section-act .section-act-title span { font-size: 30px; color: #000000; @@ -172,12 +161,13 @@ const act = { .activity-swiper-container { position: relative; width: 100%; - margin-top: 30px; + padding: 20px; + /*margin-top: 30px;*/ } .activity-swiper { width: 100%; - padding: 0 50px 20px 50px; + /*padding: 0 50px 20px 50px;*/ } .activity-swiper .swiper-slide { @@ -235,6 +225,7 @@ const act = { .activity-swiper .swiper-slide .item .img-box { width: 100%; height: 200px; + border-radius: 12px; overflow: hidden; position: relative; } @@ -282,13 +273,13 @@ const act = { } .activity-swiper .swiper-slide .item .time { - margin-top: 8px; + /*margin-top: 8px;*/ } .activity-swiper .swiper-slide .item .time p { - font-size: 14px; + font-size: 13px; margin: 0; - line-height: 1.5; + /*line-height: 1.5;*/ color: #666; } @@ -297,4 +288,4 @@ const act = { color: var(--color-primary); } ` -} +}; diff --git a/src/main/resources/views/layouts/v4/home/entry.js b/src/main/resources/views/layouts/v4/home/entry.js index 4abb5a3a..62b5f34d 100644 --- a/src/main/resources/views/layouts/v4/home/entry.js +++ b/src/main/resources/views/layouts/v4/home/entry.js @@ -1,45 +1,35 @@ const entry = { template: /*language=HTML*/ ` -
-
- 常用入口 -
- -
- -
-
- - 推荐服务 -
-
- - 推荐应用 -
-
- - 收藏服务 -
-
- - -
-
-
-
- -
-
-

{{ service.name }}

-
-
-
-
-
-
+
+ +
+
+ 推荐服务 +
+
+ 推荐应用 +
+
+ 我的收藏 +
+
+ + +
+
+
+
+ +
+
{{ item.name }}
+
+
+
+
`, data() { return { @@ -128,194 +118,131 @@ const entry = { style: /*language=CSS*/ ` .entry-wrapper { width: 100%; - background-image: url(https://www.ncu.edu.cn/images/bbg1.jpg); - background-size: cover; - background-position: center; - background-repeat: no-repeat; + box-sizing: border-box; } - .entry-title { - font-size: 30px; - color: #000000; - display: block; - font-weight: bold; - position: relative; - text-align: center; - padding: 40px 0; - } - - /deep/ .entry-title span::before { - content: ''; - width: 24px; - height: 11px; - background: url(https://www.ncu.edu.cn/images/titl.svg) no-repeat center; - background-size: 24px 11px; - display: inline-block; - margin-right: 0; - vertical-align: middle; - } - - /deep/ .entry-title span::after { - content: ''; - width: 24px; - height: 11px; - background: url(https://www.ncu.edu.cn/images/titr.svg) no-repeat center; - background-size: 24px 11px; - display: inline-block; - margin-left: 0; - vertical-align: middle; - } - - .entry-container { - width: 80%; - max-width: 80%; - margin: 0 auto; - padding: 20px; + .tabs { + margin-top: 5px; display: flex; - gap: 30px; - overflow: hidden; + gap: 20px; + margin-bottom: 20px; + border-bottom: 2px solid #e8e8e8; + padding-bottom: 10px; } - .sidebar { - width: 200px; - flex-shrink: 0; + .tab-item { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + color: #666; + cursor: pointer; + padding-bottom: 8px; + transition: color 0.2s ease; + } + + .tab-item:hover { + color: #1890ff; + } + + .tab-item.active { + color: #1890ff; + font-weight: bold; + border-bottom: 2px solid #1890ff; + } + + .tab-item i { + font-size: 14px; + } + + .apps-container { display: flex; flex-direction: column; - justify-content: space-between; - } - - .category { - display: flex; - align-items: center; - padding: 12px 16px; - margin-bottom: 2px; - cursor: pointer; - transition: background-color 0.2s ease; - border-left: 3px solid transparent; - } - - .category:hover { - - } - - .category.active { - color: var(--color-primary); - } - - .category i { - font-size: 14px; - margin-right: 10px; - width: 16px; - text-align: center; - } - - .category span { - font-size: 18px; - font-weight: 700; - } - - .content { - flex: 1; - height: 164px; - } - - .services-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; - grid-template-rows: repeat(2, 1fr); - overflow: hidden; } - .service-card { - padding: 12px; - height: 72px; - cursor: pointer; - transition: background-color 0.2s ease; - border: none; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYEAAAB4CAYAAAAUs05BAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANrSURBVHgB7dzNapNZAMfh0zbNYGgosYql4wiCFEEZXLiYG3DrdryPuQbvpXMB7t24m4UOCiKuEtCKsaVNiTRaXhshLvyoSd/Yzf95oORA827PLycn5yxsdZ/crKql+6WG1uLy0d3Lm29Pes+jfm+1N9w/VwD4qXtXbmyf9P/Hu29Wng/6K6WOqnq6WACI1ZgM1pqt0Z31qztlBoMPh0sPXr+8OMsztzsbe9fanfcFgG9sdZ+tz/L+6+0LB7c6lw5meWZ7OGg+7HfPj8dWAgDBRAAgmAgABBMBgGAiABBMBACCiQBAsIV5nBiehXMCAD826zmBWpwYBsi2UFXV5vHrP6WGycnhae4QAuD0JncGneak8He8sBIACCYCAMEa//b+bx5vDJ/dRgQAtY2/EprDVdJ9KwGAYLWukgbgbI03g+tuCLtKGoDPRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEKwxGbwbDZtb3WfrpYbW4vLR3cubbwsAv8Tj3Tcrzwf9lTInVgIAwRp///Hn6Ph1u9Qw+HC49OD1y4sFgDNxvX3h4Fbn0kGpZ8dKACCYCAAEW9jqPrlZVUv3yymtNVujv9Y29qb9Ouh2Z2PvWrvzvgDwjWl+oLM/OlwefBw1fm+1682lVfXUSgAg2JefiI4/0d9Zv7oz7YPbw0HzYb97fjxuL/92dO/KjRM3lx/1e6u94f65AsBPnTSnTubfWeftr58fj60EAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgc71Kehr/7b5aHf8VAGqZx7xtJQAQ7BOP4saDQA2PwQAAAABJRU5ErkJggg==) no-repeat; - background-size: 100% 100%; - display: flex; - align-items: center; + .app-grid { + display: grid; + /* 改为自适应列数：每格最小 80px，自动换行 */ + grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + + justify-items: center; /* 子项内容居中（图标和文字） */ + justify-content: start; /* 整体网格靠左对齐，避免居中 */ + gap: 12px; + padding: 12px; + background: #fff; + overflow-x: hidden; + + max-height: calc(350px - 74px); + overflow-y: auto; } - .service-card:hover { - + .app-item { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + padding: 12px; + border-radius: 8px; + background: #fff; + width: 100%; + max-width: 100%; + transition: transform 0.2s ease, box-shadow 0.2s ease; } - .service-icon { - width: 32px; - height: 32px; - flex-shrink: 0; + .app-item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.1); } - .service-icon img { + .app-icon { + width: 46px; + height: 46px; + margin-bottom: 8px; + } + + .app-icon img { width: 100%; height: 100%; - border-radius: 4px; - object-fit: cover; + object-fit: contain; } - .service-info { - flex: 1; - min-width: 0; - overflow: hidden; - } - - .service-name { - font-size: 14px; - font-weight: 400; + .app-name { + font-size: 12px; color: #333; - margin: 0; line-height: 1.4; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + word-break: break-word; + text-align: center; } /* 响应式设计 */ @media (max-width: 768px) { - .entry-container { - flex-direction: column; - gap: 20px; + .tabs { + flex-wrap: wrap; + gap: 10px; } - .sidebar { - width: 100%; - display: flex; - overflow-x: auto; - gap: 0; - border-bottom: 1px solid #e8e8e8; - padding-bottom: 0; + .tab-item { + padding: 8px 0; + font-size: 12px; } - .category { - flex-shrink: 0; - margin-bottom: 0; - white-space: nowrap; - border-left: none; - border-bottom: 3px solid transparent; + .app-grid { + grid-template-columns: repeat(2, 1fr); + gap: 15px; } - .category.active { - border-left: none; - border-bottom-color: #1890ff; - } - - .services-grid { - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + .app-item { + padding: 12px; } } @media (max-width: 480px) { - .services-grid { - grid-template-columns: 1fr 1fr; - } - - .service-card { - padding: 12px; + .app-grid { + grid-template-columns: 1fr; + gap: 12px; } } ` -} +}; diff --git a/src/main/resources/views/layouts/v4/home/index.html b/src/main/resources/views/layouts/v4/home/index.html index 3192b2ca..57f47b69 100644 --- a/src/main/resources/views/layouts/v4/home/index.html +++ b/src/main/resources/views/layouts/v4/home/index.html @@ -3,6 +3,7 @@ layout("/layouts/v4/baseLayout.html"){ #--> -
- - - - - - -
- + +
+ + +
+
+ +
+ +
+ +
+
+ +
- -