| src/components/assetsCenter/assets.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/assetsCenter/overview.vue | ●●●●● patch | view | raw | blame | history | |
| src/page/register/finish.vue | ●●●●● patch | view | raw | blame | history |
src/components/assetsCenter/assets.vue
@@ -3,79 +3,118 @@ <div class="pl-33 pr-33 total_wrap"> <div class="flex justify-between text-grey relative"> <div class="flex"> <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span> <span class="text-grey font-30">{{ $t("总资产") }}（USDT）</span> <div @click.stop="changeEyes"> <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" /> <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" /> <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" /> <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" /> </div> </div> <div class="right-clock" @click="goRouter('/exchange/exchangeHistory')"> <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" /> <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" /> </div> </div> <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel"> {{ funds.money_all_coin || '--' }} <span class="font-40 text-grey">≈{{ currency.currency_symbol }}{{ funds.money_all_coin ? (funds.money_all_coin * currency.rate).toFixed(2) : ' --' }}</span> {{ funds.money_all_coin || "--" }} <span class="font-40 text-grey" >≈{{ currency.currency_symbol }}{{ funds.money_all_coin ? (funds.money_all_coin * currency.rate).toFixed(2) : " --" }}</span > </div> <div class="font-70 font-66 mt-18 textColor" v-else>********</div> </div> <div class="pl-33 pr-33 btn-box flex justify-between"> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/recharge/rechargeList')"> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/recharge/rechargePage?symbol=usdt')" > <div class="word-wrap"> <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="" /> <span> {{ $t('充币') }}</span> <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="" /> <span> {{ $t("充币") }}</span> </div> </div> <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn"> <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn" > <div class="word-wrap"> <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="" /> <span>{{ $t('提币') }}</span> <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="" /> <span>{{ $t("提币") }}</span> </div> </div> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/exchange/exchangePage')"> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/exchange/exchangePage')" > <div class="word-wrap"> <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="" /> <span>{{ $t('闪兑') }}</span> <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="" /> <span>{{ $t("闪兑") }}</span> </div> </div> </div> <!-- <div class="divider-line"></div>--> <div class="pl-30 pr-30"> <div class="assets-content-title font-35 titleColor"> {{ $t('投资组合') }} {{ $t("投资组合") }} </div> <div class="assets-list font-30" v-for="(item, index) in list" :key="index"> <div class="assets-list font-30" v-for="(item, index) in list" :key="index" > <div class="flex justify-between"> <div class="flex items-center"> <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png') " class="w-72 h-72 rounded-full" /> <img :src=" item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png') " class="w-72 h-72 rounded-full" /> <div class="text-grey symbol-name font-30 textColor2"> {{ item.symbol.toUpperCase() }}/USDT </div> </div> <div class="flex-col font-30 text-right" v-if="!eyetel"> <div class="textColor" v-if="item.symbol == 'btc'"> {{ item.volume.toFixed(8) || '0.0' }} {{ item.volume.toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'eth'"> {{ item.volume.toFixed(8) || '0.0' }} {{ item.volume.toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'usdt'"> {{ item.volume.toFixed(2) || '0.0' }} {{ item.volume.toFixed(2) || "0.0" }} </div> <div class="textColor" v-else> {{ item.volume.toFixed(8) || '0.0' }} {{ item.volume.toFixed(8) || "0.0" }} </div> <div class="text-grey font-30 font-400 mb-0"> ≈{{ currency.currency_symbol }} {{ item.usdt ? item.usdt.toFixed(2) : '0.0' }} {{ item.usdt ? item.usdt.toFixed(2) : "0.0" }} </div> </div> <div class="flex-col font-30 text-right" v-else> @@ -88,22 +127,22 @@ <div class="flex justify-between mt-40 pl-94"> <template> <div class="flex-col font-30" v-if="!eyetel"> <div class="text-grey">{{ $t('可用') }}</div> <div class="text-grey">{{ $t("可用") }}</div> <div class="textColor" v-if="item.symbol == 'btc'"> {{ item.usable.toFixed(8) || '0.0' }} {{ item.usable.toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'eth'"> {{ item.usable.toFixed(8) || '0.0' }} {{ item.usable.toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'usdt'"> {{ item.usable.toFixed(2) || '0.0' }} {{ item.usable.toFixed(2) || "0.0" }} </div> <div class="textColor" v-else> {{ item.usable.toFixed(8) || '0.0' }} {{ item.usable.toFixed(8) || "0.0" }} </div> </div> <div class="flex-col font-30" v-else> <div class="text-grey">{{ $t('可用') }}</div> <div class="text-grey">{{ $t("可用") }}</div> <div class="textColor"> {{ currency.currency_symbol }} ******** </div> @@ -111,22 +150,22 @@ </template> <template> <div class="flex-col font-30" v-if="!eyetel"> <div class="text-grey">{{ $t('锁仓') }}</div> <div class="text-grey">{{ $t("锁仓") }}</div> <div class="textColor" v-if="item.symbol === 'btc'"> {{ item.lock_amount.toFixed(8) || '0.0' }} {{ item.lock_amount.toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol === 'eth'"> {{ item.lock_amount.toFixed(8) || '0.0' }} {{ item.lock_amount.toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'usdt'"> {{ item.lock_amount.toFixed(2) || '0.0' }} {{ item.lock_amount.toFixed(2) || "0.0" }} </div> <div class="textColor" v-else> {{ item.lock_amount.toFixed(8) || '0.0' }} {{ item.lock_amount.toFixed(8) || "0.0" }} </div> </div> <div class="flex-col font-30" v-else> <div class="text-grey">{{ $t('锁仓') }}</div> <div class="text-grey">{{ $t("锁仓") }}</div> <div class="textColor"> {{ currency.currency_symbol }} ******** </div> @@ -134,22 +173,30 @@ </template> <template> <div class="flex-col font-30 text-right" v-if="!eyetel"> <div class="text-grey">{{ $t('冻结') }}</div> <div class="text-grey">{{ $t("冻结") }}</div> <div class="textColor" v-if="item.symbol == 'btc'"> {{ (item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }} {{ (item.frozenAmount + item.freeze_amount).toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'eth'"> {{ (item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }} {{ (item.frozenAmount + item.freeze_amount).toFixed(8) || "0.0" }} </div> <div class="textColor" v-else-if="item.symbol == 'usdt'"> {{ (item.frozenAmount + item.freeze_amount).toFixed(2) || '0.0' }} {{ (item.frozenAmount + item.freeze_amount).toFixed(2) || "0.0" }} </div> <div class="textColor" v-else> {{ (item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }} {{ (item.frozenAmount + item.freeze_amount).toFixed(8) || "0.0" }} </div> </div> <div class="flex-col font-30 text-right" v-else> <div class="text-grey">{{ $t('冻结') }}</div> <div class="text-grey">{{ $t("冻结") }}</div> <div class="textColor"> {{ currency.currency_symbol }} ******** </div> @@ -161,27 +208,27 @@ </div> </template> <script> import { _getAllWallet } from '@/API/fund.api'; import { Dialog } from 'vant'; import { mapGetters } from 'vuex'; import { HOST_URL } from '@/config'; import { _getAllWallet } from "@/API/fund.api"; import { Dialog } from "vant"; import { mapGetters } from "vuex"; import { HOST_URL } from "@/config"; export default { name: 'Assets', name: "Assets", components: { [Dialog.name]: Dialog [Dialog.name]: Dialog, }, props: ['funds', 'tab'], props: ["funds", "tab"], computed: { ...mapGetters('home', ['currency', 'theme']) ...mapGetters("home", ["currency", "theme"]), }, data() { return { HOST_URL, list: [], total: '', status: '', //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过 total: "", status: "", //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过 eyetel: false, active: 0 active: 0, }; }, mounted() { @@ -192,7 +239,7 @@ this.$router.go(-1); }, goRouter(parmas) { if (parmas === '/exchange/exchangeHistory') { if (parmas === "/exchange/exchangeHistory") { this.$router.push({ path: parmas, query: { type: 1 } }); } else { this.$router.push(parmas); @@ -207,9 +254,9 @@ if (a == b) { return; } if (type == 'up') { if (type == "up") { return b - a; //升序 } else if (type == 'down') { } else if (type == "down") { return a - b; //降序 } else { return a - b; @@ -219,14 +266,14 @@ getList() { _getAllWallet().then((res) => { let list = res.extends; this.list = [...list].sort(this.compare('usdt', 'up')); this.list = [...list].sort(this.compare("usdt", "up")); }); }, changeEyes() { this.eyetel = !this.eyetel; }, beforeClose(action, done) { if (action === 'confirm') { if (action === "confirm") { setTimeout(done, 1000); } else { done(); @@ -258,10 +305,10 @@ // }); // } this.$router.push({ path: '/withdraw/withdrawPage' path: "/withdraw/withdrawPage", }); } } }, }, }; </script> @@ -284,7 +331,7 @@ margin-top: 44px; } .btn-box>div { .btn-box > div { width: 234px; padding: 20px 15px; box-sizing: border-box; @@ -330,11 +377,11 @@ margin-bottom: 70px; } .assets-list>div { .assets-list > div { display: flex; } .assets-list>div:nth-child(2) div:nth-child(1) { .assets-list > div:nth-child(2) div:nth-child(1) { margin-bottom: 16px; font-size: 30px; font-weight: 700; src/components/assetsCenter/overview.vue
@@ -3,55 +3,109 @@ <div class="pl-33 pr-33 total_wrap"> <div class="flex justify-between text-grey relative"> <div class="flex"> <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span> <span class="text-grey font-30">{{ $t("总资产") }}（USDT）</span> <div @click.stop="changeEyes"> <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" /> <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" /> <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" /> <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" /> </div> </div> <div class="right-clock" @click="goRouter('/exchange/exchangeHistory')"> <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" /> <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" /> </div> </div> <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">{{ funds.total || '--' }} <span class="font-40 text-grey">≈{{ currency.currency_symbol }}{{ funds.total ? (funds.total * currency.rate).toFixed(2) : ' --' }}</span> <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel"> {{ funds.total || "--" }} <span class="font-40 text-grey" >≈{{ currency.currency_symbol }}{{ funds.total ? (funds.total * currency.rate).toFixed(2) : " --" }}</span > </div> <div class="font-70 font-66 mt-18 textColor" v-else>********</div> </div> <div class="pl-33 pr-33 btn-box flex justify-between"> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/recharge/rechargeList')"> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/recharge/rechargePage?symbol=usdt')" > <div class="word-wrap"> <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt=""> <span> {{ $t('充币') }}</span> <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="" /> <span> {{ $t("充币") }}</span> </div> </div> <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn"> <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn" > <div class="word-wrap"> <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt=""> <span>{{ $t('提币') }}</span> <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="" /> <span>{{ $t("提币") }}</span> </div> </div> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/exchange/exchangePage')"> <div class="text-white font-25 textColor tabBackground" @click="goRouter('/exchange/exchangePage')" > <div class="word-wrap"> <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt=""> <span>{{ $t('闪兑') }}</span> <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="" /> <span>{{ $t("闪兑") }}</span> </div> </div> </div> <!-- <div class="divider-line"></div>--> <div class="pl-30 pr-30"> <div class="assets-content-title font-35 titleColor">{{ $t('投资组合') }}</div> <div class="assets-list font-30 flex justify-between" v-for="(item, index) in list" :key="index"> <div class="assets-content-title font-35 titleColor"> {{ $t("投资组合") }} </div> <div class="assets-list font-30 flex justify-between" v-for="(item, index) in list" :key="index" > <div class="items-center"> <img :src="require('@/assets/image/assets-center/funds/' + item.icon + '.png')" class="w-44 h-44" /> <div class="text-grey symbol-name font-30 textColor2">{{ $t(item.text) }}</div> <img :src=" require('@/assets/image/assets-center/funds/' + item.icon + '.png') " class="w-44 h-44" /> <div class="text-grey symbol-name font-30 textColor2"> {{ $t(item.text) }} </div> </div> <div class="flex-col font-30 text-right" v-if="!eyetel"> <div class="textColor">{{ funds[item.key] || '--' }} USDT</div> <div class="text-grey font-30 font-400 mb-0">≈{{ currency.currency_symbol }} {{ funds[item.key] ? (funds[item.key] * currency.rate).toFixed(2) : ' --' }}</div> <div class="textColor">{{ funds[item.key] || "--" }} USDT</div> <div class="text-grey font-30 font-400 mb-0"> ≈{{ currency.currency_symbol }} {{ funds[item.key] ? (funds[item.key] * currency.rate).toFixed(2) : " --" }} </div> </div> <div class="flex-col font-30 text-right" v-if="eyetel"> <div class="textColor">******** USDT</div> @@ -62,33 +116,58 @@ </div> </template> <script> import Axios from "@/API/assets" import { Dialog } from 'vant'; import Axios from "@/API/assets"; import { Dialog } from "vant"; import { mapGetters } from "vuex"; export default { name: 'AssetsPage', name: "AssetsPage", components: { [Dialog.name]: Dialog, }, props: ['funds'], props: ["funds"], data() { return { // total:"", // status:"", //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过 eyetel: false, active: 0, } }; }, computed: { ...mapGetters('home', ['currency', 'theme']), ...mapGetters("home", ["currency", "theme"]), list() { return [ { id: 1, text: this.$t('现货账户'), icon: 'spot', key: 'money_all_coin' }, { id: 2, text: this.$t('合约账户 (U本位)'), icon: 'contract_u', key: 'money_contract' }, { id: 3, text: this.$t('交割合约账户'), icon: 'contract_d', key: 'money_futures' }, { id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' }, { id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' }, ] { id: 1, text: this.$t("现货账户"), icon: "spot", key: "money_all_coin", }, { id: 2, text: this.$t("合约账户 (U本位)"), icon: "contract_u", key: "money_contract", }, { id: 3, text: this.$t("交割合约账户"), icon: "contract_d", key: "money_futures", }, { id: 4, text: this.$t("理财账户"), icon: "invest", key: "money_finance", }, { id: 5, text: this.$t("矿机资产"), icon: "mining", key: "money_miner", }, ]; }, }, mounted() { @@ -100,8 +179,8 @@ this.$router.go(-1); }, goRouter(parmas) { if (parmas === '/exchange/exchangeHistory') { this.$router.push({ path: parmas, query: { type: 0 } }) if (parmas === "/exchange/exchangeHistory") { this.$router.push({ path: parmas, query: { type: 0 } }); } else { this.$router.push(parmas); } @@ -125,7 +204,7 @@ this.eyetel = !this.eyetel; }, beforeClose(action, done) { if (action === 'confirm') { if (action === "confirm") { setTimeout(done, 1000); } else { done(); @@ -157,13 +236,11 @@ // }); // } this.$router.push({ path: '/withdraw/withdrawPage' path: "/withdraw/withdrawPage", }); }, }, } }; </script> <style lang="scss" scoped> @@ -185,7 +262,7 @@ margin-top: 44px; } .btn-box>div { .btn-box > div { width: 234px; padding: 20px 15px; box-sizing: border-box; @@ -218,7 +295,7 @@ } .divider-line { border-bottom: 1px solid #E5E7ED; border-bottom: 1px solid #e5e7ed; padding-bottom: 80px; } @@ -231,11 +308,11 @@ margin-bottom: 35px; } .assets-list>div { .assets-list > div { display: flex; } .assets-list>div:nth-child(2) div:nth-child(1) { .assets-list > div:nth-child(2) div:nth-child(1) { margin-bottom: 16px; font-size: 30px; font-weight: 700; src/page/register/finish.vue
@@ -1,161 +1,169 @@ <template> <div class="finish"> <Step :step="4"></Step> <div class="title textColor">{{ $t('注册成功') }}</div> <div class="title1 textColor">{{ $t('开启您的数字货币之旅') }}</div> <p class="mt-64 pl-72"> <i @click="agreeInfo"> <img v-show="agree1" src="../../assets/image/login/prot2.png" alt="" /> <img v-show="!agree1" src="../../assets/image/login/prot1.png" alt="" /> </i> {{ $t('我已同意授权调用系统信息通知权限') }} </p> <p class="mt-51 pl-72"> <i @click="agreeAddress"> <img v-show="agree2" src="../../assets/image/login/prot2.png" alt="" /> <img v-show="!agree2" src="../../assets/image/login/prot1.png" alt="" /> </i> {{ $t('我已同意授权访问地址簿') }} </p> <div class="content mt-50" @click="$router.push('/trade/btc')"> <div class="left"> <div class="font-40">{{ $t('我想要买币') }}</div> <div class="font-31 mt-60">{{ $t('去交易') }}<img src="../../assets/image/login/Vector.png" alt=""> </div> </div> <div class="right pic1"> <img src="./img/buyPic.png" alt=""> </div> <div class="finish"> <Step :step="4"></Step> <div class="title textColor">{{ $t("注册成功") }}</div> <div class="title1 textColor">{{ $t("开启您的数字货币之旅") }}</div> <p class="mt-64 pl-72"> <i @click="agreeInfo"> <img v-show="agree1" src="../../assets/image/login/prot2.png" alt="" /> <img v-show="!agree1" src="../../assets/image/login/prot1.png" alt="" /> </i> {{ $t("我已同意授权调用系统信息通知权限") }} </p> <p class="mt-51 pl-72"> <i @click="agreeAddress"> <img v-show="agree2" src="../../assets/image/login/prot2.png" alt="" /> <img v-show="!agree2" src="../../assets/image/login/prot1.png" alt="" /> </i> {{ $t("我已同意授权访问地址簿") }} </p> <div class="content mt-50" @click="$router.push('/trade/btc')"> <div class="left"> <div class="font-40">{{ $t("我想要买币") }}</div> <div class="font-31 mt-60"> {{ $t("去交易") }}<img src="../../assets/image/login/Vector.png" alt="" /> </div> <div class="content mt-33" @click="$router.push('/recharge/rechargeList')"> <div class="left"> <div class="font-40">{{ $t('我想要充值') }}</div> <div class="font-31 mt-60">{{ $t('去充值') }}<img src="../../assets/image/login/Vector.png" alt="" /></div> </div> <div class="right pic2"> <img src="./img/rechargePic.png" alt=""> </div> </div> <div class="btn mt-32 btnMain" @click="$router.push('/')">{{ $t('确定') }}</div> </div> <div class="right pic1"> <img src="./img/buyPic.png" alt="" /> </div> </div> <div class="content mt-33" @click="$router.push('/recharge/rechargePage?symbol=usdt')" > <div class="left"> <div class="font-40">{{ $t("我想要充值") }}</div> <div class="font-31 mt-60"> {{ $t("去充值") }}<img src="../../assets/image/login/Vector.png" alt="" /> </div> </div> <div class="right pic2"> <img src="./img/rechargePic.png" alt="" /> </div> </div> <div class="btn mt-32 btnMain" @click="$router.push('/')"> {{ $t("确定") }} </div> </div> </template> <script> import Step from "./step.vue"; export default { props: { props: {}, components: { Step, }, data() { return { agree1: true, agree2: true, }; }, methods: { agreeInfo() { this.agree1 = !this.agree1; }, components: { Step agreeAddress() { this.agree2 = !this.agree2; }, data() { return { agree1: true, agree2: true, } }, methods: { agreeInfo() { this.agree1 = !this.agree1 }, agreeAddress() { this.agree2 = !this.agree2 } } } }, }; </script> <style lang="scss" scoped> .finish { padding: 32px; font-size: 26px; width: 100%; box-sizing: border-box; padding: 32px; font-size: 26px; width: 100%; box-sizing: border-box; } .title { font-weight: 700; font-size: 52px; margin-top: 65px; text-align: center; font-weight: 700; font-size: 52px; margin-top: 65px; text-align: center; } .title1 { font-weight: 700; font-size: 44px; text-align: center; margin-top: 32px; font-weight: 700; font-size: 44px; text-align: center; margin-top: 32px; } p { display: flex; align-items: center; color: #868D9A; display: flex; align-items: center; color: #868d9a; i { display: block; margin-right: 18px; box-sizing: border-box; i { display: block; margin-right: 18px; box-sizing: border-box; img { width: 30px; height: 30px; } img { width: 30px; height: 30px; } } } .content { @include themify() { background: themed("cont_background"); @include themify() { background: themed("cont_background"); } border-radius: 8px; padding: 0 35px; display: flex; justify-content: space-between; height: 220px; align-items: center; @include themify() { color: themed("text_color"); } .left { img { width: 22px; height: 22px; margin-left: 12px; } } border-radius: 8px; padding: 0 35px; display: flex; justify-content: space-between; height: 220px; align-items: center; .pic1 { width: 140px; height: 152px; @include themify() { color: themed("text_color"); img { width: 100%; height: 100%; } } .left { img { width: 22px; height: 22px; margin-left: 12px; } .pic2 { width: 152px; height: 132px; img { width: 100%; height: 100%; } .pic1 { width: 140px; height: 152px; img { width: 100%; height: 100%; } } .pic2 { width: 152px; height: 132px; img { width: 100%; height: 100%; } } } } .btn { color: #fff; height: 88px; line-height: 88px; text-align: center; font-size: 32px; border-radius: 10px; color: #fff; height: 88px; line-height: 88px; text-align: center; font-size: 32px; border-radius: 10px; } </style>
