diff --git a/frontend/pages/profile/profile.vue b/frontend/pages/profile/profile.vue index 5227326..f8d6afe 100644 --- a/frontend/pages/profile/profile.vue +++ b/frontend/pages/profile/profile.vue @@ -3,9 +3,9 @@ - + ← @@ -31,41 +31,53 @@ - {{ nickname }} - - - - DID - - {{ uid }} - - - - - - 链上地址 - - {{ displayAddress - }} - - + + + + 修改昵称 + - - - 注册手机 - - {{ displayMobile }} - - + + + + DID + + {{ uid }} + + + + + + 链上地址 + + {{ + displayAddress + }} + + + + + + + + 注册手机 + + {{ displayMobile }} + + + @@ -78,7 +90,7 @@ - + 我的资产 @@ -115,6 +127,11 @@ 修改密码 + + + + APP介绍 + - - - + + + + 退出登录 @@ -1286,9 +1303,10 @@ onShow(() => { transform: translate(-50%, -50%); z-index: 2; border-radius: 86rpx; - background: linear-gradient(133.78deg, rgba(154, 146, 255, 0.19) 9.69%, rgba(255, 202, 229, 0.19) 43.91%, rgba(255, 250, 253, 0.1881) 76.13%, rgba(63, 63, 76, 0.19) 91.61%); - backdrop-filter: blur(35.70000076293945px); - box-shadow: 2px 4px 1.8px 0px #D629291F; + + background: linear-gradient(133.78deg, rgba(154, 146, 255) 9.69%, rgba(255, 202, 229) 43.91%, rgba(255, 250, 253, 0.99) 90.13%, rgba(63, 63, 76, 0.19) 99.9%); + box-shadow: 2px 4px 1.8px 0px rgba(214, 41, 41, 0.12); + } @@ -1344,6 +1362,7 @@ onShow(() => { height: auto; overflow: hidden; margin-bottom: 64rpx; + } .background-image { @@ -1408,11 +1427,8 @@ onShow(() => { .user-info-card { position: relative; z-index: 2; - width: 90%; - max-width: 600rpx; margin: 0 auto; margin-top: 64rpx; - padding: 40rpx 0; display: flex; flex-direction: row; } @@ -1427,7 +1443,7 @@ onShow(() => { .avatar-container { position: absolute; - left: -0; + left: 30rpx; top: 32rpx; } @@ -1439,20 +1455,65 @@ onShow(() => { justify-content: flex-end; gap: 8rpx; margin-left: 8rpx; - padding: 24rpx 24rpx 24rpx 240rpx; + padding: 24rpx 24rpx 24rpx 224rpx; min-width: 356rpx; } +.info-row-wrapper { + height: 140.8rpx; + display: flex; + flex-direction: column; + justify-content: center; + opacity: 0.71; + border-top-left-radius: 15px; + border-bottom-right-radius: 15px; + + background: linear-gradient(133.78deg, rgba(154, 146, 255, 0.46) 4.58%, rgba(255, 202, 229, 0.46) 43.91%, rgba(255, 250, 253, 0.4554) 76.13%, rgba(211, 209, 255, 0.46) 91.61%); + +} + .info-row { display: flex; align-items: center; - gap: 12rpx; + padding: 0 12rpx; + +} + +.edit-btn { + min-width: 144rpx; + display: flex; + align-items: center; + justify-content: space-between; + +} + +.edit-nickname-btn { + width: 46.4rpx; + height: 46.4rpx; +} + +.edit-nickname-text { + display: flex; + border-radius: 18rpx; + background: linear-gradient(100.7deg, rgba(103, 226, 222, 0.68) -3.17%, rgba(185, 78, 238, 0.68) 43.09%, rgba(225, 137, 139, 0.68) 99.19%); + +} + +.edit-nickname-placeholder { + font-size: 15rpx; + color: #FFF9E7; + padding: 4rpx 12rpx; + border-radius: 16rpx; + font-weight: 500; } .info-label { - font-size: 24rpx; - color: rgba(255, 255, 255, 0.7); + font-size: 22rpx; + color: #FFF9E7; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.84); min-width: 112rpx; + font-weight: 400; + } .address-row { @@ -1461,14 +1522,15 @@ onShow(() => { } .info-value { - font-size: 24rpx; - color: #ffffff; + font-size: 22rpx; + color: #FFF9E7; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - min-width: 200rpx; - + min-width: 192rpx; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.84); + font-weight: 400; } .toggle-icon { @@ -1572,7 +1634,6 @@ onShow(() => { .bottom-section { position: relative; width: 100%; - min-height: 55vh; z-index: 3; padding: 0 30rpx; box-sizing: border-box; @@ -1586,15 +1647,16 @@ onShow(() => { .section-bg { border-radius: 30rpx; - padding: 30rpx; - margin-bottom: 64rpx; + padding: 8rpx 30rpx 16rpx; + background: linear-gradient(133.78deg, rgba(154, 146, 255, 0.46) 4.58%, rgba(255, 202, 229, 0.46) 43.91%, rgba(255, 250, 253, 0.4554) 76.13%, rgba(211, 209, 255, 0.46) 91.61%); + margin-bottom: 16rpx; } .section-title { - font-size: 40rpx; - text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); - font-weight: bold; - color: #fff; + font-size: 32rpx; + text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.84); + font-weight: 500; + color: #FFF9E7; margin-bottom: 8rpx; } @@ -1603,7 +1665,7 @@ onShow(() => { grid-template-columns: 1fr 1fr; gap: 20rpx; margin-bottom: 0; - height: 176rpx; + height: 128rpx; overflow: hidden; } @@ -1612,23 +1674,25 @@ onShow(() => { background-size: 100% 125%; background-position: center; border-radius: 20rpx; - padding: 0 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; - height: 192rpx; + height: 128rpx; + width: 224rpx; + box-shadow: 1px 3px 7px 0px #D833336E; + overflow: hidden; } .asset-icon { - width: 178rpx; - height: 178rpx; + width: 100%; + height: 100%; position: absolute; - top: 60%; + bottom: -20%; left: 50%; - transform: translate(-50%, -50%); - opacity: 0.4; + transform: translate(-50%, 0%); + opacity: 0.7; } .asset-text { @@ -1663,8 +1727,8 @@ onShow(() => { background-size: 100% 100%; background-position: center; border-radius: 20rpx; - width: 136rpx; - height: 160rpx; + width: 102rpx; + height: 102rpx; display: flex; flex-direction: column; align-items: center; @@ -1676,19 +1740,19 @@ onShow(() => { } .service-icon { - width: 96rpx; - height: 96rpx; + width: 80rpx; + height: 80rpx; margin-bottom: 8rpx; } .service-icon-emoji { - font-size: 40rpx; + font-size: 16rpx; margin-bottom: 6rpx; display: block; } .service-text { - font-size: 24rpx; + font-size: 16rpx; color: #fff; text-align: center; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); @@ -1706,17 +1770,21 @@ onShow(() => { } .logout-section { - padding: 10rpx 30rpx; - padding-bottom: calc(40rpx + constant(safe-area-inset-bottom)); - /* iOS 11.0 */ - padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); - /* iOS 11.2+ */ + width: 6rem; + height: 2rem; display: flex; - position: relative; + position: fixed; + bottom: 160rpx; + left: 50%; + transform: translate(-50%, 0); + border-radius: 40rpx; + background: linear-gradient(115.98deg, #F6E9B4 -19.66%, #F08399 70.92%, rgba(213, 107, 109, 0.83521) 138.79%, rgba(105, 209, 230, 0.69) 198.61%); + justify-content: center; + align-items: center; } /* 使用 ::after 伪元素绘制完美的圆角横线 */ -.logout-section::after { +/* .logout-section::after { content: ''; position: absolute; top: -6rpx; @@ -1731,23 +1799,12 @@ onShow(() => { width: calc(100% - 60rpx); transform: translateX(30rpx); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); -} +} */ .logout-button { - width: 60%; - height: 112rpx; - line-height: 112rpx; - background: linear-gradient(to bottom right, - #F0E4B1 0%, - #F08399 50%, - #B94E73 100%); - border-radius: 40rpx; - font-size: 56rpx; + font-size: 30rpx; color: #fff; font-weight: 500; - margin-top: 20rpx; - flex-shrink: 0; - opacity: 0.6; } diff --git a/frontend/pages/square/components/CreationGrid.vue b/frontend/pages/square/components/CreationGrid.vue index 7e6154e..44d4807 100644 --- a/frontend/pages/square/components/CreationGrid.vue +++ b/frontend/pages/square/components/CreationGrid.vue @@ -1,88 +1,19 @@ + \ No newline at end of file diff --git a/frontend/static/icon/starbook.png b/frontend/static/icon/starbook.png index 612d715..5e54266 100644 Binary files a/frontend/static/icon/starbook.png and b/frontend/static/icon/starbook.png differ