<template>
	<v-page>
		<v-header :title="$t('base.d2')" :left-arrow="false" style="background-color: #F6F9FF;"></v-header>
		<!-- <view style="height: var(--status-bar-height)"></view> -->
		<view style="background-color: #F6F9FF;padding: 15px;">
			<view class="box-size head h-aut d-flex justify-between flex-wrap align-center rounded-ms color-light"
				:class="theme == 'light' ? 'bgb3-white' : ''" style="position: relative;background-color: #ECF1FF;padding: 15px;">
				<view>
					<view class="d-flex p-t-md w-max">
						<text class="fn-16 color-default d-block">{{ $t("base.d6") }}(BTC)</text>
						<view class="fn-18 m-l-md d-flex" @click="setHide(!hideMoney)">
							<van-icon v-if="!hideMoney" name="eye-o" />
							<van-icon v-else name="closed-eye" />
						</view>
					</view>
					<view class="m-t-md" style="width: 170px;word-wrap: break-word;">
						<view class="fn-26">{{ filterMoney(account.total_assets_btc,true) }}</view>
						<view class="fn-sm"  style="color: #6FB58A;">
							<!-- ≈{{ filterMoney(account.total_assets_usd) }} USD -->
							≈{{ filterMoney(account.total_assets_usd,false) }} USDT
						</view>
					</view>
				</view>
				<view>
					<img src="@/assets/img/mine1.png" width="130" />
				</view>
				
			
				<!-- <view class="m-t-ms p-b-ms w-max" style="display: flex;justify-content: space-between;">
					<v-link tag="view" to="/pages/assets/recharge" v-if="user_auth_level==1" @click="getAuthInfo"
						class="manage_text">
						<img src="@/assets/img/home/Make.png" alt="" class="h-25" />
						<view class="color-light fn-middle fn-ms">{{$t("base.b5")}}</view>
					</v-link>
					<v-link tag="view" to="/pages/auth/primary" v-if="user_auth_level==0" @click="getAuthInfo"
						class="manage_text">
						<img src="@/assets/img/home/Make.png" alt="" class="h-25" />
						<view class="color-light fn-middle fn-ms">{{$t("base.b5")}}</view>
					</v-link>
					<v-link tag="view" to="/pages/assets/draw" class="manage_text">
						<img src="@/assets/img/home/currency.png" alt="" class="h-25" />
						<view class="color-light fn-ms">{{$t("base.b6")}}</view>
					</v-link>
					<v-link tag="view" to="/pages/transfer/index" class="manage_text">
						<img src="@/assets/img/home/transfer.png" alt="" class="h-25" />
						<view class="color-light fn-ms">{{$t("base.d8")}}</view>
					</v-link>
					<v-link tag="view" :to="{path: '/pages/exchange/his',query: { symbol: symbol }}" class="manage_text">
						<img src="@/assets/img/home/check.png" alt="" class="h-25" />
						<view class="color-light fn-ms">{{$t("base.h1")}}</view>
					</v-link>
				</view> -->
			
				<view class="m-t-ms p-b-ms w-max " style="margin-top: 10px" v-if="0">
					<view class="d-flex justify-between align-center rounded-lg">
						<v-link tag="view"
							:to="ProfileDetail.primary_status!=1?'/pages/auth/index':'/pages/assets/recharge'"
							class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center">
							<view class="m-r-xs d-flex align-center">
								<img src="static/img/13.png" alt="" class="h-25" />
							</view>
							<text class="color-light fn-middle fn-ms">{{$t("base.b5")}}</text>
						</v-link>
						<v-link tag="view"
							:to="ProfileDetail.status==1?'/pages/auth/index':(ProfileDetail.status==2?'/pages/assets/draw':'/pages/auth/senior')"
							class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center">
							<view class="m-r-xs d-flex align-center">
								<img src="static/img/5.png" alt="" class="h-25" />
							</view>
							<text class="color-light fn-ms">{{$t("base.b6")}}</text>
						</v-link>
						<v-link tag="view" to="/pages/transfer/index"
							class="d-flex bg-form-panel-3 align-center p-y-xxs rounded-xs w-33 justify-center">
							<view class="m-r-xs d-flex align-center">
								<img src="static/img/hua.png" alt="" class="h-25" />
							</view>
							<text class="color-light fn-ms">{{$t("base.d8")}}</text>
						</v-link>
					</view>
				</view>
			</view>
		</view>

		<view class="layout-main" style="background-color: #F6F9FF !important;">
			<scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled&&scrollTop<50"
				:refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50">
				<!-- 头部 -->
				<!-- <view class="tab m-x-md m-t-md rounded-ms d-flex justify-between bgb3 p-xs"
					:class="theme == 'light' ? 'bgb3-white' : ''">
					<view class="w-33 fn-center p-y-xxs"
						:class="tabActive==0?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
						@click="tabActive=0">
						{{$t('base.d7')}}
					</view>
					<view class="w-33 fn-center p-y-xxs m-l-xs"
						:class="tabActive==1?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
						@click="tabActive=1">
						{{$t('base.e4')}}
					</view> -->
					<!-- <view class="w-33 fn-center p-y-xxs m-l-xs" :class="tabActive==2?'color-theme-1 bg-panel-3 rounded-xs shadow-panel-nei':''"
          @click="tabActive=2">
              {{$t('otc.d5')}}
          </view> -->
				<!-- </view> -->
				<view style="padding: 15px;background-color: #F6F9FF;" @click="showPopup">
					<view style="background-color: #fff;border-radius: 10px;padding: 15px;display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<view style="background-color: #ECF1FF;padding: 10px;border-radius: 50px;height: 24px;margin-right: 10px;">
								<img src="@/assets/img/mine2.png" width="24" />
							</view>
							<view>
								<view style="font-size: 16px;color: #000;font-weight: bold;">{{$t("base.h3")}}</view>
								<view>{{$t("base.h4")}}</view>
							</view>
						</view>
						<view style="height: 24px;"><img src="@/assets/img/mine9.png" width="24" /></view>
					</view>
				</view>
				
				<view style="padding: 15px 0px 16px 15px;background-color: #F6F9FF;">
					<view style="display: flex;justify-content: space-between;">
						<view style="font-weight: bold;color: #000;font-size: 16px;">{{$t("base.h5")}}</view>
						<view style="color: #2E58DE;font-weight: bold;font-size: 16px;padding-right: 15px;"  @click="goExchange">{{$t("base.h6")}} 》</view>
					</view>
					<scroll-view style="padding: 10px 0px;" scroll-x="true" show-scrollbar="false">
						<view style="display: flex;">
							<view v-if="parentItem.coin_name=='USDT'"  v-for="parentItem in marketList" :key="parentItem.coin_name">
								<view style="display: flex;">
									<view  class="marketbox3" v-for="item in parentItem.marketInfoList.slice(0,6)" :key="item.pair_name"
									style="background-color: #fff;width: 150px;padding: 15px 5px 15px 25px;margin-right: 10px;border-radius: 10px;">
										<view style="display: flex;align-items: center;">
											<image :src="item.coin_icon" mode="" style="width: 30px;height: 30px;"></image>
											<view style="margin-left: 5px;font-weight: bold;color: #000;">{{ item.pair_name }}</view>
										</view>
										<view style="margin-top: 10px;">
											<span style="font-size: 32rpx;font-weight: bold;" :class="item.increase * 1 > 0 ? 'color-buy' : 'color-sell'">
												{{ item.increaseStr }}
											</span>
										</view>
										<view style="margin-top: 10px;">
											<view>$ {{ item.close }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="" style="display: flex;margin-top: 10px;padding: 0px 15px;">
					<view class="w-33A fn-center p-y-xxs" :class="tabActive==0?'rounded-xs col-fff':''" @click="tabActive=0"
					style="display: flex;height: 30px;align-items: center;">
						<!-- <img src="@/assets/img/mine7.png" style="width: 24px;height: 24px;" /> -->
						<view style="margin-left: 5px;">{{$t('base.d7')}}</view>
					</view>
					<view class="w-33A fn-center p-y-xxs" :class="tabActive==1?'rounded-xs col-fff1':''" @click="tabActive=1"
					style="display: flex;height: 30px;align-items: center;">
						<!-- <img src="@/assets/img/mine8.png" width="24" /> -->
						<view style="margin-left: 5px;">{{$t('base.e4')}}</view>
					</view>
				</view>
				
				<view class="top" style="padding: 0px 15px;">
					<!-- <van-tabs :active="tabActive" @change="changtTab" :border="false" v-if="show" :line-width="30" swipeable animated
					class="tabs-main d-flex justify-between align-center flex-col">
				<van-tab :title="$t('base.d7')" :name="0"> -->
					<view class="box-shadow p-t-ms wallet m-y-md" v-if="tabActive==0" style="background-color: #fff;">
						<view class="m-x-md m-b-xs m-t-sm">
							<!--bgb3 :class="theme == 'light' ? 'bgb3-white' : ''" -->
							<view class="p-xs p-x-md rounded-ms"
								style="position: relative;background-color: #F7F9FE;">
								<text class="fn-20 d-block color-light m-t-xs">
									<!-- ≈{{ filterMoney(account.funds_account_usd) }} -->
									≈{{ omitTo(account.funds_account_usd,2) }}
								</text>
								<text class="fn-sm d-block color-gray-6 m-t-xs">{{ $t("base.d6") }}(USDT)</text>

								<!-- <text class="fn-20 d-block color-light m-t-md">{{ filterMoney(account.funds_account_btc) }} BTC</text> -->
								<!-- fn-sm d-block m-t-xs color-gray-6 -->

							</view>
						</view>

						<view class="h-30 p-x-xs d-flex justify-between align-center">
							<van-field :value="searchText" @input="searchText = $event.detail" left-icon="search"
								:placeholder="$t('base.d9')" input-class="fn-12 "
								class="flex-fill color-gray-6 rounded-md pos fn-12 m-r-lg" style="padding-left: 0" />
							<van-checkbox :value="hide" @change="hide = !hide" icon-size="16">
								<text class="color-gray-6 m-r-xs">{{ $t("base.e0") }} 0 {{ $t("base.e1") }}</text>
							</van-checkbox>
						</view>
						<view class="title_Currency">
							<view style="width: 190rpx;text-align: center;">{{ $t("base.h2") }}</view>
							<view class="text_width text_align">{{ $t("base.b9") }}</view>
							<view class="text_width text_align">{{ $t("base.e2") }}</view>
							<view class="text_align">{{ $t("base.e3") }}(USD)</view>
						</view>
						<router-link :to="{ path: '/pages/assets/bill', query: { coin_name: item.coin_name },}" v-show="ifShow(item)" 
						class="p-t-xs d-block rounded-md text-none" v-for="(item, index) in list" :key="index">
							<!-- <view class="m-x-md d-flex justify-between align-center p-b-xs">
								<view>
									<img :src="item.image" class="w-20 h-20 rounded-max fn-middle" />
									<text class="fn-18 fn-bold color-light fn-middle p-l-sm">{{
                      item.coin_name
                    }}</text>
								</view>
								<view>
                    <text class="fn-lg color-light fn-middle">{{
                      add(
                        item.usable_balance,
                        item.freeze_balance,
                        item.priceDecimals
                      )
                    }}</text>
                    <van-icon
                      class="p-l-xs fn-middle"
                      name="arrow"
                      size="16"
                      color="#646566"
                    />
                  </view>
							</view> -->
							<!-- <view class="p-x-md d-flex justify-between align-center">
								<view class="w-4/12">
									<p class="color-gray-6" style="padding: 5px 0">
										{{ $t("base.b9") }}
									</p>
									<p class="fn-lg color-light overflow-scroll">{{ (item.usable_balance).toFixed(2) }}
									</p>
								</view>
								<view class="w-4/12 fn-center">
									<p class="color-gray-6" style="padding: 5px 0">
										{{ $t("base.e2") }}
									</p>
									<p class="fn-lg color-light overflow-scroll">{{ item.freeze_balance }}</p>
								</view>
								<view class="w-4/12 fn-right">
									<p class="color-gray-6" style="padding: 5px 0">
										{{ $t("base.e3") }}(USD)
									</p>
									<p class="fn-lg color-light overflow-scroll">
										{{ omitTo(item.usd_estimate, item.priceDecimals) | priceDecimals}}
									</p>
								</view>
							</view> -->
							<view class="Currency_content">
								<view style="width: 200rpx;" class="m-title">
									<img :src="item.image" class="w-20 h-20 rounded-max fn-middle"/>
									<text class="fn-18 fn-bold color-light fn-middle p-l-sm">{{item.coin_name}}
									</text>
								</view>
								<view class="text_width text_align m-title" style="color:#000;word-wrap: break-word;">
									{{ omitTo(item.usable_balance,2) }}
								</view>
								<view class="text_width text_align m-title" style="color:#000;word-wrap: break-word;">
									{{ item.freeze_balance }}
								</view>
								<view class="text_width text_align m-title" style="color:#000;word-wrap: break-word;">
									{{ omitTo(item.usd_estimate, item.priceDecimals) | priceDecimals}}
								</view>
							</view>
							<view class="h-4 m-t-xs"></view>
						</router-link>
					</view>
					<!-- </van-tab>

			<van-tab :title="$t('base.e4')" :name="1" class="p-t-md"> -->
					<view class="m-x-md" v-if="tabActive==1" style="margin-top: 15px;margin-bottom: 20px;">
						<view class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''"
							style="position: relative">
							<view class="fn-sm d-flex justify-between color-gray-6 m-t-xs">
								<span> USDT </span>
								<v-link class="color-buy" to="/pages/assets/account-bill">{{ $t("base.e4") }}
								<van-icon class="fn-middle" name="arrow" size="16" /></v-link>
							</view>
							<span class="fn-20 d-block color-light m-t-md">{{ filterMoney(account.contract_account_usd)}}{{ account.symbol }}</span>
							<view class="d-flex justify-between m-t-xs">
								<v-link to="/pages/transfer/index" class="d-flex">
									<view class="m-r-xs align-center">
										<img :src="$localImgUrl('fill4.png')" alt="" class="h-18" />
									</view>
									<!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> -->
									<text class="color-light fn-middle">{{$t("base.d8")}}</text>
								</v-link>
							</view>
						</view>
					</view>
					<view class="m-x-md" v-if="tabActive==2">
						<view class="bgb3 p-x-md p-y-xs m-y-xs rounded-ms" :class="theme == 'light' ? 'bgb3-white' : ''"
							style="position: relative">
							<view class="fn-sm d-flex justify-between color-gray-6 m-t-xs">
								<span> USDT </span>
								<v-link class="color-buy" to="/pages/assets/currency-bill">{{ $t("otc.d5") }}
									<van-icon class="fn-middle" name="arrow" size="16" /></v-link>
							</view>

							<text class="d-flex m-t-ms fn-12">
								<span class="fn-20 color-light m-r-xs">{{ filterMoney(otc.otc_usable_balance)}}{{ account.symbol }}</span>
								({{$t('contract.e4')}})
							</text>
							<text class="d-flex m-t-ms fn-12">
								<span class="fn-20 color-light m-r-xs">{{ filterMoney(otc.otc_freeze_balance)}}{{ account.symbol }}</span>
								({{$t('otc.d6')}})
							</text>
							<view class="d-flex justify-between m-t-xs">
								<v-link to="/pages/transfer/index" class="d-flex">
									<view class="m-r-xs align-center">
										<img :src="$localImgUrl('fill4.png')" alt="" class="h-18" />
									</view>
									<!-- <van-icon class="color-theme-1 fn-26 fn-middle m-r-xs" name="exchange" /> -->
									<text class="color-light fn-middle">{{$t("base.d8")}}</text>
								</v-link>
							</view>
						</view>
					</view>
					<!-- </van-tab>
			</van-tabs> -->
				</view>
			</scroll-view>
		</view>
		<van-popup :show="showCenter" @close="showCenter = false" round position="bottom" custom-style="height: 49%;" >
			<view class="popup_box">
				<v-link :to="ProfileDetail.primary_status!=1?'/pages/auth/index':'/pages/assets/recharge'" class="popup_box_a">
					<view class="popup_box_a_box1">
						<view class="popup_box_a_img">
							<image src="@/assets/img/mine3.png" style="width: 20px;height: 20px;"></image>
						</view>
						<view style="margin-left: 10px;">{{$t("base.b5")}}</view>
					</view>
					<view><image src="@/assets/img/mine9.png" style="width: 20px;height: 20px;"></image></view>
				</v-link>
				<v-link :to="ProfileDetail.status==1?'/pages/auth/index':(ProfileDetail.status==2?'/pages/assets/draw':'/pages/auth/senior')" 
				class="popup_box_a">
					<view class="popup_box_a_box1">
						<view class="popup_box_a_img">
							<image src="@/assets/img/mine4.png" style="width: 20px;height: 20px;"></image>
						</view>
						<view style="margin-left: 10px;">{{$t("base.b6")}}</view>
					</view>
					<view><image src="@/assets/img/mine9.png" style="width: 20px;height: 20px;"></image></view>
				</v-link>
				<v-link to="/pages/transfer/index" class="popup_box_a">
					<view class="popup_box_a_box1">
						<view class="popup_box_a_img">
							<image src="@/assets/img/mine5.png" style="width: 20px;height: 20px;"></image>
						</view>
						<view style="margin-left: 10px;">{{$t("base.d8")}}</view>
					</view>
					<view><image src="@/assets/img/mine9.png" style="width: 20px;height: 20px;"></image></view>
				</v-link>
				<v-link :to="{path: '/pages/exchange/his'}" class="popup_box_a"
				style="border: 0px;">
					<view class="popup_box_a_box1">
						<view class="popup_box_a_img">
							<image src="@/assets/img/mine6.png" style="width: 20px;height: 20px;"></image>
						</view>
						<view style="margin-left: 10px;">{{$t("base.h1")}}</view>
					</view>
					<view><image src="@/assets/img/mine9.png" style="width: 20px;height: 20px;"></image></view>
				</v-link>
			</view>
		</van-popup>
	</v-page>
</template>
<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	import Wallet from "@/api/wallet";
	import math from "@/utils/class/math.js";
	import Profile from "@/api/profile";
	import Contract from "@/api/contract.js";
	import Home from "@/api/home";
	export default {
		name: "mine",
		data() {
			return {
				account: {},
				list: [],
				tabActive: 0, // 切换选择
				searchText: "",
				hide: false,
				show: false,
				accountDetail: {},
				scrollTop: 0,
				refreshing: false,
				otc: {},
				ProfileDetail: {},
				user_auth_level: 0,
				marketList: [],
				showCenter: false,
			};
		},
		computed: {
			...mapState({
				hideMoney: "hideMoney",
				theme: "theme",
			}),
		},
		props: {
			isShow: {
				default: true,
				type: Boolean,
				required: false,
			},
			refresherEnabled: {
				default: true,
				required: false,
				type: Boolean
			},
			tabChange: {
				type: Function,
				default: null
			}
		},
		watch: {
			isShow(n, o) {
				if (n) {
					this.upDateData();
					this.getAuthInfo();
				}
			},
			tabActive() {
				this.upDateData();
				this.getAuthInfo();
			}
		},
		filters: {
			priceDecimals(val) {
				// console.info(val)
				return (parseFloat(val)).toFixed(2)
			}
		},
		methods: {
			goExchange() {
				this.show = false;
				this.tabChange('exchange-operation')
			},
			onRefresh() {
				if (this.refreshing) return;
				this.refreshing = true;
				this.fundAccount()
				this.personalAssets()
				this.getAuthInfo();
				setTimeout(() => {
					this.refreshing = false;
				}, 1000)
			},
			scroll(event) {
				this.scrollTop = event.detail.scrollTop
			},
			omitTo: math.omitTo,
			// 计算和
			add: math.add,
			...mapActions({
				setHide: "hideMoney",
			}),
			filterMoney(val, type) {
				if (this.hideMoney) return "******";
				if (type) {
					return this.omitTo(val, 8);
				} else {
					return this.omitTo(val, 2);
				}

			},

			ifShow(item) {
				// 搜索过滤
				let show =
					item.coin_name
					.toLocaleLowerCase()
					.indexOf(this.searchText.toLocaleLowerCase()) != -1;
				if (!this.hide) return true && show;

				// 0余额资金过滤
				let hasMoney =
					this.add(item.usable_balance, item.freeze_balance, item.priceDecimals) *
					1 !=
					0;
				return hasMoney && show;
			},
			fundAccount() {
				Wallet.fundAccount().then((res) => {
					this.list = res.data.list;
					this.otc = res.data
				});
			},
			personalAssets(e) {
				Wallet.personalAssets().then((res) => {
					this.account = res.data;
				});
			},
			// 获取合约列表
			accounts() {
				Contract.contractAccount().then((res) => {
					this.accountDetail = res.data;
				});
			},
			changtTab($ev) {
				this.tabActive = $ev.detail.name;
				this.upDateData();
			},
			// 刷新数据
			upDateData() {
				if (this.tabActive == 1) {
					this.accounts();
				} else if (this.tabActive == 0) {
					this.personalAssets();
					this.fundAccount();
					this.getAuthInfo();
				} else {
					this.fundAccount();
				}
			},
			getAuthInfo() {
				Profile.getAuthInfo().then(res => {
					this.ProfileDetail = res.data;
					this.user_auth_level = res.data.primary_status
					// console.log(this.ProfileDetail, 11111);
				})
			},
			indexData() {
				let data = {};
				let ajax = Home.indexList(data, { loading: true });
				ajax.then((res) => {
					this.marketList = res.data.marketList;
				}).catch(() => {});
			},
			showPopup() {
				this.showCenter = true;
			},
		},
		mounted() {
			this.show = true;
			this.indexData();
		},
		created() {
			this.upDateData();
		},
		onShow() {
			location.reload()
		}
	};
</script>

<style lang="scss" scoped>
	.tabs-main {
		::v-deep.van-tabs {
			width: 100%;
		}

		::v-deep.van-tabs__wrap,
		::v-deep.van-tabs__content {
			// width: 100%;
		}

		::v-deep.van-tabs__content {
			flex: 1;
			overflow: hidden;
		}

		::v-deep.van-pull-refresh {
			height: calc(100vh - 200px);
			overflow-y: auto;
		}

		::v-deep.van-cell {
			background: transparent;

			&::after {
				border-width: 0;
			}
		}

		::v-deep .van-cell__left-icon {
			color: $white;
		}
	}

	.bgb3 {
		background: url(../../static/img/bgb3.png) no-repeat;
		background-size: 100% auto;
		background-position: right bottom;

		&.bgb3-white {
			background-image: url(../../static/img/light/bgb3.png);
		}
	}

	.bgb4 {
		background: url(../../static/img/bgb4.png) no-repeat;
		background-size: 100% auto;
		background-position: right bottom;
	}

	.pos {
		position: relative;
	}

	.posa {
		position: absolute;
	}

	.rounded-ms {
		border-radius: 10px;
	}

	.p-y-xxs {
		padding: 5px 0;
	}

	.w-33 {
		width: 30%;
	}

	.w-50 {
		width: 50%;
	}

	.wallet {
		border-radius: 30px;
	}

	.text-none {
		text-decoration: none;
	}

	::v-deep .van-cell {
		background-color: $panel-3;
	}

	::v-deep .van-cell {
		background-color: transparent;
		padding: 0 10px;
	}
	.Currency_content{
		display: flex;
		justify-content: space-around;
		margin: 0px 10px;
	}
	.text_width{
		width: 140rpx;
	}
	.text_align{
		text-align: right;
	}
	.title_Currency{
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}
	.w-33A {
	    width: auto;
			padding: 5px 20px;
	}
	.col-fff{
		// color: #1684fc;
		color: #000;
		font-weight: bold;
		border-radius: 20px;
		background-color: #fff;
	}
	.col-fff::before{
		content: '';
		width: 24px;
		height: 24px;
		background-image: url("../../assets/img/mine7.png");
		background-size: 24px;
	}
	
	.col-fff1{
		// color: #1684fc;
		color: #000;
		font-weight: bold;
		border-radius: 20px;
		background-color: #fff;
	}
	.col-fff1::before{
		content: '';
		width: 24px;
		height: 24px;
		background-image: url("../../assets/img/mine8.png");
		background-size: 24px;
	}
	
	::v-deep ::-webkit-scrollbar {
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
	.popup_box{
		padding: 20px;
		display: block;
		
		.popup_box_a{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ECF1FF;
			padding: 15px 0px;
			align-items: center;
			
			.popup_box_a_box1{
				display: flex;
				align-items: center;
				
				.popup_box_a_img{
					height: 20px;
					padding: 10px;
					border-radius: 50px;
					background-color: #ECF1FF;
				}
			}
		}
	}
</style>