|
|
@@ -79,7 +79,7 @@
|
|
|
|
|
|
<div class="right"
|
|
|
:class="{'fill-right': showComType == 'preview' || toolBoxPageData.activePage == 'PREVIEW'}">
|
|
|
- <global-tip :type="'2'"></global-tip>
|
|
|
+ <!-- <global-tip :type="'2'"></global-tip> -->
|
|
|
|
|
|
|
|
|
<template v-if="publishType == 'TOOL_BOX'">
|
|
|
@@ -93,35 +93,59 @@
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div class="form-wrapper" v-if="showComType == 'default'">
|
|
|
- <div class="form-cell-item base-form-wrapper">
|
|
|
- <div class="title">
|
|
|
- <img class="icon" :src="require('@/assets/svg/icon-reward-v2.svg')"/>
|
|
|
- Reward
|
|
|
- </div>
|
|
|
- <div class="form-cell-content">
|
|
|
- <div class="select-mode-ele">
|
|
|
- <img v-for="(item, index) in publishModeList"
|
|
|
- :key="index"
|
|
|
- :src="selectModeInfo.index == index ? item.imgActive : item.imgInActive"
|
|
|
- @click="selectPublishMode(item, index)">
|
|
|
- </div>
|
|
|
- <!-- 金额、数量 -->
|
|
|
- <div class="form-base">
|
|
|
- <div class="item currency-select-wrapper">
|
|
|
- <div>
|
|
|
- <div class="label currency-select"
|
|
|
- :class="{'selected': currencySelectCpd}"
|
|
|
- @click="selectCurrencyPopHandle">
|
|
|
- <img class="icon"
|
|
|
- v-if="currentIconCpd"
|
|
|
- :src="currentIconCpd"/>
|
|
|
- <div class="text">
|
|
|
- {{currentPrizeCpd}}
|
|
|
+ <div class="form-left-sheet">
|
|
|
+ <div class="form-cell-item base-form-wrapper">
|
|
|
+ <div class="form-cell-content">
|
|
|
+ <div class="select-mode-ele">
|
|
|
+ <template v-for="(item, index) in publishModeList" :key="index">
|
|
|
+ <img class="img"
|
|
|
+ :src="selectModeInfo.index == index ? item.imgActive : item.imgInActive"
|
|
|
+ @click="selectPublishMode(item, index)">
|
|
|
+
|
|
|
+ <img class="img-tips" :src="item.imgInfoSrc" v-if="selectModeInfo.index == index" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 金额 -->
|
|
|
+ <div class="form-base">
|
|
|
+ <div class="form-cell">
|
|
|
+ <div class="cell-title">
|
|
|
+ <img class="title-icon" :src="require('@/assets/svg/icon-form-amount.svg')" />
|
|
|
+ Amount
|
|
|
+ </div>
|
|
|
+ <div class="cell-content flex">
|
|
|
+ <div class="currency-select"
|
|
|
+ :class="{'selected': currencySelectCpd}"
|
|
|
+ @click="selectCurrencyPopHandle">
|
|
|
+ <img class="icon"
|
|
|
+ v-if="currentIconCpd"
|
|
|
+ :src="currentIconCpd"/>
|
|
|
+ <div class="text">
|
|
|
+ {{currentPrizeCpd}}
|
|
|
+ </div>
|
|
|
+ <img class="arrow"
|
|
|
+ :src="currentArrowCpd"/>
|
|
|
</div>
|
|
|
- <img class="arrow"
|
|
|
- :src="currentArrowCpd"/>
|
|
|
+ <form-input
|
|
|
+ class="margin-left-10"
|
|
|
+ :suffix="baseFormData.rewardType === RewardType.custom || currentCurrencyInfo.currencyCode ? currentPrizeCpd : ''">
|
|
|
+ <template v-slot:content>
|
|
|
+ <input style="width: 100px"
|
|
|
+ v-model="baseFormData.amountValue"
|
|
|
+ placeholder="0"
|
|
|
+ autofocus
|
|
|
+ @input="onAmountInput"
|
|
|
+ @blur="onAmountBlur"/>
|
|
|
+ </template>
|
|
|
+ </form-input>
|
|
|
+ <form-input class="margin-left-10"
|
|
|
+ prefix="=$"
|
|
|
+ suffix="USD">
|
|
|
+ <template v-slot:content>
|
|
|
+ <input style="width: 60px"
|
|
|
+ placeholder="0"/>
|
|
|
+ </template>
|
|
|
+ </form-input>
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 刷新按钮、充值 -->
|
|
|
<div class="currency-operation"
|
|
|
v-if="currentCurrencyInfo.currencyCode">
|
|
|
@@ -138,144 +162,156 @@
|
|
|
class="top-up"
|
|
|
@click="goTopUp">Deposit</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <input v-model="baseFormData.amountValue"
|
|
|
- placeholder="0"
|
|
|
- autofocus
|
|
|
- @input="onAmountInput"
|
|
|
- @blur="onAmountBlur"/>
|
|
|
- </div>
|
|
|
- <div class="item winners-count-input">
|
|
|
- <div>
|
|
|
- <div class="label">
|
|
|
- <img class="icon"
|
|
|
- :src="require('@/assets/svg/icon-winner-v2.svg')"/>
|
|
|
- Winner Count
|
|
|
+ <div class="usd-min-message" v-show="isShowUsdMinMessage" v-html="checkUsdMinNumber('inTemplate')"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 人数 -->
|
|
|
+ <div class="form-cell" v-if="selectModeInfo.type != PlayType.treasure">
|
|
|
+ <div class="cell-title">
|
|
|
+ <img class="title-icon" :src="require('@/assets/svg/icon-form-winners.svg')" />
|
|
|
+ Winners
|
|
|
+ </div>
|
|
|
+ <div class="cell-content">
|
|
|
+ <form-input suffix="People">
|
|
|
+ <template v-slot:content>
|
|
|
+ <input style="width: 120px"
|
|
|
+ v-model="baseFormData.totalCount"
|
|
|
+ placeholder="0"
|
|
|
+ :disabled="baseFormData.rewardType === RewardType.custom"
|
|
|
+ @input="onCountInput"
|
|
|
+ @blur="onCountBlur"/>
|
|
|
+ </template>
|
|
|
+ </form-input>
|
|
|
+ <div class="count-msg" v-show="selectModeInfo.type == PlayType.common">Recommend Winners 50～500</div>
|
|
|
</div>
|
|
|
- <div class="msg" v-show="selectModeInfo.type == PlayType.common">Recommend Winners 50～500</div>
|
|
|
</div>
|
|
|
- <input v-model="baseFormData.totalCount"
|
|
|
- placeholder="0"
|
|
|
- :disabled="baseFormData.rewardType === RewardType.custom"
|
|
|
- @input="onCountInput"
|
|
|
- @blur="onCountBlur"/>
|
|
|
- </div>
|
|
|
- <div class="item automatically-input" v-if="selectModeInfo.type == PlayType.lottery">
|
|
|
- <div class="label">
|
|
|
- <img class="icon"
|
|
|
- :src="require('@/assets/svg/icon-automatically.svg')"/>
|
|
|
- Automatically Draw in
|
|
|
+
|
|
|
+ <!-- 新粉单价 -->
|
|
|
+ <div class="form-cell" v-if="selectModeInfo.type == PlayType.treasure">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="input-wrapper">
|
|
|
- <input v-model="baseFormData.validityDuration"
|
|
|
- placeholder="0"
|
|
|
- @input="onValidityDurationInput"
|
|
|
- @blur="onValidityDurationBlur"/>
|
|
|
- <span class="unit">h</span>
|
|
|
+
|
|
|
+ <!-- 开奖时间 -->
|
|
|
+ <div class="form-cell" v-if="selectModeInfo.type == PlayType.lottery">
|
|
|
+ <div class="cell-title">
|
|
|
+ <img class="title-icon" :src="require('@/assets/svg/icon-form-time.svg')" />
|
|
|
+ Automatically Draw in
|
|
|
+ </div>
|
|
|
+ <div class="cell-content">
|
|
|
+ <form-input suffix="Hour">
|
|
|
+ <template v-slot:content>
|
|
|
+ <input v-model="baseFormData.validityDuration"
|
|
|
+ placeholder="0"
|
|
|
+ @input="onValidityDurationInput"
|
|
|
+ @blur="onValidityDurationBlur"/>
|
|
|
+ </template>
|
|
|
+ </form-input>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="usd-min-message" v-show="isShowUsdMinMessage" v-html="checkUsdMinNumber('inTemplate')"></div>
|
|
|
- <div class="giveaway-poster" @click="customCoverImg">
|
|
|
- <div class="show-img">
|
|
|
- <div
|
|
|
- :style="{
|
|
|
- 'zoom': 55 / 500,
|
|
|
- 'position': 'absolute',
|
|
|
- 'width': '345px',
|
|
|
- }">
|
|
|
- <custom-card-cover
|
|
|
- :data="{
|
|
|
- totalCount: baseFormData.totalCount,
|
|
|
- amountValue: baseFormData.amountValue,
|
|
|
- tokenSymbol: currentCurrencyInfo.tokenSymbol,
|
|
|
- currencyIconUrl: currentCurrencyInfo.iconPath,
|
|
|
- type: baseFormData.type,
|
|
|
- validityDuration: baseFormData.validityDuration,
|
|
|
- customPosterUrl: customPosterData && customPosterData.after && customPosterData.after.imagePath || '',
|
|
|
- rewardType: baseFormData.rewardType,
|
|
|
- customizedReward: baseFormData.customizedReward
|
|
|
+ <!-- <div class="giveaway-poster" @click="customCoverImg">
|
|
|
+ <div class="show-img">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ 'zoom': 55 / 500,
|
|
|
+ 'position': 'absolute',
|
|
|
+ 'width': '345px',
|
|
|
}">
|
|
|
- </custom-card-cover>
|
|
|
+ <custom-card-cover
|
|
|
+ :data="{
|
|
|
+ totalCount: baseFormData.totalCount,
|
|
|
+ amountValue: baseFormData.amountValue,
|
|
|
+ tokenSymbol: currentCurrencyInfo.tokenSymbol,
|
|
|
+ currencyIconUrl: currentCurrencyInfo.iconPath,
|
|
|
+ type: baseFormData.type,
|
|
|
+ validityDuration: baseFormData.validityDuration,
|
|
|
+ customPosterUrl: customPosterData && customPosterData.after && customPosterData.after.imagePath || '',
|
|
|
+ rewardType: baseFormData.rewardType,
|
|
|
+ customizedReward: baseFormData.customizedReward
|
|
|
+ }">
|
|
|
+ </custom-card-cover>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="show-font">
|
|
|
- <span>Giveaway Poster</span>
|
|
|
- <img class="new" v-if="customShowNewImage" :src=" require('@/assets/svg/img-new.svg') " />
|
|
|
- </div>
|
|
|
- <div class="show-placeholder">Replace</div>
|
|
|
- <div class="arrow">
|
|
|
- <img :src=" require('@/assets/svg/icon-cell-arrow-right.svg') " />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 提示 -->
|
|
|
- <ul class="tips-wrapper">
|
|
|
- <li class="row" style="white-space:nowrap;">
|
|
|
- Rewards can only be claimed after the target user completes all tasks you set.
|
|
|
- </li>
|
|
|
- <li class="row">
|
|
|
- Each user can only receive a reward once per task.
|
|
|
- </li>
|
|
|
- <li class="row" v-show="selectModeInfo.type == PlayType.common">
|
|
|
- The reward will expire in 7 days once issued. Please promote it as much as possible within this period. After the experiment, the remaining rewards will be returned to your DeNet Wallet.
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-cell-item task-wrapper">
|
|
|
- <div class="title">
|
|
|
- <img class="icon" :src="require('@/assets/svg/icon-tasks-v2.svg')"/>
|
|
|
- Tasks
|
|
|
+ <div class="show-font">
|
|
|
+ <span>Giveaway Poster</span>
|
|
|
+ <img class="new" v-if="customShowNewImage" :src=" require('@/assets/svg/img-new.svg') " />
|
|
|
+ </div>
|
|
|
+ <div class="show-placeholder">Replace</div>
|
|
|
+ <div class="arrow">
|
|
|
+ <img :src=" require('@/assets/svg/icon-cell-arrow-right.svg') " />
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 提示 -->
|
|
|
+ <ul class="tips-wrapper">
|
|
|
+ <li class="row" style="white-space:nowrap;">
|
|
|
+ Rewards can only be claimed after the target user completes all tasks you set.
|
|
|
+ </li>
|
|
|
+ <li class="row">
|
|
|
+ Each user can only receive a reward once per task.
|
|
|
+ </li>
|
|
|
+ <li class="row" v-show="selectModeInfo.type == PlayType.common">
|
|
|
+ The reward will expire in 7 days once issued. Please promote it as much as possible within this period. After the experiment, the remaining rewards will be returned to your DeNet Wallet.
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="form-cell-content form-require">
|
|
|
- <!-- 转推、like、关注 -->
|
|
|
- <div v-for="(item, index) in formList"
|
|
|
- :key="index">
|
|
|
- <div v-if="item.show" class="form-item"
|
|
|
- :class="{ 'border-hide': formList.length - 1 == index }">
|
|
|
- <div class="item-left">
|
|
|
- <div class="label">
|
|
|
- <img class="icon" :src="item.icon"/>
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- <div class="control"
|
|
|
- v-if="item.nodeType == 'textarea'">
|
|
|
- <follow-input
|
|
|
- :isAddSelf="!isBack"
|
|
|
- :atUserList="atUserList"
|
|
|
- @addUser="addFollowUser"
|
|
|
- @setUser="setFollowUser"
|
|
|
- @delUser="delFollowUser"></follow-input>
|
|
|
- </div>
|
|
|
- <div class="control"
|
|
|
- v-if="item.nodeType == 'input'">
|
|
|
- <div v-if="showDiscordInvitePop"
|
|
|
- class="discord-invite-info"
|
|
|
- @click="showDiscordInvitePop = false">
|
|
|
- <img class="icon" :src="discordInviteInfo.icon || require('@/assets/svg/icon-discord-mini.svg')" />
|
|
|
- <span class="name">{{discordInviteInfo.name}}</span>
|
|
|
+
|
|
|
+ <div class="form-cell-item task-wrapper">
|
|
|
+ <div class="title">
|
|
|
+ <img class="icon" :src="require('@/assets/svg/icon-tasks-v2.svg')"/>
|
|
|
+ Tasks
|
|
|
+ </div>
|
|
|
+ <div class="form-cell-content form-require">
|
|
|
+ <!-- 转推、like、关注 -->
|
|
|
+ <div v-for="(item, index) in formList"
|
|
|
+ :key="index">
|
|
|
+ <div v-if="item.show" class="form-item"
|
|
|
+ :class="{ 'border-hide': formList.length - 1 == index }">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="label">
|
|
|
+ <img class="icon" :src="item.icon"/>
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ <div class="control"
|
|
|
+ v-if="item.nodeType == 'textarea'">
|
|
|
+ <follow-input
|
|
|
+ :isAddSelf="!isBack"
|
|
|
+ :atUserList="atUserList"
|
|
|
+ @addUser="addFollowUser"
|
|
|
+ @setUser="setFollowUser"
|
|
|
+ @delUser="delFollowUser"></follow-input>
|
|
|
+ </div>
|
|
|
+ <div class="control"
|
|
|
+ v-if="item.nodeType == 'input'">
|
|
|
+ <div v-if="showDiscordInvitePop"
|
|
|
+ class="discord-invite-info"
|
|
|
+ @click="showDiscordInvitePop = false">
|
|
|
+ <img class="icon" :src="discordInviteInfo.icon || require('@/assets/svg/icon-discord-mini.svg')" />
|
|
|
+ <span class="name">{{discordInviteInfo.name}}</span>
|
|
|
+ </div>
|
|
|
+ <input v-model="item.text"
|
|
|
+ placeholder="Enter discord invite link"
|
|
|
+ class="discord-address"
|
|
|
+ @input="onIptDiscordAddress($event, index)"
|
|
|
+ @blur="onBlurDiscordAddress($event, index)" />
|
|
|
</div>
|
|
|
- <input v-model="item.text"
|
|
|
- placeholder="Enter discord invite link"
|
|
|
- class="discord-address"
|
|
|
- @input="onIptDiscordAddress($event, index)"
|
|
|
- @blur="onBlurDiscordAddress($event, index)" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <a-switch
|
|
|
- v-if="item.type > 3"
|
|
|
- v-model:checked="item.checked"
|
|
|
- @change="formSwitchChange($event, item, index)"/>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <a-switch
|
|
|
+ v-if="item.type > 3"
|
|
|
+ v-model:checked="item.checked"
|
|
|
+ @change="formSwitchChange($event, item, index)"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-right-sheet">
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
<div class="submit-btn-wrapper">
|
|
|
<div class="submit-btn"
|
|
|
:class="{ 'disabled-submit': iptErrMsgTxt != ''}"
|
|
|
@@ -427,6 +463,7 @@ import toolBox from '@/view/iframe/publish/tool-box/index.vue'
|
|
|
import giveawayPoster from '@/view/iframe/publish/components/giveaway-poster.vue';
|
|
|
import giveDialogHead from "@/view/iframe/publish/components/give-dialog-head";
|
|
|
import previewSheet from "@/view/iframe/publish/components/preview-sheet.vue";
|
|
|
+import formInput from "@/view/iframe/publish/components/form-input.vue";
|
|
|
import GlobalTip from '@/view/components/global-tip.vue'
|
|
|
import customCardCover from '@/view/components/custom-card-cover.vue'
|
|
|
|
|
|
@@ -448,7 +485,7 @@ let timer = ref(null);
|
|
|
let publishRes = reactive({});
|
|
|
|
|
|
//弹窗是否展示
|
|
|
-let visible = ref(false);
|
|
|
+let visible = ref(true);
|
|
|
let publishType = ref('REDPACKET');
|
|
|
|
|
|
|
|
|
@@ -541,7 +578,7 @@ let postId = ref('');
|
|
|
|
|
|
let selectModeInfo = reactive({
|
|
|
index: 0,
|
|
|
- type: PlayType.lottery // 1: 红包 2: 抽奖
|
|
|
+ type: PlayType.treasure
|
|
|
})
|
|
|
|
|
|
// 余额是否同步中
|
|
|
@@ -647,13 +684,22 @@ let formList = reactive([
|
|
|
|
|
|
let publishModeList = reactive([
|
|
|
{
|
|
|
- imgActive: require("@/assets/svg/img-A1.svg"),
|
|
|
- imgInActive: require("@/assets/svg/img-A0.svg"),
|
|
|
+
|
|
|
+ imgActive: require("@/assets/svg/img-T1.svg"),
|
|
|
+ imgInActive: require("@/assets/svg/img-T0.svg"),
|
|
|
+ imgInfoSrc: require("@/assets/svg/img-P1.svg"),
|
|
|
+ type: PlayType.treasure
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgActive: require("@/assets/svg/img-LT1.svg"),
|
|
|
+ imgInActive: require("@/assets/svg/img-LT0.svg"),
|
|
|
+ imgInfoSrc: require("@/assets/svg/img-P2.svg"),
|
|
|
type: PlayType.lottery
|
|
|
},
|
|
|
{
|
|
|
- imgActive: require("@/assets/svg/img-B1.svg"),
|
|
|
- imgInActive: require("@/assets/svg/img-B0.svg"),
|
|
|
+ imgActive: require("@/assets/svg/img-A1.svg"),
|
|
|
+ imgInActive: require("@/assets/svg/img-A0.svg"),
|
|
|
+ imgInfoSrc: require("@/assets/svg/img-P3.svg"),
|
|
|
type: PlayType.common
|
|
|
}
|
|
|
])
|
|
|
@@ -1986,6 +2032,10 @@ onMounted(() => {
|
|
|
.font-color-1D9BF0 {
|
|
|
color: #1D9BF0;
|
|
|
}
|
|
|
+
|
|
|
+.margin-left-10 {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -2131,132 +2181,118 @@ onMounted(() => {
|
|
|
width: 480px;
|
|
|
}
|
|
|
|
|
|
- .form-cell-item {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .form-cell-content {
|
|
|
- margin-top: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.base-form-wrapper {
|
|
|
- width: 450px;
|
|
|
margin-right: 30px;
|
|
|
|
|
|
.form-cell-content {
|
|
|
.select-mode-ele {
|
|
|
display: flex;
|
|
|
cursor: pointer;
|
|
|
-
|
|
|
- img:first-child {
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
+ height: 120px;
|
|
|
|
|
|
img {
|
|
|
-webkit-user-drag: none;
|
|
|
- width: 220px;
|
|
|
- height: 90px;
|
|
|
}
|
|
|
- }
|
|
|
- .form-base {
|
|
|
- margin-top: 20px;
|
|
|
- border: 1px solid #D1D9DD;
|
|
|
- border-radius: 14px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 14px;
|
|
|
-
|
|
|
- .item {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 7px 0;
|
|
|
- min-height: 76px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- input {
|
|
|
- width: 178px;
|
|
|
- text-align: right;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 26px;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- input::placeholder {
|
|
|
- color: #c5c5c5;
|
|
|
- }
|
|
|
|
|
|
- input:disabled {
|
|
|
- color: #c5c5c5;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+ .img:last-child {
|
|
|
+ margin-right: 0px !important;
|
|
|
+ }
|
|
|
|
|
|
- input {
|
|
|
- padding-right: 16px;
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ width: 158px;
|
|
|
+ height: 80px;
|
|
|
+ margin-right: 13px;
|
|
|
+ }
|
|
|
|
|
|
- .label {
|
|
|
+ .img-tips {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-base {
|
|
|
+ .form-cell {
|
|
|
+ margin-top: 28px;
|
|
|
+ .cell-title {
|
|
|
+ color: #2F2F2F;
|
|
|
font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
+ font-size: 13px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .icon {
|
|
|
+ .title-icon {
|
|
|
width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 8px;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .cell-content {
|
|
|
+ input {
|
|
|
+ width: 178px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
|
|
|
- .currency-select-wrapper {
|
|
|
- overflow: hidden;
|
|
|
- .currency-select {
|
|
|
- cursor: pointer;
|
|
|
- background: #1D9BF0;
|
|
|
- padding: 6px 10px;
|
|
|
- border-radius: 12px;
|
|
|
- color: #fff;
|
|
|
- width: max-content;
|
|
|
- max-width: 234px;
|
|
|
+ input::placeholder {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- word-break: break-all;
|
|
|
+ input:disabled {
|
|
|
+ color: #999999;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
|
|
|
- .arrow {
|
|
|
- margin-left: 5px;
|
|
|
+ .count-msg {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #B3B3B3;
|
|
|
+ margin-top: 12px;
|
|
|
}
|
|
|
}
|
|
|
- .selected {
|
|
|
- background: #F4F4F4 !important;
|
|
|
- color: #000 !important;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .winners-count-input {
|
|
|
- border-top: 1px solid #D1D9DD;
|
|
|
- .msg {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #A39F9F;
|
|
|
- margin-top: 8px
|
|
|
+
|
|
|
+ .currency-select {
|
|
|
+ cursor: pointer;
|
|
|
+ background: #1D9BF0;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #fff;
|
|
|
+ width: max-content;
|
|
|
+ max-width: 234px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 38px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
+
|
|
|
+ .text {
|
|
|
+ word-break: break-all;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .selected {
|
|
|
+ background: #FFF !important;
|
|
|
+ color: #000 !important;
|
|
|
+ border: 1px solid #D9D9D9;
|
|
|
}
|
|
|
|
|
|
.automatically-input {
|
|
|
@@ -2284,6 +2320,11 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 8px;
|
|
|
+ background: #F8F8F8;
|
|
|
+ border-radius: 3px;
|
|
|
+ width: 100%;
|
|
|
+ height: 28px;
|
|
|
+ padding-left: 10px;
|
|
|
|
|
|
.balance,
|
|
|
.amount {
|
