theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

我的钱包 关于 列表

Browse Source
This commit is contained in:
asd
2020-09-29 16:51:42 +08:00
parent 8bf0188105
commit db2eec98a0
32 changed files with 2158 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/views/mine/Aboutus.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<div class="aboutus">
<div class="tabs">
<div @click="tabchange(1)">
<div :class="tabindex==1?'active':''">服务条款</div>
<div :class="tabindex==1?'lineactive':''"></div>
</div>
<div @click="tabchange(2)">
<div :class="tabindex==2?'active':''">隐私政策</div>
<div :class="tabindex==2?'lineactive':''"></div>
</div>
<div @click="tabchange(3)">
<div :class="tabindex==3?'active':''">意见反馈</div>
<div :class="tabindex==3?'lineactive':''"></div>
</div>
</div>
<div class="line"></div>
<div class="content" v-if="tabindex==1|| tabindex==2">
<div class="title">关于Beelink</div>
<div>
欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
</div>
<div class="title">关于Beelink</div>
<div>
欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
</div>
<div class="title">关于Beelink</div>
<div>
欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
</div>
<div class="title">关于Beelink</div>
<div>
欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
</div>
</div>
<div v-else>
<div class="fankui">
<div class="label">意见反馈</div>
<div>
<a-textarea placeholder="textarea with clear icon" allow-clear @change="onChange" class="fankuicontent"/>
</div>
</div>
<div class="sub">提交反馈</div>
</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Aboutus",
components: {
NavBottom,
},
setup() {
const tabindex=ref(1)
const tabchange: (e: number) => void = (e: number) => {
console.log(e);
tabindex.value=e
};
return {
tabchange,
tabindex
};
},
});
</script>
<style lang="scss" scoped>
.aboutus {
width: 1150px;
margin: 0 auto;
background: white;
border-radius: 17px;
color: #111111;
font-size: 13px;
.tabs {
padding-top: 40px;
padding-left: 43px;
width: 265px;
font-weight: bold;
display: flex;
justify-content: space-between;
div {
cursor: pointer;
}
.active {
color: #08ae98;
}
.lineactive{
width: 57px;
height: 1px;
background: #08AE98;
position: relative;
top:11px;
}
}
.line {
width: 1070px;
height: 1px;
background: #eeeeee;
margin-top: 11px;
}
.content {
width: 1069px;
margin: 0 auto;
margin-top: 27px;
}
.title {
margin-top: 40px;
}
.fankui{
width: 1070px;
margin:0 auto;
margin-top: 35px;
display:flex;
.label{
color: #808080;
font-size:11px;
margin-right: 28px;
}
}
.fankuicontent{
width: 359px;
height:171px
}
.sub{
width:63px;
height: 23px;
background:#08AE98;
border-radius: 3px;
color: white;
font-size: 10px;
line-height: 23px;
text-align: center;
margin-left:40px;
margin-bottom: 110px;
}
.navbottom {
padding-top: 68px;
padding-bottom: 28px;
}
}
</style>

