Merge pull request 'dev_fjb' (#1) from dev_fjb into master

Reviewed-on: #1
dev_fjb
qinzhenpeng 1 year ago
commit 9eb36d75c2

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,6 @@
@font-face {
font-family: 'FZCYJ';
src: url('./DS-Digital.ttf');
font-weight: normal;
font-style: normal;
}

@ -39,7 +39,7 @@ const classObj = computed(() => ({
}))
const { width, height } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design
const WIDTH = 100; // refer to Bootstrap's responsive design
watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) {

@ -0,0 +1,143 @@
/**
* @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

@ -0,0 +1,220 @@
/*
* 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

@ -30,7 +30,7 @@ export default {
/**
* 是否显示logo
*/
sidebarLogo: true,
sidebarLogo: false,
/**
* 是否显示动态标题

@ -16,8 +16,9 @@ const service = axios.create({
// baseURL: import.meta.env.VITE_APP_BASE_API,
// baseURL: 'http://118.31.7.2:8800/',
// baseURL: 'http://192.168.2.17:8800/',
baseURL: 'http://192.168.2.4:8800/',
// baseURL: 'http://202.199.90.115:8800/',
baseURL: 'http://qkljr.sztzjy.com:91/',
// baseURL: 'http://qkljr.sztzjy.com:91/',
// 超时
timeout: 60000
})

@ -1,42 +1,488 @@
<script setup>
</script>
<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 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>
<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;
<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;
display: flex;
align-items: center;
span {
padding-left: 15px;
font-weight: bold;
font-size: 14px;
color: #ffff;
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%;
}
}
}
}
@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…
Cancel
Save