From 616bcbe1909e767abb900639dbd5ffa2a7db0bfe Mon Sep 17 00:00:00 2001 From: tianyongbao Date: Mon, 3 Nov 2025 02:53:14 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E6=97=A5=E5=8E=86?= =?UTF-8?q?=E3=80=81=E5=87=80=E8=B5=84=E4=BA=A7=E3=80=81=E7=BB=9F=E8=AE=A1?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E7=BB=9F=E4=B8=80=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/page.scss | 228 +++-- src/views/invest/accountAnalysis/index.vue | 802 +++++++++++++----- src/views/invest/accountCalendar/index.vue | 653 +++++++++++++- .../invest/accountDealAnalysis/index.vue | 231 +++-- src/views/invest/accountsBalance/index.vue | 271 ++++-- src/views/invest/creditAnalysis/index.vue | 135 ++- .../invest/creditCardDealAnalysis/index.vue | 241 ++++-- .../creditInstallmentAnalysis/index.vue | 188 +++- .../index.vue | 150 +++- .../invest/creditRecordAnalysis/index.vue | 215 +++-- .../invest/dailyExpensesAnalysis/index.vue | 284 +++++-- src/views/invest/dailyLiabilities/index.vue | 298 ++++++- src/views/invest/debitCardAnalysis/index.vue | 165 ++-- src/views/invest/debitDealAnalysis/index.vue | 241 ++++-- src/views/invest/futuresAnalysis/index.vue | 158 +++- src/views/invest/investAnalysis/index.vue | 171 +++- src/views/invest/investDealAnalysis/index.vue | 215 +++-- src/views/invest/onlineLendAnalysis/index.vue | 189 ++++- .../onlineLendSettledAnalysis/index.vue | 150 +++- src/views/invest/openCardStatics/index.vue | 185 +++- src/views/invest/posAnalysis/index.vue | 89 +- src/views/invest/posStatics/index.vue | 163 ++-- src/views/invest/stocksAnalysis/index.vue | 158 +++- .../invest/transferRecordAnalysis/index.vue | 61 +- 24 files changed, 4281 insertions(+), 1360 deletions(-) diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss index 05c5674..99cb1dd 100644 --- a/src/assets/styles/page.scss +++ b/src/assets/styles/page.scss @@ -505,62 +505,115 @@ padding: 0.2rem; display: flex; justify-content: space-between; + gap: 0.16rem; .left-con, .center-con, .right-con { width: 5.8rem; - height: 1.1rem; - background: #f8f9fc; - border-radius: 0.04rem; + height: 1.2rem; + background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); + border-radius: 0.12rem; display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-start; + padding: 0.2rem 0.24rem; + box-shadow: 0 0.04rem 0.16rem rgba(102, 126, 234, 0.08), 0 0 0 0.01rem rgba(102, 126, 234, 0.05); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + list-style: none; - .img { - width: 0.88rem; - height: 0.93rem; - margin-top: 8px; + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 0.03rem; + background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%); + opacity: 0; + transition: opacity 0.3s ease; + } - img { - width: 100%; - height: 100%; + &:hover { + transform: translateY(-0.04rem); + box-shadow: 0 0.08rem 0.24rem rgba(102, 126, 234, 0.15), 0 0 0 0.01rem rgba(102, 126, 234, 0.1); + + &::before { + opacity: 1; + } + + .icon-box { + transform: scale(1.08); + + .el-icon { + transform: rotate(8deg); + } + } + } + + .icon-box { + width: 0.7rem; + height: 0.7rem; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%); + border-radius: 0.1rem; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + border: 0.01rem solid rgba(102, 126, 234, 0.1); + margin-right: 0.16rem; + + .el-icon { + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } } .line { - width: 0.01rem; - height: 0.41rem; - border: 0.01rem solid #e2ede0; + width: 0.02rem; + height: 0.5rem; + background: linear-gradient(180deg, transparent 0%, rgba(102, 126, 234, 0.15) 20%, rgba(102, 126, 234, 0.15) 80%, transparent 100%); + border: none; + border-radius: 0.01rem; + flex-shrink: 0; + margin: 0 0.12rem; } .item-wrap { - .num { - font-size: 0.24rem; - font-family: PingFangSC, PingFang SC; - font-weight: 600; - color: #1d2129; - line-height: 0.33rem; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.04rem; - .unit { - font-weight: 500; - color: #1f2d3d; - line-height: 0.24rem; - } + &::before, + &::after { + display: none; + } + + .num { + font-size: 0.26rem; + font-family: PingFangSC, PingFang SC, DIN, Arial, sans-serif; + font-weight: 700; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; + transition: all 0.3s ease; + white-space: nowrap; } .title { - height: 0.22rem; - font-size: 16px; + font-size: 0.13rem; font-family: PingFangSC, PingFang SC; font-weight: 400; - color: #475669; - line-height: 0.22rem; - margin-top: 0.06rem; - } - - &:last-child { - margin-right: 0.6rem; + color: #909399; + line-height: 1.2; + letter-spacing: 0.005rem; + white-space: nowrap; + margin-top: 0.04rem; } } } @@ -568,21 +621,42 @@ .center-con, .right-con { width: 3.2rem; - height: 1.1rem; - background: #f8f9fc; - border-radius: 0.04rem; + height: 1.2rem; + background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); + border-radius: 0.12rem; display: flex; align-items: center; justify-content: flex-start; + padding: 0.2rem 0.24rem; - .img { - width: 56px; - height: 56px; - margin: 0 24px; + .icon-box { + width: 0.7rem; + height: 0.7rem; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%); + border-radius: 0.1rem; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + border: 0.01rem solid rgba(102, 126, 234, 0.1); + margin-right: 0.16rem; - img { - width: 100%; - height: 100%; + .el-icon { + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + } + + .item-wrap { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.04rem; + + &::before, + &::after { + display: none; } } } @@ -592,16 +666,41 @@ display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #e6e6ec; - margin-bottom: 0.1rem; - padding: 0.1rem 0.2rem; + border-bottom: 0.02rem solid transparent; + background: linear-gradient(to right, #e6e6ec, #e6e6ec) no-repeat bottom / 100% 0.01rem; + margin-bottom: 0.15rem; + padding: 0.12rem 0.2rem; position: relative; + &::after { + content: ''; + position: absolute; + bottom: -0.01rem; + left: 0; + width: 0.6rem; + height: 0.03rem; + background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); + border-radius: 0.02rem; + transition: width 0.3s ease; + } + .title { - font-size: 0.14rem; + font-size: 0.16rem; font-family: PingFang-SC-Medium, PingFang-SC; - font-weight: 500; - color: #000000; + font-weight: 600; + color: #303133; + letter-spacing: 0.01rem; + display: flex; + align-items: center; + gap: 0.08rem; + + &::before { + content: ''; + width: 0.04rem; + height: 0.18rem; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 0.02rem; + } .time_select { position: absolute; @@ -620,7 +719,13 @@ .el-button { min-width: 0.8rem; height: 0.28rem; - border-radius: 0.02rem; + border-radius: 0.04rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + transform: translateY(-0.02rem); + box-shadow: 0 0.04rem 0.12rem rgba(102, 126, 234, 0.2); + } } } } @@ -628,23 +733,36 @@ .content-con { overflow: hidden; - border-radius: 2px; - padding: 0 0.25rem; + border-radius: 0.12rem; + padding: 0.15rem 0.25rem; width: 100%; height: calc(100% - 0.59rem); + background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%); + box-shadow: 0 0.02rem 0.12rem rgba(102, 126, 234, 0.06); + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 0.04rem 0.16rem rgba(102, 126, 234, 0.1); + } .el-table__inner-wrapper { height: 100% !important; + border-radius: 0.08rem; + overflow: hidden; } .el-table__header { height: 0.5rem; - background: #fafafa; + background: linear-gradient(135deg, #f8f9fc 0%, #f0f4ff 100%); } .chart { width: 100%; height: 100%; + border-radius: 0.08rem; + padding: 0.1rem; + background: #ffffff; + box-shadow: inset 0 0.01rem 0.04rem rgba(102, 126, 234, 0.05); } .no_data { @@ -652,6 +770,8 @@ display: table-cell; vertical-align: middle; text-align: center; + color: #909399; + font-size: 0.14rem; } } diff --git a/src/views/invest/accountAnalysis/index.vue b/src/views/invest/accountAnalysis/index.vue index 924ea73..d796a46 100644 --- a/src/views/invest/accountAnalysis/index.vue +++ b/src/views/invest/accountAnalysis/index.vue @@ -1,9 +1,14 @@