1072 lines
26 KiB
Vue
1072 lines
26 KiB
Vue
<template>
|
|
<div class="contentMain">
|
|
<div class="contentPage" >
|
|
<router-view :key="key" />
|
|
</div>
|
|
<section v-if="$isMobile" class="moveFooterBox">
|
|
<div class="footerBox">
|
|
<div class="logoBox">
|
|
<img class="logoImg" src="../assets/img/logo.png" alt="logo图片" />
|
|
<span class="copyright">Copyright © 2024 M2pool</span>
|
|
</div>
|
|
<div class="missionBox">
|
|
<p class="mission">{{ $t(`home.mission`) }}</p>
|
|
<p class="missionText">{{ $t(`home.missionText`) }}</p>
|
|
</div>
|
|
|
|
<div class="missionBox">
|
|
<p class="mission">{{ $t(`home.service`) }}</p>
|
|
<div class="FMenu">
|
|
|
|
<p > <span @click="jumpPage1(`/apiFile`)">{{ $t(`home.APIfile`) }}</span></p>
|
|
<p > <span @click="jumpPage2(`/rate`)">{{ $t(`home.rateFooter`) }}</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="missionBox">
|
|
<p class="mission">{{ $t(`home.userAssistance`) }}</p>
|
|
|
|
<div class="FMenu">
|
|
<p >
|
|
<span @click="jumpPage3(`/AccessMiningPool`)">{{ $t(`home.miningTutorial`) }}</span>
|
|
</p>
|
|
<p > <span @click="jumpPage3(`/submitWorkOrder`)">{{ $t(`home.submitWorkOrder`) }}</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="missionBox">
|
|
<p class="mission">{{ $t(`home.aboutUs`) }}</p>
|
|
<div class="FMenu">
|
|
<p>
|
|
<a href="mailto:support@m2pool.com">{{ $t(`home.joinUs`) }}</a>
|
|
|
|
</p>
|
|
<p> <a href="mailto:support@m2pool.com">{{
|
|
$t(`home.contactCustomerService`)
|
|
}}</a></p>
|
|
<p >
|
|
<span @click="jumpPage(`/ServiceTerms`)">{{ $t(`home.serviceTerms`) }}</span>
|
|
</p>
|
|
<p>
|
|
<a href="mailto:support@m2pool.com">{{
|
|
$t(`home.businessCooperation`)
|
|
}}</a>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="footerBox" v-else>
|
|
<el-row style="width:100%">
|
|
<el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
|
|
<div class="footerSon logo2">
|
|
<div class="logoBox">
|
|
<img class="logoImg" src="../assets/img/logo.png" alt="logo图片" />
|
|
<span class="copyright">Copyright © 2024 M2pool</span>
|
|
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
|
<div class="footerSon text">
|
|
<h4>{{ $t(`home.mission`) }}</h4>
|
|
<div>{{ $t(`home.missionText`) }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
|
|
<div class="footerSon product">
|
|
<ul>
|
|
<li class="productTitle">
|
|
<h4>{{ $t(`home.service`) }}</h4>
|
|
</li>
|
|
<li > <span @click="jumpPage1(`/apiFile`)">{{ $t(`home.APIfile`) }}</span></li>
|
|
|
|
<li > <span @click="jumpPage2(`/rate`)">{{ $t(`home.rateFooter`) }}</span></li>
|
|
</ul>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
|
|
<div class="footerSon product">
|
|
<ul>
|
|
<li class="productTitle">
|
|
<h4>{{ $t(`home.userAssistance`) }}</h4>
|
|
</li>
|
|
<li >
|
|
<span @click="jumpPage3(`/AccessMiningPool`)"> {{ $t(`home.miningTutorial`) }}</span>
|
|
</li>
|
|
<!-- <li>{{ $t(`home.historicalAnnouncement`) }}</li>
|
|
<li>{{ $t(`home.commonProblem`) }}</li> -->
|
|
<li > <span @click="jumpPage4(`/submitWorkOrder`)">{{ $t(`home.submitWorkOrder`) }}</span></li>
|
|
</ul>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
|
|
<div class="footerSon product">
|
|
<ul>
|
|
<li class="productTitle">
|
|
<h4>{{ $t(`home.aboutUs`) }}</h4>
|
|
</li>
|
|
<li>
|
|
<a href="mailto:support@m2pool.com">{{ $t(`home.joinUs`) }}</a>
|
|
</li>
|
|
<li >
|
|
<span @click="jumpPage(`/ServiceTerms`)"> {{ $t(`home.serviceTerms`) }}</span>
|
|
</li>
|
|
<li>
|
|
<a href="mailto:support@m2pool.com">{{
|
|
$t(`home.businessCooperation`)
|
|
}}</a>
|
|
</li>
|
|
<li>
|
|
<a href="mailto:support@m2pool.com">{{
|
|
$t(`home.contactCustomerService`)
|
|
}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { line } from "../utils/echarts";
|
|
import * as echarts from "echarts";
|
|
import { getImageUrl } from "../utils/publicMethods";
|
|
export default {
|
|
name: "AppMain",
|
|
components: {
|
|
comHeard: () => import("./header.vue"),
|
|
},
|
|
computed: {
|
|
key() {
|
|
return this.$route.path;
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: "second",
|
|
option: { ...line },
|
|
option2: { ...line },
|
|
powerDialogVisible: false,
|
|
minerDialogVisible: false,
|
|
currentPage: 1,
|
|
currency: "mona",
|
|
currencyPath:
|
|
"https://s2.coinmarketcap.com/static/img/coins/64x64/213.png",
|
|
currencyList: [
|
|
{
|
|
value: "grs",
|
|
label: "grs",
|
|
// img: require("../assets/images/grs.png"),
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/258.png",
|
|
},
|
|
{
|
|
value: "mona",
|
|
label: "mona",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/213.png",
|
|
},
|
|
{
|
|
value: "dgb_skein",
|
|
label: "dgb-skein-pool1",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
{
|
|
value: "dgb_qubit",
|
|
label: "dgb-qubit-pool1",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
{
|
|
value: "dgb_odo",
|
|
label: "dgb-odocrypt-pool1",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
{
|
|
value: "dgb2_odo",
|
|
label: "dgb-odocrypt-pool2",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
{
|
|
value: "dgb_qubit_a10",
|
|
label: "dgb-qubit-pool2",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
{
|
|
value: "dgb_skein_a10",
|
|
label: "dgb-skein-pool2",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
{
|
|
value: "dgb_odo_b20",
|
|
label: "dgb-odoscrypt-pool3",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
},
|
|
],
|
|
scrollTop: 0,
|
|
isLogin: true,
|
|
bthText: "English",
|
|
miningAccountList: [
|
|
{
|
|
title: "grs",
|
|
coin: "grs",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/258.png",
|
|
children: [
|
|
{ account: "miner", id: "1" },
|
|
{ account: "test", id: "2" },
|
|
],
|
|
},
|
|
{
|
|
title: "mona",
|
|
coin: "mona",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/213.png",
|
|
children: [
|
|
{ account: "miner", id: "1" },
|
|
{ account: "test", id: "2" },
|
|
],
|
|
},
|
|
{
|
|
title: "dgb-skein-pool1",
|
|
coin: "dgb_skein",
|
|
imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
|
|
children: [
|
|
{ account: "miner", id: "1" },
|
|
{ account: "test", id: "2" },
|
|
],
|
|
},
|
|
],
|
|
activeItemCoin:{
|
|
coin: "nexa",
|
|
imgUrl:getImageUrl(`/img/nexa.png`)
|
|
},
|
|
lang: "zh",
|
|
};
|
|
},
|
|
|
|
created() {},
|
|
mounted() {
|
|
this.lang = this.$i18n.locale;
|
|
window.scrollTo(0, 0);
|
|
let activeItemCoin=localStorage.getItem("activeItemCoin")
|
|
this.activeItemCoin = JSON.parse(activeItemCoin)
|
|
let currencyList = localStorage.getItem("currencyList")
|
|
this.currencyList = JSON.parse(currencyList)
|
|
|
|
window.addEventListener("setItem", () => {
|
|
let activeItemCoin=localStorage.getItem("activeItemCoin")
|
|
this.activeItemCoin = JSON.parse(activeItemCoin)
|
|
let currencyList = localStorage.getItem("currencyList")
|
|
this.currencyList = JSON.parse(currencyList)
|
|
|
|
});
|
|
},
|
|
methods: {
|
|
jumpPage() {
|
|
const lang = this.$i18n.locale; // 使用当前语言
|
|
this.$router.push(`/${lang}/ServiceTerms`);
|
|
|
|
},
|
|
jumpPage1(){
|
|
const lang = this.$i18n.locale;
|
|
this.$router.push(`/${lang}/apiFile`);
|
|
},
|
|
jumpPage2(){
|
|
const lang = this.$i18n.locale;
|
|
this.$router.push(`/${lang}/rate`);
|
|
|
|
},
|
|
jumpPage3(path){
|
|
|
|
|
|
console.log(path,1366565);
|
|
|
|
|
|
const lang = this.$i18n.locale;
|
|
|
|
|
|
|
|
|
|
|
|
if (path === '/AccessMiningPool') {
|
|
const coin = this.currencyList.find(item => item.value === this.activeItemCoin.value);
|
|
if (!coin) return;
|
|
let jumpName = coin.path.charAt(0).toUpperCase() + coin.path.slice(1) //name跳转 首字母大写
|
|
console.log(jumpName,1366565,coin);
|
|
let url = `/${lang}/AccessMiningPool`
|
|
// 使用 name 进行导航，避免重复的路由参数
|
|
this.$router.push({
|
|
name:'AccessMiningPool',
|
|
params: {
|
|
coin: this.activeItemCoin.value,
|
|
imgUrl: this.activeItemCoin.imgUrl
|
|
},
|
|
|
|
replace: false // 保留历史记录，允许回退
|
|
});
|
|
|
|
} else {
|
|
|
|
|
|
// 移除开头的斜杠，统一处理路径格式
|
|
// const cleanPath = path.startsWith('/') ? path.slice(1) : path;
|
|
let cleanPath = `/${lang}/AccessMiningPool`
|
|
this.$router.push(cleanPath);
|
|
}
|
|
|
|
|
|
},
|
|
jumpPage4(){
|
|
const lang = this.$i18n.locale;
|
|
this.$router.push(`/${lang}/submitWorkOrder`);
|
|
},
|
|
|
|
|
|
handleCommand(item) {},
|
|
handleScroll(event) {
|
|
if (this.$route.path == "/") {
|
|
this.scrollTop = event.target.scrollTop;
|
|
// this.scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
if (this.scrollTop >= 300) {
|
|
this.$refs.head.style.backgroundColor = "#FFF";
|
|
this.$refs.head.style.position = "fixed";
|
|
this.$refs.head.style.top = "0";
|
|
} else {
|
|
this.$refs.head.style.backgroundColor = "initial";
|
|
this.$refs.head.style.position = "tatic";
|
|
}
|
|
}
|
|
},
|
|
clickCurrency(item) {
|
|
this.currency = item.label;
|
|
this.currencyPath = item.imgUrl;
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
handelPower() {
|
|
this.powerDialogVisible = true;
|
|
|
|
this.$nextTick(() => {
|
|
this.inCharts();
|
|
});
|
|
},
|
|
handelMiner() {
|
|
this.minerDialogVisible = true;
|
|
this.$nextTick(() => {
|
|
this.myChart2 = echarts.init(document.getElementById("minerChart"));
|
|
this.myChart2.setOption(this.option2);
|
|
});
|
|
},
|
|
handleSizeChange(val) {
|
|
console.log(`每页 ${val} 条`);
|
|
},
|
|
handleCurrentChange(val) {
|
|
console.log(`当前页: ${val}`);
|
|
},
|
|
//初始化图表
|
|
inCharts() {
|
|
this.myChart = echarts.init(document.getElementById("chart"));
|
|
|
|
this.myChart.setOption(this.option);
|
|
|
|
// window.addEventListener("resize", () => {
|
|
// if (this.myChart) this.myChart.resize();
|
|
// });
|
|
},
|
|
handelLogin() {
|
|
this.isLogin = true;
|
|
this.$router.push("/login");
|
|
},
|
|
handelRegister() {
|
|
this.$router.push({ path: "/register" });
|
|
},
|
|
handelLogin222() {
|
|
this.isLogin = !this.isLogin;
|
|
},
|
|
handelJump(url) {
|
|
this.$router.push({ path: url });
|
|
},
|
|
|
|
handelLang() {
|
|
// 获取当前路由信息
|
|
const currentPath = this.$route.path;
|
|
const currentLang = this.$i18n.locale;
|
|
const newLang = currentLang === 'zh' ? 'en' : 'zh';
|
|
|
|
// 更新语言
|
|
this.$i18n.locale = newLang;
|
|
this.lang = newLang;
|
|
this.bthText = newLang === 'zh' ? 'English' : '简体中文';
|
|
|
|
// 更新路由路径 - 替换语言部分
|
|
const newPath = currentPath.replace(`/${currentLang}/`, `/${newLang}/`);
|
|
|
|
// 跳转到新路径
|
|
this.$router.push(newPath).catch(err => {
|
|
if(err.name !== 'NavigationDuplicated') {
|
|
console.error('路由跳转失败:', err);
|
|
}
|
|
});
|
|
|
|
localStorage.setItem("lang", newLang);
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// 手机端适配 背景色修改
|
|
@media screen and (min-width: 220px) and (max-width: 1279px) {
|
|
.contentMain {
|
|
background-image: none !important;
|
|
}
|
|
.contentPage{
|
|
min-height: 200px !important;
|
|
}
|
|
.moveFooterBox {
|
|
width: 100%;
|
|
// height: 300px;
|
|
background-image: url("../assets/mobile/home/homebgbtm.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 90%;
|
|
}
|
|
.footerBox {
|
|
align-items: flex-start !important;
|
|
margin: 0 !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto !important;
|
|
padding-left: 0 !important;
|
|
.logoBox {
|
|
width: 100%;
|
|
// background: palegoldenrod;
|
|
height: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 18px 18px;
|
|
border-bottom: 1px solid #ccc;
|
|
.logoImg {
|
|
width: 140px;
|
|
}
|
|
.copyright {
|
|
margin-top: 15px;
|
|
font-size: 0.8rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
}
|
|
.missionBox {
|
|
width: 100%;
|
|
min-height: 130px;
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 10px 18px;
|
|
|
|
|
|
|
|
.mission {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
.missionText {
|
|
margin-top: 18px;
|
|
font-size: 0.85rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
padding-left: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.FMenu {
|
|
width: 100%;
|
|
padding-left: 18px;
|
|
font-size: 0.85rem;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
margin-top: 18px;
|
|
p {
|
|
// height: 35px;
|
|
line-height: 30px;
|
|
width: 50%;
|
|
|
|
a:nth-of-type(2){
|
|
margin-left: 28%;
|
|
}
|
|
|
|
span{
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
.contentPage{
|
|
min-height: 630px
|
|
}
|
|
|
|
.contentMain {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
// overflow-y: auto;
|
|
background-image: url(../assets/img/bktop.png);
|
|
background-size: 100% 28%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0% -6%;
|
|
// overflow-y: scroll;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// .headerBox{
|
|
// height: 60PX;
|
|
// width: 100%;
|
|
// /* outline: 1px solid red; */
|
|
|
|
// font-size:1.1em;
|
|
// // border-bottom:1PX solid #ccc;
|
|
// // background-image: url(../assets/img/bktop.png);
|
|
// // background-position: 60% 8%;
|
|
// // background-size: cover;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// // position: fixed;
|
|
// // left: 0;
|
|
// // top: 0;
|
|
// z-index: 99;
|
|
|
|
// }
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 95%;
|
|
/* outline: 1px solid red; */
|
|
// outline: 1PX solid red;
|
|
// padding: 0px 5%;
|
|
padding: 0 5%;
|
|
}
|
|
.logo {
|
|
width: 18%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.8em;
|
|
|
|
img {
|
|
width: 38%;
|
|
}
|
|
}
|
|
.topMenu {
|
|
width: 80%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
// background: goldenrod;
|
|
|
|
.afterLoggingIn {
|
|
// background: palegreen;
|
|
width: 35%;
|
|
.langBox {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 20%;
|
|
}
|
|
.LangLine {
|
|
width: 1px;
|
|
height: 60%;
|
|
background: #ccc;
|
|
margin-right: 2%;
|
|
}
|
|
}
|
|
.notLoggedIn {
|
|
width: 35%;
|
|
.langBox {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 20%;
|
|
}
|
|
.LangLine {
|
|
width: 1px;
|
|
height: 60%;
|
|
background: #ccc;
|
|
margin-right: 2%;
|
|
}
|
|
}
|
|
}
|
|
.menuBox {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
margin: 0%;
|
|
// background: #fff;
|
|
|
|
li {
|
|
list-style: none;
|
|
// width: calc(100% / 5);
|
|
height: 45%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-left: 8%;
|
|
// font-size: 1em;
|
|
}
|
|
li:hover {
|
|
color: black;
|
|
}
|
|
.login {
|
|
padding: 2px 18px;
|
|
}
|
|
.login:hover {
|
|
color: #21a0ff;
|
|
border: 1px solid #21a0ff;
|
|
border-radius: 10px;
|
|
}
|
|
.register {
|
|
background: #d2c3ea;
|
|
border-radius: 25px;
|
|
padding: 0px 25px;
|
|
}
|
|
.register:hover {
|
|
color: #000;
|
|
color: #fe4886;
|
|
}
|
|
}
|
|
|
|
.whiteBg {
|
|
// height: 10%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
// transform: translateY(-50px);
|
|
// transition: opacity 1s ease, transform 1s ease;
|
|
// position: sticky;
|
|
// top: 0;
|
|
// left: 0;
|
|
}
|
|
.head {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
// background: #FFF;
|
|
}
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
// background: pink;
|
|
flex-direction: column;
|
|
padding-top: 5%;
|
|
|
|
.currencyBox {
|
|
width: 85%;
|
|
// background: palegoldenrod;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// img{
|
|
// width: 3%;
|
|
// margin-left: 1%;
|
|
// }
|
|
.sunCurrency {
|
|
// width: 7.5%;
|
|
// background: paleturquoise;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 8px 10px;
|
|
border-radius: 22px;
|
|
// border: 1PX solid rgba(223, 83, 52, 0.3);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
margin-left: 10px;
|
|
font-size: 1em;
|
|
// font-size: 14PX;
|
|
img {
|
|
width: 35px;
|
|
margin-left: 5%;
|
|
}
|
|
span {
|
|
text-transform: uppercase;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.sunCurrency:hover {
|
|
background: rgba(223, 83, 52, 0.05);
|
|
font-size: 12px;
|
|
box-shadow: 0px 0px 5px 3px rgba(223, 83, 52, 0.05);
|
|
}
|
|
}
|
|
.currencyDescription {
|
|
width: 85%;
|
|
// height: 900%;
|
|
// background: gold;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.currencyDescriptionBox {
|
|
width: 90%;
|
|
height: 600px;
|
|
// background: palevioletred;
|
|
// border: 1PX solid rgba(0,0,0,0.1);
|
|
box-shadow: 0px 0px 3px 1px #ccc;
|
|
margin-top: 2%;
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
.titleBOX {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 20px 10px;
|
|
width: 100%;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
h3 {
|
|
width: 90%;
|
|
font-size: 1.5em;
|
|
// background: #ccc;
|
|
text-align: center;
|
|
}
|
|
|
|
.titleCurrency:hover {
|
|
background: rgba(223, 83, 52, 0.05);
|
|
font-size: 13px;
|
|
box-shadow: 0px 0px 5px 3px rgba(223, 83, 52, 0.05);
|
|
}
|
|
}
|
|
|
|
.titleCurrency {
|
|
// width: 7%;
|
|
// background: paleturquoise;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 8px 10px;
|
|
border-radius: 22px;
|
|
// border: 1PX solid rgba(223, 83, 52, 0.3);
|
|
// cursor: pointer;
|
|
font-weight: 600;
|
|
margin-left: 30px;
|
|
font-size: 1.1em;
|
|
margin-right: 1%;
|
|
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 60px;
|
|
img {
|
|
width: 35px;
|
|
margin-left: 1%;
|
|
}
|
|
span {
|
|
margin-top: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
.computationalPower {
|
|
height: 15%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 1.3em;
|
|
margin: 10px 10px;
|
|
.PowerBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
span {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
// background: forestgreen;
|
|
text-align: center;
|
|
}
|
|
span:hover {
|
|
// color: rgba(0, 0, 0, 0.9);
|
|
color: #df5334;
|
|
font-weight: 600;
|
|
}
|
|
.Power {
|
|
font-size: 1.5em;
|
|
}
|
|
// background: red;
|
|
}
|
|
p {
|
|
width: 80%;
|
|
margin: 0;
|
|
font-size: 1em;
|
|
margin-top: 3px;
|
|
margin-left: 5%;
|
|
// background: rgba(255,192,203,0.5);
|
|
text-align: left;
|
|
height: 8%;
|
|
padding: 0px 10px;
|
|
line-height: 50px;
|
|
box-shadow: 0px 0px 2px 1px #ccc;
|
|
margin-top: 1%;
|
|
}
|
|
}
|
|
}
|
|
.reportBlock {
|
|
width: 85%;
|
|
// height: 900%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 1200px;
|
|
margin-top: 1%;
|
|
.reportBlockBox {
|
|
width: 90%;
|
|
height: 100%;
|
|
// background: papayawhip;
|
|
box-shadow: 0px 0px 3px 1px #ccc;
|
|
background: #f5f9fd;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 10px;
|
|
.top {
|
|
width: 100%;
|
|
height: 18%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
padding: 20px 0px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 1.2em;
|
|
div {
|
|
width: 20%;
|
|
background: #2eaeff;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-left: 3%;
|
|
border-radius: 5%;
|
|
}
|
|
}
|
|
.belowTable {
|
|
width: 100%;
|
|
height: 80%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: 90%;
|
|
// background: #2EAEFF;
|
|
// padding: 20PX 0PX;
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
.table-title {
|
|
position: sticky;
|
|
top: 0px;
|
|
background: #f5f9fd;
|
|
padding: 0px 10px;
|
|
}
|
|
li {
|
|
width: 100%;
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: 7%;
|
|
// background: rgba(0, 0, 0, 0.05);
|
|
span {
|
|
height: 100%;
|
|
width: calc(100% / 5);
|
|
line-height: 55px;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.currency-list {
|
|
background: #fff;
|
|
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
|
|
margin-top: 1%;
|
|
padding: 0px 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.EchartsBox {
|
|
width: 80%;
|
|
min-height: 300px;
|
|
.chart {
|
|
height: 300px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
margin-top: 2%;
|
|
}
|
|
}
|
|
|
|
.formBox {
|
|
width: 80%;
|
|
min-height: 300px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
margin-top: 2%;
|
|
}
|
|
}
|
|
.footerBox {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 300px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-left: 15%;
|
|
|
|
// background: rgba(204, 204, 204, 0.1);
|
|
// margin-top: 1%;
|
|
background-image: url(../assets/img/bkbuttom.png);
|
|
background-repeat: no-repeat;
|
|
// background-position: 50% 50%;
|
|
background-size: 100% 100%;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
margin-top: 100px;
|
|
.one {
|
|
// background: #2eaeff;
|
|
.oneText {
|
|
// background: #CCC;
|
|
width: 40%;
|
|
margin: 0 auto;
|
|
height: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.logo2 {
|
|
display: flex;
|
|
// justify-content: center;
|
|
// width: 28%;
|
|
// align-items: flex-start;
|
|
|
|
.logoBox {
|
|
// width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
justify-content: start;
|
|
// background: #D2C3EA;
|
|
margin-top: 4%;
|
|
.logoImg {
|
|
width:160px
|
|
}
|
|
.copyright {
|
|
font-size: 0.8rem;
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
// text-align: center;
|
|
}
|
|
.socialContact {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 120%;
|
|
margin-top: 28px;
|
|
// background: #21A0FF;
|
|
img {
|
|
width: 25px;
|
|
transition: 0.1s linear;
|
|
cursor: pointer;
|
|
}
|
|
img:hover {
|
|
width: 28px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.text {
|
|
// width: 20%;
|
|
// background: #21A0FF;
|
|
div {
|
|
width: 77%;
|
|
height: 60%;
|
|
line-height: 28px;
|
|
margin-top: 25px;
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
.product {
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
// align-items: center;
|
|
flex-direction: column;
|
|
|
|
.productTitle {
|
|
margin: 0;
|
|
}
|
|
li {
|
|
margin-top: 15px;
|
|
list-style: none;
|
|
font-size: 0.95rem;
|
|
span{
|
|
cursor: pointer;
|
|
}
|
|
span:hover{
|
|
color: #6e3edb;
|
|
}
|
|
|
|
a:hover{
|
|
color: #6e3edb;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
// li:hover {
|
|
// color: #6e3edb;
|
|
// cursor: pointer;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
.footerSon {
|
|
// width: calc(100% / 7);
|
|
width: 100%;
|
|
height: 90%;
|
|
margin: 18px 10px ;
|
|
|
|
// border-right: 1PX solid rgba(0, 0, 0, 0.1);
|
|
// background: greenyellow;
|
|
.productTitle {
|
|
color: #000;
|
|
}
|
|
h4 {
|
|
color: #000;
|
|
}
|
|
}
|
|
</style> |