diff --git a/packages/user/history/index.css b/packages/user/history/index.css new file mode 100644 index 00000000..d42a028b --- /dev/null +++ b/packages/user/history/index.css @@ -0,0 +1,154 @@ +page { + background-color: #f6f7fb; +} + +.container { + padding-bottom: 20rpx; +} + +/* 顶部统计 */ +.stats { + display: flex; + justify-content: space-around; + background-color: #fff; + padding: 30rpx 20rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); +} + +.stat-item { + text-align: center; + flex: 1; +} + +.stat-label { + font-size: 28rpx; + color: #8c8c8c; + margin-bottom: 10rpx; +} + +.stat-value { + font-size: 48rpx; + font-weight: bold; + color: #333; +} + +/* 分类标签 */ +.tabs { + display: flex; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); + overflow-x: auto; +} + +.tab { + width: 50%; + text-align: center; + padding: 15rpx 25rpx; + font-size: 28rpx; + color: #666; + margin-right: 20rpx; + white-space: nowrap; +} + +.tab.active { + color: #409eff; + border-bottom: 5rpx solid #409eff; +} + +/* 红包列表 */ +.content { + padding: 0 20rpx; +} + +.item { + padding: 20rpx; + height: 130rpx; + margin-bottom: 30rpx; + border-radius: 20rpx; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f2f2f2; + color: #999999; +} + +.item_left { + font-size: 40rpx; + font-weight: bold; + width: 170rpx; + height: 170rpx; + line-height: 170rpx; + padding-left: 30rpx; + border-radius: 20rpx 80rpx 80rpx 20rpx; + position: relative; + left: -22rpx; +} + +.item_center { + flex: 1; + margin: 0 20rpx; +} + +.title { + font-size: 32rpx; + font-weight: bold; + color: #333333; +} + +.time { + font-size: 24rpx; + margin: 10rpx 0; +} + +.desc { + font-size: 26rpx; +} + +.item_right { + margin-right: 20rpx; +} + +.status2 { + position: absolute; + top: 0; + right: 0; + width: 150rpx; + height: 120rpx; + overflow: hidden; + transform: rotate(0deg); +} + +.status2::after { + content: attr(data-status); + position: absolute; + top: 25rpx; + right: -50rpx; + width: 180rpx; + height: 40rpx; + line-height: 40rpx; + text-align: center; + color: #999999; + font-size: 24rpx; + font-weight: bold; + transform: rotate(45deg); + border-radius: 0 20rpx 0 0; + background: #cccccc; + box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1); +} + +.item { + position: relative; + overflow: visible; +} + +/* 滚动条样式 */ +.tabs::-webkit-scrollbar { + height: 0; +} + +.tabs::-webkit-scrollbar-thumb { + background-color: transparent; +} \ No newline at end of file diff --git a/packages/user/history/index.vue b/packages/user/history/index.vue new file mode 100644 index 00000000..c6c38b77 --- /dev/null +++ b/packages/user/history/index.vue @@ -0,0 +1,77 @@ + + + + + \ No newline at end of file diff --git a/packages/user/myRedPacket/index.css b/packages/user/myRedPacket/index.css new file mode 100644 index 00000000..43cf9956 --- /dev/null +++ b/packages/user/myRedPacket/index.css @@ -0,0 +1,152 @@ +page { + background-color: #f6f7fb; +} + +.container { + padding-bottom: 20rpx; +} + +/* 顶部统计 */ +.stats { + display: flex; + justify-content: space-around; + background-color: #fff; + padding: 30rpx 20rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); +} + +.stat-item { + text-align: center; + flex: 1; +} + +.stat-label { + font-size: 28rpx; + color: #8c8c8c; + margin-bottom: 10rpx; +} + +.stat-value { + font-size: 48rpx; + font-weight: bold; + color: #333; +} + +/* 分类标签 */ +.tabs { + display: flex; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); + overflow-x: auto; +} + +.tab { + flex-shrink: 0; + padding: 15rpx 25rpx; + font-size: 28rpx; + color: #666; + margin-right: 20rpx; + white-space: nowrap; +} + +.tab.active { + color: black; + font-weight: bold; +} + +/* 红包列表 */ +.content { + padding: 0 20rpx; +} + +.item { + padding: 20rpx; + height: 130rpx; + margin-bottom: 30rpx; + border-radius: 20rpx; + display: flex; + justify-content: space-between; + align-items: center; + border: 3rpx solid #ff775a; + background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%); + position: relative; + overflow: visible; +} + +.item_left { + width: 200rpx; + height: 170rpx; + background-color: #ffffff; + border-radius: 20rpx 80rpx 80rpx 20rpx; + border: 3rpx solid #ff775a; + position: relative; + left: -22rpx; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.price { + font-size: 40rpx; + font-weight: bold; + color: #ff7557; + margin-bottom: 5rpx; +} + +.manjian { + font-size: 20rpx; + color: #ff7557; + background-color: #fff0ed; + padding: 5rpx 10rpx; + border-radius: 10rpx; +} + +.item_center { + flex: 1; + margin: 0 20rpx; + color: #fff; +} + +.title { + font-size: 32rpx; + font-weight: bold; + margin-bottom: 10rpx; +} + +.time { + color: #ffffff9a; + font-size: 24rpx; + margin-bottom: 10rpx; +} + +.desc { + font-size: 26rpx; +} + +.item_right { + margin-right: 20rpx; +} + +.status { + width: 120rpx; + padding: 15rpx 10rpx; + text-align: center; + background-color: #fff; + border-radius: 50rpx; + color: #ff7557; + font-size: 24rpx; + font-weight: bold; +} + +/* 滚动条样式 */ +.tabs::-webkit-scrollbar { + height: 0; +} + +.tabs::-webkit-scrollbar-thumb { + background-color: transparent; +} \ No newline at end of file diff --git a/packages/user/myRedPacket/index.vue b/packages/user/myRedPacket/index.vue new file mode 100644 index 00000000..c1c077b9 --- /dev/null +++ b/packages/user/myRedPacket/index.vue @@ -0,0 +1,106 @@ + + + + + \ No newline at end of file diff --git a/packages/user/redPacket/index.css b/packages/user/redPacket/index.css new file mode 100644 index 00000000..f7b44be3 --- /dev/null +++ b/packages/user/redPacket/index.css @@ -0,0 +1,182 @@ +.container { + padding: 20rpx; +} + +.item { + padding: 20rpx; + height: 130rpx; + margin-bottom: 30rpx; + border-radius: 20rpx; + display: flex; + justify-content: space-between; + align-items: center; + border: 3rpx solid #ff775a; + background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%); +} + +.item_left { + font-size: 40rpx; + font-weight: bold; + width: 170rpx; + height: 170rpx; + line-height: 170rpx; + padding-left: 30rpx; + background-color: #ffffff; + border-radius: 20rpx 80rpx 80rpx 20rpx; + border: 3rpx solid #ff775a; + position: relative; + left: -22rpx; +} + +.item_center { + flex: 1; + margin: 0 20rpx; +} + +.title { + font-size: 32rpx; + color: white; + font-weight: bold; +} + +.time { + color: #ffffff9a; + font-size: 24rpx; + margin: 10rpx 0; +} + +.desc { + color: #fff; + font-size: 26rpx; +} + +.item_right { + margin-right: 20rpx; +} + +.status { + width: 120rpx; + padding: 10rpx; + text-align: center; + background-color: #fff; + border-radius: 50rpx; + color: #ff7557; + font-size: 24rpx; + font-weight: bold; +} + +.status2 { + position: absolute; + top: 0; + right: 0; + width: 150rpx; + height: 120rpx; + overflow: hidden; + transform: rotate(0deg); +} + +.status2::after { + content: attr(data-status); + position: absolute; + top: 10rpx; + right: -50rpx; + width: 180rpx; + height: 40rpx; + line-height: 40rpx; + text-align: center; + color: #921d0c; + font-size: 24rpx; + font-weight: bold; + transform: rotate(30deg); + border-radius: 0 20rpx 0 0; + background: linear-gradient(90deg, #f0dfa5 0%, #c6a437 100%); + box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1); +} + +.item { + position: relative; + overflow: visible; +} + +.bottom { + position: fixed; + bottom: 0rpx; + left: 0; + right: 0; + z-index: 1000; + color: #0079fe; + text-align: center; + font-size: 32rpx; + font-weight: bold; + background-color: #fff; + padding: 20rpx 0 40rpx 0; +} + + +/* 弹窗样式 */ +.popup-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; +} + +.popup-content { + width: 600rpx; + padding: 60rpx 40rpx; + background-color: white; + border-radius: 20rpx; + text-align: center; + box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); +} + +.popup-icon { + width: 160rpx; + height: 160rpx; + background-color: #e8fdf2; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto 40rpx; +} + +.checkmark { + width: 30rpx; + height: 70rpx; + border-right: 20rpx solid #52c41a; + border-bottom: 20rpx solid #52c41a; + transform: rotate(45deg); +} + +.popup-title { + font-size: 40rpx; + font-weight: bold; + color: #262626; + margin-bottom: 20rpx; +} + +.popup-desc { + font-size: 28rpx; + color: #8c8c8c; + margin-bottom: 50rpx; + line-height: 40rpx; +} + +.popup-btn { + width: 100%; + height: 90rpx; + background-color: #ff4d4f; + color: white; + border: none; + border-radius: 45rpx; + font-size: 32rpx; + font-weight: bold; + padding: 0; +} \ No newline at end of file diff --git a/packages/user/redPacket/index.vue b/packages/user/redPacket/index.vue new file mode 100644 index 00000000..5cd320ed --- /dev/null +++ b/packages/user/redPacket/index.vue @@ -0,0 +1,85 @@ + + + \ No newline at end of file diff --git a/pages.json b/pages.json index bdfcfa4e..d6701591 100644 --- a/pages.json +++ b/pages.json @@ -499,6 +499,27 @@ "navigationBarBackgroundColor": "#fff", "navigationStyle": "custom" } + }, + { + "path": "redPacket/index", + "style": { + "navigationBarTitleText": "红包中心", + "navigationBarBackgroundColor": "#fff" + } + }, + { + "path": "myRedPacket/index", + "style": { + "navigationBarTitleText": "我的权益", + "navigationBarBackgroundColor": "#fff" + } + }, + { + "path": "history/index", + "style": { + "navigationBarTitleText": "历史记录", + "navigationBarBackgroundColor": "#fff" + } } ] }, diff --git a/pages/user/index.vue b/pages/user/index.vue index 5c986257..032ec83e 100644 --- a/pages/user/index.vue +++ b/pages/user/index.vue @@ -40,9 +40,9 @@ {{ userInfo.property_housing_fund }}元 物业费 - + 0元 - 红包卡券 + 红包中心 @@ -274,6 +274,9 @@ export default { goWallet(type, item) { NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item)); }, + goRedPacket() { + NavgateTo('/packages/user/redPacket/index'); + }, // 头像点击 toLogin() { NavgateTo('/packages/user/replenishInfo/index');