| | |
| | | <div class="list"> |
| | | <div class="list-h"> |
| | | <div> |
| | | <span class="currency">{{ $t("买入") }}</span> |
| | | <span class="currency">{{ item.direction }}</span> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div class="state">{{ $t("成交") }}</div> |
| | |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("盈利率") }}</div> |
| | | <div |
| | | class="list-value" |
| | | :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }" |
| | | > |
| | | <div class="list-value" :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }"> |
| | | {{ calculateProfitRate(item) }} |
| | | </div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("盈利") }}</div> |
| | | <div |
| | | class="list-value" |
| | | :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }" |
| | | > |
| | | <div class="list-value" :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }"> |
| | | {{ item.profit }} |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | .asset-list { |
| | | width: 100%; |
| | | |
| | | @include themify() { |
| | | color: themed("text_color1"); |
| | | } |
| | | |
| | | .list { |
| | | background: #212121; |
| | | box-sizing: border-box; |
| | |
| | | border-radius: 2.3rem; |
| | | position: relative; |
| | | } |
| | | |
| | | .list-h { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 2rem; |
| | | color: #d1cdcd; |
| | | |
| | | .currency { |
| | | font-size: 2.2rem; |
| | | font-weight: 600; |
| | | color: #1cd36d; |
| | | } |
| | | |
| | | span { |
| | | font-size: 1.6rem; |
| | | font-weight: 600; |
| | | // color: #fff; |
| | | } |
| | | } |
| | | |
| | | .list-item { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-top: 2.3rem; |
| | | |
| | | .list-b { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | // margin-right: 1.4rem; |
| | | box-sizing: border-box; |
| | | color: #d1cdcd; |
| | | |
| | | .list-value { |
| | | width: 100%; |
| | | color: #fff; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .kline { |
| | | width: 100%; |
| | | height: 1px; |
| | |
| | | .text-red { |
| | | color: #ff0000 !important; |
| | | } |
| | | |
| | | .text-green { |
| | | color: #1cd36d !important; |
| | | } |
| | |
| | | <div class="perpetual-open"> |
| | | <div class="flex header-open"> |
| | | <div class="flex flex-1 pt-34"> |
| | | <div |
| | | class="w-180 h-60 lh-60 text-center rounded inputBackground textColor" |
| | | > |
| | | <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor"> |
| | | {{ $t("全仓") }} |
| | | </div> |
| | | <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> --> |
| | | <div |
| | | class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" |
| | | v-if="selectIndex / 1 === 1" |
| | | > |
| | | <div |
| | | @click="showOptions = !showOptions" |
| | | style="height: 100%; box-sizing: border-box" |
| | | class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center" |
| | | > |
| | | <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1"> |
| | | <div @click="showOptions = !showOptions" style="height: 100%; box-sizing: border-box" |
| | | class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center"> |
| | | {{ form.lever_rate }}x |
| | | <img |
| | | src="../../assets/image/public/grey-select.png" |
| | | alt="select-icon" |
| | | class="w-22 h-11" |
| | | /> |
| | | <div |
| | | v-if="showOptions" |
| | | class="options w-140 absolute top-97 left-0 z-10" |
| | | > |
| | | <div |
| | | class="w-full" |
| | | @click.stop="handleChoose(item)" |
| | | :class="{ |
| | | 'option-active': form.lever_rate === item.lever_rate, |
| | | }" |
| | | :value="item.lever_rate" |
| | | v-for="item in initData.lever" |
| | | :key="item.id" |
| | | > |
| | | <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" /> |
| | | <div v-if="showOptions" class="options w-140 absolute top-97 left-0 z-10"> |
| | | <div class="w-full" @click.stop="handleChoose(item)" :class="{ |
| | | 'option-active': form.lever_rate === item.lever_rate, |
| | | }" :value="item.lever_rate" v-for="item in initData.lever" :key="item.id"> |
| | | {{ item.lever_rate }}x |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <img |
| | | src="../../assets/image/public/k-line.png" |
| | | alt="line-img" |
| | | class="w-38 h-35" |
| | | @click="jump" |
| | | /> |
| | | <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" /> |
| | | </div> |
| | | </div> |
| | | <div class="pt-30 pb-20"> |
| | |
| | | <div class="w-440 flex flex-col"> |
| | | <template v-if="selectIndex == 1"> |
| | | <div class="flex items-center h-66 rounded-lg text-grey"> |
| | | <p |
| | | class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'long' ? 'long' : ''" |
| | | @click="changeTab('long')" |
| | | > |
| | | <p class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')"> |
| | | {{ $t("开多") }} |
| | | </p> |
| | | <p |
| | | class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'short' ? 'short' : ''" |
| | | @click="changeTab('short')" |
| | | > |
| | | <p class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')"> |
| | | {{ $t("开空") }} |
| | | </p> |
| | | </div> |
| | | <div class="mt-30 mb-30" style="position: relative"> |
| | | <div |
| | | class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor" |
| | | @click="selectBtn" |
| | | > |
| | | <img |
| | | src="../../assets/image/public/warn.png" |
| | | alt="warn-icon" |
| | | class="w-25 h-25 pl-20" |
| | | /> |
| | | <div class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor" |
| | | @click="selectBtn"> |
| | | <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" /> |
| | | <div class="text-center" style="width: 80%">{{ title }}</div> |
| | | <img |
| | | src="../../assets/image/public/grey-select.png" |
| | | alt="select-icon" |
| | | class="w-22 h-11 pr-20" |
| | | /> |
| | | <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" /> |
| | | </div> |
| | | <div class="option-box" v-show="isShow"> |
| | | <div |
| | | class="font-30" |
| | | v-for="item in selectData" |
| | | :key="item.type" |
| | | @click="selectItem(item)" |
| | | > |
| | | <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)"> |
| | | {{ item.title }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <contract-futrue |
| | | v-if="selectIndex == 2" |
| | | class="mb-20" |
| | | :initFutrue="initFutrue" |
| | | @paraId="onParaId" |
| | | /> |
| | | <div |
| | | class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor" |
| | | v-if="selectIndex == 1" |
| | | > |
| | | <input |
| | | placeholder="" |
| | | class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg" |
| | | :disabled="type / 1 === 1" |
| | | @focus="focus = true" |
| | | v-model="form.price" |
| | | /> |
| | | <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" /> |
| | | <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor" |
| | | v-if="selectIndex == 1"> |
| | | <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg" |
| | | :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" /> |
| | | <span class="ml-20">USDT</span> |
| | | </div> |
| | | <!-- <div |
| | |
| | | /> |
| | | <span class="font-22 font-400 textColor">{{ $t("止损") }}</span> |
| | | </div> --> |
| | | <div |
| | | class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg" |
| | | > |
| | | <div |
| | | v-if="selectIndex == 1" |
| | | class="w-80 flex items-center justify-center" |
| | | style="height: 100%" |
| | | @click="onReduce" |
| | | > |
| | | <img |
| | | src="../../assets/image/public/reduce.png" |
| | | alt="add" |
| | | class="w-30 h-6" |
| | | /> |
| | | <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg"> |
| | | <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%" |
| | | @click="onReduce"> |
| | | <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" /> |
| | | </div> |
| | | <input |
| | | :placeholder=" |
| | | selectIndex == 1 |
| | | ? $t('手数') |
| | | : $t('最少') + initFutrue && initFutrue.para |
| | | ? $t('最小金额') + initFutrue.para[paraIndex].buy_min |
| | | : '' |
| | | " |
| | | class="border-none inputBackground text-center textColor" |
| | | style="width: 156px" |
| | | v-model="form.amount" |
| | | type="number" |
| | | @input="onInput" |
| | | /> |
| | | <div |
| | | class="w-80 flex items-center justify-center" |
| | | style="height: 100%" |
| | | > |
| | | <input :placeholder="selectIndex == 1 |
| | | ? $t('手数') |
| | | : $t('最少') + initFutrue && initFutrue.para |
| | | ? $t('最小金额') + initFutrue.para[paraIndex].buy_min |
| | | : '' |
| | | " class="border-none inputBackground text-center textColor" style="width: 156px" v-model="form.amount" |
| | | type="number" @input="onInput" /> |
| | | <div class="w-80 flex items-center justify-center" style="height: 100%"> |
| | | <template v-if="selectIndex == 1"> |
| | | <img |
| | | @click="onAdd" |
| | | src="../../assets/image/public/add.png" |
| | | alt="reduce" |
| | | class="w-30 h-30" |
| | | /> |
| | | <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" /> |
| | | </template> |
| | | <template v-else> |
| | | <span class="textColor">USDT</span> |
| | |
| | | <template v-slot:step="{ active }"> |
| | | <div :class="['custom-step', { active }]"></div> |
| | | </template> |
| | | </vue-slider> |
| | | <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center"> |
| | | <span class="flex-1 text-left">0%</span> |
| | | <span class="flex-1 text-left">25%</span> |
| | | <span class="flex-1 text-center">50%</span> |
| | | <span class="flex-1 text-right">75%</span> |
| | | <span class="flex-1 text-right">100%</span> |
| | | </div> --> |
| | | </vue-slider> |
| | | <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center"> |
| | | <span class="flex-1 text-left">0%</span> |
| | | <span class="flex-1 text-left">25%</span> |
| | | <span class="flex-1 text-center">50%</span> |
| | | <span class="flex-1 text-right">75%</span> |
| | | <span class="flex-1 text-right">100%</span> |
| | | </div> --> |
| | | <!-- 张数 滑块 --> |
| | | <amount-slider |
| | | ref="sliderRef" |
| | | :maxAmount="maxItems" |
| | | @getAmount="getAmount" |
| | | ></amount-slider> |
| | | <amount-slider ref="sliderRef" :maxAmount="maxItems" @getAmount="getAmount"></amount-slider> |
| | | </template> |
| | | <template v-if="selectIndex == 1 && userInfo.token"> |
| | | <div class="flex justify-between mt-30"> |
| | |
| | | <div class="textColor">{{ fee.toFixed(4) }} USDT</div> |
| | | </div> |
| | | </template> |
| | | <div |
| | | class="flex font-24 text-grey justify-between mt-32" |
| | | v-if="selectIndex == 2" |
| | | > |
| | | <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2"> |
| | | <div>{{ $t("可用USDT") }}</div> |
| | | <div class="textColor">{{ initFutrue.amount | nan }} USDT</div> |
| | | </div> |
| | | <div |
| | | class="flex font-24 text-grey justify-between mt-20" |
| | | v-if="selectIndex == 2" |
| | | > |
| | | <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2"> |
| | | <div>{{ $t("手续费") }}</div> |
| | | <div class="textColor"> |
| | | {{ |
| | |
| | | </div> |
| | | <template v-if="userInfo.token"> |
| | | <template v-if="selectIndex == 1"> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" |
| | | v-if="currentType == 'long'" |
| | | @click="order('long')" |
| | | > |
| | | <div |
| | | class="font-34 relative text-center" |
| | | style="flex-grow: 1" |
| | | v-if="selectIndex == 1" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'" |
| | | @click="order('long')"> |
| | | <div class="font-34 relative text-center" style="flex-grow: 1" v-if="selectIndex == 1"> |
| | | {{ $t("开多") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看涨") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | <div |
| | | class="font-34 relative text-center" |
| | | style="flex-grow: 1" |
| | | v-else |
| | | > |
| | | <div class="font-34 relative text-center" style="flex-grow: 1" v-else> |
| | | {{ $t("做多买入") }} |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" |
| | | v-if="currentType == 'short'" |
| | | @click="order('short')" |
| | | > |
| | | <div |
| | | class="relative font-34 text-center" |
| | | style="flex-grow: 1" |
| | | v-if="selectIndex == 1" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" v-if="currentType == 'short'" |
| | | @click="order('short')"> |
| | | <div class="relative font-34 text-center" style="flex-grow: 1" v-if="selectIndex == 1"> |
| | | {{ $t("开空") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看跌") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | <div |
| | | class="relative font-34 text-center" |
| | | style="flex-grow: 1" |
| | | v-else |
| | | > |
| | | <div class="relative font-34 text-center" style="flex-grow: 1" v-else> |
| | | {{ $t("做空买入") }} |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template v-if="selectIndex == 2"> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30" |
| | | @click="order('open')" |
| | | v-if="userInfo.token" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30" @click="order('open')" |
| | | v-if="userInfo.token"> |
| | | <div class="font-34 relative text-center" style="flex-grow: 1"> |
| | | {{ $t("开多") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看涨") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" |
| | | style="position: relative" |
| | | :class="{ 'mt-22': selectIndex == 2 }" |
| | | @click="order('close')" |
| | | v-if="userInfo.token" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative" |
| | | :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token"> |
| | | <div class="relative font-34 text-center" style="flex-grow: 1"> |
| | | {{ $t("开空") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看跌") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <p>{{ $t("套期保值,风险对冲") }}</p> |
| | | <p class="pt-8">{{ $t("登陆后继续") }}</p> |
| | | </div> |
| | | <div |
| | | class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50" |
| | | @click="$router.push('/login')" |
| | | > |
| | | <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50" |
| | | @click="$router.push('/login')"> |
| | | {{ $t("登录后进行交易") }} |
| | | </div> |
| | | </div> |
| | |
| | | <div class="mt-5">({{ symbolname || "--" }})</div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 1" |
| | | class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in greenData" |
| | | :key="index" |
| | | @click="onQuickPrice(item.price)" |
| | | :style="{ |
| | | <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{ |
| | | background: |
| | | `linear-gradient(to right,${ |
| | | theme == 'dark' ? '#121212' : '#ffffff' |
| | | `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff' |
| | | } 0%` + |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | | 100 + |
| | | '%,rgba(94,186,137,.1) ' + |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | | 100 + |
| | | '%,rgba(94,186,137,.1) 100%)', |
| | | }" |
| | | > |
| | | }"> |
| | | <div class="text-green">{{ item.price }}</div> |
| | | <div class="text-right textColor" v-if="symbol == 'shib'"> |
| | | {{ fixDate(item.amount, $i18n) || "--" }} |
| | |
| | | {{ item.amount || "--" }} |
| | | </div> |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="w-290 text-red pt-12 font-34 font-700 text-center" |
| | | > |
| | | <div v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="w-290 text-red pt-12 font-34 font-700 text-center"> |
| | | {{ approximately || "--" }} |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="approximately-text pb-12 font-20 text-center" |
| | | > |
| | | <div v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="approximately-text pb-12 font-20 text-center"> |
| | | ≈ {{ price || "--" }} |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 2" |
| | | class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in redData" |
| | | :key="item + index" |
| | | @click="onQuickPrice(item.price)" |
| | | :style="{ |
| | | <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{ |
| | | background: |
| | | `linear-gradient(to right,${ |
| | | theme == 'dark' ? '#121212' : '#ffffff' |
| | | `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff' |
| | | } 0%` + |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | | 100 + |
| | | '%,rgba(246,70,93,.1) ' + |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | | 100 + |
| | | '%,rgba(246,70,93,.1) 100%)', |
| | | }" |
| | | > |
| | | }"> |
| | | <div class="text-red">{{ item.price }}</div> |
| | | <div class="text-right textColor" v-if="symbol == 'shib'"> |
| | | {{ fixDate(item.amount, $i18n) || "--" }} |
| | |
| | | </div> |
| | | <div class="flex k-select-box"> |
| | | <div class="mt-30 mb-30 select-box" style="position: relative"> |
| | | <div |
| | | class="flex justify-between items-center w-full h-70" |
| | | @click="selectArryBtn" |
| | | > |
| | | <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn"> |
| | | <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> --> |
| | | <div class="pl-16 textColor" style="width: 80%"> |
| | | {{ dataArrTitle }} |
| | | </div> |
| | | <img |
| | | src="@/assets/image/public/grey-select.png" |
| | | alt="select-icon" |
| | | class="w-22 h-11 pr-20" |
| | | /> |
| | | <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" /> |
| | | </div> |
| | | <div class="option-box" v-show="arryIsShow"> |
| | | <div |
| | | class="font-30" |
| | | v-for="(item, index) in selectDataArry" |
| | | :key="index" |
| | | @click="selectItemArry(item)" |
| | | > |
| | | <div class="font-30" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)"> |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div @click="isSelectShow = true"> |
| | | <img |
| | | src="@/assets/image/selectIcon.png" |
| | | alt="warn-icon" |
| | | class="w-36 h-30" |
| | | /> |
| | | <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <van-popup v-model="show" class="rounded-2xl"> |
| | | <popup-delivery |
| | | showBtns |
| | | :detailData="detailData" |
| | | :key="detailData.order_no" |
| | | @close="onClose" |
| | | @continueToBuy="continueTobuy" |
| | | @timeEnd="handleTimeEnd" |
| | | :price="price" |
| | | :symbol="symbol" |
| | | /> |
| | | <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose" |
| | | @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" :symbol="symbol" /> |
| | | </van-popup> |
| | | <van-action-sheet |
| | | v-model="isSelectShow" |
| | | @select="onSelect" |
| | | :actions="actions" |
| | | :cancel-text="$t('取消')" |
| | | close-on-click-action |
| | | @cancel="onCancel" |
| | | > |
| | | <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')" |
| | | close-on-click-action @cancel="onCancel"> |
| | | </van-action-sheet> |
| | | </div> |
| | | </template> |
| | |
| | | this.$store.commit("user/SET_USERINFO", { |
| | | balance: data.money, |
| | | }); |
| | | location.reload(); |
| | | this.initFutrue.amount = data.money; |
| | | // location.reload(); |
| | | }); |
| | | this.$emit("ordered", emitFunc); |
| | | if (this.selectIndex / 1 === 2) { |
| | |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .tab > * { |
| | | .tab>* { |
| | | height: 100%; |
| | | } |
| | | |
| | | .tab > img { |
| | | .tab>img { |
| | | margin-left: -2px; |
| | | margin-right: -2px; |
| | | } |
| | | |
| | | .tab > a { |
| | | .tab>a { |
| | | flex-grow: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | } |
| | | } |
| | | |
| | | .option-box > div { |
| | | .option-box>div { |
| | | padding: 30px 0; |
| | | } |
| | | |
| | | .option-box > div:hover { |
| | | .option-box>div:hover { |
| | | // background-color: #f5f5f5; |
| | | } |
| | | |
| | |
| | | -webkit-appearance: none; |
| | | /* Safari and Chrome */ |
| | | padding: 0 20px 0 20px; |
| | | background: url("../../assets/image/public/grey-select.png") no-repeat scroll |
| | | right center transparent; |
| | | background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent; |
| | | /* 自己的图*/ |
| | | background-size: 20px 11px; |
| | | } |
| | |
| | | } |
| | | |
| | | .perpetual-open { |
| | | |
| | | ::v-deep .van-action-sheet__item, |
| | | ::v-deep .van-action-sheet__cancel { |
| | | @include themify() { |
| | |
| | | "市价单": "Marché", |
| | | "请输入价格": "Veuillez entrer le prix", |
| | | "数量(USDT)": "Montant", |
| | | "开多": "Ouvert Longue", |
| | | "开多": "Long", |
| | | "看涨": "Acheter", |
| | | "合约金额": "Futures Montant", |
| | | "保证金": "Marge", |
| | | "开空": "Ouvert Court", |
| | | "开空": "Short", |
| | | "看跌": "Vendez", |
| | | "当前委托": "Commande ouverte", |
| | | "持有仓位": "Position de maintien", |
| | |
| | | "市价单": "Pesanan pasar", |
| | | "请输入价格": "Silakan masukkan kenaikan harganya", |
| | | "数量(USDT)": "Jumlah (USDT)", |
| | | "开多": "Buka", |
| | | "开多": "Long", |
| | | "看涨": "Lihat kenaikan", |
| | | "合约金额": "Jumlah kontrak", |
| | | "保证金": "Dana marjin ", |
| | | "开空": "Terbuka", |
| | | "开空": "Short", |
| | | "看跌": "Bearish", |
| | | "当前委托": "Komisi saat ini", |
| | | "持有仓位": "Memegang posisi", |
| | |
| | | "市价单": "Mercato", |
| | | "请输入价格": "Inserisci Prezzo", |
| | | "数量(USDT)": "Importo", |
| | | "开多": "Apri lungo", |
| | | "开多": "Long", |
| | | "看涨": "Compra", |
| | | "合约金额": "Importo futures", |
| | | "保证金": "Margine", |
| | | "开空": "Apri corto", |
| | | "开空": "Short", |
| | | "看跌": "Vendi", |
| | | "当前委托": "Ordine aperto", |
| | | "持有仓位": "Posizione di mantenimento", |
| | |
| | | "市价单": "マーケットオーダー", |
| | | "请输入价格": "価格を入力してください", |
| | | "数量(USDT)": "数量(USDT)", |
| | | "开多": "買いロング", |
| | | "开多": "Long", |
| | | "看涨": "強気な", |
| | | "合约金额": "契約金額", |
| | | "保证金": "マージン", |
| | | "开空": "買いショート", |
| | | "开空": "Short", |
| | | "看跌": "弱気な", |
| | | "当前委托": "オープンオーダー", |
| | | "持有仓位": "ホールドポジション", |
| | |
| | | '市价单': '시가 리스트 ', |
| | | '请输入价格': '가격을 입력하세요 ', |
| | | '数量(USDT)': '수량(USDT). ', |
| | | '开多': '카이도예요 ', |
| | | '开多': 'Long', |
| | | '看涨': '오름세예요 ', |
| | | '合约金额': '계약 금액 ', |
| | | '保证金': '보증금 ', |
| | | '开空': '오픈 쇼트', |
| | | '开空': 'Short', |
| | | '看跌': '떨어지는 거 봐요 ', |
| | | '当前委托': '현재 의뢰 ', |
| | | '持有仓位': '창고를 보유하고 있습니다 ', |
| | |
| | | export default { |
| | | "ICO": "Ico", |
| | | "ICO记录": "Registros ICO", |
| | | "申请时间": "Tiempo de solicitud", |
| | | "认缴": "Suscripción", |
| | | "已认购": "Suscrito", |
| | | "已中签": "Ha ganado", |
| | | "已认缴": "Suscrito", |
| | | "未中签": "No ganó el Premio", |
| | | "单价:": "Precio unitario:", |
| | | "认购": "Suscripción", |
| | | "新币预览": "Vista previa de la nueva moneda", |
| | | "配售": "Colocación", |
| | | "中签结果": "Resultado ganador", |
| | | "认购成功": "Suscripción exitosa", |
| | | "认缴成功": "Suscripción exitosa", |
| | | "配售成功": "Colocación exitosa", |
| | | "认购时间": "Tiempo de suscripción", |
| | | "配售时间": "Tiempo de colocación", |
| | | "中签": "Ganador", |
| | | "上市时间": "Tiempo de cotización", |
| | | "开始时间": "Hora de inicio", |
| | | "结束时间": "Fin del tiempo", |
| | | "钱包余额": "Saldo de la cartera", |
| | | "总价": "Precio total", |
| | | '请输入止盈金额': 'Tomar cantidad de ganancias', |
| | | '请输入止损金额': 'Monto de parada de pérdidas', |
| | | "当前有待处理提现订单,请稍后提现!":"Actualmente hay una orden de retiro pendiente, ¡retire más tarde!", |
| | | '未绑定谷歌验证器,暂时无法提现,点击前往绑定':'Autenticador de Google no vinculado, temporalmente incapaz de retirar efectivo, haga clic para vincular', |
| | | '请输入谷歌验证码':'Por favor ingrese el código de verificación de Google', |
| | | '需要绑定谷歌验证器才可以提现':'Debe vincular Google Authenticator para retirar efectivo', |
| | | "ICO": "Ico", |
| | | "ICO记录": "Registros ICO", |
| | | "申请时间": "Tiempo de solicitud", |
| | | "认缴": "Suscripción", |
| | | "已认购": "Suscrito", |
| | | "已中签": "Ha ganado", |
| | | "已认缴": "Suscrito", |
| | | "未中签": "No ganó el Premio", |
| | | "单价:": "Precio unitario:", |
| | | "认购": "Suscripción", |
| | | "新币预览": "Vista previa de la nueva moneda", |
| | | "配售": "Colocación", |
| | | "中签结果": "Resultado ganador", |
| | | "认购成功": "Suscripción exitosa", |
| | | "认缴成功": "Suscripción exitosa", |
| | | "配售成功": "Colocación exitosa", |
| | | "认购时间": "Tiempo de suscripción", |
| | | "配售时间": "Tiempo de colocación", |
| | | "中签": "Ganador", |
| | | "上市时间": "Tiempo de cotización", |
| | | "开始时间": "Hora de inicio", |
| | | "结束时间": "Fin del tiempo", |
| | | "钱包余额": "Saldo de la cartera", |
| | | "总价": "Precio total", |
| | | '请输入止盈金额': 'Tomar cantidad de ganancias', |
| | | '请输入止损金额': 'Monto de parada de pérdidas', |
| | | "当前有待处理提现订单,请稍后提现!": "Actualmente hay una orden de retiro pendiente, ¡retire más tarde!", |
| | | '未绑定谷歌验证器,暂时无法提现,点击前往绑定': 'Autenticador de Google no vinculado, temporalmente incapaz de retirar efectivo, haga clic para vincular', |
| | | '请输入谷歌验证码': 'Por favor ingrese el código de verificación de Google', |
| | | '需要绑定谷歌验证器才可以提现': 'Debe vincular Google Authenticator para retirar efectivo', |
| | | '请输入试用码': 'Por favor, introduzca el código de prueba', |
| | | '试用账号申请': 'Solicitud de cuenta de prueba', |
| | | '试用码': `Código de prueba`, |
| | |
| | | '请先安装钱包插件': 'Instale primero el complemento de la billetera', |
| | | "链接钱包": "Billetera de enlace", |
| | | "您已拒绝": 'has declinado', |
| | | '授权中':'Autorizando', |
| | | '已开通账户':'Se ha abierto la cuenta', |
| | | '授权中': 'Autorizando', |
| | | '已开通账户': 'Se ha abierto la cuenta', |
| | | "请先连接钱包": "Primero conecte la billetera", |
| | | '主题模式': 'Modo de tema', |
| | | '白天模式': 'Modo día', |
| | |
| | | "看涨": "Ascendido", |
| | | "合约金额": "Importe del contrato", |
| | | "保证金": "Margen ", |
| | | "开空": "Abierto Corto", |
| | | "开空": "Short", |
| | | "看跌": "Esperar que bajen los precios", |
| | | "当前委托": "Comisiones actuales", |
| | | "持有仓位": "Puestos ocupados", |
| | |
| | | "市价单": "คำสั่งของตลาด", |
| | | "请输入价格": "กรุณาใส่ราคา", |
| | | "数量(USDT)": "ปริมาณ (USDT)", |
| | | "开多": "เปิดยาว", |
| | | "开多": "Long", |
| | | "看涨": "รั้น", |
| | | "合约金额": "จำนวนสัญญา", |
| | | "保证金": "เงินประกัน", |
| | | "开空": "เปิดสั้น", |
| | | "开空": "Short", |
| | | "看跌": "งุ่มง่าม", |
| | | "当前委托": "ค่าคอมมิชชั่นปัจจุบัน", |
| | | "持有仓位": "การดำรงตำแหน่ง", |
| | |
| | | "市价单": "طلب السوق", |
| | | "请输入价格": "الرجاء إدخال السعر", |
| | | "数量(USDT)": "الكمية (USDT) ", |
| | | "开多": "فتح بكثير", |
| | | "开多": "Long", |
| | | "看涨": "اتجاه صاعد", |
| | | "合约金额": "قيمة العقد", |
| | | "保证金": "هامِش", |
| | | "开空": "فتح قصير", |
| | | "开空": "Short", |
| | | "看跌": "اتجاه التنازلي", |
| | | "当前委托": "العمولة الحالية", |
| | | "持有仓位": "شغل المناصب", |
| | |
| | | "次": "mal", |
| | | "30日成单率": "30 Tage Bestellsatz", |
| | | "30天平均放行时间": "Durchschnittliche Freigabezeit von 30 Tagen", |
| | | "分钟": "Minute", |
| | | "分钟": "Min.", |
| | | "30日平均付款": "Durchschnittliche Zahlungen am 30 Tage", |
| | | "好评率": "Rate für die lobsbewertung", |
| | | "好评数": "Anzahl der positiven Bewertungen", |
| | |
| | | "交易总额": "Transaktionen insgesamt", |
| | | "付款方式": "Zahlungsarten", |
| | | "付款限时": "Zahlungsfristen", |
| | | "45 分钟": "45 Minute", |
| | | "45 分钟": "45 Min.", |
| | | "用户需要": "Benutzer benötigen", |
| | | "认证 KYC 才可以交易": "Nur zertifizierte KYC kann in Handel genutzt werden", |
| | | "編輯詳情": "Details der Bearbeiten", |
| | |
| | | "单笔订单限额": "Einzelauftragslimit", |
| | | "最多选择3个": "Wählen Sie maximal bis zu 3 Stücke", |
| | | "支持時效": "Unterstützung der Verjährung", |
| | | "45分鐘": "45 Minute", |
| | | "15 分鐘": "15 Minute", |
| | | "30 分鐘": "30 Minute", |
| | | "1 小時": "1 Stunde", |
| | | "2 小時": "2 Stunde", |
| | | "45分鐘": "45 Min.", |
| | | "15 分鐘": "15 Min.", |
| | | "30 分鐘": "30 Min.", |
| | | "1 小時": "1 Std.", |
| | | "2 小時": "2 Std.", |
| | | "選擇付款方式以及對方支付的時間限制": "Wahl der Zahlungsart und Frist für die Zahlung durch die Gegenpartei", |
| | | "上一步": "Vorherige Schritte", |
| | | " 交易条款(选填)": "Handelsbedingungen (optional) ", |
| | |
| | | "请先阅读以下内容:": "Bitte lesen Sie runterstehte Information: ", |
| | | "银行卡转账切勿备注,不然不给予放币和直接封其账号。付款后 需要提供打款后新的交易明细图(如果P图或者隐藏交易明细上报平台冻结账户)": "Sie sollen keine Notizen für Bankkartentransfers machen, sonst Freigabe von Münzen wird abgelehnt und Ihr Konto wird direkt abgesperrt. Sie müssen ein neues Transaktionsdetaildiagramm nach der Zahlung belegen (wenn das hochgeladene Transaktionsdetail gefalschte oder versteckte ist, wird plattform das Konto einfriert) ", |
| | | "请输入金额": "Bitte geben Sie den Betrag ein", |
| | | "15分钟": "15 Minute", |
| | | "15分钟": "15 Min.", |
| | | "您可交易的法币": "Ihre handelbare fiat Währung", |
| | | "全部法币": "Alle fiat Währungen", |
| | | "历史搜索": "Historische Suche", |
| | |
| | | "亲,订单有点多,马上就付款,稍等一下,谢谢。": "Sehr geehrte Damen und Herren, es gibt zu viele Bestellungen zuzeit, Zahlung wird sofort durchgeführt, warte einen Moment, danke.", |
| | | "等待买家付款": "Warten auf die Zahlung des Käufers", |
| | | "预计将在": "Es wird erwartet, dass", |
| | | "6 分钟": "6 Minute", |
| | | "6 分钟": "6 Min.", |
| | | "内收到买家付款": "Bezahlung des Käufers erhalten", |
| | | "鸿运当头": "Lucky Strike", |
| | | "买家实名 :": "Richtiger Name des Käufers: ", |
| | |
| | | "请选择国家": "Bitte wählen Sie ein Land", |
| | | "可用数量": "Verfügbare Mengen", |
| | | |
| | | "分": "Minute", |
| | | "小时": "Stunde", |
| | | "周": "Woche", |
| | | "月": "Monat", |
| | | "分": "Min.", |
| | | "小时": "Std.", |
| | | "周": "Wo.", |
| | | "月": "Mon.", |
| | | "24h成交额(USDT)": "24-Stunden-Umsatz (USDT) ", |
| | | "卖空": "Leerverkäufe", |
| | | "当前持仓": "Laufende Positionen", |
| | |
| | | "看涨": "bullisch", |
| | | "合约金额": "Betrag des Auftrags", |
| | | "保证金": "Kaution", |
| | | "开空": "Verkaufen", |
| | | "开空": "Short", |
| | | "看跌": "Short", |
| | | "当前委托": "aktuelles Mandat", |
| | | "持有仓位": "Position gehalten", |
| | |
| | | "24h成交量": "24 Stunden Handelsvolumen", |
| | | "24h成交额": "Transaktionsvolumen in 24 Stunden", |
| | | "分时": "Zeitanteil", |
| | | "5分": "5 Minute", |
| | | "30分": "30 Minute", |
| | | "5分": "5 Min.", |
| | | "30分": "30 Min.", |
| | | "1时": "1 Uhr", |
| | | "4时": "4 Uhr", |
| | | "1日": "1Tag", |
| | | "1周": "1Woche", |
| | | "1周": "1Wo.", |
| | | "1月": "Januar", |
| | | "委托订单": "beauftragte Aufträge", |
| | | "最新交易": "Letzte Angebote", |
| | |
| | | "看涨": "Alcista", |
| | | "合约金额": "Monto del contrato", |
| | | "保证金": "depósito", |
| | | "开空": "Abrir vacío", |
| | | "开空": "Short", |
| | | "看跌": "Bajista", |
| | | "当前委托": "Delegación actual", |
| | | "持有仓位": "Mantener una posición", |
| | |
| | | "市价单": "Thị trường", |
| | | "请输入价格": "Vui lòng nhập Giá", |
| | | "数量(USDT)": "Số lượng", |
| | | "开多": "Mua với ký vọng giá sẽ tang lên", |
| | | "开多": "Long", |
| | | "看涨": "Mua", |
| | | "合约金额": "Số tiền tương lai", |
| | | "保证金": "Ký quỹ", |
| | | "开空": "Mua với kỳ vọng giá sẽ giảm xuống", |
| | | "开空": "Short", |
| | | "看跌": "Bán", |
| | | "当前委托": "Mở lệnh giao dịch", |
| | | "持有仓位": "Giữ vị thế", |
| | |
| | | <template> |
| | | <div class="register"> |
| | | <div class="top" @click="$router.go(-1)"> |
| | | <img |
| | | :src="require(`../../assets/theme/${theme}/image/Union.png`)" |
| | | alt="" |
| | | /> |
| | | <img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="" /> |
| | | </div> |
| | | <!-- <Step :step="1"></Step> --> |
| | | <div class="title textColor">{{ $t("注册") }}</div> |
| | |
| | | </div> --> |
| | | <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div> --> |
| | | </div> |
| | | <ExInput |
| | | :label="getRegType(activeIndex, true)" |
| | | :placeholderText="getRegType(activeIndex, false)" |
| | | v-model.trim="username" |
| | | :area="isArea" |
| | | :dialCode="dialCode" |
| | | @selectArea="onSelectArea" |
| | | :icon="icon" |
| | | /> |
| | | |
| | | <ExInput |
| | | :label="$t('设置密码')" |
| | | :placeholderText="$t('密码(6-12个字符)')" |
| | | v-model="password" |
| | | typeText="password" |
| | | /> |
| | | <ExInput |
| | | :label="$t('确认密码')" |
| | | :placeholderText="$t('请确认密码')" |
| | | v-model="repassword" |
| | | typeText="password" |
| | | /> |
| | | <ExInput |
| | | :label="$t('资金密码')" |
| | | :placeholderText="$t('资金密码(6位数字)')" |
| | | v-model="safeword" |
| | | typeText="password" |
| | | /> |
| | | <ExInput |
| | | :label="$t('确认资金密码')" |
| | | :placeholderText="$t('确认资金密码')" |
| | | v-model="resafeword" |
| | | typeText="password" |
| | | /> |
| | | <ExInput |
| | | :label="$t('邀请码(选填)')" |
| | | :placeholderText="$t('请输入邀请码')" |
| | | v-model="invitCode" |
| | | :clearBtn="false" |
| | | /> |
| | | <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" |
| | | v-model.trim="username" :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" /> |
| | | <ExInput :label="$t('手机号')" :placeholderText="$t('请输入手机号')" v-model="phone" type="text" /> |
| | | <ExInput :label="$t('设置密码')" :placeholderText="$t('密码(6-12个字符)')" v-model="password" typeText="password" /> |
| | | <ExInput :label="$t('确认密码')" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password" /> |
| | | <ExInput :label="$t('资金密码')" :placeholderText="$t('资金密码(6位数字)')" v-model="safeword" typeText="password" /> |
| | | <ExInput :label="$t('确认资金密码')" :placeholderText="$t('确认资金密码')" v-model="resafeword" typeText="password" /> |
| | | <ExInput :label="$t('邀请码(选填)')" :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false" /> |
| | | <!-- <div class="title textColor">{{ $t("邮箱验证") }}</div> --> |
| | | <p style="color: #999">{{ $t("verifyEmailTips", { account: account }) }}</p> |
| | | <div class="iptbox inputBackground"> |
| | | <input |
| | | class="inputBackground textColor" |
| | | type="text" |
| | | :placeholder="$t('请输入验证码')" |
| | | v-model="verifyCode" |
| | | /> |
| | | <span @click="senCode" |
| | | >{{ $t("发送验证码") }} |
| | | <template v-if="time"> ({{ time }})s</template></span |
| | | > |
| | | <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode" /> |
| | | <span @click="senCode">{{ $t("发送验证码") }} |
| | | <template v-if="time"> ({{ time }})s</template></span> |
| | | </div> |
| | | <div class="protocol textColor"> |
| | | <i @click="agreeProt"> |
| | |
| | | <img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" /> |
| | | </i> |
| | | {{ $t("我已阅读并同意") |
| | | }}<span |
| | | class="colorMain" |
| | | @click="$router.push('/TermsOfService?serviceTerm=1')" |
| | | >{{ $t("服务条款") }}</span |
| | | > |
| | | }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{ $t("服务条款") }}</span> |
| | | </div> |
| | | <div class="btn btnMain" @click="register">{{ $t("注册") }}</div> |
| | | <div class="noTips textColor"> |
| | | {{ $t("已有账号") |
| | | }}<span class="colorMain" @click="$router.push('/login')"> |
| | | {{ $t("去登录") }}</span |
| | | > |
| | | {{ $t("去登录") }}</span> |
| | | </div> |
| | | <nationality-list |
| | | ref="controlChild" |
| | | :title="$t('选择区域码')" |
| | | @getName="getName(arguments)" |
| | | ></nationality-list> |
| | | <nationality-list ref="controlChild" :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list> |
| | | |
| | | <Vcode |
| | | :imgs="[img1, img2]" |
| | | :show="show" |
| | | @success="onSuccess" |
| | | :canvasHeight="200" |
| | | @fail="onFail" |
| | | @close="show = false" |
| | | sliderText="" |
| | | :successText="$t('验证通过!')" |
| | | :failText="$t('验证失败,请重试')" |
| | | /> |
| | | <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail" |
| | | @close="show = false" sliderText="" :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')" /> |
| | | |
| | | <div>{{ msg }}</div> |
| | | </div> |
| | |
| | | safeword: "", |
| | | invitCode: "", //邀请码 |
| | | activeIndex: 1, |
| | | phone: '', |
| | | typeText: "password", |
| | | isArea: false, |
| | | dialCode: 0, //电话号前缀 |
| | |
| | | ? this.username |
| | | : `${this.username}`, |
| | | password: this.password, |
| | | phone: this.phone, |
| | | re_password: this.repassword, |
| | | re_safeword: this.resafeword, |
| | | safeword: this.safeword, |
| | |
| | | align-items: center; |
| | | height: 30px; |
| | | margin-top: 20px; |
| | | |
| | | i { |
| | | width: 30px; |
| | | height: 30px; |
| | |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | border-radius: 6px; |
| | | |
| | | input { |
| | | flex: 1; |
| | | height: 100%; |
| | | border: none; |
| | | } |
| | | |
| | | span { |
| | | color: #1d91ff; |
| | | } |