355
src/views/mine/Addaccount.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<div class="cashout">
<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="mingxilist">
<div class="tabs">
<div class="beforetab">新增账户</div>
</div>
<div class="line"></div>
<div class="choose">
<div class="label">选择账户</div>
<!-- <a-radio></a-radio> -->
<div v-if="ifchina">
<a-radio-group
name="radioGroup"
v-model="paytype"
class="accountlist"
@change="onChange"
:default-value="1"
>
<a-radio :value="1">
<img src="@/static/images/bank.png" alt="" class="icon icon1" />
<span>银行卡</span>
</a-radio>
<a-radio :value="2">
<img src="@/static/images/walletzfb.png" alt="" class="icon" />
<span>支付宝</span>
</a-radio>
<a-radio :value="3">
<img src="@/static/images/walletweixin.png" alt="" class="icon" />
<span>微信</span>
</a-radio>
</a-radio-group>
</div>
<div v-else>
<a-radio-group
name="radioGroup"
v-model="paytypeforign"
class="accountlist"
@change="onChange1"
:default-value="1"
>
<a-radio :value="1">
<img
src="@/static/images/foreignbank.png"
alt=""
class="icon icon1"
/>
<span>银行卡</span>
</a-radio>
<a-radio :value="2">
<img src="@/static/images/paypi.png" alt="" class="icon" />
<span>payple</span>
</a-radio>
</a-radio-group>
</div>
</div>
<div class="cashoutmoney" v-if="paytype == 1 && ifchina">
<div>
<div class="infoitem">
<span class="label label1">姓名</span>
<a-input v-model="money" class="shuru" placeholder="请输入姓名" />
</div>
<div class="infoitem">
<span class="label label1">卡号</span>
<a-input
v-model="money"
class="shuru"
placeholder="请输入收款人储蓄卡号"
/>
</div>
<div class="infoitem">
<span class="label label1">开户行</span>
<a-input
v-model="money"
class="shuru shuru1"
placeholder="请输入开户行"
/>
</div>
</div>
</div>
<div class="cashoutmoney" v-if="paytype == 2 && ifchina">
<div>
<div class="infoitem">
<span class="label label1">帐号</span>
<a-input
v-model="money"
class="shuru"
placeholder="请输入支付宝账号/密码"
/>
</div>
</div>
</div>
<div class="cashoutmoney" v-if="paytype == 3 && ifchina">
<div class="label label1">扫码绑定</div>
<div class="ewmbox">
<img src="@/static/images/erweima.png" alt="" class="ewmpic" />
<div class="desc">注：</div>
<div class="desc desc1">
打开手机微信扫描左侧二维码 进行微信账户绑定
</div>
</div>
</div>
<div class="cashoutmoney" v-if="paytypeforign == 1 && !ifchina">
<div>
<div class="infoitem">
<span class="label label1">账户名</span>
<a-input v-model="money" class="shuru" placeholder="请输入姓名" />
</div>
<div class="infoitem">
<span class="label label1">银行账户</span>
<a-input
v-model="money"
class="shuru shuru2"
placeholder="请输入收款人储蓄卡号"
/>
</div>
<div class="infoitem infoitem1">
<div class="label label1 label2"> 银行BIC码 /swift code </div>
<a-input
v-model="money"
class="shuru shuru1"
placeholder="请输入开户行"
/>
</div>
</div>
</div>
<div class="cashoutmoney" v-if="paytypeforign == 2 && !ifchina">
<div>
<div class="infoitem">
<span class="label label1">帐号</span>
<a-input
v-model="money"
class="shuru"
placeholder="请输入账号"
/>
</div>
</div>
</div>
<div class="cashoutall submit">提交</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Cashout",
components: {
NavBottom,
},
setup() {
const money = ref(0);
const paytype = ref(1);
const paytypeforign = ref(1);
const onChange: (e: any) => void = (e: any) => {
console.log("radio checked", e.target.value);
paytype.value = e.target.value;
};
const onChange1: (e: any) => void = (e: any) => {
console.log("radio checked", e.target.value);
paytypeforign.value = e.target.value;
};
const ifchina = ref(false);
return {
money,
onChange,
paytype,
ifchina,
paytypeforign,
onChange1
};
},
});
</script>
<style lang="scss" scoped>
.cashout /deep/ .ant-breadcrumb > span:last-child {
color: #08ae98;
}
.cashout /deep/ .ant-radio-wrapper {
display: flex;
}
.cashout /deep/ .ant-radio-checked /deep/ .ant-radio-inner {
border-color: #08ae98 !important;
}
.cashout /deep/ .ant-radio-inner::after {
background: #08ae98 !important;
}
.cashout /deep/ .ant-radio {
// top: 43px;
}
.cashout {
.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;
.residue {
font-size: 11px;
margin: auto 0;
color: #08ae98;
position: relative;
left: -30px;
}
.topbtn {
// width: 89px;
height: 17px;
padding-left: 14px;
padding-right: 14px;
line-height: 17px;
border: 1px solid #08ae98;
border-radius: 3px;
font-size: 10px;
color: #08ae98;
font-weight: 500;
margin: auto 0;
}
.topbtn2 {
margin-left: 642px;
}
.topbtn1 {
padding-left: 9px;
padding-right: 9px;
color: #d12c2e;
border: 1px solid #d12c2e;
margin-left: 11px;
}
}
.line {
width: 1070px;
height: 1px;
background: #eeeeee;
margin: 0 auto;
margin-top: 11px;
}
.beforetab {
color: #121212;
font-size: 13px;
line-height: 35px;
font-weight: bold;
margin-right: 57px;
}
.choose {
margin-top: 28px;
margin-left: 40px;
display: flex;
.accountlist {
display: flex;
color: #404040;
font-size: 11px;
.icon {
width: 17px;
height: 17px;
margin-right: 6px;
}
.icon1 {
width: 28px;
height: 18px;
}
}
}
.label {
color: #808080;
font-size: 11px;
margin-right: 28px;
}
.label1 {
margin-left: 40px;
}
.label2{
width: 90px;
word-wrap:break-word!important
}
.cashoutmoney {
display: flex;
margin-top: 31px;
.infoitem {
margin-bottom: 28px;
}
.infoitem1{
display: flex;
}
.shuru {
width: 171px;
height: 23px;
margin-left: 30px;
}
.shuru1 {
margin-left: -15px;
}
.shuru2{
margin-left:18px
}
.ewmbox {
display: flex;
.ewmpic {
width: 114px;
height: 114px;
margin-right: 23px;
}
.desc {
color: #666666;
font-size: 10px;
// line-height: 114px;
margin: auto 0;
}
.desc1 {
width: 149px;
position: relative;
top: 10px;
}
}
}
.cashoutall {
width: 67px;
height: 23px;
line-height: 23px;
background: #08ae98;
border-radius: 3px;
color: white;
text-align: center;
margin-left: 23px;
font-weight: bold;
}
.submit {
font-size: 10px;
font-weight: 500;
position: relative;
top: 56px;
left: 20px;
}
}
.navbottom {
padding-top: 250px;
padding-bottom: 30px;
}
}
</style>

