diff --git a/Cunkebao/App.vue b/Cunkebao/App.vue index 57cb0a6c..b0333295 100644 --- a/Cunkebao/App.vue +++ b/Cunkebao/App.vue @@ -45,6 +45,9 @@ /* 导入全局样式变量 */ @import "./uni.scss"; + /* 导入字体 */ + @import "./static/fonts/fonts.css"; + /* 全局样式 */ page { background-color: $bg-color; diff --git a/Cunkebao/components/CustomTabBar.vue b/Cunkebao/components/CustomTabBar.vue index b649e618..02ff322d 100644 --- a/Cunkebao/components/CustomTabBar.vue +++ b/Cunkebao/components/CustomTabBar.vue @@ -68,7 +68,6 @@ export default { bottom: 0; left: 0; right: 0; - height: 150rpx; background-color: #fff; display: flex; box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); @@ -85,7 +84,6 @@ export default { .tab-text { font-size: 26rpx; color: #999; - margin-top: 10rpx; &.active-text { color: #4080ff; diff --git a/Cunkebao/pages/index/index.vue b/Cunkebao/pages/index/index.vue index c6a82c2c..3802e58b 100644 --- a/Cunkebao/pages/index/index.vue +++ b/Cunkebao/pages/index/index.vue @@ -2,9 +2,9 @@ - 存客宝 + 存客宝 - + @@ -13,24 +13,24 @@ 设备数量 - 42 - + 42 + 微信号数量 - 42 - + 42 + 在线微信号 - 35 - + 35 + @@ -42,11 +42,11 @@ - 场景获客统计 + 场景获客统计 - + 234 公众号获客 @@ -54,7 +54,7 @@ - + 167 海报获客 @@ -62,7 +62,7 @@ - + 156 抖音获客 @@ -70,7 +70,7 @@ - + 89 小红书获客 @@ -80,13 +80,13 @@ - 每日获客趋势 + 每日获客趋势 @@ -158,12 +158,16 @@ export default { align-items: center; padding: 25rpx 30rpx; background-color: #fff; - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid #e5e5e5; .title { font-size: 45rpx; font-weight: bold; color: #2664ec; + + &.align-left { + text-align: left; + } } .header-icons { @@ -184,12 +188,12 @@ export default { border-radius: 30rpx; padding: 30rpx 30rpx; margin: 15rpx; - box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); + box-shadow: 0 2rpx 7rpx rgba(0, 0, 0, 0.15); .data-title { font-size: 28rpx; color: black; - margin-bottom: 16rpx; + text-align: center; } .data-content { @@ -198,9 +202,30 @@ export default { justify-content: space-between; .data-number { - font-size: 55rpx; + font-size: 58rpx; font-weight: bold; - color: #4080ff; + color: #2563EB; + height: 80rpx; + line-height: 80rpx; + } + + .device-icon { + width: 76rpx; + height: 60rpx; + margin-right: 6rpx; + } + + .team-icon { + width: 76rpx; + height: 60rpx; + margin-right: 6rpx; + } + + .heartbeat-icon { + width: 76rpx; + height: 60rpx; + margin-right: 6rpx; + animation: pulse 1.5s ease-in-out infinite; } } @@ -235,15 +260,20 @@ export default { .stat-card, .trend-card { margin: 35rpx; background-color: #fff; - border-radius: 16rpx; + border-radius: 30rpx; padding: 25rpx 40rpx; - box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); + box-shadow: 0 2rpx 7rpx rgba(0, 0, 0, 0.15); .card-title { font-size: 36rpx; font-weight: bold; margin-bottom: 30rpx; color: #333; + text-align: center; + + &.align-left { + text-align: left; + } } } @@ -259,8 +289,8 @@ export default { padding: 20rpx 0; .stat-icon { - width: 80rpx; - height: 80rpx; + width: 96rpx; + height: 96rpx; border-radius: 50%; display: flex; justify-content: center; @@ -268,25 +298,25 @@ export default { margin-bottom: 16rpx; &.bg-green { - background-color: #07c160; + background-color: rgba(7, 193, 96, 0.2); } &.bg-yellow { - background-color: #ff9900; + background-color: rgba(255, 153, 0, 0.2); } &.bg-black { - background-color: #000000; + background-color: rgba(0, 0, 0, 0.2); } &.bg-red { - background-color: #fa5151; + background-color: rgba(250, 81, 81, 0.2); } } .stat-number { - font-size: 32rpx; - font-weight: bold; + font-size: 34rpx; + font-weight: normal; color: #333; margin-bottom: 8rpx; } diff --git a/Cunkebao/static/fonts/fonts.css b/Cunkebao/static/fonts/fonts.css new file mode 100644 index 00000000..c09b4e0b --- /dev/null +++ b/Cunkebao/static/fonts/fonts.css @@ -0,0 +1,27 @@ +@font-face { + font-family: 'Digital-Bold'; + src: url('https://cdn.jsdelivr.net/npm/alibaba-puhuiti@1.0.0/AlibabaPuHuiTi-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Digital-Medium'; + src: url('https://cdn.jsdelivr.net/npm/alibaba-puhuiti@1.0.0/AlibabaPuHuiTi-Medium.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +.digital-text { + font-family: 'Digital-Bold', sans-serif; + font-weight: bold; + letter-spacing: 0.5px; +} + +.digital-number { + font-family: 'Digital-Bold', sans-serif; + font-weight: bold; + letter-spacing: 0.5px; +} \ No newline at end of file diff --git a/Cunkebao/static/images/icons/heartbeat.svg b/Cunkebao/static/images/icons/heartbeat.svg new file mode 100644 index 00000000..38006377 --- /dev/null +++ b/Cunkebao/static/images/icons/heartbeat.svg @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/Cunkebao/static/images/icons/smartphone.svg b/Cunkebao/static/images/icons/smartphone.svg new file mode 100644 index 00000000..556da438 --- /dev/null +++ b/Cunkebao/static/images/icons/smartphone.svg @@ -0,0 +1,21 @@ + + + + + + + \ No newline at end of file diff --git a/Cunkebao/static/images/icons/team.svg b/Cunkebao/static/images/icons/team.svg new file mode 100644 index 00000000..8d82f6e9 --- /dev/null +++ b/Cunkebao/static/images/icons/team.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Cunkebao/static/images/icons/users.svg b/Cunkebao/static/images/icons/users.svg new file mode 100644 index 00000000..a623fe4b --- /dev/null +++ b/Cunkebao/static/images/icons/users.svg @@ -0,0 +1,24 @@ + + + + + + + + + + \ No newline at end of file diff --git a/Cunkebao/static/images/icons/wechat.svg b/Cunkebao/static/images/icons/wechat.svg new file mode 100644 index 00000000..1c32bafc --- /dev/null +++ b/Cunkebao/static/images/icons/wechat.svg @@ -0,0 +1,21 @@ + + + + + + + + + \ No newline at end of file diff --git a/Cunkebao/uni.scss b/Cunkebao/uni.scss index 9aea9656..700a1e67 100644 --- a/Cunkebao/uni.scss +++ b/Cunkebao/uni.scss @@ -19,7 +19,7 @@ $border-color-lighter: #ebeef5; $border-color-extra-light: #f2f6fc; /* 背景颜色 */ -$bg-color: #f7f7f7; +$bg-color: #f9fafb; $bg-color-white: #ffffff; $bg-color-primary: rgba(64, 128, 255, 0.1); $bg-color-success: rgba(7, 193, 96, 0.1);