我的钱包 关于 列表
This commit is contained in:
parent
8bf0188105
commit
db2eec98a0
@ -1,5 +1,4 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Login from "../views/login/Login.vue"
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
@ -22,6 +21,46 @@ const routes: Array<RouteRecordRaw> = [
|
||||
path:"video",
|
||||
name: "Video",
|
||||
component: () => import("../views/mine/ReleaseVideo.vue")
|
||||
},
|
||||
{
|
||||
path:"wallet",
|
||||
name: "Wallet",
|
||||
component: () => import("../views/mine/Wallet.vue")
|
||||
},
|
||||
{
|
||||
path:"transaction",
|
||||
name: "Transaction",
|
||||
component: () => import("../views/mine/Transaction.vue")
|
||||
},
|
||||
{
|
||||
path:"transactionxq",
|
||||
name: "Transactiondetail",
|
||||
component: () => import("../views/mine/Transactiondetail.vue")
|
||||
},
|
||||
{
|
||||
path:"cashoutxq",
|
||||
name: "Cashoutdetail",
|
||||
component: () => import("../views/mine/Cashoutdetail.vue")
|
||||
},
|
||||
{
|
||||
path:"cashout",
|
||||
name: "Cashout",
|
||||
component: () => import("../views/mine/Cashout.vue")
|
||||
},
|
||||
{
|
||||
path:"addaccount",
|
||||
name: "Addaccount",
|
||||
component: () => import("../views/mine/Addaccount.vue")
|
||||
},
|
||||
{
|
||||
path:"liststatistic",
|
||||
name: "Liststatistic",
|
||||
component: () => import("../views/mine/Liststatistic.vue")
|
||||
},
|
||||
{
|
||||
path:"aboutus",
|
||||
name: "Aboutus",
|
||||
component: () => import("../views/mine/Aboutus.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
BIN
src/static/images/aboutbg.png
Normal file
BIN
src/static/images/aboutbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
src/static/images/account.png
Normal file
BIN
src/static/images/account.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/static/images/bank.png
Normal file
BIN
src/static/images/bank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/static/images/chuanzhen.png
Normal file
BIN
src/static/images/chuanzhen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 883 B |
BIN
src/static/images/dingyuetj.png
Normal file
BIN
src/static/images/dingyuetj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/static/images/dingyuetjicon.png
Normal file
BIN
src/static/images/dingyuetjicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/static/images/erweima.png
Normal file
BIN
src/static/images/erweima.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/static/images/ewm.png
Normal file
BIN
src/static/images/ewm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
BIN
src/static/images/foreignbank.png
Normal file
BIN
src/static/images/foreignbank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/static/images/money.png
Normal file
BIN
src/static/images/money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/static/images/paypi.png
Normal file
BIN
src/static/images/paypi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/static/images/shipintj.png
Normal file
BIN
src/static/images/shipintj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/static/images/shipintjicon.png
Normal file
BIN
src/static/images/shipintjicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 762 B |
BIN
src/static/images/walletadd.png
Normal file
BIN
src/static/images/walletadd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/static/images/walletweixin.png
Normal file
BIN
src/static/images/walletweixin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/walletzfb.png
Normal file
BIN
src/static/images/walletzfb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/wode.png
Normal file
BIN
src/static/images/wode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 913 B |
BIN
src/static/images/zhibotj.png
Normal file
BIN
src/static/images/zhibotj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/static/images/zhibotjicon.png
Normal file
BIN
src/static/images/zhibotjicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -1,23 +1,252 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
|
||||
</div>
|
||||
<div class="about">
|
||||
<div class="top">
|
||||
<div class="titlebox">
|
||||
<div class="title">beelink</div>
|
||||
<div class="title">亿万人的信赖和见证</div>
|
||||
<div class="desc">开启您的美好学习生活</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mid">
|
||||
<div class="midcontent">
|
||||
<div class="midtopic">关于Beelink</div>
|
||||
<div class="midline"></div>
|
||||
<div class="texts">
|
||||
Beelink—专致于外语学习的在线互动学习平台。Beelink汇聚各国名师资源，在线直播辅导，提、供中文、英语、西班牙语、俄罗斯语、法语等多种外语讲课，为学生提供优质学习课
|
||||
程。一对一，一对多，不同教学形式符合您的多项不同需求。课程支持直播视频回放、视频评论等功能，让学生可以充分利用碎片时间，讲知识难点、语言技巧等完整、系统化地呈现，
|
||||
随时随地想学就学，做自己的学霸。
|
||||
</div>
|
||||
<div class="texts">
|
||||
Beelink—专致于外语学习的在线互动学习平台。Beelink汇聚各国名师资源，在线直播辅导，提、供中文、英语、西班牙语、俄罗斯语、法语等多种外语讲课，为学生提供优质学习课
|
||||
程。一对一，一对多，不同教学形式符合您的多项不同需求。课程支持直播视频回放、视频评论等功能，让学生可以充分利用碎片时间，讲知识难点、语言技巧等完整、系统化地呈现，
|
||||
随时随地想学就学，做自己的学霸。
|
||||
</div>
|
||||
</div>
|
||||
<div class="other">
|
||||
<div class="relation">
|
||||
<div class="midtopic">联系Beelink</div>
|
||||
<div class="midline"></div>
|
||||
<div class="desc">
|
||||
Beelink—专致于外语学习的在线互动学习平台。Beelink汇聚各国名师资源。
|
||||
</div>
|
||||
<div class="way">
|
||||
<div class="wayitem">
|
||||
<div class="iconbox">
|
||||
<img src="@/static/images/tel.png" alt="" class="icon" />
|
||||
</div>
|
||||
<span>24小时服务热线：111-1111-5456</span>
|
||||
</div>
|
||||
<div class="wayitem">
|
||||
<div class="iconbox">
|
||||
<img
|
||||
src="@/static/images/email.png"
|
||||
alt=""
|
||||
class="icon icon1"
|
||||
/>
|
||||
</div>
|
||||
<span> Beelink邮箱 ：6455646561@163.com </span>
|
||||
</div>
|
||||
<div class="wayitem">
|
||||
<div class="iconbox">
|
||||
<img src="@/static/images/chuanzhen.png" alt="" class="icon" />
|
||||
</div>
|
||||
<span> 传真：010-1654645 </span>
|
||||
</div>
|
||||
<div class="wayitem">
|
||||
<div class="iconbox">
|
||||
<img src="@/static/images/ewm.png" alt="" class="icon" />
|
||||
</div>
|
||||
<span> Beelink App下载 </span>
|
||||
<img src="@/static/images/erweima.png" alt="" class="ewm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picbox">
|
||||
<div class="picitem picitem0">1</div>
|
||||
<div class="picitem picitem1">2</div>
|
||||
<div class="picitem picitem3">3</div>
|
||||
<div class="picitem picitem2">4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomnav">
|
||||
<NavBottom></NavBottom>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import NavBottom from '@/components/NavBottom.vue';
|
||||
export default defineComponent({
|
||||
name: "About",
|
||||
components: {
|
||||
NavBottom
|
||||
},
|
||||
setup() {
|
||||
|
||||
return {
|
||||
|
||||
};
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.about /deep/ .nav-bottom /deep/ .nav-container{
|
||||
color:white!important
|
||||
}
|
||||
.about /deep/ .nav-bottom /deep/ .copyright{
|
||||
color:white!important
|
||||
}
|
||||
.about {
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 512px;
|
||||
background: gray;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.titlebox {
|
||||
margin-left: 226px;
|
||||
.title {
|
||||
color: white;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.desc {
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mid {
|
||||
min-width: 100%;
|
||||
// height: 1206px;
|
||||
background: url("../../static/images/aboutbg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.midcontent {
|
||||
width: 914px;
|
||||
height: 196px;
|
||||
margin: 0 auto;
|
||||
padding-top: 105px;
|
||||
margin-bottom: 230px;
|
||||
|
||||
.texts {
|
||||
color: #333333;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
.midtopic {
|
||||
font-size: 17px;
|
||||
color: #0dbba4;
|
||||
font-weight: 800;
|
||||
}
|
||||
.midline {
|
||||
width: 23px;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#00dac2,
|
||||
#42de9d,
|
||||
#87e062,
|
||||
#d0eb3d,
|
||||
#fffa18
|
||||
);
|
||||
border-radius: 1px;
|
||||
margin-top: 23px;
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
.other {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.relation {
|
||||
width: 520px;
|
||||
height: 420px;
|
||||
position: relative;
|
||||
left: -60px;
|
||||
top: 350px;
|
||||
.desc {
|
||||
color: #333333;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.way {
|
||||
.wayitem {
|
||||
display: flex;
|
||||
line-height: 34px;
|
||||
font-size: 11px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
.ewm{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
left:16px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.iconbox {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: #0dbba4;
|
||||
margin-bottom: 28px;
|
||||
margin-right: 13px;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
margin: 10px 8px;
|
||||
}
|
||||
.icon1 {
|
||||
width: 19px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.picbox {
|
||||
width: 400px;
|
||||
// height: 805px;
|
||||
column-count: 2;
|
||||
position: relative;
|
||||
left: 90px;
|
||||
.picitem {
|
||||
width: 248px;
|
||||
height: 301px;
|
||||
margin-bottom: 75px;
|
||||
position: relative;
|
||||
background: yellowgreen;
|
||||
break-inside: avoid;
|
||||
}
|
||||
.picitem0 {
|
||||
margin-top: 191px;
|
||||
left: -100px;
|
||||
}
|
||||
.picitem1 {
|
||||
width: 206px;
|
||||
height: 251px;
|
||||
}
|
||||
.picitem2 {
|
||||
width: 218px;
|
||||
height: 265px;
|
||||
left: 40px;
|
||||
}
|
||||
.picitem3 {
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomnav{
|
||||
margin-top: 78px;
|
||||
height: 85px;
|
||||
background:#0DBBA4;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -155,13 +155,22 @@ export default defineComponent({
|
||||
labelCol: 4,
|
||||
wrapperCol: 14,
|
||||
};
|
||||
const tabselected = ref(1);
|
||||
const time = ref(60);
|
||||
const tabselected = ref(1); //tab切换的标志
|
||||
const time = ref(60);//倒计时
|
||||
|
||||
/**
|
||||
* @param val 子组件传过来的值
|
||||
*/
|
||||
const Selectnum: (val: number) => void = (val: number) => {
|
||||
console.log("收到子组件事件", val);
|
||||
|
||||
tabselected.value = val;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param
|
||||
* 点击获取验证码 触发倒计时
|
||||
*/
|
||||
const getcode: () => void = () => {
|
||||
console.log(11111);
|
||||
const timestep = setInterval(() => {
|
||||
|
||||
@ -28,11 +28,11 @@
|
||||
</div>
|
||||
<a-form :layout="formLayout">
|
||||
<div class="signform">
|
||||
<a-form-item label="手机号" class="form-item">
|
||||
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||||
|
||||
<div style="display:flex">
|
||||
<a-form-item label="手机号" class="shuru">
|
||||
<div>13937984111</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码" class="form-item">
|
||||
<a-form-item label="验证码" class="form-item yzm">
|
||||
<!-- <a-input-group compact>
|
||||
<div class="getcode" @/click="getcode">
|
||||
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||
@ -50,6 +50,18 @@
|
||||
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display:flex">
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input class="shuru" placeholder="请再次输入您的密码" type="password"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input class="shuru" placeholder="请再次输入您的密码" type="password"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="submit" @click="next(3)">立刻注册</div>
|
||||
@ -58,21 +70,21 @@
|
||||
</div>
|
||||
|
||||
<div v-if="stepnow == 3">
|
||||
<div class="nosign">您已完成注册</div>
|
||||
<div class="nosign">您已完成密码重置</div>
|
||||
<img src="@/static/images/success.png" alt="" class="success">
|
||||
<div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
|
||||
<div class="ale">恭喜您重置密码成功，点击跳转到登录页面</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="stepnow != 2 ? 'right' : 'right right1'">
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
|
||||
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
|
||||
<div :class="stepnow == 1 ? 'stepnow' : ''">识别账号</div>
|
||||
</div>
|
||||
<div class="stepline"></div>
|
||||
<div class="step">
|
||||
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
|
||||
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
|
||||
<div :class="stepnow == 2 ? 'stepnow' : ''">验证账号信息，重置密码</div>
|
||||
<div class="back" @click="next(1)" v-if="stepnow==2">
|
||||
返回上一步
|
||||
</div>
|
||||
@ -80,7 +92,7 @@
|
||||
<div class="stepline"></div>
|
||||
<div class="step">
|
||||
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
|
||||
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
|
||||
<div :class="stepnow == 3 ? 'stepnow' : ''">密码重置完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons" v-if="stepnow == 2">
|
||||
@ -103,7 +115,11 @@ export default defineComponent({
|
||||
labelCol: 4,
|
||||
wrapperCol: 14,
|
||||
};
|
||||
const time = ref(60);
|
||||
const time = ref(60); //倒计时初始值
|
||||
|
||||
/**
|
||||
* 点击获取验证码 触发60S倒计时
|
||||
*/
|
||||
const getcode: () => void = () => {
|
||||
console.log(11111);
|
||||
const timestep = setInterval(() => {
|
||||
@ -117,13 +133,22 @@ export default defineComponent({
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const ifagree = ref(true);
|
||||
const ifagree = ref(true); //是否同意用户协议
|
||||
|
||||
/**
|
||||
* 用户协议前面 radio的点击效果
|
||||
*/
|
||||
const agree: () => void = () => {
|
||||
ifagree.value = ifagree.value == true ? false : true;
|
||||
console.log(ifagree.value, 600);
|
||||
};
|
||||
|
||||
const stepnow = ref(1);
|
||||
const stepnow = ref(1); //步骤条初始值 默认到某一步
|
||||
|
||||
/**
|
||||
* @param e 跳转到步骤条的某一步
|
||||
* 步骤条的当前值切换
|
||||
*/
|
||||
const next: (e: number) => void = (e: number) => {
|
||||
stepnow.value = e;
|
||||
};
|
||||
@ -220,6 +245,7 @@ export default defineComponent({
|
||||
.orginfo {
|
||||
margin-top: 178px;
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 143px;
|
||||
height: 35px;
|
||||
@ -261,6 +287,9 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.yzm{
|
||||
left:40px;
|
||||
}
|
||||
.right1 {
|
||||
width: 230px !important;
|
||||
}
|
||||
@ -313,6 +342,7 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
.shuru {
|
||||
width: 313px;
|
||||
margin-right:40px
|
||||
}
|
||||
}
|
||||
.icons {
|
||||
|
||||
@ -61,10 +61,10 @@
|
||||
<a-form :layout="formLayout">
|
||||
<div class="signform">
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input class="shuru" placeholder="请输入您的密码" />
|
||||
<a-input class="shuru" placeholder="请输入您的密码" type="password"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input class="shuru" placeholder="请再次输入您的密码" />
|
||||
<a-input class="shuru" placeholder="请再次输入您的密码" type="password"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名" class="form-item">
|
||||
<a-input class="shuru" placeholder="请输入您的姓名" />
|
||||
@ -136,7 +136,12 @@ export default defineComponent({
|
||||
labelCol: 4,
|
||||
wrapperCol: 14,
|
||||
};
|
||||
const time = ref(60);
|
||||
const time = ref(60); //倒计时初始化
|
||||
|
||||
/**
|
||||
* @param
|
||||
* 点击获取验证码 触发60S倒计时
|
||||
*/
|
||||
const getcode: () => void = () => {
|
||||
console.log(11111);
|
||||
const timestep = setInterval(() => {
|
||||
@ -150,13 +155,23 @@ export default defineComponent({
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const ifagree = ref(true);
|
||||
const ifagree = ref(true); //是否同意用户协议
|
||||
|
||||
/**
|
||||
*@param
|
||||
* 用户协议前面radio 的点击效果
|
||||
*/
|
||||
const agree: () => void = () => {
|
||||
ifagree.value = ifagree.value == true ? false : true;
|
||||
console.log(ifagree.value, 600);
|
||||
};
|
||||
|
||||
const stepnow = ref(1);
|
||||
const stepnow = ref(1); // 步骤条初始
|
||||
|
||||
/**
|
||||
*@param e 跳到哪一步
|
||||
* 步骤条跳到某一步
|
||||
*/
|
||||
const next: (e: number) => void = (e: number) => {
|
||||
stepnow.value = e;
|
||||
};
|
||||
|
||||
155
src/views/mine/Aboutus.vue
Normal file
155
src/views/mine/Aboutus.vue
Normal 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
355
src/views/mine/Addaccount.vue
Normal 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
272
src/views/mine/Cashout.vue
Normal 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
148
src/views/mine/Cashoutdetail.vue
Normal 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
150
src/views/mine/Liststatistic.vue
Normal 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
157
src/views/mine/Transaction.vue
Normal 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
123
src/views/mine/Transactiondetail.vue
Normal 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
449
src/views/mine/Wallet.vue
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user