272
src/views/mine/Cashout.vue Normal file
View File

@@ -0,0 +1,272 @@
<template>
<div class="cashout">
<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="mingxilist">
<div class="tabs">
<div class="beforetab">提现到指定账户</div>
<span class="residue">余额：￥50</span>
<div class="topbtn topbtn2">提现到指定账户</div>
<div class="topbtn topbtn1">提现记录</div>
</div>
<div class="line"></div>
<div class="choose">
<div class="chooseitem">
<div class="label">选择账户</div>
<!-- <a-radio></a-radio> -->
<div class="accountlist">
<a-radio>
<div class="accountitem">
<div class="hostinfo">
<div>
<img src="@/static/images/bank.png" alt="" class="icon" />
<span class="accounttype">银行卡</span>
</div>
</div>
<div class="zhanghao">账号：6217 **** **** **** 175</div>
</div>
</a-radio>
<a-radio>
<div class="accountitem">
<div class="hostinfo">
<div>
<img
src="@/static/images/walletzfb.png"
alt=""
class="icon icon1"
/>
<span class="accounttype">支付宝</span>
</div>
</div>
<div class="zhanghao">账号：6217 **** **** **** 175</div>
</div>
</a-radio>
<a-radio>
<div class="accountitem">
<div class="hostinfo">
<div>
<img
src="@/static/images/walletweixin.png"
alt=""
class="icon icon1"
/>
<span class="accounttype">微信</span>
</div>
</div>
<div class="zhanghao">账号：6217 **** **** **** 175</div>
</div>
</a-radio>
</div>
</div>
<div class="cashoutmoney">
<div class="label">提现金额</div>
<div class="moneynum">
<a-input v-model="money" class="shuru" @change="moneychange" />
<div>￥</div>
<div class="cashoutall">全部金额</div>
<div class="desc">注：每笔提现收取0.1%服务费，最低￥0.1</div>
</div>
</div>
<div class="ale">*您的余额只有￥50，最低提现金额￥100</div>
</div>
<div class="cashoutall submit">全部金额</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Cashout",
components: {
NavBottom,
},
setup() {
const money = ref(0);
const moneychange: (e: number) => void = (e: number) => {
console.log(e);
};
return {
money,
moneychange,
};
},
});
</script>
<style lang="scss" scoped>
.cashout /deep/ .ant-breadcrumb > span:last-child {
color: #08ae98;
}
.cashout /deep/ .ant-radio-wrapper {
display: flex;
}
.cashout /deep/ .ant-radio {
top: 43px;
}
.cashout {
.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;
.residue {
font-size: 11px;
margin: auto 0;
color: #08ae98;
position: relative;
left: -30px;
}
.topbtn {
// width: 89px;
height: 17px;
padding-left: 14px;
padding-right: 14px;
line-height: 17px;
border: 1px solid #08ae98;
border-radius: 3px;
font-size: 10px;
color: #08ae98;
font-weight: 500;
margin: auto 0;
}
.topbtn2 {
margin-left: 642px;
}
.topbtn1 {
padding-left: 9px;
padding-right: 9px;
color: #d12c2e;
border: 1px solid #d12c2e;
margin-left: 11px;
}
}
.line {
width: 1070px;
height: 1px;
background: #eeeeee;
margin: 0 auto;
margin-top: 11px;
}
.beforetab {
color: #121212;
font-size: 13px;
line-height: 35px;
font-weight: bold;
margin-right: 57px;
}
.choose {
margin-top: 28px;
margin-left: 40px;
.label {
color: #808080;
font-size: 11px;
margin-right: 28px;
}
.chooseitem {
display: flex;
margin-bottom: 34px;
.accountlist {
display: flex;
.accountitem {
// width: 200px;
padding-bottom: 16px;
padding-right: 20px;
border: 1px solid #dcdfe0;
background: white;
border-radius: 17px;
margin-left: 17px;
margin-right: 46px;
.hostinfo {
display: flex;
padding-top: 17px;
.icon {
width: 47px;
height: 29px;
margin-right: 11px;
margin-left: 17px;
}
.icon1 {
width: 29px !important;
height: 29px !important;
}
.accounttype {
font-size: 13px;
color: #111111;
font-weight: 500;
}
}
.zhanghao {
color: #111111;
font-size: 10px;
margin-top: 38px;
margin-left: 17px;
}
}
}
}
.cashoutmoney {
display: flex;
.moneynum {
display: flex;
font-size: 11px;
line-height: 23px;
color: #808080;
.shuru {
width: 171px;
height: 23px;
margin-right: 8px;
}
.desc{
margin-left:17px
}
}
}
}
.cashoutall {
width: 67px;
height: 23px;
line-height: 23px;
background: #08ae98;
border-radius: 3px;
color:white;
text-align: center;
margin-left: 23px;
font-weight: bold;
}
.ale{
color:#D12C2E;
font-size: 10px;
position: relative;
left: 80px;
top: 11px;
}
.submit{
font-size:10px;
font-weight: 500;
position: relative;
top: 56px;
left: 20px;
}
}
.navbottom {
padding-top: 250px;
padding-bottom: 30px;
}
}
</style>

