|
|
@@ -11,11 +11,7 @@
|
|
|
{{ item.label }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="
|
|
|
- height: calc(100% - 52px);
|
|
|
- overflow-y: auto;"
|
|
|
- ref="pageWrapperDom"
|
|
|
- @scroll="pageScroll">
|
|
|
+ <div class="tab-content" ref="pageWrapperDom" @scroll="pageScroll">
|
|
|
<div class="list-wrapper" ref="pageGiveListDom">
|
|
|
<div class="give-list" v-if="currentTabIndex == 0">
|
|
|
<template v-if="giveList.length">
|
|
|
@@ -183,7 +179,6 @@
|
|
|
/>
|
|
|
</template>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
<modal
|
|
|
@@ -238,7 +233,6 @@ let giveReqParams = {
|
|
|
loadMore: false,
|
|
|
};
|
|
|
|
|
|
-
|
|
|
const clickTab = (params, index) => {
|
|
|
currentTabIndex.value = index;
|
|
|
};
|
|
|
@@ -291,10 +285,10 @@ const pageScroll = (e) => {
|
|
|
if (currentTabIndex.value != 0) {
|
|
|
return;
|
|
|
}
|
|
|
- console.log('scrollTop', scrollTop, wrapperHeight, pageGiveListHeight)
|
|
|
+ console.log("scrollTop", scrollTop, wrapperHeight, pageGiveListHeight);
|
|
|
if (
|
|
|
giveReqParams.loadMore === false &&
|
|
|
- wrapperHeight + scrollTop >= (pageGiveListHeight - 60)
|
|
|
+ wrapperHeight + scrollTop >= pageGiveListHeight - 60
|
|
|
) {
|
|
|
giveReqParams.loadMore = true;
|
|
|
giveReqParams.params.pageNum++;
|
|
|
@@ -400,184 +394,188 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .list-wrapper {
|
|
|
- min-height: 202px;
|
|
|
-
|
|
|
- .give-list {
|
|
|
+ .tab-content {
|
|
|
+ height: calc(100% - 52px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .list-wrapper {
|
|
|
min-height: 202px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .cell {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- min-height: 76px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 14px;
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
|
|
|
- .red-dots {
|
|
|
- position: absolute;
|
|
|
- right: 4px;
|
|
|
- top: 4px;
|
|
|
- }
|
|
|
+ .give-list {
|
|
|
+ min-height: 202px;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .img-wrapper {
|
|
|
- position: relative;
|
|
|
- margin-right: 16px;
|
|
|
+ .cell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 76px;
|
|
|
box-sizing: border-box;
|
|
|
+ padding-left: 14px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- .icon-avatar {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-give {
|
|
|
+ .red-dots {
|
|
|
position: absolute;
|
|
|
- right: -4px;
|
|
|
- bottom: 2px;
|
|
|
+ right: 4px;
|
|
|
+ top: 4px;
|
|
|
}
|
|
|
|
|
|
- .icon-big-give {
|
|
|
- margin-top: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .img-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .info-wrapper {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10px 14px 10px 0;
|
|
|
-
|
|
|
- .left {
|
|
|
- .nickname {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 13px;
|
|
|
- margin-bottom: 5px;
|
|
|
- max-width: 132px;
|
|
|
- word-break: break-all;
|
|
|
+ .icon-avatar {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
- .time {
|
|
|
- font-size: 12px;
|
|
|
- color: #b0b0b0;
|
|
|
+ .icon-give {
|
|
|
+ position: absolute;
|
|
|
+ right: -4px;
|
|
|
+ bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-big-give {
|
|
|
+ margin-top: 14px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .right {
|
|
|
+ .info-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 14px 10px 0;
|
|
|
|
|
|
- .msg {
|
|
|
- .bold {
|
|
|
+ .left {
|
|
|
+ .nickname {
|
|
|
font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .blance {
|
|
|
- margin-left: 3px;
|
|
|
- display: inline-block;
|
|
|
- max-width: 80px;
|
|
|
- word-break: break-all;
|
|
|
- line-height: 18px;
|
|
|
- color: #e29a2e;
|
|
|
- }
|
|
|
-
|
|
|
- .coin-type-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .coin-type {
|
|
|
- margin-left: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- margin-left: 4px;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
+ font-size: 13px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ max-width: 132px;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
- .align-content {
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-end;
|
|
|
-
|
|
|
- .blance {
|
|
|
- max-width: 130px;
|
|
|
- }
|
|
|
+ .time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b0b0b0;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #b6b6b6;
|
|
|
- margin-top: 5px;
|
|
|
- text-align: right;
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- .desc-bottom-bar {
|
|
|
+ .msg {
|
|
|
+ .bold {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: right;
|
|
|
display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
- justify-content: end;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .btn {
|
|
|
- min-width: 80px;
|
|
|
- height: 29px;
|
|
|
- padding: 0 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- border-radius: 100px;
|
|
|
- color: #5e5e5e;
|
|
|
- border: 1px solid #dfdfdf;
|
|
|
+
|
|
|
+ .blance {
|
|
|
+ margin-left: 3px;
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 80px;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #e29a2e;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coin-type-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
}
|
|
|
|
|
|
- .send-btn {
|
|
|
- border: 1px solid #1d9bf0;
|
|
|
- color: #1d9bf0;
|
|
|
+ .coin-type {
|
|
|
+ margin-left: 3px;
|
|
|
}
|
|
|
|
|
|
- .detail-btn,
|
|
|
- .send-btn {
|
|
|
- margin-left: 8px;
|
|
|
+ img {
|
|
|
+ margin-left: 4px;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .align-content {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .blance {
|
|
|
+ max-width: 130px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b6b6b6;
|
|
|
+ margin-top: 5px;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .desc-bottom-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ min-width: 80px;
|
|
|
+ height: 29px;
|
|
|
+ padding: 0 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 100px;
|
|
|
+ color: #5e5e5e;
|
|
|
+ border: 1px solid #dfdfdf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .send-btn {
|
|
|
+ border: 1px solid #1d9bf0;
|
|
|
+ color: #1d9bf0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-btn,
|
|
|
+ .send-btn {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .icon {
|
|
|
- width: 18px;
|
|
|
- height: 24px;
|
|
|
- margin-left: 4px;
|
|
|
- margin-right: -5px;
|
|
|
+ .icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 24px;
|
|
|
+ margin-left: 4px;
|
|
|
+ margin-right: -5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .info-center {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
- .info-center {
|
|
|
+ .cell-center {
|
|
|
align-items: center;
|
|
|
}
|
|
|
- }
|
|
|
- .cell-center {
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
|
|
|
- .icon-empty {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
+ .icon-empty {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
A\An