jiaoyisuo_2/repo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: USDT→USDC全局替换 + i18n全量补全

Browse Source
This commit is contained in:
testadmin
2026-04-28 22:05:00 +08:00
parent d2c1c3751a
commit 82675dea71
87 changed files with 64563 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ForgetPwd - 副本 (2).vue
+348
View File
@@ -0,0 +1,348 @@
<template>
<div class="login-zh">
<indexHeader></indexHeader>
<div class="bit-center-wrap l-box">
<div class="lb-form">
<div class="form-title">重置密码</span>
</div>
<div class="form-title2">为了您的资产安全，修改密码后24小时内禁止交易。</div>
<div class="tabs">
<div class="ts-item" :class="{tsItActive:tabsIndex==index}" v-for="(item,index) in tabsList"
@click="tabsIndex=index">
{{item.text}}
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{tabsIndex==0?$t('login.active_1'):$t('login.login_tabItem_0')}}
</div>
<div class="input-t">
<input v-model="form.user_string" :placeholder="$t('zjde1')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('register.verification_code')}}
</div>
<div class="input-t">
<input v-model="form.code" :placeholder="$t('zjde5')" />
<span class="hq" @click="getCode">{{GlobalTimes?`${Second}s`:'获取'}}</span>
<!-- <view class="verification" @click="CountDown" :class="isGetting?'Getting':''">
{{GlobalTimes?`重新获取${Second}s`:'获取验证码'}}
</view> -->
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('login.password')}}
</div>
<div class="input-t">
<input v-model="form.password" type="password" :placeholder="$t('zjde5')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('zjde4')}}
</div>
<div class="input-t">
<input v-model="form.re_password" type="password" :placeholder="$t('zjde6')" />
</div>
</div>
<!-- <div class="srk-item">
<div class="input-t">
<input v-model="form.extension_code" :placeholder="$t('register.invitation_code')" />
</div>
</div> -->
<!-- <div class="jzmm">
<el-checkbox v-model="checked" text-color="#00f0ff">我已阅读同意</el-checkbox>
<span class="dsads">{{siteName}} </span>
<span class="dsads" style="color: #00f0ff;">服务条款</span>
</div> -->
<div class="loinSubmit" @click="login">
{{$t('homeContent.btn_submit')}}
</div>
<div class="qt" @click="goPages('login')">{{$t('login.login_btn')}}</div>
<!-- <div class="qt" @click="goPages('forgetPwd')">{{$t('login.forget')}}</div> -->
</div>
</div>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from '@/view/indexFooter'
export default {
name: "login",
components: {
indexHeader,
indexFooter
},
data() {
return {
checked: false,
tabsList: [{
text: this.$t('login.login_tabItem_1')
},
{
text: this.$t('login.login_tabItem_0')
}
],
tabsIndex: 0,
account_number: '',
password: '',
siteName: '',
form: {
user_string: '',
code: '',
password: '',
re_password: "",
extension_code: '',
},
// 全局的定时器
GlobalTimes: '',
// 秒数
Second: 60,
// 是否倒计时中
isGetting: false,
}
},
created() {
this.$http({
url: "/api/getSiteConfig?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {}
}).then(t => {
this.siteName = t.data.message.site_name
})
},
mounted() {
},
methods: {
getCode() {
if (this.isGetting) return
if (this.form.user_string == '') return this.$message.error(this.$t('zjde1'));
this.$http({
url: "/api/sms_mail",
method: "POST",
data: {
user_string: this.form.user_string,
scene: "register",
area_code_id: "",
area_code: '',
email_code: "",
type_new: this.tabsIndex
}
}).then(t => {
if (t.data.type == 'ok') {
this.CountDown()
}
})
},
// 倒计时
CountDown() {
this.isGetting = true
this.GlobalTimes = setInterval(() => {
this.Second -= 1
if (this.Second == 0) {
this.GlobalTimes = ''
this.Second = 60
this.isGetting = false
clearInterval(this.GlobalTimes)
}
}, 1000)
},
goPages(name) {
this.$router.push({
name
})
},
login() {
// let t = this.$utils.trim(this.account_number)
// let g = this.$utils.trim(this.password)
// if (t == '') return this.$message.error(this.$t('zjde1'));
// if (g == '') return this.$message.error(this.$t('zjde2'));
// form: {
// user_string: '',
// code: '',
// password: '',
// re_password: "",
// extension_code: '',
// },
if(!this.checked) return this.$message.error(this.$t('zjde9'));
let form = this.form
if(form.user_string=="") return this.$message.error(this.$t('zjde1'));
if(form.code=="") return this.$message.error(this.$t('zjde5'));
if(form.password=="") return this.$message.error(this.$t('zjde6'));
if(form.re_password!=form.password) return this.$message.error(this.$t('zjde8'));
var t = this;
this.$http({
url: "/api/user/register",
method: "POST",
data: {
...this.form,
type: "email",
lang: t.lang
}
}).then(e => {
"ok" == e.data.type ? (layer.msg(e.data.message),
t.mobile ? t.$router.push("/appDown") : t.$router.push({
name: "login"
})) : layer.msg(e.data.message)
})
},
userInfo() {
this.$http({
url: "/api/user/info?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
"ok" == t.data.type && (localStorage.setItem("user_id", t.data.message.id),
localStorage.setItem("email", t.data.message.email),
localStorage.setItem("extension_code", t.data.message.extension_code),
localStorage.setItem("is_seller", t.data.message.is_seller),
eventBus.$emit("seller", t.data.message.is_seller))
}).catch(t => {})
},
},
}
</script>
<style lang="scss">
.login-zh .el-checkbox__input.is-checked+.el-checkbox__label {
color: #00f0ff;
}
.login-zh .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #00f0ff;
border-color: #00f0ff;
}
.lb-form {
font-size: 1rem;
color: #333;
width: 25rem;
margin-top: 3rem;
}
.form-title {
font-size: 1.5rem;
font-weight: 700;
}
.form-title2 {
margin-top: 1.25rem;
font-size: 1rem;
font-weight: 400;
color: #7e7e7e;
}
.tabs {
margin-top: 3.125rem;
display: flex;
}
.ts-item {
font-size: 1rem;
font-weight: 400;
padding: 0.8125rem 1.5rem;
margin-right: 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
}
.tsItActive {
color: #fff;
background-color: #00f0ff;
}
.srk-item {
margin-top: 1.2rem;
}
.si-title {
font-size: 1.2rem;
}
.input-t {
margin-top: 0.5rem;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.7rem;
font-size: 0.875rem;
display: flex;
}
.hq {
cursor: pointer;
color: #00f0ff;
}
.input-t input {
// width: 100%;
flex: 1;
}
.jzmm {
margin-top: 1rem;
color: #7e7e7e;
font-size: 0.875rem;
}
.jzmm .dsads {
margin-left: 0.5rem;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 0.7rem;
border-radius: 0.25rem;
text-align: center;
font-weight: 400;
cursor: pointer;
color: #fff;
background-color: #00f0ff;
}
.qt {
cursor: pointer;
margin-bottom: 1.25rem;
width: max-content;
color: #00f0ff;
font-size: 0.875rem;
}
</style>
src/components/ForgetPwd - 副本.vue
+1137
View File
File diff suppressed because it is too large Load Diff
src/components/ForgetPwd.vue
+810
View File
@@ -0,0 +1,810 @@
<template>
<div class="login-zh">
<indexHeader></indexHeader>
<div class="bit-center-wrap l-box">
<div class="lb-form">
<div class="form-title"> {{$t('zjde77')}}</span>
</div>
<div class="form-title2">{{$t('zjde78')}}</div>
<div class="tabs">
<div class="ts-item" :class="{tsItActive:tabsIndex==index}" v-for="(item,index) in tabsList"
@click="tabsIndex=index">
{{item.text}}
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{tabsIndex==0?$t('login.active_1'):$t('login.login_tabItem_0')}}
</div>
<div class="input-t2">
<div class="areaCode" v-if="tabsIndex==0" @click="areaCodeShow=true">
<img style="width: 1.5rem;" :src="getgjImg(form.area_code)" v-if="form.area_code" />
<span class="ac-text">{{form.area_code || $t('zjde70')}} </span>
<i class="el-icon-caret-bottom"></i>
</div>
<input v-model="form.user_string" :placeholder="$t('zjde1')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('register.verification_code')}}
</div>
<div class="input-t">
<input v-model="form.code" :placeholder="$t('zjde5')" />
<span class="hq" @click="getCode">{{isGetting?`${Second}s`:$t('zjde74')}}</span>
<!-- <view class="verification" @click="CountDown" :class="isGetting?'Getting':''">
{{GlobalTimes?`重新获取${Second}s`:'获取验证码'}}
</view> -->
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('login.password')}}
</div>
<div class="input-t">
<input v-model="form.password" type="password" :placeholder="$t('zjde6')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('zjde4')}}
</div>
<div class="input-t">
<input v-model="form.re_password" type="password" :placeholder="$t('zjde6')" />
</div>
</div>
<div class="loinSubmit" @click="login">
{{$t('homeContent.btn_submit')}}
</div>
<div class="qt" @click="goPages('login')">{{$t('login.login_btn')}}</div>
<!-- <div class="qt" @click="goPages('forgetPwd')">{{$t('login.forget')}}</div> -->
</div>
</div>
<el-dialog :title="$t('zjde75')" :visible.sync="areaCodeShow" width="400px" :before-close="handleClose">
<div class="areaBox">
<div class="ab-head">
<i class="el-icon-search"></i>
<input v-model="area" @input="handleInput" class="qhss" :placeholder="$t('zjde76')" />
</div>
<div class="dialog-bottom">
<div class="dbitem" v-for="(item,index) in costList" :key="index" @click="selectCode(item)">
<img class="di-icon" :src="getgjImg(item.costName)" />
<span class="gm">{{getgjText(item.costName)}}</span>
<span class="db-num">{{item.costName}}</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from '@/view/indexFooter'
export default {
name: "login",
components: {
indexHeader,
indexFooter
},
data() {
return {
area: '',
areaCodeShow: false,
checked: false,
tabsList: [{
text: this.$t('login.login_tabItem_1')
},
{
text: this.$t('login.login_tabItem_0')
}
],
tabsIndex: 0,
account_number: '',
password: '',
siteName: '',
form: {
user_string: '',
code: '',
password: '',
re_password: "",
extension_code: '',
area_code: '+61',
},
// 全局的定时器
GlobalTimes: '',
// 秒数
Second: 60,
// 是否倒计时中
isGetting: false,
costList: [],
lang: 'en',
costList2: [],
deviceIdList: [{
countryName: "China",
countryNumber: "+86",
countryImage: require("@/assets/lang2.png")
},
{
countryName: "Singapore",
countryNumber: "+65",
countryImage: require("@/assets/images/65.png")
},
{
countryName: "Australia",
countryNumber: "+61",
countryImage: require("@/assets/images/61.png")
},
{
countryName: "Canada",
countryNumber: "+62",
countryImage: require("@/assets/images/Canada.png")
},
{
countryName: "Malaysia",
countryNumber: "+60",
countryImage: require("@/assets/images/Malaysia.png")
}, {
countryName: "Spain",
countryNumber: "+34",
countryImage: require("@/assets/images/Spain.png")
},
// {
// countryName: "Canada",
// countryNumber: "+1",
// countryImage: require("@/assets/images/Canada.png")
// },
{
countryName: "United States",
countryNumber: "+1",
countryImage: require("@/assets/images/United States of America.png")
}, {
countryName: "Chile",
countryNumber: "+56",
countryImage: require("@/assets/images/Chile.png")
}, {
countryName: "Colombia",
countryNumber: "+57",
countryImage: require("@/assets/images/Colombia.png")
}, {
countryName: "Cuba",
countryNumber: "+53",
countryImage: require("@/assets/images/Cuba.png")
}, {
countryName: "Denmark",
countryNumber: "+45",
countryImage: require("@/assets/images/Denmark.png")
}, {
countryName: "Egypt",
countryNumber: "+20",
countryImage: require("@/assets/images/Egypt.png")
}, {
countryName: "Finland",
countryNumber: "+358",
countryImage: require("@/assets/images/Finland.png")
}, {
countryName: "France",
countryNumber: "+33",
countryImage: require("@/assets/images/France.png")
}, {
countryName: "French Guiana",
countryNumber: "+594",
countryImage: require("@/assets/images/French Guiana.png")
}, {
countryName: "Germany",
countryNumber: "+49",
countryImage: require("@/assets/images/Germany.png")
}, {
countryName: "Ghana",
countryNumber: "+233",
countryImage: require("@/assets/images/Ghana.png")
}, {
countryName: "Grenada",
countryNumber: "+1473",
countryImage: require("@/assets/images/Grenada.png")
}, {
countryName: "Greece",
countryNumber: "+30",
countryImage: require("@/assets/images/Greece.png")
}, {
countryName: "Guam",
countryNumber: "+1671",
countryImage: require("@/assets/images/Guam.png")
}, {
countryName: "Honduras",
countryNumber: "+504",
countryImage: require("@/assets/images/Honduras.png")
}, {
countryName: "Hongkong",
countryNumber: "+852",
countryImage: require("@/assets/images/Hongkong.png")
}, {
countryName: "India",
countryNumber: "+91",
countryImage: require("@/assets/images/India.png")
}, {
countryName: "Iraq",
countryNumber: "+964",
countryImage: require("@/assets/images/Iraq.png")
}, {
countryName: "Iran",
countryNumber: "+98",
countryImage: require("@/assets/images/Iran.png")
}, {
countryName: "Ireland",
countryNumber: "+353",
countryImage: require("@/assets/images/Ireland.png")
}, {
countryName: "Israel",
countryNumber: "+972",
countryImage: require("@/assets/images/Israel.png")
}, {
countryName: "Italy",
countryNumber: "+39",
countryImage: require("@/assets/images/Italy.png")
}, {
countryName: "Jamaica",
countryNumber: "+1876",
countryImage: require("@/assets/images/Jamaica.png")
}, {
countryName: "Japan",
countryNumber: "+81",
countryImage: require("@/assets/images/Japan.png")
}, {
countryName: "Kampuchea(Cambodia)",
countryNumber: "+855",
countryImage: require("@/assets/images/Kampuchea(Cambodia).png")
}, {
countryName: "Kazakstan",
countryNumber: "+7",
countryImage: require("@/assets/images/Kazakstan.png")
}, {
countryName: "Russia",
countryNumber: "+7",
countryImage: require("@/assets/images/Russia.png")
}, {
countryName: "Korea",
countryNumber: "+82",
countryImage: require("@/assets/images/Korea.png")
}, {
countryName: "Macao",
countryNumber: "+853",
countryImage: require("@/assets/images/Macao.png")
}, {
countryName: "Netherlands",
countryNumber: "+31",
countryImage: require("@/assets/images/Netherlands.png")
}, {
countryName: "New Zealand",
countryNumber: "+64",
countryImage: require("@/assets/images/New Zealand.png")
}, {
countryName: "Norway",
countryNumber: "+47",
countryImage: require("@/assets/images/Norway.png")
}, {
countryName: "Pakistan",
countryNumber: "+92",
countryImage: require("@/assets/images/Pakistan.png")
}, {
countryName: "Poland",
countryNumber: "+48",
countryImage: require("@/assets/images/Poland.png")
}, {
countryName: "Portugal",
countryNumber: "+351",
countryImage: require("@/assets/images/Portugal.png")
}, {
countryName: "Philippines",
countryNumber: "+51",
countryImage: require("@/assets/images/Philippines.png")
}, {
countryName: "Peru",
countryNumber: "+51",
countryImage: require("@/assets/images/Peru.png")
}, {
countryName: "Sweden",
countryNumber: "+46",
countryImage: require("@/assets/images/Sweden.png")
}, {
countryName: "Mexico",
countryNumber: "+52",
countryImage: require("@/assets/images/Mexico.png")
}, {
countryName: "Maldives",
countryNumber: "+960",
countryImage: require("@/assets/images/Maldives.png")
}, {
countryName: "Paraguay",
countryNumber: "+595",
countryImage: require("@/assets/images/Paraguay.png")
}, {
countryName: "Saudi Arabia",
countryNumber: "+966",
countryImage: require("@/assets/images/Saudi Arabia.png")
}, {
countryName: "Suriname",
countryNumber: "+597",
countryImage: require("@/assets/images/Suriname.png")
}, {
countryName: "Thailand",
countryNumber: "+66",
countryImage: require("@/assets/images/Thailand.png")
}, {
countryName: "United Arab Emirates",
countryNumber: "+971",
countryImage: require("@/assets/images/United Arab Emirates.png")
}, {
countryName: "United Kingdom",
countryNumber: "+44",
countryImage: require("@/assets/images/United Kingdom.png")
}, {
countryName: "Taiwan",
countryNumber: "+886",
countryImage: require("@/assets/images/Taiwan.png")
}, {
countryName: "Switzerland",
countryNumber: "+41",
countryImage: require("@/assets/images/Switzerland.png")
}
],
config: {}
}
},
created() {
this.lang = window.localStorage.getItem("lang")
this.$http({
url: "/api/getSiteConfig?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {}
}).then(t => {
this.siteName = t.data.message.site_name
let data = t.data.message
this.config = data
})
this.$http({
url: "/api/get_area_code",
method: "post",
data: {}
}).then(t => {
console.log('ttt', t.data.message.costList)
this.costList2 = t.data.message.costList
this.costList = t.data.message.costList
})
},
mounted() {
},
methods: {
handleInput() {
console.log('sdfs', this.area)
this.costList = this.costList2.filter(item => item.costName.includes(this.area))
},
selectCode(item) {
let t = this
this.form.area_code = item.costName
let obj = {
num: item.costName,
text: t.getgjImg(item.costName)
}
this.areaCodeShow = false
},
getgjImg(type) {
let item = this.deviceIdList.filter(item => item.countryNumber == type)[0]
return item ? item.countryImage : '+62'
},
getgjText(type) {
let item = this.deviceIdList.filter(item => item.countryNumber == type)[0]
return item ? item.countryName : require("@/assets/images/Canada.png")
},
getCode() {
if (this.isGetting) return
if (this.form.user_string == '') return this.$message.error(this.$t('zjde1'));
layer.load()
this.$http({
url: "/api/sms_mail",
method: "POST",
data: {
user_string: this.form.user_string,
scene: "forget",
type: "forget",
area_code_id: "",
area_code: this.form.area_code,
email_code: "",
type_new: this.tabsIndex,
lang: this.lang
}
}).then(t => {
layer.closeAll()
if (t.data.type == 'ok') {
if (this.config.yzm_radio == 1) {
this.form.code = t.data.message
}
this.CountDown()
} else {
layer.msg(t.data.message)
}
})
},
// 倒计时
CountDown() {
this.isGetting = true
this.GlobalTimes = setInterval(() => {
this.Second -= 1
if (this.Second == 0) {
// this.GlobalTimes = ''
this.Second = 60
this.isGetting = false
clearInterval(this.GlobalTimes)
}
}, 1000)
},
goPages(name) {
this.$router.push({
name
})
},
login() {
// let t = this.$utils.trim(this.account_number)
// let g = this.$utils.trim(this.password)
// if (t == '') return this.$message.error(this.$t('zjde1'));
// if (g == '') return this.$message.error(this.$t('zjde2'));
// form: {
// user_string: '',
// code: '',
// password: '',
// re_password: "",
// extension_code: '',
// },
// if (!this.checked) return this.$message.error(this.$t('zjde9'));
let form = this.form
if (form.user_string == "") return this.$message.error(this.$t('zjde1'));
if (form.code == "") return this.$message.error(this.$t('zjde5'));
if (form.password == "") return this.$message.error(this.$t('zjde6'));
if (form.re_password != form.password) return this.$message.error(this.$t('zjde8'));
var t = this;
this.$http({
url: "/api/user/forget",
method: "POST",
data: {
account: form.user_string,
code: form.code,
password: form.password,
repassword: form.re_password,
lang: window.localStorage.getItem("lang") || "en"
}
}).then(e => {
"ok" == e.data.type ? (layer.msg(e.data.message),
t.mobile ? t.$router.push("/appDown") : t.$router.push({
name: "login"
})) : layer.msg(e.data.message)
})
},
userInfo() {
this.$http({
url: "/api/user/info?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
"ok" == t.data.type && (localStorage.setItem("user_id", t.data.message.id),
localStorage.setItem("email", t.data.message.email),
localStorage.setItem("extension_code", t.data.message.extension_code),
localStorage.setItem("is_seller", t.data.message.is_seller),
eventBus.$emit("seller", t.data.message.is_seller))
}).catch(t => {})
},
},
}
</script>
<style lang="scss">
.login-zh .el-checkbox__input.is-checked+.el-checkbox__label {
color: #00f0ff;
}
.login-zh .el-checkbox__label {
font-size: 0.875rem;
}
.login-zh .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #00f0ff;
border-color: #00f0ff;
}
.lb-form {
font-size: 1rem;
color: #333;
width: 25rem;
margin-top: 3rem;
}
.form-title {
font-size: 1.5rem;
font-weight: 700;
}
.form-title2 {
margin-top: 1.25rem;
font-size: 1rem;
font-weight: 400;
color: #7e7e7e;
}
.tabs {
margin-top: 3.125rem;
display: flex;
}
.ts-item {
font-size: 1rem;
font-weight: 400;
padding: 0.8125rem 1.5rem;
margin-right: 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
}
.tsItActive {
color: #fff;
background-color: #00f0ff;
}
.srk-item {
margin-top: 1.2rem;
}
.si-title {
font-size: 1.2rem;
}
.input-t {
margin-top: 0.5rem;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.7rem;
font-size: 0.875rem;
display: flex;
}
.hq {
cursor: pointer;
color: #00f0ff;
}
.input-t2 {
display: flex;
margin-top: 0.5rem;
}
.areaCode {
color: #666;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.7rem;
font-size: 0.875rem;
display: flex;
margin-right: 0.5rem;
display: flex;
align-items: center;
width: 6rem;
justify-content: space-between;
cursor: pointer;
}
.areaCode span {
margin-right: 0.5rem;
}
.input-t2 input {
flex: 1;
padding: 0.7rem;
font-size: 0.875rem;
border: 0.0625rem solid #e7e9ed;
}
.input-t input {
// width: 100%;
flex: 1;
}
.jzmm {
margin-top: 1rem;
color: #7e7e7e;
font-size: 0.875rem;
}
.jzmm .dsads {
margin-left: 0.5rem;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 0.7rem;
border-radius: 0.25rem;
text-align: center;
font-weight: 400;
cursor: pointer;
color: #fff;
background-color: #00f0ff;
}
.qt {
cursor: pointer;
margin-bottom: 1.25rem;
width: max-content;
color: #00f0ff;
font-size: 0.875rem;
}
.areaBox {}
.dialog-bottom {
height: 18.125rem;
margin-top: 1.875rem;
overflow-y: scroll;
}
.dbitem {
display: flex;
align-items: center;
font-size: 0.875rem;
margin-bottom: 1rem;
cursor: pointer;
}
.gm {}
.di-icon {
width: 2rem;
margin-right: 1rem;
}
.db-num {
margin-left: auto;
margin-right: 0.5rem;
}
// ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
// -webkit-border-radius: 2em;
// -moz-border-radius: 2em;
// border-radius: 2em;
// }
::-webkit-scrollbar {
height: 2rem;
width: 0.4375rem;
border-radius: 2em;
// background-color: #dcdcdc;
}
::-webkit-scrollbar-thumb {
border-radius: 2em;
width: 0.4375rem;
background-color: #dcdcdc;
/* 设置滚动条拖动按钮的背景色 */
}
.ab-head {
color: #999;
display: flex;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.6rem 0.7rem;
font-size: 1rem;
}
.qhss {
flex: 1;
margin-left: 0.5rem;
}
@media screen and (max-width: 800px) {
.login-zh .lb-form {
width: 100%;
}
.input-t2 {
margin-top: 1rem !important;
}
// .input-t2 input,
.login-zh .input-t {
margin-top: 1rem;
padding: 1rem;
font-size: 1.2rem;
}
.input-t2 input {
font-size: 1.2rem !important;
}
.login-zh .areaCode {
width: 7rem;
padding: 1rem;
font-size: 1.2rem;
}
.qt,
.ts-item {
font-size: 1.2rem;
}
.login-zh .el-checkbox__label {
font-size: 1rem !important;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
}
.login-zh .qt,
.jzmm .dsads {
font-size: 1.2rem;
}
// .login-zh .areaCode{
// font-size: 1rem;
// }
}
.day {
.input-t input,
.lb-form {
color: #fff;
}
.areaCode,
.input-t2 input,
.input-t {
border: 0.0625rem solid #474d57;
}
}
</style>
src/components/Handicap.vue
+577
View File
@@ -0,0 +1,577 @@
<template>
<div>
<!-- <div id="showMaketList" v-show="showMarketlist" @mouseover="showMarketList" @mouseout="closeMarketList"
style="position: absolute;overflow: auto; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); z-index: 999; cursor: pointer;"
class="fsdf">
<market></market>
</div> -->
<div class="">
<div class="info-wrap asa" style="width: 100%">
<div style="display: flex; align-items: center; flex: 1">
<div class="zfss">
<div
class="bz sada"
@click="showMarketlist = !showMarketlist"
@mouseover="showMarketList"
@mouseout="closeMarketList"
>
<img class="bz-img" :src="$utils.isBaseUrl(logo)" />
<el-dropdown>
<span>{{ rightName }} ⬇</span>
<el-dropdown-menu slot="dropdown" trigger="click">
<el-dropdown-item v-for="(item, index) in quotationList" :key="index">
<div
class="item"
@click.prevent="
onChnageCurrency(
item.legal_id,
item.currency_id,
item.legal_name,
item.currency_name,
item.now_price,
item.change,
item.volume,
item.cny_price,
item.logo,
item.id
)
"
>
<img
v-if="item.logo"
style="width: 25px; height: 25px; vertical-align: middle"
:src="$utils.isBaseUrl(item.logo)"
alt=""
srcset=""
/>
<span style="margin-left: 10px">{{ item.currency_name }}</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="icon-box">
<i class="el-icon-star-on" style="color: #888"></i>
</div>
<div class="rmyg sdada">
<span class="jg" :class="change < 0 ? 'red' : 'green'">{{
lastPrice.toFixed(6)
}}</span>
<span class="asd">≈ $ {{ lastPrice.toFixed(6) }}</span>
</div>
<div class="rmyg">
<span class="dsad">{{ $t("tv.change") }}</span>
<span class="asd csafdas" :class="change < 0 ? 'red' : 'green'"
>{{ change }}%</span
>
</div>
</div>
<div style="display: flex; align-items: center; flex: 1" class="dadas">
<div class="rmyg">
<span class="sds">{{ $t("tv.high") }}</span>
<span class="asd">{{ highPrice }}</span>
</div>
<div class="rmyg">
<span class="sds">{{ $t("tv.min") }}</span>
<span class="asd">{{ lowPrice }}</span>
</div>
<div class="rmyg">
<span class="sds">{{ $t("tv.volume") }}</span>
<span class="asd">{{
Number(volumn) > 1000
? (volumn / 1000).toFixed(4) + "k"
: volumn.toFixed(4)
}}</span>
</div>
<div class="rmyg">
<span class="sds">{{ $t("zjde17") }}</span>
<!-- {{(volumn * lastPrice / 1000000).toFixed(4) }}M -->
<span class="asd"> {{ $processingPrices(volumn * lastPrice) }} </span>
</div>
</div>
<div class="r-time">
{{ currentTime }}
</div>
</div>
<!-- <div style="flex:1;"></div> -->
</div>
<!-- <div style="height: 6px; background-color: rgb(38, 42, 53);"></div> -->
</div>
</div>
</template>
<script>
import market from "@/view/market";
export default {
components: {
market,
},
inject: ["walletList"],
data() {
return {
showMarketlist: false,
rightName: "",
change: 0.0,
lastPrice: 0,
highPrice: 0,
lowPrice: 0,
volumn: 0,
currentTime: "00:00:00",
logo: "",
lists: [],
intersection: [],
quotationList: [],
cmtabsCurrent: 0,
};
},
props: {
// rightName: {
// type: Number,
// String,
// default: "BTC",
// },
// // leftName: {
// // type: Number,
// // String,
// // default: "USTD",
// // },
// change: {
// type: Number,
// String,
// default: 0,
// },
// lastPrice: {
// type: Number,
// String,
// default: 0,
// },
// lowPrice: {
// type: Number,
// String,
// default: 0,
// },
// highPrice: {
// type: Number,
// String,
// default: 0,
// },
// change: {
// type: Number,
// String,
// default: 0,
// },
// volumn: {
// type: Number,
// String,
// default: 0,
// },
// turnover: {
// type: Number,
// String,
// default: 0,
// },
},
computed: {
walletLists() {
return this.walletList();
},
},
created() {
this.initMitt();
this.logo = localStorage.getItem("bzlogo") || "";
let legal_id = 3;
let currency_id = 1;
console.log("itemData", this.logo);
setInterval(() => {
// const date = ;
this.currentTime = new Date().toLocaleString().split(",")[0];
}, 1000);
this.$http({
url: "/api/" + "currency/quotation_new",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token"),
},
})
.then((res) => {
if (res.data.type == "ok") {
// window.localStorage.setItem("leverTradeId", leverTradeId);
var msg = res.data.message[0].quotation;
let leverTradeId = localStorage.getItem("leverTradeId");
let itemData = {};
if (leverTradeId) {
itemData = msg.filter((item) => item.id == leverTradeId)[0];
} else {
itemData = msg[0];
}
this.rightName = itemData.real_name;
this.lastPrice = Number(itemData.now_price);
this.highPrice = itemData.now_price;
this.lowPrice = itemData.now_price;
this.volumn = itemData.volume * 15;
this.change = itemData.change;
legal_id = itemData.legal_id;
currency_id = itemData.currency_id;
}
})
.catch((error) => {
console.log(error);
});
this.sockets.subscribe("kline", (msg) => {
if (msg.type == "kline" && msg.period == "1min") {
if (msg.symbol == localStorage.getItem("symbol")) {
// console.log('msg', msg)
// this.rightName = msg.symbol
this.lastPrice = msg.close * 1;
// this.highPrice = msg.high
// this.lowPrice = msg.low
// this.volumn = msg.volume
// if (msg.change) {
// this.change = (((msg.close - msg.open) / msg.open) * 100).toFixed(2)
// }
}
}
});
this.sockets.subscribe("daymarket", (msg) => {
if (msg.type == "daymarket") {
if (msg.symbol == localStorage.getItem("symbol")) {
this.rightName = msg.symbol;
// this.lastPrice = msg.close
this.highPrice = msg.high * 1;
this.lowPrice = msg.low * 1;
this.volumn = msg.volume * 15;
this.change = msg.change;
}
}
});
},
methods: {
initMitt() {
this.$mitt.$on("currenyChange", (data) => {
this.quotationList = [...data];
});
},
onChnageCurrency(
l_id,
c_id,
l_name,
c_name,
now_price,
change,
volume,
cny_price,
logo,
leverTradeId
) {
// console.log('111', l_id, c_id, l_name, c_name, now_price, change, volume, cny_price, logo, leverTradeId)
window.localStorage.setItem("currency_id", c_id);
window.localStorage.setItem("legal_id", l_id);
window.localStorage.setItem("currency_name", c_name);
window.localStorage.setItem("legal_name", l_name);
window.localStorage.setItem("symbol", c_name + "/" + l_name);
window.localStorage.setItem("bzlogo", logo);
window.localStorage.setItem("leverTradeId", leverTradeId);
window.localStorage.setItem(
"cmtabsCurrent",
window.localStorage.getItem("cmtabsCurrent")
);
// console.log('logo',logo)
// this.$router.push('/leverdealCenter')
location.reload();
},
// processingPrices(num) {
// },
showMarketList() {
var curScreenWidth = document.documentElement.clientWidth;
if (curScreenWidth < 800) {
return;
}
this.showMarketlist = !0;
},
closeMarketList() {
var curScreenWidth = document.documentElement.clientWidth;
if (curScreenWidth < 800) {
return;
}
this.showMarketlist = !1;
},
},
};
</script>
<style lang="scss" scoped>
.asa {
align-items: center;
}
.bz-img {
width: 24px;
height: 24px;
margin-right: 5px;
}
.icon-box {
width: 24px;
height: 24px;
background: #141427;
border: 1px solid #2c2c3e;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.info-wrap {
// line-height: 50px;
padding-left: 20px;
display: flex;
font-size: 1rem;
color: #c7cce6;
padding: 3px 0;
// border-bottom: 0.0625rem solid #e5e5e5;
// border-top: 0.0625rem solid #e5e5e5;
background: #1a1b24;
}
.info-wrap .bz {
font-size: 18px;
color: #333;
// border-right: 1px solid #e5e5e5;
display: flex;
align-items: center;
flex-direction: row;
padding: 0 1.5rem;
margin-right: 1rem;
color: #fff;
}
.info-wrap .rmyg {
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: #999;
}
.rmyg .jg {
font-size: 16px;
// font-weight: bold;
}
.r-time {
margin-left: auto;
color: #888;
padding-right: 40px;
font-size: 12px;
}
.info-wrap div span {
// line-height: 20px;
}
.asd {
margin-top: 0rem;
color: #888;
font-size: 12px;
}
.new-tb {
display: flex;
}
.kx {
flex: 1;
border-right: 0.0625rem solid #2c2c3e;
}
.fsdf {
background: #fff;
top: 5rem;
left: 18px;
height: 450px;
width: 300px;
}
.zfss {
display: flex;
align-items: center;
}
.dsad,
.sds {
font-size: 12px;
}
@media screen and (max-width: 800px) {
.fsdf {
top: 5rem;
left: 18px;
height: 380px;
width: 250px;
}
.icon-box,
.bz-img {
display: none;
}
.info-wrap {
flex-direction: column;
}
.r-time {
display: none;
}
.dadas {
flex-direction: column;
align-items: initial !important;
}
.info-wrap .dadas .rmyg {
display: flex;
flex-direction: row;
align-items: center;
}
.asd {
margin-top: 0rem;
}
// .info-wrap .rmyg span{
// flex: 1;
// }
.asd {
// width: 60%;
text-align: right;
padding-right: 0.5rem;
}
.sdada {
width: 50%;
}
.sdada .asd {
display: none;
}
.zfss {
flex-direction: column;
align-items: baseline;
}
.zfss {
width: 11rem;
}
.dadas {
flex: 1;
padding-left: 1rem;
}
.rmyg .sds {
width: auto;
text-align: left;
font-size: 14px;
white-space: nowrap;
}
.asd {
text-align: right;
width: auto;
}
.info-wrap .dadas .rmyg {
padding: 0 0rem;
justify-content: space-between;
}
.dsad {
display: none;
}
.info-wrap .bz {
margin-bottom: 1rem;
margin-right: 0;
padding: 0;
}
.info-wrap .rmyg {
padding: 0;
}
.rmyg .csafdas {
margin-top: 0.5rem;
width: auto;
background: none;
// color: #fff !important;
padding: 0;
text-align: left;
}
// .rmyg .csafdas {
// margin-top: 1rem;
// width: auto;
// background-color: #00a870;
// color: #fff !important;
// padding: 0.4rem 0.6rem;
// border-radius: 4px;
// text-align: center;
// }
}
.info-wrap {
background: none;
}
.info-wrap > div {
width: 100%;
padding: 10px;
}
.asd {
// width: 60%;
text-align: right;
padding-right: 0rem;
}
.day {
// .info-wrap .bz,
.asd,
.info-wrap {
color: #888;
}
.info-wrap .bz,
.info-wrap {
border-color: #2c313e;
}
.fsdf {
background: #2c313e;
}
.r-time {
color: #fff;
}
}
.el-dropdown-menu {
background: #1a1b24 !important;
}
.el-dropdown-menu span {
color: white !important;
}
</style>
src/components/ResetPwd.vue
+92
View File
@@ -0,0 +1,92 @@
<template>
<div class="reset-box">
<indexHeader></indexHeader>
<div class="contentBK">
<div class="content-wrap">
<div class="account">
<div class="main">
<p class="main_title">{{$t('lgpwd.setpwd')}}</p>
<div class="register-input">
<span class="register-item">{{$t('lpwd.newpwd')}}</span>
<input type="password" class="input-main input-content" maxlength="20" v-model="pwd" id="pwd">
</div>
<div class="register-input">
<span class="register-item">{{$t('lpwd.repwd')}}</span>
<input type="password" class="input-main input-content" maxlength="16" v-model="repwd" id="repwd">
</div>
<div style="margin-top: 10px;">
<span class="register-item"></span>
<button class="register-button curPer" @click="reset">{{$t('confirm')}}</button>
</div>
</div>
</div>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from '@/view/indexFooter'
export default {
components:{indexHeader,indexFooter},
data (){
return{
pwd:'',
repwd:'',
user_string:''
}
},
created (){
this.account_number = this.$route.params.user_string || ''
},
methods:{
reset(){
if(this.pwd == ''){
layer_tips(this.$t('lpwd.pwd'))
return;
} else if(this.repwd == ''){
layer.msg(this.$t('lgpwd.renewpwd'));
return;
} else if(this.pwd !== this.repwd){
layer.msg(this.$t('lay.twopwd'));
return;
} else {
this.$http({
url:'/api/' + url,
method:'post',
data:{}
})
}
}
}
}
</script>
<style scoped>
.content-wrap{background: url(../../static/imgs/bg_login.png) center bottom 316px repeat-x,-webkit-linear-gradient(top,#21263f,#262a42);}
.account{width: 75rem;margin: 0 auto;padding-top: 93px;overflow: hidden;min-height: 880px;}
.main{position: relative;padding: 0 0 60px 30px;}
.main_title{font-size: 36px;color: #c7cce6;}
.register-item{display: block;height:22px;color: #61688a;font-size: 12px}
.register-input{position: relative;margin-top: 20px}
.input-box{position: relative;margin-top: 40px;}
.input-main{width: 520px;min-height: 46px;border: 1px solid #4e5b85;padding: 0 20px;color: #c7cce6;font-size: 14px;border-radius: 3px;background-color: #1e2235; }
.icon{width: 48px;height: 48px;line-height: 48px;border-right: 1px solid #52688c;position: absolute;top: 0;}
.login-btn{width: 420px;margin-top: 40px;background: #5697f4;font-size: 16px;border-radius: 4px;color: #fff;line-height: 48px;cursor: pointer;}
.noaccount{color: #fff;}
.register-button{width:200px;display: inline-block;line-height: 46px;background-color: #7a98f7;border-radius: 4px;color: #fff;border: none}
.have-account{font-size: 14px;display:inline-block;margin-left: 30px}
.right-tip{position: absolute;left: 620px;top: 70px;line-height: 24px;padding-right: 50px;margin-top: 10px;font-size: 14px;color: #61688a;}
</style>
// WEBPACK FOOTER //
// src/components/ResetPwd.vue
src/components/account.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div class="box">
<indexHeader></indexHeader>
<div class="minheight" style="background: #181d25;">
<div class="fColor1" style="line-height: 60px; text-indent: 1em; font-size: 18px; width:1200px;margin:0 auto;">{{$t('header.center')}}</div>
<div class="account flex" style="max-height: 800px">
<left v-bind:lang="lang" :current="0"></left>
<router-view style="flex:1; border-radius: 10px; background: #000;margin-left: 3px;"></router-view>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader';
import indexFooter from "@/view/miniFooter";
import left from '@/view/left'
export default {
name: 'account',
data() {
return {
lang: ''
}
},
components: {
indexHeader,
indexFooter,
left,
},
// mounted(){
// this.bus.$on('nav_name',cur=>{
// this.array.findIndex()
// })
// }
}
</script>
<style scoped>
.box {
background-color: #273041;
}
@media screen and (max-width: 1920px) {
.minheight{
min-height: 850px;
}
}
@media screen and (min-width: 2500px) {
.minheight{
min-height: 1150px;
}
}
.box .account {
width: 75rem;
padding-top: 0px;
margin: 0px auto;
overflow: hidden;
}
</style>
src/components/c2c.vue
+762
View File
@@ -0,0 +1,762 @@
<template>
<div id="c2c-box" class="flex">
<div class="c2c-l">
<left></left>
</div>
<div class="c2c-r">
<div class="top">
<ul>
<li class="flex" v-for="(item,index) in currency_list" :key="index" :class="index == active?'bg_active':''" :data-id="item.id" @click="currency_click(item.id,item.name,index)">
<div class="flex">
<div>{{item.name}}/CNY</div>
<div class="redColor">{{item.name}}/人民币</div>
</div>
<span>></span>
</li>
</ul>
<div class="top-title flex">
<div>
<router-link tag="span" to="/c2c" class="link-span">tether {{currency_name}}</router-link>
<span>对CNY</span>
</div>
</div>
<div class="inp-items flex">
<div class="inp-item">
<div class="inp-title flex">
<div>{{$t('center.inbuy')}}{{currency_name}}</div>
</div>
<div class="how redColor ft14">如何买入?</div>
<div class="three-inp">
<div class="inp-box">
<span>{{$t('center.buynumber')}}{{currency_name}}</span>
<input type="number" v-model="num">
</div>
<div class="inp-box">
<span>{{$t('c2c.onePrice')}}CNY</span>
<input type="number" v-model="price">
</div>
<!-- <div class="inp-box">
<span>姓名</span>
<input type="text" v-model="user_name">
</div>
<div class="inp-box">
<span>详细内容</span>
<input type="text" v-model="content">
</div> -->
</div>
<div class="pay-opts flex">
<div>{{$t('c2c.payType')}}</div>
<div>
<label >
<input type="radio" name="pay" value="ali_pay" v-model="pay">
{{$t('c2c.ailipay')}}
</label>
</div>
<div>
<label >
<input type="radio" name="pay" value="we_chat" v-model="pay">
{{$t('c2c.wx')}}
</label>
</div>
<div>
<label >
<input type="radio" name="pay" value="bank" v-model="pay">
{{$t('c2c.bankcard')}}
</label>
</div>
<div class="redColor">（必须本人支付)</div>
</div>
<div class="btn-in" @click="bui_in">{{$t('center.inbuy')}}（CNY→{{currency_name}}）</div>
</div>
<div class="inp-item">
<div class="inp-title flex">
<div>
<span>{{$t('center.outsell')}}{{currency_name}}</span>
<span class="ft14" style="color:#666">({{currency_name}}{{$t('cfc.balance')}})</span>
</div>
</div>
<div class="how redColor ft14">如何卖出?</div>
<div class="three-inp">
<div class="inp-box">
<span>{{$t('center.sellnumber')}}{{currency_name}}</span>
<input type="number" v-model="num01">
</div>
<div class="inp-box">
<span>{{$t('c2c.onePrice')}}CNY</span>
<input type="number" v-model="price01">
</div>
<!-- <div class="inp-box">
<span>姓名</span>
<input type="text" v-model="user_name01">
</div>
<div class="inp-box">
<span>详细内容</span>
<input type="text" v-model="content01" />
</div> -->
</div>
<div class="pay-opts flex">
<div>{{$t('c2c.payType')}}</div>
<div>
<label >
<input type="radio" name="pay01" value="ali_pay" v-model="pay01">
{{$t('c2c.ailipay')}}
</label>
</div>
<div>
<label >
<input type="radio" name="pay01" value="we_chat" v-model="pay01">
{{$t('c2c.wx')}}
</label>
</div>
<div>
<label >
<input type="radio" name="pay01" value="bank" v-model="pay01">
{{$t('c2c.bankcard')}}
</label>
</div>
<div class="redColor">（必须本人支付)</div>
<!-- <router-link tag="div" to="/c2c">《交易须知》</router-link> -->
</div>
<div class="btn-out" @click="sell_out">{{$t('center.outsell')}}（{{currency_name}}→CNY）</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import left from '@/view/c2c/leftc2c'
export default {
components:{
left,
},
data() {
return {
token: "",
nowList: "listIn",
active: 0,
currency_list: [],
currency_name: "",
currency_id:'',
id: "",
price: "",
num: "",
pay: "",
user_name: "",
content: "",
price01: "",
num01: "",
pay01: "",
user_name01: "",
content01: "",
currency_list: [],
showList: true,
showDetail: false,
detail: {}, //li详情,
showTradeBox: false,
tradeParams: {
id: "",
total: "",
type: ""
},
buySellNum: "",
showTradeList: { show: false, index: "none" }
};
},
created() {
this.token = window.localStorage.getItem("token") || "";
if (this.token == "") {
this.$router.push("/components/login");
}
this.get_currency();
},
methods: {
fixedInp(n,e){
if(e.target.value == 0){
e.target.value == ''
} else {
var v = e.target.value + '';
var index = v.indexOf('.');
if(index != -1){
if(v.substr(index).length>(n+1)){
e.target.value = (v-0).toFixed(n);
}
}
}
},
// 获取币种列表
get_currency() {
this.$http({
url: "/api/currency/list",
method: "get",
headers: { Authorization: this.token }
}).then(res => {
if (res.data.type == "ok") {
this.currency_list = res.data.message.legal;
this.currency_name = res.data.message.legal[0].name;
this.id = res.data.message.legal[0].id;
}
});
},
//选择币种
currency_click(id, name, index) {
this.currency_name = name;
this.active = index;
this.id = id;
},
//添加买入
bui_in() {
let that = this;
if(!that.num){
layer.msg(this.$t('lay.innumber'));
return false;
}
if(!that.price){
layer.msg(this.$t('lay.mprice'));
return false;
}
if(!that.pay){
layer.msg(this.$t('lay.mpay'));
return false;
}
this.$http({
url: "/api/c2c_send",
method: "post",
data: {
price: that.price,
total_number: that.num,
way: that.pay,
currency_id: that.id,
type: "buy"
},
headers: { Authorization: this.token }
})
.then(res => {
if(res.data.type == 'ok'){
layer.msg(res.data.message);
setTimeout(function(){
that.$router.push("/c2cRelease");
},500)
}else if(res.data.type == '997'){
layer.msg(res.data.message);
setTimeout(function(){
that.$router.push("/userSetting");
},500)
}else if(res.data.type == '998'){
layer.msg(res.data.message);
setTimeout(function(){
that.$router.push("/authentication");
},500)
}else{
layer.msg(res.data.message);
that.price = "";
that.num = "";
that.pay = '';
}
})
.catch(res => {
layer.msg(res.data.message);
});
},
//添加卖出
sell_out() {
let that = this;
if(!that.num01){
layer.msg(this.$t('lay.outnumber'));
return false;
}
if(!that.price01){
layer.msg(this.$t('lay.mprice'));
return false;
}
if(!that.pay01){
layer.msg(this.$t('lay.mpay'));
return false;
}
this.$http({
url: "/api/c2c_send",
method: "post",
data: {
price: that.price01,
total_number: that.num01,
way: that.pay01,
currency_id: that.id,
type: "sell"
},
headers: { Authorization: this.token }
})
.then(res => {
if(res.data.type == 'ok'){
layer.msg(res.data.message);
setTimeout(function(){
that.$router.push("/c2cRelease");
},500)
}else{
layer.msg(res.data.message);
that.price01 = "";
that.num01 = "";
that.pay01 = '';
}
})
.catch(res => {
layer.msg(res.data.message);
});
}
}
}
</script>
<style lang='scss'>
#c2c-box {
margin: 10px 0 10px;
.btn-green {
background: #25796a;
color: #fff;
}
.buy-sell-box {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
> div {
position: relative;
margin: 200px auto;
width: 300px;
height: 256px;
top: 50px;
padding: 0 30px;
background: #262a42;
color: #fff;
text-align: center;
border-radius: 2px;
.title {
line-height: 50px;
font-size: 20px;
color: #6b80ae;
}
.close {
position: absolute;
top: 0;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.total {
line-height: 35px;
}
.inp{
padding: 6px 0;
line-height: 35px;
input {
line-height: 35px;
width: 190px;
padding: 0 10px;
margin-right: 5px;
}
}
.btn {
margin: 20px auto 0;
border-radius: 2px;
padding: 0 20px;
line-height: 35px;
background: #7a98f7;
cursor: pointer;
}
}
}
.redColor {
color: #7a98f7;
}
// background: #181b2a;
color: #c7cce6;
.mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
color: #333;
background: rgba(0, 0, 0, 0.7);
> .m-content {
border-radius: 4px;
background: #fff;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px 20px 30px;
// min-height: 400px;
max-height: 550px;
width: 400px;
> .title {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 18px;
text-align: center;
font-weight: 600;
> div:last-child {
position: absolute;
top: 0;
right: 0;
padding: 0 15px;
cursor: pointer;
}
}
> div:not(.title) {
line-height: 32px;
// border-top: 1px solid #eaecef;
}
div {
span:first-child {
margin-right: 5px;
display: inline-block;
width: 89px;
color: #7a98f7;
}
}
}
}
.more {
color: #7a98f7;
text-align: center;
cursor: pointer;
}
font-size: 14px;
> .c2c-l {
margin: 0 10px;
padding: 10px;
background: #181b2a;
width: 23%;
li {
// padding: 0 10px;
padding: 0 20px;
justify-content: space-between;
cursor: pointer;
.redColor {
margin-left: 10px;
}
&:hover {
background: rgb(38, 42, 66);
}
}
}
> .c2c-r {
padding: 10px 30px;
background: #181b2a;
margin-right: 10px;
width: 77%;
> .top {
// margin: 10px 30px 10px;
> .top-title {
font-size: 24px;
line-height: 2;
.link-span {
cursor: pointer;
&:hover {
color: #7a98f7;
}
}
}
.top-price {
> div {
margin-right: 20px;
// line-height: 1.8;
> span:last-child {
font-weight: 600;
font-size: 16px;
}
}
}
.inp-items {
> div:first-child {
margin-right: 30px;
border-right: 1px dashed #4e5b85;
padding-right: 30px;
}
> .inp-item {
flex: 1;
> .inp-title {
border-bottom: 1px solid #4e5b85;
font-size: 16px;
justify-content: space-between;
line-height: 3;
}
> .how {
line-height: 40px;
cursor: pointer;
}
> .three-inp {
> .inp-box {
position: relative;
height: 42px;
line-height: 40px;
padding-left: 112px;
margin-bottom: 15px;
> span {
position: absolute;
width: 112px;
// text-align: center;
top: 0;
left: 0;
}
> div,
> input {
color: #c7cce6;
display: block;
width: 100%;
line-height: 40px;
padding: 0 20px;
// background: #1e2235;
border: 1px solid #4e5b85;
background: none;
}
> div {
color: #7a98f7;
}
}
}
.pay-opts {
flex-wrap: wrap;
> div:nth-child(n + 2) {
margin-left: 15px;
}
> div {
// padding-right: 20px;
line-height: 40px;
> input {
vertical-align: middle;
}
}
}
> .btn-in,
.btn-out {
margin-top: 20px;
line-height: 42px;
text-align: center;
cursor: pointer;
color: #fff;
background: #4e5b85;
}
}
}
}
> .bot {
color: #6b80ae;
// margin: 10px 30px;
// background: #181b2a;
> .bot-title {
margin: 30px 0 0;
// border-bottom: 1px solid #ccc;
font-size: 16px;
line-height: 40px;
justify-content: space-between;
align-items: center;
> div:first-child {
cursor: pointer;
span {
font-weight: 600;
line-height: 40px;
margin-right: 20px;
}
.active {
color: #7a98f7;
border: none;
}
}
> .flex {
height: 17px;
line-height: 15px;
cursor: pointer;
> div {
margin-right: 10px;
border: 1px solid #ccc;
transition: all 0.3s;
width: 32px;
border-radius: 7.5px;
div {
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
}
}
.switch-on {
padding-left: 0;
background: #ccc;
}
.switch {
transition: all 0.3s;
background: #7a98f7;
padding-left: 15px;
}
}
}
> .list-title {
height: 40px;
// justify-content: space-between;
line-height: 40px;
font-weight: 600;
}
.list-title,
ul li .content {
width: 100%;
color: #c7cce6;
justify-content: space-between;
// cursor: pointer;
text-align: center;
padding: 8px 5px;
line-height: 24px;
> div:first-child {
width: 6%;
height: 24px;
text-align: left;
}
> div:nth-child(n + 2) {
width: 12%;
}
> div:last-child {
// min-width: 19%;
width: 24%;
}
> .last {
text-align: right;
height: 24px;
> div,
> span {
float: right;
margin: 0 5px;
}
.btn-last {
padding: 0 10px;
min-width: 55px;
max-width: 80px;
color: #fff;
// margin-left: 70px;
text-align: center !important;
cursor: pointer;
}
}
}
ul li .trade-list {
background: #262a42;
width: 100%;
padding: 5px 30px 10px;
margin: 0 auto;
p {
font-weight: 600;
// font-size: 20px;
// font-size: 16px;
line-height: 36px;
span {
flex: 1;
text-align: center;
}
span:first-child {
text-align: left;
}
span:last-child {
text-align: right;
}
}
ul {
li {
padding: 12px 0;
border-bottom: 1px solid #303956;
> div {
text-align: center;
width: 25%;
}
> div:first-child {
text-align: left;
}
> div:last-child {
text-align: right;
div {
float: right;
padding: 0 14px;
margin: 0 6px;
line-height: 1.6;
cursor: pointer;
}
}
}
}
}
.ul-out li .content {
> div:first-child {
color: #25796a;
}
.btn-last {
background: #25796a;
}
}
.ul-in li .content {
> div:first-child {
color: #7a98f7;
}
.btn-last {
background: #7a98f7;
}
}
}
}
}
.detailit,
.showtrade {
// float: right;
margin-right: 20px;
padding: 0 10px;
min-width: 55px;
max-width: 80px;
color: #fff;
text-align: center !important;
cursor: pointer;
background: #7a98f7;
}
</style>
// WEBPACK FOOTER //
// src/components/c2c.vue
src/components/dealCenter.vue
+151
View File
@@ -0,0 +1,151 @@
<template>
<div style="margin-top: 3px;">
<div>
<tv></tv>
</div>
<div class="flex" style="margin:3px 0;">
<div style="flex:1;">
<div class="entrusts">
<div class="tab-entrust">
<span class="fColor1" :class="{active:whichEntrust == 'entrust'}"
@click="whichEntrust = 'entrust'">{{ $t('center.cdel') }}</span>
<span class="fColor1" :class="{active:whichEntrust == 'hisentrust'}"
@click="whichEntrust = 'hisentrust'">{{ $t('center.hdeal') }}</span>
</div>
<div class="scroll flex column" style="flex: 1;">
<div class="entrust-box" v-if="whichEntrust == 'entrust'">
<entrust></entrust>
</div>
<div class="histentrust-box" v-if="whichEntrust == 'hisentrust'">
<hisentrust></hisentrust>
</div>
</div>
</div>
</div>
<div>
<trade></trade>
</div>
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import notice from "@/components/noticeList";
import deal from "@/view/deal";
import exchange from "@/view/exchange";
import trade from "@/view/trade";
import chart from "@/view/chart";
import entrust from "@/view/entrust";
import hisentrust from "@/view/hisentrust";
import currency from "@/view/currency";
import complete from "@/view/complete";
import tv from "@/view/tv";
export default {
name: "dealCenter",
components: {
indexHeader,
load: 1,
notice,
deal,
exchange,
// market,
trade,
chart,
entrust,
hisentrust,
// detail,
currency,
complete,
// TvTop,
// kline,
tv
},
data() {
return {
isRouterAlive: true,
whichEntrust: 'entrust'
};
},
created() {
this.address = localStorage.getItem("address") || "";
},
methods: {},
mounted() {
}
};
</script>
<style scoped lang="scss">
.home {
margin-top: 0px;
margin-bottom: 3px;
justify-content: space-between;
height: 100%;
> .home-l {
width: calc(100% - 683px);
margin-top: 3px;
}
> .home-r {
width: 680px;
margin-top: 3px;
> .home-r-t {
justify-content: space-between;
min-height: 220px;
max-height: calc(100% - 360px);
> div {
width: 338px;
background: #181b2a;
}
}
> .home-r-b {
margin-top: 3px;
background: #181b2a;
height: 360px;
}
}
}
.entrusts {
background: #181d25;
padding: 15px 20px;
height: 100%;
display: flex;
flex-direction: column;
.tab-entrust {
color: #F1F1F1;
span {
margin-right: 15px;
cursor: pointer;
}
span:hover{
color:#00a4d8;
border-bottom: 1px solid #00a4d8;
}
}
.histentrust-box,.entrust-box{
flex:1;
}
}
.active{
border-bottom: 1px solid #00a4d8;
}
.trade {
height: 100%;
background: #181d25;
margin-left: 3px;
}
</style>
src/components/dealCenterV2.vue
+1026
View File
File diff suppressed because it is too large Load Diff
src/components/depth.vue
+230
View File
@@ -0,0 +1,230 @@
<template>
<div style="height: 100%;">
<!-- <highcharts :options="chartOptions" :callback="myCallback"></highcharts> -->
<div id="container" style="width:100%;height:100%"></div>
</div>
</template>
<script>
import Highcharts from "./highcharts.js";
export default {
name: "HelloWorld",
data() {
return {}
},
created() {
this.$nextTick(() => {
this.myCallback()
})
},
methods: {
myCallback() {
let zdy_chart = new Highcharts.Chart('container', {
colors: ["#00a870", "#f36464"], //["#243235", "#392231"],//买入/卖出颜色
chart: {
type: "areaspline",
backgroundColor: "#000",
borderWidth: 0,
},
// title: {
// text: ""
// },
// subtitle: {
// text: ""
// },
// credits: {
// text: "",
// href: ""
// },
// plotOptions: {
// area: {
// stacking: 'normal',
// }
// },
xAxis: {
// show:false,
// gridLineWidth: 0,
// lineColor: "#C0C0C0",
// tickColor: "#C0C0C0",
// labels: {
// style: {
// color: "#cccccc"
// },
// // enabled:false,//隐藏x轴
// formatter: function() {
// return this.value
// },
// },
// title: {
// // enabled: false,
// style: {
// color: "#575E7E"
// }
// },
// tickmarkPlacement:'on'
},
// y轴
yAxis: {
show: false,
lineColor: "#888888",
gridLineColor:"#2c2c3e",
// lineWidth: 1,
// tickWidth: 0, //去掉刻度
gridLineWidth: 1, //去掉y轴方向的横线
labels: {
style: {
color: "#888888"
},
},
},
// plotOptions: {
// area: {
// pointStart: 0,
// borderColor:"#ff00ff",
// marker: {
// enabled: !1,
// symbol: "circle",
// radius: 2,
// states: {
// hover: {
// // enabled: !0
// }
// }
// }
// },
// series: {
// // fillOpacity: 1,
// borderColor:"#ff00ff",
// }
// },
series: [{
// name: '买盘委托',
// [214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [900, 12]
// data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [900, 12]]
data: [],
fillOpacity: 0.3, // 设置填充透明度
},
{
// name: '卖盘委托',
// [910, 8], [1000, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]
// data: [[910, 8], [1000, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]]
data: [],
fillOpacity: 0.3, // 设置填充透明度
},
]
});
this.sockets.subscribe("market_depth", msg => {
if (msg.type == "market_depth") {
if (msg.symbol == localStorage.getItem('symbol')) {
let inData = msg.bids;
let outData = msg.asks;
// let l = inData.map(item => {
// return item[0]
// }).sort((a, b) => a - b)
// let z = inData.map(item => {
// return item[1]
// }).sort((a, b) => b - a)
// let x = outData.map(item => {
// return item[0]
// }).sort((a, b) => a - b)
// let xa = outData.map(item => {
// return item[1]
// }).sort((a, b) => a - b)
// let shang = l.map((item, index) => [item, z[index]])
// let xia = x.map((item, index) => [item, xa[index]])
// xia.unshift(shang[shang.length-1]);
// let [inlist, outList] = [inData, outData];
// let [max, max1] = [0, 0];
// for (let i in inData) {
// inlist[i].price = inlist[i][0];
// inlist[i].number = inlist[i][1];
// max = inlist[i].number > max ? inlist[i].number : max;
// }
// // that.inMaxValue = max;
// // that.inlist = inlist;
// for (let i in outList) {
// outList[i].price = outList[i][0];
// outList[i].number = outList[i][1];
// max1 = outList[i].number > max1 ? outList[i].number : max;
// // that.sellMaxValue = outList[i].number;
// }
zdy_chart.series[0].setData(inData);
zdy_chart.series[1].setData(outData);
}
}
})
// let a =219
// let b =910
// setInterval(()=>{
// console.log('series',zdy_chart)
// a+=10
// b+=10
// // zdy_chart.series = [{
// // name: '买盘委托',
// // data: [[a, 99], [289, 78], [305, 59], [458, 36], [500, 45], [900, 12]]
// // },
// // {
// // name: '卖盘委托',
// // data: [[b, 8], [1000, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]]
// // }]
// let aa = [[a, 99], [289, 78], [305, 59], [458, 36], [500, 45], [900, 12]]
// let bb = [[b, 8], [1000, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]]
// zdy_chart.series[0].setData(aa);
// zdy_chart.series[1].setData(bb);
// },1000)
}
}
};
</script>
<style>
.highcharts-container {
width: 600px;
/* height: 400px; */
border: 1px solid #000;
margin: auto;
}
.highcharts-title,
.highcharts-credits,
.highcharts-axis-title,
.highcharts-legend {
display: NONE;
}
</style>
src/components/fiatradCenter.vue
+32
View File
@@ -0,0 +1,32 @@
var normalizeComponent = require("!../../node_modules/vue-loader/lib/component-normalizer")
/* script */
export * from "!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./fiatradCenter.vue"
import __vue_script__ from "!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./fiatradCenter.vue"
/* template */
import __vue_template__ from "!!../../node_modules/vue-loader/lib/template-compiler/index?{\"id\":\"data-v-793183ca\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./fiatradCenter.vue"
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
export default Component.exports
//////////////////
// WEBPACK FOOTER
// ./src/components/fiatradCenter.vue
// module id = null
// module chunks =
src/components/highcharts.js
+8
View File
File diff suppressed because one or more lines are too long
src/components/home.vue
+114
View File
@@ -0,0 +1,114 @@
<template>
<div class="" style="background: none;">
<indexHeader></indexHeader>
<router-view></router-view>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import homeContent from '@/view/homeContent'
import indexFooter from '@/view/indexFooter'
export default {
name: 'home',
data() {
return {
}
},
methods: {
init() {
var that = this;
this.$http({
url: "/api/" + "currency/quotation_new",
method: "get",
data: {}
// headers: { Authorization: localStorage.getItem("token") }
}).then(res => {
if (res.data.type == "ok") {
var arr = [];
var arr2 = [];
for (var i = 0; i < res.data.message.length; i++) {
for (var j = 0; j < res.data.message[i].quotation.length; j++) {
arr.push(res.data.message[i].quotation[j]);
}
}
that.quotationList = arr;
that.marketSocket();
}
})
.catch(error => {
});
},
// 行情socket
marketSocket() {
// console.error('开始调用ws');
var that = this;
that.$socket.emit("login", localStorage.getItem("user_id"));
that.sockets.subscribe("daymarket", msg => {
// console.error('收到回调')
if (msg.type == "daymarket") {
for (var i = 0; i < that.quotationList.length; i++) {
if (
that.quotationList[i].legal_id == msg.legal_id &&
that.quotationList[i].currency_id == msg.currency_id
) {
that.quotationList[i].now_price = msg.now_price;
that.quotationList[i].change = msg.change;
that.quotationList[i].volume = msg.volume;
that.quotationList[i].high = msg.high;
that.quotationList[i].low = msg.low;
}
}
}
});
},
},
components: {indexHeader, homeContent, indexFooter},
created() {
this.$http({
url: '/api/' + 'currency/quotation_new',
method: 'get',
data: {},
headers: {'Authorization': localStorage.getItem('token')},
}).then(res => {
if (res.data.type == 'ok') {
this.tabList = res.data.message;
var msg = res.data.message;
var arr_quota = [];
for (var i = 0; i < msg.length; i++) {
arr_quota[i] = msg[i].quotation
}
;
if (!localStorage.getItem('legal_id') && !localStorage.getItem('currency_id') && !localStorage.getItem('legal_name') && !localStorage.getItem('currency_name')) {
window.localStorage.setItem('legal_id', msg[0].quotation[0].legal_id);
window.localStorage.setItem('currency_id', msg[0].quotation[0].currency_id);
window.localStorage.setItem('legal_name', msg[0].quotation[0].legal_name);
window.localStorage.setItem('currency_name', msg[0].quotation[0].currency_name);
var symbol = msg[0].quotation[0].currency_name + '/' + msg[0].quotation[0].legal_name;
// var priceScale=Math.pow(10,5);
var priceScale = 100000;
window.localStorage.setItem('priceScale', priceScale);
window.localStorage.setItem('symbol', symbol);
console.log('msg[0].quotation[0].logo',msg[0].quotation[0].logo)
window.localStorage.setItem("bzlogo", msg[0].quotation[0].logo);
window.localStorage.setItem("leverTradeId", msg[0].quotation[0].id);
}
}
}).catch(error => {
console.log(error)
});
}
}
</script>
<style>
</style>
src/components/iepnList.vue
+608
View File
@@ -0,0 +1,608 @@
<template>
<div class="upStar" v-loading="loading" style="height: auto; background-color: #181d25;">
<indexHeader></indexHeader>
<div class="flex alcenter" style="
width: 100%; height: 320px;
background:#00a4d8; color:#fff;
background-size:cover;
background-image:url('../static/imgs/iepnbg.jpg');">
<div style="width: 75rem; margin: 0 auto;">
<h1 style="line-height: 100px;font-size: 24px;">
{{ $t('iepn.htitle') }}
</h1>
<h5 style="line-height: 60px;font-size: 18px;">{{ $t('iepn.subtitle') }}</h5>
</div>
</div>
<div class="SellInfo-wrap"
style="width: 75rem; margin-top: -15px; background: #fff; margin: -15px auto 0; border-radius:10px;">
<div class="ModuleTitle-wrap flex alcenter">
<div class="flex1">{{$t('iepn.ieorecord')}}</div>
<div style="padding-right: 30px;">
<!-- <el-link href="/#/dealCenter" type="warning">去交易</el-link>-->
<button type="button" class="el-button more-btn el-button--default"><!---->
<span><i class="el-icon-s-help ft20"></i></span>
</button>
</div>
</div>
<div class="title">{{currency}}</div>
<div class="plan-amount">{{ $t('iepn.plannum') }}:{{ iepn.total }}</div>
<div id="echarts" style="width: 600px; margin:0 auto; height: 400px;">
<v-chart :options="polar" width="482" height="322"/>
</div>
<div style="padding:20px;">
<el-tabs class="mt20" v-model="defaultPanel" align-center>
<el-tab-pane :label="$t('iepn.ieobuy')" name="first" style="height: 300px;">
<el-form class="input-white" ref="form" :model="form" label-width="80px">
<el-form-item :label="$t('iepn.nowprice')">
<span class="ft18" :class="change>0?'green':'red'">{{price}}<i
class="fColor2 ft14 ml10"
style="font-style: normal;">USDC</i></span>
</el-form-item>
<el-form-item label="Market price">
<span class="ft18" :class="change>0?'green':'red'">{{dprice}}<i
class="fColor2 ft14 ml10"
style="font-style: normal;">USDC</i></span>
</el-form-item>
<el-form-item :label="$t('iepn.ieoamount')">
<el-input :placeholder="$t('iepn.ieomaxamount')+asset_list.change_balance"
v-model="form.name">
<i slot="suffix" @click="form.name=parseInt(asset_list.change_balance)"
style="cursor:pointer; font-style: normal;">{{$t('lever.all')}}</i>
</el-input>
</el-form-item>
<el-form-item :label="$t('iepn.ieoscount')">
<span class="ft16">
≈ {{form.name/price|toFixeds(4)}}<i class="fColor2 ft14 ml5"
style="font-style: normal;">{{currency}}</i></span>>={{iepn.min}}
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{$t('iepn.ieobuynow')}}</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane :label="$t('iepn.ieorecord')" name="second" style="height:300px; overflow: auto;">
<el-table
:data="records"
style="width: 100%">
<el-table-column
prop="created_at"
:label="$t('sgr.time')"
width="180">
</el-table-column>
<el-table-column
prop="account_number"
:label="$t('sgr.user')">
</el-table-column>
<el-table-column
prop="scount"
:label="$t('iepn.ieoscount')"
width="180">
</el-table-column>
<el-table-column
prop="amount"
:label="$t('iepn.ieoamount')"
width="180">
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-if="false" class="SellInfo-wrap"
style="width: 75rem; background: #fff; margin: -15px auto 0; border-radius:10px;">
<div class="ModuleTitle-wrap flex alcenter">
<div class="flex1">{{$t('iepn.ieorecord')}}</div>
<div style="padding-right: 30px;">
<!-- <el-link href="/#/dealCenter" type="warning">去交易</el-link>-->
<button type="button" class="el-button more-btn el-button--default"><!---->
<span><i class="el-icon-star-off ft20"></i></span>
</button>
</div>
</div>
<div style="padding:0 5%;">
<el-steps :active="2">
<el-step :title="$t('iepn.pstart')" icon="el-icon-s-flag"></el-step>
<el-step :title="$t('iepn.pdoing')" icon="el-icon-s-promotion"></el-step>
<el-step :title="$t('iepn.pending')" icon="el-icon-success"></el-step>
</el-steps>
<!-- <el-input style="background: #f5f5f5;" v-model="buyNumber" placeholder="请输入内容"></el-input>-->
<el-tabs class="mt20" v-model="defaultPanel" align-center>
<el-tab-pane :label="$t('iepn.ieobuy')" name="first" style="height: 300px;">
<el-form class="input-white" ref="form" :model="form" label-width="80px">
<el-form-item :label="$t('iepn.nowprice')">
<span class="ft18" :class="change>0?'green':'red'">{{price}}<i class="fColor2 ft14 ml10"
style="font-style: normal;">USDC</i></span>
</el-form-item>
<el-form-item :label="$t('iepn.ieoamount')">
<el-input :placeholder="$t('iepn.ieomaxamount')+asset_list.change_balance"
v-model="form.name">
<i slot="suffix" @click="form.name=parseInt(asset_list.change_balance)"
style="cursor:pointer; font-style: normal;">{{$t('lever.all')}}</i>
</el-input>
</el-form-item>
<el-form-item :label="$t('iepn.ieoscount')">
<span class="ft16">
≈ {{form.name/price|toFixeds(4)}}<i class="fColor2 ft14 ml5"
style="font-style: normal;">{{currency}}</i></span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{$t('iepn.ieobuynow')}}</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane :label="$t('iepn.ieorecord')" name="second" style="height:300px; overflow: auto;">
<el-table
:data="records"
style="width: 100%">
<el-table-column
prop="created_at"
:label="$t('sgr.time')"
width="180">
</el-table-column>
<el-table-column
prop="account_number"
:label="$t('sgr.user')">
</el-table-column>
<el-table-column
prop="scount"
:label="$t('iepn.ieoscount')"
width="180">
</el-table-column>
<el-table-column
prop="amount"
:label="$t('iepn.ieoamount')"
width="180">
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="HotRecommend-wrap hot-wrap">
<div class="ModuleTitle-wrap">{{ $t('iepn.hotcommond') }}</div>
<div class="body">
<div class="img-wrap"><img
:src="lang==='zh'?'/upload/1630853119431386.jpeg':'/upload/1630853119431386.jpeg'"
alt=""
class="banner-img"></div>
<div class="body-right">
<!-- <div class="title"><span class="title-text">{{ $t('iepn.ctitle') }}</span></div>-->
<p class="content-text" style="margin-top:0; padding-top: 0;">{{
iepn.dsp
}}<br><br>{{ $t('iepn.starttime') }}:{{ iepn.start }}
<br>
<!-- {{ $t('iepn.plannum') }}：{{ iepn.total }} <br>-->
{{ $t('iepn.endtime') }}:{{ iepn.end }}</p>
<a href="https://iepninf.com/" target="_blank">
<button v-if="false" type="button" class="el-button more-btn el-button--default"><!---->
<!----><span>{{ $t('iepn.seemore') }}</span>
</button>
</a>
<a href="/white.pdf" class="ml10" target="_blank">
<button v-if="false" type="button" class="el-button more-btn el-button--default"><!---->
<!----><span>{{ $t('iepn.baipishu') }}</span>
</button>
</a>
</div>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import indexFooter from "@/view/miniFooter";
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue
import echarts from 'echarts'
export default {
name: "upStar",
filters: {
toFixeds: function (value, n) {
value = Number(value);
return value.toFixed(n);
}
},
components: {
indexHeader, indexFooter,
'v-chart': ECharts
},
data() {
return {
loading: false,
asset_list: {},
dycimalPrice: true,
dprice: 0,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
records: [],
currency: plat_form_currency,
currency_id: 0,
price: 0,
change: 0,
defaultPanel: 'first',
buyNumber: '',
more: "{{$t('more')}}...",
newList: [],
iepn: {},
polar: {
color: [
'#007aff',
'#57bc7d',
],
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 40000000, name: this.$t('iepn.pushednum')},
{value: 1802560, name: this.$t('iepn.remindnum')}
]
}
]
},
lang: localStorage.getItem('lang')
};
},
created() {
let that = this;
that.$socket.emit("login", localStorage.getItem('user_id'));
this.getdata();
that.sockets.subscribe("kline", msg => {
let obj = {}
if (msg.symbol == that.currency + '/USDC') {
that.currency_id = msg.currency_id;
if (msg.period == '1min') {
that.price = that.dycimalPrice ? msg.close : that.iepn.price;
that.dprice = msg.close;
}
if (msg.period == '1day') {
that.change = msg.change;
}
}
});
},
methods: {
getdata() {
var that = this;
this.$http({
url: "/api/wallet/list",
method: "post",
data: {},
headers: {Authorization: window.localStorage.getItem('token')}
}).then(res => {
if (res.data.type == "ok") {
// alert(res.data.message);
res.data.message.change_wallet.balance.forEach(x => {
if (x.currency_name == "USDC") {
that.asset_list = x;
}
})
} else {
return;
}
})
.catch(error => {
console.log(error);
});
},
getRecord() {
// /api/
let that = this;
this.$http({
url: "/api/ieo/record",
method: "get",
headers: {Authorization: window.localStorage.getItem('token')}
}).then(res => {
that.records = res.data;
}).catch(res => {
});
},
goTrade() {
this.$message.warning(this.lang === 'zh' ? '平台币功能演示站不可用' : 'Not support in demo site yet');
// window.localStorage.setItem('currency_name', 'IEPN');
// window.localStorage.setItem('currency_id', '18');
// window.localStorage.setItem('symbol', 'IEPN/USDC');
// window.localStorage.setItem('current', 'IEPN/USDC');
// window.localStorage.setItem('index2', 12);
// this.$router.push('/dealCenter');
},
getNotice() {
this.$http({
url: '/api/' + 'news/list',
method: 'post',
data: {c_id: '3'},
}).then(res => {
this.newList = res.data.message.list
})
},
goBefore() {
this.$router.back(-1);
},
getMore() {
},
goDetail(id) {
var id = id;
this.$router.push({
name: "noticeDetail",
query: {id: id}
});
},
onSubmit() {
let that = this;
this.$confirm(this.$t('lay.confirm'), this.$t('auth2.reminder'), {
confirmButtonText: this.$t('lay.sure'),
cancelButtonText: this.$t('lay.ceil'),
type: 'warning'
}).then(() => {
if ((that.amount / that.price) < that.iepn.min) {
that.$toast.info(`The purchase quantity shall not be less than ${that.iepn.min} ${that.currency}`);
return false;
}
that.loading = true;
this.$http({
url: "/api/wallet/ieo",
method: "post",
data: {currency: that.currency_id, amount: that.form.name},
headers: {Authorization: window.localStorage.getItem('token')}
}).then(res => {
that.loading = false;
if (res.data.type == "ok") {
// alert(res.data.message);
that.$message.success(res.data.message);
that.form.name = '';
that.getdata();
that.getRecord();
} else {
that.$message.warning(res.data.message);
// return;
}
}).catch(error => {
that.loading = false;
console.log(error);
});
}).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
});
}
},
mounted() {
this.iepn = {
start: ieoStart,
end: ieoEnd,
price: ieoStartPrice
};
this.getRecord();
// return;
var that = this;
this.$http({
url: '/api/iepn',
method: 'get'
}).then(res => {
that.iepn = res.data.message;
that.dycimalPrice = !that.iepn.fixed;
that.price = that.dycimalPrice == false ? that.iepn.price : 0;
that.currency = that.iepn.currency;
that.polar.series[0].data[0].value = that.iepn.yfx;
that.polar.series[0].data[1].value = that.iepn.sy;
})
}
};
</script>
<style lang="scss" scoped>
.ModuleTitle-wrap {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 47px;
position: relative;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #12161c;
}
.input-white {
::v-deep .el-input__inner {
background: inherit !important;
color: #888a85 !important;
border: 1px solid #DCDFE6 !important;
}
::v-deep .el-input__inner:focus {
border-color: #409EFF !important;
outline: 0;
}
}
.ModuleTitle-wrap:after {
position: absolute;
content: "";
width: 4px;
height: 23px;
background: #00a4d8;
border-radius: 2px;
left: 26px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.SellInfo-wrap {
.title {
text-align: center;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #161515;
}
.plan-amount {
text-align: center;
padding-top: 30px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #57bc7d;
}
}
.hot-wrap {
width: 75rem;
margin: 0 auto;
margin-top: 17px;
}
.more-btn {
border: 0;
padding: 12px 44px;
//background: #efb82d;
border-radius: 4px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #141414;
font-weight: bold;
}
.HotRecommend-wrap {
background: #fff;
border-radius: 8px;
padding-bottom: 38px;
.body {
display: flex;
flex-direction: row;
width: 100%;
.img-wrap {
flex: 1;
padding-left: 26px;
}
.banner-img {
width: 100%;
}
.body-right {
width: 500px;
padding-left: 65px;
padding-right: 85px;
text-align: center;
box-sizing: content-box;
.title-text {
font-size: 14px;
font-family: Adobe Heiti Std;
font-weight: 400;
color: #12161c;
position: relative;
z-index: 0;
}
.content-text {
padding-top: 35px;
padding-bottom: 50px;
font-size: 12px;
font-family: SimHei;
font-weight: 400;
color: #12161c;
line-height: 24px;
text-align: left;
}
.more-btn {
border: 0;
padding: 12px 44px;
//background: #efb82d;
border-radius: 4px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #141414;
font-weight: bold;
}
}
}
}
</style>
src/components/klineChart.vue
+388
View File
@@ -0,0 +1,388 @@
<template>
<div style="display: flex; flex-direction: column; height: 100%;" class="sds">
<div class="subplot-box">
<div class="sx-item sx-item2" :class="{hpAvtive:timeType==item.type}" v-for="(item,index) in timeArr"
@click="ggsj(item)">{{item.type}}</div>
<div class="tblb">
<div class="tb-i" :class="{'tb-Avtive':ti==0}" @click="ti=0">
{{$t('zfr1')}}
</div>
<div class="tb-i" :class="{'tb-Avtive':ti==1}" @click="ti=1">
{{$t('zfr2')}}
</div>
</div>
</div>
<div id="chart_kline" style="flex: 1;" v-show="ti==0">
</div>
<div style="flex: 1; height: 100%;" v-show="ti==1">
<depth></depth>
</div>
<!-- <div class="subplot-box">
<div class="sx-item" :class="{hpAvtive:subplot==item.text}" v-for="(item,index) in subplotList"
@click="setSubIndicator(item.text)">{{item.text}}</div>
</div> -->
</div>
</template>
<script>
import {
init,
dispose,
indicator,
paint,
} from 'klinecharts'
import depth from '@/components/depth'
export default {
components: {
depth
},
data() {
return {
ti: 0,
kshow: true,
timeType: '1min',
timeArr: [{
text: '1',
type: '1min',
val: 1
},
{
text: '5',
type: '5min',
val: 5,
},
{
text: '15',
type: '15min',
val: 15,
},
{
text: '30',
type: '30min',
val: 30,
},
{
text: '60',
type: '60min',
val: 60,
},
{
text: '1D',
type: '1day',
val: 1440,
},
{
text: '1W',
type: '1week',
val: 10080,
},
{
text: '1M',
type: '1mon',
val: 43200,
}
],
chart: null,
kList: [],
pollTimer: null,
subplot: 'VOL',
subplotList: [{
type: '',
text: 'VOL',
},
{
type: '',
text: 'MACD',
},
{
type: '',
text: 'KDJ',
},
{
type: '',
text: 'RSI',
},
{
type: '',
text: 'DMI',
},
{
type: '',
text: 'OBV',
},
{
type: '',
text: 'BOLL',
},
{
type: '',
text: 'SAR',
},
{
type: '',
text: 'DMA',
}, {
type: '',
text: 'TRIX',
},
{
type: '',
text: 'BRAR',
},
{
type: '',
text: 'VR',
},
{
type: '',
text: 'WR',
},
{
type: '',
text: 'ROC',
},
{
type: '',
text: 'MTM',
},
{
type: '',
text: 'PSY',
},
]
}
},
created() {
this.createWidget(this.timeArr[0]);
},
methods: {
ggsj(item) {
this.timeType = item.type
if (this.pollTimer) {
clearInterval(this.pollTimer)
this.pollTimer = null
}
this.createWidget(item)
this.kshow = false
this.chart = null
dispose('chart_kline')
},
createWidget(data) {
let data2 = data
let obj = data
let symbol = localStorage.getItem('symbol')
this.$nextTick(() => {
// setTimeout(() => {
this.chart = init('chart_kline')
let bf = localStorage.getItem('night_mode') || 1;
let chatColor = bf == 0 ? "#e5e5e5" : "#27282d"
let chartStyle = {
grid: {
horizontal: {
color: chatColor,
},
vertical: {
color: chatColor,
}
},
// x轴
xAxis: {
size: 'auto',
// x轴线
axisLine: {
color: chatColor,
},
// x轴分割线
tickLine: {
color: chatColor
}
},
yAxis: {
axisLine: {
color: chatColor,
},
// x轴分割线
tickLine: {
color: chatColor
}
},
// 图表之间的分割线
separator: {
color: chatColor,
},
}
this.chart.setStyles(chartStyle);
// this.chart.createIndicator('VOL')
let to = new Date().getTime()
// console.log(to , (Number(data.val) * 60 * 1000))
let form = to - (data.val * 60000)
this.$http({
url: `/api/currency/new_timeshar?from=${form}&to=${to}&symbol=${symbol}&period=${obj.type}`,
method: 'get',
}).then(res => {
let data = res.data.data
let list = data.map(item => {
return {
close: item.close,
high: item.high,
low: item.low,
open: item.open,
timestamp: item.time,
volume: item.volume
}
})
this.kList = list
this.kshow = true
this.chart.applyNewData(list)
const decimalString = list[0].close.toString().split(".")[1]?.length || 0;
this.chart.setPriceVolumePrecision(decimalString, decimalString)
console.log('dwsdfs', decimalString)
this.updateData2()
if (this.pollTimer) {
clearInterval(this.pollTimer)
}
this.pollTimer = setInterval(() => {
this.getF2(data2)
}, 3000)
})
// }, 1000)
// 为图表添加数据
})
},
getF2(data) {
// console.log('data',data)
let obj = data
let symbol = localStorage.getItem('symbol')
let to = new Date().getTime()
// console.log(to , (Number(data.val) * 60 * 1000))
let form = to - (data.val * 60000)
this.$http({
url: `/api/currency/new_timeshar?from=${form}&to=${to}&symbol=${symbol}&period=${obj.type}`,
method: 'get',
}).then(res => {
let data = res.data.data
let list = data.map(item => {
return {
close: item.close,
high: item.high,
low: item.low,
open: item.open,
timestamp: item.time,
volume: item.volume
}
})
// this.kList= list
this.chart.updateData(list[list.length - 1])
})
},
setSubIndicator(name) {
this.subplot = name
this.chart.createIndicator(name)
},
// 更新数据
updateData2() {
this.sockets.subscribe('kline', msg => {
if (msg.type == 'kline' && this.kshow && msg.period == this.timeType) {
if (msg.symbol == localStorage.getItem('symbol')) {
let data = this.kList[this.kList.length - 1]
let data2 = {
...data,
close: msg.close,
high: msg.high || data.high,
low: msg.low || data.low,
open: msg.open,
timestamp: data.timestamp,
volume: msg.volume || data.volume
}
this.chart.updateData(data2)
}
}
})
},
}
}
</script>
<style>
.subplot-box {
display: flex;
padding: 2rem 1rem;
font-size: 1rem;
color: #999;
cursor: pointer;
flex-wrap: wrap;
}
.hpAvtive {
color: #00f0ff;
}
.sx-item {
margin-right: 1rem;
}
.sx-item2 {
margin-right: 3rem;
}
.tblb {
display: flex;
margin-left: auto;
}
.tb-i {
margin-left: 40px;
cursor: pointer;
}
.tb-Avtive {
color: #00f0ff;
}
@media screen and (max-width: 800px) {
#chart_kline {
min-height: 450px;
}
.subplot-box {
padding: 1rem 1rem;
}
.sds {
padding-left: 0.5rem;
}
.sx-item {
margin-right: 1.5rem;
margin-bottom: 1rem;
}
}
</style>
src/components/leverDealCenterV2.vue
+65
View File
@@ -0,0 +1,65 @@
<template>
<div class="home">
<div class="main">
<!-- <div class="main-top flex">
<div class="tv-box lever"> -->
<tv></tv>
<!-- </div>
</div> -->
<!-- <leverTransactions></leverTransactions> -->
</div>
</div>
</template>
<script>
// import notice from "@/view/lever/lever_noticeList";
// import deal from "@/view/deal";
// import exchange from "@/view/lever/lever_exchange";
// import market from "@/view/lever/lever_market";
// import trade from "@/view/lever/lever_trade";
// import chart from "@/view/chart";
// import entrust from "@/view/lever/lever_entrust";
// import hisentrust from "@/view/lever/lever_hisentrust";
// import detail from "@/view/detail";
// import currency from "@/view/currency";
// import complete from "@/view/complete";
// import leverTransaction from "@/view/lever/lever_transaction";
import leverTransactions from "@/view/lever_transactions";
import tv from '@/view/tv'
export default {
name: "leverDealCenterV2",
components: {
// load: 1,
// notice,
// deal,
tv,
// exchange,
// market,
// trade,
// chart,
// entrust,
// hisentrust,
// detail,
// currency,
// complete,
// leverTransaction,
leverTransactions
},
data() {
return {};
},
created() {},
methods: {},
mounted() {
}
};
</script>
<style lang="scss">
</style>
src/components/lever_dealCenter.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<div class="home">
<div class="main">
<div class="main-top flex">
<div class="tv-box lever">
<tv></tv>
</div>
</div>
<div class="main-bottom flex">
<div class="tran-box">
<leverTransactions></leverTransactions>
</div>
<div class="trade-box" style="background: #181d25">
<!-- <trade></trade> -->
</div>
</div>
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import notice from "@/view/lever/lever_noticeList";
import deal from "@/view/deal";
import exchange from "@/view/lever/lever_exchange";
import market from "@/view/lever/lever_market";
import trade from "@/view/lever/lever_trade";
import chart from "@/view/chart";
import entrust from "@/view/lever/lever_entrust";
import hisentrust from "@/view/lever/lever_hisentrust";
import detail from "@/view/detail";
import currency from "@/view/currency";
import complete from "@/view/complete";
import leverTransaction from "@/view/lever/lever_transaction";
import leverTransactions from "@/view/lever_transactions";
import tv from '../view/tv'
export default {
name: "dealCenter",
components: {
indexHeader,
load: 1,
notice,
deal,
tv,
exchange,
market,
trade,
chart,
entrust,
hisentrust,
detail,
currency,
complete,
leverTransaction,
leverTransactions
},
data() {
return {
isRouterAlive: true
};
},
created() {
this.address = localStorage.getItem("address") || "";
},
methods: {},
mounted() {
}
};
</script>
<style lang="scss">
.lever {
}
.home {
margin-bottom: 3px;
.main {
> div {
justify-content: space-between;
margin-top: 3px;
.tv-box {
width: 100%;
height: auto;
}
.exchange-box {
width: 403px;
height: auto;
padding-bottom: 10px;
}
.tran-box {
background: #181d25;
flex: 1;
}
.trade-box {
width: 350px;
margin-left: 3px;
}
}
}
}
</style>
src/components/login - 副本.vue
+1199
View File
File diff suppressed because it is too large Load Diff
src/components/login.vue
+390
View File
@@ -0,0 +1,390 @@
<template>
<div class="login-zh">
<indexHeader></indexHeader>
<div class="login-box">
<div class="login_img">
<img src="../assets/images/login_img.png" alt="" srcset="" />
</div>
<div class="bit-center-wrap l-box">
<div class="lb-form">
<div class="form-title">
{{ siteName }}<span style="margin-left: 0.5rem">{{ $t("zjde66") }}</span>
</div>
<!-- <div class="form-title2">{{ $t("zjde67") }}</div> -->
<div class="tabs" v-show="false">
<div
class="ts-item"
:class="{ tsItActive: tabsIndex == index }"
v-for="(item, index) in tabsList"
@click="tabsIndex = index"
:style="{
display: config.mobile_register == 0 && index == 0 ? 'none' : 'flex',
}"
>
{{ item.text }}
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{ tabsIndex == 0 ? $t("login.active_1") : $t("login.login_tabItem_0") }}
</div>
<div class="input-t">
<input
v-model="account_number"
:placeholder="$t('zjde1')"
style="width: 100%"
/>
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{ $t("login.password") }}
</div>
<div class="input-t">
<input type="password" v-model="password" :placeholder="$t('zjde2')" />
</div>
</div>
<div class="jzmm">
<el-checkbox v-model="checked" text-color="#f0c163">{{
$t("zjde68")
}}</el-checkbox>
</div>
<div class="loinSubmit" @click="login">
{{ $t("login.login_btn") }}
</div>
<div class="bottom">
<div class="qt" @click="goPages('register')">{{ $t("zjde7") }}</div>
<div class="qt" @click="goPages('forgetPwd')">{{ $t("login.forget") }}?</div>
</div>
</div>
</div>
</div>
<!-- <depth></depth> -->
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import indexFooter from "@/view/indexFooter";
// import depth from '@/components/depth'
export default {
name: "login",
components: {
indexHeader,
indexFooter,
// depth
},
data() {
return {
checked: false,
tabsList: [
{
text: this.$t("login.login_tabItem_1"),
},
{
text: this.$t("login.login_tabItem_0"),
},
],
tabsIndex: 0,
account_number: "",
password: "",
siteName: "",
config: {
mobile_register: 0,
},
};
},
created() {
this.$http({
url: "/api/getSiteConfig?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {},
}).then((t) => {
this.siteName = t.data.message.site_name;
let data = t.data.message;
this.config = data;
if (data.mobile_register == 0) {
this.tabsIndex = 1;
}
});
},
mounted() {},
methods: {
goPages(name) {
this.$router.push({
name,
});
},
login() {
let t = this.$utils.trim(this.account_number);
let g = this.$utils.trim(this.password);
if (t == "") return this.$message.error(this.$t("zjde1"));
if (g == "") return this.$message.error(this.$t("zjde2"));
layer.load();
this.$http({
url: "/api/user/login",
method: "post",
data: {
user_string: t,
password: g,
type: this.tabsIndex,
lang: window.localStorage.getItem("lang"),
},
})
.then((e) => {
layer.closeAll();
(e = e.data),
"ok" === e.type
? (localStorage.setItem("token", e.message),
localStorage.setItem("accountNum", t),
this.$store.commit("setAccountNum"),
this.userInfo(),
// this.$message({
// message: this.$t('zjde3'),
// type: 'success'
// }),
this.$router.push({
path: "/",
query: {
home: "home",
},
}))
: layer.msg(e.message);
})
.catch((t) => {
console.log(t);
layer.closeAll();
});
},
userInfo() {
this.$http({
url: "/api/user/info?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token"),
},
})
.then((t) => {
"ok" == t.data.type &&
(localStorage.setItem("user_id", t.data.message.id),
localStorage.setItem("email", t.data.message.email),
localStorage.setItem("extension_code", t.data.message.extension_code),
localStorage.setItem("is_seller", t.data.message.is_seller),
eventBus.$emit("seller", t.data.message.is_seller));
})
.catch((t) => {});
},
},
};
</script>
<style lang="scss" scoped>
.bit-center-wrap {
width: 40% !important;
}
.login-box {
display: flex;
justify-content: center;
.login_img {
width: 544px;
height: 576px;
margin: auto;
img {
width: 100%;
height: 100%;
}
}
}
.login-zh {
background-image: url("../assets/images/cm-bg.11e76927.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80vh;
}
.bottom {
display: flex;
justify-content: space-between;
> .qt {
&:nth-child(1) {
color: white;
text-decoration: underline;
}
&:last-child {
text-decoration: underline;
}
}
}
.login-zh .el-checkbox__input.is-checked + .el-checkbox__label {
color: #00f0ff;
}
.login-zh .el-checkbox__label {
font-size: 0.875rem;
}
.login-zh .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #00f0ff;
border-color: #00f0ff;
}
.lb-form {
font-size: 1rem;
color: #333;
width: 80%;
margin-top: 6rem;
}
.lb-form .input-t {
background: #000;
color: white;
padding: 0 10px;
height: 50px;
line-height: 50px;
font-size: 20px !important;
}
.form-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 25px;
}
.form-title2 {
margin-top: 1.25rem;
font-size: 1rem;
font-weight: 400;
color: #7e7e7e;
}
.tabs {
margin-top: 3.125rem;
display: flex;
}
.ts-item {
font-size: 1rem;
font-weight: 400;
padding: 0.8125rem 1.5rem;
margin-right: 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
}
.tsItActive {
color: #fff;
background-color: #00f0ff;
}
.srk-item {
margin-top: 1.5rem;
}
.si-title {
font-size: 1.2rem;
}
.input-t {
margin-top: 0.5rem;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.7rem;
font-size: 1rem !important;
}
.input-t input {
width: 100%;
}
.jzmm {
margin-top: 1rem;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 0.7rem;
border-radius: 0.25rem;
text-align: center;
font-weight: 400;
cursor: pointer;
color: #333;
background-color: #00f0ff;
}
.qt {
cursor: pointer;
margin-bottom: 1.25rem;
width: max-content;
color: #00f0ff;
font-size: 0.875rem;
}
@media screen and (max-width: 800px) {
.login-box {
.login_img {
display: none;
}
}
.bit-center-wrap {
width: 90% !important;
.srk-item {
margin-bottom: 40px;
}
.loinSubmit {
margin: 40px 0;
}
}
.login-zh .lb-form {
width: 100%;
}
.login-zh .input-t {
margin-top: 1rem;
padding: 1rem;
font-size: 1.2rem;
}
.si-title,
.qt,
.ts-item {
font-size: 1.2rem;
}
.login-zh .el-checkbox__label {
font-size: 1rem !important;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
}
}
.day {
.input-t input,
.lb-form {
color: #fff;
}
.input-t {
border: 0.0625rem solid #474d57;
}
}
</style>
src/components/match.vue
+783
View File
@@ -0,0 +1,783 @@
<template>
<div class="game-wrapper" v-bind:style="{backgroundImage: 'url(' + info.thumbnail + ')'}">
<div class="game-banner">
<div class="game-banner-main">
<div class="game-banner-time">{{info.match_time}}</div>
</div>
</div>
<div class="game-box game-box1">
<div class="game-box-header">
<div class="game-box-title">{{info.desc_1}}</div>
</div>
<div class="game-box1-content">
<!-- <div class="game-side-box game-side-box-prev">
<div class="swiper-button-prev" tabindex="0" role="button"></div>
</div>
<div class="game-side-box game-side-box-next">
<div class="swiper-button-next" tabindex="1" role="button"></div>
</div> -->
<div class="game-box1-list">
<swiper :options="swiperOption" class="swiper-container swiper-container-horizontal swiper-container-ios" id="game-team">
<!-- slides -->
<swiper-slide class="swiper-item" v-for="(row,index) in allTeam" :key="index">
<div class="game-box1-item-box">
<div class="game-box1-item" v-for="team in row">
<div class="game-box1-item-info">
<div class="game-box1-item-title">{{team.name}}</div>
<div class="text-ellipsis">
<span class="game-box1-item-num">{{team.member_number}}</span>
<span>人</span>
</div>
</div>
</div>
</div>
</swiper-slide>
<!-- Optional controls ,显示小点-->
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</swiper>
</div>
</div>
</div>
<div class="game-box game-box2">
<div class="game-box-header">
<div class="game-box-title">
{{info.desc_2}}
</div>
</div>
<div class="game-box2-content">
<div class="game-box2-title">
<span class="game-box2-title-cn">{{info.desc_3}}</span>
</div>
<div class="game-box2-list">
<div v-for="(team,index) in topTeam" class="game-box2-list-item game-box2-list-item1">
<span class="game-list-rank">{{index + 1}}</span>
<span class="game-list-name">
<div class="game-list-name-wrapper">
<div class="game-list-name-cn text-ellipsis">{{team.name}}</div>
</div>
</span>
<span class="game-list-num">{{team.balance}}</span>
<span class="game-list-coin">USDC</span>
<span class="game-list-income">{{info.desc_4}}</span>
</div>
</div>
</div>
</div>
<div class="game-box game-box3">
<div class="game-box-header">
<div class="game-box-title-box">
<div class="game-box-title" v-html="info.desc_5">
</div>
</div>
</div>
<div class="game-box3-content">
<div class="game-box3-info fl" v-html="info.desc_7">
</div>
<div class="game-box3-time fl" v-html="info.desc_6">
</div>
</div>
</div>
<div class="game-box game-box4" v-html="info.desc_8">
</div>
</div>
</template>
<script>
import "swiper/css/swiper.css"
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
components: {
Swiper,
SwiperSlide
},
computed: {
allTeam(){
let result = [];
for(var i=0;i<this.teams.length;i+=2){
result.push(this.teams.slice(i,i+2));
}
return result;
},
topTeam(){
let teams = this.teams;
teams = teams.sort(function(a, b){
return b.balance - a.balance;
});
return teams.splice(0, 10);
},
swiper() {
return this.$refs.mySwiper.swiper
}
},
data() {
return {
teams: [],
info: {},
swiperOption: {
autoplay: 3000,
slidesPerView: 8,
spaceBetween : 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
};
},
created() {
this.getInfo();
this.getTeams();
},
methods: {
getInfo(){
let that = this;
this.$http({
url: "/api/" + "match/info",
method: "post"
}).then(res => {
this.info = res.data
})
.catch(error => {
});
},
getTeams(){
let that = this;
this.$http({
url: "/api/" + "match/teams",
method: "post"
}).then(res => {
this.teams = res.data
})
.catch(error => {
});
}
}
}
</script>
<style lang='scss'>
.game-wrapper{
background-color:black;
text-align: center;
font-size: 24px;
color: #AEC6FA
}
.game-banner{
height: 650px;
color: #CADFFC;
margin: 0 auto;
text-align: right;
box-sizing: border-box;
}
.game-banner-main{
text-align: center;
padding-top: 450px;
}
.game-banner-time{
font-size: 24px;
}
.game-box1{
width: 1598px;
height: 716px;
box-sizing: border-box;
margin: 0 auto;
text-align: center;
padding-top: 130px;
}
.game-box-header-img{
width: 728px;
height: 54px;
margin: 0 auto;
}
.game-box-title{
line-height: 1;
padding-top: 17px;
font-size: 14px;
}
.game-box1-content{
background: url(../../static/imgs/game/game-box1-bg1.png)no-repeat center;
background-size: 100% auto;
font-size: 0;
padding: 44px 20px 32px;
margin-top: 24px;
text-align: left;
position: relative;
}
.game-side-box{
position: absolute;
top: 50%;
transform: translateY(-50%)
}
.game-side-box-prev{
left: -82px
}
.game-side-box-next{
right: -82px
}
.game-side-box-next .swiper-button-next,
.game-side-box-prev .swiper-button-prev{
width: 71px;
height: 124px;
background-size: 71px 124px;
outline: none;
}
.game-side-box-next .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
background-image: url(../../static/imgs//game/next1.png);
}
.game-side-box-prev .swiper-button-prev, .swiper-container-rtl .swiper-button-prev{
background-image: url(../../static/imgs//game/prev1.png);
}
.game-box1-item-box{
display: inline-block;
}
.game-box1-item{
width: 170px;
height: 171px;
box-sizing: border-box;
text-align: center;
margin-bottom: 10px;
}
.game-box1-item-info{
font-size: 20px;
color: #fff;
}
.game-box1-item-info{
width: 170px;
height: 171px;
background: url(../../static/imgs/game/game-box1-item-bg1.png)no-repeat center;
background-size: cover;
}
.game-box1-item-title{
color: #fff;
font-size: 18px;
padding-top: 10px;
font-weight: bold;
}
.color-active{
color: #EBD90A
}
.game-box1-item-num{
font-size: 56px;
font-weight: bold;
padding-top: 12px;
display: inline-block;
}
.game-box2{
padding-top: 140px;
height: 1284px;
box-sizing: border-box;
}
.game-box2-content{
width: 1161px;
background: url(../../static/imgs/game/game-box2-bg1.png)no-repeat center;
background-size: 100% 100%;
margin: 40px auto 0;
height: 1078px;
box-sizing: border-box;
}
.game-box2-title{
position: relative;
color: #fff;
text-align: center;
margin-left: 54px;
padding-top: 60px;
padding-bottom: 36px;
font-size: 0;
}
.game-box2-title-cn{
font-size: 40px;
font-weight: bold;
line-height: 1;
}
.game-box2-title-en{
font-size: 28px;
}
.game-box2-list{
box-sizing: border-box;
padding: 0 41px 0 24px;
color: #fff;
}
.game-box2-list-header{
font-size: 0;
text-align: left;
margin-bottom: 12px;
}
.game-box2-list-header-item{
display: inline-block;
width: 300px;
height: 62px;
line-height: 62px;
background: #141314;
border-right: 8px solid #43A8F4;
border-left: 8px solid #43A8F4;
border-radius: 2px;
font-size: 36px;
vertical-align: middle;
margin-right: 10px;
text-align: center;
}
.game-box2-list-header-en{
font-size: 24px;
}
.game-box2-list-item{
height: 90px;
line-height: 90px;
padding-left: 28px;
font-size: 0;
text-align: left;
font-weight: 500;
text-shadow:2px 2px 2px rgba(0, 0, 0, 0.89);
font-family:SourceHanSansCN-Medium,'寰蒋闆呴粦',"Droid Sans Fallback", Helvetica, Arial, sans-serif;
}
.game-box2-list-item:nth-child(odd){
background: #9b9faa
}
.game-box2-list-item span{
display: inline-block;
vertical-align: middle;
}
.game-list-rank{
width: 100px;
box-sizing: border-box;
font-size: 60px;
}
.game-list-name{
box-sizing: border-box;
width: 306px;
height: 60px;
line-height: 60px;
padding: 0 44px;
border-left: 2px solid #bfbfbf;
border-right: 2px solid #bfbfbf;
}
.game-list-name-wrapper{
display: inline-block;
}
.game-list-name-cn{
font-size: 40px;
}
.game-list-name-en{
font-size: 16px;
}
.game-list-income{
height: 58px;
line-height: 58px;
padding: 0 46px;
border-radius: 2px;
font-size: 24px;
}
.game-box2-list-item:nth-child(odd) .game-list-income{
background: #5c5c98;
}
.game-box2-list-item:nth-child(even) .game-list-income{
background: #9bb6e8;
}
.game-list-num{
width: 282px;
font-size: 44px;
padding-left: 80px;
box-sizing: border-box;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-list-coin{
width: 138px;
height: 100%;
font-size: 44px;
font-weight: bold;
text-align: left;
text-shadow: none;
}
.game-box2-list-item1{
position: relative;
}
.game-box3{
margin-top: 0px;
height: 1094px;
box-sizing: border-box;
}
.game-box3 .game-box-header{
box-sizing: border-box;
padding: 176px 0 56px;
}
.game-box-title-box{
display: inline-block;
text-align: left;
}
.game-box3 .game-box-title{
line-height: 26px;
padding-top: 0;
}
.game-box3-content{
margin: 0 auto;
padding-top: 130px;
padding-left: 90px;
}
.game-box3-info{
margin-left: 53px;
width: 430px;
color: #fff;
font-size: 18px;
line-height: 30px;
text-align: left;
position: relative;
top: 28px;
}
.game-box3-time{
font-size: 26px;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.89);
padding: 160px 56px;
}
.game-box3-time-name{
color: #808080;
}
.game-box3-info-title{
margin-bottom: 16px;
line-height: 20px;
}
.game-box3-title-name{
font-size: 20px;
line-height: 1;
padding-left: 10px;
border-left: 5px solid #fff1b8;
color: #ffeb9b;
}
.game-box3-title-tips{
font-size: 12px;
color: #fff;
line-height: 1;
}
.game-box3-info-order{
color: #fff1b8;
}
.game-box3-info-active{
color: #fff1b8
}
.game-box3-info-section2{
margin-top: 52px;
}
.game-box3-info-section2:after{
content: '';
width: 370px;
height: 1px;
background: #312a39;
display: block;
}
.game-box3-line{
margin-top: 22px;
margin-bottom: 20px;
width: 447px;
height: 1px;
background: #312a39;
border: none;
}
.game-box3-title-num{
color: #ED615F;
}
.game-box4{
padding-top: 210px;
}
.game-box4-content{
margin-top: 32px;
padding-bottom: 64px;
}
.game-rule-wrapper{
display: inline-block;
text-align: left;
}
.game-rule-item{
margin-bottom: 10px;
font-size: 18px;
color: #fff;
}
.order-tips{
height: 32px;
line-height: 32px;
padding: 0 7px;
color: #000115;
background: #5DADD5;
margin-right: 20px;
margin-top: 4px;
font-size: 30px;
font-weight: bold;
}
.game-rule-item-text{
max-width: 688px;
text-align: left;
/* font-weight: bold; */
line-height: 40px;
}
@media (max-width: 600px){
.game-wrapper{
background: url(../../static/imgs/game/game-bg2.png)no-repeat;
background-size: 100% auto;
font-size: 0.24rem;
}
.game-banner{
height: 2.6rem;
}
.game-banner-main{
padding-top: 2.2rem;
}
.game-banner-time{
font-size: 0.2rem;
}
/*****/
.game-box1{
width: 100%;
height: auto;
padding-top: 0.9rem;
box-sizing: border-box;
}
.game-box-header-img{
width: 100%;
height: auto;
}
.game-box-title{
line-height: 0.32rem;
font-size: 0.2rem;
padding-top: 0.04rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.game-box1-content{
margin-top: 0;
padding: 0.2rem 0rem 0.1rem;
background-size: 100% 100%;
}
.game-side-box{
top: 1.8rem;
transform: none;
display: none;
}
.game-side-box-prev{
left: -0.16rem;
}
.game-side-box-next{
right: -0.16rem;
}
.game-side-box-next .swiper-button-next, .game-side-box-prev .swiper-button-prev{
width: 0.32rem;
height: 0.32rem;
background-size: 0.32rem 0.32rem;
}
.game-box1-item{
width: 0.8rem;
height: 0.8rem;
padding: 0;
margin-bottom: 0.1rem;
}
.game-box1-item-info{
font-size: 0.24rem;
}
.game-box1-item-info{
width: 0.8rem;
height: 0.8rem;
}
.game-box1-item-title{
font-size: 0.2rem;
padding-top: 0;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 0.05rem;
}
.text-ellipsis{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.game-box1-item-num{
font-size: 0.24rem;
padding-top: 0;
}
/**********/
.game-box2{
margin-top: 0;
height: auto;
padding: 0.3rem 0.24rem 0;
}
.game-box2-content{
width: 100%;
height: auto;
margin-top: 0.1rem;
padding-bottom: 0;
}
.game-box2-title{
margin-left: 0.24rem;
padding-top: 0.32rem;
padding-bottom: 0.2rem;
}
.game-box2-title:after{
width: 0.5rem;
height: 0.06rem;
left: 0.04rem;
bottom: 0.16rem;
}
.game-box2-title-cn{
font-size: 0.28rem;
}
.game-box2-title-en{
font-size: 0.24rem;
}
.game-box2-list{
width: auto;
margin: 0 0.1rem;
padding: 0.16rem 0.16rem 0;
}
.game-box2-list-header{
margin-bottom: 0.08rem;
}
.game-box2-list-header-item{
width: 2.2rem;
height: 0.6rem;
line-height: 0.6rem;
font-size: 0.28rem;
border-width: 0.08rem;
margin-right: 0.1rem;
}
.game-box2-list-header-en{
font-size: 0.2rem;
}
.game-box2-list-item{
height: 0.75rem;
line-height: 0.75rem;
padding-left: 0.2rem;
}
.game-box2-list-item1::before{
width: 0.08rem;
height: 0.8rem;
}
.game-list-rank{
width: 0.8rem;
font-size: 0.24rem;
}
.game-list-name{
width: 1.2rem;
height: 0.6rem;
line-height: 0.6rem;
padding: 0 0.1rem
}
.game-list-name::before{
width: 0.08rem;
height: 0.08rem;
margin-right: 0.1rem;
margin-top: 0.08rem;
}
.game-list-name-cn{
font-size: 0.24rem;
padding-bottom: 0.04rem;
}
.game-list-name-en{
font-size: 0.24rem;
}
.game-list-income{
height: 0.6rem;
line-height: 0.6rem;
padding: 0 0.28rem;
font-size: 0.24rem;
}
.game-list-num{
width: 1.4rem;
font-size: 0.24rem;
padding-left: 0.1rem;
}
.game-list-coin{
width: 0.89rem;
font-size: 0.24rem;
}
.game-box2-list-item1::after{
width: 100%;
height: 0.02rem;
}
/***/
.game-box3{
margin-top: 0;
height: auto;
padding: 0 0.24rem;
}
.game-box3 .game-box-header{
height: auto;
padding: 0.8rem 0 0;
}
.game-box3 .game-box-header-img{
margin-bottom: 0;
}
.game-box3 .game-box-title{
line-height: 0.32rem;
}
.game-box3-content{
width: auto;
padding-top: 0;
padding-left: 0;
}
.game-box3-info{
margin-left: 0;
width: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
top: 0.2rem;
}
.game-box3-info-title{
margin-bottom: 0.16rem;
line-height: 0.28rem;
}
.game-box3-title-name{
font-size: 0.28rem;
padding-left: 0.1rem;
border-width: 0.06rem;
}
.game-box3-title-tips{
font-size: 0.2rem;
}
.game-box3-info-section2{
margin-top: 0.24rem;
}
.game-box3-info-section2:after{
display: none;
}
.game-box3-line{
margin-top: 0.2rem;
margin-bottom: 0.2rem;
width: 100%;
}
.game-box4{
margin-top: 0.4rem;
height: auto;
padding: 0 0.24rem;
}
.game-box4-content{
margin-top: 0.2rem;
}
.game-rule-item{
font-size: 0.24rem;
}
.order-tips{
height: 0.32rem;
line-height: 0.32rem;
padding: 0 0.08rem;
margin-right: 0.12rem;
margin-top: 0;
font-size: 0.24rem;
}
.game-rule-item-text{
max-width: 6.4rem;
line-height: 0.32rem;
}
}
</style>
// WEBPACK FOOTER //
// src/components/match.vue
src/components/new_account.vue
+89
View File
@@ -0,0 +1,89 @@
<template>
<div class="box">
<indexHeader></indexHeader>
<div class="_flex-sb _page-main">
<!-- <left></left> -->
<router-view></router-view>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from "@/view/indexFooter";
import left from '@/view/accounts/left_account'
export default {
name: 'account',
data() {
return {
lang: '',
currentIndex: 0,
}
},
components: {
indexHeader,
left,
indexFooter
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.box .account {
width: 100%;
margin: 0;
padding-top:0;
background-color:#181d25;
}
.topcontent {
height: 60px;
line-height: 60px;
padding: 0 30px;
margin: 0px 0;
font-size: 18px;
border-radius: 3px;
background-color: #181d25;
}
.leftcontent {
width: 220px;
margin-right: 0px;
height: 350px;
border-radius: 10px;
padding: 4px;
float: left;
}
.rightcontent {
width: 977px;
margin-left: 223px;
min-height: 1000px;
border-radius:10px;
}
._flex-sb, ._flex {
display: flex;
}
._flex-sb {
justify-content: space-between;
}
._page-main {
width: 100%;
// height: calc(100vh - 75px);
}
._page-main__content1 {
// width: calc(100% - 260px);
height: 100%;
color: #000;
// background-color: #f7f7fa;
}
._page-main__content1, ._page-main__page {
box-sizing: border-box;
display: flex;
flex-direction: column;
}
</style>
src/components/noticeDetail.vue
+157
View File
@@ -0,0 +1,157 @@
<template>
<div class="noticeDetail">
<indexHeader></indexHeader>
<div class="account-wrap">
<div class="account">
<div>
<div class="back-nav fColor1 ft20">
<span class="fr curPer" style="font-size: 16px;color: #c7ccda;" @click="goBefore">{{ $t('back') }}</span>
</div>
</div>
<div class="account-content">
<div class="detailBig">
<div class="mb30 clear">
<span class="fColor1 w90 fl tc">{{ title }}</span>
</div>
<div class="detailContent fColor2">
<p v-html="content" ref="con"></p>
</div>
<div class="fColor2 mt40">
<p class="tr">{{ abstract }}</p>
<p class="tr mt5">{{ update_time }}</p>
</div>
</div>
</div>
</div>
</div>
<index-footer></index-footer>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from "@/view/miniFooter";
export default {
name: 'noticeDetail',
components: {indexHeader, indexFooter},
data() {
return {
title: '',
content: '',
abstract: '',
update_time: ''
}
},
created() {
this.address = localStorage.getItem('token') || '';
this.id = this.$route.query.id;
var id = this.id;
this.$http({
url: '/api/' + 'news/detail',
method: 'post',
data: {id: id},
headers: {'Authorization': localStorage.getItem('token')},
}).then(res => {
res = res.data;
if (res.type === 'ok') {
this.title = res.message.title;
this.content = res.message.content;
this.abstract = res.message.abstract;
this.update_time = res.message.update_time;
this.setProperty();
} else {
// layer.msg(res.message);
}
}).catch(error => {
console.log(error)
})
},
mounted() {
},
methods: {
goBefore() {
this.$router.back(-1);
},
setProperty() {
var tags = document.getElementsByTagName('p');
HTMLCollection.prototype.forEach = function (callback) {
[].slice.call(this).forEach(callback);
};
tags.forEach(function (e, i) {
e.style.backgroundColor = '#666 !important'
});
}
}
}
</script>
<style lang="scss" scoped>
.noticeDetail {
.account-wrap {
background: #181d25;
//background: url(../assets/images/account_center_bg.jpg) no-repeat;
background-size: cover;
.back-nav{
background: #181d25;
color:#fff;
}
.account {
clear: both;
min-width: 1400px;
margin:0 auto;
margin: 0 auto;
padding-top: 0;
overflow: hidden;
min-height: 880px;
.nav-after {
display: block;
height: 3px;
background-color: #000;
}
.account-content {
width: 100%;
min-height: 1020px;
background-color: #000;
border-radius: 10px;
.detailBig {
padding: 48px 46px 20px;
.mb30 {
margin-bottom: 30px;
}
.detailContent {
line-height: 26px;
min-height: 850px;
p {
& > * {
background-color: #181b2a !important;
}
}
}
.mt5 {
margin-top: 5px;
}
}
}
}
}
}
</style>
// WEBPACK FOOTER //
// src/components/noticeDetail.vue
src/components/noticeList.vue
+143
View File
@@ -0,0 +1,143 @@
<template>
<div class="notice">
<indexHeader></indexHeader>
<div class="account-wrap">
<div class="account">
<div>
<div class="back-nav fColor1 ft20 clear"
style="line-height: 60px; font-size: 18px; padding: 0; height: auto;"> {{ $t('header.help') }}
</div>
</div>
<div class="account-content">
<div class="tc hide" style="padding-top: 150px;">
<img src="../assets/images/nodata.png" alt="">
<p class="fColor2 ft18">{{ $t('nodata') }}</p>
</div>
<div>
<ul class="noticeList" style="border-radius: 10px;">
<li class="clear curPer" v-for="item in newList" :key="item.id">
<div class="" @click="goDetail(item.id)">
<div class="">{{ item.title }}</div>
<span class="fr">{{ item.update_time }}</span>
</div>
</li>
</ul>
</div>
<div class="tc" style="padding:15px">
<!-- <div class="fColor1 ft14 mt10" @click="getMore">{{more}}</div> -->
<!-- <div>
<img src="@/assets/images/loading.gif" alt="" class="lodw20">
<p class="ft12 baseColor">{{$t('loading')}}...</p>
</div> -->
</div>
</div>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import indexFooter from "@/view/miniFooter";
export default {
name: "noticeList",
components: {indexHeader, indexFooter},
data() {
return {
more: "{{$t('more')}}...",
newList: []
};
},
created() {
},
methods: {
getNotice() {
this.$http({
url: '/api/' + 'news/list',
method: 'post',
data: {c_id: '3'},
}).then(res => {
this.newList = res.data.message.list
})
},
goBefore() {
this.$router.back(-1);
},
getMore() {
},
goDetail(id) {
var id = id;
this.$router.push({
name: "noticeDetail",
query: {id: id}
});
}
},
mounted() {
var that = this;
that.getNotice();
}
};
</script>
<style lang="scss" scoped>
.notice {
.account-wrap {
background: #181d25;
.account {
margin: 0px auto;
overflow: hidden;
padding-top: 3px;
clear: both;
.back-nav {
height: 40px;
font-size: 16px;
line-height: 40px;
background: #181d25;
}
.nav-after {
display: block;
height: 10px;
background-color: #262a42;
}
.account-content {
width: 100%;
min-height: 1060px;
background-color: #000;
border-radius: 10px;
ul {
padding: 0 20px;
font-size: 14px;
li {
border-bottom: 1px dashed #303b4b;
height: 72px;
padding: 10px 0 7px;
color: #cdd6e4;
font-size: 12px;
> div {
> div {
height: 52px;
line-height: 52px;
}
span {
color: #61688a;
}
}
}
}
}
}
}
}
</style>
src/components/pledge.vue
+427
View File
@@ -0,0 +1,427 @@
<template>
<div class="login" style="height: 100%;color:#555;">
<indexHeader></indexHeader>
<div style="width: 100%; height: 200px; background: url('static/imgs/lockbg2.jpg'); background-size: contain;">
<h1 style="line-height: 200px; text-align: center; font-weight: bold; font-size: 28px; color: #fff;">
{{ $t('lockrank.welcome') }}</h1>
</div>
<div class="contentBK" style=" width:100%; background:#181d25; padding: 20px 0; height:auto;">
<div style="width: 1300px; min-height: 200px; background: #181d25; margin:0px auto;">
<div v-for="(item,index) in products"
style="width:630px; background: #fff; border-radius:5px; padding: 20px 20px; margin:10px; float: left; height: auto;">
<h2 style="font-weight: bold; line-height: 45px;">{{ item.currency_name }} {{
$t('lockrank.lockformoney')
}} {{ item.period }}{{ $t('lockrank.time') }}</h2>
<div class="whiteinput" style="width: 100%;">
<el-input readonly type="number" style="background: #fff;"
:placeholder="$t('lockrank.number') + item.min_single_limit+' - ' +item.max_single_limit"
v-model="item.number">
<template slot="append">{{ item.currency_name }}</template>
</el-input>
</div>
<div class="ft14" style="line-height: 40px;">{{ $t('lockrank.return') }}：<span class="green1 ft18 bold">{{
item.min_daily_return_rate| numFilters(5)
}}</span> {{ item.currency_name }}
</div>
<el-button :disabled="item.exists" type="primary" @click="buyNow(index)" v-loading="item.loading" style="width: 100%;">
{{ item.exists===false?$t('lockrank.buynow'):$t('lockrank.diyaed') }}
</el-button>
</div>
</div>
<div style="clear: both;"></div>
<div style="width: 1280px; padding:10px; margin:0 auto; background: #fff;border-radius:5px; ">
<h1 style="line-height: 50px; font-size: 18px; border-bottom: 1px solid #eee; text-indent: 1em;">
{{ $t('lockrank.record') }}</h1>
<div style="width:1200px; margin: 0 auto">
<div class="flex">
<el-table
:data="tableData"
v-loading="dataloading"
:row-class-name="tableRowClassName"
:empty-text="$t('nodata')"
style="width: 100%">
<el-table-column
prop="id"
:label="$t('lockrank.no')"
width="80">
</el-table-column>
<el-table-column
prop="show_add_time"
:label="$t('lockrank.starttime')"
width="190">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.show_add_time }}</span>
<br/>
</template>
</el-table-column>
<el-table-column
prop="show_add_time"
:label="$t('lockrank.endtime')"
width="190">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.show_end_time }}</span>
</template>
</el-table-column>
<el-table-column
prop="caution_money"
width="180"
:label="$t('lockrank.dayrate')"
>
<template slot-scope="scope">
<el-tag type="success" size="medium">{{ scope.row.caution_money|numFilters(4) }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="revenue"
:label="$t('lockrank.returned')"
width="180"
>
<template slot-scope="scope">
<el-tag type="success" size="medium">{{ scope.row.product.min_daily_return_rate|numFilters(4) }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="product.currency_name"
:label="$t('lockrank.currency')"
>
<template slot-scope="scope">
<div style="height: 50px; display: flex; align-items: center; ">
<el-badge :value="scope.row.product.period" class="item">
<el-tag effect="dark">{{ scope.row.product.currency_name }}</el-tag>
</el-badge>
</div>
</template>
</el-table-column>
<el-table-column
prop="status"
:label="$t('lockrank.status')"
>
<template slot-scope="scope">
<el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from '@/view/indexFooter'
export default {
name: "pledge",
components: {indexHeader, indexFooter},
filters: {
numFilters: function (value, num) {
if (!value) {
return '0.0000'
}
value = (value - 0).toFixed(parseInt(num)).toString()
return value.slice(0) + ' '
}
},
data() {
return {
products: [],
tableData: [],
loading: null,
dataloading: true
}
},
created() {
this.account_number = this.$route.query.account_number || ''
},
mounted() {
// this.loading = this.$loading({
// lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(255, 255, 255, 0.85)'
// });
this.getMyProducts();
},
methods: {
getStatusType(status) {
if (status == 1) {
return 'warning';
} else {
return 'success';
}
},
getStatusText(status) {
if (status == 1) {
return this.$t('lockrank.status1');
} else {
return this.$t('lockrank.status2');
}
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
getProducts() {
let that = this;
this.$http({
url: '/api/' + 'wealth/getProfitList',
method: 'get',
data: {},
}).then(res => {
if (res.data.type == 'ok') {
let objs = res.data.message;
let arr = [];
objs.forEach(x => {
x.total = 0;
x.number = x.min_single_limit;
x.loading = false;
x.exists = false;
let exists_arr = that.tableData.filter(y => {
return y.wealth_product_id == x.id;
});
console.log(exists_arr);
if (exists_arr.length > 0) {
x.exists = true;
}
arr.push(x);
});
that.products = arr;
that.loading.close();
}
}).catch(error => {
})
},
getMyProducts() {
let that = this;
this.$http({
url: '/api/' + 'wealth/getMyprofit',
method: 'get',
data: {},
headers: {Authorization: localStorage.getItem("token")}
}).then(res => {
if (res.data.type == 'ok') {
let objs = res.data.message.data;
let arr = [];
objs.forEach(x => {
arr.push(x);
});
console.log(arr);
that.tableData = arr;
that.dataloading = false;
that.getProducts();
}
}).catch(error => {
})
},
buyNow(index) {
let item = this.products[index];
if (item.loading) {
return;
}
// console.log(parseFloat(item.number)<parseFloat(item.min_single_limit));
item.number = parseFloat(item.number);
item.min_single_limit = parseFloat(item.min_single_limit);
item.max_single_limit = parseFloat(item.max_single_limit);
if (item.number > item.max_single_limit || item.number < item.min_single_limit) {
this.$message(this.$t('lockrank.d1', {
'number': item.min_single_limit,
'number1': item.max_single_limit,
'currency': item.currency_name
}))
return;
}
let that = this;
this.$confirm(this.$t('lockrank.confirmbuy'), this.$t('account.notice'), {
confirmButtonText: this.$t('lay.sure'),
cancelButtonText: this.$t('lay.ceil'),
type: 'warning'
}).then(() => {
item.loading = true;
that.$http({
url: '/api/' + 'wealth/buyProfit',
method: 'post',
data: item,
headers: {Authorization: localStorage.getItem("token")}
}).then(res => {
item.loading = false;
if (res.data.type == 'ok') {
that.$message({
message: res.data.message,
type: 'success'
});
that.getMyProducts();
} else {
that.$message({
message: res.data.message,
type: 'warning'
});
}
});
}).catch(() => {
});
}
},
}
</script>
<style lang="scss">
html, body {
min-height: 100%;
}
.green1 {
color: #038c0e;
}
.whiteinput {
.el-input__inner {
background: #fff !important;
border: 1px solid #DCDFE6 !important;
color: #666 !important;
}
}
.content-wrap {
background: url(../../static/imgs/bg_login.png) center bottom 316px repeat-x, -webkit-linear-gradient(top, #181d25, #181d25);
background-position: top center;
}
.day .content-wrap {
background: url(../../static/imgs/bg_login.png) center bottom 316px repeat-x, -webkit-linear-gradient(top, #fff, #fff);
}
.account {
width: 75rem;
margin: 0 auto;
padding-top: 43px;
min-height: 880px;
}
.main {
position: relative;
}
.main_title {
font-size: 36px;
color: #c7cce6;
}
.day .main_title {
color: #484f73;
}
.register-item {
display: block;
height: 22px;
color: #61688a;
font-size: 12px
}
.register-input {
position: relative;
margin-top: 20px
}
.input-box {
position: relative;
margin-top: 40px;
}
.input-main {
width: 520px;
min-height: 46px;
border: 1px solid #4e5b85;
padding: 0 20px;
color: #c7cce6;
font-size: 14px;
border-radius: 3px;
background-color: #181d25;
}
.day .input-main {
border: 1px solid #d4d4d4;
background-color: #ffffff;
color: #999;
}
.icon {
width: 48px;
height: 48px;
line-height: 48px;
border-right: 1px solid #52688c;
position: absolute;
top: 0;
}
.login-btn {
width: 420px;
margin-top: 40px;
background: #5697f4;
font-size: 16px;
border-radius: 4px;
color: #fff;
line-height: 48px;
cursor: pointer;
}
.noaccount {
color: #fff;
}
.register-button {
width: 200px;
display: inline-block;
line-height: 46px;
background-color: #00a4d8;
/**#7a98f7;*/
border-radius: 4px;
color: #fff;
border: none
}
.have-account {
font-size: 14px;
display: inline-block;
margin-left: 30px
}
.right-tip {
position: absolute;
left: 620px;
top: 70px;
line-height: 24px;
padding-right: 50px;
margin-top: 10px;
font-size: 14px;
color: #61688a;
}
</style>
src/components/quotation.vue
+562
View File
@@ -0,0 +1,562 @@
<template>
<div class="home" style="padding-top: 48px">
<div class="hangqiang">
全部行情
</div>
<div class="main_shuju">
<div class="main_btn">
<button class="btn">
USDC
</button>
</div>
<!--
数据
-->
<div class="coinbox ft12 rbom" style="min-height: 700px">
<div class="flex classfity txtgray">
<div class="flex alcenter"><span>交易对</span>
<p class="flex column between"></p>
</div>
<div class="flex alcenter jscenter"><span>最新价</span>
<p class="flex column between">
<!-- <span class="up"></span> <span class="down"></span>-->
</p>
</div>
<div class="flex alcenter jscenter"><span>涨幅</span>
<p class="flex column between">
<!-- <span class="up"></span> <span class="down"></span>-->
</p>
</div>
<div class="flex alcenter jscenter"><span>最高价</span>
<!---->
</div>
<div class="flex alcenter jscenter"><span>最低价</span>
<!---->
</div>
<div class="flex alcenter jscenter"><span>24H量</span>
<!---->
</div>
</div>
<ul>
<li>
<div class=" flex coinlist alcenter curPer hove hove" style=""
v-for="item in quotationList" :key="item.id" v-if="item.is_display == 1&& item.open_microtrade == 1"
>
<p class="flex alcenter">
<span class="iconfont ft14 gray"><img src="../../static/imgs/wjx.png" alt=""
style="width: 14px;height: 14px;margin-top: 5px"/></span>
<span class="ml5">{{ item.currency_name }}</span></p>
<p><span>{{ item.now_price || '0.00' |numFilters(4) }}</span></p>
<p class="tl change" :class="item.change < 0?'red':'green'"><span>
{{ item.change || '0.00' }}%
</span></p>
<p> {{ item.high || '0.00'| numFilters(5) }}</p>
<p>{{ item.low || '0.00'| numFilters(5) }}</p>
<p>{{ item.volume || '0.00' | numFilters(2) }}</p>
</div>
<!---->
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
// import headerHome from '../header/header.vue';
import indexHeader from "@/view/indexHeader";
export default {
name: "quotation",
components: {
indexHeader,
},
filters: {
numFilters: function (value,num) {
if (!value) {
return '0.0000'
}
value = value.toFixed(parseInt(num)).toString()
return value.slice(0) + ' '
}
},
data() {
return {
account_number: "",
password: "",
quotationList: [],
btnSelect: 0,
userAccount: localStorage.getItem("userAccount") || "",
codeShow: 3,
newsList: [],
skins: localStorage.getItem("skin") || "days",
swiperImgs: []
};
},
created() {
this.account_number = "";
this.password = "";
this.init();
this.$http({
url: "/api/" + "news/list",
method: "post",
data: {
c_id: 4
}
}).then(res => {
if (res.data.type == "ok") {
this.newsList = res.data.message.list;
}
});
this.getSwiper();
},
beforeCreate() {
// if(
// localStorage.getItem("skin") &&
// localStorage.getItem("skin") == "nights"
// ) {
// document
// .querySelector("html")
// .setAttribute("style", "background-color:#000;");
// } else {
// document
// .querySelector("html")
// .setAttribute("style", "background-color:#f8f6f6;");
// }
},
beforeDestroy() {
document.querySelector("html").removeAttribute("style");
},
methods: {
init() {
var that = this;
this.$http({
url: "/api/" + "currency/quotation_new",
method: "get",
data: {}
// headers: { Authorization: localStorage.getItem("token") }
}).then(res => {
if (res.data.type == "ok") {
var arr = [];
var arr2 = [];
for (var i = 0; i < res.data.message.length; i++) {
for (var j = 0; j < res.data.message[i].quotation.length; j++) {
arr.push(res.data.message[i].quotation[j]);
}
}
that.quotationList = arr;
that.marketSocket();
}
})
.catch(error => {
});
},
userInfo() {
var that = this;
this.$http({
url: "/api/" + "user/info",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
})
.then(res => {
if (res.data.type == "ok") {
localStorage.setItem("user_id", res.data.message.id);
localStorage.setItem("userAccount", res.data.message.account);
localStorage.setItem(
"extension_code",
res.data.message.extension_code
);
localStorage.setItem("is_seller", res.data.message.is_seller);
if (res.data.message.seller) {
if (res.data.message.seller.length > 0) {
localStorage.setItem(
"status",
res.data.message.seller[0].status
);
let obj = {
sellerValue: res.data.message.is_seller,
statusValue: res.data.message.seller[0].status
};
eventBus.$emit("seller", obj);
}
}
that.$router.push({
path: "/"
});
}
})
.catch(error => {
});
},
login() {
let account_number = this.$utils.trim(this.account_number);
let password = this.$utils.trim(this.password);
if (this.account_number.length == "") {
layer.tips(this.$t('set.enterAccount'), "#account");
return;
}
if (this.password.length < 6) {
layer.tips(this.$t('login.psw6'), "#pwd");
return;
}
var i = layer.load();
this.$http({
url: "/api/" + "user/login",
method: "post",
data: {
user_string: account_number,
password: password,
type: 1
}
})
.then(res => {
layer.close(i);
res = res.data;
if (res.type === "ok") {
localStorage.setItem("token", res.message);
localStorage.setItem("accountNum", account_number);
this.$store.commit("setAccountNum");
this.userInfo();
} else {
layer.msg(res.message);
}
})
.catch(error => {
console.log(error);
});
},
inputs() {
var that = this;
if (that.account_number != "" && that.password.length >= 6) {
that.btnSelect = 1;
} else {
that.btnSelect = 0;
}
},
// 行情socket
marketSocket() {
// console.error('开始调用ws');
var that = this;
that.$socket.emit("login", localStorage.getItem("user_id"));
that.sockets.subscribe("daymarket", msg => {
// console.error('收到回调')
if (msg.type == "daymarket") {
console.log('daymarket',msg);
for (var i = 0; i < that.quotationList.length; i++) {
if (
that.quotationList[i].legal_id == msg.legal_id &&
that.quotationList[i].currency_id == msg.currency_id
) {
that.quotationList[i].now_price = msg.now_price;
that.quotationList[i].change = msg.change;
that.quotationList[i].volume = msg.volume;
that.quotationList[i].high = msg.high;
that.quotationList[i].low = msg.low;
}
}
}
});
},
links() {
var that = this;
that.$router.push({
path: "/leverdealCenter"
});
},
mine_over() {
var that = this;
that.codeShow = true;
},
mine_out() {
var that = this;
that.codeShow = false;
},
getSwiper() {
this.swiperImgs = [{
"id": 99,
"c_id": 4,
"lang": "zh",
"title": "IFTI",
"thumbnail": "/images/zwtp.png",
"cover": "/images/zwtp.png",
"sorts": 0
}, {
"id": 99,
"c_id": 4,
"lang": "zh",
"title": "IFTI",
"thumbnail": "/images/zwtp.png",
"cover": "/images/zwtp.png",
"sorts": 0
}]
return
this.$http({
url: "/api/news/list",
method: "post",
data: {
c_id: 8
}
})
.then(res => {
console.log(res);
if (res.data.type == "ok") {
this.swiperImgs = res.data.message.list;
}
})
.then(() => {
var mySwiper02 = new Swiper(".banner_wrap", {
// direction: 'vertical',
loop: true,
autoplay: 2000,
// 如果需要分页器
pagination: ".swiper-pagination02",
paginationClickable: true,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper
});
});
},
}
// beforeRouteEnter(to, from, next) {
// if (from.name == "dealCenter") {
// window.location.reload();
// }
// next();
// }
};
</script>
<style scoped>
html {
background: #262a42;
}
.home {
margin-bottom: 3px
}
.hangqiang {
width: 100%;
height: 60px;
line-height: 60px;
color: #c7cce6;
margin-top: 3px;
background-color: #181b2a;
text-indent: 2em;
}
.main_shuju {
width: 100%;
height: 100%;
background-color: #181b2a;
color: #c7cce6;
}
.main_quanbu {
width: 100%;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #192638;
}
.btn {
color: #fff;
background-color: #357ce1;
margin: 0 10px;
height: 30px;
line-height: 30px;
padding: 0 10px;
border-radius: 2px;
font-size: 14px;
cursor: pointer;
border: none;
margin-top: 15px;
margin-left: 35px;
}
.coinbox {
padding: 0 40px;
box-shadow: 0 2px 4px rgba(28, 36, 44, .05);
}
.ft12 {
font-size: 12px;
}
.classfity {
padding: 0 10px;
height: 40px;
line-height: 40px;
color: #9ca9b5;
}
.flex {
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
}
.coinbox .classfity > div:first-child, .coinbox .classfity div:nth-child(4) {
width: 18%;
-ms-flex: none;
flex: none;
}
.coinbox .classfity > div:first-child, .coinbox .classfity div:nth-child(1) {
width: 10%;
-ms-flex: none;
flex: none;
}
.coinbox .classfity > div:first-child, .coinbox .classfity div:nth-child(6) {
/*margin-left: 20px;*/
}
.innerbox .coinbox .classfity > div {
-ms-flex: 1;
flex: 1;
cursor: pointer;
}
.alcenter {
-ms-flex-align: center;
align-items: center;
}
.coinbox ul li div {
height: 56px;
font-size: 16px;
line-height: 56px;
border-bottom: 1px solid #000;
color: #c7cce6;
}
.curPer, .pointer {
cursor: pointer;
}
.alcenter {
-ms-flex-align: center;
align-items: center;
}
.coinbox ul li div > p:first-child, .innerbox .coinbox ul li div p:nth-child(4) {
width: 10%;
-ms-flex: none;
flex: none;
}
.coinbox ul li div p {
/*-ms-flex: 1;*/
flex: 1;
}
.gray {
color: #d3dfe6;
}
.ft14 {
font-size: 14px;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ml5 {
margin-left: 15px;
}
.tl {
/* text-align: left; */
}
.coinbox ul li div .green span {
color: #0da88b;
background-color: rgba(13, 168, 139, .1);
}
.coinbox ul li div .red span {
color: #ef5656;
background-color: rgba(239, 86, 86, .1);
}
.coinbox ul li div .change span {
width: 80px;
display: block;
height: 30px;
line-height: 30px;
text-align: center;
}
.coinbox .classfity > div p {
height: 25px;
}
.between {
-ms-flex-pack: justify;
justify-content: space-between;
}
.column {
-ms-flex-direction: column;
flex-direction: column;
}
.coinbox .classfity > div p .up.sort {
border-color: transparent transparent #4e5b85;
}
.coinbox .classfity > div p .up {
border-color: transparent transparent #9ca9b5;
}
.coinbox .classfity > div p span {
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
margin-left: 10px;
}
.coinbox .classfity > div p .down {
border-color: #9ca9b5 transparent transparent;
}
.coinbox .classfity > div p span {
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
margin-left: 10px;
}
.classfity > div {
-ms-flex: 1;
flex: 1;
/* cursor: pointer; */
}
.hove:hover {
background-color: #190303;
}
</style>
src/components/register - 副本.vue
+1478
View File
File diff suppressed because it is too large Load Diff
src/components/register.vue
+852
View File
@@ -0,0 +1,852 @@
<template>
<div class="login-zh">
<indexHeader></indexHeader>
<div class="bit-center-wrap l-box">
<div class="lb-form">
<div class="form-title">{{$t('zjde71')}}{{siteName}}<span style="margin-left: 0.5rem;">{{$t('zjde72')}}</span>
</div>
<div class="form-title2">{{$t('gg8')}}<span
v-if="config.mobile_register==1">、{{$t('login.active_1')}}</span>{{$t('gg9')}}</div>
<div class="tabs">
<div class="ts-item" :class="{tsItActive:tabsIndex==index}" v-for="(item,index) in tabsList"
@click="tabsIndex=index" :style="{display:config.mobile_register==0 && index==0?'none':'flex'}">
{{item.text}}
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{tabsIndex==0?$t('login.active_1'):$t('login.login_tabItem_0')}}
</div>
<div class="input-t2">
<div class="areaCode" v-if="tabsIndex==0" @click="areaCodeShow=true">
<img style="width: 1.5rem;" :src="getgjImg(form.area_code)" v-if="form.area_code" />
<span class="ac-text">{{form.area_code || $t('zjde70')}} </span>
<i class="el-icon-caret-bottom"></i>
</div>
<input v-model="form.user_string" :placeholder="$t('zjde1')" />
</div>
</div>
<div class="srk-item" v-if="config.yzm_radio !=0">
<div class="si-title">
{{$t('register.verification_code')}}
</div>
<div class="input-t">
<input v-model="form.code" :placeholder="$t('zjde5')" />
<span class="hq" @click="getCode">{{isGetting?`${Second}s`:$t('zjde74')}}</span>
<!-- <view class="verification" @click="CountDown" :class="isGetting?'Getting':''">
{{GlobalTimes?`重新获取${Second}s`:'获取验证码'}}
</view> -->
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('login.password')}}
</div>
<div class="input-t">
<input v-model="form.password" type="password" :placeholder="$t('zjde6')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('zjde4')}}
</div>
<div class="input-t">
<input v-model="form.re_password" type="password" :placeholder="$t('zjde6')" />
</div>
</div>
<div class="srk-item">
<div class="input-t">
<input v-model="form.extension_code"
:placeholder="config.sharar_radio==1?$t('yzmbbt') :$t('register.invitation_code')" />
</div>
</div>
<div class="jzmm">
<el-checkbox v-model="checked" text-color="#00f0ff">{{$t('zjde69')}} </el-checkbox>
<span class="dsads">{{siteName}} </span>
<span class="dsads" style="color: #00f0ff;" @click="goPages2(37)">
{{$t('indexFooter.terms_of_service')}}</span>
</div>
<div class="loinSubmit" @click="login">
{{$t('zjde7')}}
</div>
<div class="qt" @click="goPages('login')">{{$t('login.login_btn')}}</div>
<!-- <div class="qt" @click="goPages('forgetPwd')">{{$t('login.forget')}}</div> -->
</div>
</div>
<el-dialog :title="$t('zjde75')" :visible.sync="areaCodeShow" width="400px" :before-close="handleClose">
<div class="areaBox">
<div class="ab-head">
<i class="el-icon-search"></i>
<!-- <input v-model="area" @input="handleInput" class="qhss" :placeholder="$t('zjde76')" /> -->
</div>
<div class="dialog-bottom">
<div class="dbitem" v-for="(item,index) in costList" :key="index" @click="selectCode(item)">
<img class="di-icon" :src="getgjImg(item.costName)" />
<span class="gm">{{getgjText(item.costName)}}</span>
<span class="db-num">{{item.costName}}</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from '@/view/indexFooter'
export default {
name: "login",
components: {
indexHeader,
indexFooter
},
data() {
return {
area: '',
areaCodeShow: false,
checked: false,
tabsList: [{
text: this.$t('login.login_tabItem_1')
},
{
text: this.$t('login.login_tabItem_0')
}
],
tabsIndex: 1,
account_number: '',
password: '',
siteName: '',
form: {
user_string: '',
code: '',
password: '',
re_password: "",
extension_code: '',
area_code: '+61',
},
// 全局的定时器
GlobalTimes: '',
// 秒数
Second: 60,
// 是否倒计时中
isGetting: false,
costList: [],
costList2: [],
deviceIdList: [{
countryName: "China",
countryNumber: "+86",
countryImage: require("@/assets/lang2.png")
},
{
countryName: "Singapore",
countryNumber: "+65",
countryImage: require("@/assets/images/65.png")
},
{
countryName: "Australia",
countryNumber: "+61",
countryImage: require("@/assets/images/61.png")
},
{
countryName: "Malaysia",
countryNumber: "+60",
countryImage: require("@/assets/images/Malaysia.png")
}, {
countryName: "Spain",
countryNumber: "+34",
countryImage: require("@/assets/images/Spain.png")
},
{
countryName: "Canada",
countryNumber: "+62",
countryImage: require("@/assets/images/Canada.png")
},
{
countryName: "United States",
countryNumber: "+1",
countryImage: require("@/assets/images/United States of America.png")
}, {
countryName: "Chile",
countryNumber: "+56",
countryImage: require("@/assets/images/Chile.png")
}, {
countryName: "Colombia",
countryNumber: "+57",
countryImage: require("@/assets/images/Colombia.png")
}, {
countryName: "Cuba",
countryNumber: "+53",
countryImage: require("@/assets/images/Cuba.png")
}, {
countryName: "Denmark",
countryNumber: "+45",
countryImage: require("@/assets/images/Denmark.png")
}, {
countryName: "Egypt",
countryNumber: "+20",
countryImage: require("@/assets/images/Egypt.png")
}, {
countryName: "Finland",
countryNumber: "+358",
countryImage: require("@/assets/images/Finland.png")
}, {
countryName: "France",
countryNumber: "+33",
countryImage: require("@/assets/images/France.png")
}, {
countryName: "French Guiana",
countryNumber: "+594",
countryImage: require("@/assets/images/French Guiana.png")
}, {
countryName: "Germany",
countryNumber: "+49",
countryImage: require("@/assets/images/Germany.png")
}, {
countryName: "Ghana",
countryNumber: "+233",
countryImage: require("@/assets/images/Ghana.png")
}, {
countryName: "Grenada",
countryNumber: "+1473",
countryImage: require("@/assets/images/Grenada.png")
}, {
countryName: "Greece",
countryNumber: "+30",
countryImage: require("@/assets/images/Greece.png")
}, {
countryName: "Guam",
countryNumber: "+1671",
countryImage: require("@/assets/images/Guam.png")
}, {
countryName: "Honduras",
countryNumber: "+504",
countryImage: require("@/assets/images/Honduras.png")
}, {
countryName: "Hongkong",
countryNumber: "+852",
countryImage: require("@/assets/images/Hongkong.png")
}, {
countryName: "India",
countryNumber: "+91",
countryImage: require("@/assets/images/India.png")
}, {
countryName: "Iraq",
countryNumber: "+964",
countryImage: require("@/assets/images/Iraq.png")
}, {
countryName: "Iran",
countryNumber: "+98",
countryImage: require("@/assets/images/Iran.png")
}, {
countryName: "Ireland",
countryNumber: "+353",
countryImage: require("@/assets/images/Ireland.png")
}, {
countryName: "Israel",
countryNumber: "+972",
countryImage: require("@/assets/images/Israel.png")
}, {
countryName: "Italy",
countryNumber: "+39",
countryImage: require("@/assets/images/Italy.png")
}, {
countryName: "Jamaica",
countryNumber: "+1876",
countryImage: require("@/assets/images/Jamaica.png")
}, {
countryName: "Japan",
countryNumber: "+81",
countryImage: require("@/assets/images/Japan.png")
}, {
countryName: "Kampuchea(Cambodia)",
countryNumber: "+855",
countryImage: require("@/assets/images/Kampuchea(Cambodia).png")
}, {
countryName: "Kazakstan",
countryNumber: "+7",
countryImage: require("@/assets/images/Kazakstan.png")
}, {
countryName: "Russia",
countryNumber: "+7",
countryImage: require("@/assets/images/Russia.png")
},
{
countryName: "Korea",
countryNumber: "+82",
countryImage: require("@/assets/images/Korea.png")
},
{
countryName: "Macao",
countryNumber: "+853",
countryImage: require("@/assets/images/Macao.png")
}, {
countryName: "Netherlands",
countryNumber: "+31",
countryImage: require("@/assets/images/Netherlands.png")
}, {
countryName: "New Zealand",
countryNumber: "+64",
countryImage: require("@/assets/images/New Zealand.png")
}, {
countryName: "Norway",
countryNumber: "+47",
countryImage: require("@/assets/images/Norway.png")
}, {
countryName: "Pakistan",
countryNumber: "+92",
countryImage: require("@/assets/images/Pakistan.png")
}, {
countryName: "Poland",
countryNumber: "+48",
countryImage: require("@/assets/images/Poland.png")
}, {
countryName: "Portugal",
countryNumber: "+351",
countryImage: require("@/assets/images/Portugal.png")
}, {
countryName: "Philippines",
countryNumber: "+51",
countryImage: require("@/assets/images/Philippines.png")
}, {
countryName: "Peru",
countryNumber: "+51",
countryImage: require("@/assets/images/Peru.png")
}, {
countryName: "Sweden",
countryNumber: "+46",
countryImage: require("@/assets/images/Sweden.png")
}, {
countryName: "Mexico",
countryNumber: "+52",
countryImage: require("@/assets/images/Mexico.png")
}, {
countryName: "Maldives",
countryNumber: "+960",
countryImage: require("@/assets/images/Maldives.png")
}, {
countryName: "Paraguay",
countryNumber: "+595",
countryImage: require("@/assets/images/Paraguay.png")
}, {
countryName: "Saudi Arabia",
countryNumber: "+966",
countryImage: require("@/assets/images/Saudi Arabia.png")
}, {
countryName: "Suriname",
countryNumber: "+597",
countryImage: require("@/assets/images/Suriname.png")
}, {
countryName: "Thailand",
countryNumber: "+66",
countryImage: require("@/assets/images/Thailand.png")
}, {
countryName: "United Arab Emirates",
countryNumber: "+971",
countryImage: require("@/assets/images/United Arab Emirates.png")
}, {
countryName: "United Kingdom",
countryNumber: "+44",
countryImage: require("@/assets/images/United Kingdom.png")
}, {
countryName: "Taiwan",
countryNumber: "+886",
countryImage: require("@/assets/images/Taiwan.png")
}, {
countryName: "Switzerland",
countryNumber: "+41",
countryImage: require("@/assets/images/Switzerland.png")
}
],
config: {
mobile_register: 0,
sharar_radio: 0,
},
lang: 'en'
}
},
created() {
this.lang = window.localStorage.getItem("lang")
this.$http({
url: "/api/getSiteConfig?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {}
}).then(t => {
this.siteName = t.data.message.site_name
let data = t.data.message
console.log('122', data.mobile_register)
if (data.mobile_register == 1) {
this.tabsIndex = 0
}
this.config = data
})
this.$http({
url: "/api/get_area_code",
method: "post",
data: {}
}).then(t => {
console.log('ttt', t.data.type)
if (t.data.type == "ok") {
this.costList2 = t.data.message.costList
this.costList = t.data.message.costList
console.log('ttt', this.costList)
}
})
const code = this.$route.query.extension_code;
if (code) {
this.form.extension_code = code
}
},
mounted() {
},
methods: {
goPages2(id) {
this.$router.push({
name: 'agreement',
query: {
title: this.$t('zjde166'),
id
}
});
},
handleInput() {
console.log('sdfs', this.area)
this.costList = this.costList2.filter(item => item.costName.includes(this.area))
},
selectCode(item) {
let t = this
this.form.area_code = item.costName
let obj = {
num: item.costName,
text: t.getgjImg(item.costName)
}
this.areaCodeShow = false
},
getgjImg(type) {
let item = this.deviceIdList.filter(item => item.countryNumber == type)[0]
console.log('item', item)
return item ? item.countryImage : '+62'
},
getgjText(type) {
let item = this.deviceIdList.filter(item => item.countryNumber == type)[0]
return item ? item.countryName : require("@/assets/images/Canada.png")
},
getCode() {
if (this.isGetting) return
if (this.form.user_string == '') return this.$message.error(this.$t('zjde1'));
layer.load();
this.$http({
url: "/api/sms_mail",
method: "POST",
data: {
user_string: this.form.user_string,
scene: "register",
area_code_id: "",
area_code: this.form.area_code,
email_code: "",
type_new: this.tabsIndex,
lang: this.lang
}
}).then(t => {
layer.closeAll()
if (t.data.type == 'ok') {
if (this.config.yzm_radio == 1) {
this.form.code = t.data.message
}
this.CountDown()
} else {
layer.msg(t.data.message)
}
})
},
// 倒计时
CountDown() {
this.isGetting = true
this.GlobalTimes = setInterval(() => {
this.Second -= 1
if (this.Second == 0) {
this.Second = 60
this.isGetting = false
clearInterval(this.GlobalTimes)
}
}, 1000)
},
goPages(name) {
this.$router.push({
name
})
},
login() {
// let t = this.$utils.trim(this.account_number)
// let g = this.$utils.trim(this.password)
// if (t == '') return this.$message.error(this.$t('zjde1'));
// if (g == '') return this.$message.error(this.$t('zjde2'));
// form: {
// user_string: '',
// code: '',
// password: '',
// re_password: "",
// extension_code: '',
// },
if (!this.checked) return this.$message.error(this.$t('zjde9'));
let form = this.form
if (form.user_string == "") return this.$message.error(this.$t('zjde1'));
if (form.code == "" && this.config.yzm_radio != 0) return this.$message.error(this.$t('zjde5'));
if (form.password == "") return this.$message.error(this.$t('zjde6'));
if (form.re_password != form.password) return this.$message.error(this.$t('zjde8'));
if (this.config.sharar_radio == 1 && form.extension_code == '') return this.$message.error(this.$t('yzmbbt'));
var t = this;
this.$http({
url: "/api/user/register",
method: "POST",
data: {
...this.form,
area_code_id: this.tabsIndex,
type: this.tabsIndex == 0 ? 'mobile' : 'email',
lang: t.lang
}
}).then(e => {
"ok" == e.data.type ? (layer.msg(e.data.message),
t.mobile ? t.$router.push("/appDown") : t.$router.push({
name: "login"
})) : layer.msg(e.data.message)
})
},
userInfo() {
this.$http({
url: "/api/user/info?lang=" + window.localStorage.getItem("lang"),
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
"ok" == t.data.type && (localStorage.setItem("user_id", t.data.message.id),
localStorage.setItem("email", t.data.message.email),
localStorage.setItem("extension_code", t.data.message.extension_code),
localStorage.setItem("is_seller", t.data.message.is_seller),
eventBus.$emit("seller", t.data.message.is_seller))
}).catch(t => {})
},
},
}
</script>
<style lang="scss">
.login-zh .el-checkbox__input.is-checked+.el-checkbox__label {
color: #f0c163;
}
.login-zh .el-checkbox__label {
font-size: 0.875rem;
}
.login-zh .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #f0c163;
border-color: #f0c163;
}
.lb-form {
font-size: 1rem;
color: #333;
width: 25rem;
margin-top: 3rem;
}
.form-title {
font-size: 1.5rem;
font-weight: 700;
}
.form-title2 {
margin-top: 1.25rem;
font-size: 1rem;
font-weight: 400;
color: #7e7e7e;
}
.tabs {
margin-top: 3.125rem;
display: flex;
}
.ts-item {
font-size: 1rem;
font-weight: 400;
padding: 0.8125rem 1.5rem;
margin-right: 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
}
.tsItActive {
color: #fff;
background-color: #f0c163;
}
.srk-item {
margin-top: 1.2rem;
}
.si-title {
font-size: 1rem;
}
.input-t {
margin-top: 0.5rem;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.7rem;
font-size: 0.875rem;
display: flex;
}
.hq {
cursor: pointer;
color: #f0c163;
}
.input-t2 {
display: flex;
margin-top: 0.5rem;
}
.areaCode {
color: #666;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.7rem;
font-size: 0.875rem;
display: flex;
margin-right: 0.5rem;
display: flex;
align-items: center;
width: 6rem;
justify-content: space-between;
cursor: pointer;
}
.areaCode span {
margin-right: 0.5rem;
}
.input-t2 input {
flex: 1;
padding: 0.7rem;
font-size: 0.875rem;
border: 0.0625rem solid #e7e9ed;
}
.input-t input {
// width: 100%;
flex: 1;
}
.jzmm {
margin-top: 1rem;
color: #7e7e7e;
font-size: 0.875rem;
}
.jzmm .dsads {
margin-left: 0.5rem;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 0.7rem;
border-radius: 0.25rem;
text-align: center;
font-weight: 400;
cursor: pointer;
color: #fff;
background-color: #f0c163;
}
.qt {
cursor: pointer;
margin-bottom: 1.25rem;
width: max-content;
color: #f0c163;
font-size: 0.875rem;
}
.areaBox {}
.dialog-bottom {
height: 18.125rem;
margin-top: 1.875rem;
overflow-y: scroll;
}
.dbitem {
display: flex;
align-items: center;
font-size: 0.875rem;
margin-bottom: 1rem;
cursor: pointer;
}
.gm {}
.di-icon {
width: 2rem;
margin-right: 1rem;
}
.db-num {
margin-left: auto;
margin-right: 0.5rem;
}
// ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
// -webkit-border-radius: 2em;
// -moz-border-radius: 2em;
// border-radius: 2em;
// }
::-webkit-scrollbar {
height: 2rem;
width: 0.4375rem;
border-radius: 2em;
// background-color: #dcdcdc;
}
::-webkit-scrollbar-thumb {
border-radius: 2em;
width: 0.4375rem;
background-color: #dcdcdc;
/* 设置滚动条拖动按钮的背景色 */
}
.ab-head {
color: #999;
display: flex;
border: 0.0625rem solid #e7e9ed;
border-radius: 0.25rem;
padding: 0.6rem 0.7rem;
font-size: 1rem;
}
.qhss {
flex: 1;
margin-left: 0.5rem;
}
@media screen and (max-width: 800px) {
.login-zh .lb-form {
width: 100%;
}
.input-t2 {
margin-top: 1rem !important;
}
// .input-t2 input,
.login-zh .input-t {
margin-top: 1rem;
padding: 1rem;
font-size: 1.2rem;
}
.input-t2 input {
font-size: 1.2rem !important;
}
.login-zh .areaCode {
width: 7rem;
padding: 1rem;
font-size: 1.2rem;
}
.qt,
.ts-item {
font-size: 1.2rem;
}
.login-zh .el-checkbox__label {
font-size: 1rem !important;
}
.loinSubmit {
margin: 2.5rem 0 1.875rem;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
}
.login-zh .qt,
.jzmm .dsads {
font-size: 1.2rem;
}
// .login-zh .areaCode{
// font-size: 1rem;
// }
}
.day {
.input-t input,
.lb-form {
color: #fff;
}
.ac-text,
.input-t2 input {
color: #fff;
}
.input-t {
border: 0.0625rem solid #474d57;
}
}
</style>
src/components/secondContract.vue
+174
View File
@@ -0,0 +1,174 @@
<template>
<div class="home">
<div class="main">
<tv></tv>
<div class="flex" style="height: auto;">
<div class="tv-box">
<div style="display: flex; flex-direction: column; margin-top:0;">
<div class="flex">
<div class="tran-box" style="min-height: 160px">
<transactions :leverTradeId="leverTradeId"></transactions>
</div>
</div>
</div>
</div>
<div class="exchange-box">
<trade :leverTradeId="leverTradeId" :currencyName="currencyName"></trade>
</div>
</div>
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import notice from "@/view/lever/lever_noticeList";
import deal from "@/view/deal";
import market from "@/view/lever/lever_market";
import chart from "@/view/chart";
import entrust from "@/view/lever/lever_entrust";
import hisentrust from "@/view/lever/lever_hisentrust";
import detail from "@/view/detail";
import currency from "@/view/currency";
import complete from "@/view/complete";
import leverTransaction from "@/view/lever/lever_transaction";
import leverTransactions from "@/view/lever_transactions";
// import kline from "@/view/lever/lever_kline";
import tv from '../view/tv';
import trade from "@/mhyjy/second-trade";
import transactions from "@/mhyjy/second_transactions";
export default {
name: "dealCenter",
components: {
indexHeader,
load: 1,
notice,
deal,
tv,
market,
trade,
chart,
entrust,
hisentrust,
detail,
currency,
complete,
leverTransaction,
leverTransactions,
transactions,
// kline
},
data() {
return {
isRouterAlive: true,
currencyName: "",
leverTradeId: 0,
leverData: {
legalId: 0,
currencyId: 0
},
token: ""
};
},
created() {
this.address = localStorage.getItem("address") || "";
this.token = localStorage.getItem("token");
this.leverData.legalId = localStorage.getItem('legal_id');
this.leverData.currencyId = localStorage.getItem('currency_id');
},
methods: {
init() {
var that = this;
this.$http({
url: "/api/currency/quotation_new",
method: "get",
data: {}
}).then(res => {
if (res.data.type == "ok") {
var arr = [];
var arr2 = [];
for (var i = 0; i < res.data.message.length; i++) {
for (var j = 0; j < res.data.message[i].quotation.length; j++) {
if (res.data.message[i].quotation[j].is_display == 1) {
arr.push(res.data.message[i].quotation[j]);
if (
that.leverData.legalId == res.data.message[i].quotation[j].legal_id && that.leverData.currencyId == res.data.message[i].quotation[j].currency_id) {
that.symbol =
res.data.message[i].quotation[j].currency_name +
"/" +
res.data.message[i].quotation[j].legal_name;
that.leverTradeId = res.data.message[i].quotation[j].id;
that.currencyName = res.data.message[i].quotation[j].currency_name;
}
}
}
}
that.quotationList = arr;
if (that.symbol == "") {
that.symbol = arr[0].currency_name + "/" + arr[0].legal_name;
that.leverData.legalId = arr[0].legal_id;
that.leverData.currencyId = arr[0].currency_id;
that.leverTradeId = arr[0].id;
that.currencyName = arr[0].currency_name;
}
}
})
.catch(error => {
});
},
},
mounted() {
this.init()
}
};
</script>
<style scoped lang="scss">
.home {
margin-bottom: 3px;
.main {
> div {
justify-content: space-between;
> div {
}
margin-top: 3px;
.tv-box {
width: calc(100% - 406px);
height: auto;
background:#181d25;
}
.exchange-box {
width: 403px;
height: 735px;
background: #181d25;
}
.tran-box {
width: calc(100%);
height: 650px;
background: #181d25;
}
.trade-box {
width: 485px;
height: 650px;
}
}
}
}
</style>
src/components/secondDealCenter.vue
+785
View File
@@ -0,0 +1,785 @@
<template>
<div class="home">
<div class="main">
<!-- // {{currencyId}} -->
<tvBase :leverTradeId="leverTradeId" v-if="leverTradeId"></tvBase>
<!-- <div class="sasa" style="margin-top: 0;">
<transactions :leverTradeId="leverTradeId" v-if="leverTradeId"></transactions>
</div> -->
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import notice from "@/view/lever/lever_noticeList";
import deal from "@/view/deal";
import market from "@/view/lever/lever_market";
import chart from "@/view/chart";
import entrust from "@/view/lever/lever_entrust";
import hisentrust from "@/view/lever/lever_hisentrust";
import detail from "@/view/detail";
import currency from "@/view/currency";
import complete from "@/view/complete";
import leverTransaction from "@/view/lever/lever_transaction";
import leverTransactions from "@/view/lever_transactions";
// import kline from "@/view/lever/lever_kline";
import tvBase from '@/view/tvBase';
import transactions from "@/mhyjy/second_transactions";
export default {
name: "dealCenter",
components: {
indexHeader,
load: 1,
notice,
deal,
tvBase,
market,
chart,
entrust,
hisentrust,
detail,
currency,
complete,
leverTransaction,
leverTransactions,
transactions,
// kline
},
data() {
return {
isRouterAlive: true,
currencyName: "",
leverTradeId: 0,
leverData: {
legalId: 0,
currencyId: 0
},
profitRatio: '',
walletList: [],
token: ""
};
},
created() {
this.address = localStorage.getItem("address") || "";
this.token = localStorage.getItem("token");
this.leverData.legalId = localStorage.getItem('legal_id');
this.leverData.currencyId = localStorage.getItem('currency_id');
this.leverTradeId = localStorage.getItem('leverTradeId') || 2;
},
provide(){
return {
walletList: this.returnWalletList
}
},
methods: {
returnWalletList() {
return this.walletList;
},
order() {
this.loadWallet()
this.getDeal()
},
loadWallet() {
var t = this;
this.$http({
url: "/api/wallet/list",
method: "post",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(e => {
"ok" == e.data.type && (t.walletList = e.data.message.micro_wallet.balance)
}).catch(t => {
console.log(t)
})
},
init() {
var t = this;
this.loadWallet()
// this.$http({
// url: "/api/currency/quotation_new",
// method: "get",
// data: {}
// }).then(e => {
// if ("ok" == e.data.type) {
// for (var a = [], s = 0; s < e.data.message.length; s++)
// for (var i = 0; i < e.data.message[s].quotation.length; i++)
// 1 == e.data.message[s].quotation[i].is_display && (a.push(e.data.message[s]
// .quotation[i]),
// t.leverData.legalId == e.data.message[s].quotation[i].legal_id && t.leverData
// .currencyId == e.data.message[s].quotation[i].currency_id && (t.symbol = e.data
// .message[s].quotation[i].currency_name + "/" + e.data.message[s].quotation[
// i].legal_name,
// t.leverTradeId = e.data.message[s].quotation[i].id,
// t.currencyName = e.data.message[s].quotation[i].currency_name));
// t.quotationList = a,
// "" == t.symbol && (t.symbol = a[0].currency_name + "/" + a[0].legal_name,
// t.leverData.legalId = a[0].legal_id,
// t.leverData.currencyId = a[0].currency_id,
// t.leverTradeId = a[0].id,
// t.currencyName = a[0].currency_name)
// }
// }).catch(t => {})
},
getDeal() {
var t = this;
this.$http({
url: "/api/microtrade/payable_currencies",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(e => {
if ("ok" == e.data.type && (t.datas = e.data.message,
e.data.message.length > 0)) {
for (var a = 0; a < e.data.message.length; a++)
"AITB" == e.data.message[a].name && (t.bmbBalance = e.data.message[a].user_wallet
.insurance_balance,
t.insurancType = e.data.message[a].insurance_types,
e.data.message[a].user_insurance && (t.userInsurancId = e.data.message[a]
.user_insurance.insurance_type_id));
t.currency_id = e.data.message[0].id,
t.numList = e.data.message[0].micro_numbers,
e.data.message[0].user_wallet && (t.balance = e.data.message[0].user_wallet
.micro_with_insurance),
t.serviceCharge = e.data.message[0].micro_trade_fee,
void 0 !== t.numList[0] && (t.inputValue = t.$utils.filterDecimals(t.numList[0].number,
0)),
t.tradeName = e.data.message[0].name
}
console.log("datas", t.datas);
let s = t.datas.find(t => 3 == t.id);
// setTimeout(t.currencyTab(s), 50)
}),
this.$http({
url: "/api/microtrade/seconds",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(e => {
"ok" == e.data.type && (t.timeList = e.data.message,
t.profitRatio = e.data.message[0].profit_ratio,
t.value4 = e.data.message[0].seconds)
})
},
},
mounted() {
this.init()
this.getDeal();
var t = this;
eventBus.$on("profitRatio", (function (e) {
t.profitRatio = e
}))
eventBus.$on('secondDealCenterOrder', msg => {
t.order()
})
eventBus.$on('secondDealCenterOrderEnd', msg => {
t.order()
})
}
};
</script>
<style scoped lang="scss">
.sasa {
width: calc(80% - 1rem);
border-right: 0.0625rem solid #2c2c3e;
border-top: 0.0625rem solid #2c2c3e;
border-bottom: 0.0625rem solid #2c2c3e;
}
.home {
margin-bottom: 3px;
.main {
>div {
justify-content: space-between;
>div {}
margin-top: 3px;
.tv-box {
width: calc(100% - 406px);
height: auto;
background: #181d25;
}
.exchange-box {
width: 403px;
height: 735px;
background: #181d25;
}
.tran-box {
width: calc(100%);
height: 650px;
background: #181d25;
}
.trade-box {
width: 485px;
height: 650px;
}
}
}
}
.css-10mdwd2 {
bottom: 0;
box-sizing: border-box;
margin: 0;
min-width: 0;
display: flex;
background-color: #161a1e;
position: absolute;
left: 1%;
bottom: 10px;
width: 98%;
z-index: 100
}
.css-10mdwd2 .sell-btn-container {
min-width: 210px;
width: 55%;
width: 56%;
min-width: 175px
}
.css-ixoz46 {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: flex
}
.css-10mdwd2 .sell-btn-container .sell-btn {
height: 80px;
background: rgba(2, 192, 118, .1);
width: 100%;
height: 60px;
cursor: pointer;
position: relative;
background: rgba(2, 192, 118, .8)
}
.css-ixoz46 .sell-btn {
background: rgba(14, 203, 129, .8) !important;
background: rgba(14, 203, 129, .1) !important
}
.css-10mdwd2 .sell-btn-container .text {
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 20px;
font-weight: 500;
color: #fff
}
.css-10mdwd2 .sell-btn-container .sell-border {
height: 4px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #02c076
}
.css-ixoz46 .sell-border {
background: #0ecb81 !important
}
.tabs {
background-color: #2f3d45;
line-height: 32px;
border-bottom: 1px solid #2f3d45
}
.css-ixoz46:hover .sell-triangle {
border-color: rgba(50, 217, 147, .6) transparent transparent transparent !important
}
.css-ixoz46:hover .sell-btn {
background-color: rgba(50, 217, 147, .6) !important
}
.css-10mdwd2 .sell-btn-container .sell-triangle {
border-width: 80px 80px 0 0;
border-color: rgba(2, 192, 118, .1) transparent transparent transparent;
width: 0;
height: 0;
border-style: solid;
border-width: 60px 60px 0 0;
border-color: rgba(2, 192, 118, .8) transparent transparent transparent
}
.css-ixoz46 .sell-triangle {
border-color: rgba(14, 203, 129, .8) transparent transparent transparent !important;
border-color: rgba(14, 203, 129, .1) transparent transparent transparent !important
}
.css-10mdwd2 .buy-btn-container {
min-width: 210px;
width: 55%;
width: 56%;
min-width: 175px;
position: absolute;
right: 0
}
.css-1a463wo {
box-sizing: border-box;
margin: 0;
min-width: 0;
display: flex
}
.css-10mdwd2 .buy-btn-container .buy-triangle {
border-width: 0 0 80px 80px;
border-color: transparent transparent rgba(248, 73, 96, .1) transparent;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 60px 60px;
border-color: transparent transparent rgba(248, 73, 96, .8) transparent
}
.css-1a463wo .buy-triangle {
border-color: transparent transparent rgba(246, 70, 93, .8) transparent !important;
border-color: transparent transparent rgba(246, 70, 93, .1) transparent !important
}
.css-10mdwd2 .buy-btn-container .buy-btn {
height: 80px;
background: rgba(248, 73, 96, .1);
width: 100%;
height: 60px;
cursor: pointer;
position: relative;
background: rgba(248, 73, 96, .8)
}
.css-1a463wo .buy-btn {
background: rgba(246, 70, 93, .8) !important;
background: rgba(246, 70, 93, .1) !important
}
.css-10mdwd2 .buy-btn-container .text {
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 20px;
font-weight: 500;
color: #fff
}
.css-10mdwd2 .buy-btn-container .buy-border {
height: 4px;
width: 100%;
position: absolute;
top: 0;
right: 0;
background: #f84960
}
.css-1a463wo .buy-border {
background: #f6465d !important
}
.css-1a463wo:hover .buy-btn {
background: rgba(246, 70, 93, .8) !important
}
.css-1a463wo:hover .buy-triangle {
border-color: transparent transparent rgba(246, 70, 93, .8) transparent !important
}
.css-1avd4zd {
background-image: url(../assets/images/pner.png);
background-repeat: no-repeat;
background-size: contain
}
.transbtn:hover {
color: #276dff;
border-bottom: 1px solid #276dff
}
.tabs span {
display: block;
width: 50%;
text-align: center;
color: #babbbb;
font-size: 12px
}
.tabs .active {
background-color: #1e2b34
}
.contents {
padding: 7px 0;
padding-bottom: 15px
}
.contents .iconfont,
.iconfont {
margin-right: 10px;
color: #276dff
}
.mt5 {
margin-top: 10px
}
.trade .el-select .el-input.is-focus .el-input__inner {
border-color: #304049
}
.lefts {
width: 80px;
line-height: 30px;
color: #000
}
.curency-list .mb10 {
flex: 1
}
.curency-list .mb10:last-child {
margin-right: 0
}
.curency-list span {
background-color: #fff
}
.contents .el-select {
background-color: #1e2b34
}
.contents .el-input__inner {
background-color: #1e2b34;
border: 1px solid #304049;
height: 30px;
line-height: 30px;
font-size: 12px
}
.contents .el-input__icon {
line-height: 30px
}
.contents .popper__arrow {
left: 50% !important
}
.rights {
width: calc(100% - 80px);
line-height: 30px;
height: 30px;
border: 1px solid #304049;
position: relative;
background-color: #1e2b34
}
.rights .iconfont {
position: absolute;
right: 10px;
top: 0;
cursor: pointer;
background-color: transparent
}
.rights input {
background-color: transparent;
padding: 0 15px;
color: #fff
}
.shareNumber {
margin-top: 10px;
width: 100%
}
input {
padding: 0 15px;
color: #fff
}
.share-rights {
position: relative
}
.share-rights input {
line-height: 40px;
height: 40px;
width: 100%;
background-color: transparent;
border: 1px solid #304049;
padding: 0 15px;
color: #c7cce6;
font-size: 12px
}
.share-rights p {
line-height: 30px;
border: 1px solid #304049;
width: calc(24.73% - 8px);
text-align: center;
border-radius: 4px;
margin-right: 12px;
font-size: 12px;
color: #fff;
cursor: pointer;
margin-bottom: 10px
}
.mults {
border: none
}
.mult-contents p {
line-height: 30px;
border: 1px solid #304049;
width: calc(24.73% - 8px);
text-align: center;
border-radius: 4px;
margin-right: 12px;
margin-bottom: 10px;
color: #fff;
cursor: pointer;
font-size: 12px;
background-color: transparent
}
.sell_btn {
margin: 0 !important;
border-radius: 10px !important
}
.sell_btn:first-child {
width: 160px;
margin-right: 5px !important
}
.sell_btn:last-child {
width: 185px;
margin-left: 5px !important
}
.greenColor {
border-color: #00c087
}
.redColor {
border-color: #e3046f
}
.transfer-contents h3 {
text-align: center;
color: #276cff;
font-size: 18px
}
.transfer-list p {
line-height: 30px;
color: #606266;
line-height: 40px
}
.trade .el-button--primary {
background-color: #276cff;
width: 140px;
border: none
}
.trade .el-dialog--center .el-dialog__body {
padding: 25px 25px 10px
}
.active {
background: url(../assets/images/selects.png) no-repeat 100% 100%;
border: 1px solid #5e94ea
}
.trade {
margin-top: 10px;
padding: 0 20px
}
.trade-currency {
color: #fff;
padding: 10px 0;
padding-bottom: 0
}
.trade-currency li {
text-align: center;
margin-top: 10px;
font-size: 14px
}
.trade-bg {
color: #fff;
line-height: 40px;
padding: 0;
font-size: 14px;
margin-bottom: 10px
}
.trade-bg img {
margin-top: 15px;
margin-right: 5px;
width: 20px;
height: 20px
}
.balck .trade-bg,
.balck .trade-currency {
background-color: #1e2b34
}
.balck .curency-list span,
.balck .mult-contents p,
.balck .share-rights input,
.balck .share-rights p {
background-color: #181b2a;
color: #fff
}
.balance {
width: 100%
}
.balance ul {
margin-top: 20px
}
.insuranc {
width: 50%
}
.insuranc-list span {
display: inline-block;
padding: 5px;
border: 1px solid #999;
border-radius: 4px;
color: #999
}
.insuranc-list span:first-child {
margin-right: 15px
}
.insuranc-list .active {
color: #276cff;
border: 1px solid #276cff;
background: transparent
}
.loss-madal-contents span {
display: block;
text-align: center;
margin-top: 5px
}
.flex {
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex
}
.sell_btn {
line-height: 40px;
text-align: center;
height: 40px;
color: #fff;
margin: 10px 15px;
cursor: pointer;
width: calc(100% - 20px);
border-radius: 40px
}
.greenBg {
background-color: #35b65a !important;
border-color: #35b65a !important
}
.redBg {
background-color: #ff494a !important;
border-color: #ff494a !important
}
.whiteBg .curency-list span,
.whiteBg .mult-content p,
.whiteBg .share-rights p {
color: #fff;
border: 1px solid #e9e9e9
}
.whiteBg .curency-list span {
color: #fff
}
.curency-list span {
display: inline-block;
width: 100px;
line-height: 30px;
height: 30px;
border: 1px solid #304049;
border-radius: 4px;
margin-right: 12px;
background: transparent;
font-size: 12px;
text-align: center;
cursor: pointer;
color: #fff
}
.mb10 {
margin-bottom: 10px
}
.active {
background-size: 35px 30px;
background-color: #266eff !important
}
@media screen and (max-width: 800px) {
.sasa {
width: 100%;
}
}
.day {
.sasa {
border-right: 0.0625rem solid #2b3139;
border-top: 0.0625rem solid #2b3139;
border-bottom: 0.0625rem solid #2b3139;
}
}
</style>
src/components/secondaryHead.vue
+69
View File
@@ -0,0 +1,69 @@
<template>
<div class="tbfh">
<div class="fjsf bit-center-wrap" @click="fh">
<i class="el-icon-arrow-left" style="color: #aaa;"></i>
<span class="ted">{{text}}</span>
</div>
</div>
</template>
<script>
export default {
props:{
text:{
type:String,
default:''
},
},
methods:{
fh(){
this.$router.go(-1); // 返回上一个页面
}
}
}
</script>
<style lang="scss" scoped>
.tbfh {
width: 100%;
padding: 2rem 0;
background: #f5f5f5;
margin-bottom: 3rem;
}
.fjsf {
cursor: pointer;
display: flex;
align-items: center;
font-size: 1.875rem;
}
.ted {
font-weight: 700;
color: #333;
}
.day {
.tbfh{
background: #090d13;
}
.ted {
color: #FFF;
}
}
@media screen and (max-width: 800px) {
.tbfh {
padding: 1.5rem 0;
margin-bottom: 2rem;
}
.fjsf {
font-size: 1.5rem;
}
}
</style>
src/components/setCash.vue
+119
View File
@@ -0,0 +1,119 @@
<template>
<div>
<index-header></index-header>
<div class="account-wrap">
<div class="account">
<div >
<div class="back-nav fColor1 ft20">
{{$t('security.setting')}}{{$t('security.tbpw')}}
<span class="fr fColor2 mouseDefault" @click="goBack">&lt;&lt;{{$t('back')}}</span>
</div>
<div class="nav-after"></div>
</div>
<div class="account-content">
<div class="main ft14">
<div >
<span class="fColor2 left">{{$t('security.tbpw')}}</span> <input type="password" maxlength="6" placeholder="6位字母或数字" class="main-input"></div>
<div class="mt40">
<span class="fColor2 left">{{$t('register.repwd')}}</span> <input type="password" maxlength="6" placeholder="$t('lpwd.repwd')" class="main-input"></div>
<div class="mt60">
<span class="fColor2 left">&nbsp;</span>
<div class="baseBtn ml20 mouseDefault">{{$t('confirm')}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
export default {
name: "setCash",
data() {
return {};
},
components: {
indexHeader
},
methods:{
goBack(){
this.$router.back(-1);
}
}
}
</script>
<style lang="scss" scoped>
$navBack:#181b2a;
$base:#5697f4;
$line:#303b4b;
$fColor2:#637085;
.account-main {
padding-left: 34px;
padding-right: 34px;
padding-top: 34px;
.bar-bottom {
width: 320px;
height: 8px;
border-radius: 4px;
background-color: $navBack;
margin: 22px 0 12px 0;
overflow: hidden;
.bar-top {
background-color: $base;
height: 100%;
}
}
ul {
border-top: 1px solid $line;
color: $fColor2;
font-size: 14px;
img {
width: 16px;
vertical-align: middle;
}
li {
border-bottom: 1px solid $line;
line-height: 72px;
position: relative;
p {
position: absolute;
left: 300px;
top: 0;
}
}
}
}
.main{
padding: 208px 0 0 400px;
line-height: 48px;
}
.main .left{
display: inline-block;
width: 80px;
text-align: right;
}
.main .main-input {
margin-left: 20px;
width: 428px;
}
.main-input {
width: 360px;
height: 48px;
border: 1px solid #52688c;
padding: 0 20px;
color: #cdd6e4;
font-size: 16px;
border-radius: 3px;
background-color: #262a42;
}
</style>
// WEBPACK FOOTER //
// src/components/setCash.vue
src/components/successPopup.vue
+52
View File
@@ -0,0 +1,52 @@
<template>
<div>
<el-dialog title="" :visible.sync="dialogVisible" width="450px" :show-close="false">
<div class="dsada">
<div>
<i class="el-icon-success csds" style="color: #0ecb81;"></i>
</div>
<div class="kku">{{$t('tjcg')}}</div>
<div class="hgfhg" @click="dialogVisible=false">{{$t('tv.confirm')}}</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "successPopup",
data() {
return {
dialogVisible: false,
}
}
}
</script>
<style lang="scss">
.dsada {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.csds {
font-size: 60px;
}
.kku {
margin: 2rem auto;
color: #333;
margin-top: 2rem;
}
.hgfhg {
color: #f0c163;
cursor: pointer;
}
}
</style>
src/components/userSetting.vue
+73
View File
@@ -0,0 +1,73 @@
<template>
<div id="user-setting" :class="skins=='days'?'whites':'whites balck'">
<div class="setting-r">
<h3>{{$t('seting.pmethod')}}</h3>
<router-view></router-view>
</div>
<!-- <indexFooter></indexFooter> -->
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import indexFooter from "@/view/indexFooter";
export default {
components: { indexHeader, indexFooter },
data() {
return {
skins: localStorage.getItem("skin") || "days"
};
},
};
</script>
<style lang='scss' scoped>
.whites {
margin-top: 66px;
min-height: 700px;
position:relative;
margin-bottom:30px;
top:18px;
> .setting-l {
margin: 0 10px;
padding: 0 30px;
line-height: 40px;
background: #fff;
width: 23%;
.router-link-active {
color: #00a4d8;
}
}
.setting-r {
background: #fff;
width: 700px;
margin: 0 auto;
margin-bottom: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding-bottom: 10px;
h3 {
width: 100%;
line-height: 60px;
background: #fff;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #efefef;
}
}
}
.balck .setting-r {
background-color: #1e2b34;
columns: #fff;
}
.balck .setting-r h3{
background-color: #1e2b34;
color: #fff;
border-bottom: 1px solid #000;
}
</style>
src/lang/de.js
+1926
View File
File diff suppressed because it is too large Load Diff
src/lang/drj.js
+1715
View File
File diff suppressed because it is too large Load Diff
src/lang/en.js
+2515
View File
File diff suppressed because it is too large Load Diff
src/lang/fra.js
+1929
View File
File diff suppressed because it is too large Load Diff
src/lang/hk.js
+2558
View File
File diff suppressed because it is too large Load Diff
src/lang/it.js
+1925
View File
File diff suppressed because it is too large Load Diff
src/lang/jp.js
+1651
View File
File diff suppressed because it is too large Load Diff
src/lang/kr.js
+1650
View File
File diff suppressed because it is too large Load Diff
src/lang/lang.js
+35
View File
@@ -0,0 +1,35 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import zh from './zh' //中
import en from './en' //英
import kr from './kr' //韩
import jp from './jp' //日
import hk from './hk' //繁体
import spa from './spa' //西班牙语
import it from './it' //意
import de from './de' //德
import fra from './fra' //法
import drj from './drj' //土
let locale = window.localStorage.getItem('locale') || '';
if (locale == '') {
locale = 'en';
window.localStorage.setItem('locale', locale);
window.localStorage.setItem('lang', locale);
}
export default new VueI18n({
locale: locale,
messages: {
zh: zh,
en: en,
kr: kr,
jp: jp,
hk: hk,
spa: spa,
it: it,
de: de,
fra: fra,
drj: drj
}
})
src/lang/spa.js
+1650
View File
File diff suppressed because it is too large Load Diff
src/lang/zh.js
+2593
View File
File diff suppressed because it is too large Load Diff
src/view/accounts/TradePassword.vue
+316
View File
@@ -0,0 +1,316 @@
<template>
<div class="layout">
<nav class="navigation" style="margin-top: 20px;">
<router-link to="/center" class="nav-link">{{ $t("batchData.securityCenter") }}</router-link>
<span class="separator">></span>
<span class="nav-link active">{{ $t("batchData.transactionPassword") }}</span>
</nav>
<main class="main-content">
<div class="container">
<div class="content">
<h1 class="page-title">{{ $t("batchData.transactionPassword") }}</h1>
<div class="password-form">
<div class="form-title">{{ $t("batchData.setNewPassword") }}</div>
<div class="input-container">
<input :type="passwordVisible ? 'text' : 'password'" v-model="password" :placeholder="$t('batchData.pleaseEnterNewPassword')"
class="password-input">
<button class="toggle-password" @click="togglePasswordVisibility">
<svg v-if="!passwordVisible" viewBox="0 0 24 24" width="24" height="24"
stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
<svg v-else viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path
d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24">
</path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
</button>
</div>
<div class="note">
{{ $t("batchData.transactionPasswordNote") }}
</div>
<button class="submit-button" @click="submitPassword">{{ $t("batchData.setTransactionPassword") }}</button>
</div>
</div>
</div>
</main>
</div>
</template>
<script>
export default {
name: 'TradePasswordView',
data() {
return {
password: '',
passwordVisible: false,
token: "",
}
},
created() {
this.token = localStorage.getItem("token") || ""
},
methods: {
togglePasswordVisibility() {
this.passwordVisible = !this.passwordVisible;
},
submitPassword() {
if (!this.password.trim()) {
this.$message.error(this.$t("batchData.pleaseEnterTransactionPassword"));
return;
}
if (!/^\d{6}$/.test(this.password.trim())) {
this.$message.error(this.$t("batchData.transactionPasswordMustBe6Digits"));
return;
}
var t = this;
this.$http({
url: "/api/real/updatesPassword?lang=" + window.localStorage.getItem("lang") || !1,
method: "post",
data: {
pay_password: this.password.trim()
},
headers: {
Authorization: this.token
}
}).then(e => {
if(e.data.type=="ok"){
t.$message.success(this.$t("batchData.transactionPasswordSetSuccessfully"));
t.$router.back();
}
})
}
}
}
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, "Microsoft YaHei", sans-serif;
}
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 100%;
}
.header {
padding: 16px;
background-color: rgba(20, 20, 20, 0.7);
border-bottom: 1px solid #333;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.main-content {
flex: 1;
padding: 20px 0;
width: 100%;
margin: 0 auto;
}
.container {
margin: 0 auto;
padding: 20px;
}
.navigation {
display: flex;
align-items: center;
margin-bottom: 40px;
padding: 10px 0;
}
.nav-link {
color: #4183c4;
text-decoration: none;
font-size: 14px;
}
.nav-link.active {
color: #fff;
pointer-events: none;
}
.separator {
margin: 0 8px;
color: #4183c4;
}
.page-title {
font-size: 28px;
text-align: center;
margin-bottom: 40px;
font-weight: normal;
}
.password-form {
max-width: 486px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.form-title {
font-size: 16px;
margin-bottom: 20px;
align-self: flex-start;
}
.input-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.password-input {
width: 100%;
padding: 12px 40px 12px 16px;
background-color: #0f0f0f;
border: 1px solid #333;
border-radius: 4px;
color: #fff;
font-size: 16px;
outline: none;
}
.password-input::placeholder {
color: #666;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #666;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.note {
color: #666;
font-size: 12px;
margin-bottom: 30px;
width: 100%;
text-align: left;
}
.submit-button {
width: 100%;
padding: 14px;
background-color: #00cce1;
color: #000;
border: none;
border-radius: 24px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
.submit-button:hover {
background-color: #00b0c2;
}
/* Responsive Styles */
@media (max-width: 768px) {
.header {
padding: 12px;
}
.navigation {
margin-left: 12px
}
.main-content {
padding: 15px 0;
}
.container {
padding: 16px;
}
.page-title {
font-size: 24px;
margin-bottom: 30px;
}
.password-form {
max-width: 100%;
}
.submit-button {
padding: 12px;
}
}
@media (max-width: 480px) {
.container {
padding: 15px;
}
.navigation {
margin-bottom: 20px;
}
.page-title {
font-size: 22px;
margin-bottom: 20px;
}
.input-container {
margin-bottom: 15px;
}
.form-title {
margin-bottom: 15px;
}
.note {
margin-bottom: 20px;
}
}
@media screen and (min-width: 768px) {
.main-content {
width: 600px;
}
.navigation {
margin-left: 80px
}
}
</style>
src/view/accounts/UOrder - 副本.vue
+1419
View File
File diff suppressed because it is too large Load Diff
src/view/accounts/UOrder.vue
+284
View File
@@ -0,0 +1,284 @@
<template>
<div class="accounting">
<secondaryHead :text="$t('zjde222')"></secondaryHead>
<div class="bit-center-wrap">
<div class="ag-top">
<div class="zblx">{{$t('zjde223')}}</div>
<div class="z-select">
<el-select @change="getList" v-model="value" :placeholder="$t('tv.el_select_placeholder')">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="list-ag">
<div class="lg-item lg-had">
<div class="ld-item">{{$t('zhjs')}}</div>
<div class="ld-item">{{$t('zjde223')}}</div>
<div class="ld-item">{{$t('zjde224')}}</div>
<div class="ld-item">{{$t('zjde225')}}</div>
<div class="ld-item">{{$t('zjde226')}}</div>
<div class="ld-item">{{$t('zjde227')}}</div>
<div class="ld-item">{{$t("accountaEntrust.time")}}</div>
</div>
<div class="lg-item" v-for="(item,index) in list" :key="index">
<div class="ld-item">
<span class="lm-l">{{$t('zhjs')}}</span>
<span class="lm-r">{{$t('sjzh')}}</span>
</div>
<div class="ld-item">
<span class="lm-l">{{$t('zjde223')}}</span>
<span class="lm-r"> {{item.info}}</span>
</div>
<div class="ld-item">
<span class="lm-l">{{$t('zjde224')}}</span>
<span class="lm-r">{{selx(item.balance_type)}}</span>
</div>
<div class="ld-item">
<span class="lm-l">{{$t('zjde225')}}</span>
<span class="lm-r">{{item.currency_name}}</span>
</div>
<div class="ld-item">
<span class="lm-l">{{$t('zjde226')}}</span>
<span class="lm-r">{{Number(item.value)}}</span>
</div>
<div class="ld-item">
<span class="lm-l">{{$t('zjde227')}}</span>
<span class="lm-r"> {{Number(item.after).toFixed(4)}}</span>
</div>
<div class="ld-item">
<span class="lm-l">{{$t("accountaEntrust.time")}}</span>
<span class="lm-r">{{item.created_time}}</span>
</div>
</div>
</div>
<div style="justify-content: center; margin: 2rem auto; color: #ccc; display: flex;" v-if="list.length==0">
{{$t("zjde185")}}
</div>
<div style="display: flex; justify-content: center; margin: 2rem auto; ">
<el-pagination @current-change="chanhepages" layout="prev, pager, next" background :total="count">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import secondaryHead from "@/components/secondaryHead";
export default {
components: {
secondaryHead
},
name: "UOrder",
data() {
return {
options: [{
value: '6',
label: this.$t('complete.all')
}, {
value: '2',
label: this.$t('indexHeader.spot_trading')
}, {
value: '3',
label: this.$t('homeContent.greenhorn_trade_module_fourth')
}, {
value: '4',
label: this.$t('zjde37')
}, {
value: '5',
label: this.$t('fiat.financial_account')
},
{
value: '1',
label: this.$t('fiat.fiat_account')
},
],
value: '6',
list: [],
count: 0,
pages: 1
};
},
updated() {
},
methods: {
},
created() {
this.getList()
},
mounted() {
},
methods: {
// optChang(e){
// console.log('e',e)
// },
chanhepages(e) {
console.log('eee', e)
this.pages = e
this.getList()
},
selx(val) {
let obj = this.options.filter(item => item.value == val)
return obj.length > 0 ? obj[0].label : '--'
},
getList() {
layer.load();
this.$http({
url: `/api/wallet/legal_log?type=${this.value}&limit=10&page=${this.pages}&lang=${window.localStorage.getItem('lang')}`,
method: "get",
headers: {
'lang': window.localStorage.getItem('lang'),
Authorization: localStorage.getItem("token")
}
}).then(e => {
layer.closeAll()
// this.data = e.data.message
console.log('eee', e.data.message.list)
this.list = e.data.message.list
this.count = e.data.message.count
})
}
},
filters: {
},
computed: {
}
};
</script>
<style lang="scss">
.accounting {
width: 100%;
}
.ag-top {
display: flex;
align-items: center;
font-size: 1rem;
}
.zblx {
margin-right: 1rem;
}
.accounting .el-input__inner {
border-color: #DCDFE6 !important;
background-color: transparent !important;
color: #666 !important;
}
.lg-item {
display: flex;
border-bottom: 1px solid #DCDFE6;
}
.ld-item {
flex: 1;
text-align: center;
padding: 1rem 0;
color: #333;
}
.list-ag {
margin-top: 3rem;
}
.lg-had {
color: #909399;
background: #eee;
}
.lm-l {
display: none;
}
.el-pager li {
width: 30px;
}
@media screen and (max-width: 800px) {
.lm-l {
display: block;
}
.lg-had {
display: none;
}
.ld-item {
display: flex;
align-items: center;
}
.lg-item {
flex-direction: column;
}
.lm-l {
width: 30%;
text-align: left;
color: #999;
}
}
.day {
.accounting .el-input__inner {
border-color: #1f2634 !important;
background-color: transparent !important;
color: #FFF !important;
}
.lg-had {
color: #FFF;
background: #1c222c;
}
.lg-item {
border-bottom: 1px solid #1f2634;
}
.ld-item {
// border-bottom: 1px solid #1f2634;
color: #fff;
}
.zblx {
color: #fff;
}
.el-pagination.is-background .el-pager li {
background-color: #1c222c;
color: #FFF;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
background-color: #1c222c;
color: #FFF;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #384253;
color: #FFF;
}
}
</style>
src/view/accounts/center.vue
+345
View File
@@ -0,0 +1,345 @@
<template>
<div class="layout">
<main class="main-content">
<div class="container">
<h1 class="page-title">{{ $t("batchData.securityCenter") }}</h1>
<div class="security-items">
<!-- 身份認證 -->
<div class="security-item" @click="navigateTo('transferLog')">
<div class="security-item-left" style="display: flex;">
<div class="security-item-title" >{{ $t("batchData.identityAuthentication") }}</div>
<div class="status-badge unverified" style="margin: 0 10px;font-size: 14px;"
v-if="review_status == 0">{{ $t("accountSet.go_to_authentication") }}</div>
<div class="status-badge review" style="margin: 0 10px;font-size: 14px;"
v-if="review_status == 1">{{ $t("accountSet.under_review") }}</div>
<div class="status-badge verified" style="margin: 0 10px;font-size: 14px;"
v-if="review_status == 2">{{ $t("accountSet.audited") }}</div>
</div>
<div class="security-item-right">
<div class="security-item-description" style="margin-top: 2px;">
{{ $t("batchData.completeIdentityAuthenticationPrompt") }}
</div>
</div>
</div>
<div class="security-item" @click="navigateTo('transferLog')">
<div class="security-item-left" style="display: flex;">
<div class="security-item-title" >{{ $t("batchData.advancedIdentityAuthentication") }}</div>
<div class="status-badge unverified" style="margin: 0 10px;font-size: 14px;"
v-if="0 == advanced_review_status && review_status >= 2">{{
$t("accountSet.go_to_authentication") }}</div>
<div class="status-badge review" style="margin: 0 10px;font-size: 14px;"
v-if="1 == advanced_review_status && review_status >= 2">{{
$t("accountSet.under_review") }}</div>
<div class="status-badge verified" style="margin: 0 10px;font-size: 14px;"
v-if="advanced_review_status >= 2 && review_status >= 2">{{ $t("accountSet.audited") }}
</div>
</div>
<div class="security-item-right">
<div class="security-item-description" style="margin-top: 2px;">
{{ $t("batchData.completeIdentityAuthenticationPrompt") }}
</div>
</div>
</div>
<div class="security-item" @click="navigateTo('tradePassword')">
<div class="security-item-left" style="display: flex;">
<div class="security-item-title">{{ $t("batchData.transactionPassword") }}</div>
<div class="status-badge unverified" style="margin: 0 10px;font-size: 14px;"
v-if="pay_password_status == 0">{{ $t("batchData.notAuthenticated") }}</div>
<div class="status-badge verified" style="margin: 0 10px;font-size: 14px;"
v-if="pay_password_status == 1">{{ $t("batchData.authenticated") }}</div>
</div>
<div class="security-item-right">
<div class="security-item-description" style="margin-top: 2px;">
{{ $t("batchData.setTransactionPasswordPrompt") }}
</div>
</div>
</div>
<!-- 交易密碼 -->
<!-- <div class="security-item active" @click="navigateTo('/trade-password')">
<div class="security-item-left">
<div class="security-item-title">交易密碼</div>
</div>
<div class="security-item-right">
<div class="status-badge unverified">未設置</div>
<div class="security-item-description">
為了您的資金安全，請設定交易密碼
</div>
</div>
</div> -->
<!-- 手機認證
<div class="security-item" @click="navigateTo('')">
<div class="security-item-left">
<div class="security-item-title">手機認證</div>
</div>
<div class="security-item-right">
<div class="status-badge unverified">未認證</div>
<div class="security-item-description">
用於接收平臺推送及獲取最新資訊
</div>
</div>
</div> -->
</div>
</div>
</main>
</div>
</template>
<script>
export default {
name: 'SecurityCenter',
data() {
return {
token: "",
review_status: 0,
advanced_review_status: 0,
pay_password_status: 0
}
},
created() {
this.token = localStorage.getItem("token") || ""
},
mounted() {
this.init();
},
computed: {
// review_status_name() {
// // if (this.review_status == 0) return this.$t("accountSet.go_to_authentication")
// // if (this.review_status == 0) return this.$t("accountSet.go_to_authentication")
// }
},
methods: {
init() {
var t = this;
this.$http({
url: "/api/real/state?lang=" + window.localStorage.getItem("lang") || !1,
method: "get",
data: {},
headers: {
Authorization: this.token
}
}).then(e => {
t.review_status = e.data.message.review_status,
t.advanced_review_status = e.data.message.advanced_review_status
t.pay_password_status = e.data.message.password_status
})
},
navigateTo(path) {
if (path === "tradePassword" && this.pay_password_status == 1) {
return;
}
if (path) {
this.$router.push({
name: path
});
}
}
}
}
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, "Microsoft YaHei", sans-serif;
}
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
width: 100%;
background-image: url("../../assets/cm-bg.11e76927.png");
}
.header {
padding: 16px;
background-color: rgba(20, 20, 20, 0.7);
border-bottom: 1px solid #333;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.main-content {
flex: 1;
padding: 20px 0;
margin: 0 auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #fff;
}
.page-title {
font-size: 26px;
text-align: center;
margin-bottom: 40px;
font-weight: bold;
}
.security-items {
margin: 0 auto;
}
.security-item {
display: flex;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 6px;
padding: 24px;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
}
.security-item:hover {
background-color: rgba(35, 35, 35, 0.7);
}
.security-item.active {
border: 1px solid #00cce1;
background-color: rgba(35, 35, 35, 0.7);
}
.security-item-left {
flex: 1;
width: fit-content;
}
.security-item-right {
flex: 3;
display: flex;
flex-direction: column;
}
.security-item-title {
font-size: 18px;
color: #fff;
min-width: 120px;
}
.status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
margin-bottom: 8px;
width: fit-content;
white-space: nowrap;
height: fit-content;
}
.status-badge.verified {
background-color: rgba(0, 215, 124, 0.1);
color: #00F0FF;
}
.status-badge.unverified {
background-color: rgba(255, 72, 52, 0.1);
color: #FF4834;
}
.status-badge.review {
background-color: rgba(255, 72, 52, 0.1);
color: rgba(240, 193, 99, 1);
}
.security-item-description {
color: #999;
font-size: 14px;
}
/* Responsive Styles */
@media (max-width: 768px) {
.header {
padding: 12px;
}
.main-content {
padding: 15px 0;
}
.page-title {
font-size: 24px;
margin-bottom: 30px;
}
.security-item {
flex-direction: column;
padding: 16px;
}
.security-item-left {
margin-bottom: 10px;
}
.security-item-right {
flex: 1;
}
.main-content {
width: 100vw;
}
.layout {
background-image: none;
}
}
@media (max-width: 480px) {
.container {
padding: 15px;
}
.page-title {
font-size: 22px;
margin-bottom: 20px;
}
.security-item {
padding: 12px;
margin-bottom: 15px;
}
.security-item-title {
font-size: 16px;
}
.security-item-description {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
.main-content {
width: 600px;
}
}
</style>
src/view/accounts/change.vue
+865
View File
@@ -0,0 +1,865 @@
<template>
<div class="property">
<div class="py-head">
<div class="bit-center-wrap ph-cn">
<div class="pc-item" :class="{'pc-iActive':tabIndex==index}" v-for="(item,index) in tabList" :key="index"
@click="tabIndex=index">{{item.tetx}}</div>
</div>
</div>
<div class="py-cn bit-center-wrap">
<div class="top-model pos-r" v-for="(item,index) in tabList" :key="index" v-show="tabIndex==0 || tabIndex==index">
<div>
<div class="top-model-head flex-v-c">
<span class="top-model-title">{{item.gg}}
</span>
<img class="yj" v-if="index==0" src="@/assets/k.png" />
</div>
<div class="usdt-money">
<div class="um-nul">
{{index==0?total.toFixed(4):(data[item.type].usdt_totle).toFixed(4)}}
</div>
</div>
<div class="money2">≈{{hlObj.symbol || $}}
{{(index==0?total.toFixed(4):(data[item.type].usdt_totle).toFixed(4)) * huilv}}
</div>
<div class="today-money " v-if="index !=0"> {{$t('zjde103')}}:
{{ data[item.type].today_usdt_totle || 0.00}}<i class="el-icon-refresh-right"></i>
</div>
<div class="today-money " v-else> {{$t('zjde103')}}: {{ zsy || 0.00}}<i class="el-icon-refresh-right"></i>
</div>
</div>
<div v-show="tabIndex !=0" @click="hform(item.value)" class="dsfd">
<div class="un-butt" v-show="index==1">
<div class="un-item" @click.stop="goTb('withdrawDeposit')">{{$t('other.withdraw_coins')}}
</div>
<div class="un-item un-item2" @click.stop="goTb('deposit')">{{$t('accountCenter.deposit')}}
</div>
<div class="un-item" @click.stop="exchangeShow=true">{{$t('indexHeader.exchange')}}</div>
</div>
<div class="un-butt" v-show="index==2">
<div class="un-item" style="">{{$t('zjde101')}}</div>
<div class="un-item un-item2" style="background: #a493ec;">{{$t('zjde102')}}</div>
</div>
<div class="un-butt" v-show="index==3">
<div class="un-item">{{$t('zjde101')}}</div>
<div class="un-item un-item2" style="background: #269c87;">{{$t('zjde102')}}</div>
</div>
<div class="un-butt" v-show="index==4">
<div class="un-item">{{$t('zjde101')}}</div>
<div class="un-item un-item2" style="background: #a6a6a6;">{{$t('zjde102')}}</div>
</div>
</div>
</div>
<div class="bilb" v-if="tabIndex !=0">
<div class="bb-top">
<div class="tb-item">
{{$t("market.currency")}}
</div>
<div class="tb-item">
{{$t("accountCenter.available")}}
</div>
<div class="tb-item">
{{$t("accountCenter.freeze")}}
</div>
<div class="tb-item">
{{$t("secondTv.conversion")}}(USDC)
</div>
</div>
<div class="bb-cn">
<div class="bc-i" v-for="(item,index) in data[tabList[tabIndex].type].balance || []">
<!-- <template v-if="item.currency_name !='GMP' && index<20"> -->
<div class="bi-td">
<!-- :src="require(`../assets/lang${index+1}.png`)" -->
<!-- <img class="img" :src="require('@/assets/images/'+(item.currency_name)+'.png')"
alt="" /> -->
<span>{{item.currency_name}}</span>
</div>
<template v-if="tabIndex==1">
<div class="bi-td">{{item.change_balance|| "0.00"}}
</div>
</template>
<template v-if="tabIndex==2">
<div class="bi-td">{{item.micro_balance|| "0.00"}}
</div>
</template>
<template v-if="tabIndex==3">
<div class="bi-td">{{item.lever_balance|| "0.00"}}
</div>
</template>
<template v-if="tabIndex==4">
<div class="bi-td">{{item.legal_balance|| "0.00"}}
</div>
</template>
<div class="bi-td">{{item.lock_change_balance|| "0.00"}}</div>
<div class="bi-td" style="justify-content: center;">
{{item.usdt_price * item.change_balance || "0.00" }}
</div>
<!-- </template> -->
</div>
</div>
</div>
</div>
<!-- 划转 -->
<el-dialog :title="$t('tv.transfer')" :visible.sync="dialogVisible" width="450px" :before-close="handleClose">
<div class="transfer-box">
<div class="zchz">
<div class="zz-l">
<div class="zl-y"></div>
<div class="zl-x"></div>
<img class="z-img" src="../../assets/hz.png" />
<div class="zl-x"></div>
<div class="zl-y" style="border: 0.125rem solid #f6465d;"></div>
</div>
<div class="zz-r">
<div class="z-t">{{$t('accountNewPage.from')}}</div>
<div class="as">
<el-select v-model="form.from_field" :placeholder="$t('tv.el_select_placeholder')" @change="setto">
<el-option v-for="item in hzList" :key="item.value" :label="item.tetx" :value="item.value">
</el-option>
</el-select>
</div>
<div class="z-t">{{$t('accountNewPage.reach')}}</div>
<el-select v-model="form.to_field" :placeholder="$t('tv.el_select_placeholder')">
<el-option v-for="item in hzList2" :key="item.value" :label="item.tetx" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="i-t">{{$t('accountNewPage.label_currency')}}</div>
<div class="i-i">
<el-select v-model="form.currency_id" :placeholder="$t('tv.el_select_placeholder')" @change="currencyChange">
<el-option v-for="item in AssetCurrencyList" :key="item.id" :label="item.currency_name"
:value="item.currency">
</el-option>
</el-select>
</div>
<div class="i-t">{{$t('change.transfer_amount')}}</div>
<div class="i-i">
<el-input v-model="form.number" :placeholder="$t('change.transfer_amount_input')"></el-input>
<!-- <input placeholder="请输入要划转的数量"/> -->
<span class="all" @click.stop="form.number = change_balance">{{$t('complete.all')}}</span>
</div>
<div class="i-t">{{$t('secondContract.balance')}}：{{change_balance}}</div>
<div class="butt" @click="transferSubmis">
{{$t('secondContract.transfer')}}
</div>
</div>
</el-dialog>
<!-- 兑换 -->
<el-dialog :title="$t('accountNewPage.exchange')" :visible.sync="exchangeShow" :width="tcdx"
:before-close="handleClose">
<div style="height: 0;overflow: hidden;">454545{{exchangeShow}}</div>
<div class="transfer-box">
<div class="zchz">
<div class="zz-l">
<div class="zl-y"></div>
<div class="zl-x"></div>
<img class="z-img" src="../../assets/hz.png" />
<div class="zl-x"></div>
<div class="zl-y" style="border: 0.125rem solid #f6465d;"></div>
</div>
<div class="zz-r">
<div class="z-t">
<span>{{$t('accountNewPage.from')}}</span>
<span>{{$t('leverTrade.canuse')}}：{{dhfObj.change_balance || 0.00}}{{dhfObj.currency_name || 'USTD'}}</span>
</div>
<div class="as">
<el-select v-model="dhfrom_currency_id" :placeholder="$t('tv.el_select_placeholder')" @change="dhfrom">
<el-option v-for="item in exchangeList" :key="item.id" :label="item.currency_name"
:value="item.currency">
</el-option>
</el-select>
</div>
<div class="z-t">
<span>{{$t('accountNewPage.reach')}}</span>
<span>{{$t('leverTrade.canuse')}}：{{dhtObj.change_balance || 0.00}}{{dhtObj.currency_name || 'USTD'}}
</span>
</div>
<el-select v-model="dhto_currency_id" :placeholder="$t('tv.el_select_placeholder')" @change="dhTo">
<el-option v-for="item in exchangeList2" :key="item.currency" :label="item.currency_name"
:value="item.currency">
</el-option>
</el-select>
</div>
</div>
<!-- <div class="i-t">币种</div>
<div class="i-i">
<el-select v-model="form.currency_id" placeholder="请选择" @change="currencyChange">
<el-option v-for="item in AssetCurrencyList" :key="item.id" :label="item.currency_name"
:value="item.currency">
</el-option>
</el-select>
</div> -->
<div class="i-t">{{$t('zjde104')}}</div>
<div class="i-i">
<el-input v-model="dhNumber" :placeholder="$t('zjde105')"></el-input>
<span class="all" @click.stop="dhNumber = (dhfObj.change_balance || 0)">{{$t('marketQuotaion.all')}}</span>
</div>
<div>{{(dhNumber * rate).toFixed(8) }} {{dhtObj.currency_name }}</div>
<div class="i-t dsf">{{$t('zjde106')}}1{{dhfObj.currency_name }} ≈ {{rate}}{{dhtObj.currency_name }}
</div>
<div class="butt" @click="exchangeSubmis">
{{$t('accountNewPage.exchange')}}
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "change",
data() {
return {
dialogVisible: false,
tabIndex: 0,
tabList: this.$t('zjde107'),
hzList: [],
hzList2: [],
form: {
currency_id: '',
number: '',
from_field: 'change',
to_field: ''
},
zvalue: 'change',
svalue: '',
data: {},
total: 0,
AssetCurrencyList: [],
change_balance: 0,
exchangeShow: false,
exchangeList: [],
exchangeList2: [],
// 兑换
dhNumber: '',
dhfrom_currency_id: '',
dhto_currency_id: '',
dhfObj: {
currency_name: 'USDC'
},
dhtObj: {
currency_name: 'USDC'
},
rate: 1,
// lang: zh
huilv: 1,
zsy: 0,
hlObj: {},
tcdx: "450px",
};
},
watch: {
},
updated() {
},
methods: {
},
created() {
console.log('a', this.tabList)
this.getlist()
this.hzList = this.tabList.filter((item, index) => index != 0)
let hl = localStorage.getItem('hlType') || 'USD';
let list = this.$t('zjde58')
this.hlObj = list.filter(item => item.type == hl)[0]
var curScreenWidth = document.documentElement.clientWidth;
if (curScreenWidth < 800) {
this.tcdx = "85%"
}
},
methods: {
goTb(name) {
this.$router.push({
name
});
},
getlist() {
layer.load();
this.$http({
url: "/api/wallet/list",
method: "post",
data: {
bizhong: localStorage.getItem('hlType') || 'USD'
},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(res => {
layer.closeAll()
// console.log('res', res.data.message['change_wallet'])
this.data = res.data.message
this.huilv = this.data.huilv || 1
this.exchangeList = res.data.message['change_wallet'].balance || []
this.exchangeList2 = res.data.message['change_wallet'].balance || []
this.total = this.data.change_wallet.usdt_totle + this.data.lever_wallet.usdt_totle + this.data
.legal_wallet.usdt_totle + this.data.micro_wallet
.usdt_totle
this.zsy = this.data.change_wallet.today_usdt_totle + this.data.lever_wallet.today_usdt_totle +
this.data
.legal_wallet.today_usdt_totle + this.data.micro_wallet
.today_usdt_totle
}).catch(t => {
console.log(t)
})
},
hform(value) {
console.log('value11', value)
this.form.from_field = value
this.dialogVisible = true
this.setto()
},
setto() {
let obj = this.hzList.filter(item => item.value == this.form.from_field)[0]
this.AssetCurrencyList = this.data[obj.type].balance || []
this.hzList2 = this.hzList.filter(item => item.value != this.form.from_field)
this.form.to_field = ''
this.form.currency_id = ''
this.change_balance = 0
},
dhfrom(index) {
console.log('index', index)
let e = this.exchangeList.findIndex(item => item.currency == index)
this.dhfObj = this.exchangeList[e]
// this.exchangeList2 = this.exchangeList.filter(item => item.currency != this.dhfrom_currency_id)
// this.dhtObj = {}
this.huquhl()
// this.AssetCurrencyList = this.data[obj.type].balance || []
// this.hzList2 = this.hzList.filter(item => item.value != this.form.from_field)
// this.form.to_field = ''
// this.change_balance = 0
},
dhTo(index) {
let e = this.exchangeList2.findIndex(item => item.currency == index)
this.dhtObj = this.exchangeList2[e]
this.huquhl()
},
huquhl() {
let t = this
if (t.dhfrom_currency_id && t.dhto_currency_id) {
this.$http({
url: "/api/user/getTransferFee",
method: "post",
data: {
from_currency_id: t.dhfrom_currency_id,
to_currency_id: t.dhto_currency_id,
lang: window.localStorage.getItem("lang") || "en"
},
headers: {
Authorization: localStorage.getItem("token") || ""
}
}).then(e => {
let a = e.data.message
this.rate = parseFloat((Number(a.form_price) / Number(a.to_price)).toFixed(10))
}).catch(t => {
console.log(t)
})
}
},
exchangeSubmis() {
var t = this;
if (t.dhfrom_currency_id == '' || t.dhto_currency_id == '') return this.$message.error(this.$t(
"tv.el_select_placeholder"))
if (t.dhNumber <= 0) return this.$message.error(this.$t("other.withdrawal_amount_alert"))
this.$http({
url: "/api/user/Transfer",
method: "post",
data: {
number: t.dhNumber,
from_currency_id: t.dhfrom_currency_id,
to_currency_id: t.dhto_currency_id,
lang: window.localStorage.getItem("lang") || "en"
},
headers: {
Authorization: localStorage.getItem("token") || ""
}
}).then(e => {
this.exchangeShow = false
layer.msg(e.data.message)
this.getlist()
}).catch(t => {
console.log(t)
})
},
currencyChange(i) {
let e = this.AssetCurrencyList.findIndex(item => item.currency == i)
console.log('e', this.AssetCurrencyList, e)
console.log('this.AssetCurrencyList', this.AssetCurrencyList)
console.log('this.form.from_field', this.form.from_field)
if (this.form.from_field == 'change') {
this.change_balance = this.AssetCurrencyList[e].change_balance
}
if (this.form.from_field == 'micro') {
this.change_balance = this.AssetCurrencyList[e].micro_balance
}
if (this.form.from_field == 'lever') {
this.change_balance = this.AssetCurrencyList[e].lever_balance
}
if (this.form.from_field == 'legal') {
this.change_balance = this.AssetCurrencyList[e].legal_balance
}
},
transferSubmis() {
console.log('this.form.number', this.form.number)
console.log('this.change_balance', this.change_balance)
if (this.form.to_field == '') return this.$message.error(this.$t("change.please_select_an_account"))
if (this.form.number == '') return this.$message.error(this.$t("change.transfer_amount_input"))
if (this.form.currency_id == '') return this.$message.error(this.$t("change.please_select_currency"))
if (this.form.number * 1 > this.change_balance * 1) return this.$message.error('111')
let loa = this.$loading({
lock: true,
text: 'Loading',
});
this.$http({
url: "/api/wallet/change",
method: "post",
data: this.form,
headers: {
Authorization: localStorage.getItem("token")
}
}).then(a => {
loa.close();
this.dialogVisible = false
this.form.currency_id = ''
this.form.number = ''
this.$message({
message: this.$t("czcc"),
type: 'success'
})
this.getlist()
})
}
},
mounted() {
},
computed: {
}
};
</script>
<style lang="scss" scoped>
.property {
width: 100%;
}
.py-head {
color: #999;
background-color: #f5f5f5;
}
.ph-cn {
display: flex;
font-size: 1.125rem;
}
.pc-item {
margin-right: 5.5rem;
padding: 2rem 0;
cursor: pointer;
}
.pc-iActive {
color: #000;
font-weight: bold;
border-bottom: 0.1875rem solid #f0c163;
}
.top-model {
background: url(../../assets/gb0.png);
background-size: cover;
background-repeat: no-repeat;
padding: 1.625rem 0.625rem 1.25rem 1.25rem;
margin-top: 1.625rem;
color: #fff;
border-radius: 0.25rem;
overflow: hidden;
display: flex;
align-items: center;
}
.top-model:nth-child(2) {
background: url(../../assets/gb1.png);
}
.top-model:nth-child(3) {
background: url(../../assets/gb2.png);
}
.top-model:nth-child(4) {
background: url(../../assets/gb3.png) no-repeat;
background-size: 100% 100%;
}
.top-model:nth-child(5) {
background: url(../../assets/gb4.png);
}
.top-model-head {
display: flex;
align-items: center;
}
.top-model-title {
font-size: 1rem;
font-weight: 400;
opacity: 0.8;
margin-right: 0.75rem;
}
.yj {
cursor: pointer;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.9375rem;
}
.usdt-money {
font-weight: 700;
font-size: 2.25rem;
margin-top: 1.25rem;
display: flex;
}
.money2 {
font-size: .875rem;
opacity: 0.8;
}
.today-money {
font-size: .875rem;
margin-top: 0.625rem;
}
.un-butt {
display: flex;
margin-left: 3rem;
}
.un-item {
width: 8.75rem;
height: 2.5rem;
font-size: .875rem;
font-weight: 400;
color: #fff;
line-height: 2.5rem;
text-align: center;
cursor: pointer;
position: relative;
z-index: 9;
background: hsla(0, 0%, 100%, .1);
border: 0.0625rem solid #fff;
border-radius: 0.3125rem;
margin-right: 0.625rem;
}
.un-item2 {
background: #fdd786;
border-color: transparent;
}
.bilb {
margin-top: 2rem;
}
.bilb .bb-top {
display: flex;
color: #909399;
padding: 0.75rem 1.25rem;
background: #EEEEEE;
border-radius: 4px;
}
.tb-item {
flex: 1;
font-size: 1rem;
}
.bb-cn {
// display: flex;
}
.bc-i {
display: flex;
padding: 1.5rem 1.25rem;
cursor: pointer;
}
.bc-i:hover {
background: #EEEEEE;
}
.bi-td {
flex: 1;
display: flex;
align-items: center;
}
.bc-i .img {
width: 2rem;
height: 2rem;
border-radius: 50%;
margin-right: 0.5rem;
}
.el-dialog__headerbtn .el-dialog__close {
font-size: 24px;
color: #333333 !important;
}
.transfer-box {
color: #333;
}
.zz-l {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.zchz {
display: flex;
align-items: center;
margin-bottom: 3rem;
}
.zl-y {
width: 0.6rem;
height: 0.6rem;
border: 0.125rem solid #0ecb81;
border-radius: 50%;
}
.zl-x {
width: 1px;
height: 2.5rem;
background: #f5f5f5;
}
.z-img {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.zz-r {
flex: 1;
margin-left: 2rem;
}
.z-t {
font-size: 1rem;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
}
.as {
margin-bottom: 1rem;
}
.transfer-box .el-select {
width: 100%;
}
.transfer-box .el-input__inner {
color: #333;
border: 0.0625rem solid #e7e9ed !important;
width: 100% !important;
background-color: #FFF !important;
color: #333 !important;
}
.i-t {
margin-bottom: 0.7rem;
}
.i-i {
margin-bottom: 1rem;
position: relative;
}
.all {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1rem;
color: #f0c163;
cursor: pointer;
}
.butt {
width: 100%;
height: 3rem;
background: #f0c163;
border-radius: 0.25rem;
font-size: 1rem;
font-weight: 400;
color: #fff;
text-align: center;
line-height: 3rem;
cursor: pointer;
// margin-top: 1.875rem;
}
.dsf {
margin-top: 1.875rem;
text-align: center;
font-size: 1rem;
color: #606266;
}
.dsfd {
margin-left: 4rem;
}
@media screen and (max-width: 800px) {
.pc-item {
margin-right: 2rem;
padding: 1rem 0;
}
.dsfd {
margin-left: 0rem;
}
.money2 {
font-size: 1rem;
}
.top-model {
flex-direction: column;
align-items: flex-start;
}
}
.un-butt {
margin-left: 0;
margin-top: 1rem;
}
.un-item {
width: 6rem;
height: 3rem;
font-size: 1rem;
line-height: 3rem;
margin-right: 0.625rem;
}
.day {
.py-head {
background: #090d13;
}
.pc-iActive {
color: #FFF;
}
.bilb .bb-top {
// display: flex;
// color: #909399;
background: #1c222c;
}
.bc-i {
color: #fff;
}
.bc-i:hover {
background: #141a28;
// color: #fff;
}
.i-t,
.z-t {
color: #fff;
}
.transfer-box .el-input__inner {
border: 0.0625rem solid #474d57 !important;
width: 100% !important;
background: none !important;
color: #ccc !important;
}
}
</style>
src/view/accounts/change1.vue
+786
View File
@@ -0,0 +1,786 @@
<template>
<div class="bit-center-wrap assets-page change">
<div class="tabs-box tabs-box5">
<el-tabs v-model="tabsName" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in tabsList" :label="item.text" :name="item.type"></el-tab-pane>
</el-tabs>
</div>
<div class="dfd box">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">資產總估值 <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con"><span class="balance white-color-text">$393,632,735.32</span><span
class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="12" height="12"
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path id="Vector"
d="M11.0391 2.24013C11.3569 2.55793 11.4993 2.84687 11.4662 3.10694C11.4331 3.36702 11.2554 3.65829 10.9329 3.98076L10.2403 4.67333C9.92518 4.98847 9.59178 5.32566 9.24011 5.68489C8.88845 6.04412 8.54405 6.3923 8.20693 6.72942L7.40442 7.53193C7.12593 7.81042 6.9326 8.0605 6.82446 8.28214C6.71631 8.50379 6.76805 8.7131 6.97968 8.91007C7.13101 9.06141 7.30705 9.24478 7.50781 9.46019C7.70856 9.6756 7.88839 9.86276 8.04729 10.0217C8.31212 10.2865 8.41086 10.5245 8.34349 10.7356C8.27613 10.9467 8.0455 11.0752 7.6516 11.121C7.25014 11.1593 6.7762 11.2057 6.22981 11.2603C5.68341 11.3149 5.12584 11.3692 4.5571 11.4235C3.98836 11.4777 3.42706 11.532 2.87322 11.5864C2.31937 11.6409 1.8306 11.6908 1.40691 11.7361C1.00545 11.7744 0.721544 11.714 0.555196 11.555C0.388849 11.396 0.321261 11.1269 0.352435 10.7476C0.376042 10.3608 0.411582 9.90532 0.459056 9.38114C0.50653 8.85697 0.55743 8.31424 0.611757 7.75294C0.666084 7.19165 0.716806 6.63774 0.763923 6.09123C0.81104 5.54471 0.853493 5.05582 0.891282 4.62457C0.935924 4.15619 1.06529 3.86415 1.27937 3.74843C1.49345 3.63272 1.73669 3.71106 2.00909 3.98346L2.29284 4.26721C2.39877 4.37314 2.51032 4.48103 2.62749 4.59086C2.74465 4.7007 2.85992 4.80864 2.9733 4.91469C3.08669 5.02075 3.18499 5.11539 3.26823 5.19862C3.46472 5.38046 3.64253 5.44101 3.80164 5.38026C3.96076 5.31951 4.13559 5.19386 4.32614 5.00331C4.53868 4.79077 4.81528 4.51039 5.15595 4.16215C5.49662 3.81391 5.85384 3.45291 6.22761 3.07914C6.60138 2.70537 6.96227 2.3407 7.31027 1.98513C7.65826 1.62957 7.9422 1.34185 8.16206 1.12199C8.25734 1.02671 8.36384 0.935341 8.48158 0.847871C8.59931 0.760401 8.7287 0.7029 8.86973 0.675369C9.01076 0.647837 9.15984 0.657663 9.31695 0.704847C9.47407 0.752031 9.63586 0.858857 9.80233 1.02532C10.0066 1.22962 10.2052 1.42452 10.398 1.61003C10.5909 1.79553 10.8046 2.00556 11.0391 2.24013Z">
</path>
</svg>
</div><span class="name">充值</span>
</div>
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="12" height="12"
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path id="Vector"
d="M2.14052 11.1407C2.45832 11.4585 2.74726 11.6008 3.00734 11.5678C3.26741 11.5347 3.55868 11.3569 3.88115 11.0345L4.57372 10.3419C4.88886 10.0267 5.22605 9.69334 5.58528 9.34167C5.94451 8.99001 6.29269 8.64561 6.62981 8.30849L7.43232 7.50598C7.71081 7.22749 7.96089 7.03417 8.18253 6.92602C8.40418 6.81787 8.61349 6.86961 8.81046 7.08124C8.9618 7.23257 9.14517 7.40862 9.36058 7.60937C9.57599 7.81013 9.76315 7.98995 9.92205 8.14885C10.1869 8.41369 10.4249 8.51242 10.636 8.44506C10.8471 8.37769 10.9756 8.14706 11.0214 7.75316C11.0597 7.3517 11.1061 6.87777 11.1607 6.33137C11.2152 5.78497 11.2696 5.2274 11.3238 4.65866C11.3781 4.08992 11.4324 3.52863 11.4868 2.97478C11.5413 2.42093 11.5912 1.93217 11.6365 1.50848C11.6748 1.10701 11.6144 0.823107 11.4554 0.656759C11.2964 0.490411 11.0272 0.422824 10.648 0.453997C10.2612 0.477604 9.80571 0.513144 9.28153 0.560618C8.75736 0.608092 8.21463 0.658992 7.65333 0.71332C7.09204 0.767646 6.53813 0.818368 5.99162 0.865485C5.4451 0.912602 4.95621 0.955055 4.52496 0.992844C4.05658 1.03749 3.76454 1.16685 3.64882 1.38093C3.53311 1.59501 3.61145 1.83825 3.88385 2.11065L4.1676 2.3944C4.27353 2.50034 4.38142 2.61188 4.49125 2.72905C4.60109 2.84621 4.70903 2.96149 4.81509 3.07487C4.92114 3.18825 5.01578 3.28656 5.09901 3.36979C5.28085 3.56628 5.3414 3.74409 5.28065 3.90321C5.2199 4.06232 5.09425 4.23715 4.9037 4.4277C4.69116 4.64024 4.41078 4.91684 4.06254 5.25751C3.7143 5.59818 3.3533 5.9554 2.97953 6.32917C2.60576 6.70294 2.24109 7.06383 1.88553 7.41183C1.52996 7.75983 1.24224 8.04376 1.02238 8.26362C0.927103 8.3589 0.835731 8.4654 0.748262 8.58314C0.660792 8.70088 0.603291 8.83026 0.57576 8.97129C0.548228 9.11232 0.558054 9.2614 0.605237 9.41851C0.652421 9.57563 0.759247 9.73742 0.925714 9.90389C1.13001 10.1082 1.32491 10.3068 1.51042 10.4996C1.69592 10.6924 1.90595 10.9061 2.14052 11.1407Z">
</path>
<defs>
<linearGradient id="paint0_linear_5342_33659" x1="11.4359" y1="0.63711" x2="1.53644" y2="10.5366"
gradientUnits="userSpaceOnUse">
<stop offset="0.497917" stop-color="#6491E9"></stop>
<stop offset="1" stop-color="#556DEA"></stop>
</linearGradient>
</defs>
</svg>
</div><span class="name">提幣</span>
</div>
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(255, 255, 255);"><svg width="24" height="24"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M15.6365 2.22355C15.3541 2.14258 15.0479 2.22385 14.8434 2.43828L14.8404 2.43742L6.61908 10.8601L6.62208 10.861C6.51553 10.9604 6.43686 11.0874 6.39724 11.2256C6.27578 11.6492 6.52218 12.0937 6.94574 12.2151L10.0218 13.0972L7.81667 20.7873C7.69522 21.2108 7.94162 21.6553 8.36517 21.7768C8.65355 21.8595 8.96441 21.7731 9.17066 21.5526L17.4393 13.0785L17.4371 13.0746C17.5106 12.9884 17.5708 12.8919 17.6044 12.7747C17.7258 12.3512 17.4794 11.9067 17.0559 11.7852L13.9799 10.9032L16.1849 3.21307C16.3064 2.78952 16.06 2.345 15.6365 2.22355Z"
fill="#ffffff"></path>
</svg></div> 閃兑
</div>
<div class="operate-btn">劃轉</div>
</div>
</div>
<div class="chart-title">
<div class="left-con white-color-text">資產趨勢</div>
<div class="right-con">
<div @click="selectTime(item.type)" :class="{active:timeIndex==item.type}"
v-for="(item,index) in timeList" :key="index">{{item.title}}</div>
</div>
</div>
<div>
<v-chart :options="polar2" style="width: 100%;height: 320px;" />
</div>
</section>
<section class="section-2 no-vw">
<div class="data">
<div class="data-left">
<h3 class="white-color-text"><span>資產分佈</span> <img class="hand" src="@/assets/59.svg"></h3>
<div>
<v-chart :options="polar3" style="width: 200px;height: 200px;" />
</div>
</div>
<div class="data-right">
<div class="titles">
<div class="column1">帳户類型</div>
<div class="column2">帳户餘額</div>
<div class="column3">今日收益</div>
<div class="column4">佔比</div>
<div class="column5">操作</div>
</div>
<div class="item item-coin">
<div class="column1"><span class="dot"></span><span>現貨帳户</span></div>
<div class="column2 white-color-text">$230,276.814292</div>
<div class="column3 win">0</div>
<div class="column4">0.0585%</div>
<div class="column5"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">幣幣買賣</span></div>
<div class="sub-title"><span class="top">劃轉</span></div>
</div>
</div>
</div>
<div class="item item-contract">
<div class="column1"><span class="dot"></span><span>資產帳户</span></div>
<div class="column2 white-color-text">$393,310,345.561294</div>
<div class="column3 win">0</div>
<div class="column4">99.9181%</div>
<div class="column5"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">交易</span></div>
<div class="sub-title"><span class="top">劃轉</span></div>
<div class="sub-title"><span class="top">AI策略交易</span></div>
</div>
</div>
</div>
<div class="item item-cft">
<div class="column1"><span class="dot"></span><span>理財帳户</span></div>
<div class="column2 white-color-text">$92,112.947</div>
<div class="column3 win">119.49</div>
<div class="column4">0.0234%</div>
<div class="column5"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list licai">
<div class="sub-title"><span class="top">賺幣</span></div>
<div class="sub-title"><span class="top">劃轉</span></div>
<div class="sub-title"><span class="top">DeFi策略交易</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div><!----><!----><!----><!----><!----><!----><!---->
<section class="section-3 no-vw">
<h3 class="white-color-text">資產動態</h3>
<ul class="list">
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/21/2025
00:00:00</span></span><span class="column remark">理財收益</span><span class="column amount"
style="color: rgb(0, 240, 255);">+118.89 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/21/2025
00:00:00</span></span><span class="column remark">理財收益</span><span class="column amount"
style="color: rgb(0, 240, 255);">+0.6 USDC</span></li>
<li class="row"><span class="column left"><span class="type">資產帳户資金變動</span><span class="time">04/20/2025
23:00:00</span></span><span class="column remark">AI盈利</span><span class="column amount"
style="color: rgb(0, 240, 255);">+1117.3116 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/20/2025
21:33:13</span></span><span class="column remark">Defi借貸</span><span class="column amount"
style="color: rgb(255, 72, 52);">-2050 USDC</span></li>
<li class="row"><span class="column left"><span class="type">資產帳户資金變動</span><span class="time">04/20/2025
18:45:57</span></span><span class="column remark">AI下註</span><span class="column amount"
style="color: rgb(255, 72, 52);">-1200 USDC</span></li>
<li class="row"><span class="column left"><span class="type">現貨帳户資金變動</span><span class="time">04/20/2025
18:35:24</span></span><span class="column remark">VIP等級升級活動</span><span class="column amount"
style="color: rgb(0, 240, 255);">+16500 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/20/2025
00:00:00</span></span><span class="column remark">理財收益</span><span class="column amount"
style="color: rgb(0, 240, 255);">+103.925 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/20/2025
00:00:00</span></span><span class="column remark">理財返還本金</span><span class="column amount"
style="color: rgb(0, 240, 255);">+500 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/20/2025
00:00:00</span></span><span class="column remark">理財返還本金</span><span class="column amount"
style="color: rgb(0, 240, 255);">+502 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/19/2025
00:00:00</span></span><span class="column remark">理財收益</span><span class="column amount"
style="color: rgb(0, 240, 255);">+77.085 USDC</span></li>
<li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/19/2025
00:00:00</span></span><span class="column remark">理財收益</span><span class="column amount"
style="color: rgb(0, 240, 255);">+1.5 USDC</span></li>
</ul>
<div class="bottom blue-color-text">查看更多</div>
</section>
</div>
</div>
</template>
<script>
import ECharts from 'vue-echarts'
export default {
name: "change",
components: {
'v-chart': ECharts
},
data() {
return {
tabsList: [{
type: '0',
text: "資產總覽"
},
{
type: '1',
text: "現貨帳户"
},
{
type: '2',
text: "法幣賬户"
},
{
type: '3',
text: "理財帳户"
},
{
type: '4',
text: "資產帳户"
},
{
type: '5',
text: "訂單中心"
},
{
type: '6',
text: "Nfts"
},
{
type: '7',
text: "劃轉"
},
],
tabsName: '0',
timeList: [{
title: '24時',
type: '0'
},
{
title: '7日',
type: '1'
},
{
title: '30日',
type: '2'
},
{
title: '365日',
type: '3'
}
],
timeIndex: '0',
polar2: {
grid: {
left: '0%', // 左侧边距
right: '0%', // 右侧边距
top: '10%', // 上侧边距
bottom: '10%', // 下侧边距
containLabel: true // 保证坐标轴刻度标签等内容不被遮挡
},
xAxis: [{
splitLine: { // 分割线配置
show: true, // 显示分割线
lineStyle: {
color: '#666', // 分割线颜色
type: 'dashed', // 分割线类型：实线或虚线，这里设置为虚线
dashArray: [5, 5] // 虚线的长度和间距，这里是5像素实线和5像素空白交替显示
}
},
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#888'
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#888'
}
},
splitLine: { // 分割线配置
show: true, // 显示分割线
lineStyle: {
color: '#666', // 分割线颜色
type: 'dashed', // 分割线类型：实线或虚线，这里设置为虚线
dashArray: [5, 5] // 虚线的长度和间距，这里是5像素实线和5像素空白交替显示
}
},
}],
series: [{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth: true,
itemStyle: {
color: '#6592E9'
},
areaStyle: {
color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#6592E9"
},
{
offset: 1,
color: "rgba(101,141,233,0.1)"
},
]),
},
symbolSize: 10,
data: [120, 132, 101, 134, 90, 230, 210]
}, ]
},
polar3: {
tooltip: {
trigger: 'item'
},
grid: {
left: '0%', // 左侧边距
right: '0%', // 右侧边距
top: '0%', // 上侧边距
bottom: '0%', // 下侧边距
// containLabel: true // 保证坐标轴刻度标签等内容不被遮挡
},
series: [{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
fontSize: 10,
}
},
color: ['#f09464', '#6dd2f8', '#b164e2'], //修改图表颜色
data: [{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}
]
}]
},
};
},
created() {
},
methods: {
handleClick() {
},
selectTime(type) {
this.timeIndex = type
}
},
};
</script>
<style lang="scss">
.change {
color: #fff;
.tabs-box5 {
margin: 30px 0;
.el-tabs__item {
font-size: 18px !important;
}
}
}
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.assets-page .section-1 {
width: 830px;
height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.assets-page section.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.assets-page .section-1 h3 {
display: flex;
align-items: center;
}
.assets-page .section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.assets-page .section-1 .top-info .left-con {
position: relative;
}
.assets-page .section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.assets-page .section-1 .top-info .left-con .unit {
font-size: 14px;
}
.assets-page .section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.assets-page .section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.assets-page .section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.assets-page .section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.assets-page .section-1 .chart-title .left-con {
font-size: 16px;
}
.assets-page .section-1 .chart-title .right-con {
display: flex;
}
.assets-page .section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.assets-page .section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.assets-page section.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.assets-page .section-2 .data {
display: flex;
align-items: center;
}
.assets-page .section-2 .data-left {
flex: none;
display: flex;
flex-direction: column;
width: 170px;
height: 347px;
margin-right: 30px;
}
.assets-page .section-2 .data-left h3 {
height: 30px;
line-height: 30px;
margin-bottom: 74px;
}
.assets-page .section-2 .data-right {
width: 570px;
height: 327px;
text-align: center;
}
.assets-page .section-2 .data-right .titles {
display: flex;
align-items: center;
margin-bottom: 30px;
color: #5e5e7a;
font-size: 12px;
}
.assets-page .section-2 .data-right .column1 {
width: 20%;
}
.assets-page .section-2 .data-right .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.assets-page .section-2 .data-right .item-coin .column1 {
background: radial-gradient(102.27% 102.27% at 83.82% 87.06%, #F09464 0%, #F7BE94 .01%, #F09464 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.assets-page .section-2 .data-right .column2 {
width: 30%;
}
.assets-page .section-2 .data-right .item .column3.win {
color: #00f0ff;
}
.assets-page .section-2 .data-right .column3 {
width: 25%;
}
.assets-page .section-2 .data-right .item .column5 {
position: relative;
font-size: 26px;
cursor: pointer;
}
.assets-page .section-2 .data-right .item .column5 .sub-list {
position: absolute;
top: 80px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.assets-page .section-2 .data-right .column4 {
width: 20%;
}
.assets-page .section-2 .data-right .column5 {
width: 15%;
}
.assets-page .section-2 .data-right .column5 {
width: 15%;
}
.white-color-text {
display: flex;
align-items: center;
}
.white-color-text .hand {
cursor: pointer;
margin-left: 10px;
}
.assets-page .section-2 .data-right .item-contract .column1 {
background: radial-gradient(118.76% 101.38% at 0% 22.64%, #147EC7 0%, #6DD2F8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.assets-page .section-2 .data-right .item-cft .column1 {
background: radial-gradient(45.13% 45.13% at 47.06% 6.18%, #D18BD7 0%, #B164E2 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.assets-page .section-2 .data-right .item-coin .column1 .dot {
background: linear-gradient(90deg, #f09464 49.79%, #D37442 100%);
}
.assets-page .section-2 .data-right .item-contract .column1 .dot {
background: linear-gradient(90deg, #6dd2f8 49.79%, #147EC7 100%);
}
.assets-page .section-2 .data-right .item-cft .column1 .dot {
background: linear-gradient(90deg, #D18BD7 49.79%, #b164e2 100%);
}
.assets-page .section-2 .data-right .item .column1 .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.assets-page .section-3 {
width: 490px;
height: 892px;
padding: 20px 0 !important;
}
.assets-page .section-3 h3 {
padding: 0 30px;
height: 30px;
line-height: 30px;
}
.assets-page .section-3 .list {
max-height: 800px;
padding: 20px 30px 10px;
overflow-y: auto;
}
.assets-page .section-3 .list .left {
display: flex;
flex-direction: column;
width: 40%;
}
.assets-page .section-3 .list .time {
color: #888;
font-size: 12px;
}
.assets-page .section-3 .list .row {
height: 60px;
display: flex;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid #31323f;
}
.assets-page .section-3 .list .remark {
width: 30%;
text-align: center;
}
.assets-page .section-3 .list .amount {
width: 30%;
text-align: right;
}
.blue-color-text {
background: linear-gradient(90deg, #9bb8f0 0%, #6491e9 49.79%, #556dea 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.assets-page .section-2 .data-right .item .column5:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.assets-page .section-2 .data-right .item .column5 .sub-list {
position: absolute;
top: 80px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 1;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.assets-page .section-2 .data-right .item .column5 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.assets-page .section-2 .data-right .item .column5 .sub-list .sub-title:hover {
background: #1a1b24;
}
</style>
src/view/accounts/change2.vue
+1713
View File
File diff suppressed because it is too large Load Diff
src/view/accounts/changeAccount.vue
+180
View File
@@ -0,0 +1,180 @@
<template>
<div class="main">
<p class="legal_name plr10">{{legal_name}}</p>
<div class="legalAccount_msg flex between plr10">
<div>
<p class="ft12 msg_title">{{$t('center.available')}}</p>
<p>{{change_balance | toFixeds}}</p>
</div>
<div>
<p class="ft12 msg_title">{{$t('account.freezes')}}</p>
<p>{{lock_change_balance | toFixeds}}</p>
</div>
<div>
<p class="ft12 msg_title">{{$t('account.conversion')}}（CNY）</p>
<p>{{cny_price | toFixeds}}</p>
</div>
</div>
<div class="rec_wrap">
<p class="rec_title flex between">
<span>{{$t('account.mrecord')}}</span>
<span class="all">{{$t('center.all')}}</span>
</p>
<p class="list_title flex">
<span class="ft14">{{$t('number')}}</span>
<span class="ft14 tc">{{$t('account.record')}}</span>
<span class="ft14 tr">{{$t('time')}}</span>
</p>
<ul class="log_list">
<li class="flex arround ft12 flex around" v-for="(item,index) in list">
<span>{{item.value | toFixeds}}</span>
<span class="tc">{{item.info}}</span>
<span class="tr">{{item.created_time}}</span>
</li>
</ul>
<p class="tc ft12 curPer mt20" @click="getMore()" v-if="more">{{$t('more')}}</p>
<p class="tc ft12 curPer mt20" v-else>{{$t('nodata')}}</p>
</div>
<!-- <router-link tag="p" class="huazhuan" to='/transferLegal'>划转</router-link> -->
</div>
</template>
<script>
export default {
data(){
return{
currency:'',
legal_name:'',
change_balance:'',
lock_change_balance:'',
cny_price:'',
page:1,
list:[],
more:true
}
},
filters: {
toFixeds: function(value) {
value = Number(value);
return value.toFixed(2);
}
},
created(){
this.token = localStorage.getItem('token') || '';
this.currency=this.$route.query.currency_id;
},
mounted(){
this.init();
this.legal_log();
},
methods:{
init(){
var that = this
this.$http({
url: '/api/' + 'wallet/detail',
method:'post',
data:{
currency:that.currency,
type:'change'
},
headers: {'Authorization': that.token}
}).then(res=>{
if(res.data.type =='ok'){
var msg = res.data.message;
that.legal_name = msg.currency_name;
that.change_balance = msg.change_balance;
that.lock_change_balance = msg.lock_change_balance;
that.cny_price = (msg.change_balance-0)*(msg.cny_price);
}else{
// layer.msg(res.message);
}
}).catch(error=>{
console.log(error)
})
},
legal_log(){
var that = this
this.$http({
url: '/api/' + 'wallet/legal_log',
method:'post',
data:{
currency:that.currency,
type:2,
page:that.page
},
headers: {'Authorization': that.token}
}).then(res=>{
if(res.data.type =='ok'){
var list = res.data.message.list;
if(list.length>0){
that.list=that.list.concat(list);
}else{
that.more=false;
}
}else{
// layer.msg(res.message);
}
}).catch(error=>{
console.log(error)
})
},
getMore(){
this.page=this.page+1;
this.legal_log();
}
}
}
</script>
<style scoped>
.legal_name{
background: #1b1e2e;
padding: 5px 10px;
}
.msg_title{
color: #61688a;
}
.main{
color:#fff;
padding: 30px;
}
.legalAccount_msg{
background: #1b1e2e;
padding: 6px 10px;
}
.legalAccount_msg div p:first-child{
margin-bottom: 10px;
}
.rec_wrap{
margin-top: 30px;
margin-bottom: 30px;
}
.rec_title{
margin-bottom: 10px;
}
.all{
color: #61688a;
}
.list_title{
padding: 10px;
background: #1b1e2e;
}
.list_title span{flex: 1}
.huazhuan{
text-align: center;
margin-top: 60px;
background: #7a98f7;
padding: 8px;
}
.huazhuan:hover{
cursor: pointer;
}
.log_list li{padding: 10px;}
.log_list li span{flex: 1;}
</style>
// WEBPACK FOOTER //
// src/view/accounts/changeAccount.vue
src/view/accounts/currencyApplication.vue
+293
View File
@@ -0,0 +1,293 @@
<template>
<div class="currencyApplication">
<secondaryHead :text="$t('zjde164')"></secondaryHead>
<div class="bit-center-wrap l-box sadfsl">
<div class="lb-form">
<div class="srk-item">
<div class="si-title">
{{$t('qshsl10')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="form.program" :placeholder="$t('qshsl18')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl11')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="form.currencyname" :placeholder="$t('qshsl19')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl12')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="form.currencyinfo" :placeholder="$t('qshsl20')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl13')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="form.contractaddress" :placeholder="$t('qshsl21')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl14')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="form.weburl" :placeholder="$t('qshsl22')" />
</div>
</div>
<div class="loinSubmit dsfsfd" @click="submit">
{{$t("homeContent.btn_submit")}}
</div>
</div>
<div class="lb-form fr2">
<div class="srk-item">
<div class="si-title">
{{$t('qshsl15')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="form.linkname" :placeholder="$t('qshsl23')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl16')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input type="password" v-model="form.linkemail" :placeholder="$t('qshsl24')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl17')}} <span class="gfhf">*</span>
</div>
<div class="scfj">
<img style="width: 100%; height: 100%;cursor: pointer;" v-if="form.img"
:src="$utils.img_url + form.img">
<div class="vsdf" v-else>
<i class="el-icon-circle-plus-outline fsfs"></i>
<span>{{$t('qshsl17')}}</span>
</div>
<input class="dwd" type="file" accept="image/*" name="file" @change="file1">
</div>
<!-- <div class="input-t">
<input v-model="img" :placeholder="$t('zjde1')" />
</div> -->
</div>
<div class="loinSubmit dsfsfd2" @click="submit">
{{$t("homeContent.btn_submit")}}
</div>
</div>
</div>
</div>
</template>
<script>
import secondaryHead from "@/components/secondaryHead";
export default {
name: "login",
components: {
secondaryHead
},
data() {
return {
form: {
// /currencyapplication/add 参数
program: '', // 项目名称
currencyname: '', // 代币名称
currencyinfo: '', // 项目简介
contractaddress: '', // 合约地址
weburl: '', // 官方网址
linkname: '', // 联系人姓名
linkemail: '', // 联系人邮件
img: '', // 上传附件
}
}
},
created() {
},
mounted() {
},
methods: {
file1(t) {
let a = this,
s = new FileReader,
i = t.target.files[0];
s.readAsDataURL(i),
s.onload = function(t) {};
let n = new FormData;
n.append("file", i),
n.append("lang", window.localStorage.getItem("lang")),
this.$http({
url: "/api/upload_new",
method: "post",
data: n,
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
let s = t.data
this.form.img = s.message
// "ok" == s.type ? 1 == e ? a.front_pic = s.message : 2 == e ? a.reverse_pic = s.message : a
// .hand_pic = s.message : layer.msg(s.message)
})
},
submit() {
let form = this.form
if (form.program.trim() == '') return layer.msg(this.$t('qshsl18'))
if (form.currencyname.trim() == '') return layer.msg(this.$t('qshsl19'))
if (form.currencyinfo.trim() == '') return layer.msg(this.$t('qshsl20'))
if (form.contractaddress.trim() == '') return layer.msg(this.$t('qshsl21'))
if (form.weburl.trim() == '') return layer.msg(this.$t('qshsl22'))
if (form.linkname.trim() == '') return layer.msg(this.$t('qshsl23'))
if (form.linkemail.trim() == '') return layer.msg(this.$t('qshsl24'))
if (form.img.trim() == '') return layer.msg(this.$t('qshsl25'))
layer.load();
this.$http({
url: "/api/currencyapplication/add",
method: "post",
data: {
...form
},
headers: {
'lang': window.localStorage.getItem('lang'),
Authorization: localStorage.getItem("token")
}
}).then(e => {
layer.closeAll()
layer.msg(this.$t('qshsl7'))
this.form = {
program: '', //
currencyname: '', // 代币名称
currencyinfo: '', // 项目简介
contractaddress: '', // 合约地址
weburl: '', // 官方网址
linkname: '', // 联系人姓名
linkemail: '', // 联系人邮件
img: '', // 上传附件
}
}).catch(t => {
layer.closeAll()
})
},
userInfo() {
},
},
}
</script>
<style lang="scss">
.currencyApplication {
width: 100%;
.gfhf {
color: #e35e5e;
font-size: 12px;
padding-bottom: 1rem;
}
.sadfsl {
display: flex;
margin: 0rem auto;
justify-content: center;
}
.scfj {
border: 0.0625rem solid #e7e9ed;
width: 9rem;
height: 9rem;
border-radius: 16px;
margin-top: 0.5rem;
cursor: pointer;
position: relative;
overflow: hidden;
}
.dwd {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
z-index: 10;
cursor: pointer;
}
.vsdf {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.fsfs {
font-size: 24px;
color: #7e7e7e;
}
span {
margin-top: 1rem;
color: #7e7e7e;
}
}
.lb-form {
margin-top: 2rem;
}
.fr2 {
margin-left: 2rem;
}
}
.dsfsfd2{
display: none;
}
@media screen and (max-width: 800px) {
.currencyApplication .sadfsl {
flex-direction: column;
}
.currencyApplication .fr2 {
margin-left: 0rem;
margin-top: 0;
}
.dsfsfd{
display: none;
}
.dsfsfd2{
display: block;
}
}
</style>
src/view/accounts/fiat.vue
+1699
View File
File diff suppressed because it is too large Load Diff
src/view/accounts/finance.vue
+1698
View File
File diff suppressed because it is too large Load Diff
src/view/accounts/finanrec.vue
+146
View File
@@ -0,0 +1,146 @@
<template>
<div class="box">
<indexHeader></indexHeader>
<div class="account" style="padding-top: 48px">
<div class="topcontent ft20 ">
<span class="white"><span class="baseColor">{{$t('account.taccount')}}></span> {{$t('account.mrecord')}}</span>
</div>
<div class="content">
<div class="con_box">
<div class="account_title ttBk white">
最新
</div>
<div class="contentBK fColor1 pdlr20 pdtb20 ft12">
<div class="flex alcenter">
<span class="flex1">{{$t('time')}}</span>
<span class="flex1">{{$t('market.currency')}}</span>
<span class="flex1">{{$t('c2c.type')}}</span>
<span class="flex1">{{$t('number')}}</span>
<span class="flex1">{{$t('c2c.state')}}</span>
<span class="flex1">{{$t('do')}}</span>
</div>
<div class="mt10">
<div class="flex alcenter">
<span class="flex1">2018-01-29 12:23:45</span>
<span class="flex1">USDC</span>
<span class="flex1">USDC</span>
<span class="flex1">245</span>
<span class="flex1">{{$t("c2c.completed")}}</span>
<span class="flex1">{{$t("revoke")}}</span>
</div>
<div class="none color1 tc">
{{$t('nodata')}}
</div>
</div>
</div>
</div>
<div class="con_box mt15">
<div class="account_title ttBk white flex">
<div class="active">{{$t('account.charging')}}{{$t('account.record')}}</div>
<div class="ml20">{{$t('account.withdraw')}}{{$t('account.record')}}</div>
<div class="ml20">{{$t('account.transfer')}}{{$t('account.record')}}</div>
<div class="ml20">{{$t('auth2.other')}}{{$t('account.record')}}</div>
</div>
<div class="contentBK fColor1 pdlr20 pdtb20 ft12">
<div class="flex alcenter">
<span class="flex1">{{$t('time')}}</span>
<span class="flex1">{{$t('market.currency')}}</span>
<span class="flex1">{{$t('c2c.type')}}</span>
<span class="flex1">{{$t('number')}}</span>
<span class="flex1">{{$t('c2c.state')}}</span>
<span class="flex1">{{$t('do')}}</span>
</div>
<div class="mt10">
<div class="flex alcenter">
<span class="flex1">2018-01-29 12:23:45</span>
<span class="flex1">USDC</span>
<span class="flex1">USDC</span>
<span class="flex1">245</span>
<span class="flex1">{{$t("c2c.completed")}}</span>
<span class="flex1">{{$t("revoke")}}</span>
</div>
<div class="none color1 tc">
{{$t('nodata')}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
export default {
name:'finanrec',
components:{indexHeader},
data(){
return {
lang:'',
token:'',
changeList:[]
}
},
created(){
this.token= localStorage.getItem('token') || '';
},
methods:{
getdata(){
$.ajax({
type: "POST",
url: '/api/' + 'wallet/legal_log',
data: {
// type:'change'
},
dataType: "json",
async: true,
beforeSend: function beforeSend(request) {
request.setRequestHeader("Authorization", that.token);
},
success: function(res){
if (res.type=="ok"){
}else{
}
}
})
}
},
mounted(){
var that = this;
that.getdata();
}
}
</script>
<style lang="scss" scoped>
.box .account{
width: 75rem;
margin: 0 auto 82px;
margin-top: 30px;
}
.topcontent{
padding: 22px 30px;
margin-bottom: 20px;
background-color: #1a2330;
border-radius: 5px;
}
.account_title{
padding: 15px 20px;
}
.content{
}
</style>
// WEBPACK FOOTER //
// src/view/accounts/finanrec.vue
src/view/accounts/left_account.vue
+106
View File
@@ -0,0 +1,106 @@
<template>
<div class="partialmenu _flex-shrink bg-main" style="border-right: 3px solid white;">
<div class="_flex partialmenu-li" :class="index == curActive ? 'router-link-active' :''" v-for="(item,index) in array" :key="index">
<router-link :to="item.page">
<img :src="curActive == index ? item.src2:item.src1" class="iconfont mr10">
<span>{{item.text}}</span>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: "left_account",
data() {
return {
curActive:0,
array:[
{
src1: require("@/assets/images/change1.png"),
src2: require("@/assets/images/change2.png"),
text: this.$t('indexHeader.my_Assets'),
icon:'icon-bibijiaoyi',
page: 'change',
children: ['change']
},
{
src1: require("@/assets/images/uorder1.png"),
src2: require("@/assets/images/uorder2.png"),
text: this.$t('uorder.order_center'),
icon:'icon-huazhuan',
page:'UOrder',
children:['UOrder']
},
],
}
},
created(){
},
mounted(){
this.bus.$on("nav_name", name =>{
console.log(0,name)
this.curActive = this.array.findIndex( val => val.page === name || (val.children && val.children.includes(name))) ;
if(this.curActive == -1){
this.curActive = 0
}
})
},
watch: {
'$route.name': {
immediate: true, // 这句重要
handler(val) {
let name = this.$route.name;
this.curActive = this.array.findIndex( val => val.page === name || (val.children && val.children.includes(name)))
if(this.curActive == -1){
this.curActive = 0
}
},
deep: true
}
},
methods: {
goto(index,name) {
this.curActive=index;
this.$router.push({name: name, params: {lang: this.lang}})
},
}
};
</script>
<style lang="scss" scoped>
.bg-main {
background-color: #fff;
color: #000;
}
._flex-shrink {
flex-shrink: 0;
}
.partialmenu {
box-sizing: border-box;
width: 260px;
height: 100%;
}
.partialmenu-li {
padding: 18px 0 18px 30px;
font-size: 14px;
color: #000;
border-left: 3px solid transparent;
}
.partialmenu-li.router-link-active, .partialmenu-li:hover {
background-color: #f7f7fa;
color: #000;
border-left-color: #276cff;
}
.partialmenu-li img {
margin-right: 9px;
width: 16px;
height: 16px;
}
.partialmenu-li {
padding: 18px 0 18px 30px;
font-size: 14px;
color: #000;
border-left: 3px solid transparent;
}
</style>
src/view/accounts/legal.vue
+826
View File
@@ -0,0 +1,826 @@
<template>
<div class>
<div class="header fColor1">
<p class="fl">
{{ $t('account.totalassets') }}：
<span class="asset_num">{{ totle | toFixeds }}</span>
<span class="asset_name"> USDC</span>
</p>
<p class="fr right_text">
<!-- <span class="record" @click="record">财务记录</span> -->
<span class="address hide" @click="withdraw_address">{{ $t('account.upaddress') }}</span>
</p>
</div>
<div class="content fColor1 ft12">
<div class="content_top flex alcenter fColor2">
<p class="flex1 tc">
{{ $t('market.currency') }}
<i></i>
</p>
<p class="flex1 tc">{{ $t('center.available') }}</p>
<p class="flex1 tc">{{ $t('account.freezes') }}</p>
<!-- <p class="flex1 tc">BTC估值<i></i></p> -->
<!-- <p class="flex1 tc">锁仓</p> -->
<p class="flex1 tc">{{ $t('account.conversion') }}(USDC)</p>
<p class="flex1 tc">{{ $t('do') }}</p>
</div>
<ul class="content_ul">
<li
v-for="(item,index) in asset_list"
v-if="item.is_legal == 1"
:key="index"
>
<div class="content_li flex alcenter between">
<p class="flex1 tc">{{ item.currency_name }}</p>
<p class="flex1 tc">{{ item.legal_balance || '0.00' | toFixeds }}</p>
<p class="flex1 tc">{{ item.lock_legal_balance || '0.00' | toFixeds }}</p>
<p class="flex1 tc">{{ item.usdt_price * item.legal_balance || '0.00' | toFixeds }}</p>
<!-- <p class="flex1 tc">{{item.valuation}}</p> -->
<!-- <p class="flex1 tc">{{item.lock_position}}</p> -->
<p class="flex1 tc operation">
<span @click="transIn(index)">{{ $t('transin') }}</span>
<span @click="transOut(index)">{{ $t('transout') }}</span>
<span @click="rec(index,item.currency)">{{ $t('account.record') }}</span>
</p>
</div>
<!--记录区-->
<div class="hide_div rec-box" v-if="index == active02">
<div class="rec-con">
<div class="rec-title">
<span>{{ $t('number') }}</span>
<span>{{ $t('account.record') }}</span>
<span>{{ $t('time') }}</span>
</div>
<ul class="rec-list">
<li v-for="(reItem,reIndex) in recData" :key="reIndex">
<span>{{ reItem.value || '0.00' | toFixeds }}</span>
<span>{{ reItem.info }}</span>
<span>{{ reItem.created_time }}</span>
</li>
</ul>
<p class="more" @click="moreData()">{{ more }}</p>
</div>
</div>
</li>
</ul>
<!-- <div class="tc ft16 fColor1 mt50" v-show="asset_list.length<=0"></div> -->
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import left from "@/view/left";
import "@/lib/clipboard.min.js";
import "@/lib/jquery.qrcode.min.js";
import axios from "axios";
export default {
name: "finance",
filters: {
toFixeds: function (value) {
value = Number(value);
return value.toFixed(8);
}
},
data() {
return {
totle: "",
recData: [],
token: "",
flags: false,
flag: false,
isHide: true,
active: "a",
active01: "a",
tibi_msg: this.$t("account.tibi"),
active02: "a",
addr: "",
url: "",
excharge_address: "",
address: "",
number: "",
rate: "",
coinname: "",
balance: "",
ratenum: "",
reachnum: "",
min_number: "",
min_number_txt: "",
currency: "",
asset_list: [],
tip_list: [
this.$t('account.a1') + "USDC" + this.$t('account.a2'),
"USDC" + this.$t('account.a3')
],
tip_list01: [
this.$t('account.a1') + "USDC" + this.$t('account.a2'),
"USDC" + this.$t('account.a3')
],
page: 1,
more: this.$t("more"),
balanceList: [this.$t('account.laccount'), this.$t('usercenter.lever')],
transferData: {
modalShow: false,
transferName: "",
transferBalance: "",
start: "",
end: ""
},
status: '',
form: {
from: '',
num: '',
pic: [],
hash: '',
},
inDialog: false,
outDialog: false,
uploadUrl: '',
uploadHeaders: {},
legal_list: [],
amount: 0,
current: 0,
changeBalance: []
};
},
components: {
indexHeader,
left
},
methods: {
goRecord() {
this.$router.push({name: "coinRecord"});
},
transIn(index) {
// console.log(this.asset_list[index]);
// inputValue:coin.change_balance,
let coin = this.changeBalance[index]
let avi = this.$t('center.available')
let that = this;
this.$prompt(`${coin.currency_name} ${avi} ${coin.change_balance} `, '从币币账户转入', {
confirmButtonText: '从币币账户转入',
cancelButtonText: '取消',
inputPlaceholder: this.$t('account.huanum'),
inputType: 'number',
closeOnClickModal: false
}).then(({value}) => {
that.$http({
url: "/api/" + "wallet/change",
method: "post",
data: {
number: value,
from_field: 'change',
to_field: 'legal',
currency_id: coin.currency
},
headers: {Authorization: localStorage.getItem('token')}
}).then(res => {
if (res.data.type == "ok") {
that.getdata();
this.$message({
showClose: true,
message: '划转完成',
type: 'success'
});
} else {
}
}).catch(error => {
console.log(error);
});
}).catch(() => {
});
},
transOut(index) {
// console.log(this.asset_list[index]);
let that = this;
let coin = this.asset_list[index];
let avi = this.$t('center.available')
this.$prompt(`${coin.currency_name} ${avi} ${coin.legal_balance} `, '转出到币币账户', {
confirmButtonText: '转出到币币账户',
cancelButtonText: '取消',
inputPlaceholder: this.$t('account.huanum'),
inputType: 'number',
closeOnClickModal: false
}).then(({value}) => {
that.$http({
url: "/api/" + "wallet/change",
method: "post",
data: {
number: value,
from_field: 'legal',
to_field: 'change',
currency_id: coin.currency
},
headers: {Authorization: localStorage.getItem('token')}
}).then(res => {
if (res.data.type == "ok") {
that.getdata();
this.$message({
showClose: true,
message: '划转完成',
type: 'success'
});
} else {
}
}).catch(error => {
console.log(error);
});
}).catch(() => {
});
},
init() {
var that = this;
that.uploadHeaders = {Authorization: localStorage.getItem('token')};
that.uploadUrl = that.$utils.back_api + 'api/upload';
// console.log('上传地址',that.uploadUrl)
var clipboard = new Clipboard(".copy");
clipboard.on("success", function (e) {
layer.alert(that.$t("lay.copys"));
});
clipboard.on("error", function (e) {
alert(that.$t("lay.fcopy"));
});
},
//充币
excharge(index, currency) {
console.log(index, currency);
if (this.status == 1) {
this.currency = currency;
if (this.flag) {
this.flag = false;
this.active = "a";
this.active01 = "a";
this.active02 = "a";
} else {
this.flag = true;
this.active = index;
this.active01 = "a";
this.active02 = "a";
}
this.sendData(currency);
} else {
layer.alert(this.$t('notopen'))
}
},
sendData(currency) {
var that = this;
this.$http({
url: "/api/" + "wallet/get_in_address",
method: "post",
data: {currency: currency},
headers: {Authorization: that.token}
})
.then(res => {
if (res.data.type == "ok") {
that.excharge_address = currency == 1 ? res.data.message.btc : res.data.message.usdt_erc20;
// 生成二维码
$("#code").qrcode({
width: 130, //宽度
height: 130, //高度
text: that.excharge_address
});
} else {
}
})
.catch(error => {
console.log(error);
});
},
//提币
withdraw(index, currency) {
if (this.status == 1) {
this.currency = currency;
if (this.flag) {
this.flag = false;
this.active = "a";
this.active01 = "a";
this.active02 = "a";
} else {
this.flag = true;
this.active01 = index;
this.active = "a";
this.active02 = "a";
}
this.getNum(currency);
} else {
layer.alert(this.$t('notopen'));
}
},
//记录
rec(index, currency) {
this.currency = currency;
this.recData = [];
if (this.flag) {
this.flag = false;
this.active = "a";
this.active01 = "a";
this.active02 = "a";
} else {
this.flag = true;
this.active02 = index;
this.active = "a";
this.active01 = "a";
this.$http({
url: "/api/wallet/legal_log",
method: "post",
data: {type: 1, currency: currency, page: 1},
headers: {Authorization: this.token}
}).then(res => {
if (res.data.type == "ok") {
this.recData = res.data.message.list;
}
});
}
},
getNum(currency) {
var that = this;
this.$http({
method: "POST",
url: "/api/" + "wallet/get_info",
data: {
currency: currency
},
headers: {
"Authorization": localStorage.getItem('token')
}
}).then(res => {
res = res.data;
that.coinname = res.message.name;
that.balance = res.message.legal_balance;
that.min_number =
that.$t('account.minnum') + parseFloat(res.message.min_number).toFixed(2)
+ " " + that.$t('account.oncemaxnum') + parseFloat(res.message.max_number).toFixed(2)
+ " " + that.$t('account.daynum') + parseFloat(res.message.day_limit).toFixed(2);
that.min_number_txt = parseFloat(res.message.min_number).toFixed(8);
that.minnumber = res.message.min_number;
that.max_number = res.message.max_number;
that.day_limit = res.message.day_limit;
that.ratenum = res.message.rate;
that.reachnum = 0.0;
that.rate = res.message.rate;
});
},
// 提币按钮
mention() {
var that = this;
var currency = this.currency;
var address = this.address;
var number = this.number;
var rate = this.rate;
var min_number = this.minnumber;
if (!address) {
layer.alert(that.$t('lay.caddress'));
return;
}
if (!number) {
layer.alert(that.$t("lay.cnumber"));
return;
}
if (number - 0 < min_number) {
return layer.alert(that.$t("lay.minnum"));
}
this.$http({
method: "POST",
url: "/api/" + "wallet/out",
data: {
currency: this.currency,
number: this.number,
address: this.address,
rate: this.rate
},
headers: {
"Authorization": localStorage.getItem('token')
}
}).then(res => {
res = res.data;
if (res.type == "ok") {
layer.alert(res.message);
setTimeout(() => {
window.location.reload();
}, 1500);
} else {
layer.alert(res.message);
}
});
},
exchange() {
},
//复制
copy() {
var that = this;
var clipboard = new Clipboard(".copy", {
text: function () {
return that.excharge_address;
}
});
clipboard.on("success", function (e) {
that.flags = true;
layer.msg(that.$t("lay.copys"));
});
clipboard.on("error", function (e) {
that.flags = false;
layer.msg(that.$t("lay.fcopy"));
});
},
record() {
this.$router.push({name: "finanrec"});
},
withdraw_address() {
this.$router.push({name: "withdraw_address"});
},
show_ewm() {
if (this.isHide) {
this.isHide = false;
} else {
this.isHide = true;
}
},
getdata() {
var that = this;
this.$http({
url: "/api/" + "wallet/list",
method: "post",
data: {},
headers: {Authorization: that.token}
})
.then(res => {
if (res.data.type == "ok") {
console.log('法币余额', res.data.message);
that.asset_list = res.data.message.legal_wallet.balance;
that.changeBalance = res.data.message.change_wallet.balance;
that.totle = res.data.message.legal_wallet.usdt_totle;
that.status = res.data.message.is_open_CTbi;
} else {
return;
}
})
.catch(error => {
console.log(error);
});
},
// 加载更多
moreData() {
let that = this;
that.page = that.page + 1;
this.$http({
url: "/api/wallet/legal_log",
method: "post",
data: {type: "1", currency: that.currency, page: that.page},
headers: {Authorization: this.token}
}).then(res => {
if (res.data.type == "ok") {
var datas = that.asset_list;
for (let i in datas) {
if (that.currency == datas[i].currency) {
that.active02 = i;
if (res.data.message.list.length > 0) {
that.recData = that.recData.concat(res.data.message.list);
} else {
that.more = that.$t('nomore');
}
}
}
}
});
},
// 划转
transfer(index, currency) {
let that = this;
that.transferData.modalShow = true;
},
uploadFile(f) {
let that = this;
let formData = new FormData();
formData.append("file", f.file);
this.$http.post("/api/upload", formData, {
headers: {"Content-Type": "multipart/form-data"}
}).then(res => {
let msg = res.data;
if (msg.type == 'ok') {
that.form.pic = [{name: '已上传', url: msg.message}];
} else {
layer.msg(msg.message)
}
});
},
submitChargeInfo(currency) {
let data = {};
data.currency = currency;
data.acc = this.form.from;
data.hash = this.form.hash;
data.amount = this.form.num;
if (!data.acc || !data.hash || !data.amount || !data.currency || this.form.pic.length < 1) {
layer.msg('参数错误');
return;
}
data.pic = this.form.pic[0].url;
let that = this;
this.$http({
url: "/api/wallet/charge_req",
method: "post",
data: data,
headers: {Authorization: this.token}
}).then(res => {
if (res.data.type == "ok") {
layer.msg('充值申请已提交');
that.form.num = '';
that.form.from = '';
that.form.hash = '';
that.form.pic = [];
} else {
layer.msg('充值申请提交失败')
}
});
}
},
created() {
this.token = localStorage.getItem("token") || "";
},
mounted() {
var that = this;
that.getdata();
that.init();
}
};
</script>
<style lang="scss">
.el-form-item__label {
color: #637085 !important;
}
.el-message-box {
.el-input__inner {
border-color: #F1F1F1 !important;
background-color: #ffffff !important;
color: #181b2a !important;
}
}
</style>
<style lang="scss" scoped>
.header {
padding: 15px 30px;
overflow: hidden;
}
.min_lab {
margin: 0 10px;
}
.min_lab input {
margin-right: 3px;
}
.inp_lab {
border: 1px solid #6b80ae;
border-radius: 2px;
padding: 3px 5px;
}
.inp_lab input {
background: none;
border: none;
width: 120px;
color: #fff;
}
.right_text {
color: #5697f4;
}
.right_text span {
cursor: pointer;
}
.record {
margin-right: 10px;
}
.content_ul {
padding: 0 20px;
}
.content_top {
padding: 10px 20px;
// background: #161617c7;
}
.content_li {
padding: 15px 0;
border-bottom: 1px solid #1e2c42;
}
.operation,
.copy,
.ewm {
color: #00a4d8;
}
.copy {
margin: 0 30px;
}
.copy:hover {
cursor: pointer;
}
.ewm:hover {
cursor: pointer;
}
.operation span {
cursor: pointer;
margin: 0 5px;
}
.hide_div {
border: 1px solid #1e2c42;
padding: 20px;
}
.excharge_record {
color: #5697f4;
}
input {
background: none;
border: none;
}
.address_inp {
width: 100%;
border: 1px solid #6b80ae;
border-radius: 3px;
padding: 15px 15px;
}
.num_lab {
display: flex;
width: 100%;
border: 1px solid #6b80ae;
border-radius: 3px;
padding: 15px;
}
.num_lab input {
width: 100%;
}
.range_lab,
.get_lab {
border: 1px solid #6b80ae;
border-radius: 3px;
padding: 15px;
}
.get_lab {
background: #1e2c42;
}
.right_inp_wrap {
margin-left: 20px;
}
.use_num,
.advance {
color: #5697f4;
}
.use_num {
margin-right: 5px;
}
.advance {
margin-left: 5px;
}
.withdraw_btn {
background-color: #7a98f7;
color: #fff;
padding: 15px 70px;
border: none;
border-radius: 5px;
}
.withdraw_btn:hover {
cursor: pointer;
}
.bg {
background: #2b3c71;
}
.ewm_wrap {
position: relative;
}
.ewm_img {
width: 150px;
height: 150px;
position: absolute;
top: 25px;
left: -45px;
border: 10px solid #fff;
z-index: 1;
}
.hide {
display: none;
}
.rec-box {
.rec-con {
margin: 10px;
padding: 0 20px;
background: #181d25;
span {
flex: 1;
text-align: center;
line-height: 3;
}
.rec-title {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #fff;
line-height: 1.5;
}
li {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #728daf;
border-top: 1px solid #2e394c;
}
}
}
.more {
width: 100%;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.transfer-modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
overflow: hidden;
justify-content: center;
align-items: center;
}
.transfer-mask {
width: 500px;
background-color: #262a42;
margin: 0 auto;
border-radius: 5px;
}
.transfer-header {
line-height: 40px;
text-align: center;
position: relative;
}
.transfer-header p {
position: absolute;
right: 10px;
top: 0;
}
.num_lab input::-webkit-input-placeholder {
color: #aaa;
font-size: 12px;
}
</style>
src/view/accounts/legalAccount.vue
+175
View File
@@ -0,0 +1,175 @@
<template>
<div class="main">
<p class="legal_name plr10">{{legal_name}}</p>
<div class="legalAccount_msg flex between plr10">
<div>
<p class="ft12 msg_title">{{$t('center.available')}}</p>
<p>{{legal_balance | toFixeds}}</p>
</div>
<div>
<p class="ft12 msg_title">{{$t('account.freezes')}}</p>
<p>{{lock_legal_balance | toFixeds}}</p>
</div>
<div>
<p class="ft12 msg_title">{{$t('account.conversion')}}（CNY）</p>
<p>{{cny_price | toFixeds}}</p>
</div>
</div>
<div class="rec_wrap">
<p class="rec_title flex between">
<span>{{$t('account.mrecord')}}</span>
<span class="all">{{$t('center.all')}}</span>
</p>
<p class="list_title flex">
<span class="ft14">{{$t('number')}}</span>
<span class="ft14 tc">{{$t('account.record')}}</span>
<span class="ft14 tr">{{$t('time')}}</span>
</p>
<ul class="log_list">
<li class="flex arround ft12 flex around" v-for="(item,index) in list">
<span>{{item.value | toFixeds}}</span>
<span class="tc">{{item.info}}</span>
<span class="tr">{{item.created_time}}</span>
</li>
</ul>
<p class="tc ft12 curPer mt20" @click="getMore()" v-if="more">{{$t('more')}}</p>
<p class="tc ft12 curPer mt20" v-else>{{$t('nodata')}}</p>
</div>
<!-- <router-link tag="p" class="huazhuan" to='/transferLegal'>划转</router-link> -->
</div>
</template>
<script>
export default {
data(){
return{
currency:'',
legal_name:'',
legal_balance:'',
lock_legal_balance:'',
cny_price:'',
page:1,
list:[],
more:true
}
},
filters: {
toFixeds: function(value) {
value = Number(value);
return value.toFixed(2);
}
},
created(){
this.token = localStorage.getItem('token') || '';
this.currency=this.$route.query.currency_id;
},
mounted(){
this.init();
this.legal_log();
},
methods:{
init(){
var that = this
this.$http({
url: '/api/' + 'wallet/detail',
method:'post',
data:{
currency:that.currency,
type:'legal'
},
headers: {'Authorization': that.token}
}).then(res=>{
if(res.data.type =='ok'){
var msg = res.data.message;
that.legal_name = msg.currency_name;
that.legal_balance = msg.legal_balance;
that.lock_legal_balance = msg.lock_legal_balance;
that.cny_price = (msg.legal_balance-0)*(msg.cny_price);
}else{
// layer.msg(res.message);
}
}).catch(error=>{
console.log(error)
})
},
legal_log(){
var that = this
this.$http({
url: '/api/' + 'wallet/legal_log',
method:'post',
data:{
currency:that.currency,
type:1,
page:that.page
},
headers: {'Authorization': that.token}
}).then(res=>{
if(res.data.type =='ok'){
var list = res.data.message.list;
if(list.length>0){
that.list=that.list.concat(list);
}else{
that.more=false;
}
}else{
// layer.msg(res.message);
}
}).catch(error=>{
console.log(error)
})
},
getMore(){
this.page=this.page+1;
this.legal_log();
}
}
}
</script>
<style scoped>
.legal_name{
background: #1b1e2e;
padding: 5px 10px;
}
.msg_title{
color: #61688a;
}
.main{
color:#fff;
padding: 30px;
}
.legalAccount_msg{
background: #1b1e2e;
padding: 6px 10px;
}
.legalAccount_msg div p:first-child{
margin-bottom: 10px;
}
.rec_wrap{
margin-top: 30px;
margin-bottom: 30px;
}
.rec_title{
margin-bottom: 10px;
}
.all{
color: #61688a;
}
.list_title{
padding: 10px;
background: #1b1e2e;
}
.list_title span{flex: 1}
.huazhuan{
text-align: center;
margin-top: 60px;
background: #7a98f7;
padding: 8px;
}
.huazhuan:hover{
cursor: pointer;
}
.log_list li{padding: 10px;}
.log_list li span{flex: 1;}
</style>
src/view/accounts/letransactions.vue
+1698
View File
File diff suppressed because it is too large Load Diff
src/view/accounts/lever.vue
+452
View File
@@ -0,0 +1,452 @@
<template>
<div class="lever">
<div class="lever-head fColor1">
<span>净资产折合:</span>
<span class="ft12 mincny">≈{{ totle }} CNY</span>
<!-- <input type="checkbox" class="ml20">
<span class="ft14">隐藏小额资产</span>
<input type="text" class="filter-input ml20"> -->
<span class="fr baseColor">财务记录</span>
</div>
<div class="leverbody contentBK ft12">
<ul class="titlebox fColor3 clearfix">
<li class="w16">合约账户</li>
<li class="w20 tr">可用</li>
<li class="w20 tr">冻结</li>
<!-- <li class="w16 tr">已借</li> -->
<!-- <li class="w11 tr">风险率</li>
<li class="w5 tr">爆仓价</li> -->
<li class="w25 tr">操作</li>
</ul>
<ul class="contentbox fColor1">
<li class="clearfix flex" v-for="(item,index) in legal_list">
<p class="w16 l40">{{ item.currency_name }}</p>
<p class="w20 tr">
<span>{{ item.legal_balance }}</span>
</p>
<p class="w20 tr">
<span>{{ item.lock_legal_balance }}</span>
</p>
<p class="w25 tr baseColor l40 btn">
<span @click="current = index;inDialog = true;type = 1">转入</span>
<span @click="current = index;outDialog = true;type= 2">转出</span>
<span @click="$router.push({path:'/legalAccount',query:{currency_id:item.currency}})">记录</span>
</p>
</li>
</ul>
<div class="tc ft16 fColor1 mt50" v-if="legal_list.length<=0">暂无数据</div>
</div>
<div class="dialog_wrap" v-show="inDialog">
<div class="dialog">
<div class="dia-tit clearfix">
<span class="fl fColor1">转入本金</span>
<span class="fr fColor3 close" @click="close">X</span>
</div>
<div class="dia-content fColor1">
<div class="dia-container">
<div class="flex alcenter frombox">
<span class="fColor3 ft12 tc">从</span>
<p class="ft14 flex1">合约账户</p>
</div>
<div class="frombox flex alcenter w10 tc">
<img src="@/assets/images/trade.png" alt="" class="coinimg">
</div>
<div class="flex alcenter frombox">
<span class="fColor3 ft12 tc">到</span>
<p class="ft14 flex1">{{ nowCoin.currency_name }}资产账户</p>
</div>
</div>
<div class="div-input mt20">
<p class="ft12 fColor3">币种</p>
<!-- <div class="dia-coin flex tc mt10 ft12 fColor3">
<p v-for="(item,index) in coins" :class="{select:index==current}" @click="chooseCoin(index)">{{item.coin}}<i></i></p>
</div> -->
</div>
<div class="div-input mt20">
<p class="ft12 fColor3 flex between">
<span>数量</span>
<span>可转 {{ nowCoin.lever_balance }} {{ nowCoin.currency_name }}</span>
</p>
<div class="inputboxs flex between alcenter mt10">
<input type="text" v-model="amount">
<div class="ft12 fColor3">
<span>{{ nowCoin.currency_name }}</span>
<span>|</span>
<span class="all" @click="amount = nowCoin.lever_balance">全部</span>
</div>
</div>
</div>
<div class="btn-box flex ft16 tc">
<div @click="close">取消</div>
<div class="sure" @click="turn">确定</div>
</div>
</div>
</div>
</div>
<div class="dialog_wrap" v-show="outDialog">
<div class="dialog">
<div class="dia-tit clearfix">
<span class="fl fColor1">转出本金</span>
<span class="fr fColor3 close" @click="close">X</span>
</div>
<div class="dia-content fColor1">
<div class="dia-container">
<div class="flex alcenter frombox">
<span class="fColor3 ft12 tc">从</span>
<p class="ft14 flex1">{{ nowCoin.currency_name }}资产账户</p>
</div>
<div class="frombox flex alcenter w10 tc">
<img src="@/assets/images/trade.png" alt="" class="coinimg">
</div>
<div class="flex alcenter frombox">
<span class="fColor3 ft12 tc">到</span>
<p class="ft14 flex1">合约账户</p>
</div>
</div>
<div class="div-input mt20">
<p class="ft12 fColor3">币种</p>
<!-- <div class="dia-coin flex tc mt10 ft12 fColor3">
<p v-for="(item,index) in coins" :class="{select:index==current}" @click="chooseCoin(index)">{{item.coin}}<i></i></p>
</div> -->
</div>
<div class="div-input mt20">
<p class="ft12 fColor3 flex between">
<span>数量</span>
<span>可转 {{ nowCoin.legal_balance }} {{ nowCoin.currency_name }}</span>
</p>
<div class="inputboxs flex between alcenter mt10">
<input type="text" v-model="amount">
<div class="ft12 fColor3">
<span>{{ nowCoin.legal_balance }}</span>
<span>|</span>
<span class="all" @click="amount = nowCoin.legal_balance">全部</span>
</div>
</div>
</div>
<div class="btn-box flex ft16 tc">
<div @click="close">取消</div>
<div class="sure" @click="turn">确定</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
export default {
name: 'change',
components: {indexHeader},
data() {
return {
current: 0,
inDialog: false,
outDialog: false,
legal_list: [],
amount: '',
totle: 0,
type: 3,
coins: [{coin: "ETC"}, {coin: "USDC"}]
}
},
methods: {
close() {
this.inDialog = false
this.outDialog = false;
this.amount = '';
},
golever() {
this.$router.push({name: 'manger'})
},
getdata() {
var that = this;
this.$http({
url: '/api/' + 'wallet/list',
method: 'post',
data: {},
headers: {'Authorization': that.token},
}).then(res => {
var legal_wallet = res.data.message.legal_wallet;
that.totle = legal_wallet.totle;
var lever_balance = {};
for (var i = res.data.message.lever_wallet.balance.length - 1; i >= 0; i--) {
var item = res.data.message.lever_wallet.balance[i];
lever_balance[item.currency] = item.lever_balance;
}
for (var i = legal_wallet.balance.length - 1; i >= 0; i--) {
var item = legal_wallet.balance[i];
if (lever_balance[item.currency]) {
legal_wallet.balance[i].lever_balance = lever_balance[item.currency];
}
}
that.legal_list = legal_wallet.balance;
that.totle = res.data.message.legal_wallet.totle;
}).catch(error => {
console.log(error)
})
},
turn() {
this.$http({
url: '/api/wallet/change',
method: 'post',
data: {
type: this.type,
number: this.amount,
currency_id: this.nowCoin.currency
},
headers: {'Authorization': this.token},
}).then(res => {
layer.msg(res.data.message);
if (res.data.type == 'ok') {
this.close()
}
})
}
},
created() {
this.token = localStorage.getItem('token') || '';
},
mounted() {
// this.init();
this.getdata();
},
computed: {
nowCoin: function () {
var l = this.legal_list;
if (l.length) {
return l[this.current]
} else {
return {}
}
}
}
};
</script>
<style scoped lang="scss">
.lever {
.lever-head {
background-color: #1b1e2e;
padding: 0 30px;
height: 48px;
line-height: 48px;
font-size: 16px;
color: #c7cce6;
.mincny {
color: #61688a;
}
.filter-input {
display: inline-block;
width: 125px;
height: 28px;
padding: 0 30px 0 10px;
background: none;
border-radius: 3px;
border: 1px solid #4e5b85;
}
}
.leverbody {
padding: 0 20px;
.titlebox {
height: 40px;
line-height: 40px;
li {
float: left;
}
}
.contentbox {
li {
height: 60px;
padding: 10px;
border-bottom: 1px solid #1f2943;
> p {
float: left;
height: 40px;
line-height: 40px;
}
.l40 {
line-height: 40px
}
.btn {
span {
margin-left: 20px;
cursor: pointer;
}
span:hover {
color: #61688a
}
}
}
}
}
.dialog_wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
text-align: center;
background: rgba(0, 0, 0, .4);
.dialog {
margin-top: 220px;
display: inline-block;
width: 560px;
padding-top: 30px;
box-sizing: border-box;
border-radius: 3px;
text-align: left;
vertical-align: middle;
background-color: #262a42;
.dia-tit {
padding: 0 40px 30px;
font-size: 24px;
line-height: 24px;
.close {
cursor: pointer;
}
.close:hover {
color: #fff
}
}
.dia-content {
padding: 0 40px;
margin-bottom: 20px;
.frombox {
height: 48px;
line-height: 48px;
span {
width: 10%
}
p {
height: 48px;
padding-left: 20px;
line-height: 48px;
border-radius: 3px;
background-color: #202437;
}
.coinimg {
width: 28px;
margin: 0 auto
}
}
.dia-coin {
background-color: #202437;
p {
width: 50%;
width: 50%;
height: 48px;
line-height: 48px;
cursor: pointer;
position: relative;
i {
display: none;
position: absolute;
bottom: 4px;
right: 4px;
width: 0;
height: 0;
border: 6px solid transparent;
border-right: 6px solid #fff;
border-bottom: 6px solid #fff;
}
}
.select {
color: #fff;
background-color: #7a98f7;
i {
display: block
}
}
p:first-child {
border-radius: 3px 0 0 3px;
}
p:last-child {
border-radius: 0 0px 3px 0;
}
}
.inputboxs {
width: 100%;
border-radius: 3px;
background-color: #1e2235;
border: 1px solid #4e5b85;
padding: 0 20px;
input {
background: transparent;
height: 46px;
color: #fff
}
span {
margin-left: 15px
}
.all {
color: #ff7519;
cursor: pointer;
}
}
.btn-box {
margin: 50px 0;
div {
width: 50%;
height: 48px;
line-height: 48px;
margin: 0 10px;
border-radius: 3px;
cursor: pointer;
}
.sure {
color: #fff;
background: #7a98f7;
}
}
}
}
}
}
</style>
// WEBPACK FOOTER //
// src/view/accounts/lever.vue
src/view/accounts/lever_manger.vue
+309
View File
@@ -0,0 +1,309 @@
<template>
<div class="manger">
<indexHeader></indexHeader>
<div class="content ft14" style="padding-top: 48px">
<div class="topcontent ft20 fColor1">
<span class="baseColor">合约账户</span>
<span class="ft12" style="padding:0 10px">></span>
<span>合约管理</span>
</div>
<div class="mainbox">
<div class="main-left fl">
<div class="bar-hd fColor1 pl10">
<p class="ft16 bar-title">合约账户</p>
<ul class="flex">
<li class="active">USDC</li>
<li>BTC</li>
<li>ETH</li>
</ul>
</div>
<div class="bar-tb ft12">
<div class="tb-title flex">
<p>币种</p>
<p class="tr">风险率</p>
</div>
<ul class="tb-ul fColor1 scroll">
<li class="flex" :class="{select:index==current}" v-for="(item,index) in coinList" @click="coin(index)">
<span>{{item.name}}</span>
<span class="tr">无风险</span>
</li>
</ul>
</div>
</div>
<div class="main-right ft">
<div class="ttBk fColor1 blod topshadow mr-title">
<span class="ft16 bold">ETH/USDC 合约账户</span>
<span class="ml10 fColor4">当风险率≤110%时，账户将触发爆仓以归还借贷资金</span>
</div>
<div class="mod-bd">
<div class="balance_bar">
<ul class="flex">
<li>
<p class="fColor3 canuse">可用USDC</p>
<p class="fColor1"><span>0.0000000</span><span class="ml10 baseColor">转入</span></p>
</li>
<li>
<p class="fColor3 canuse">可用btc</p>
<p class="fColor1"><span>0.0000000</span><span class="ml10 baseColor">转入</span></p>
</li>
<li>
<p class="fColor3 canuse">爆仓价(USDC)</p>
<p class="fColor1"><span>---</span></p>
</li>
<li>
<p class="fColor3 canuse">风险率</p>
<p class="fColor1 ft12"><span>无风险</span></p>
</li>
</ul>
</div>
<div class="pannel clearfix">
<div class="pannel-left fl">
<div class="pan-title fColor1"><span>USDC</span>借贷</div>
<ul class="pannel-ul ft12 flex">
<li>
<p class="fColor3 brow">已借</p>
<p class="fColor1">0.0000000</p>
</li>
<li>
<p class="fColor3 brow">可借</p>
<p class="fColor1">0.00</p>
</li>
<li>
<p class="fColor3 brow">利率</p>
<p class="fColor1">0.1%</p>
</li>
</ul>
</div>
<div class="pannel-right fr">
<div class="pan-title fColor1"><span>BTC</span>借贷</div>
<ul class="pannel-ul ft12 flex">
<li>
<p class="fColor3 brow">已借</p>
<p class="fColor1">0.0000000</p>
</li>
<li>
<p class="fColor3 brow">可借</p>
<p class="fColor1">0.00</p>
</li>
<li>
<p class="fColor3 brow">利率</p>
<p class="fColor1">0.1%</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="applybox mt20 contentBK">
<div class="ap-header ft16 fColor1">当前申请</div>
<div class="ap-list">
<ul class="fColor3 flex ft12 ul-title">
<li class="w18">申请时间</li>
<li class="w15">合约账户</li>
<li class="w8">币种</li>
<li class="w8 tr">数量</li>
<li class="w10 tr">利率</li>
<li class="w14 tr">未还利息</li>
<li class="w16 tr">未归还数量</li>
<li class="w11 tr">操作</li>
</ul>
<div>
<p class="fColor1 mt40 tc">暂无记录</p>
</div>
</div>
</div>
<div class="applybox mt20 contentBK">
<div class="ap-header ft16 fColor1">申请记录</div>
<div class="ap-list">
<ul class="fColor3 flex ft12 ul-title">
<li class="w18">申请时间</li>
<li class="w15">合约账户</li>
<li class="w8">币种</li>
<li class="w8 tr">数量</li>
<li class="w10 tr">利率</li>
<li class="w14 tr">未还利息</li>
<li class="w16 tr">未归还数量</li>
<li class="w11 tr">操作</li>
</ul>
<div>
<p class="fColor1 mt40 tc">暂无记录</p>
</div>
</div>
</div>
</div>
<indexFooter></indexFooter>
</div>
</template>
<script>
import indexHeader from '@/view/indexHeader'
import indexFooter from '@/view/indexFooter'
export default {
name:"manger",
components:{indexHeader,indexFooter},
data(){
return{
current:0,
coinList:[{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"},{name:"BTC"}]
}
},
methods:{
coin(index){
this.current=index;
}
}
}
</script>
<style lang="scss" scoped>
.content{
width: 75rem;
margin: 0 auto;
.topcontent{
height: 60px;
line-height: 60px;
padding: 0 30px;
margin: 20px 0;
font-size: 20px;
border-radius: 3px;
background-color: #181b2a;
}
.mainbox{
>div{
background: #181b2a
}
.main-left{
width: 220px;
height: 512px;
margin-right: 20px;
border-radius: 3px;
.bar-hd{
padding: 0 0 0 20px;
border-radius: 3px 3px 0 0;
box-shadow: 0 3px 6px rgba(0,0,0,.1);
.bar-title{
height: 48px;
line-height: 48px;
font-weight: 400;
}
li{
margin-right: 30px;
cursor: pointer;
line-height: 40px
}
}
.bar-tb{
.tb-title{
height: 40px;
line-height: 40px;
margin: 0 20px;
color: #4e5b85;
p{
width: 50%;
}
}
.tb-ul{
height: 318px;
overflow: auto;
li{
cursor: pointer;
margin: 0 4px;
padding: 0 16px;
margin-top: -1px;
line-height: 31px;
height: 31px;
border-bottom: 1px solid #1f2943;
span{
width: 50%
}
}
li:hover{
background-color: #262a42;
}
.select{
background-color: #262a42;
border-radius: 3px;
}
}
}
}
.main-right{
min-height: 512px;
margin-left: 240px;
border-radius: 3px;
margin-bottom: 10px;
transition: height .15s ease-in-out;
.mr-title{
height: 48px;
line-height: 48px;
padding-left: 30px;
}
.mod-bd{
padding: 0 30px;
.balance_bar{
height: 81px;
border-bottom: 1px solid #1f2943;
li{
width: 25%;
.canuse{
padding: 13px 0 23px;
}
}
}
}
.pannel{
>div{
width: 430px;
padding-top: 30px;
min-height:300px;
.pan-title{
font-size: 24px;
height: 50px;
font-weight: 400;
}
.pannel-ul{
height: 49px;
padding-bottom: 29px;
li{
width: 33.3%;
.brow{
height: 30px;
}
}
}
}
}
}
}
.applybox{
.ap-header{
background: #1b1e2e;
box-shadow: 0 3px 6px rgba(0,0,0,.1);
height: 40px;
line-height: 40px;
border-radius: 3px 3px 0 0;
padding: 0 30px;
}
.ap-list{
padding:0 10px;
min-height:150px;
.ul-title{
padding: 0 20px;
li{
height: 40px;
line-height: 40px;
}
}
}
}
}
</style>
// WEBPACK FOOTER //
// src/view/accounts/lever_manger.vue
src/view/accounts/suggestionsAndFeedback.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<div class="suggestionsAndFeedback">
<secondaryHead :text="$t('qshsl8')"></secondaryHead>
<div class="bit-center-wrap l-box">
<div class="lb-form">
<div class="srk-item">
<div class="si-title">
{{$t('qshsl2')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="email" :placeholder="$t('qshsl2')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl3')}} <span class="gfhf">*</span>
</div>
<div class="input-t">
<input v-model="tilte" :placeholder="$t('qshsl4')" />
</div>
</div>
<div class="srk-item">
<div class="si-title">
{{$t('qshsl5')}} <span class="gfhf">*</span>
</div>
<!-- <div class="input-t"> -->
<textarea class="input-t input-t2" v-model="content" :placeholder="$t('qshsl6')" />
<!-- </div> -->
</div>
<div class="loinSubmit" @click="submit">
{{$t("homeContent.btn_submit")}}
</div>
</div>
</div>
</div>
</template>
<script>
import secondaryHead from "@/components/secondaryHead";
export default {
components: {
secondaryHead
},
name: "suggestionsAndFeedback",
data() {
return {
// /feedback/add
// 参数
email: '',
tilte: '',
content: ''
}
},
methods:{
submit(){
if(this.email.trim()=='') return layer.msg(this.$t('qshsl2'))
if(this.tilte.trim()=='') return layer.msg(this.$t('qshsl4'))
if(this.content.trim()=='') return layer.msg(this.$t('qshsl6'))
layer.load();
this.$http({
url: "/api/feedback/add",
method: "post",
data: {
email: this.email,
tilte: this.tilte,
content: this.content,
lang: window.localStorage.getItem("lang")
},
headers: {
'lang': window.localStorage.getItem('lang'),
Authorization: localStorage.getItem("token")
}
}).then(e => {
layer.closeAll()
layer.msg(this.$t('qshsl7'))
this.email= ''
this.tilte= ''
this.content= ''
}).catch(t => {
layer.closeAll()
})
}
}
}
</script>
<style lang="scss">
.suggestionsAndFeedback {
width: 100%;
.lb-form {
width: 30rem;
max-width: 92%;
margin: 4rem auto 0;
.gfhf {
color: #e35e5e;
font-size: 12px;
padding-bottom: 1rem;
}
.input-t2 {
width: 100%;
height: 8rem;
}
}
}
.day {
.suggestionsAndFeedback {
.lb-form {
.input-t2 {
background: none;
color: #fff;
}
}
}
}
</style>
src/view/accounts/transfer.vue
+207
View File
@@ -0,0 +1,207 @@
<template>
<div class>
<div class="content fColor1">
<div class="record" @click="link()">{{$t('account.record')}}</div>
<div class="flex">
<p>从</p>
<p class="trade">{{name}}</p>
<p style="cursor: pointer;" @click="tabClick">{{$t('to')}}</p>
<p class="trade">{{leverName}}</p>
</div>
<div class="num">
<p>{{$t('account.huanum')}}</p>
<input type="text" placeholder="请输入最低100的划转数量" v-model="inputValue">
<p>{{$t('center.available')}}{{$t('cfc.balance')}}：{{totalMoney || '0.00' | toFixeds}}USDC</p>
</div>
<button type="button" class="comfirm-btn" @click="comfirm()">确认划转</button>
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import left from "@/view/left";
export default {
name: "transfer",
filters: {
toFixeds: function(value) {
value = Number(value);
return value.toFixed(2);
}
},
data() {
return {
name: this.$t('account.laccount'),
leverName: this.$t('usercenter.lever'),
totalMoney: "",
leverMoney: "",
tradeMoney: "",
type: 2,
token: localStorage.getItem("token"),
inputValue: "",
currencyId: ""
};
},
components: {
indexHeader,
left
},
methods: {
init() {
var that = this;
this.$http({
url: "/api/" + "wallet/list",
method: "post",
data: {},
headers: { Authorization: that.token }
})
.then(res => {
if (res.data.type == "ok") {
let list = res.data.message.legal_wallet.balance;
let lists = res.data.message.lever_wallet.balance;
for (let i = 0; i < list.length; i++) {
if (list[i].currency_name == "USDC") {
that.tradeMoney = list[i].legal_balance;
that.totalMoney = that.tradeMoney;
that.currencyId = list[i].currency;
}
}
for (let j = 0; j < lists.length; j++) {
if (lists[j].currency_name == "USDC") {
that.leverMoney = lists[j].lever_balance;
that.currencyId = lists[j].currency;
}
}
} else {
return;
}
})
.catch(error => {
console.log(error);
});
},
tabClick() {
let that = this;
if (that.type == 1) {
that.type = 2;
that.name = this.$t('account.laccount');
that.leverName = this.$t('usercenter.lever');
that.totalMoney = that.tradeMoney;
} else {
that.type = 1;
that.name = this.$t('usercenter.lever');
that.leverName = this.$t('account.laccount');
that.totalMoney = that.leverMoney;
}
},
// 确认互转
comfirm() {
var that = this;
if (that.inputValue == "") {
layer.msg(this.$t('lay.huanum'));
return false;
} else if (that.inputValue < 100) {
layer.msg("输入的划转数量不能低于100");
return false;
}
layer.confirm("是否确认划转？", function(index) {
layer.close(index);
var i = layer.load();
that.$http({
url: "/api/" + "wallet/change",
method: "post",
data: {
number: that.inputValue,
currency_id: that.currencyId,
type: that.type
},
headers: { Authorization: that.token }
})
.then(res => {
if (res.data.type == "ok") {
layer.close(i);
layer.msg(res.data.message);
setTimeout(function() {
that.$router.push({ name: "transferRecord" });
}, 500);
} else {
layer.msg(res.data.message);
layer.close(i);
return;
}
})
.catch(error => {
console.log(error);
});
});
},
link() {
this.$router.push({ name: "transferRecord" });
}
},
created() {
this.token = localStorage.getItem("token") || "";
this.init();
},
mounted() {
var that = this;
}
};
</script>
<style scoped lang="scss">
.record {
position: absolute;
right: 0;
top: 100px;
cursor: pointer;
}
.content {
width: 600px;
padding-top: 100px;
line-height: 30px;
margin: 0 auto;
position: relative;
}
.trade {
width: 110px;
line-height: 30px;
border: 1px solid #4e5b85;
text-align: center;
border-radius: 4px;
margin-right: 15px;
margin-left: 15px;
}
.num {
margin-top: 15px;
}
.num input {
width: 450px;
height: 40px;
line-height: 40px;
border: 1px solid #4e5b85;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0);
padding: 0 10px;
color: #fff;
margin-top: 15px;
margin-bottom: 15px;
}
.comfirm-btn {
width: 450px;
line-height: 40px;
border-radius: 6px;
margin-top: 40px;
background-color: #4e5b85;
color: #fff;
border: none;
outline: none;
}
</style>
// WEBPACK FOOTER //
// src/view/accounts/transfer.vue
src/view/accounts/transferLegal.vue
+464
View File
@@ -0,0 +1,464 @@
<template>
<div id="transfer-legal" v-if="coins.length">
<div class="title">{{ $t('account.transfer') }}</div>
<div class="choose-wrap">
<div class="flex" style="align-items: center">
<label class="mr20">{{ $t('account.choosecoin') }}</label>
<el-select v-model="coinIndex" @change="changeCoin" placeholder="请选择">
<el-option
v-for="(coin,index) in coins"
:key="index"
:label="coin.currency_name"
:value="index">
</el-option>
</el-select>
</div>
<div class="flex" style="align-items: center">
<label class="mr20">{{ $t('from') }}</label>
<el-select v-model="value1" @change="selectOne" :placeholder="$t('transfer.select')">
<el-option
v-for="(item,index) in accountList"
:key="index"
:label="item.texts"
:value="item.type">
</el-option>
</el-select>
</div>
<div class="flex" style="align-items: center">
<label class="mr20">{{ $t('to') }}</label>
<el-select v-model="value2" @change="selectOne" :placeholder="$t('transfer.select')">
<el-option
v-for="(item,index) in accountList"
:key="index"
:label="item.texts"
:value="item.type">
</el-option>
</el-select>
</div>
<div class="flex" style="align-items: center">
<label class="mr20">{{ $t('account.huanum') }}</label>
<el-input type="number" max="99999999" maxlength="10" :placeholder="$t('account.huanum')" v-model="number">
<template slot="suffix"><span style="line-height: 40px; margin: 10px;">{{
coins[coinIndex].currency_name
}}</span></template>
<template slot="append"><span class="curPer" @click="number = transferBalance">{{ $t('lever.all') }}</span>
</template>
</el-input>
</div>
<div class="flex ft14">{{ $t('center.available') }}：<span class="green">{{ transferBalance }}</span></div>
</div>
<button type='button' class="transfer curPer" @click="transfer">{{ $t('account.transfer') }}</button>
</div>
</template>
<script>
let [loadedCoin, loadCurrency] = [false, false];
export default {
data() {
return {
token: "",
selectedCoin: {name: "", id: ""},
coins: [],
coinIndex: 0,
types: [this.$t('usercenter.lever'), this.$t('usercenter.change')],
number: '',
selectedFrom: '合约账户',
selectedTo: '资产账户',
currencyList: [],
accountList: [],
value1: "change",
value2: "lever",
transferBalance: 0
};
},
created() {
this.getCoins();
this.initCurrencyList();
},
watch: {
value1: {
handler(newVal) {
if (loadedCoin)
this.computeBalance();
},
deep: true,
immediate: false
},
value2: {
handler(newVal) {
// this.computeBalance();
},
deep: true,
immediate: false
},
coinIndex: {
handler(newVal) {
if (loadCurrency)
this.computeBalance();
},
deep: true,
immediate: false
},
},
methods: {
getCoins() {
let that = this;
this.token = window.localStorage.getItem("token") || "";
this.$http({
url: "/api/wallet/list",
method: "post",
headers: {Authorization: this.token}
}).then(res => {
if (res.data.type == "ok") {
let [lever_balance, micro_balance, change_balance, lever_wallet, micro_wallet, legal_wallet, change_wallet] = [
{},
{},
{},
res.data.message.lever_wallet,
res.data.message.micro_wallet,
res.data.message.legal_wallet,
res.data.message.change_wallet
];
lever_wallet.balance.forEach(x => {
lever_balance[x.currency_name] = x.lever_balance;
});
micro_wallet.balance.forEach(x => {
micro_balance[x.currency_name] = x.micro_balance;
});
change_wallet.balance.forEach(x => {
change_balance[x.currency_name] = x.change_balance;
});
let coins = legal_wallet.balance;
for (let i = coins.length - 1; i >= 0; i--) {
let item = coins[i];
coins[i].lever_balance = lever_balance[item.currency_name];
coins[i].micro_balance = micro_balance[item.currency_name];
coins[i].change_balance = change_balance[item.currency_name];
}
that.coins = coins;
that.coinIndex = 0;
setTimeout(() => {
that.value1 = "change";
that.value2 = "lever";
}, 100);
loadedCoin = true;
}
});
},
transfer() {
let that = this;
if (this.number == '') {
layer.msg(this.$t('account.huanum'));
return;
} else {
let data = {};
data.number = this.number;
let baseCoin = this.coins[this.coinIndex];
data.from_field = this.value1;
data.to_field = this.value2;
if(data.from_field===data.to_field)
{
this.$message.error(this.$t('transfer.same'));
return;
}
data.currency_id = this.coins[this.coinIndex].currency;
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$http({
url: '/api/wallet/change',
method: 'post',
data: data,
headers: {'Authorization': this.token}
}).then(res => {
loading.close();
if (res.data.type == 'ok') {
this.$message({
message: that.$t('transfer.ok'),
type: 'success'
});
setTimeout(() => {
location.reload();
}, 1000);
} else {
this.$message.error(res.data.message);
}
})
}
},
initCurrencyList() {
let token = localStorage.getItem('token')
let that = this;
this.$http({
url: "/api/" + "currency/user_currency_list",
method: "get",
data: {},
headers: {Authorization: token}
}).then(res => {
if (res.data.type == "ok") {
var datas = res.data.message;
if (datas.length > 0) {
var arr = [];
for (var i = 0; i < datas.length; i++) {
var nums =
datas[i].is_legal - 0 +
(datas[i].is_lever - 0) +
(datas[i].is_match - 0) +
(datas[i].is_micro - 0);
if (nums > 1) {
arr.push(datas[i]);
}
}
console.log(arr);
var arr2 = [];
// if (arr[0].is_legal == 1) {
// var obj = {
// type: "legal",
// texts: that.$t("account.laccount")
// };
// arr2.push(obj);
// }
if (arr[0].is_micro == 1) {
var obj = {
type: "micro",
texts: that.$t("account.letransaction")
};
arr2.push(obj);
}
if (arr[0].is_lever == 1) {
var obj = {
type: "lever",
texts: that.$t("account.taccount")
};
arr2.push(obj);
}
if (arr[0].is_match == 1) {
var obj = {
type: "change",
texts: that.$t("usercenter.change")
};
arr2.push(obj);
}
that.accountList = arr2;
that.currencyList = arr;
console.log('账户列表', arr2, arr)
that.value1 = arr2[0].texts;
that.value2 = arr2[1].texts;
if (arr2[0].type == "lever") {
that.transferBalance = arr[0].wallet.lever_balance;
} else if (arr2[0].type == "micro") {
that.transferBalance = arr[0].wallet.micro_balance;
} else if (arr2[0].type == "change") {
that.transferBalance = arr[0].wallet.change_balance;
} else if (arr2[0].type == "legal") {
that.transferBalance = arr[0].wallet.legal_balance;
}
loadCurrency = true;
}
} else {
return;
}
}).catch(error => {
console.log(error);
});
},
selectOne(command) {
},
selectTwo(command) {
},
computeBalance() {
if (loadedCoin && loadCurrency) {
let baseCoin = this.coins[this.coinIndex];
if (!baseCoin) {
return;
}
this.number = '';
switch (this.value1) {
case 'legal':
//法币
this.transferBalance = baseCoin.legal_balance;
break;
case 'micro':
//秒合约
this.transferBalance = baseCoin.micro_balance;
break;
case 'lever':
//合约
this.transferBalance = baseCoin.lever_balance;
break;
case 'change':
this.transferBalance = baseCoin.change_balance;
break;
}
}
},
changeCoin(e) {
this.coinIndex = e;
},
}
};
</script>
<style lang="scss">
.el-select-dropdown__item.selected {
// color: #00a4d8 !important;
// font-weight: normal !important;
}
.el-loading-spinner .el-loading-text {
color: #00a4d8 !important;
}
.el-loading-spinner i{
color: #00a4d8 !important;
}
</style>
<style lang='scss' scoped>
.choose-wrap {
padding-top: 50px;
width: 70%;
margin: 0 auto;
::v-deep {
.el-input__inner {
background: #000 !important;
}
.el-input-group__append {
background: #000;
border-color: #4d5373;
}
}
> div {
margin-bottom: 40px;
*:first-child {
width: 30%;
}
*:last-child {
flex: 1;
}
}
}
.el-dropdown {
cursor: pointer;
}
#transfer-legal {
padding: 0 30px;
color: #c7cce6;
> .title {
padding: 20px 0;
font-size: 24px;
color: #61688a;
}
> .coins {
display: flex;
justify-content: center;
li {
margin-right: 20px;
padding: 5px 20px;
color: #fff;
background: #234165;
}
.active {
background: #00a4d8;
}
}
> .types {
margin: 30px 0;
// width: 400px;
height: 80px;
display: flex;
justify-content: space-between;
line-height: 40px;
.types-r {
display: flex;
}
img {
margin: 25px;
width: 30px;
height: 30px;
}
}
.number {
margin: 30px 0 0;
// width: 430px;
line-height: 40px;
input {
border: none;
color: #f2f5ff;
background: none;
line-height: 40px;
width: 800px;
border-bottom: 2px solid #ccc;
}
.all {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #ccc;
}
}
.transfer {
display: block;
margin: 0 auto;
line-height: 40px;
width: 50%;
background: #00a4d8;
color: #fff;
border: none;
border-radius: 5px;
}
}
</style>
src/view/accounts/withdraw_address.vue
+220
View File
@@ -0,0 +1,220 @@
<template>
<div class="box">
<indexHeader></indexHeader>
<div class="account" style="padding-top: 48px">
<div class="topcontent ft20 ">
<span class="white"><span class="baseColor">{{$t('account.assets')}}></span> {{$t('account.upaddress')}}</span>
</div>
<div class="content">
<div class="con_box">
<div class="contentBK fColor1 pdlr20 pdtb20 ft12">
<div class="flex alcenter">
<span class="w10 mr20">{{$t('market.currency')}}</span>
<span class="flex1 mr20">{{$t('account.whaddress')}}</span>
<span class="flex1">{{$t('set.remarks')}}</span>
</div>
<div class="mt10">
<div class="flex alcenter">
<select name="" id="" class="w10 mr20 " v-model="addId" @change='setCoin'>
<option value="$t('market.currency')">{{$t('market.currency')}}</option>
<option :value="item.id" v-for="(item,index) in coins" :key="index" >{{item.name}}</option>
</select>
<input type="text" class="flex1 mr20" :placeholder="$t('wAddress.enterAddress')" v-model="address">
<input type="text" class="flex1" :placeholder="$t('wAddress.enterMark')" v-model="notes">
</div>
<div class="add">
<div class="baseBtn" @click="addAddress">{{$t('set.add')}}</div>
</div>
</div>
</div>
</div>
<div class="con_box mt15">
<div class="account_title ttBk white flex">
<div class="ml20">{{$t('wAddress.addressList')}}</div>
</div>
<div class="contentBK fColor1 pdlr20 pdtb20 ft12">
<div class="flex alcenter">
<span class="flex1">{{$t('market.currency')}}</span>
<span class="flex1 tc">{{$t('account.whaddress')}}</span>
<span class="flex1 tc">{{$t('set.remarks')}}</span>
<span class="flex1 tr">{{$t('do')}}</span>
</div>
<div class="mt10" v-for="(item,index) in list" :key="index">
<div class="flex alcenter">
<span class="flex1">
{{nowCoin}}
</span>
<span class="flex1">{{item.address}}</span>
<span class="flex1">{{item.notes}}</span>
<span class="flex1" @click="delAddress(item.id,index)">{{$t('wAddress.del')}}</span>
</div>
</div>
<div class="none color1 tc" v-if="!list.length" style="padding: 20px 0">
{{$t('tpc.nodata')}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
export default {
name: "finanrec",
data() {
return {
token: "",
lang: "",
coins:[],
nowCoin:'',
list:[],
address:'',
notes:'',
addId:this.$t('market.currency')
};
},
components: {
indexHeader
},
created() {
this.getCoins();
},
methods: {
getCoins() {
this.token = localStorage.getItem("token") || "";
this.$http({
url: "/api/wallet/currencylist",
headers: { Authorization: this.token }
}).then(res => {
if(res.data.type == 'ok'&&res.data.message.length != 0){
this.coins = res.data.message;
}
});
},
setCoin(e){
if(this.addId != this.$t('market.currency')){
let index = e.target.selectedIndex;
let opt = e.target.querySelectorAll('option')[index];
this.nowCoin = opt.text;
this.getList()
}
},
getList() {
this.token = localStorage.getItem("token") || "";
this.$http({
url: "/api/wallet/get_address",
method:'post',
data:{currency:this.addId},
headers: { Authorization: this.token }
}).then(res => {
if(res.data.type == 'ok'){
this.list = res.data.message;
} else {
this.list = []
}
});
},
delAddress(id,index){
this.$http({
url: "/api/wallet/deladdress",
method:'post',
data:{address_id:id},
headers: { Authorization: this.token }
}).then(res => {
if(res.data.type == 'ok'){
this.list.splice(index,1)
layer.msg(res.data.message);
}
});
},
addAddress(){
if(this.addId == this.$t('market.currency')) {
layer.msg(this.$t('caiwu.selCu'));
return;
}
if(this.address == ''){
layer.msg(this.$t('wAddress.enterAddress'));return;
}
else {
this.$http({
url:'/api/wallet/addaddress',
method:'post',
headers:{ 'Authorization': this.token },
data:{currency_id:this.addId,address:this.address,notes:this.notes}
}).then(res => {
if(res.data.type == 'ok'){
layer.msg(res.data.message);
this.address = '';
this.notes = '';
this.getList()
}
})
}
}
}
};
</script>
<style lang="scss" scoped>
.box .account {
width: 75rem;
margin: 0 auto 82px;
margin-top: 30px;
}
.topcontent {
padding: 22px 30px;
margin-bottom: 20px;
background-color: #1a2330;
border-radius: 5px;
}
.account_title {
padding: 15px 20px;
}
select {
background-color: transparent;
padding: 10px;
color: #c7cce6;
font-size: 18px;
border-radius: 3px;
border: 1px solid #4e5b85;
}
select.ft14 {
font-size: 14px;
}
select > option {
padding: 10px 0;
background-color: transparent;
}
input {
padding: 10px;
border: 1px solid #4e5b85;
font-size: 18px;
color: #c7cce6;
border-radius: 3px;
background-color: transparent;
outline: none;
}
.add {
text-align: right;
margin-top: 20px;
}
.add .baseBtn {
width: 200px;
}
</style>
// WEBPACK FOOTER //
// src/view/accounts/withdraw_address.vue
src/view/assets/Portfolio.vue
+201
View File
@@ -0,0 +1,201 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.投資組合')}}</div>
<div class="column1">{{$t('zc.申購金額')}}</div>
<div class="column1">{{$t('zc.當前收益')}}</div>
<div class="column2 dispalynone">{{$t('zc.開始時間')}}</div>
<div class="column3 dispalynone">{{$t('zc.結束時間')}}</div>
<div class="column5">{{$t('zc.狀態')}}</div>
<div class="column6 dispalynone">{{$t('zc.投資組合')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
{{item.name || '--'}}
</div>
<div class="column0 sdsd" >
{{ item.amount }}
</div>
<div class="column0 sdsd" >
{{ item.totalincome }}
</div>
<div class="column0 dispalynone">
{{item.startdate}}
</div>
<div class="column0 dispalynone">
{{item.expire}}
</div>
<div class="column0">
{{$t('zc.已完成')}}
</div>
<div class="column0 dispalynone">
{{item.invest}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total: 0
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=7&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
console.log('6666', t.data)
if ("ok" == t.data.type) {
this.recData = t.data.message.data
this.total = t.data.message.total
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
// text-align: left;
}
.data-list .column1 {
// width: 10%;
// padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
font-size: 13px;
text-align: center;
}
// .titles>div:first-child,
// .data-list .item>div:first-child {
// flex: 2;
// }
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
.lh-fx {
color: #ff4834 !important;
}
.sdsd {
color: #00f0ff !important;
}
@media (max-width: 600px) {
.dispalynone{
display: none;
}
}
</style>
src/view/assets/aiRecord.vue
+219
View File
@@ -0,0 +1,219 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.幣種')}}</div>
<div class="column1">{{$t('zc.機器人ID')}}</div>
<div class="column1 dispalynone">{{$t('zc.運行時長')}}</div>
<div class="column2">{{$t('zc.投入金額')}}</div>
<div class="column3 dispalynone">{{$t('zc.投資')}}</div>
<div class="column5">{{$t('zc.總收益')}}</div>
<div class="column6">{{$t('zc.網格數量')}}</div>
<div class="column6">{{$t('zc.服務費')}}</div>
<div class="column6 dispalynone">{{$t('zc.委託時間')}}</div>
<div class="column6 dispalynone">{{$t('zc.結束時間')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
{{item.name || '--'}}
</div>
<div class="column0">
AI_{{item.id}}
</div>
<div class="column0 dispalynone">
{{item.day}}h
</div>
<div class="column0">
{{item.amount}}
</div>
<div class="column0 dispalynone">
{{((item.totalincome / item.amount) * 100).toFixed(2)}}%
</div>
<div class="column0">
{{item.totalincome}}
</div>
<div class="column0">
{{item.number}}
</div>
<div class="column0">
{{item.commission}}
</div>
<div class="column0 dispalynone">
{{item.startdate}}
</div>
<div class="column0 dispalynone">
{{item.expire}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total: 0
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=5&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
console.log('t.data5', t.data.message)
if ("ok" == t.data.type) {
this.recData = t.data.message.data
this.total = t.data.message.total
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
// text-align: left;
}
.data-list .column1 {
// width: 10%;
// padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
font-size: 13px;
text-align: center;
}
// .titles>div:first-child,
// .data-list .item>div:first-child {
// flex: 2;
// }
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
.lh-fx {
color: #ff4834 !important;
}
.sdsd {
color: #00f0ff !important;
}
@media (max-width: 600px) {
.dispalynone {
display: none;
}
.ccjl .data-list .item {
height: 80px;
font-size: 12px;
}
}
</style>
src/view/assets/assetAccount.vue
+905
View File
@@ -0,0 +1,905 @@
<template>
<div class="spotAccount">
<div class="dfd left-section ">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">{{$t('zc.資產帳户估值')}} <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con">
<span class="balance white-color-text">$393,735.32</span><span class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<g id="Design tools / horizontal distribute center">
<path id="Vector"
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
stroke="white" stroke-width="0.1"></path>
</g>
</svg>
</div><span class="name">{{$t('zc.充值')}}</span>
</div>
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="12" height="12"
viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path id="Vector"
d="M2.14052 11.1407C2.45832 11.4585 2.74726 11.6008 3.00734 11.5678C3.26741 11.5347 3.55868 11.3569 3.88115 11.0345L4.57372 10.3419C4.88886 10.0267 5.22605 9.69334 5.58528 9.34167C5.94451 8.99001 6.29269 8.64561 6.62981 8.30849L7.43232 7.50598C7.71081 7.22749 7.96089 7.03417 8.18253 6.92602C8.40418 6.81787 8.61349 6.86961 8.81046 7.08124C8.9618 7.23257 9.14517 7.40862 9.36058 7.60937C9.57599 7.81013 9.76315 7.98995 9.92205 8.14885C10.1869 8.41369 10.4249 8.51242 10.636 8.44506C10.8471 8.37769 10.9756 8.14706 11.0214 7.75316C11.0597 7.3517 11.1061 6.87777 11.1607 6.33137C11.2152 5.78497 11.2696 5.2274 11.3238 4.65866C11.3781 4.08992 11.4324 3.52863 11.4868 2.97478C11.5413 2.42093 11.5912 1.93217 11.6365 1.50848C11.6748 1.10701 11.6144 0.823107 11.4554 0.656759C11.2964 0.490411 11.0272 0.422824 10.648 0.453997C10.2612 0.477604 9.80571 0.513144 9.28153 0.560618C8.75736 0.608092 8.21463 0.658992 7.65333 0.71332C7.09204 0.767646 6.53813 0.818368 5.99162 0.865485C5.4451 0.912602 4.95621 0.955055 4.52496 0.992844C4.05658 1.03749 3.76454 1.16685 3.64882 1.38093C3.53311 1.59501 3.61145 1.83825 3.88385 2.11065L4.1676 2.3944C4.27353 2.50034 4.38142 2.61188 4.49125 2.72905C4.60109 2.84621 4.70903 2.96149 4.81509 3.07487C4.92114 3.18825 5.01578 3.28656 5.09901 3.36979C5.28085 3.56628 5.3414 3.74409 5.28065 3.90321C5.2199 4.06232 5.09425 4.23715 4.9037 4.4277C4.69116 4.64024 4.41078 4.91684 4.06254 5.25751C3.7143 5.59818 3.3533 5.9554 2.97953 6.32917C2.60576 6.70294 2.24109 7.06383 1.88553 7.41183C1.52996 7.75983 1.24224 8.04376 1.02238 8.26362C0.927103 8.3589 0.835731 8.4654 0.748262 8.58314C0.660792 8.70088 0.603291 8.83026 0.57576 8.97129C0.548228 9.11232 0.558054 9.2614 0.605237 9.41851C0.652421 9.57563 0.759247 9.73742 0.925714 9.90389C1.13001 10.1082 1.32491 10.3068 1.51042 10.4996C1.69592 10.6924 1.90595 10.9061 2.14052 11.1407Z">
</path>
<defs>
<linearGradient id="paint0_linear_5342_33659" x1="11.4359" y1="0.63711" x2="1.53644" y2="10.5366"
gradientUnits="userSpaceOnUse">
<stop offset="0.497917" stop-color="#6491E9"></stop>
<stop offset="1" stop-color="#556DEA"></stop>
</linearGradient>
</defs>
</svg>
</div><span class="name">{{$t('zc.提幣')}}</span>
</div>
<div class="operate-btn">{{$t('zc.劃轉')}}</div>
</div>
</div>
<div class="sxtj">
<el-input :placeholder="$t('zc.搜索')" size="small" prefix-icon="el-icon-search" v-model="input1">
</el-input>
<div>
<el-checkbox v-model="checked">{{$t('zc.隱藏金額 < 1USD的幣種')}}</el-checkbox>
</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column1">{{$t('zc.幣種')}}</div>
<div class="column2">{{$t('zc.權益')}}</div>
<div class="column3">{{$t('zc.佔比')}}</div>
<div class="column3">{{$t('zc.凍結')}}</div>
<div class="column4">{{$t('zc.操作')}}</div>
</div>
<div class="list-wrap">
<div class="item">
<div class="column1"><img src="/public/1e8deac3f3e547629a8bf2b466dc0359.png">
<div>
<div>USDC</div>
<div class="brief">Tether</div>
</div>
</div>
<div class="column2">
<div>5,043,577.555567</div>
<div>$ 5,043,577.555567</div>
</div>
<div class="column3">96.33 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/45f85cab483d49ceb4193f6a7849e771.png">
<div>
<div>EOS</div>
<div class="brief">Enterprise</div>
</div>
</div>
<div class="column2">
<div>2,078.416884</div>
<div>$ 1,354.712124</div>
</div>
<div class="column3">0.03 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/de59bcf2bcde4b32b9bcbce52a2603cf.png">
<div>
<div>ETH</div>
<div class="brief">Ethereum</div>
</div>
</div>
<div class="column2">
<div>16.57092</div>
<div>$ 27,933.765553</div>
</div>
<div class="column3">0.53 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/d081c44d109042fcb7e47ce12ef21031.png">
<div>
<div>BTC</div>
<div class="brief">Bitcoin</div>
</div>
</div>
<div class="column2">
<div>1.79385</div>
<div>$ 162,648.146299</div>
</div>
<div class="column3">3.11 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/04a2e7c7327d49e5a5a8eaa554c55fa7.jpg">
<div>
<div>MX</div>
<div class="brief"></div>
</div>
</div>
<div class="column2">
<div>0.203875</div>
<div>$ 0.568831</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/56767c24c84a4b96bf78e046b44b1af5.png">
<div>
<div>TRX</div>
<div class="brief">TRON</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/c92630ee58c44767869b3f6314ca8174.png">
<div>
<div>BCH</div>
<div class="brief">Bitcoin Cash</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/03501dec465d4a38829b3448abba16fe.png">
<div>
<div>XRP</div>
<div class="brief">Ripple</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/3f0f8ee875804ee68bce28ec8e087f6f.png">
<div>
<div>LTC</div>
<div class="brief">LTC</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/5fb720b4fbdf4583b520c3dada6eedda.png">
<div>
<div>YFI</div>
<div class="brief">Yearn</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/5b69d56aa08c4150bdfecbc0d197b9bd.png">
<div>
<div>DAI</div>
<div class="brief">MakerDAO</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/1a274ad9e83441c18967816aa315409e.jpg">
<div>
<div>USDC</div>
<div class="brief">USDCoin </div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/74edb1865df74515a2f3175180beea9c.png">
<div>
<div>DOGE</div>
<div class="brief">Dogecoin</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/74dd7824ca4e43fa8c5635cfea1f4c86.png">
<div>
<div>FIL</div>
<div class="brief">Filecoin</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/uploads/00f2841a86fd4dcba903499d955c694a.png">
<div>
<div>DOT</div>
<div class="brief">Polkadot</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/03ac33df0f9c44168043d79d4169a74b.png">
<div>
<div>ADA</div>
<div class="brief">Cardano</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/5ecc27b666b84978a5f3e4036999d495.png">
<div>
<div>SOL</div>
<div class="brief">Solana</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/a987c23f883043719fc556250a2f32ac.png">
<div>
<div>LUNA</div>
<div class="brief">Terra</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/a78fd1606aef4bdd937450504f6c87cb.png">
<div>
<div>UNI</div>
<div class="brief">Uniswap</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
<div class="item">
<div class="column1"><img src="/public/394ab63435394fb8a50e6c21fcf38f90.png">
<div>
<div>DYDX</div>
<div class="brief">Dydx</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="rklkl">
<record></record>
</div>
</div>
</div>
</template>
<script>
import record from '@/view/assets/record'
export default {
name: "assetAccount",
components: {
record,
},
data() {
return {
};
},
created() {
this.$http({
url: "/api/wallet/list?type=0",
method: "get",
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if (t.data.type == 'ok') {
let data = t.data.message
console.log('data', data)
} else {
}
})
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.spotAccount {
display: flex;
color: #fff;
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.section-1 {
width: 830px;
// height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.section-1 h3 {
display: flex;
align-items: center;
}
.section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
}
.section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.section-1 .top-info .left-con .unit {
font-size: 14px;
}
.section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.section-1 .chart-title .left-con {
font-size: 16px;
}
.section-1 .chart-title .right-con {
display: flex;
}
.section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
overflow-y: auto;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column1 {
width: 20%;
text-align: left;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .item .column1 {
display: flex;
align-items: center;
}
.left-section .data-list .column1 img {
width: 34px;
height: 34px;
}
.left-section .data-list .item .column1>div {
margin-left: 10px;
text-align: left;
}
.left-section .data-list .item .column1 .brief {
color: #888;
font-size: 12px;
}
.left-section .data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .item .column2>div:nth-of-type(2) {
color: #888;
font-size: 12px;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .column4 .sub-list {
position: absolute;
top: 60px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.left-section .data-list .column4:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.left-section .data-list .column4 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.left-section .data-list .column4 .sub-list .sub-title:hover {
background: #1a1b24;
}
}
</style>
src/view/assets/borrowingRecord.vue
+256
View File
@@ -0,0 +1,256 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="left-con font24">
<div>
<div class="white-color-text">{{$t('zc.已借金額')}}</div>
<div class="white-color-text">{{info.amount }}</div>
</div>
<div>
<div class="white-color-text">{{$t('zc.剩餘還幣數量')}}</div>
<div class="white-color-text">{{info.remainamount}}</div>
</div>
<div>
<div class="white-color-text">{{$t('zc.已還')}}</div>
<div class="hasreturn">
<span class="white-color-text">{{info.repaid}}%</span>
</div>
</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0 dispalynone">{{$t('zc.訂單號')}}</div>
<div class="column1 dispalynone">{{$t('zc.借款時間')}}</div>
<div class="column2">{{$t('zc.借幣數量')}}</div>
<div class="column3">{{$t('zc.驗資金額')}}</div>
<div class="column5 dispalynone">{{$t('zc.還款時間')}}</div>
<div class="column6">{{$t('zc.日幣息率')}}</div>
<div class="column6">{{$t('zc.當前幣息')}}</div>
<div class="column6">{{$t('zc.總服務費')}}</div>
<div class="column6">{{$t('zc.應還總額')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0 dispalynone">
{{item.htcode}}
</div>
<div class="column0 dispalynone">
{{item.create_time}}
</div>
<div class="column0">
{{item.amount}}
</div>
<div class="column0">
{{item.yamount}}
</div>
<div class="column0 dispalynone">
{{item.end_time||'--'}}
</div>
<div class="column0">
{{item.lv_perday}}
</div>
<div class="column0">
{{item.lixi}}
</div>
<div class="column0">
{{item.fwamount}}
</div>
<div class="column0">
{{item.total}}
</div>
<!-- <span>{{item.status == 1?$t("other.审核中"):item.status==2?$t("other.审核完成"):item.status==3?$t("other.审核失败"):''}}</span> -->
<span class="orderStatus" style="color: rgb(219, 158, 0);" v-if="item.status == 1">{{$t("other.审核中")}}</span>
<span class="orderStatus" style="color: #00f0ff ;" v-if="item.status == 2"> {{$t("other.审核完成")}}</span>
<span class="orderStatus" style="color: red;" v-if="item.status == 3">{{$t("other.审核失败")}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total: 0,
info: {
amount: 0,
remainamount: 0,
repaid: 0,
}
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=3&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
console.log('t.data', t.data)
if ("ok" == t.data.type) {
this.recData = t.data.message.data
this.total = t.data.message.total
this.info = t.data.message.info
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
// text-align: left;
}
.data-list .column1 {
// width: 10%;
// padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
font-size: 13px;
text-align: center;
}
.titles>div:first-child,
.data-list .item>div:first-child {
flex: 2;
}
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
.left-con {
display: flex;
align-items: center;
font-size: 24px;
margin: 20px 0;
}
.left-con>div {
margin-left: 20px;
}
}
@media (max-width: 600px) {
.ccjl .left-con{
display: flex
;
align-items: center;
font-size: 14px;
margin: 20px 0;
}
.ccjl .left-con > div {
margin-left: 15px;
}
.ccjl .titles > div, .ccjl .data-list .item > div{
flex: 1;
font-size: 12px;
text-align: center;
}
.dispalynone{
display: none;
}
}
</style>
src/view/assets/coin.vue
+202
View File
@@ -0,0 +1,202 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.幣種')}}</div>
<div class="column1 dispalynone">{{$t('zc.方向')}}</div>
<div class="column1 dispalynone">{{$t('zc.委托时间')}}</div>
<div class="column2">{{$t('zc.委托总量')}}</div>
<div class="column3">{{$t('zc.委托价格')}}</div>
<div class="column5">{{$t('zc.手续费')}}</div>
<div class="column6">{{$t('zc.成交均价')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
{{item.symbol || '--'}}
</div>
<div class="column0" :class="[item.type == 1?'sdsd':'lh-fx']">
{{ 1 == item.type ? $t("entrust.inbuy") : $t("entrust.outsell") }}
</div>
<div class="column0 dispalynone">
{{item.created_at}}
</div>
<div class="column0">
{{Number(item.trade_amount) }}
</div>
<div class="column0">
{{Number(item.target_price) }}
</div>
<div class="column0">
0
</div>
<div class="column0">
{{Number(item.trade_price) }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total: 0
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=6&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
console.log('6666',t)
if ("ok" == t.data.type) {
this.recData = t.data.message
this.total = this.recData.length
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
// text-align: left;
}
.data-list .column1 {
// width: 10%;
// padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
font-size: 13px;
text-align: center;
}
// .titles>div:first-child,
// .data-list .item>div:first-child {
// flex: 2;
// }
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
.lh-fx {
color: #ff4834 !important;
}
.sdsd {
color: #00f0ff !important;
}
@media (max-width: 600px) {
.dispalynone{
display: none;
}
}
</style>
src/view/assets/contract.vue
+220
View File
@@ -0,0 +1,220 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.幣種')}}</div>
<div class="column1 dispalynone">{{$t('zc.方向')}}</div>
<div class="column2 dispalynone">{{$t('zc.委托时间')}}</div>
<div class="column3">{{$t('zc.委托总数量')}}</div>
<div class="column5">{{$t('zc.委托价格')}}</div>
<div class="column6">{{$t('zc.成交价格')}}</div>
<div class="column6 dispalynone">{{$t('zc.初始保证金')}}</div>
<div class="column6">{{$t('zc.类型')}}</div>
<!-- <div class="column6">{{$t('zc.最大持倉量')}}</div> -->
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
{{item.symbol}}
</div>
<div class="column0" :class="[item.type == 1?'sdsd':'lh-fx']">
{{ item.type==2 ?$t("entrust.outsell") : $t("entrust.inbuy") }}
</div>
<div class="column0 dispalynone">
{{item.transaction_time}}
</div>
<div class="column0">
{{item.share}}
</div>
<div class="column0">
{{item.origin_price}}
</div>
<div class="column0">
{{Number(item.update_price)}}
</div>
<div class="column0 dispalynone">
{{Number(item.caution_money)}}
</div>
<div class="column0">
<div class="lbx-nul">{{item.status==0? $t("zjde208"): $t("zjde209")}}</div>
</div>
<!-- <div class="column0">
{{item.lixi}}
</div>
<div class="column0">
{{item.fwamount}}
</div>
<div class="column0">
{{item.total}}
</div> -->
<!-- <span>{{item.status == 1?$t("other.审核中"):item.status==2?$t("other.审核完成"):item.status==3?$t("other.审核失败"):''}}</span> -->
<!-- <span class="orderStatus" style="color: rgb(219, 158, 0);" v-if="item.status == 1">{{$t("other.审核中")}}</span>
<span class="orderStatus" style="color: #00f0ff ;" v-if="item.status == 2"> {{$t("other.审核完成")}}</span>
<span class="orderStatus" style="color: red;" v-if="item.status == 3">{{$t("other.审核失败")}}</span> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total: 0
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=4&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
console.log('t.data',t.data.message.message)
if ("ok" == t.data.type) {
this.recData = t.data.message.message.data
this.total = t.data.message.message.total
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
// text-align: left;
}
.data-list .column1 {
// width: 10%;
// padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
font-size: 13px;
text-align: center;
}
// .titles>div:first-child,
// .data-list .item>div:first-child {
// flex: 2;
// }
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
.lh-fx {
color: #ff4834 !important;
}
.sdsd {
color: #00f0ff !important;
}
@media (max-width: 600px) {
.dispalynone{
display: none;
}
.ccjl .data-list .item > div{
font-size: 12px;
}
}
</style>
src/view/assets/contractAccount.vue
+498
View File
@@ -0,0 +1,498 @@
<template>
<div class="spotAccount">
<div class="dfd left-section ">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">{{$t('zc.合约帳户估值')}} <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con"><span class="balance white-color-text">${{total}}</span><span class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<g id="Design tools / horizontal distribute center">
<path id="Vector"
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
stroke="white" stroke-width="0.1"></path>
</g>
</svg>
</div><span class="name" @click="gopages('deposit')">{{$t('zc.充值')}}</span>
</div>
<div class="operate-btn" @click="gopages('withdrawDeposit')">{{$t('zc.提现')}}</div>
<div class="operate-btn" @click="gopages('orderTransfer')">{{$t('zc.劃轉')}}</div>
</div>
</div>
<div class="sxtj">
<el-input :placeholder="$t('zc.搜索')" size="small" prefix-icon="el-icon-search" v-model="input1" @input="sousuo">
</el-input>
<div>
<el-checkbox @change="changeCheckbox" v-model="checked">{{$t('zc.隱藏金額 < 1USD的幣種')}} </el-checkbox>
</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column1">{{$t('zc.幣種')}}</div>
<div class="column2">{{$t('zc.權益')}}</div>
<div class="column3">{{$t('zc.佔比')}}</div>
<div class="column3">{{$t('zc.凍結')}}</div>
<div class="column4">{{$t('zc.操作')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="column1">
<img :src="$utils.isBaseUrl(item.currency_logo)">
<div>
<div>{{item.currency_name}}</div>
<div class="brief">{{item.currency_type}}</div>
</div>
</div>
<div class="column2">
<div>{{item.lever_balance}}</div>
<div>$ {{item.usdt_price *item.lever_balance }}</div>
</div>
<div class="column3">{{item.totle_scale}} </div>
<div class="column3">{{item.lock_change_balance|| "0.00"}}</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top" @click="gopages('secondDealCenter')">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top" @click="gopages('orderTransfer')">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="rklkl">
<record value2="3"></record>
</div>
</div>
</div>
</template>
<script>
import record from '@/view/assets/record'
export default {
name: "change",
components: {
record,
},
data() {
return {
pageData: {},
total: 0,
list: [],
input1: '',
list2: [],
checked:false
};
},
created() {
this.$http({
url: "/api/wallet/list",
method: "post",
data: {
type:2
},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if (t.data.type == 'ok') {
let data = t.data.message
this.pageData = data
this.list2 = data.wallet.balance
this.list = data.wallet.balance
this.total = data.wallet.usdt_totle
console.log('data', data)
} else {}
})
},
methods: {
gopages(name) {
this.$router.push({
name: name
});
},
changeCheckbox(ee){
let data = this.list2.filter(item=>item.currency_name.includes(this.input1) && (ee?Number(item.usdt_price *item.change_balance)>1:true))
this.list = data
},
sousuo(ee) {
let data = this.list2.filter(item=>item.currency_name.includes(ee) && (this.checked?Number(item.usdt_price *item.change_balance)>1:true))
this.list = data
},
},
};
</script>
<style lang="scss" scoped>
.spotAccount {
display: flex;
color: #fff;
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.section-1 {
width: 830px;
// height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.section-1 h3 {
display: flex;
align-items: center;
}
.section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
}
.section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.section-1 .top-info .left-con .unit {
font-size: 14px;
}
.section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.section-1 .chart-title .left-con {
font-size: 16px;
}
.section-1 .chart-title .right-con {
display: flex;
}
.section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
overflow-y: auto;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column1 {
width: 20%;
text-align: left;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .item .column1 {
display: flex;
align-items: center;
}
.left-section .data-list .column1 img {
width: 34px;
height: 34px;
}
.left-section .data-list .item .column1>div {
margin-left: 10px;
text-align: left;
}
.left-section .data-list .item .column1 .brief {
color: #888;
font-size: 12px;
}
.left-section .data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .item .column2>div:nth-of-type(2) {
color: #888;
font-size: 12px;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .column4 .sub-list {
position: absolute;
top: 60px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.left-section .data-list .column4:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.left-section .data-list .column4 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.left-section .data-list .column4 .sub-list .sub-title:hover {
background: #1a1b24;
}
}
@media (max-width: 600px) {
.spotAccount .section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 10px;
width: 90vw;
margin-top: 15px;
}
.spotAccount .section-1 h3 {
display: flex
;
align-items: center;
font-size: 16px;
}
.spotAccount .section-1 .top-info {
display: flex
;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
flex-direction: column;
}
.spotAccount .section-1 .top-info .right-con{
display: flex
;
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
.spotAccount .sxtj {
margin: 20px 0;
display: flex
;
justify-content: space-between;
flex-direction: column;
}
.el-input--small .el-input__inner{
height: 32px;
line-height: 32px;
width: 100%;
}
.spotAccount .left-section .data-list .column1 img{
width: 24px;
height: 24px;
}
.spotAccount .left-section .data-list .item .column1 > div div ,.spotAccount .left-section .data-list .column2 div {
font-size: 12px;
}
.spotAccount .left-section .data-list .column3{
font-size: 12px;
}
.spotAccount .left-section .data-list .column4{
width: 12%;
cursor: pointer;
position: relative;
}
}
</style>
src/view/assets/depositRecord.vue
+173
View File
@@ -0,0 +1,173 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.發生時間')}}</div>
<div class="column1">{{$t('zc.幣種')}}</div>
<!-- <div class="column2">{{$t('zc.帳單類型')}}</div> -->
<div class="column3">{{$t('zc.數量')}}</div>
<div class="column5">{{$t('zc.手續費')}}</div>
<div class="column6">{{$t('zc.狀態')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
<!-- <div>13:31</div> -->
<div>{{item.created_at}}</div>
</div>
<div class="column1">
<div>
<div>{{item.name}}</div>
<div class="brief"></div>
</div>
</div>
<!-- <div class="column2">{{$t('zc.幣幣')}}</div> -->
<div class="column3 font-win">+{{item.amount || "0.00"|toFixeds}}</div>
<div class="column5">-</div>
<div class="column6">
<!-- <span>{{item.status == 1?$t("other.审核中"):item.status==2?$t("other.审核完成"):item.status==3?$t("other.审核失败"):''}}</span> -->
<span class="orderStatus" style="color: rgb(219, 158, 0);" v-if="item.status == 1" >{{$t("other.审核中")}}</span>
<span class="orderStatus" style="color: #00f0ff ;" v-if="item.status == 2"> {{$t("other.审核完成")}}</span>
<span class="orderStatus" style="color: red;" v-if="item.status == 3" >{{$t("other.审核失败")}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total:0
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=1&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if("ok" == t.data.type){
this.recData = t.data.message.data
this.total = t.data.message.total
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
text-align: left;
}
.data-list .column1 {
// width: 10%;
padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div{
flex: 1;
}
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
@media screen and (max-width: 800px) {
.ccjl .data-list .item {
height: 80px;
font-size: 12px;
}
}
</style>
src/view/assets/fiatAccount.vue
+526
View File
@@ -0,0 +1,526 @@
<template>
<div class="assets-page change">
<!-- <div class="tabs-box tabs-box5">
<el-tabs v-model="tabsName" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in tabsList" :label="item.text" :name="item.type"></el-tab-pane>
</el-tabs>
</div> -->
<div class="fiatAccount box">
<div class="b-l">
<section class="section-1">
<h3 class="white-color-text">{{$t('zc.法幣賬户')}} <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info" style="margin-top: 10px;">
<div class="left-con"><span class="balance white-color-text">$0</span><span
class="unit">USD</span>
</div>
<!-- <div class="right-con">
<div class="operate-btn">{{$t('zc.我要賣')}}</div>
<div class="operate-btn">{{$t('zc.我要買')}}</div>
<div class="operate-btn">{{$t('zc.法幣兑換')}}</div>
<div class="operate-btn">{{$t('zc.財務記錄')}}</div>
</div> -->
</div>
</section>
</div>
<div class="right-wrap">
<h3 class="white-color-text">{{$t('zc.法幣資產分佈')}}</h3>
<div class="data-list">
<div class="list-wrap">
<div class="item">
<div class="column1"><img src="/uploads/subp/3442005124c94bd0b577fc7dd83ee084.png">
</div>
<div class="column2">
<div>KRW</div>
</div>
<div class="column3">
<div class="ellipsis">₩ 0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 100%;">
<record></record>
</div>
</div>
</template>
<script>
import ECharts from 'vue-echarts'
import record from '@/view/assets/record'
export default {
name: "fiatAccount",
components: {
record,
'v-chart': ECharts
},
data() {
return {
};
},
created() {
},
methods: {
handleClick() {
},
selectTime(type) {
this.timeIndex = type
}
},
};
</script>
<style lang="scss" scoped>
.change {
color: #fff;
}
.fiatAccount {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.assets-page .section-1 {
width: 830px;
height: auto;
margin-bottom: 30px;
font-size: 18px;
border: none;
}
.assets-page .section-1{
flex: none;
border-radius: 12px;
border: none;
padding: 20px 30px;
}
.assets-page .section-1 h3 {
display: flex;
align-items: center;
}
.assets-page .section-1 .top-info {
display: flex;
// justify-content: space-between;
// align-items: center;
align-items: inherit;
flex-direction: column;
}
.assets-page .section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.assets-page .section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.assets-page .section-1 .top-info .left-con .unit {
font-size: 14px;
}
.assets-page .section-1 .top-info .right-con {
display: flex;
justify-content: flex-start;
}
.assets-page .section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-top: 30px;
}
.assets-page .section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.assets-page .section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.assets-page .section-1 .chart-title .left-con {
font-size: 16px;
}
.assets-page .section-1 .chart-title .right-con {
display: flex;
}
.assets-page .section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.assets-page .section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.assets-page section.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.assets-page .section-2 .data {
display: flex;
align-items: center;
}
.assets-page .section-2 .data-left {
flex: none;
display: flex;
flex-direction: column;
width: 170px;
height: 347px;
margin-right: 30px;
}
.assets-page .section-2 .data-left h3 {
height: 30px;
line-height: 30px;
margin-bottom: 74px;
}
.assets-page .section-2 .data-right {
width: 570px;
height: 327px;
text-align: center;
}
.assets-page .section-2 .data-right .titles {
display: flex;
align-items: center;
margin-bottom: 30px;
color: #5e5e7a;
font-size: 12px;
}
.assets-page .section-2 .data-right .column1 {
width: 20%;
}
.assets-page .section-2 .data-right .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.assets-page .section-2 .data-right .item-coin .column1 {
background: radial-gradient(102.27% 102.27% at 83.82% 87.06%, #F09464 0%, #F7BE94 .01%, #F09464 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.assets-page .section-2 .data-right .column2 {
width: 30%;
}
.assets-page .section-2 .data-right .item .column3.win {
color: #00f0ff;
}
.assets-page .section-2 .data-right .column3 {
width: 25%;
}
.assets-page .section-2 .data-right .item .column5 {
position: relative;
font-size: 26px;
cursor: pointer;
}
.assets-page .section-2 .data-right .item .column5 .sub-list {
position: absolute;
top: 80px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.assets-page .section-2 .data-right .column4 {
width: 20%;
}
.assets-page .section-2 .data-right .column5 {
width: 15%;
}
.assets-page .section-2 .data-right .column5 {
width: 15%;
}
.white-color-text {
display: flex;
align-items: center;
}
.white-color-text .hand {
cursor: pointer;
margin-left: 10px;
}
.assets-page .section-2 .data-right .item-contract .column1 {
background: radial-gradient(118.76% 101.38% at 0% 22.64%, #147EC7 0%, #6DD2F8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.assets-page .section-2 .data-right .item-cft .column1 {
background: radial-gradient(45.13% 45.13% at 47.06% 6.18%, #D18BD7 0%, #B164E2 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.assets-page .section-2 .data-right .item-coin .column1 .dot {
background: linear-gradient(90deg, #f09464 49.79%, #D37442 100%);
}
.assets-page .section-2 .data-right .item-contract .column1 .dot {
background: linear-gradient(90deg, #6dd2f8 49.79%, #147EC7 100%);
}
.assets-page .section-2 .data-right .item-cft .column1 .dot {
background: linear-gradient(90deg, #D18BD7 49.79%, #b164e2 100%);
}
.assets-page .section-2 .data-right .item .column1 .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.right-wrap {
width: 377px;
height: 460px;
display: flex;
flex-direction: column;
}
.data-list {
width: 377px;
height: 404px;
text-align: center;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 12px;
overflow: hidden;
}
.data-list .list-wrap {
width: 100%;
height: 630px;
overflow-y: auto;
}
.left-section .right-wrap h3 {
margin-bottom: 20px;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column1 {
display: flex;
align-items: center;
}
.data-list .column1 img {
width: 34px;
height: 34px;
}
.data-list .column2 {
width: 15%;
}
.data-list .column3 {
width: 70%;
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding-left: 15px;
}
.right-wrap h3 {
margin-bottom: 20px;
}
@media (max-width: 600px) {
.assets-page .section-1 {
flex: none;
border-radius: 12px;
border: none;
padding: 20px 10px;
width: 100%;
}
.fiatAccount {
display: flex
;
justify-content: space-between;
margin-bottom: 50px;
flex-direction: column;
}
.assets-page .section-1 .top-info .right-con{
display: flex
;
justify-content: space-between;
flex-wrap: wrap;
}
.b-l{
margin-right: 0px;
}
.assets-page .section-1 .top-info .right-con .operate-btn{
width: 48%;
height: 40px;
line-height: 15px;
display: flex
;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 0px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-top: 30px;
}
.right-wrap{
width: 100%;
height: 460px;
display: flex
;
flex-direction: column;
}
.data-list{
width: 100%;
height: 404px;
text-align: center;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 12px;
overflow: hidden;
}
.assets-page section.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 10px;
}
.section-3 h3 {
padding: 0 10px;
height: 30px;
line-height: 30px;
}
.data-list .column1 img {
width: 24px;
height: 24px;
}
.data-list .item {
font-size: 14px;
}
}
</style>
src/view/assets/financialAccount - 副本.vue
+882
View File
@@ -0,0 +1,882 @@
<template>
<div class="spotAccount">
<div class="dfd left-section ">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">理財帳户估值 <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con"><span class="balance white-color-text">$393,735.32</span><span class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<g id="Design tools / horizontal distribute center">
<path id="Vector"
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
stroke="white" stroke-width="0.1"></path>
</g>
</svg>
</div><span class="name">充值</span>
</div>
<div class="operate-btn">劃轉</div>
</div>
</div>
<div class="search-wrap">
<!-- <button class="type-btn active">按幣種</button> -->
<button class="type-btn" :class="{active:item.type == typeIndex}" v-for="(item,index) in buttList"
:key="index" @click="selectType(item.type)">{{item.title}}</button>
</div>
<template v-if="typeIndex==0">
<div class="data-list">
<div class="titles">
<div class="column1">幣種</div>
<div class="column2">餘額</div>
<div class="column3">佔比</div>
<div class="column3">凍結</div>
<div class="column4"></div>
</div>
<div class="list-wrap">
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/1e8deac3f3e547629a8bf2b466dc0359.png">
<div>
<div>USDC</div>
<div class="brief">Tether</div>
</div>
</div>
<div class="column2">
<div>5,043,577.555567</div>
<div>$ 5,043,577.555567</div>
</div>
<div class="column3">96.33 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/45f85cab483d49ceb4193f6a7849e771.png">
<div>
<div>EOS</div>
<div class="brief">Enterprise</div>
</div>
</div>
<div class="column2">
<div>2,078.416884</div>
<div>$ 1,354.712124</div>
</div>
<div class="column3">0.03 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/de59bcf2bcde4b32b9bcbce52a2603cf.png">
<div>
<div>ETH</div>
<div class="brief">Ethereum</div>
</div>
</div>
<div class="column2">
<div>16.57092</div>
<div>$ 27,933.765553</div>
</div>
<div class="column3">0.53 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/d081c44d109042fcb7e47ce12ef21031.png">
<div>
<div>BTC</div>
<div class="brief">Bitcoin</div>
</div>
</div>
<div class="column2">
<div>1.79385</div>
<div>$ 162,648.146299</div>
</div>
<div class="column3">3.11 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/04a2e7c7327d49e5a5a8eaa554c55fa7.jpg">
<div>
<div>MX</div>
<div class="brief"></div>
</div>
</div>
<div class="column2">
<div>0.203875</div>
<div>$ 0.568831</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/56767c24c84a4b96bf78e046b44b1af5.png">
<div>
<div>TRX</div>
<div class="brief">TRON</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/c92630ee58c44767869b3f6314ca8174.png">
<div>
<div>BCH</div>
<div class="brief">Bitcoin Cash</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/03501dec465d4a38829b3448abba16fe.png">
<div>
<div>XRP</div>
<div class="brief">Ripple</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/3f0f8ee875804ee68bce28ec8e087f6f.png">
<div>
<div>LTC</div>
<div class="brief">LTC</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/5fb720b4fbdf4583b520c3dada6eedda.png">
<div>
<div>YFI</div>
<div class="brief">Yearn</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/5b69d56aa08c4150bdfecbc0d197b9bd.png">
<div>
<div>DAI</div>
<div class="brief">MakerDAO</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/1a274ad9e83441c18967816aa315409e.jpg">
<div>
<div>USDC</div>
<div class="brief">USDCoin </div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/74edb1865df74515a2f3175180beea9c.png">
<div>
<div>DOGE</div>
<div class="brief">Dogecoin</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/74dd7824ca4e43fa8c5635cfea1f4c86.png">
<div>
<div>FIL</div>
<div class="brief">Filecoin</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/uploads/00f2841a86fd4dcba903499d955c694a.png">
<div>
<div>DOT</div>
<div class="brief">Polkadot</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/03ac33df0f9c44168043d79d4169a74b.png">
<div>
<div>ADA</div>
<div class="brief">Cardano</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/5ecc27b666b84978a5f3e4036999d495.png">
<div>
<div>SOL</div>
<div class="brief">Solana</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/a987c23f883043719fc556250a2f32ac.png">
<div>
<div>LUNA</div>
<div class="brief">Terra</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/a78fd1606aef4bdd937450504f6c87cb.png">
<div>
<div>UNI</div>
<div class="brief">Uniswap</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div>
<div class="item">
<div class="column1"><img src="https://v3.ptdemot.bio/public/394ab63435394fb8a50e6c21fcf38f90.png">
<div>
<div>DYDX</div>
<div class="brief">Dydx</div>
</div>
</div>
<div class="column2">
<div>0</div>
<div>$ 0</div>
</div>
<div class="column3">0.00 % </div>
<div class="column3">0</div>
<div class="column4" style="color: #00f0ff;">
劃轉
</div>
</div><!---->
</div>
</div>
</template>
<div class="data-list" v-else>
<div class="titles">
<div class="column21">產品組合</div>
<div class="column22">申購金額</div>
<div class="column23">收益</div>
</div>
<div class="list-wrap">
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/f7a1ccd7eb4146438cf23f4105a52ec8.webp">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+13</div>
</div>
<div class="column22">15.390972</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.01</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/c6861ce7d2b744af87d96ad3ebe01966.png">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+6</div>
</div>
<div class="column22">4.43705</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.0025</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/afb9f7f079614a2383e6ab416f8632dd.gif">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+1</div>
</div>
<div class="column22">221.651162</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.1249</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/134860e9cf9c4f538a74eacb92811d89.png">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+10</div>
</div>
<div class="column22">201.477375</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.1</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/67cbe737d61e4872bc3296ad7f2549b9.gif">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+4</div>
</div>
<div class="column22">66.990978</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.033</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/f17e5a019e874db79e479bd675dd8e93.gif">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+7</div>
</div>
<div class="column22">236.101635</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.1</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/2af763c4b6d345ec9cce4cd1b04cb284.png">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+1</div>
</div>
<div class="column22">1</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.1797</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/f215226dac1d414db5ebcbaf2e9952cf.png">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+6</div>
</div>
<div class="column22">80.276486</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.03</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/3646608e577c426f8408e38af2f58da9.gif">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+4</div>
</div>
<div class="column22">29.25249</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.0095</div>
</div>
<div class="item">
<div class="column21">
<div class="imgs"><img src="https://v3.ptdemot.bio/public/b8af764ee4a2413cae272a42aba31acf.webp">
</div>
<div class="brief">BAC+DRO+FRU+MON+BOD+ACC+5</div>
</div>
<div class="column22">2717.342316</div>
<div class="column23" style="color: rgb(0, 240, 255);">+0.78</div>
</div>
</div>
</div>
</section>
</div>
<div class="rklkl">
<record></record>
</div>
</div>
</div>
</template>
<script>
import record from '@/view/assets/record'
export default {
name: "financialAccount",
components: {
record,
},
data() {
return {
buttList: [{
type: 0,
title: "按幣種",
},
{
type: 1,
title: "按產品",
}
],
typeIndex: 0
};
},
created() {
},
methods: {
selectType(type) {
this.typeIndex = type
}
},
};
</script>
<style lang="scss" scoped>
.spotAccount {
display: flex;
color: #fff;
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.section-1 {
width: 830px;
// height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.section-1 h3 {
display: flex;
align-items: center;
}
.section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
}
.section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.section-1 .top-info .left-con .unit {
font-size: 14px;
}
.section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.section-1 .chart-title .left-con {
font-size: 16px;
}
.section-1 .chart-title .right-con {
display: flex;
}
.section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
overflow-y: auto;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column1 {
width: 20%;
text-align: left;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .item .column1 {
display: flex;
align-items: center;
}
.left-section .data-list .column1 img {
width: 34px;
height: 34px;
}
.left-section .data-list .item .column1>div {
margin-left: 10px;
text-align: left;
}
.left-section .data-list .item .column1 .brief {
color: #888;
font-size: 12px;
}
.left-section .data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .item .column2>div:nth-of-type(2) {
color: #888;
font-size: 12px;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .column4 .sub-list {
position: absolute;
top: 60px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.left-section .data-list .column4:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.left-section .data-list .column4 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.left-section .data-list .column4 .sub-list .sub-title:hover {
background: #1a1b24;
}
.left-section .search-wrap {
margin-top: 20px;
display: flex;
align-items: center;
}
.left-section .search-wrap .type-btn {
display: inline-flex;
padding: 7px 20px;
justify-content: center;
align-items: center;
border-radius: 99px;
background: #21213C;
cursor: pointer;
color: #fff;
}
.left-section .search-wrap .type-btn:nth-child(2) {
margin-left: 20px;
}
.left-section .search-wrap .type-btn.active {
border: 1px solid #84849F;
background: #141427;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column21 {
width: 40%;
text-align: left;
}
.left-section .data-list .column22 {
width: 30%;
}
.left-section .data-list .column23 {
width: 30%;
padding-right: 20px;
text-align: right;
}
.left-section .data-list .item .column21 img {
border-radius: 50%;
width: 34px;
height: 34px;
margin-left: -10px;
}
.left-section .data-list .item .column21 img:nth-child(1) {
margin-left: 0;
}
.left-section .data-list .item .column21 {
display: flex;
align-items: center;
}
.left-section .data-list .item .column21 .brief {
margin-left: 10px;
}
}
</style>
src/view/assets/financialAccount.vue
+499
View File
@@ -0,0 +1,499 @@
<template>
<div class="spotAccount">
<div class="dfd left-section ">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">{{$t('zc.理財帳户估值')}} <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con"><span class="balance white-color-text">${{total}}</span><span class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<g id="Design tools / horizontal distribute center">
<path id="Vector"
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
stroke="white" stroke-width="0.1"></path>
</g>
</svg>
</div><span class="name" @click="gopages('deposit')">{{$t('zc.充值')}}</span>
</div>
<div class="operate-btn" @click="gopages('withdrawDeposit')">{{$t('zc.提现')}}</div>
<div class="operate-btn" @click="gopages('orderTransfer')">{{$t('zc.劃轉')}}</div>
</div>
</div>
<div class="sxtj">
<el-input :placeholder="$t('zc.搜索')" size="small" prefix-icon="el-icon-search" v-model="input1" @input="sousuo">
</el-input>
<div>
<el-checkbox @change="changeCheckbox" v-model="checked">{{$t('zc.隱藏金額 < 1USD的幣種')}} </el-checkbox>
</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column1">{{$t('zc.幣種')}}</div>
<div class="column2">{{$t('zc.權益')}}</div>
<div class="column3">{{$t('zc.佔比')}}</div>
<div class="column3">{{$t('zc.凍結')}}</div>
<div class="column4"></div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="column1">
<img :src="$utils.isBaseUrl(item.currency_logo)">
<div>
<div>{{item.currency_name}}</div>
<div class="brief">{{item.currency_type}}</div>
</div>
</div>
<div class="column2">
<div>{{item.legal_balance}}</div>
<div>$ {{item.usdt_price *item.legal_balance }}</div>
</div>
<div class="column3">{{item.totle_scale}} </div>
<div class="column3">{{item.lock_change_balance|| "0.00"}}</div>
<div class="column4" style="color: #00f0ff;" @click="gopages('orderTransfer')">{{$t('zc.劃轉')}}</div>
<!-- <div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top" @click="gopages('secondDealCenter')">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top">{{$t('zc.劃轉')}}</span></div>
</div>
</div> -->
</div>
</div>
</div>
</section>
</div>
<div class="rklkl">
<record value2="5"></record>
</div>
</div>
</div>
</template>
<script>
import record from '@/view/assets/record'
export default {
name: "change",
components: {
record,
},
data() {
return {
pageData: {},
total: 0,
list: [],
input1: '',
list2: [],
checked:false
};
},
created() {
this.$http({
url: "/api/wallet/list",
method: "post",
data: {
type:4
},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if (t.data.type == 'ok') {
let data = t.data.message
this.pageData = data
this.list2 = data.wallet.balance
this.list = data.wallet.balance
this.total = data.wallet.usdt_totle
console.log('data', data)
} else {}
})
},
methods: {
gopages(name) {
this.$router.push({
name: name
});
},
changeCheckbox(ee){
let data = this.list2.filter(item=>item.currency_name.includes(this.input1) && (ee?Number(item.usdt_price *item.change_balance)>1:true))
this.list = data
},
sousuo(ee) {
let data = this.list2.filter(item=>item.currency_name.includes(ee) && (this.checked?Number(item.usdt_price *item.change_balance)>1:true))
this.list = data
},
},
};
</script>
<style lang="scss" scoped>
.spotAccount {
display: flex;
color: #fff;
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.section-1 {
width: 830px;
// height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.section-1 h3 {
display: flex;
align-items: center;
}
.section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
}
.section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.section-1 .top-info .left-con .unit {
font-size: 14px;
}
.section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.section-1 .chart-title .left-con {
font-size: 16px;
}
.section-1 .chart-title .right-con {
display: flex;
}
.section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
overflow-y: auto;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column1 {
width: 20%;
text-align: left;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .item .column1 {
display: flex;
align-items: center;
}
.left-section .data-list .column1 img {
width: 34px;
height: 34px;
}
.left-section .data-list .item .column1>div {
margin-left: 10px;
text-align: left;
}
.left-section .data-list .item .column1 .brief {
color: #888;
font-size: 12px;
}
.left-section .data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .item .column2>div:nth-of-type(2) {
color: #888;
font-size: 12px;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .column4 .sub-list {
position: absolute;
top: 60px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.left-section .data-list .column4:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.left-section .data-list .column4 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.left-section .data-list .column4 .sub-list .sub-title:hover {
background: #1a1b24;
}
}
@media (max-width: 600px) {
.spotAccount .section-1.no-vw{
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 10px;
width: 90vw;
margin-top: 15px;
}
.spotAccount .section-1 h3 {
display: flex
;
align-items: center;
font-size: 16px;
}
.spotAccount .section-1 .top-info {
display: flex
;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
flex-direction: column;
}
.spotAccount .section-1 .top-info .right-con{
display: flex
;
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
.spotAccount .sxtj {
margin: 20px 0;
display: flex
;
justify-content: space-between;
flex-direction: column;
}
.el-input--small .el-input__inner{
height: 32px;
line-height: 32px;
width: 100%;
}
.spotAccount .left-section .data-list .column1 img{
width: 24px;
height: 24px;
}
.spotAccount .left-section .data-list .item .column1 > div div ,.spotAccount .left-section .data-list .column2 div {
font-size: 12px;
}
.spotAccount .left-section .data-list .column3{
font-size: 12px;
}
.spotAccount .left-section .data-list .column4{
width: 20%;
cursor: pointer;
position: relative;
}
}
</style>
src/view/assets/index.vue
+163
View File
@@ -0,0 +1,163 @@
<template>
<div class="box">
<indexHeader></indexHeader>
<div class="bit-center-wrap">
<div class="tabs-box tabs-box5">
<el-tabs v-model="tabsName" @tab-click="handleClick">
<el-tab-pane
:key="index"
v-for="(item, index) in tabsList"
:label="item.text"
:name="item.type"
></el-tab-pane>
</el-tabs>
</div>
<!-- <left></left> -->
<router-view></router-view>
</div>
<indexFooter :current="4"></indexFooter>
</div>
</template>
<script>
import indexHeader from "@/view/indexHeader";
import indexFooter from "@/view/indexFooter";
export default {
name: "account",
data() {
return {
lang: "",
currentIndex: 0,
tabsList: [
{
type: "0",
text: this.$t("zc.資產總覽"),
url: "overviewAssets",
},
{
type: "1",
text: this.$t("zc.資產帳户"),
url: "spotAccount",
},
{
type: "2",
text: this.$t("zc.合约帳户"),
url: "contractAccount",
},
// 期权/秒合约已合并至"資產帳户"(钱包资产)，不再单独展示入口
// {
// type: "3",
// text: this.$t("zc.期权账户"),
// url: "optionAccount",
// },
{
type: "4",
text: this.$t("zc.理财账户"),
url: "financialAccount",
},
// 暂时去掉法币
// {
// type: '5',
// text: this.$t("zc.法幣賬户"),
// url: "fiatAccount",
// },
{
type: "6",
text: this.$t("zc.訂單中心"),
url: "orderCenter",
},
{
type: "7",
text: "Nfts",
},
{
type: "8",
text: this.$t("zc.劃轉"),
url: "orderTransfer",
},
],
tabsName: "0",
};
},
components: {
indexHeader,
indexFooter,
},
created() {
console.log("44", this.$route.meta.type);
this.tabsName = this.$route.meta.type;
// console.log('222',this.$router.meta.type)
},
methods: {
handleClick() {
console.log("this.tabsList[this.tabsName].url", this.tabsName);
let url = this.tabsList[this.tabsName].url;
this.$router.push({
name: url,
});
},
},
};
</script>
<style lang="scss" scoped>
.tabs-box5 {
margin: 30px 0;
.el-tabs__item {
font-size: 18px !important;
}
}
// @media (max-width: 600px) {
// .tabs-box5 {
// height: 12vw;
// position: relative;
// margin: 0;
// border-bottom: 1px solid var(--data-bg-main);
// display: flex;
// flex-wrap: initial;
// flex-direction: initial;
// align-items: center;
// justify-content: initial;
// overflow-x: auto;
// overflow-y: hidden;
// }
// .tabs-box5::-webkit-scrollbar {
// width: 0px;
// /* 滚动条宽度 */
// height: 0px;
// }
// .tabs-box {
// padding: 0px;
// }
// .change {
// color: #fff;
// margin-top: 20px;
// }
// }
@media screen and (min-width: 768px) {
}
::v-deep .el-tabs__item {
font-size: 18px !important;
}
@media (max-width: 768px) {
.no-vw {
width: 100%;
}
.tabs-box5 {
margin: 10px 0;
}
}
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
}
</style>
src/view/assets/optionAccount.vue
+498
View File
@@ -0,0 +1,498 @@
<template>
<div class="spotAccount">
<div class="dfd left-section ">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">{{$t('zc.期权帳户估值')}} <div class="svg-container dsad"><svg width="26" height="26"
viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con"><span class="balance white-color-text">${{total}}</span><span class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<g id="Design tools / horizontal distribute center">
<path id="Vector"
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
stroke="white" stroke-width="0.1"></path>
</g>
</svg>
</div><span class="name" @click="gopages('deposit')">{{$t('zc.充值')}}</span>
</div>
<div class="operate-btn" @click="gopages('withdrawDeposit')">{{$t('zc.提现')}}</div>
<div class="operate-btn" @click="gopages('orderTransfer')">{{$t('zc.劃轉')}}</div>
</div>
</div>
<div class="sxtj">
<el-input :placeholder="$t('zc.搜索')" size="small" prefix-icon="el-icon-search" v-model="input1" @input="sousuo">
</el-input>
<div>
<el-checkbox @change="changeCheckbox" v-model="checked">{{$t('zc.隱藏金額 < 1USD的幣種')}} </el-checkbox>
</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column1">{{$t('zc.幣種')}}</div>
<div class="column2">{{$t('zc.權益')}}</div>
<div class="column3">{{$t('zc.佔比')}}</div>
<div class="column3">{{$t('zc.凍結')}}</div>
<div class="column4">{{$t('zc.操作')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="column1">
<img :src="$utils.isBaseUrl(item.currency_logo)">
<div>
<div>{{item.currency_name}}</div>
<div class="brief">{{item.currency_type}}</div>
</div>
</div>
<div class="column2">
<div>{{item.micro_balance}}</div>
<div>$ {{item.usdt_price *item.micro_balance }}</div>
</div>
<div class="column3">{{item.totle_scale}}</div>
<div class="column3">{{item.lock_change_balance|| "0.00"}}</div>
<div class="column4"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg
focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top" @click="gopages('secondDealCenter')">{{$t('zc.幣幣買賣')}}</span></div>
<div class="sub-title"><span class="top" @click="gopages('orderTransfer')">{{$t('zc.劃轉')}}</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="rklkl">
<record value2="4"></record>
</div>
</div>
</div>
</template>
<script>
import record from '@/view/assets/record'
export default {
name: "change",
components: {
record,
},
data() {
return {
pageData: {},
total: 0,
list: [],
input1: '',
list2: [],
checked:false
};
},
created() {
this.$http({
url: "/api/wallet/list",
method: "post",
data: {
type:3
},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if (t.data.type == 'ok') {
let data = t.data.message
this.pageData = data
this.list2 = data.wallet.balance
this.list = data.wallet.balance
this.total = data.wallet.usdt_totle
console.log('data', data)
} else {}
})
},
methods: {
gopages(name) {
this.$router.push({
name: name
});
},
changeCheckbox(ee){
let data = this.list2.filter(item=>item.currency_name.includes(this.input1) && (ee?Number(item.usdt_price *item.change_balance)>1:true))
this.list = data
},
sousuo(ee) {
let data = this.list2.filter(item=>item.currency_name.includes(ee) && (this.checked?Number(item.usdt_price *item.change_balance)>1:true))
this.list = data
},
},
};
</script>
<style lang="scss" scoped>
.spotAccount {
display: flex;
color: #fff;
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.section-1 {
width: 830px;
// height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.section-1 h3 {
display: flex;
align-items: center;
}
.section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
}
.section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.section-1 .top-info .left-con .unit {
font-size: 14px;
}
.section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.section-1 .chart-title .left-con {
font-size: 16px;
}
.section-1 .chart-title .right-con {
display: flex;
}
.section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
overflow-y: auto;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column1 {
width: 20%;
text-align: left;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .item .column1 {
display: flex;
align-items: center;
}
.left-section .data-list .column1 img {
width: 34px;
height: 34px;
}
.left-section .data-list .item .column1>div {
margin-left: 10px;
text-align: left;
}
.left-section .data-list .item .column1 .brief {
color: #888;
font-size: 12px;
}
.left-section .data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .item .column2>div:nth-of-type(2) {
color: #888;
font-size: 12px;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .column4 .sub-list {
position: absolute;
top: 60px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.left-section .data-list .column4:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.left-section .data-list .column4 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.left-section .data-list .column4 .sub-list .sub-title:hover {
background: #1a1b24;
}
}
@media (max-width: 600px) {
.spotAccount .section-1.no-vw{
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 10px;
width: 90vw;
margin-top: 15px;
}
.spotAccount .section-1 h3 {
display: flex
;
align-items: center;
font-size: 16px;
}
.spotAccount .section-1 .top-info {
display: flex
;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
flex-direction: column;
}
.spotAccount .section-1 .top-info .right-con{
display: flex
;
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
.spotAccount .sxtj {
margin: 20px 0;
display: flex
;
justify-content: space-between;
flex-direction: column;
}
.el-input--small .el-input__inner{
height: 32px;
line-height: 32px;
width: 100%;
}
.spotAccount .left-section .data-list .column1 img{
width: 24px;
height: 24px;
}
.spotAccount .left-section .data-list .item .column1 > div div ,.spotAccount .left-section .data-list .column2 div {
font-size: 12px;
}
.spotAccount .left-section .data-list .column3{
font-size: 12px;
}
.spotAccount .left-section .data-list .column4{
width: 12%;
cursor: pointer;
position: relative;
}
}
</style>
src/view/assets/orderCenter.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<div class="orderCenter">
<div class="left-section no-vw">
<div class="tabs-box tabs-box5">
<el-tabs v-model="tabsName">
<el-tab-pane :key="index" v-for="(item,index) in tabsList" :label="item.text" :name="item.type"></el-tab-pane>
</el-tabs>
</div>
<depositRecord v-if="tabsName==0"></depositRecord>
<withdrawalRecord v-if="tabsName==1"></withdrawalRecord>
<borrowingRecord v-if="tabsName==2"></borrowingRecord>
<contract v-if="tabsName==3"></contract>
<aiRecord v-if="tabsName==4"></aiRecord>
<coin v-if="tabsName==5"></coin>
<Portfolio v-if="tabsName==6"></Portfolio>
</div>
</div>
</template>
<script>
import depositRecord from '@/view/assets/depositRecord'
import withdrawalRecord from '@/view/assets/withdrawalRecord'
import borrowingRecord from '@/view/assets/borrowingRecord'
import contract from '@/view/assets/contract'
import aiRecord from '@/view/assets/aiRecord'
import coin from '@/view/assets/coin'
import Portfolio from '@/view/assets/Portfolio'
export default {
name: "orderCenter",
components: {
depositRecord,
withdrawalRecord,
borrowingRecord,
contract,
aiRecord,
coin,
Portfolio
},
data() {
return {
tabsList: [{
type: '0',
text: this.$t('zc.充幣記錄'),
url: "overviewAssets"
},
{
type: '1',
text: this.$t('zc.提幣記錄'),
url: "spotAccount"
},
{
type: '2',
text: this.$t('zc.借幣數據'),
url: "fiatAccount",
},
{
type: '3',
text: this.$t('zc.合約'),
url: "financialAccount",
},
{
type: '4',
text: "AI",
url: "assetAccount"
},
{
type: '5',
text: this.$t('zc.現貨'),
url: "orderCenter"
},
{
type: '6',
text: this.$t('zc.投資組合')
},
{
type: '7',
text: this.$t('zc.法幣提現')
},
],
tabsName: '0',
}
},
mounted(){
const {type=null}=this.$route.query
if(type){
this.tabsName=type
}
}
}
</script>
<style lang="scss" scoped>
.orderCenter {
color: #fff;
.left-section {
width: 100%;
height: 892px;
margin-bottom: 30px;
margin-right: 30px;
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
}
@media (max-width: 600px) {
.tabs-box5 {
height: 12vw;
position: relative;
margin: 0;
border-bottom: 1px solid var(--data-bg-main);
display: flex;
flex-wrap: initial;
flex-direction: initial;
align-items: center;
justify-content: initial;
overflow-x: auto;
overflow-y: hidden;
}
.tabs-box5::-webkit-scrollbar {
width: 0px;
/* 滚动条宽度 */
height: 0px;
}
.tabs-box {
padding: 0px;
}
.change {
color: #fff;
margin-top: 20px;
}
.orderCenter .left-section {
width: 100%;
height: 892px;
margin-bottom: 30px;
margin-right: 30px;
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 10px;
margin-top: 15px;
}
}
</style>
src/view/assets/orderTransfer.vue
+966
View File
@@ -0,0 +1,966 @@
<template>
<div class="property bit-center-wrap">
<div class="tb">
<!-- 划转 -->
<div class="transfer-box">
<h3 class="safsf">{{$t('zc.劃轉')}}</h3>
<div class="zchz">
<!-- <div class="zz-l">
<div class="zl-y"></div>
<div class="zl-x"></div>
<img class="z-img" src="../../assets/hz.png" />
<div class="zl-x"></div>
<div class="zl-y" style="border: 0.125rem solid #f6465d;"></div>
</div> -->
<div class="zz-r">
<div class="z-t">{{$t('accountNewPage.from')}}</div>
<div class="as">
<el-select v-model="form.from_field" :placeholder="$t('tv.el_select_placeholder')" @change="setto">
<el-option v-for="item in hzList" :key="item.value" :label="item.tetx" :value="item.value">
</el-option>
</el-select>
</div>
<div class="z-t">{{$t('accountNewPage.reach')}}</div>
<el-select v-model="form.to_field" :placeholder="$t('tv.el_select_placeholder')">
<el-option v-for="item in hzList2" :key="item.value" :label="item.tetx" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="i-t">{{$t('accountNewPage.label_currency')}}</div>
<div class="i-i">
<el-select v-model="form.currency_id" :placeholder="$t('tv.el_select_placeholder')" @change="currencyChange">
<el-option v-for="item in AssetCurrencyList" :key="item.id" :label="item.currency_name"
:value="item.currency">
</el-option>
</el-select>
</div>
<div class="i-t">{{$t('change.transfer_amount')}}</div>
<div class="i-i">
<el-input v-model="form.number" :placeholder="$t('change.transfer_amount_input')"></el-input>
<!-- <input placeholder="请输入要划转的数量"/> -->
<span class="all" @click.stop="form.number = change_balance">{{$t('complete.all')}}</span>
</div>
<div class="i-t">{{$t('secondContract.balance')}}：{{change_balance}}</div>
<div class="butt" @click="transferSubmis">
{{$t('secondContract.transfer')}}
</div>
</div>
<section class="section-right">
<div class="hover-img">
<img :src="$utils.isBaseUrl(siteConfig.site_logo)" alt="">
</div>
</section>
</div>
<div class="ccjl2222">
<h3 class="white-color-text">{{$t('zc.劃轉記錄')}}</h3>
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total22}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.發生時間')}}</div>
<div class="column1">{{$t('zc.幣種')}}</div>
<div class="column1">{{$t('zc.數量')}}</div>
<div class="column2">{{$t('zc.從')}}</div>
<div class="column3">{{$t('zc.到')}}</div>
</div>
<div class="list-wrap" >
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
{{item.created_time || '--'}}
</div>
<div class="column0 sdsd">
{{ item.currency_name }}
</div>
<div class="column0 sdsd">
{{ Number(item.value) }}
</div>
<div class="column0">
{{item.transaction_info}}
</div>
<div class="column0 text-ellipsis1">
{{item.info}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "change",
data() {
return {
dialogVisible: false,
tabIndex: 0,
tabList: this.$t('zjde107'),
hzList: [],
hzList2: [],
form: {
currency_id: '',
number: '',
from_field: '',
to_field: ''
},
zvalue: 'change',
svalue: '',
data: {},
total: 0,
AssetCurrencyList: [],
change_balance: 0,
exchangeShow: false,
exchangeList: [],
exchangeList2: [],
// 兑换
dhNumber: '',
dhfrom_currency_id: '',
dhto_currency_id: '',
dhfObj: {
currency_name: 'USDC'
},
dhtObj: {
currency_name: 'USDC'
},
rate: 1,
// lang: zh
huilv: 1,
zsy: 0,
hlObj: {},
tcdx: "450px",
recData: [],
total22: 0,
siteConfig: {}
};
},
watch: {
},
updated() {
},
methods: {
},
created() {
this.$http({
url: '/api/getSiteConfig'
}).then(res => {
this.siteConfig = res.data.message;
})
this.getorderList()
console.log('a', this.tabList)
this.getlist()
this.hzList = this.tabList.filter((item, index) => index != 0)
let hl = localStorage.getItem('hlType') || 'USD';
let list = this.$t('zjde58')
this.hlObj = list.filter(item => item.type == hl)[0]
var curScreenWidth = document.documentElement.clientWidth;
if (curScreenWidth < 800) {
this.tcdx = "85%"
}
},
methods: {
getorderList() {
this.$http({
url: "/api/wallet/hzhistory?page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
console.log('6666', t.data)
if ("ok" == t.data.type) {
this.recData = t.data.message.data
this.total22 = t.data.message.total
}
})
},
goTb(name) {
this.$router.push({
name
});
},
getlist() {
layer.load();
this.$http({
url: "/api/wallet/list",
method: "post",
data: {
bizhong: localStorage.getItem('hlType') || 'USD'
},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(res => {
layer.closeAll()
// console.log('res', res.data.message['change_wallet'])
this.data = res.data.message
this.huilv = this.data.huilv || 1
this.exchangeList = res.data.message['change_wallet'].balance || []
this.exchangeList2 = res.data.message['change_wallet'].balance || []
this.total = this.data.change_wallet.usdt_totle + this.data.lever_wallet.usdt_totle + this.data
.legal_wallet.usdt_totle + this.data.micro_wallet
.usdt_totle
this.zsy = this.data.change_wallet.today_usdt_totle + this.data.lever_wallet.today_usdt_totle +
this.data
.legal_wallet.today_usdt_totle + this.data.micro_wallet
.today_usdt_totle
}).catch(t => {
console.log(t)
})
},
hform(value) {
console.log('value11', value)
this.form.from_field = value
this.dialogVisible = true
this.setto()
},
setto() {
let obj = this.hzList.filter(item => item.value == this.form.from_field)[0]
this.AssetCurrencyList = this.data[obj.type].balance || []
this.hzList2 = this.hzList.filter(item => item.value != this.form.from_field)
this.form.to_field = ''
this.form.currency_id = ''
this.change_balance = 0
},
dhfrom(index) {
console.log('index', index)
let e = this.exchangeList.findIndex(item => item.currency == index)
this.dhfObj = this.exchangeList[e]
// this.exchangeList2 = this.exchangeList.filter(item => item.currency != this.dhfrom_currency_id)
// this.dhtObj = {}
this.huquhl()
// this.AssetCurrencyList = this.data[obj.type].balance || []
// this.hzList2 = this.hzList.filter(item => item.value != this.form.from_field)
// this.form.to_field = ''
// this.change_balance = 0
},
dhTo(index) {
let e = this.exchangeList2.findIndex(item => item.currency == index)
this.dhtObj = this.exchangeList2[e]
this.huquhl()
},
huquhl() {
let t = this
if (t.dhfrom_currency_id && t.dhto_currency_id) {
this.$http({
url: "/api/user/getTransferFee",
method: "post",
data: {
from_currency_id: t.dhfrom_currency_id,
to_currency_id: t.dhto_currency_id,
lang: window.localStorage.getItem("lang") || "en"
},
headers: {
Authorization: localStorage.getItem("token") || ""
}
}).then(e => {
let a = e.data.message
this.rate = parseFloat((Number(a.form_price) / Number(a.to_price)).toFixed(10))
}).catch(t => {
console.log(t)
})
}
},
exchangeSubmis() {
var t = this;
if (t.dhfrom_currency_id == '' || t.dhto_currency_id == '') return this.$message.error(this.$t(
"tv.el_select_placeholder"))
if (t.dhNumber <= 0) return this.$message.error(this.$t("other.withdrawal_amount_alert"))
this.$http({
url: "/api/user/Transfer",
method: "post",
data: {
number: t.dhNumber,
from_currency_id: t.dhfrom_currency_id,
to_currency_id: t.dhto_currency_id,
lang: window.localStorage.getItem("lang") || "en"
},
headers: {
Authorization: localStorage.getItem("token") || ""
}
}).then(e => {
this.exchangeShow = false
layer.msg(e.data.message)
this.getlist()
}).catch(t => {
console.log(t)
})
},
currencyChange(i) {
let e = this.AssetCurrencyList.findIndex(item => item.currency == i)
console.log('e', this.AssetCurrencyList, e)
console.log('this.AssetCurrencyList', this.AssetCurrencyList)
console.log('this.form.from_field', this.form.from_field)
if (this.form.from_field == 'change') {
this.change_balance = this.AssetCurrencyList[e].change_balance
}
if (this.form.from_field == 'micro') {
this.change_balance = this.AssetCurrencyList[e].micro_balance
}
if (this.form.from_field == 'lever') {
this.change_balance = this.AssetCurrencyList[e].lever_balance
}
if (this.form.from_field == 'legal') {
this.change_balance = this.AssetCurrencyList[e].legal_balance
}
},
transferSubmis() {
console.log('this.form.number', this.form.number)
console.log('this.change_balance', this.change_balance)
if (this.form.to_field == '') return this.$message.error(this.$t("change.please_select_an_account"))
if (this.form.number == '') return this.$message.error(this.$t("change.transfer_amount_input"))
if (this.form.currency_id == '') return this.$message.error(this.$t("change.please_select_currency"))
if (this.form.number * 1 > this.change_balance * 1) return this.$message.error('111')
let loa = this.$loading({
lock: true,
text: 'Loading',
});
this.$http({
url: "/api/wallet/change",
method: "post",
data: this.form,
headers: {
Authorization: localStorage.getItem("token")
}
}).then(a => {
loa.close();
this.dialogVisible = false
this.form.currency_id = ''
this.form.number = ''
this.$message({
message: this.$t("czcc"),
type: 'success'
})
this.getlist()
this.getorderList()
})
}
},
mounted() {
},
computed: {
}
};
</script>
<style lang="scss">
.safsf {
margin-bottom: 30px;
font-size: 18px;
color: #fff;
}
.property {
width: 100%;
}
.py-head {
color: #999;
background-color: #f5f5f5;
}
.ph-cn {
display: flex;
font-size: 1.125rem;
}
.pc-item {
margin-right: 5.5rem;
padding: 2rem 0;
cursor: pointer;
}
.pc-iActive {
color: #000;
font-weight: bold;
border-bottom: 0.1875rem solid #f0c163;
}
.top-model {
background: url(../../assets/gb0.png);
background-size: cover;
background-repeat: no-repeat;
padding: 1.625rem 0.625rem 1.25rem 1.25rem;
margin-top: 1.625rem;
color: #fff;
border-radius: 0.25rem;
overflow: hidden;
display: flex;
align-items: center;
}
.top-model:nth-child(2) {
background: url(../../assets/gb1.png);
}
.top-model:nth-child(3) {
background: url(../../assets/gb2.png);
}
.top-model:nth-child(4) {
background: url(../../assets/gb3.png) no-repeat;
background-size: 100% 100%;
}
.top-model:nth-child(5) {
background: url(../../assets/gb4.png);
}
.top-model-head {
display: flex;
align-items: center;
}
.top-model-title {
font-size: 1rem;
font-weight: 400;
opacity: 0.8;
margin-right: 0.75rem;
}
.yj {
cursor: pointer;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.9375rem;
}
.usdt-money {
font-weight: 700;
font-size: 2.25rem;
margin-top: 1.25rem;
display: flex;
}
.money2 {
font-size: .875rem;
opacity: 0.8;
}
.today-money {
font-size: .875rem;
margin-top: 0.625rem;
}
.un-butt {
display: flex;
margin-left: 3rem;
}
.un-item {
width: 8.75rem;
height: 2.5rem;
font-size: .875rem;
font-weight: 400;
color: #fff;
line-height: 2.5rem;
text-align: center;
cursor: pointer;
position: relative;
z-index: 9;
background: hsla(0, 0%, 100%, .1);
border: 0.0625rem solid #fff;
border-radius: 0.3125rem;
margin-right: 0.625rem;
}
.un-item2 {
background: #fdd786;
border-color: transparent;
}
.bilb {
margin-top: 2rem;
}
.bilb .bb-top {
display: flex;
color: #909399;
padding: 0.75rem 1.25rem;
background: #EEEEEE;
border-radius: 4px;
}
.tb-item {
flex: 1;
font-size: 1rem;
}
.bb-cn {
// display: flex;
}
.bc-i {
display: flex;
padding: 1.5rem 1.25rem;
cursor: pointer;
}
.bc-i:hover {
background: #EEEEEE;
}
.bi-td {
flex: 1;
display: flex;
align-items: center;
}
.bc-i .img {
width: 2rem;
height: 2rem;
border-radius: 50%;
margin-right: 0.5rem;
}
.el-dialog__headerbtn .el-dialog__close {
font-size: 24px;
color: #333333 !important;
}
.transfer-box {
color: #333;
width: 520px;
border: 2px solid #2c2c3e;
padding: 20px 30px 30px;
border-radius: 12px;
}
.zz-l {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.zchz {
display: flex;
align-items: center;
margin-bottom: 3rem;
}
.zl-y {
width: 0.6rem;
height: 0.6rem;
border: 0.125rem solid #0ecb81;
border-radius: 50%;
}
.zl-x {
width: 1px;
height: 2.5rem;
background: #f5f5f5;
}
.z-img {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.zz-r {
flex: 1;
// margin-left: 2rem;
}
.z-t {
font-size: 1rem;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
}
.as {
margin-bottom: 1rem;
}
.transfer-box .el-select {
width: 100%;
}
.transfer-box .el-input__inner {
color: #333;
border: 0.0625rem solid #e7e9ed !important;
width: 100% !important;
background-color: #FFF !important;
color: #333 !important;
}
.i-t {
margin-bottom: 0.7rem;
}
.i-i {
margin-bottom: 1rem;
position: relative;
}
.all {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1rem;
color: #00f0ff;
cursor: pointer;
}
.butt {
width: 100%;
height: 3rem;
background: #00f0ff;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 400;
color: #000;
text-align: center;
line-height: 3rem;
cursor: pointer;
// margin-top: 1.875rem;
}
.dsf {
margin-top: 1.875rem;
text-align: center;
font-size: 1rem;
color: #606266;
}
.dsfd {
margin-left: 4rem;
}
.tb {
display: flex;
width: 100%;
}
.section-right {
flex: 1;
// height: 386px;
margin-left: 30px;
border-radius: 12px;
background: url('../../assets/125.png') no-repeat;
background-size: 100% 100%;
}
.section-right .hover-img {
width: 80%;
height: 100px;
margin: 143px auto 0;
border-radius: 12px;
background: rgba(44, 44, 52, .23);
backdrop-filter: blur(6px);
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 90px;
}
}
.ccjl2222 {
margin-bottom: 50px;
h3 {
font-size: 18px;
padding-bottom: 10px;
color: #fff;
}
width: 100%;
height: 500px;
border-radius: 12px;
overflow-y: auto;
padding: 20px 30px 0;
margin-top: 30px;
border: 2px solid #2c2c3e;
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
// height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
// text-align: left;
}
.data-list .column1 {
// width: 10%;
// padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
font-size: 13px;
text-align: center;
color: #5e5e7a;
}
// .titles>div:first-child,
// .data-list .item>div:first-child {
// flex: 2;
// }
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
// height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
.lh-fx {
color: #ff4834 !important;
}
.sdsd {
color: #00f0ff !important;
}
@media screen and (max-width: 800px) {
.pc-item {
margin-right: 2rem;
padding: 1rem 0;
}
.ccjl2222{
padding: 10px 16px 0;
}
.dsfd {
margin-left: 0rem;
}
.money2 {
font-size: 1rem;
}
.top-model {
flex-direction: column;
align-items: flex-start;
}
}
.un-butt {
margin-left: 0;
margin-top: 1rem;
}
.un-item {
width: 6rem;
height: 3rem;
font-size: 1rem;
line-height: 3rem;
margin-right: 0.625rem;
}
.day {
.py-head {
background: #090d13;
}
.pc-iActive {
color: #FFF;
}
.bilb .bb-top {
// display: flex;
// color: #909399;
background: #1c222c;
}
.bc-i {
color: #fff;
}
.bc-i:hover {
background: #141a28;
// color: #fff;
}
.i-t,
.z-t {
color: #fff;
}
.transfer-box .el-input__inner {
border: 0.0625rem solid #474d57 !important;
width: 100% !important;
background: none !important;
color: #ccc !important;
}
@media (max-width: 600px) {
.bit-center-wrap {
max-width: 100%;
margin: 0 auto;
}
.tb {
display: flex
;
width: 100%;
flex-direction: column;
margin-top: 15px;
}
.transfer-box {
color: #333;
width: 100%;
border: 2px solid #2c2c3e;
padding: 20px 10px 20px;
border-radius: 12px;
}
.section-right{
display: none;
}
}
}
</style>
src/view/assets/overviewAssets.vue
+1111
View File
File diff suppressed because it is too large Load Diff
src/view/assets/record.vue
+196
View File
@@ -0,0 +1,196 @@
<template>
<section class="section-3 no-vw">
<h3 class="white-color-text">{{ $t("zc.資產動態") }}</h3>
<ul class="list">
<li class="row" v-for="(item,index) in list" :key="index">
<span class="column left">
<span class="type">{{item.transaction_info}}</span>
<span class="time">{{item.created_time}}</span>
</span>
<span class="column remark">{{item.info}}</span>
<span class="column amount" :style="{color:Number(item.value)>0?'rgb(0, 240, 255)':'rgb(255, 72, 52)'}">{{Number(item.value).toFixed(4)}}
USDC</span>
</li>
<!-- <li class="row"><span class="column left"><span class="type">理財帳户資金變動</span><span class="time">04/20/2025
21:33:13</span></span><span class="column remark">Defi借貸</span><span class="column amount"
style="color: rgb(255, 72, 52);">-2050 USDC</span>
</li> -->
</ul>
<!-- <div class="bottom blue-color-text">查看更多</div> -->
<div style="display: flex; justify-content: center; margin: 1rem auto; ">
<el-pagination @current-change="chanhepages" layout="prev, pager, next" background :total="count">
</el-pagination>
</div>
</section>
</template>
<script>
export default {
name: 'record',
data() {
return {
list: [],
count: 0,
pages: 1
}
},
props: {
value2: {
type: String,
default: '6'
}
},
created() {
// localStorage.getItem("token") || (window.location.href = "/#/components/login"),
// this.getSystemList()
this.getList()
},
methods: {
getList() {
layer.load();
this.$http({
url: `/api/wallet/legal_log?type=${this.value2}&limit=10&page=${this.pages}&lang=${window.localStorage.getItem('lang')}`,
method: "get",
headers: {
'lang': window.localStorage.getItem('lang'),
Authorization: localStorage.getItem("token")
}
}).then(e => {
layer.closeAll()
// this.data = e.data.message
console.log('eee', e.data.message.list)
this.list = e.data.message.list
this.count = e.data.message.count
})
},
chanhepages(e) {
console.log('eee', e)
this.pages = e
this.getList()
},
selx(val) {
let obj = this.options.filter(item => item.value == val)
return obj.length > 0 ? obj[0].label : '--'
},
},
}
</script>
<style lang="scss" scoped>
.section-3 {
width: 100%;
height: 892px;
overflow-y: auto;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 0px;
color: #fff;
}
.section-3 h3 {
padding: 0 30px;
height: 30px;
line-height: 30px;
}
.section-3 .list {
max-height: 800px;
padding: 20px 30px 10px;
overflow-y: auto;
}
.section-3 .list .left {
display: flex;
flex-direction: column;
width: 40%;
}
.section-3 .list .time {
color: #888;
font-size: 12px;
}
.section-3 .list .row {
height: 60px;
display: flex;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid #31323f;
}
.section-3 .list .remark {
width: 30%;
text-align: center;
}
.section-3 .list .amount {
width: 30%;
text-align: right;
}
.blue-color-text {
background: linear-gradient(90deg, #9bb8f0 0%, #6491e9 49.79%, #556dea 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.section-2 .data-right .item .column5:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.section-2 .data-right .item .column5 .sub-list {
position: absolute;
top: 80px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 1;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.section-2 .data-right .item .column5 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.section-2 .data-right .item .column5 .sub-list .sub-title:hover {
background: #1a1b24;
}
@media (max-width: 600px) {
.section-3 h3 {
padding: 0 10px;
height: 30px;
line-height: 30px;
}
.section-3 .list {
max-height: 800px;
padding: 20px 10px 10px;
overflow-y: auto;
}
}
</style>
src/view/assets/spotAccount.vue
+520
View File
@@ -0,0 +1,520 @@
<template>
<div class="spotAccount">
<div class="dfd left-section ">
<div class="b-l">
<section class="section-1 no-vw">
<h3 class="white-color-text">{{ $t('zc.現貨帳户估值') }} <div class="svg-container dsad"><svg width="26"
height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<path
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
</path>
</svg>
</div>
</h3>
<div class="top-info">
<div class="left-con"><span class="balance white-color-text">${{ total }}</span><span
class="unit">USD</span>
</div>
<div class="right-con">
<div class="operate-btn">
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
<g id="Design tools / horizontal distribute center">
<path id="Vector"
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
stroke="white" stroke-width="0.1"></path>
</g>
</svg>
</div><span class="name" @click="gopages('deposit')">{{ $t('zc.充值') }}</span>
</div>
<div class="operate-btn" @click="gopages('withdrawDeposit')">{{ $t('zc.提现') }}</div>
<div class="operate-btn" @click="gopages('orderTransfer')">{{ $t('zc.劃轉') }}</div>
</div>
</div>
<div class="sxtj">
<el-input :placeholder="$t('zc.搜索')" size="small" prefix-icon="el-icon-search" v-model="input1"
@input="sousuo">
</el-input>
<div>
<el-checkbox @change="changeCheckbox" v-model="checked">{{ $t('zc.隱藏金額 < 1USD的幣種') }}
</el-checkbox>
</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column1">{{ $t('zc.幣種') }}</div>
<div class="column2">{{ $t('zc.權益') }}</div>
<div class="column3">{{ $t('zc.佔比') }}</div>
<div class="column3">{{ $t('zc.凍結') }}</div>
<div class="column4">{{ $t('zc.操作') }}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="column1">
<img :src="$utils.isBaseUrl(item.currency_logo)">
<div>
<div>{{ item.currency_name }}</div>
<div class="brief">{{ item.currency_type }}</div>
</div>
</div>
<div class="column2">
<div v-if="item.change_balance">{{ Number(item.change_balance).toFixed(4) }}</div>
<div v-if="item.usdt_price">$ {{ Number(item.usdt_price *
item.change_balance).toFixed(4) }}</div>
</div>
<div class="column3">{{ item.totle_scale }} % </div>
<div class="column3">{{ Number(item.lock_change_balance) || "0.00" }}</div>
<div class="column4"><span role="img" aria-label="ellipsis"
class="anticon anticon-ellipsis"><svg focusable="false" class=""
data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
aria-hidden="true" viewBox="64 64 896 896">
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
</path>
</svg></span>
<div class="sub-list">
<div class="sub-title"><span class="top"
@click="gopages('secondDealCenter')">{{ $t('zc.幣幣買賣') }}</span></div>
<div class="sub-title"><span class="top"
@click="gopages('orderTransfer')">{{ $t('zc.劃轉') }}</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="rklkl">
<record value2="2"></record>
</div>
</div>
</div>
</template>
<script>
import record from '@/view/assets/record'
export default {
name: "change",
components: {
record,
},
data() {
return {
pageData: {},
total: 0,
list: [],
input1: '',
list2: [],
checked: false
};
},
created() {
this.$http({
url: "/api/wallet/list",
method: "post",
data: {
type: 1
},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if (t.data.type == 'ok') {
let data = t.data.message
this.pageData = data
this.list2 = data.wallet.balance
this.list = data.wallet.balance
this.total = data.wallet.usdt_totle
console.log('data', data)
} else { }
})
},
methods: {
gopages(name) {
this.$router.push({
name: name
});
},
changeCheckbox(ee) {
let data = this.list2.filter(item => item.currency_name.includes(this.input1) && (ee ? Number(item.usdt_price * item.change_balance) > 1 : true))
this.list = data
},
sousuo(ee) {
let data = this.list2.filter(item => item.currency_name.includes(ee) && (this.checked ? Number(item.usdt_price * item.change_balance) > 1 : true))
this.list = data
},
},
};
</script>
<style lang="scss" scoped>
.spotAccount {
display: flex;
color: #fff;
.dfd {
display: flex;
margin-bottom: 50px;
}
.b-l {
margin-right: 30px;
}
.dsad {
display: flex;
align-items: center;
justify-content: center;
}
.section-1 {
width: 830px;
// height: 475px;
margin-bottom: 30px;
font-size: 18px;
}
.section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 30px;
}
.section-1 h3 {
display: flex;
align-items: center;
}
.section-1 .top-info {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
}
.section-1 .top-info .left-con {
position: relative;
display: flex;
align-items: center;
}
.section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.section-1 .top-info .left-con .unit {
font-size: 14px;
}
.section-1 .top-info .right-con {
display: flex;
justify-content: space-between;
}
.section-1 .top-info .right-con .operate-btn {
width: 100px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
border: 1px solid #84849F;
margin-left: 10px;
background: #000;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.section-1 .top-info .right-con .operate-btn .name {
margin-left: 5px;
}
.section-1 .chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
.section-1 .chart-title .left-con {
font-size: 16px;
}
.section-1 .chart-title .right-con {
display: flex;
}
.section-1 .chart-title .right-con>div {
padding: 3px 12px;
text-align: center;
border-radius: 99px;
border: 1px solid #84849F;
background: #1F1F2F;
margin-left: 6px;
color: #888;
cursor: pointer;
}
.section-1 .chart-title .right-con>div.active {
border-color: #fff;
color: #fff;
}
.sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.left-section .data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
overflow-y: auto;
}
.left-section .data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.left-section .data-list .column1 {
width: 20%;
text-align: left;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .item .column1 {
display: flex;
align-items: center;
}
.left-section .data-list .column1 img {
width: 34px;
height: 34px;
}
.left-section .data-list .item .column1>div {
margin-left: 10px;
text-align: left;
}
.left-section .data-list .item .column1 .brief {
color: #888;
font-size: 12px;
}
.left-section .data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.left-section .data-list .column2 {
width: 45%;
}
.left-section .data-list .item .column2>div:nth-of-type(2) {
color: #888;
font-size: 12px;
}
.left-section .data-list .column3 {
width: 35%;
}
.left-section .data-list .column4 {
width: 10%;
cursor: pointer;
position: relative;
}
.left-section .data-list .column4 .sub-list {
position: absolute;
top: 60px;
right: 0;
z-index: 9;
width: 96px;
background: #2c2c3e;
box-shadow: 1px 2px 6px #0000007d;
border-radius: 4px;
border: 1px solid #363751;
display: flex;
flex-direction: column;
transition: all .3s;
padding: 10px 0;
opacity: 0;
visibility: hidden;
color: #9090ad;
height: auto;
font-size: 14px;
}
.left-section .data-list .column4:hover>.sub-list {
opacity: 1;
top: 50px;
visibility: visible;
}
.left-section .data-list .column4 .sub-list .sub-title {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28px;
text-align: center;
cursor: pointer;
}
.left-section .data-list .column4 .sub-list .sub-title:hover {
background: #1a1b24;
}
}
@media (max-width: 600px) {
.spotAccount .section-1 .top-info[data-v-d9b660c0] {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #31323f;
padding-bottom: 20px;
flex-direction: column;
align-items: flex-start;
}
.spotAccount .section-1 .top-info .right-con {
display: flex;
justify-content: center;
flex-direction: row-reverse;
width: 100%;
margin-top: 15px;
}
.spotAccount .sxtj {
margin: 20px 0;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.spotAccount .section-1.no-vw {
flex: none;
border-radius: 12px;
border: 2px solid #2c2c3e;
padding: 20px 10px;
width: 90vw;
margin-top: 30px;
}
.spotAccount .section-1 h3 {
display: flex;
align-items: center;
font-size: 16px;
}
.spotAccount .section-1 .top-info .left-con .balance {
font-size: 24px;
margin-right: 10px;
}
.spotAccount .left-section .data-list .column1 img {
width: 24px;
height: 24px;
}
.spotAccount .left-section .data-list .item .column1>div div,
.spotAccount .left-section .data-list .column2 div {
font-size: 12px;
}
.spotAccount .left-section .data-list .column3 {
font-size: 12px;
}
.spotAccount .left-section .data-list .column4 {
width: 12%;
cursor: pointer;
position: relative;
}
}
@media (max-width:768px) {
.top-info {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
}
</style>
src/view/assets/withdrawalRecord.vue
+176
View File
@@ -0,0 +1,176 @@
<template>
<div class="ccjl">
<div class="search-wrap">
<div class="right-con">{{$t('zc.當前共有')}} <span>{{total}}</span> {{$t('zc.條記錄')}}</div>
</div>
<div class="data-list">
<div class="titles">
<div class="column0">{{$t('zc.發生時間')}}</div>
<div class="column1">{{$t('zc.幣種')}}</div>
<!-- <div class="column2">{{$t('zc.帳單類型')}}</div> -->
<div class="column3">{{$t('zc.數量')}}</div>
<div class="column5">{{$t('zc.手續費')}}</div>
<div class="column6">{{$t('zc.狀態')}}</div>
</div>
<div class="list-wrap">
<div class="item" v-for="(item,index) in recData" :key="index">
<div class="column0">
<!-- <div>13:31</div> -->
<div>{{item.create_time}}</div>
</div>
<div class="column1">
<div>
<div>{{item.name}}</div>
<div class="brief"></div>
</div>
</div>
<!-- <div class="column2">{{$t('zc.幣幣')}}</div> -->
<div class="column3 font-win">+{{item.number || "0.00"|toFixeds}}</div>
<div class="column5">-</div>
<div class="column6">
<!-- <span>{{item.status == 1?$t("other.审核中"):item.status==2?$t("other.审核完成"):item.status==3?$t("other.审核失败"):''}}</span> -->
<span class="orderStatus" style="color: rgb(219, 158, 0);"
v-if="item.status == 1">{{$t("other.审核中")}}</span>
<span class="orderStatus" style="color: #00f0ff ;" v-if="item.status == 2"> {{$t("other.审核完成")}}</span>
<span class="orderStatus" style="color: red;" v-if="item.status == 3">{{$t("other.审核失败")}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'depositRecord',
data() {
return {
recData: [],
total: 0
}
},
created() {
this.$http({
url: "/api/user/OrderCenter?type=2&page=1&limit=999",
method: "get",
data: {},
headers: {
Authorization: localStorage.getItem("token")
}
}).then(t => {
if ("ok" == t.data.type) {
this.recData = t.data.message.data
this.total = t.data.message.total
}
})
}
}
</script>
<style lang="scss" scoped>
.ccjl {
.search-wrap .right-con {
color: #5e5e7a;
}
.search-wrap .right-con span {
color: #fff;
}
.search-wrap {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #31323f;
}
.data-list {
width: 100%;
height: 650px;
margin-top: 30px;
text-align: center;
}
.data-list .titles {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #5e5e7a;
font-size: 12px;
}
.data-list .column0 {
// width: 20%;
text-align: left;
}
.data-list .column1 {
// width: 10%;
padding-left: 5%;
}
.data-list .column2 {
// width: 25%;
}
.data-list .column3,
.data-list .column4 {
// width: 20%;
}
.data-list .column5 {
// width: 15%;
}
.titles>div,
.data-list .item>div {
flex: 1;
}
.data-list .column5,
.data-list .column6 {
position: relative;
cursor: pointer;
}
.data-list .column6 {
width: 10%;
}
.data-list .list-wrap {
height: 630px;
overflow-y: auto;
}
.data-list .item {
height: 80px;
border-bottom: 1px solid #31323f;
background: #000;
display: flex;
align-items: center;
font-size: 16px;
}
.data-list .item .column0>div:nth-child(2) {
font-size: 12px;
color: #888;
}
.font-win {
color: #00f0ff !important;
}
}
@media screen and (max-width: 800px) {
.ccjl .data-list .item {
font-size: 12px;
}
}
</style>
src/view/homeContent.vue
+4072
View File
File diff suppressed because it is too large Load Diff
src/view/homeContent2.vue
+3768
View File
File diff suppressed because it is too large Load Diff