148
src/views/mine/Cashoutdetail.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<div class="transaction">
<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="mingxilist">
<div class="tabs">
<div class="beforetab">提现记录详情</div>
</div>
<div class="detail">
<div class="infoitem">
<div class="left">提现金额</div>
<div class="right">￥30.00</div>
</div>
<div class="infoitem">
<div class="left">到账金额</div>
<div class="right">￥30.00</div>
</div>
<div class="infoitem">
<div class="left">手续费</div>
<div class="right">￥30.00</div>
</div>
<div class="infoitem">
<div class="left">提现状态</div>
<div class="right">失败</div>
</div>
<div class="infoitem">
<div class="left">原因描述</div>
<div class="right">提交账户出错</div>
</div>
<div class="infoitem">
<div class="left">流水号</div>
<div class="right">126545654561656515616256565646556</div>
</div>
<div class="infoitem">
<div class="left">名称</div>
<div class="right">余额提现</div>
</div>
<div class="infoitem">
<div class="left">日期</div>
<div class="right">2020-08-17 14:23:20</div>
</div>
<div class="infoitem">
<div class="left">收款账户</div>
<div class="right">储蓄卡 6217 **** 264</div>
</div>
<div class="btns">
<div class="back">返回</div>
<div class="back shensu">申诉</div>
</div>
</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Cashoutdetail",
components: {
NavBottom
},
setup() {
return {
};
},
});
</script>
<style lang="scss" scoped>
.transaction /deep/ .ant-breadcrumb > span:last-child {
color: #08ae98;
}
.transaction{
.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;
}
}
.detail{
margin-top: 34px;
.infoitem{
width: 310px;
display: flex;
justify-content: space-between;
color: #404040;
font-size: 12px;
margin-bottom: 40px;
margin-left: 63px;
.left{
color: #808080;
}
.right{
width: 225px;
}
}
.btns{
display: flex;
}
.back{
width: 63px;
height:23px;
background: #08AE98;
font-size: 10px;
color: white;
text-align:center;
line-height: 23px;
border-radius: 3px;
margin-top: 57px;
margin-left: 63px;
}
.shensu{
background:#D22C2E;
}
}
.navbottom{
padding-top: 75px;
padding-bottom: 30px;
}
}
</style>

