主题:广场页面
This commit is contained in:
parent
63e4bc16a0
commit
c7eac54c04
8
.gitignore
vendored
8
.gitignore
vendored
|
|
@ -40,12 +40,14 @@ archive/
|
||||||
**/live-streaming/.env
|
**/live-streaming/.env
|
||||||
**/live-streaming/data/rooms.json
|
**/live-streaming/data/rooms.json
|
||||||
|
|
||||||
|
# 环境配置文件(包含服务器地址等敏感信息)
|
||||||
|
**/local.properties.production
|
||||||
|
**/local.properties.development
|
||||||
|
Zhibo/admin/vue.config.js
|
||||||
|
|
||||||
# OS/IDE
|
# OS/IDE
|
||||||
.DS_Store
|
.DS_Store
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
**/.idea/
|
**/.idea/
|
||||||
**/.vscode/
|
**/.vscode/
|
||||||
android-app/gradle/wrapper/gradle-wrapper.properties
|
android-app/gradle/wrapper/gradle-wrapper.properties
|
||||||
android-app/gradle/wrapper/gradle-wrapper.properties
|
|
||||||
android-app/gradle/wrapper/gradle-wrapper.properties
|
|
||||||
android-app/gradle/wrapper/gradle-wrapper.properties
|
|
||||||
|
|
|
||||||
|
|
@ -51,27 +51,27 @@ module.exports = {
|
||||||
},
|
},
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:30001',
|
target: 'http://localhost:8081',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
},
|
},
|
||||||
'/crmebimage': {
|
'/crmebimage': {
|
||||||
target: 'http://localhost:30001',
|
target: 'http://localhost:8081',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
},
|
},
|
||||||
'/file': {
|
'/file': {
|
||||||
target: 'http://localhost:30001',
|
target: 'http://localhost:8081',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
},
|
},
|
||||||
'/image': {
|
'/image': {
|
||||||
target: 'http://localhost:30001',
|
target: 'http://localhost:8081',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
},
|
},
|
||||||
'/video': {
|
'/video': {
|
||||||
target: 'http://localhost:30001',
|
target: 'http://localhost:8081',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
},
|
},
|
||||||
'/voice': {
|
'/voice': {
|
||||||
target: 'http://localhost:30001',
|
target: 'http://localhost:8081',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -463,19 +463,26 @@ html, body {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 拖动手柄 */
|
/* 拖动手柄 - 扩大可点击区域 */
|
||||||
.sheet-handle {
|
.sheet-handle {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 10px 16px 6px;
|
align-items: center;
|
||||||
cursor: pointer;
|
padding: 16px 16px 12px;
|
||||||
|
cursor: grab;
|
||||||
|
min-height: 44px;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sheet-handle:active {
|
||||||
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
|
|
||||||
.handle-bar {
|
.handle-bar {
|
||||||
width: 36px;
|
width: 40px;
|
||||||
height: 4px;
|
height: 5px;
|
||||||
background: #ddd;
|
background: #ccc;
|
||||||
border-radius: 2px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 区块头部 - 默认显示在底部 */
|
/* 区块头部 - 默认显示在底部 */
|
||||||
|
|
@ -677,40 +684,67 @@ html, body {
|
||||||
|
|
||||||
/* ========== 小游戏 ========== */
|
/* ========== 小游戏 ========== */
|
||||||
.game-list {
|
.game-list {
|
||||||
display: flex;
|
display: grid;
|
||||||
gap: 10px;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
overflow-x: auto;
|
gap: 12px;
|
||||||
padding-bottom: 4px;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-list::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-item {
|
.game-item {
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
padding: 16px 14px;
|
||||||
padding: 10px 16px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
min-height: 56px;
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-item:active {
|
.game-item:active {
|
||||||
background: #eee;
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小游戏卡片渐变背景色 - 参考图片样式 */
|
||||||
|
.game-item:nth-child(1) {
|
||||||
|
background: linear-gradient(135deg, #b8f5e0 0%, #7ee8c7 100%);
|
||||||
|
}
|
||||||
|
.game-item:nth-child(2) {
|
||||||
|
background: linear-gradient(135deg, #fff4b8 0%, #ffe566 100%);
|
||||||
|
}
|
||||||
|
.game-item:nth-child(3) {
|
||||||
|
background: linear-gradient(135deg, #e8d4f8 0%, #d4b8eb 100%);
|
||||||
|
}
|
||||||
|
.game-item:nth-child(4) {
|
||||||
|
background: linear-gradient(135deg, #ffe8f2 0%, #ffc8d8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-name {
|
.game-name {
|
||||||
font-size: 13px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 700;
|
||||||
color: #333;
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-desc {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-icon {
|
.game-icon {
|
||||||
font-size: 18px;
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32px;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 一起玩 ========== */
|
/* ========== 一起玩 ========== */
|
||||||
|
|
@ -722,39 +756,68 @@ html, body {
|
||||||
|
|
||||||
.together-card {
|
.together-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14px 8px;
|
padding: 12px 10px;
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
min-height: 70px;
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.together-card:active {
|
.together-card:active {
|
||||||
transform: scale(0.96);
|
transform: scale(0.96);
|
||||||
}
|
}
|
||||||
|
|
||||||
.together-icon {
|
/* 一起玩卡片渐变背景色 - 参考图片样式 */
|
||||||
font-size: 26px;
|
.together-card:nth-child(1) {
|
||||||
margin-bottom: 6px;
|
background: linear-gradient(135deg, #b8f5e8 0%, #7ee8d0 100%);
|
||||||
|
}
|
||||||
|
.together-card:nth-child(2) {
|
||||||
|
background: linear-gradient(135deg, #e8d8f8 0%, #d8c0f0 100%);
|
||||||
|
}
|
||||||
|
.together-card:nth-child(3) {
|
||||||
|
background: linear-gradient(135deg, #fff8b8 0%, #ffe866 100%);
|
||||||
|
}
|
||||||
|
.together-card:nth-child(4) {
|
||||||
|
background: linear-gradient(135deg, #ffe8f0 0%, #ffc8d8 100%);
|
||||||
|
}
|
||||||
|
.together-card:nth-child(5) {
|
||||||
|
background: linear-gradient(135deg, #e8d8f8 0%, #d8c0f0 100%);
|
||||||
|
}
|
||||||
|
.together-card:nth-child(6) {
|
||||||
|
background: linear-gradient(135deg, #ffb8a8 0%, #ff9080 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.together-info {
|
.together-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.together-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 6px;
|
||||||
|
bottom: 6px;
|
||||||
|
font-size: 24px;
|
||||||
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.together-title {
|
.together-title {
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.together-desc {
|
.together-desc {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #999;
|
color: #888;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 响应式 ========== */
|
/* ========== 响应式 ========== */
|
||||||
|
|
|
||||||
|
|
@ -207,19 +207,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="game-list">
|
<div class="game-list">
|
||||||
<div class="game-item" data-category-id="20" data-category-name="飞行棋">
|
<div class="game-item" data-category-id="20" data-category-name="飞行棋">
|
||||||
|
<div class="game-info">
|
||||||
<span class="game-name">飞行棋</span>
|
<span class="game-name">飞行棋</span>
|
||||||
<span class="game-icon">🎲</span>
|
</div>
|
||||||
|
<span class="game-icon">♟</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="game-item" data-category-id="21" data-category-name="桌球">
|
<div class="game-item" data-category-id="21" data-category-name="桌球">
|
||||||
|
<div class="game-info">
|
||||||
<span class="game-name">桌球</span>
|
<span class="game-name">桌球</span>
|
||||||
<span class="game-icon">🎱</span>
|
</div>
|
||||||
|
<span class="game-icon">🎯</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="game-item" data-category-id="22" data-category-name="五子棋">
|
<div class="game-item" data-category-id="22" data-category-name="五子棋">
|
||||||
|
<div class="game-info">
|
||||||
<span class="game-name">五子棋</span>
|
<span class="game-name">五子棋</span>
|
||||||
<span class="game-icon">⚫</span>
|
</div>
|
||||||
|
<span class="game-icon">⬛</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="game-item" data-category-id="23" data-category-name="你画我猜">
|
<div class="game-item" data-category-id="23" data-category-name="你画我猜">
|
||||||
|
<div class="game-info">
|
||||||
<span class="game-name">你画我猜</span>
|
<span class="game-name">你画我猜</span>
|
||||||
|
</div>
|
||||||
<span class="game-icon">🎨</span>
|
<span class="game-icon">🎨</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -232,25 +240,46 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="together-grid">
|
<div class="together-grid">
|
||||||
<div class="together-card" data-category-id="30" data-category-name="群聊广场">
|
<div class="together-card" data-category-id="30" data-category-name="群聊广场">
|
||||||
<div class="together-icon">💬</div>
|
|
||||||
<div class="together-info">
|
<div class="together-info">
|
||||||
<span class="together-title">群聊广场</span>
|
<span class="together-title">群聊广场</span>
|
||||||
<span class="together-desc">31人在一起</span>
|
<span class="together-desc">31人在一起</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="together-icon">💬</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="together-card" data-category-id="31" data-category-name="游戏组队">
|
<div class="together-card" data-category-id="31" data-category-name="游戏组队">
|
||||||
<div class="together-icon">👥</div>
|
|
||||||
<div class="together-info">
|
<div class="together-info">
|
||||||
<span class="together-title">游戏组队</span>
|
<span class="together-title">游戏组队</span>
|
||||||
<span class="together-desc">开黑上分</span>
|
<span class="together-desc">开黑上分</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="together-icon">🎮</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="together-card" data-category-id="32" data-category-name="纸飞机">
|
<div class="together-card" data-category-id="32" data-category-name="纸飞机">
|
||||||
<div class="together-icon">✈️</div>
|
|
||||||
<div class="together-info">
|
<div class="together-info">
|
||||||
<span class="together-title">纸飞机</span>
|
<span class="together-title">纸飞机</span>
|
||||||
<span class="together-desc">聊天匹配</span>
|
<span class="together-desc">聊天匹配</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="together-icon">✈️</div>
|
||||||
|
</div>
|
||||||
|
<div class="together-card" data-category-id="33" data-category-name="发对象">
|
||||||
|
<div class="together-info">
|
||||||
|
<span class="together-title">发对象</span>
|
||||||
|
<span class="together-desc">正经恋爱</span>
|
||||||
|
</div>
|
||||||
|
<div class="together-icon">💕</div>
|
||||||
|
</div>
|
||||||
|
<div class="together-card" data-category-id="34" data-category-name="树洞">
|
||||||
|
<div class="together-info">
|
||||||
|
<span class="together-title">树洞</span>
|
||||||
|
<span class="together-desc">匿名倾诉</span>
|
||||||
|
</div>
|
||||||
|
<div class="together-icon">🐚</div>
|
||||||
|
</div>
|
||||||
|
<div class="together-card" data-category-id="35" data-category-name="同城搭子">
|
||||||
|
<div class="together-info">
|
||||||
|
<span class="together-title">同城搭子</span>
|
||||||
|
<span class="together-desc">遇见附近的TA</span>
|
||||||
|
</div>
|
||||||
|
<div class="together-icon">🔥</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<menu xmlns:android="http://schemas.android.com/apk/res/android">
|
<menu xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
|
||||||
|
<item
|
||||||
|
android:id="@+id/nav_friends"
|
||||||
|
android:icon="@drawable/ic_people_24"
|
||||||
|
android:title="广场" />
|
||||||
|
|
||||||
<item
|
<item
|
||||||
android:id="@+id/nav_home"
|
android:id="@+id/nav_home"
|
||||||
android:icon="@drawable/ic_home_24"
|
android:icon="@drawable/ic_home_24"
|
||||||
android:title="首页" />
|
android:title="首页" />
|
||||||
|
|
||||||
<item
|
|
||||||
android:id="@+id/nav_friends"
|
|
||||||
android:icon="@drawable/ic_people_24"
|
|
||||||
android:title="缘池" />
|
|
||||||
|
|
||||||
<item
|
<item
|
||||||
android:id="@+id/nav_wish_tree"
|
android:id="@+id/nav_wish_tree"
|
||||||
android:icon="@drawable/ic_tree_24"
|
android:icon="@drawable/ic_tree_24"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user