From 60db94e3771876d7e9d53a5eb88c0d6a5535bc09 Mon Sep 17 00:00:00 2001 From: zheng020 Date: Mon, 1 Jun 2026 15:06:35 +0800 Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=89=8D?= =?UTF-8?q?=E7=AB=AF=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/pages/components/Header.vue | 862 +++++++++--------- frontend/pages/profile/hisWorks.vue | 515 +++++++++-- frontend/pages/profile/myWorks.vue | 1 + .../square/components/HotCategoryBlock.vue | 354 +++++-- frontend/pages/square/square.vue | 337 ++++--- frontend/static/square/top/TOP1biankuang.png | Bin 0 -> 16405 bytes frontend/static/square/top/TOP1icon.png | Bin 0 -> 55068 bytes frontend/static/square/top/TOP2biankuang.png | Bin 0 -> 16331 bytes frontend/static/square/top/TOP2icon.png | Bin 0 -> 54460 bytes .../static/square/top/TOP3biankuangpng.png | Bin 0 -> 15045 bytes frontend/static/square/top/TOP3icon.png | Bin 0 -> 44438 bytes 11 files changed, 1375 insertions(+), 694 deletions(-) create mode 100644 frontend/static/square/top/TOP1biankuang.png create mode 100644 frontend/static/square/top/TOP1icon.png create mode 100644 frontend/static/square/top/TOP2biankuang.png create mode 100644 frontend/static/square/top/TOP2icon.png create mode 100644 frontend/static/square/top/TOP3biankuangpng.png create mode 100644 frontend/static/square/top/TOP3icon.png diff --git a/frontend/pages/components/Header.vue b/frontend/pages/components/Header.vue index 867cad7..f615e5a 100644 --- a/frontend/pages/components/Header.vue +++ b/frontend/pages/components/Header.vue @@ -1,53 +1,73 @@ diff --git a/frontend/pages/profile/hisWorks.vue b/frontend/pages/profile/hisWorks.vue index 648bac6..e19f931 100644 --- a/frontend/pages/profile/hisWorks.vue +++ b/frontend/pages/profile/hisWorks.vue @@ -22,39 +22,76 @@ - - + + + + + - {{ item.like_count || 0 }} + {{ exhibitionAtSlot[0].like_count || 0 }} - - - - {{ formatCountdown(item.id) }} - + {{ formatCountdown(exhibitionAtSlot[0].id) }} - - + - {{ item.earnings || 0 }}/时 + {{ exhibitionAtSlot[0].earnings || 0 }}/时 + + + + + - - - 该用户暂无在展作品 + + + + + + + + + + + + {{ exhibitionAtSlot[1].like_count || 0 }} + + + + {{ formatCountdown(exhibitionAtSlot[1].id) }} + + + + + {{ exhibitionAtSlot[1].earnings || 0 }}/时 + + + + + + + @@ -68,18 +105,6 @@ - @@ -90,11 +115,15 @@ mode="aspectFit"> - - + @@ -116,7 +145,7 @@ :src="item.earnings > 10 ? '/static/square/shuijingtubiao.png' : '/static/icon/crystal.png'" mode="aspectFit"> - +{{ item.reward }} + {{ item.reward }} @@ -132,9 +161,13 @@ @@ -332,6 +643,7 @@ onUnmounted(() => { position: relative; } +/* 背景图片 */ .bg-image { position: fixed; top: 0; @@ -341,13 +653,14 @@ onUnmounted(() => { z-index: 0; } +/* 导航栏 */ .nav-bar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; - padding: 80rpx 32rpx 16rpx; + padding: 96rpx 32rpx 16rpx; } .nav-back { @@ -365,28 +678,39 @@ onUnmounted(() => { } .nav-title { - font-size: 48rpx; + font-size: 36rpx; font-weight: 700; - color: #fff; - text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.9); + color: #5a2d82; letter-spacing: 2rpx; } .nav-placeholder { - width: 80rpx; + width: 64rpx; } +/* 内容区域 */ .scroll-content { position: relative; z-index: 1; } .section-block { - /* background: rgb(249 159 192 / 45%); - border-radius: 48rpx; */ padding: 16rpx; } +/* 区块 */ +.section-1 { + margin-bottom: 8rpx; +} + +/* 点赞标签容器 */ +.liked-tabs { + display: flex; + gap: 16rpx; + margin-bottom: 16rpx; +} + +/* 区块标签 */ .section-label { position: relative; display: inline-flex; @@ -406,12 +730,6 @@ onUnmounted(() => { opacity: 1; } -.liked-tabs { - display: flex; - gap: 16rpx; - margin-bottom: 16rpx; -} - .section-label-bg { position: absolute; top: 0; @@ -430,6 +748,7 @@ onUnmounted(() => { padding: 0 28rpx; } +/* 在展作品网格 */ .exhibition-grid { display: flex; flex-direction: row; @@ -454,6 +773,7 @@ onUnmounted(() => { .card-tilt-right { transform: rotate(4deg) translateY(10rpx); + margin-left: 32rpx; border-radius: 32rpx; box-shadow: 16rpx 16rpx 16rpx rgba(229, 76, 93, 0.9); } @@ -486,6 +806,18 @@ onUnmounted(() => { z-index: 2; } +.card-lenticular { + width: 88%; + height: 93%; + left: 5%; + top: 4%; + border-radius: 24rpx; + transform-origin: center center; + position: relative; + z-index: 3; + overflow: hidden; +} + .card-rate-badge { position: absolute; top: 16rpx; @@ -498,6 +830,7 @@ onUnmounted(() => { z-index: 9; } +/* 图片下方收益 */ .card-income-row { position: absolute; bottom: -88rpx; @@ -516,7 +849,6 @@ onUnmounted(() => { z-index: 2; margin-right: -16rpx; left: 20rpx; - top: 8rpx; } .card-income-text-wrap { @@ -527,7 +859,8 @@ onUnmounted(() => { #B94E73 100%); border-radius: 999rpx; padding: 8rpx 20rpx 8rpx 40rpx; - box-shadow: 0 4rpx 12rpx rgba(255, 143, 158, 0.2), + box-shadow: + 0 4rpx 12rpx rgba(255, 143, 158, 0.2), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4); display: flex; align-items: center; @@ -541,6 +874,7 @@ onUnmounted(() => { text-align: center; } + .heart-icon { width: 28rpx; height: 28rpx; @@ -553,7 +887,8 @@ onUnmounted(() => { #B94E73 100%); border-radius: 999rpx; padding: 2rpx 16rpx; - box-shadow: 0 4rpx 12rpx rgba(255, 143, 158, 0.2), + box-shadow: + 0 4rpx 12rpx rgba(255, 143, 158, 0.2), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4); display: flex; } @@ -566,10 +901,6 @@ onUnmounted(() => { /* 倒计时背景 */ .countdown-background { - /* position: absolute; - bottom: 20rpx; - right: 30%; - transform: translateX(-50%); */ width: 140rpx; height: 36rpx; background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%); @@ -593,11 +924,32 @@ onUnmounted(() => { justify-content: center; } -.empty-exhibition { - display: flex; - align-items: center; - justify-content: center; - padding: 80rpx 0; +/* 空状态 */ +.empty-card { + width: 248rpx; + height: 380rpx; + border-radius: 20rpx; + overflow: visible; + position: relative; + margin: 0 32rpx; +} + +.empty-card-left { + transform: rotate(-4deg) translateY(10rpx); +} + +.empty-card-right { + transform: rotate(4deg) translateY(10rpx); +} + +.empty-cover { + width: 88%; + height: 92%; + border-radius: 80rpx; + position: relative; + z-index: 3; + padding: 16rpx; + opacity: 0.5; } .empty-text { @@ -605,6 +957,7 @@ onUnmounted(() => { color: #b09cc0; } +/* 当前点赞列表 */ .liked-list { max-height: 732rpx; } @@ -620,13 +973,12 @@ onUnmounted(() => { display: flex; align-items: center; background: #ffffff50; - border-radius: 32rpx; + border-radius: 48rpx; padding: 24rpx 20rpx; - gap: 16rpx; - overflow: hidden; box-sizing: border-box; width: 80%; padding-left: 13%; + justify-content: space-between; } .liked-item-first { @@ -642,7 +994,6 @@ onUnmounted(() => { /* 排名图标 - 排名越靠前越大 */ .rank-icon { flex-shrink: 0; - /* margin-right: 8rpx; */ position: relative; left: 32rpx; } @@ -662,12 +1013,12 @@ onUnmounted(() => { height: 88rpx; } +/* 作品封面 */ .liked-cover-wrap { width: 88rpx; height: 88rpx; flex-shrink: 0; margin-left: -18rpx; - margin-right: 48rpx; position: relative; } @@ -682,6 +1033,17 @@ onUnmounted(() => { padding: 0.25rem; } +.liked-lenticular { + width: 90%; + height: 90%; + border-radius: 24rpx; + transform: rotate(-22deg); + transform-origin: center center; + position: relative; + z-index: 3; + overflow: hidden; +} + .liked-cover-frame { position: absolute; top: 0; @@ -693,12 +1055,12 @@ onUnmounted(() => { transform-origin: center center; } + +/* 作品信息 */ .liked-info { - flex: 1; - min-width: 0; display: flex; flex-direction: column; - overflow: hidden; + margin: 0 16rpx 0 32rpx; } .liked-status { @@ -731,26 +1093,31 @@ onUnmounted(() => { margin-top: 4rpx; } +/* 右侧奖励 */ .liked-reward { + min-width: 136rpx; + padding: 8rpx 16rpx; + background: rgba(255, 255, 255, 0.3); + border-radius: 999rpx; display: flex; flex-direction: row; align-items: center; - justify-content: center; - gap: 8rpx; - flex-shrink: 0; } .reward-token-icon { width: 56rpx; height: 56rpx; + margin-right: 8rpx; } .reward-amount { font-size: 28rpx; - color: #c060e0; - font-weight: 700; + color: #fff; + font-weight: 600; + text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.7); } +/* 空状态 */ .empty-liked { padding: 60rpx 0; display: flex; diff --git a/frontend/pages/profile/myWorks.vue b/frontend/pages/profile/myWorks.vue index 355713b..77791bc 100644 --- a/frontend/pages/profile/myWorks.vue +++ b/frontend/pages/profile/myWorks.vue @@ -1448,6 +1448,7 @@ onShow(() => { box-sizing: border-box; width: 80%; padding-left: 13%; + justify-content: space-between; } .liked-item-first { diff --git a/frontend/pages/square/components/HotCategoryBlock.vue b/frontend/pages/square/components/HotCategoryBlock.vue index 60134a6..108eb2c 100644 --- a/frontend/pages/square/components/HotCategoryBlock.vue +++ b/frontend/pages/square/components/HotCategoryBlock.vue @@ -7,7 +7,7 @@ - + @@ -18,137 +18,203 @@ - + - - + + - - -