|
|
|
@ -15,10 +15,34 @@ const go = (idx) => {
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-central">
|
|
|
|
|
<div class="central-bank-title">
|
|
|
|
|
<div @click.native="go(1)"><span>钱包管理</span></div>
|
|
|
|
|
<div @click.native="go(2)"><span>交易数据</span></div>
|
|
|
|
|
<div @click.native="go(3)"><span>公司经营</span></div>
|
|
|
|
|
<div @click.native="go(4)"><span>智能合约模拟</span></div>
|
|
|
|
|
<div @click.native="go(1)">
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
<span class="content">钱包管理</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click.native="go(2)">
|
|
|
|
|
<span class="lines"></span>
|
|
|
|
|
<span class="lines"></span>
|
|
|
|
|
<span class="lines"></span>
|
|
|
|
|
<span class="lines"></span>
|
|
|
|
|
<span class="content">交易数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click.native="go(3)">
|
|
|
|
|
<span class="line1"></span>
|
|
|
|
|
<span class="line1"></span>
|
|
|
|
|
<span class="line1"></span>
|
|
|
|
|
<span class="line1"></span>
|
|
|
|
|
<span class="content">公司经营</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click.native="go(4)">
|
|
|
|
|
<span class="line2"></span>
|
|
|
|
|
<span class="line2"></span>
|
|
|
|
|
<span class="line2"></span>
|
|
|
|
|
<span class="line2"></span>
|
|
|
|
|
<span class="content">智能合约模拟</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="central-ban-information">
|
|
|
|
|
<wallet v-if="tabsid == 1"></wallet>
|
|
|
|
@ -45,16 +69,404 @@ const go = (idx) => {
|
|
|
|
|
background: url("../../assets/images/企业用户-切图/钱包管理/导航1-1.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
// line-height: 51px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
span{
|
|
|
|
|
position: relative;
|
|
|
|
|
/* 超出隐藏需要加上 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
// span{
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// }
|
|
|
|
|
// 点击效果
|
|
|
|
|
.line{
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: 233px;
|
|
|
|
|
height: 51px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
}
|
|
|
|
|
// 点击效果
|
|
|
|
|
.line:nth-child(1) {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
/* 加上渐变效果,方可形成拖尾效果 */
|
|
|
|
|
background: linear-gradient(90deg, transparent, #3694ef);
|
|
|
|
|
animation: animate1 8s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 分别控制其上下左右的定位距离,从而形成线条跟随效果 */
|
|
|
|
|
@keyframes animate1 {
|
|
|
|
|
0% {
|
|
|
|
|
left: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line:nth-child(2) {
|
|
|
|
|
top: -100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(180deg, transparent,#3694ef);
|
|
|
|
|
animation: animate2 8s linear infinite;
|
|
|
|
|
/* 注意要加上延时触发动画效果,这样线条才会依次触发 */
|
|
|
|
|
animation-delay: 2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate2 {
|
|
|
|
|
0% {
|
|
|
|
|
top: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
top: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line:nth-child(3) {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(270deg, transparent, #3694ef);
|
|
|
|
|
animation: animate3 8s linear infinite;
|
|
|
|
|
animation-delay: 4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate3 {
|
|
|
|
|
0% {
|
|
|
|
|
right: -100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
height: 2px;
|
|
|
|
|
right: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line:nth-child(4) {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(360deg, transparent, #3a86ff);
|
|
|
|
|
animation: animate4 8s linear infinite;
|
|
|
|
|
animation-delay: 6s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate4 {
|
|
|
|
|
0% {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
bottom: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lines{
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 233px;
|
|
|
|
|
height: 51px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
}
|
|
|
|
|
.lines:nth-child(1) {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
/* 加上渐变效果,方可形成拖尾效果 */
|
|
|
|
|
background: linear-gradient(90deg, transparent, #f4d048);
|
|
|
|
|
animation: animate1 8s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 分别控制其上下左右的定位距离,从而形成线条跟随效果 */
|
|
|
|
|
@keyframes animate1 {
|
|
|
|
|
0% {
|
|
|
|
|
left: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lines:nth-child(2) {
|
|
|
|
|
top: -100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(180deg, transparent,#f4d048);
|
|
|
|
|
animation: animate2 8s linear infinite;
|
|
|
|
|
/* 注意要加上延时触发动画效果,这样线条才会依次触发 */
|
|
|
|
|
animation-delay: 2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate2 {
|
|
|
|
|
0% {
|
|
|
|
|
top: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
top: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lines:nth-child(3) {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(270deg, transparent, #f4d048);
|
|
|
|
|
animation: animate3 8s linear infinite;
|
|
|
|
|
animation-delay: 4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate3 {
|
|
|
|
|
0% {
|
|
|
|
|
right: -100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
height: 2px;
|
|
|
|
|
right: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lines:nth-child(4) {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(360deg, transparent, #f4d048);
|
|
|
|
|
animation: animate4 8s linear infinite;
|
|
|
|
|
animation-delay: 6s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate4 {
|
|
|
|
|
0% {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
bottom: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line1{
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 233px;
|
|
|
|
|
height: 51px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
}
|
|
|
|
|
.line1:nth-child(1) {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
/* 加上渐变效果,方可形成拖尾效果 */
|
|
|
|
|
background: linear-gradient(90deg, transparent, #9475e3);
|
|
|
|
|
animation: animate1 8s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 分别控制其上下左右的定位距离,从而形成线条跟随效果 */
|
|
|
|
|
@keyframes animate1 {
|
|
|
|
|
0% {
|
|
|
|
|
left: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line1:nth-child(2) {
|
|
|
|
|
top: -100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(180deg, transparent,#9475e3);
|
|
|
|
|
animation: animate2 8s linear infinite;
|
|
|
|
|
/* 注意要加上延时触发动画效果,这样线条才会依次触发 */
|
|
|
|
|
animation-delay: 2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate2 {
|
|
|
|
|
0% {
|
|
|
|
|
top: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
top: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line1:nth-child(3) {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(270deg, transparent, #9475e3);
|
|
|
|
|
animation: animate3 8s linear infinite;
|
|
|
|
|
animation-delay: 4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate3 {
|
|
|
|
|
0% {
|
|
|
|
|
right: -100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
height: 2px;
|
|
|
|
|
right: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line1:nth-child(4) {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(360deg, transparent, #9475e3);
|
|
|
|
|
animation: animate4 8s linear infinite;
|
|
|
|
|
animation-delay: 6s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate4 {
|
|
|
|
|
0% {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
bottom: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line2{
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 233px;
|
|
|
|
|
height: 51px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
}
|
|
|
|
|
.line2:nth-child(1) {
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
/* 加上渐变效果,方可形成拖尾效果 */
|
|
|
|
|
background: linear-gradient(90deg, transparent, #7ac2a2);
|
|
|
|
|
animation: animate1 8s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 分别控制其上下左右的定位距离,从而形成线条跟随效果 */
|
|
|
|
|
@keyframes animate1 {
|
|
|
|
|
0% {
|
|
|
|
|
left: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line2:nth-child(2) {
|
|
|
|
|
top: -100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(180deg, transparent,#7ac2a2);
|
|
|
|
|
animation: animate2 8s linear infinite;
|
|
|
|
|
/* 注意要加上延时触发动画效果,这样线条才会依次触发 */
|
|
|
|
|
animation-delay: 2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate2 {
|
|
|
|
|
0% {
|
|
|
|
|
top: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
top: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line2:nth-child(3) {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(270deg, transparent, #7ac2a2);
|
|
|
|
|
animation: animate3 8s linear infinite;
|
|
|
|
|
animation-delay: 4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate3 {
|
|
|
|
|
0% {
|
|
|
|
|
right: -100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
height: 2px;
|
|
|
|
|
right: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line2:nth-child(4) {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(360deg, transparent, #7ac2a2);
|
|
|
|
|
animation: animate4 8s linear infinite;
|
|
|
|
|
animation-delay: 6s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate4 {
|
|
|
|
|
0% {
|
|
|
|
|
bottom: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
100% {
|
|
|
|
|
bottom: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:hover{
|
|
|
|
|
transform: scale(1.01);
|
|
|
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
|
|
@ -62,9 +474,7 @@ const go = (idx) => {
|
|
|
|
|
}
|
|
|
|
|
div:nth-child(2) {
|
|
|
|
|
background: url("../../assets/images/企业用户-切图/钱包管理/导航2-1.png") no-repeat;
|
|
|
|
|
span{
|
|
|
|
|
padding-left: 25px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
div:nth-child(3) {
|
|
|
|
|
background: url("../../assets/images/企业用户-切图/钱包管理/导航3-1.png") no-repeat;
|
|
|
|
|