Compare commits
No commits in common. '9eb36d75c265c328aa827e43c1385a340cd93d1f' and '22836e07c12d3a44245e15e5cf9705d299490862' have entirely different histories.
9eb36d75c2
...
22836e07c1
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,6 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'FZCYJ';
|
||||
src: url('./DS-Digital.ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -1,143 +0,0 @@
|
||||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
var Stats = function () {
|
||||
|
||||
var startTime = Date.now(), prevTime = startTime;
|
||||
var ms = 0, msMin = Infinity, msMax = 0;
|
||||
var fps = 0, fpsMin = Infinity, fpsMax = 0;
|
||||
var frames = 0, mode = 0;
|
||||
|
||||
var container = document.createElement( 'div' );
|
||||
container.id = 'stats';
|
||||
container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
|
||||
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
|
||||
|
||||
var fpsDiv = document.createElement( 'div' );
|
||||
fpsDiv.id = 'fps';
|
||||
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
|
||||
container.appendChild( fpsDiv );
|
||||
|
||||
var fpsText = document.createElement( 'div' );
|
||||
fpsText.id = 'fpsText';
|
||||
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||
fpsText.innerHTML = 'FPS';
|
||||
fpsDiv.appendChild( fpsText );
|
||||
|
||||
var fpsGraph = document.createElement( 'div' );
|
||||
fpsGraph.id = 'fpsGraph';
|
||||
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
|
||||
fpsDiv.appendChild( fpsGraph );
|
||||
|
||||
while ( fpsGraph.children.length < 74 ) {
|
||||
|
||||
var bar = document.createElement( 'span' );
|
||||
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
|
||||
fpsGraph.appendChild( bar );
|
||||
|
||||
}
|
||||
|
||||
var msDiv = document.createElement( 'div' );
|
||||
msDiv.id = 'ms';
|
||||
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
|
||||
container.appendChild( msDiv );
|
||||
|
||||
var msText = document.createElement( 'div' );
|
||||
msText.id = 'msText';
|
||||
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
||||
msText.innerHTML = 'MS';
|
||||
msDiv.appendChild( msText );
|
||||
|
||||
var msGraph = document.createElement( 'div' );
|
||||
msGraph.id = 'msGraph';
|
||||
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
|
||||
msDiv.appendChild( msGraph );
|
||||
|
||||
while ( msGraph.children.length < 74 ) {
|
||||
|
||||
var bar = document.createElement( 'span' );
|
||||
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
|
||||
msGraph.appendChild( bar );
|
||||
|
||||
}
|
||||
|
||||
var setMode = function ( value ) {
|
||||
|
||||
mode = value;
|
||||
|
||||
switch ( mode ) {
|
||||
|
||||
case 0:
|
||||
fpsDiv.style.display = 'block';
|
||||
msDiv.style.display = 'none';
|
||||
break;
|
||||
case 1:
|
||||
fpsDiv.style.display = 'none';
|
||||
msDiv.style.display = 'block';
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var updateGraph = function ( dom, value ) {
|
||||
|
||||
var child = dom.appendChild( dom.firstChild );
|
||||
child.style.height = value + 'px';
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
REVISION: 11,
|
||||
|
||||
domElement: container,
|
||||
|
||||
setMode: setMode,
|
||||
|
||||
begin: function () {
|
||||
|
||||
startTime = Date.now();
|
||||
|
||||
},
|
||||
|
||||
end: function () {
|
||||
|
||||
var time = Date.now();
|
||||
|
||||
ms = time - startTime;
|
||||
msMin = Math.min( msMin, ms );
|
||||
msMax = Math.max( msMax, ms );
|
||||
|
||||
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
|
||||
updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
|
||||
|
||||
frames ++;
|
||||
|
||||
if ( time > prevTime + 1000 ) {
|
||||
|
||||
fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
|
||||
fpsMin = Math.min( fpsMin, fps );
|
||||
fpsMax = Math.max( fpsMax, fps );
|
||||
|
||||
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
|
||||
updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
|
||||
|
||||
prevTime = time;
|
||||
frames = 0;
|
||||
|
||||
}
|
||||
|
||||
return time;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
startTime = this.end();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@ -1,220 +0,0 @@
|
||||
/*
|
||||
* Optimized version of PerspectiveTransform.js
|
||||
* by Edan Kwan
|
||||
* website: http://www.edankwan.com/
|
||||
* twitter: https://twitter.com/#!/edankwan
|
||||
* Lab: www.edankwan.com/lab
|
||||
*
|
||||
* The original PerspectiveTransform.js is created by Israel Pastrana
|
||||
* http://www.is-real.net/experiments/css3/wonder-webkit/js/real/display/PerspectiveTransform.js
|
||||
*
|
||||
* Matrix Libraries from a Java port of JAMA: A Java Matrix Package, http://math.nist.gov/javanumerics/jama/
|
||||
* Developed by Dr Peter Coxhead: http://www.cs.bham.ac.uk/~pxc/
|
||||
* Available here: http://www.cs.bham.ac.uk/~pxc/js/
|
||||
*
|
||||
* I simply removed some irrelevant variables and functions and merge everything into a smaller function. I also added some error checking functions and bug fixing things.
|
||||
*/
|
||||
(function (define) {
|
||||
define(function(){
|
||||
|
||||
function PerspectiveTransform(element, width, height, useBackFacing){
|
||||
|
||||
this.element = element;
|
||||
this.style = element.style;
|
||||
this.computedStyle = window.getComputedStyle(element);
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.useBackFacing = !!useBackFacing;
|
||||
|
||||
this.topLeft = {x: 0, y: 0};
|
||||
this.topRight = {x: width, y: 0};
|
||||
this.bottomLeft = {x: 0, y: height};
|
||||
this.bottomRight = {x: width, y: height};
|
||||
this.calcStyle = '';
|
||||
}
|
||||
|
||||
PerspectiveTransform.useDPRFix = false;
|
||||
PerspectiveTransform.dpr = 1;
|
||||
|
||||
PerspectiveTransform.prototype = (function(){
|
||||
|
||||
var app = {
|
||||
stylePrefix: ''
|
||||
};
|
||||
|
||||
var aM = [[0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0]];
|
||||
var bM = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||
|
||||
function _setTransformStyleName(){
|
||||
var testStyle = document.createElement('div').style;
|
||||
app.stylePrefix =
|
||||
'webkitTransform' in testStyle ? 'webkit' :
|
||||
'MozTransform' in testStyle ? 'Moz' :
|
||||
'msTransform' in testStyle ? 'ms' :
|
||||
'';
|
||||
PerspectiveTransform.transformStyleName = app.stylePrefix + (app.stylePrefix.length>0?'Transform':'transform');
|
||||
PerspectiveTransform.transformDomStyleName = '-'+app.stylePrefix.toLowerCase()+'-transform';
|
||||
PerspectiveTransform.transformOriginStyleName = app.stylePrefix + (app.stylePrefix.length>0?'TransformOrigin':'transformOrigin');
|
||||
PerspectiveTransform.transformOriginDomStyleName = '-'+app.stylePrefix.toLowerCase()+'-transform-origin';
|
||||
}
|
||||
|
||||
|
||||
// Check the distances between each points and if there is some points with the distance lequal to or less than 1 pixel, then return true. Otherwise return false;
|
||||
function _hasDistancesError(){
|
||||
var lenX = this.topLeft.x - this.topRight.x;
|
||||
var lenY = this.topLeft.y - this.topRight.y;
|
||||
if(Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.bottomLeft.x - this.bottomRight.x;
|
||||
lenY = this.bottomLeft.y - this.bottomRight.y;
|
||||
if(Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topLeft.x - this.bottomLeft.x;
|
||||
lenY = this.topLeft.y - this.bottomLeft.y;
|
||||
if(Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topRight.x - this.bottomRight.x;
|
||||
lenY = this.topRight.y - this.bottomRight.y;
|
||||
if( Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topLeft.x - this.bottomRight.x;
|
||||
lenY = this.topLeft.y - this.bottomRight.y;
|
||||
if( Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
lenX = this.topRight.x - this.bottomLeft.x;
|
||||
lenY = this.topRight.y - this.bottomLeft.y;
|
||||
if( Math.sqrt(lenX * lenX + lenY * lenY)<=1) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get the determinant of given 3 points
|
||||
function _getDeterminant(p0, p1, p2){
|
||||
return p0.x * p1.y + p1.x * p2.y + p2.x * p0.y - p0.y * p1.x - p1.y * p2.x - p2.y * p0.x;
|
||||
}
|
||||
|
||||
// Return true if it is a concave polygon or if it is backfacing when the useBackFacing property is false. Otehrwise return true;
|
||||
function _hasPolyonError(){
|
||||
var det1 = _getDeterminant(this.topLeft, this.topRight, this.bottomRight);
|
||||
var det2 = _getDeterminant(this.bottomRight, this.bottomLeft, this.topLeft);
|
||||
if(this.useBackFacing){
|
||||
if(det1*det2<=0) return true;
|
||||
}else{
|
||||
if(det1<=0||det2<=0) return true;
|
||||
}
|
||||
var det1 = _getDeterminant(this.topRight, this.bottomRight, this.bottomLeft);
|
||||
var det2 = _getDeterminant(this.bottomLeft, this.topLeft, this.topRight);
|
||||
if(this.useBackFacing){
|
||||
if(det1*det2<=0) return true;
|
||||
}else{
|
||||
if(det1<=0||det2<=0) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function checkError(){
|
||||
if(_hasDistancesError.apply(this)) return 1; // Points are too close to each other.
|
||||
if(_hasPolyonError.apply(this)) return 2; // Concave or backfacing if the useBackFacing property is false
|
||||
return 0; // no error
|
||||
}
|
||||
|
||||
function calc() {
|
||||
var width = this.width;
|
||||
var height = this.height;
|
||||
|
||||
// get the offset from the transfrom origin of the element
|
||||
var offsetX = 0;
|
||||
var offsetY = 0;
|
||||
var offset = this.computedStyle.getPropertyValue(PerspectiveTransform.transformOriginDomStyleName);
|
||||
if(offset.indexOf('px')>-1){
|
||||
offset = offset.split('px');
|
||||
offsetX = -parseFloat(offset[0]);
|
||||
offsetY = -parseFloat(offset[1]);
|
||||
}else if(offset.indexOf('%')>-1){
|
||||
offset = offset.split('%');
|
||||
offsetX = -parseFloat(offset[0]) * width / 100;
|
||||
offsetY = -parseFloat(offset[1]) * height / 100;
|
||||
}
|
||||
|
||||
// magic here:
|
||||
var dst = [this.topLeft, this.topRight, this.bottomLeft, this.bottomRight];
|
||||
var arr = [0, 1, 2, 3, 4, 5, 6, 7];
|
||||
for(var i = 0; i < 4; i++) {
|
||||
aM[i][0] = aM[i+4][3] = i & 1 ? width + offsetX : offsetX;
|
||||
aM[i][1] = aM[i+4][4] = (i > 1 ? height + offsetY : offsetY);
|
||||
aM[i][6] = (i & 1 ? -offsetX-width : -offsetX) * (dst[i].x + offsetX);
|
||||
aM[i][7] = (i > 1 ? -offsetY-height : -offsetY) * (dst[i].x + offsetX);
|
||||
aM[i+4][6] = (i & 1 ? -offsetX-width : -offsetX) * (dst[i].y + offsetY);
|
||||
aM[i+4][7] = (i > 1 ? -offsetY-height : -offsetY) * (dst[i].y + offsetY);
|
||||
bM[i] = (dst[i].x + offsetX);
|
||||
bM[i + 4] = (dst[i].y + offsetY);
|
||||
aM[i][2] = aM[i+4][5] = 1;
|
||||
aM[i][3] = aM[i][4] = aM[i][5] = aM[i+4][0] = aM[i+4][1] = aM[i+4][2] = 0;
|
||||
}
|
||||
var kmax, sum;
|
||||
var row;
|
||||
var col = [];
|
||||
var i, j, k, tmp;
|
||||
for(var j = 0; j < 8; j++) {
|
||||
for(var i = 0; i < 8; i++) col[i] = aM[i][j];
|
||||
for(i = 0; i < 8; i++) {
|
||||
row = aM[i];
|
||||
kmax = i<j?i:j;
|
||||
sum = 0.0;
|
||||
for(var k = 0; k < kmax; k++) sum += row[k] * col[k];
|
||||
row[j] = col[i] -= sum;
|
||||
}
|
||||
var p = j;
|
||||
for(i = j + 1; i < 8; i++) {
|
||||
if(Math.abs(col[i]) > Math.abs(col[p])) p = i;
|
||||
}
|
||||
if(p != j) {
|
||||
for(k = 0; k < 8; k++) {
|
||||
tmp = aM[p][k];
|
||||
aM[p][k] = aM[j][k];
|
||||
aM[j][k] = tmp;
|
||||
}
|
||||
tmp = arr[p];
|
||||
arr[p] = arr[j];
|
||||
arr[j] = tmp;
|
||||
}
|
||||
if(aM[j][j] != 0.0) for(i = j + 1; i < 8; i++) aM[i][j] /= aM[j][j];
|
||||
}
|
||||
for(i = 0; i < 8; i++) arr[i] = bM[arr[i]];
|
||||
for(k = 0; k < 8; k++) {
|
||||
for(i = k + 1; i < 8; i++) arr[i] -= arr[k] * aM[i][k];
|
||||
}
|
||||
for(k = 7; k > -1; k--) {
|
||||
arr[k] /= aM[k][k];
|
||||
for(i = 0; i < k; i++) arr[i] -= arr[k] * aM[i][k];
|
||||
}
|
||||
|
||||
return this.calcStyle = 'matrix3d(' + arr[0].toFixed(9) + ',' + arr[3].toFixed(9) + ', 0,' + arr[6].toFixed(9) + ',' + arr[1].toFixed(9) + ',' + arr[4].toFixed(9) + ', 0,' + arr[7].toFixed(9) + ',0, 0, 1, 0,' + arr[2].toFixed(9) + ',' + arr[5].toFixed(9) + ', 0, 1)';
|
||||
|
||||
}
|
||||
|
||||
function update(style) {
|
||||
|
||||
style = style || this.calcStyle;
|
||||
|
||||
if(PerspectiveTransform.useDPRFix) {
|
||||
var dpr = PerspectiveTransform.dpr;
|
||||
style = 'scale(' + dpr + ',' + dpr + ')perspective(1000px)' + style + 'translateZ('+ ((1 - dpr) * 1000) + 'px)';
|
||||
}
|
||||
|
||||
// use toFixed() just in case the Number became something like 3.10000001234e-9
|
||||
return this.style[PerspectiveTransform.transformStyleName] = style;
|
||||
}
|
||||
|
||||
_setTransformStyleName();
|
||||
|
||||
app.calc = calc;
|
||||
app.update = update;
|
||||
app.checkError = checkError;
|
||||
|
||||
return app;
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
return PerspectiveTransform;
|
||||
});
|
||||
}(typeof define === "function" && define.amd ? define : function (app) {
|
||||
window["PerspectiveTransform"] = app();
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
@ -1,488 +1,42 @@
|
||||
<template>
|
||||
<div class="app-study">
|
||||
<!-- <el-button style="background:url('../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png'); width: 143px;">全屏</el-button> -->
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" @click="fullScreen">
|
||||
<div class="visualization">
|
||||
|
||||
<div class="visMain">
|
||||
|
||||
<div class="top">
|
||||
<span class="linear-gradient-text">xxx学校人民币数字货币交易总览</span>
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/top.png">
|
||||
</div>
|
||||
<div class="leftMain">
|
||||
<img style="width: 100%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题1.pn.png">
|
||||
<span class="leftText">交易总览</span>
|
||||
<div class="leftSmallWindow">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-1.png">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-2.png">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-3.png">
|
||||
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-4.png">
|
||||
<div class="font1"><span class="font3">交易总次数</span><span class="font2">123321 </span>次</div>
|
||||
<div class="font4"><span class="font3">交易总金额</span><span class="font2">123321-CNY</span></div>
|
||||
<div class="font5"><span class="font3">发放红包总数量</span><span class="font2">123321 </span>个</div>
|
||||
<div class="font6"><span class="font3">发放红包总金额</span><span class="font2">123321 </span>个</div>
|
||||
</div>
|
||||
|
||||
<img style="width: 100%; position: absolute; top:350px;left:0px" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题2.pn.png">
|
||||
<span class="leftText2">商业银行交易情况</span>
|
||||
<div class="leftSmallWindow2">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框1.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框2.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框3.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框4.png">
|
||||
<div class="fontFont1"><span class="fontFont2">商业银行数量</span><span><a>56</a>家</span></div>
|
||||
<div class="fontFont3"><span class="fontFont2">用户数量</span><span><a>102</a>个</span></div>
|
||||
<div class="fontFont4"><span class="fontFont2">兑换数字人民币金额</span><span><a>12021-CNY</a></span></div>
|
||||
<div class="fontFont5"><span class="fontFont2">发送红包数量</span><span><a>12021-CNY</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="earth">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/边圈（做旋转）.png">
|
||||
</div>
|
||||
<div class="rightMain">
|
||||
<img style="width: 100%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题3.pn.png">
|
||||
<span class="leftText">企业交易情况</span>
|
||||
<div class="leftSmallWindow3">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/企业用户数量.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/上架商品数量.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/兑换数字人民币金额.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/发放红包金额.png">
|
||||
<div class="fontFont1"><span><a>56</a>家</span><span class="fontFont2">企业用户数量</span></div>
|
||||
<div class="fontFont3"><span><a>102</a>个</span><span class="fontFont2">上架商品数量</span></div>
|
||||
<div class="fontFont4"><span><a>12021-CNY</a></span><span class="fontFont2">兑换数字人民币金额</span></div>
|
||||
<div class="fontFont5"><span><a>12021-CNY</a></span><span class="fontFont2">发送红包金额</span></div>
|
||||
</div>
|
||||
<img style="width: 100%; position: absolute; top:350px;left:0px" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题2.pn.png">
|
||||
<span class="leftText2">商业银行交易情况</span>
|
||||
<div class="leftSmallWindow4">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-1.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-2.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-3.png">
|
||||
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-4.png">
|
||||
<div class="fontFont6"><span class="fontFont2">个人用户数量</span><span><a>56</a>个</span></div>
|
||||
<div class="fontFont7"><span class="fontFont2">兑换数字人民币金额</span><span><a>102</a>个</span></div>
|
||||
<div class="fontFont8"><span class="fontFont2">消费中金额</span><span><a>12021-CNY</a></span></div>
|
||||
<div class="fontFont9"><span class="fontFont2">领取红包金额</span><span><a>12021-CNY</a></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {toggleFullscreenContainer} from '@/utils/index.js'
|
||||
|
||||
const fullScreen=()=>{
|
||||
toggleFullscreenContainer('.visMain')
|
||||
document.addEventListener('fullscreenchange', exitFullscreenHandler);
|
||||
document.addEventListener('webkitfullscreenchange', exitFullscreenHandler);
|
||||
document.addEventListener('mozfullscreenchange', exitFullscreenHandler);
|
||||
document.addEventListener('MSFullscreenChange', exitFullscreenHandler);
|
||||
const element = document.querySelector('.earth');
|
||||
element.style.width='673px'
|
||||
element.style.height='675px'
|
||||
element.style.marginTop='160px'
|
||||
}
|
||||
// 处理退出全屏的函数
|
||||
function exitFullscreenHandler() {
|
||||
if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
||||
!document.webkitFullscreenElement && !document.msFullscreenElement) {
|
||||
// 退出全屏后执行的代码
|
||||
// console.log('已退出全屏');
|
||||
const element = document.querySelector('.earth');
|
||||
element.style.width='502px'
|
||||
element.style.height='504px'
|
||||
element.style.marginTop='111px'
|
||||
// 在这里可以添加你想要执行的操作
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
@import '../../../assets/fonts/font.css';
|
||||
.visualization{
|
||||
height: 760px;
|
||||
<template>
|
||||
<div class="app-study">
|
||||
<div>
|
||||
</div>
|
||||
<!--<el-row>
|
||||
<el-col :span="24">
|
||||
<img src="../../assets/images/32.png" alt="" />
|
||||
<span>操作记录和成绩</span>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
<style lang='scss' scoped>
|
||||
.app-study{
|
||||
// padding: 20px;
|
||||
height: 105vh;
|
||||
// border: 1px solid #238AFF;
|
||||
// border-radius: 5px;
|
||||
div{
|
||||
margin-top: -90px;
|
||||
margin-left: -130px;
|
||||
height: 995px;
|
||||
background: url('../../../assets/images/央行可视化监控中心.png' ) no-repeat !important;
|
||||
background-size: 102% 100% !important;
|
||||
}
|
||||
.el-col-24 {
|
||||
height: 69px;
|
||||
padding: 15px 13px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.visMain{
|
||||
position: relative;
|
||||
height: 750px; /* 设置div的高度 */
|
||||
// width: 1554px; /* 设置div的宽度 */
|
||||
width: calc(100% - 10%);
|
||||
margin: auto;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/背景.png');
|
||||
background-size: 100% 100%;
|
||||
.rightMain{
|
||||
position: absolute;
|
||||
width: 462px;
|
||||
right: 24px;
|
||||
top:94px;
|
||||
.leftText{
|
||||
position: absolute;
|
||||
top: 21%;
|
||||
left: 22%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 19px;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 600;
|
||||
}
|
||||
.leftText2{
|
||||
position: absolute;
|
||||
top: 359px;
|
||||
left: 26%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 19px;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 600;
|
||||
}
|
||||
.leftSmallWindow3{
|
||||
position: absolute;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
||||
width: 100%;
|
||||
height: 272px;
|
||||
margin-top: 18px;
|
||||
img{
|
||||
margin-left: 31px;
|
||||
height: 113px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
.leftSmallWindow4{
|
||||
position: absolute;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
top: 367px;
|
||||
margin-top: 18px;
|
||||
img{
|
||||
margin-left: 31px;
|
||||
height: 122px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
.fontFont1{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 107px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont6{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 83px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont2{
|
||||
font-size: 14px !important;
|
||||
display: list-item;
|
||||
list-style-type: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.fontFont3{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 328px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont7{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 281px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont4{
|
||||
position: absolute;
|
||||
top: 172px;
|
||||
left: 91px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont8{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 201px;
|
||||
left: 76px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont5{
|
||||
position: absolute;
|
||||
top: 172px;
|
||||
left: 320px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont9{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 202px;
|
||||
left: 292px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftMain{
|
||||
position: absolute;
|
||||
// height: 200px;
|
||||
width: 462px;
|
||||
left: 21px;
|
||||
margin-top: 20px;
|
||||
// border: 1px solid red;
|
||||
.leftText{
|
||||
position: absolute;
|
||||
top: 21%;
|
||||
left: 18%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 19px;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 600;
|
||||
}
|
||||
.leftText2{
|
||||
position: absolute;
|
||||
top: 359px;
|
||||
left: 26%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 19px;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 600;
|
||||
}
|
||||
.leftSmallWindow2{
|
||||
position: absolute;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
||||
width: 100%;
|
||||
height: 275px;
|
||||
top:350px;
|
||||
margin-top: 32px;
|
||||
img{
|
||||
margin-left: 7px;
|
||||
height: 114px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.fontFont1{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 83px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont2{
|
||||
font-size: 16px !important;
|
||||
display: list-item;
|
||||
list-style-type: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.fontFont3{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 312px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont4{
|
||||
position: absolute;
|
||||
top: 172px;
|
||||
left: 83px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.fontFont5{
|
||||
position: absolute;
|
||||
top: 172px;
|
||||
left: 312px;
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
font-family:'FZCYJ';
|
||||
color: yellow;
|
||||
font-size: 25px;
|
||||
}
|
||||
span{
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftSmallWindow{
|
||||
position: absolute;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
||||
width: 100%;
|
||||
height: 253px;
|
||||
margin-top: 32px;
|
||||
img{
|
||||
margin-left: 7px;
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
|
||||
}
|
||||
.font2{
|
||||
font-family: 'FZCYJ';
|
||||
font-size: 25px;
|
||||
color: yellow;
|
||||
}
|
||||
.font1{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 103px;
|
||||
}
|
||||
.font3{
|
||||
margin-right: 90px;
|
||||
}
|
||||
.font4{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 74px;
|
||||
left: 103px;
|
||||
}
|
||||
.font5{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 131px;
|
||||
left: 103px;
|
||||
}
|
||||
.font6{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 187px;
|
||||
left: 103px;
|
||||
}
|
||||
// border: 1px solid black;
|
||||
}
|
||||
}
|
||||
.top{
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.earth{
|
||||
position: relative;
|
||||
width: 502px;
|
||||
height: 504px;
|
||||
margin: auto;
|
||||
margin-top: 111px;
|
||||
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/地球.png') no-repeat;
|
||||
background-size: 95% 95%;
|
||||
background-position: center;
|
||||
animation: rotate 45s linear infinite;
|
||||
img{
|
||||
animation: rotate2 40s linear infinite;
|
||||
width: 100%;
|
||||
}
|
||||
align-items: center;
|
||||
span {
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #ffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}}
|
||||
@keyframes rotate2 {
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}}
|
||||
.linear-gradient-text{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
|
||||
background: linear-gradient(180deg, #FF2052F6 16%, #FF5DDCF9 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue