<template>
|
<div class="pb-120 assetsCenter">
|
<!-- 资产 -->
|
<div class="search-wrp">
|
<van-search
|
v-model="value_bb"
|
:placeholder="$t('搜索')"
|
shape="round"
|
background="#121212"
|
/>
|
</div>
|
|
<div class="price">
|
<!-- <div class="price_box" style="justify-content: flex-end;">
|
<img class="price_box_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAAEVQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////Up1zwgAAABZ0Uk5TABAgMEBPUF9gb3B/gI+Qn6Cwv8/f7xMcqe8AAAEdSURBVEjH7dXBcoQgEATQBiaRKFHDQv//p+awljqArp6SqqTPvBoYZAR+LObG2o8vAH6yF5fbyAjAM3WX1g+ZCyAvFJFEboAcDsh7ZwG4IZIaME1iACNBg0Aycc0OkGROZNJgpEoByArML0G+C/gPLoBU3/QtIEGlAyCTSsCvT1+dwXqVciY8XnXJ4exB7MGYmXMN/BHoEwMQ+CjH1gGIjhEAYlUitkEnDM8tS9mmNnDGOwBwvpw3JrdAFrumbGxogKTq9kWJxlzq1Wc/lVOyBn4myTzOTbC7PA26Zb8V2FqrgSzVa7AeQ4PP5QlPjX9JagFaywMAE2+C5XgFcO4EQNIG3k7vYSuSniCKnlfj8X9UAIgAsONu0lj82XwD7hxJmfCAhwIAAAAASUVORK5CYII="/>
|
</div> -->
|
<div class="price-top">
|
<div class="price_box price_box-tit">
|
{{ $t("总资产") }} （ USDT ）
|
<!-- <div @click="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" />
|
</div> -->
|
</div>
|
<div class="price_box price_box-text">{{ funds.total }}</div>
|
</div>
|
|
<div class="price-bot">
|
<div class="price-bot-wrp">
|
<div class="price-bot-tit">{{ $t("合约") }}</div>
|
<div class="price-bot-text">{{ funds.money_contract }}</div>
|
</div>
|
<div class="price-bot-wrp">
|
<div class="price-bot-tit">{{ $t("币") }}</div>
|
<div class="price-bot-text">{{ funds.money_coin }}</div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="flex justify-between px-52 pt-31 box-border">
|
<div
|
class="flex-1 items-center text-center textColor1"
|
v-for="(item, index) in typeList"
|
:key="'type' + index"
|
@click="onTabs(index)"
|
>
|
<div class="font-32 text-center lh-53">{{ item.type }}</div>
|
</div>
|
</div> -->
|
<!-- <div class="flex mx-52 mt-17">
|
<span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>
|
</div> -->
|
<!-- <over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
|
<as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
|
<contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract>
|
<financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial> -->
|
|
<!-- <over-view :funds="funds" :key="tab"></over-view> -->
|
<div class="pl-33 pr-33 btn-box flex justify-between btnGroup">
|
<div
|
class="text-white font-25 textColor"
|
@click="goRouter('/recharge/rechargeList')"
|
>
|
<div class="word-wrap">
|
<img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAKESURBVHic7ZxbmqIwEEb/+Lmg2UHjkmYFE1bQS4JeWc0DwabpXLAMKZLUedFP0QrHglyNgQciGtzTf+5x8B3XMDOALwAwxljfAWb/AhFZfAtTFsa9wB/iiGhCf9l1lB/ynuI00w4xG2MeAHADVNoLDOv93wAAEZFocepiyToishRm2tSw3UBEQ8LLEBNnpU9AmoibCS6rfiFd6KsQE+d/QwGAYGLdpAtWKyqOiYpjouKYqDgmKo7JHcBDuhA1cjfGzNKFqBG9VJmoOCYqjsnlxe1GKCbqcJjrZSLDOkPBMlTZyf8IvK6ZFyOQbUUzr9aMGxPva+aFOJB1p2ZerRkHHOsSaub5oGXWSSTzQhmXO85pSMmrXhwgI68JcUB5ec2IA8rKa0ocUE5ec+KAMvJC4sy7v8gF+APg88BxD85oNwUWW94B9LLcYSIiljwfNfQccpItSXoTt64+fZvuxGFZiv823YnTexyPbJPvrczkf2JplsT4q5PvG0IN1LMbwBlPoTxnS4vFyHQK5SkhLRYnwymUp5S0WKwc312UktJi8XJ9fxFKS4vFzBnjVCSkxeLmjpMdEpzhcvGrFScmzcX3irt0l4uO/TUq2xhbM0hm2qYM9WVcAtFMu7q40GolvTxT0LIqc71crEB876VauhzV0eI9ThQVx0TFMbmH2kJaayUINCx7md1PopVDZlQcExXHRMUxUXFMVBwX7cTGCTXXbnC7j3o+YMsW8XpEHHylJkNsqGfRMpTeeM+uWz3qbqwvYIwxa+WQ+l+o8s0IuFrVdehnwcLUwnMv4P0Gyha6rW2I5x7AwK4d52zqZfubcSsN8Ox1vrKpij/QX8Uxu8cR8I9N/gdx8yXMQdQnYAAAAABJRU5ErkJggg=="
|
alt=""
|
/>
|
<span> {{ $t("充币") }}</span>
|
</div>
|
</div>
|
<div class="text-white font-25 textColor" @click="withdrawBtn">
|
<div class="word-wrap">
|
<img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAQwSURBVHic7Z1rcusgDIVFpvsqXVnIykxWdu6P4Ja6RiAjHvbNN5OpJzFCHEvgxLJraAIA2LBpo7c/N+/5TbNn/J4xZvv5EMyojgG4sHlXMunD38cs4jYHgAuvHixR5F+HIODSScQUCzqJ2yzloZ/SGnhqPCWoC9pASB9tWyWbD2OMU7L1C1VBg5hHhHxE256IX7U36WvpdUZg9/bN9dtK2CpwbKFxUTRr+GDDa5l1fi1CKKaqiBm/pOLaHn7lnC4V0w30USLsGD+Dk0UOjhQzRiCsG+HYvEc7A8qyaunlTImYroszFaAsWtuLegUxYwpEddfsvCHITwGuRac5Ma16px3pKmpGzD6TdweQXx9cj05sdScTURCptrYDLjrrjE9KRlQ3n+EToD528KkuN9gJzawBk52axqZchDYRtWgcdLWgyhiytY5qw/jrFGwnU19iZEnYOEN0thD1uG3maAMTRucK43O1qNwBK2m8JNpOGZ0r3KCVRJXbxUmjc6WlqJztI42mjs6YxqKmsDoNJqWVqIzdv/bApHvl+IbQQlRGo78ZLNr5JDQStSzokF7drcLYhqEtKmPv284HZ0BSAxSMHq3gGMUdAAmqRzxlKmNMiMK91PbGmK+SXhgbp8AYU1yStJvikY0b0/Yp9Ou0CKc2z314o3SKsg03pGxckd1AWw/KjX5q2Q8T5iBfa2cQqvWi7KIkwRjzFY6S1bLZAa8opiUinzxlUurkciDz+yu3KL05QEpQ39OJM8FMEZ9E/Cr/5gDvlFfmRvvpbfu6cR6YLwFPoneEqvNBL2Xt9gMAVnqOFv1AchY0T+o9keKJPV6/nVote52wAKT3KlnuQy7l2YYxITKL958M6Y1qbAamFqX/Co0f0tepQ2VRmvL2vnKk3+dtdo/U9QGJV8zlgZlxwjGWXXuD5BJpnagie7OB0mtvWoJmbJ1e1NSA6nfOd3w5USG91M6I4A46cClRUZjuzb56hpX/wexyP5uoYlpE0xUilRkDf+mcaegaOXQKUav8bjXonKg1tlvC+F1W2MENvKFzwIR1VNAqQmaMOAUnd0WttdsCaJXIc5Gk5KjdOGs17GqiFp2RwRRqRWEzCkmUFfPY+LkoxeSrci1oddNwxrBTG8FENB8zY/xyooLPSp2pLtMJMOk8KKXrOAs6c2qdDWBI0OD9VJwmnV9GVJQ9DMv1cCTnxILJ59WCqOwbHAWi9nVIwHRiRo6ViApMEq2FQo4NBIGTyyhhBT6OFTNymPveuytsa3FDH9I6gaY+icGxZx8vWgMJAh4ptnAa/a/M8pRwoleN1TPaJqLfNe2R+OtfooonhAf77kDbfuDYk7p740brJAZzCutG66ICxhaSLZcRcgt+ona5qogj/5+SDZt30ql+nmKRGSboFvw+fVq34/Lr7W3Vnmie//T1phH/ANm7aXr6fICGAAAAAElFTkSuQmCC"
|
alt=""
|
/>
|
<span>{{ $t("提币") }}</span>
|
</div>
|
</div>
|
<div
|
class="text-white font-25 textColor"
|
@click="goRouter('/exchange/exchangePage')"
|
>
|
<div class="word-wrap">
|
<img
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAJXSURBVHic7ZxRcqMwDIZ/Mdxr6cnW3GT3JKUn0z5EpCQgMIKOF/x/L+m0RqN842CjKhYsoKqd/fjbXrulcTdmAPAFACKSlgbI+y9UNeFbGHnQvwt8Eaeqn6hvduXyIu8pjjMti0FEPgCgAShtB914/xcAUFUtms61eMw6VU3q8zlZYatBVbsNL92auFT6DZRm1Y3Nqhmlk/5f8D6J/h8IALgTqymd2FWhuCAUF4TiglBcEIoL0gL4KJ3EFWlFZCidxBXhRzUIxQWhuCDtGUEmlZSB98wMnLJLKp3XmZxePXKk3a4kdaq4NWkU5wdalUZxy0E2pSnvcbMA1UkDDoqrVRpwQFzN0oCguNqlAQFxlPZglzhK+yZbHKW9kiWO0uZ44trJgITtVq+/AAa9USNOtJoztnklVNofJyKzdt4p6nSpNjZ7qpR2hAaUFoKl8yANrJ+f7KOxFvS+dCJXowUe3x6xPV3OduTPD+d0PbgBnpP15GADKW9CtjgbTHnGLnF2AeWBhcwwIXF2YdXywuLs4mrlHRJnAaqUd1icBalO3iniLBBbIKLvcUveybkX5VRxFpBtXgeCVttYeKiV1aoqA6wm753RQSrEm3EsnQehuCAUF6RV57/y/L7CBs5WjIcZGFwcTobiglBcEIoLQnFBKC7Kj5RNboS3XXO7le5WHoqw4uBrPGTOI3lPFndGtw/eS2MPME9j3YGIyLg4sD8unx6wVdUe6IeCyVyF51nA7wcoJ7CZ2uN5BjDwto9jW6tLP5UGLJx1PjJZin+hvoVjsNceWK5N/gOUYwoqI3UGxgAAAABJRU5ErkJggg=="
|
alt=""
|
/>
|
<span>{{ $t("闪兑") }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div>
|
<div class="asset-list">
|
<uni-view
|
data-v-43c57eaa=""
|
class="list"
|
v-for="(item, index) in filteredList"
|
:key="index"
|
>
|
<uni-view data-v-43c57eaa="" class="list-h">
|
<div data-v-43c57eaa="" style="color: rgb(50, 160, 50)">
|
<span>{{ item.name }}</span>
|
</div>
|
<div v-if="item.usable">
|
<van-icon name="arrow" />
|
</div>
|
</uni-view>
|
<uni-view data-v-43c57eaa="" class="list-item">
|
<uni-view data-v-43c57eaa="" class="list-b">
|
<uni-view data-v-43c57eaa="" class="list-b-t">{{
|
$t("可用")
|
}}</uni-view>
|
<div data-v-43c57eaa="">
|
<span>{{ item.usable.toFixed(2) }} </span>
|
</div>
|
</uni-view>
|
<uni-view data-v-43c57eaa="" class="list-b">
|
<uni-view data-v-43c57eaa="" class="list-b-t">{{
|
$t("锁仓")
|
}}</uni-view>
|
<div data-v-43c57eaa="" class="lock">
|
<span>{{ item.lock_amount.toFixed(2) }}</span>
|
</div>
|
</uni-view>
|
<uni-view data-v-43c57eaa="" class="list-b"
|
><uni-view data-v-43c57eaa="" class="list-b-t">{{
|
$t("冻结")
|
}}</uni-view>
|
<div data-v-43c57eaa="">
|
<span>{{
|
(item.frozenAmount + item.freeze_amount).toFixed(2)
|
}}</span>
|
</div>
|
</uni-view>
|
<!-- <uni-view data-v-43c57eaa="" class="list-b">
|
<uni-view data-v-43c57eaa="" class="list-b-t">
|
待释放资产
|
</uni-view>
|
<div data-v-43c57eaa="">
|
<span>0.00000</span>
|
</div>
|
</uni-view> -->
|
<!-- <uni-view data-v-43c57eaa="" class="list-b">
|
<uni-view data-v-43c57eaa="" class="list-b-t">
|
折合USDT
|
</uni-view>
|
<div data-v-43c57eaa="">
|
<span>61900836.50564</span>
|
</div>
|
</uni-view> -->
|
</uni-view>
|
<uni-view data-v-43c57eaa="" class="kline"></uni-view>
|
</uni-view>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AsSets from "@/components/assetsCenter/assets";
|
import OverView from "@/components/assetsCenter/overview";
|
import Contract from "@/components/assetsCenter/contract";
|
import Financial from "@/components/assetsCenter/financial";
|
import Axios from "@/API/assets";
|
import { _getAllWallet } from "@/API/fund.api";
|
export default {
|
name: "assets-index",
|
components: {
|
AsSets,
|
OverView,
|
Contract,
|
Financial,
|
},
|
data() {
|
return {
|
value_bb: "",
|
type: "left", //left 从左往右 right 从有王座
|
list: [],
|
filteredList: [],
|
timer: null,
|
tab: 0,
|
index: 0, // 每个组件的二级tab
|
eyetel: false,
|
funds: {},
|
typeList: [
|
{
|
type: this.$t("总览"),
|
},
|
{
|
type: this.$t("现货账户"),
|
},
|
{
|
type: this.$t("合约"),
|
},
|
{
|
type: this.$t("理财"),
|
},
|
],
|
};
|
},
|
mounted() {
|
this.getList();
|
},
|
watch: {
|
value_bb(newVal) {
|
this.filterList(newVal);
|
},
|
},
|
methods: {
|
filterList(searchText) {
|
if (!searchText) {
|
this.filteredList = [...this.list];
|
return;
|
}
|
const lowerCaseSearch = searchText.toLowerCase();
|
this.filteredList = this.list.filter(
|
(item) =>
|
item.name.toLowerCase().indexOf(lowerCaseSearch) !== -1 ||
|
(item.symbol &&
|
item.symbol.toLowerCase().indexOf(lowerCaseSearch) !== -1)
|
);
|
},
|
getList() {
|
_getAllWallet().then((res) => {
|
let list = res.extends;
|
this.list = [...list].sort(this.compare("usdt", "up"));
|
this.filteredList = [...this.list]; // 初始化filteredList
|
});
|
},
|
withdrawBtn() {
|
this.$router.push({
|
path: "/withdraw/withdrawPage",
|
});
|
},
|
compare(p, type) {
|
//这是比较函数
|
return function (m, n) {
|
console.log(m);
|
var a = m[p];
|
var b = n[p];
|
if (a == b) {
|
return;
|
}
|
if (type == "up") {
|
return b - a; //升序
|
} else if (type == "down") {
|
return a - b; //降序
|
} else {
|
return a - b;
|
}
|
};
|
},
|
goRouter(parmas) {
|
if (parmas === "/exchange/exchangeHistory") {
|
this.$router.push({ path: parmas, query: { type: 0 } });
|
} else {
|
this.$router.push(parmas);
|
}
|
},
|
onTabs(val) {
|
if (this.tab < val) {
|
this.type = "right";
|
} else {
|
this.type = "left";
|
}
|
console.log(val);
|
this.tab = val;
|
},
|
getAssets() {
|
Axios.GetAllAssets().then((res) => {
|
const { code, data } = res;
|
if (code) {
|
//console.log('总资产数据',data)
|
this.funds = data;
|
}
|
});
|
},
|
},
|
created() {
|
this.getAssets();
|
this.timer = setInterval(() => {
|
this.getAssets();
|
}, 5000);
|
if (Object.hasOwnProperty.call(this.$route.query, "tab")) {
|
this.tab = this.$route.query.tab / 1;
|
this.index = this.$route.query.index ? this.$route.query.index * 1 : 0;
|
}
|
},
|
changeEyes() {
|
this.eyetel = !this.eyetel;
|
},
|
activated() {
|
clearInterval(this.timer);
|
this.timer = setInterval(() => {
|
this.getAssets();
|
}, 5000);
|
this.index = 0;
|
},
|
deactivated() {
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.price_box_img {
|
width: 3.375rem;
|
}
|
.price-top {
|
.price_box.price_box-text {
|
font-size: 3.2rem;
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
.price_box-tit {
|
color: hsla(0, 0%, 100%, 0.7);
|
}
|
}
|
.price_box {
|
font-size: 2.2rem;
|
margin-bottom: 1.4rem;
|
display: flex;
|
justify-content: center;
|
}
|
.price {
|
background-image: url("bg.png");
|
background-size: 100% 100%;
|
padding: 2rem 2rem 2.375rem;
|
margin: 2.5rem 2rem 5rem 2rem;
|
border-radius: 1.125rem;
|
// background: #2b64fb;
|
}
|
.assetsCenter {
|
width: 100%;
|
box-sizing: border-box;
|
padding-top: 4.1rem;
|
}
|
|
.active_color {
|
@include themify() {
|
border-bottom: 5px solid themed("color_main") !important;
|
}
|
|
border-radius: 2.208px;
|
}
|
|
.left-enter-active,
|
.left-leave-active,
|
.right-enter-active,
|
.right-leave-active {
|
will-change: transform;
|
transition: all 500ms;
|
}
|
|
.left-leave-active,
|
.right-leave-active {
|
display: none;
|
}
|
|
.left-enter {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.left-leave {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.right-enter {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.right-leave {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.btn-box > div {
|
width: 234px;
|
height: 80px;
|
background: #2b64fb;
|
border-radius: 12px;
|
padding: 20px 15px;
|
box-sizing: border-box;
|
text-align: center;
|
border-radius: 8.8px;
|
font-size: 26.5px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
@include themify() {
|
background: themed("tab_background");
|
}
|
padding: 10px;
|
margin: 10px;
|
margin-top: 0px;
|
padding-top: 0px;
|
|
.word-wrap {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 40px;
|
height: 40px;
|
margin-right: 22px;
|
}
|
|
span {
|
font-size: 26.5px;
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
}
|
|
.price-bot {
|
display: flex;
|
justify-content: space-around;
|
background: rgba(0, 0, 0, 0.4);
|
border-radius: 12px;
|
padding: 12px;
|
&-wrp {
|
// display: flex;
|
}
|
&-tit {
|
text-align: center;
|
font-size: 2rem;
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
&-text {
|
font-weight: 500;
|
color: #fb7171;
|
font-size: 3.2rem;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
// @include themify() {
|
// color: themed("text_color1");
|
// }
|
}
|
}
|
|
.asset-list {
|
width: 100%;
|
background: #212121;
|
border-radius: 3rem 3rem 0 0;
|
padding: 2.7rem;
|
box-sizing: border-box;
|
@include themify() {
|
color: themed("text_color");
|
}
|
.list {
|
background: #212121;
|
box-sizing: border-box;
|
margin-bottom: 0.22rem;
|
padding: 0.06rem;
|
box-sizing: border-box;
|
position: relative;
|
}
|
.list-h {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 2rem;
|
span {
|
font-size: 2.7rem;
|
font-weight: 700;
|
// color: #fff;
|
}
|
}
|
.u-icon--right {
|
flex-direction: row;
|
align-items: center;
|
}
|
.u-icon {
|
display: flex;
|
align-items: center;
|
}
|
|
.list-item {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.list-b {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-bottom: 1.2rem;
|
font-size: 1.6rem;
|
width: 14rem;
|
padding-right: 1.4rem;
|
margin-right: 1.4rem;
|
box-sizing: border-box;
|
border-right: 1px solid rgba(60, 58, 58, 0.2);
|
span {
|
font-size: 2rem;
|
font-weight: 700;
|
color: #fff;
|
}
|
}
|
.list-b-t {
|
color: hsla(0, 0%, 100%, 0.7);
|
}
|
|
.kline {
|
width: 46rem;
|
height: 0.22rem;
|
background: rgba(60, 58, 58, 0.6);
|
position: absolute;
|
bottom: -0.6rem;
|
left: 0;
|
margin-bottom: 3rem;
|
}
|
}
|
|
.btnGroup {
|
margin-bottom: 2.2rem;
|
padding: 0 1rem;
|
}
|
|
.search-wrp {
|
margin: 2rem 0;
|
:deep(.van-search .van-cell) {
|
height: 6rem;
|
font-size: 2rem;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
:deep(.van-search__content) {
|
background-color: #212121;
|
border: 1px solid #686767;
|
border-radius: 4.6rem;
|
}
|
:deep(.van-field__control) {
|
color: #fff;
|
}
|
|
.assets-list {
|
margin-bottom: 70px;
|
}
|
|
.assets-list > div {
|
display: flex;
|
}
|
|
.assets-list > div:nth-child(2) div:nth-child(1) {
|
margin-bottom: 16px;
|
font-size: 30px;
|
font-weight: 700;
|
}
|
</style>
|