150
src/views/mine/Liststatistic.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div>
<div class="lists">
<div class="listitem">
<div class="top">
<img src="@/static/images/zhibotjicon.png" alt="" class="icon" />
<span>直播列表</span>
</div>
<div class="mid">
<div>
<div class="data">
<div class="label">直播课程</div>
<div class="right">15</div>
</div>
<div class="data">
<div class="label">直播课程</div>
<div class="right">15</div>
</div>
<div class="data">
<div class="label">直播课程</div>
<div class="right">15</div>
</div>
<img src="@/static/images/zhibotj.png" alt="" class="zhuzi" />
</div>
</div>
</div>
<div class="listitem">
<div class="top">
<img src="@/static/images/shipintjicon.png" alt="" class="icon" />
<span class="label1">视频列表</span>
</div>
<div class="mid">
<div>
<div class="data">
<div class="label">发布视频</div>
<div class="right">15</div>
</div>
<div class="data">
<div class="label">总观看数</div>
<div class="right">15</div>
</div>
<div class="data">
<div class="label">平均得分</div>
<div class="right">15</div>
</div>
<img src="@/static/images/shipintj.png" alt="" class="zhuzi" />
</div>
</div>
</div>
<div class="listitem">
<div class="top">
<img src="@/static/images/dingyuetjicon.png" alt="" class="icon" />
<span class="label2">订阅列表</span>
</div>
<div class="mid">
<div>
<div class="data">
<div class="label">订阅人数</div>
<div class="right">15</div>
</div>
<img src="@/static/images/dingyuetj.png" alt="" class="zhuzi zhuzi1" />
</div>
</div>
</div>
</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Liststatistic",
components: {
NavBottom
},
setup() {
return {};
},
});
</script>
<style lang="scss" scoped>
.lists {
font-size: 11px;
color: #111111;
display: flex;
.listitem {
width: 372px;
height: 256px;
background: white;
border-radius: 17px;
// padding-bottom: 17px;
margin-right: 17px;
.top {
width: 292px;
margin: 0 auto;
border-bottom: 1px solid #eeeeee;
padding-top: 34px;
padding-bottom: 12px;
color: #08ae98;
font-size: 13px;
font-weight: bold;
margin-bottom: 28px;
.label1{
color: #D12C2E;
}
.label2{
color: #F4C85E;
}
.icon {
width: 18px;
height: 17px;
margin-right: 6px;
}
}
.mid {
.data {
width: 292px;
margin: 0 auto;
display: flex;
margin-bottom: 28px;
.label {
margin-right: 18px;
}
}
.zhuzi {
width: 170px;
height: 85px;
float: right;
position: relative;
top: -69px;
right: 34px;
}
.zhuzi1{
top: 28px;
}
}
}
}
.navbottom {
margin-top: 250px;
// margin-bottom: 28px;
}
</style>

157
src/views/mine/Transaction.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div class="transaction">
<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="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>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Transaction",
components: {
NavBottom
},
setup() {
return {
};
},
});
</script>
<style lang="scss" scoped>
.transaction /deep/ .ant-breadcrumb > span:last-child {
color: #08ae98;
}
.transaction{
.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{
padding-top: 75px;
padding-bottom: 30px;
}
}
</style>

123
src/views/mine/Transactiondetail.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div class="transaction">
<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="mingxilist">
<div class="tabs">
<div class="beforetab">交易明细详情</div>
</div>
<div class="detail">
<div class="infoitem">
<div class="left">金额</div>
<div class="right">￥30.00</div>
</div>
<div class="infoitem">
<div class="left">类型</div>
<div class="right">收入</div>
</div>
<div class="infoitem">
<div class="left">流水号</div>
<div class="right">126545654561656515616256565646556</div>
</div>
<div class="infoitem">
<div class="left">日期</div>
<div class="right">2020-08-17 14:23:20</div>
</div>
<div class="infoitem">
<div class="left">来源</div>
<div class="right">直播收益—英语三级A1教学</div>
</div>
<div class="back">返回</div>
</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Transactiondetail",
components: {
NavBottom
},
setup() {
return {
};
},
});
</script>
<style lang="scss" scoped>
.transaction /deep/ .ant-breadcrumb > span:last-child {
color: #08ae98;
}
.transaction{
.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;
}
}
.detail{
margin-top: 34px;
.infoitem{
width: 310px;
display: flex;
justify-content: space-between;
color: #404040;
font-size: 12px;
margin-bottom: 40px;
margin-left: 63px;
.left{
color: #808080;
}
.right{
width: 225px;
}
}
.back{
width: 63px;
height:23px;
background: #08AE98;
font-size: 10px;
color: white;
text-align:center;
line-height: 23px;
border-radius: 3px;
margin-top: 57px;
margin-left: 63px;
}
}
.navbottom{
padding-top: 75px;
padding-bottom: 30px;
}
}
</style>

449
src/views/mine/Wallet.vue Normal file
View File

@@ -0,0 +1,449 @@
<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">立即提现</div>
<div class="topbtn topbtn1">提现记录</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">
<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, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
name: "Wallet",
components: {
NavBottom,
},
setup() {
const ifchina = false;
const ifmingxi = true;
return {
ifchina,
ifmingxi,
};
},
});
</script>
<style lang="scss" scoped>
.wallet /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>