|
@@ -0,0 +1,534 @@
|
|
|
+<template>
|
|
|
+ <div class="com-wrapper" ref="listWrapper" @scroll="listScroll">
|
|
|
+ <template v-if="!dataList.length">
|
|
|
+ <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
|
|
|
+ </template>
|
|
|
+ <div class="list-wrapper" ref="listContent">
|
|
|
+ <div>
|
|
|
+ <div class="cell" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <red-dot class="red-dots" v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
|
|
|
+ <div class="img-wrapper">
|
|
|
+ <!-- 收入- 任务红包领取 -->
|
|
|
+ <template
|
|
|
+ v-if="item.bizType == 1 || item.bizType == 5 || item.bizType == 10 || item.bizType == 11 || item.bizType == 12">
|
|
|
+ <img class="icon-avatar" style="margin-right: 0"
|
|
|
+ :src="item.bizType != 12 && item.bizData ? item.bizData.avatarUrl : require('@/assets/svg/icon-treasure-return.svg')" />
|
|
|
+ <img class="icon-give" style="right: -4px"
|
|
|
+ :src="item.bizType == 10 || item.bizType == 11 || item.bizType == 12 ? require('@/assets/svg/icon-small-treasure.svg') : require('@/assets/svg/icon-get-giveaways-s.svg')" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 收入- 任务红包结余退款, -->
|
|
|
+ <template v-else-if="item.bizType == 2 || item.bizType == 6">
|
|
|
+ <img style="margin-left:-4px; width: 38px" :src="
|
|
|
+ require('@/assets/svg/icon-give-refund-list.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <!-- 收入 - 提现 -- 失败退款 -->
|
|
|
+ <template v-else-if="item.bizType == 3">
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-list-withdraw.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <!-- 收入-充值 -->
|
|
|
+ <template v-else-if="item.bizType == 4">
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-list-top-up.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <!-- 收入 - 盲盒 -->
|
|
|
+ <template v-else-if="item.bizType == 7">
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
|
|
|
+ v-if="item.bizData && item.bizData.imagePath" />
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px"
|
|
|
+ :src="require('@/assets/svg/icon-wallter-list-blind-box.svg')" v-else />
|
|
|
+ <img class="icon-give" :src="require('@/assets/svg/icon-list-withdraw-s.svg')" />
|
|
|
+ </template>
|
|
|
+ <!-- 收入 - 盲盒 -->
|
|
|
+ <template v-else-if="item.bizType == 8">
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
|
|
|
+ v-if="item.bizData && item.bizData.imagePath" />
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px"
|
|
|
+ :src="require('@/assets/svg/icon-wallter-list-blind-box.svg')" v-else />
|
|
|
+ <img class="icon-give" :src="require('@/assets/svg/icon-get-giveaways-s.svg')" />
|
|
|
+ </template>
|
|
|
+ <!-- 支出 - 提现 -->
|
|
|
+ <template v-else-if="item.bizType == -1">
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-list-withdraw.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <!-- 支出-任务红包余额支付 -->
|
|
|
+ <template v-else-if="item.bizType == -2">
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-big-give.svg')
|
|
|
+ " />
|
|
|
+ <img class="icon-give" :src="
|
|
|
+ require('@/assets/svg/icon-list-withdraw-s.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <!-- 支出-买盲盒 -->
|
|
|
+ <template v-else-if="item.bizType == -3">
|
|
|
+ <img style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-wallter-list-blind-box.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -4">
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-big-give.svg')
|
|
|
+ " />
|
|
|
+ <img class="icon-give" :src="
|
|
|
+ require('@/assets/svg/icon-list-withdraw-s.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ <!-- 交易链手续费 -->
|
|
|
+ <template v-else-if="item.bizType == -5">
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
|
|
|
+ v-if="item.bizData && item.bizData.imagePath" />
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px"
|
|
|
+ :src="require('@/assets/img/icon-box2.png')" v-else />
|
|
|
+ <img class="icon-give" :src="require('@/assets/svg/icon-transaction-s.svg')" />
|
|
|
+ </template>
|
|
|
+ <!-- 支出-夺宝 -->
|
|
|
+ <template v-else-if="item.bizType == -6">
|
|
|
+ <img class="icon-avatar" style="margin-left:-4px" :src="
|
|
|
+ require('@/assets/svg/icon-big-give.svg')
|
|
|
+ " />
|
|
|
+ <img class="icon-give" :src="
|
|
|
+ require('@/assets/svg/icon-list-withdraw-s.svg')
|
|
|
+ " />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <div class="left">
|
|
|
+ <div class="nickname">
|
|
|
+ <template v-if="item.bizType == 1">
|
|
|
+ Giveaways ({{ item.bizData.nickName }})
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 2">
|
|
|
+ Giveaways Refund
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 3">
|
|
|
+ Withdrawal Refund
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 4">
|
|
|
+ Deposit
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 5">
|
|
|
+ Winning the lottery
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 6">
|
|
|
+ Lottery Refund
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 7">
|
|
|
+ Sell NFT Mystery box*{{ (item.bizData && item.bizData.nftItemCount || '') }}
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 8">
|
|
|
+ NFT Refund
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 10 || item.bizType == 11">
|
|
|
+ Get Treasure Chest
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == 12">
|
|
|
+ Treasure Chest Refund
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -1">
|
|
|
+ Withdrawal
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -2">
|
|
|
+ Giveaways
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -3">
|
|
|
+ Buy NFT Mystery box*{{ (item.bizData && item.bizData.nftItemCount || '') }}
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -4">
|
|
|
+ Lottery Giveaway
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -5">
|
|
|
+ Transaction Royalties
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizType == -6">
|
|
|
+ Send Treasure Chest
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="time">{{ moment(item.createTimestamp).format('MM-DD HH:mm:ss') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="msg">
|
|
|
+ <template v-if="item.bizType == -1">
|
|
|
+ <!-- 提现支出-状态(0:已申请,1:支付中,2:提现成功,3:提现失败) -->
|
|
|
+ <template
|
|
|
+ v-if="item.bizData.withdrawStatus == 0 || item.bizData.withdrawStatus == 1">
|
|
|
+ <div>
|
|
|
+ <div class="balance"
|
|
|
+ :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
|
|
|
+ <span class="amount">
|
|
|
+ <a-tooltip :title="'-' + item.trxAmountValue">
|
|
|
+ -{{ getBit(item.trxAmountValue) || 0 }}
|
|
|
+ </a-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="trx-amount-currency-info">
|
|
|
+ <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol
|
|
|
+ }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ in progress
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizData.withdrawStatus == 2">
|
|
|
+ <div class="balance"
|
|
|
+ :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
|
|
|
+ <span class="amount">
|
|
|
+ <a-tooltip :title="'-' + item.trxAmountValue">
|
|
|
+ -{{ getBit(item.trxAmountValue) || 0 }}
|
|
|
+ </a-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="trx-amount-currency-info">
|
|
|
+ <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.bizData.withdrawStatus == 3">
|
|
|
+ <div>
|
|
|
+ <div class="balance"
|
|
|
+ :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
|
|
|
+ <span class="amount">
|
|
|
+ <a-tooltip :title="'-' + item.trxAmountValue">
|
|
|
+ -{{ getBit(item.trxAmountValue) || 0 }}
|
|
|
+ </a-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="trx-amount-currency-info">
|
|
|
+ <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol
|
|
|
+ }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ Withdrawal failed
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="balance"
|
|
|
+ :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
|
|
|
+ <span class="amount">
|
|
|
+ <a-tooltip :title="'-' + item.trxAmountValue">
|
|
|
+ -{{ getBit(item.trxAmountValue) || 0 }}
|
|
|
+ </a-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="trx-amount-currency-info">
|
|
|
+ <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <div class="balance"
|
|
|
+ :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
|
|
|
+
|
|
|
+ <!--支出—— -2:零钱余额支付 、-3: NFT盲盒余额支付 -->
|
|
|
+ <span class="amount"
|
|
|
+ v-if="item.bizType == -2 || item.bizType == -3 || item.bizType == -4 || item.bizType == -5 || item.bizType == -6">
|
|
|
+ <a-tooltip :title="'-' + item.trxAmountValue">
|
|
|
+ -{{ getBit(item.trxAmountValue) || 0 }}
|
|
|
+ </a-tooltip>
|
|
|
+ </span>
|
|
|
+ <!-- 收入—— bizType:1、2、3、4 -->
|
|
|
+ <span class="amount" v-else>
|
|
|
+ <a-tooltip :title="'+' + item.trxAmountValue">
|
|
|
+ +{{ getBit(item.trxAmountValue) || 0 }}
|
|
|
+ </a-tooltip>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="trx-amount-currency-info">
|
|
|
+ <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
|
|
|
+ <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+/* eslint-disable */
|
|
|
+import { onMounted, ref, defineProps, defineEmits } from "vue";
|
|
|
+import redDot from "@/components/red-dot.vue";
|
|
|
+import messageCenter from "@/uilts/messageCenter";
|
|
|
+import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
|
|
|
+import { transactionsList } from "@/http/account";
|
|
|
+import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
|
|
|
+import { getBit } from "@/uilts/help";
|
|
|
+
|
|
|
+let moment = require('moment');
|
|
|
+let dataList = ref([]);
|
|
|
+let listWrapper = ref(null);
|
|
|
+let listContent = ref(null);
|
|
|
+let listReqParams = {
|
|
|
+ params: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ loadMore: false,
|
|
|
+};
|
|
|
+
|
|
|
+let isReadMsg = ref(true);
|
|
|
+
|
|
|
+const getTransactionsList = () => {
|
|
|
+ transactionsList({
|
|
|
+ params: listReqParams.params,
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 0) {
|
|
|
+ let resData = res.data;
|
|
|
+ if (resData.length) {
|
|
|
+ for (let i = 0; i < resData.length; i++) {
|
|
|
+ resData[i]["bizData"] = JSON.parse(resData[i]["bizData"]);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (listReqParams.params.pageNum < 2) {
|
|
|
+ dataList.value = resData;
|
|
|
+ } else {
|
|
|
+ let data = dataList.value;
|
|
|
+ data = data.concat(resData);
|
|
|
+ dataList.value = data;
|
|
|
+ }
|
|
|
+ listReqParams.loadMore = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ messageCenter.send({
|
|
|
+ actionType: MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP,
|
|
|
+ data: {}
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ isReadMsg.value = false;
|
|
|
+ readAllMsgByType({
|
|
|
+ params: {
|
|
|
+ msgType: 2 // 1:任务红包 2:钱包明细
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ setMessageCount();
|
|
|
+ })
|
|
|
+ }, 2000)
|
|
|
+ getTransactionsList();
|
|
|
+});
|
|
|
+
|
|
|
+const setMessageCount = () => {
|
|
|
+ getAllMessageInfo({
|
|
|
+ params: {
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ let { unReadCountTotal = 0 } = res.data;
|
|
|
+ if (unReadCountTotal > 0) {
|
|
|
+ let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
|
|
|
+ messageCenter.send({
|
|
|
+ actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO,
|
|
|
+ data: { text }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ messageCenter.send({
|
|
|
+ actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE,
|
|
|
+ data: {}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const emits = defineEmits(["back"]);
|
|
|
+
|
|
|
+const back = () => {
|
|
|
+ emits("back", {});
|
|
|
+};
|
|
|
+
|
|
|
+const listScroll = (e) => {
|
|
|
+ let wrapperHeight = listWrapper.value.offsetHeight;
|
|
|
+ let listContentHeight = listContent.value.offsetHeight;
|
|
|
+ let scrollTop = e.target.scrollTop || 0;
|
|
|
+ if (
|
|
|
+ listReqParams.loadMore === false &&
|
|
|
+ wrapperHeight + scrollTop >= listContentHeight - 30
|
|
|
+ ) {
|
|
|
+ listReqParams.loadMore = true;
|
|
|
+ listReqParams.params.pageNum++;
|
|
|
+ getTransactionsList();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.com-wrapper {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .icon-empty {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 20%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .com-nav-bar {
|
|
|
+ padding: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100% - 51px);
|
|
|
+ // height: 100%;
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 66px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 20px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .red-dots {
|
|
|
+ position: absolute;
|
|
|
+ right: 4px;
|
|
|
+ top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 11px;
|
|
|
+
|
|
|
+ .icon-avatar {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-give {
|
|
|
+ position: absolute;
|
|
|
+ right: -2px;
|
|
|
+ top: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 12px 10px 0;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .nickname {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #B0B0B0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .msg {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ color: #E86F00;
|
|
|
+ max-width: 110px;
|
|
|
+ min-width: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ word-break: break-all;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 3px;
|
|
|
+ max-width: 130px;
|
|
|
+ line-height: 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance {
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .trx-amount-currency-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-direction {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ text-align: right;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #797979;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|