461 lines
11 KiB
Vue
461 lines
11 KiB
Vue
<template>
|
||
<div class="wallet">
|
||
<a-breadcrumb separator=">">
|
||
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
||
<a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
|
||
<a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
|
||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||
</a-breadcrumb>
|
||
<div class="top">
|
||
<div class="mywallet">
|
||
<div class="topinfo">
|
||
<div class="title">我的钱包</div>
|
||
|
||
<div class="topbtn" @click="navto(2)">立即提现</div>
|
||
<div class="topbtn topbtn1" @click="navto(3)">提现记录</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="accounts">
|
||
<div class="left">
|
||
<img src="@/static/images/account.png" alt="" class="pic" />
|
||
<div class="texts">
|
||
<div>绑定用户</div>
|
||
<div class="num">3</div>
|
||
</div>
|
||
</div>
|
||
<div class="linecolumn"></div>
|
||
<div class="left">
|
||
<img src="@/static/images/money.png" alt="" class="pic" />
|
||
<div class="texts">
|
||
<div>账户余额</div>
|
||
<div class="num">
|
||
<span class="moneyicon" v-if="ifchina">￥</span>
|
||
<span class="moneyicon" v-else> $ </span>
|
||
880
|
||
<span class="float">.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="add" @click="navto(1)">
|
||
<img src="@/static/images/walletadd.png" alt="" class="icon" />
|
||
<div>添加新的账户</div>
|
||
</div>
|
||
</div>
|
||
<div class="accountlist" v-if="ifchina && !ifmingxi">
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img src="@/static/images/bank.png" alt="" class="icon" />
|
||
<span class="accounttype">银行卡</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletzfb.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">支付宝</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletweixin.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">微信</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
</div>
|
||
<div class="accountlist" v-if="!ifchina && !ifmingxi">
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img src="@/static/images/foreignbank.png" alt="" class="icon" />
|
||
<span class="accounttype">银行卡</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img src="@/static/images/paypi.png" alt="" class="icon icon1" />
|
||
<span class="accounttype">paypal</span>
|
||
</div>
|
||
|
||
<div class="btns">
|
||
<div class="btn">修改</div>
|
||
<div class="btn1">删除</div>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
</div>
|
||
<div class="mingxilist">
|
||
<div class="tabs">
|
||
<div class="beforetab">明细查询</div>
|
||
</div>
|
||
<div>
|
||
<table class="table">
|
||
<thead>
|
||
<tr class="head">
|
||
<th>日期</th>
|
||
<th>类型</th>
|
||
<th>金额</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyreverse">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
<tr>
|
||
<td >2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2020-08-13 13:54</td>
|
||
<td>直播收入</td>
|
||
<td class="moneyadd">+￥320</td>
|
||
<td>查看详情</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<NavBottom class="navbottom"></NavBottom>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent } from "vue";
|
||
import NavBottom from "@/components/NavBottom.vue";
|
||
import router from '@/router';
|
||
export default defineComponent({
|
||
name: "Wallet",
|
||
components: {
|
||
NavBottom,
|
||
},
|
||
setup() {
|
||
const ifchina = false;
|
||
const ifmingxi = true;
|
||
function navto(index: number){
|
||
let url = "";
|
||
switch (index){
|
||
case 1: url = "/mine/addaccount"; break;
|
||
case 2: url = "/mine/cashout"; break;
|
||
}
|
||
router.push({
|
||
path: url
|
||
})
|
||
}
|
||
return {
|
||
ifchina,
|
||
ifmingxi,
|
||
navto
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.wallet ::v-deep() .ant-breadcrumb > span:last-child {
|
||
color: #08ae98;
|
||
}
|
||
.wallet {
|
||
.mywallet {
|
||
width: 761px;
|
||
margin-right: 18px;
|
||
background: white;
|
||
border-radius: 17px;
|
||
}
|
||
.top {
|
||
// width: 761px;
|
||
// height: 228px;
|
||
margin-top: 23px;
|
||
display: flex;
|
||
.topinfo {
|
||
display: flex;
|
||
}
|
||
.title {
|
||
color: #111111;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
padding-left: 40px;
|
||
padding-top: 40px;
|
||
margin-right: 506px;
|
||
}
|
||
.topbtn {
|
||
width: 57px;
|
||
height: 18px;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
color: #08ae98;
|
||
font-weight: 500;
|
||
border: 1px solid #08ae98;
|
||
border-radius: 3px;
|
||
margin-top: 35px;
|
||
margin-right: 12px;
|
||
}
|
||
.topbtn1 {
|
||
color: #d22c2e;
|
||
border: 1px solid #d22c2e;
|
||
}
|
||
.line {
|
||
width: 682px;
|
||
height: 1px;
|
||
background: #eeeeee;
|
||
margin: 0 auto;
|
||
margin-top: 11px;
|
||
}
|
||
.accounts {
|
||
width: 682px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
padding-bottom: 10px;
|
||
.left {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #111111;
|
||
font-size: 11px;
|
||
.texts {
|
||
margin: auto 0;
|
||
margin-left: 23px;
|
||
.moneyicon {
|
||
font-size: 14px;
|
||
}
|
||
.float {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
.pic {
|
||
width: 98px;
|
||
height: 100px;
|
||
margin: auto 0;
|
||
}
|
||
.num {
|
||
color: #08ae98;
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
.linecolumn {
|
||
width: 1px;
|
||
height: 142px;
|
||
background: #eeeeee;
|
||
margin: auto 0;
|
||
}
|
||
}
|
||
.add {
|
||
width: 371px;
|
||
height: 228px;
|
||
|
||
background: #ffffff;
|
||
border-radius: 17px;
|
||
color: #08ae98;
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
margin-left: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
text-align: center;
|
||
.icon {
|
||
width: 31px;
|
||
height: 31px;
|
||
margin: 0 auto;
|
||
margin-bottom: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.accountlist {
|
||
margin-top: 17px;
|
||
display: flex;
|
||
.accountitem {
|
||
width: 372px;
|
||
height: 226px;
|
||
background: white;
|
||
border-radius: 17px;
|
||
margin-left: 17px;
|
||
.hostinfo {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 38px;
|
||
.icon {
|
||
width: 47px;
|
||
height: 29px;
|
||
margin-right: 11px;
|
||
}
|
||
.icon1 {
|
||
width: 29px !important;
|
||
height: 29px !important;
|
||
}
|
||
.accounttype {
|
||
font-size: 13px;
|
||
color: #111111;
|
||
font-weight: 500;
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
}
|
||
.btn {
|
||
width: 46px;
|
||
height: 23px;
|
||
border: 1px solid #febd3b;
|
||
border-radius: 3px;
|
||
color: #febd3b;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
margin-right: 11px;
|
||
}
|
||
.btn1 {
|
||
width: 46px;
|
||
height: 23px;
|
||
border: 1px solid #d12c2e;
|
||
border-radius: 3px;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
color: #d12c2e;
|
||
}
|
||
}
|
||
.zhanghao {
|
||
color: #111111;
|
||
font-size: 11px;
|
||
margin-top: 119px;
|
||
margin-left: 34px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mingxilist {
|
||
width: 1150px;
|
||
height: 533px;
|
||
background: white;
|
||
border-radius: 18px;
|
||
margin-top: 18px;
|
||
.tabs {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
padding-top: 35px;
|
||
padding-left: 40px;
|
||
}
|
||
.beforetab {
|
||
color: #121212;
|
||
font-size: 13px;
|
||
line-height: 35px;
|
||
font-weight: bold;
|
||
margin-right: 57px;
|
||
}
|
||
}
|
||
.table {
|
||
width: 1150px;
|
||
height: 365px;
|
||
text-align: center;
|
||
color: #343434;
|
||
font-size: 12px;
|
||
margin-top: 13px;
|
||
tr {
|
||
width: 1150px;
|
||
height: 40px;
|
||
// border-bottom: 1px solid red;
|
||
}
|
||
tr:nth-child(even) {
|
||
//偶数行
|
||
background: #f7fcfc;
|
||
}
|
||
.head {
|
||
width: 1150px;
|
||
height: 43px;
|
||
color: white;
|
||
background: #08ae98;
|
||
}
|
||
.moneyadd {
|
||
color: #08ae98;
|
||
}
|
||
.moneyreverse {
|
||
color: #d22d2e;
|
||
}
|
||
}
|
||
.navbottom {
|
||
margin-top: 160px;
|
||
}
|
||
}
|
||
</style> |