yaoqin
915fc3d7a6
2.api文档页面修改8个接口请求方式为post 3.优化代码币种添加通用币种信息及挖矿教程页面跳转通用 4.m2pool断网重连 60秒内重连 处理中 5.收益计算器显示值修改 取消四舍五入 直接保留10位小数 添加千位符分隔显示 6.coinbus 添加seo相关配置及站点地图 处理中
739 lines
15 KiB
Vue
739 lines
15 KiB
Vue
<template>
|
|
<div class="AccessMiningPoolMain">
|
|
<section v-if="openAPI" class="openAPI">
|
|
<section v-if="$isMobile">
|
|
<div class="currencySelect">
|
|
|
|
<div class="nav">
|
|
<div class="nav-item" id="menu1" @click.stop="toggleDropdown">
|
|
<img
|
|
class="itemImg"
|
|
:src="activeItem.imgUrl || ``"
|
|
:alt="activeItem.label || ``"
|
|
/>
|
|
<span style="text-transform: capitalize">
|
|
{{ activeItem.label || `` }}</span
|
|
>
|
|
<i class="arrow"></i>
|
|
<div class="dropdown">
|
|
<div
|
|
class="option"
|
|
v-for="item in currencyList"
|
|
:key="item.value"
|
|
@click.stop="changeMenuName($event, item)"
|
|
:class="{ optionActive: $route.path.includes(item.path) }"
|
|
|
|
>
|
|
<img
|
|
class="dropdownCoin"
|
|
:src="item.imgUrl"
|
|
:alt="item.value"
|
|
/>
|
|
<div class="dropdownText">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section>
|
|
<keep-alive>
|
|
<router-view :key="$route.fullPath" />
|
|
</keep-alive>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="AccessMiningPool" v-else>
|
|
|
|
|
|
<section class="menu">
|
|
|
|
<ul>
|
|
<li
|
|
|
|
:class="{ active: currentRoutePath == item.path }"
|
|
@click="clickJump(item)"
|
|
v-for="item in currencyList"
|
|
:key="item.value"
|
|
>
|
|
<img :src="item.imgUrl" :alt="item.value" loading="lazy" />
|
|
<span>
|
|
{{ $t(item.name) }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tutorialContent">
|
|
<router-view></router-view>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
<section v-else>
|
|
<div class="notOpen">
|
|
<p>{{ $t(`course.notOpenCurrency`) }}</p>
|
|
<div class="imgBox">
|
|
<img
|
|
src="../../assets/404_images/notOpen.png"
|
|
alt="Not open"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IndexJs from "./index";
|
|
export default {
|
|
mixins: [IndexJs],
|
|
watch: {
|
|
$route(to, from) {
|
|
// 监听路由变化，处理组件更新
|
|
this.handleRouteChange(to, from);
|
|
}
|
|
},
|
|
methods: {
|
|
handleRouteChange(to, from) {
|
|
// 确保组件能够正确响应路由变化
|
|
if (to.name !== from.name) {
|
|
this.$nextTick(() => {
|
|
// 强制更新组件
|
|
this.$forceUpdate();
|
|
});
|
|
}
|
|
},
|
|
|
|
// clickJump(item) {
|
|
// if (!item || !item.path) return;
|
|
|
|
// const route = {
|
|
// name: item.path,
|
|
// params: {
|
|
// lang: this.$i18n.locale
|
|
// }
|
|
// };
|
|
|
|
// this.$router.push(route).catch(err => {
|
|
// if (err.name !== 'NavigationDuplicated') {
|
|
// console.error('Navigation failed:', err);
|
|
// }
|
|
// });
|
|
// }
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@media screen and (min-width: 220px) and (max-width: 1279px) {
|
|
.AccessMiningPoolMain {
|
|
width: 100%;
|
|
// min-height: 100vh;
|
|
background: transparent !important;
|
|
// background-image: url(../../assets/img/miningAccount/top.png);
|
|
// background-size: 100% 50%;
|
|
// background-repeat: no-repeat;
|
|
// background-position: 30% -15%;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.mail {
|
|
color: #5917c4;
|
|
}
|
|
}
|
|
.notOpen {
|
|
width: 100%;
|
|
display: inline-block !important;
|
|
margin: 50px 00px;
|
|
justify-content: center;
|
|
padding: 0px 30px;
|
|
|
|
p {
|
|
// background: #D1C2E9;
|
|
font-size: 20px !important;
|
|
width: 100% !important;
|
|
line-height: 50px;
|
|
color: #6a24ff;
|
|
text-align: center;
|
|
}
|
|
.imgBox {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
img {
|
|
width: 80%;
|
|
}
|
|
}
|
|
.currencySelect {
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-bottom: 15px;
|
|
padding-left: 8px;
|
|
font-size: 0.85rem;
|
|
.el-menu-demo {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-menu {
|
|
background: transparent;
|
|
}
|
|
// .title{
|
|
// width: 30%;
|
|
// }
|
|
.coinSelect {
|
|
img {
|
|
width: 25px;
|
|
}
|
|
span {
|
|
text-transform: capitalize;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
.moveCurrencyBox {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
min-height: 200px;
|
|
flex-wrap: wrap;
|
|
padding: 10px 20px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
|
|
li {
|
|
list-style: none;
|
|
// width: calc(100% / 5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center !important;
|
|
margin-left: 10px;
|
|
// background: #D2C4E8;
|
|
// align-items: center;
|
|
// overflow: hidden;
|
|
padding: 5px 5px;
|
|
box-sizing: border-box;
|
|
// background: palegoldenrod;
|
|
|
|
img {
|
|
width: 25px;
|
|
}
|
|
p {
|
|
min-width: 50px;
|
|
margin-top: 8px;
|
|
font-size: 0.85rem;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mainTitle {
|
|
padding: 0px 20px;
|
|
span {
|
|
font-size: 0.95rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.tableBox {
|
|
margin: 0 auto;
|
|
width: 96%;
|
|
min-height: 300px;
|
|
// background: palegoldenrod;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0px 0px 5px 2px #ccc;
|
|
margin-top: 10px;
|
|
background: #fff;
|
|
.table-title {
|
|
height: 50px;
|
|
background: #d2c4e8;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
padding-left: 0 !important;
|
|
span {
|
|
text-align: center;
|
|
}
|
|
span:nth-of-type(1) {
|
|
width: 50% !important;
|
|
}
|
|
span:nth-of-type(2) {
|
|
width: 50% !important;
|
|
color: #ca094a;
|
|
font-weight: bold;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
.collapseTitle {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding-left: 0 !important;
|
|
text-align: center;
|
|
span {
|
|
text-align: center;
|
|
}
|
|
|
|
span:nth-of-type(1) {
|
|
width: 50% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
span:nth-of-type(2) {
|
|
width: 50% !important;
|
|
color: #ca094a;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.belowTable {
|
|
background: #f0e9f5;
|
|
padding: 10px 0px;
|
|
div {
|
|
width: 100%;
|
|
height: auto;
|
|
text-align: left;
|
|
padding-left: 8%;
|
|
p:nth-of-type(1) {
|
|
font-weight: 600;
|
|
}
|
|
p {
|
|
word-wrap: break-word;
|
|
|
|
.copy {
|
|
padding: 0px 5px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
border: 1px solid #d1c2e9;
|
|
border-radius: 5px;
|
|
margin-left: 10px;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.paginationBox {
|
|
text-align: center;
|
|
}
|
|
}
|
|
#careful {
|
|
padding: 0px 8px;
|
|
font-size: 0.85rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
line-height: 25px;
|
|
.mail {
|
|
color: #5917c4;
|
|
}
|
|
}
|
|
.step {
|
|
width: 99% !important;
|
|
margin: 0 auto;
|
|
margin-top: 3%;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
padding: 15px !important;
|
|
p {
|
|
line-height: 25px !important;
|
|
}
|
|
.stepTitle {
|
|
height: auto !important;
|
|
width: 100%;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
line-height: 30px !important;
|
|
font-size: 0.95rem !important;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-weight: 600;
|
|
word-wrap: break-word;
|
|
}
|
|
.textBox {
|
|
padding: 10px !important;
|
|
color: rgba(5, 32, 75, 0.6);
|
|
font-weight: normal !important;
|
|
font-size: 0.85rem !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-collapse-item__content {
|
|
padding: 0 !important;
|
|
}
|
|
.nav {
|
|
// position: absolute;
|
|
z-index: 1000;
|
|
// height: 60px;
|
|
// line-height: 60px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
padding: 0 10px;
|
|
.itemImg {
|
|
width: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
.arrow {
|
|
margin-left: 5px;
|
|
border: solid rgba(0, 0, 0, 0.3);
|
|
border-width: 0 1px 1px 0;
|
|
display: inline-block;
|
|
padding: 3px;
|
|
transform: rotate(45deg);
|
|
transition: transform 0.3s;
|
|
|
|
&.up {
|
|
transform: rotate(-135deg);
|
|
}
|
|
}
|
|
}
|
|
.dropdown {
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 0;
|
|
width: 362px;
|
|
background: white;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
padding: 3px;
|
|
display: none;
|
|
flex-wrap: wrap;
|
|
gap: 1px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
z-index: 999999;
|
|
|
|
&.show {
|
|
display: flex;
|
|
}
|
|
|
|
.option {
|
|
width: 70px;
|
|
height: 70px;
|
|
background: #f5f5f5;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border-radius: 4px;
|
|
// flex-direction: column;
|
|
// padding:5px;
|
|
// padding-top: 5%;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
padding: 5px;
|
|
text-overflow: ellipsis;
|
|
|
|
&:hover {
|
|
background: #e8e8e8;
|
|
color: #6e3edb;
|
|
border: 1px solid #9d8ac9;
|
|
}
|
|
}
|
|
|
|
.optionActive {
|
|
background: #e8e8e8;
|
|
color: #6e3edb;
|
|
border: 1px solid #9d8ac9;
|
|
}
|
|
}
|
|
|
|
.dropdownCoin {
|
|
width: 23px;
|
|
margin: 0;
|
|
}
|
|
.dropdownText {
|
|
width: 100%;
|
|
font-size: 0.8rem;
|
|
// word-wrap: break-word;
|
|
text-align: center;
|
|
margin: 0;
|
|
word-break: break-word;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.AccessMiningPoolMain {
|
|
width: 100%;
|
|
// height: 100vh;
|
|
}
|
|
.openAPI {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.AccessMiningPool {
|
|
width: 100%;
|
|
// height: 100%;
|
|
// min-height: 100vh;
|
|
background: #fff;
|
|
background-image: url(../../assets/img/miningAccount/top.png);
|
|
background-size: 100% 65%;
|
|
background-repeat: no-repeat;
|
|
background-position: 30% -15%;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: 60px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
a {
|
|
color: #8a2be2;
|
|
}
|
|
}
|
|
.tutorialContent {
|
|
width: 60%;
|
|
// background: palegreen;
|
|
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.notOpen {
|
|
// background: palegoldenrod;
|
|
display: flex;
|
|
margin-top: 10%;
|
|
justify-content: center;
|
|
p {
|
|
// background: #D1C2E9;
|
|
font-size: 25px;
|
|
width: 25%;
|
|
line-height: 50px;
|
|
color: #6a24ff;
|
|
}
|
|
}
|
|
.menu {
|
|
width: 18%;
|
|
// background: #D2C3EA
|
|
margin-right: 30px;
|
|
background: #ffffff;
|
|
padding: 20px !important;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
|
|
min-height: 300px;
|
|
// font-size: 0.9rem;
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
list-style: none;
|
|
min-height: 40px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
margin-top: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items:start;
|
|
padding: 5px;
|
|
transition: all 0.3s;
|
|
img {
|
|
width: 25px;
|
|
margin-right: 5px;
|
|
}
|
|
span{
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
li:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
.active {
|
|
color: #6924ff;
|
|
background: #d2c3ea;
|
|
border-radius: 5px;
|
|
}
|
|
.table {
|
|
width: 70%;
|
|
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
|
|
// margin: 0 auto;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 50px;
|
|
.mainTitle {
|
|
font-size: 1.5em;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
img {
|
|
width: 30px;
|
|
margin-right: 5px;
|
|
}
|
|
// span{
|
|
// margin-left: 5PX;
|
|
|
|
// }
|
|
}
|
|
.theServer {
|
|
width: 100%;
|
|
// height: 500PX;
|
|
margin: 0 auto;
|
|
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
|
|
padding: 10px 10px;
|
|
margin-top: 20px;
|
|
|
|
.title {
|
|
width: 100%;
|
|
padding-left: 3%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 1.3em;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-weight: 600;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
ul {
|
|
width: 100%;
|
|
height: 90%;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-top: 1%;
|
|
li {
|
|
list-style: none;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background: #efefef;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.9rem;
|
|
span {
|
|
display: inline-block;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
.coin {
|
|
width: 18%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 25px;
|
|
margin-right: 5px;
|
|
}
|
|
span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.quota {
|
|
color: #ca094a;
|
|
font-weight: 600;
|
|
}
|
|
.difficulty {
|
|
width: 10%;
|
|
}
|
|
.port {
|
|
width: 35%;
|
|
|
|
i {
|
|
font-size: 1em;
|
|
}
|
|
i:hover {
|
|
color: #6924ff;
|
|
}
|
|
}
|
|
i {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
li:nth-child(even) {
|
|
background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
|
|
}
|
|
.liTitle {
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background: #d2c3ea;
|
|
color: #36246f;
|
|
font-size: 0.95rem;
|
|
// span{
|
|
// display: inline-block;
|
|
|
|
// text-align: center;
|
|
|
|
// }
|
|
.coin {
|
|
width: 18%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 25px;
|
|
}
|
|
span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
// .difficulty{
|
|
// width: 10%;
|
|
// }
|
|
.port {
|
|
width: 35%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.careful {
|
|
margin-top: 8px;
|
|
font-size: 0.9rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
a {
|
|
color: #6924ff;
|
|
}
|
|
}
|
|
}
|
|
.step {
|
|
width: 100%;
|
|
|
|
margin: 0 auto;
|
|
margin-top: 3%;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
p {
|
|
line-height: 30px;
|
|
}
|
|
.stepTitle {
|
|
height: 40px;
|
|
width: 100%;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
line-height: 40px;
|
|
font-size: 1rem;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-weight: 600;
|
|
}
|
|
.textBox {
|
|
padding: 20px;
|
|
color: rgba(5, 32, 75, 0.6);
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
</style> |