公告中心、常见问题UI显示优化
This commit is contained in:
Binary file not shown.
@@ -2,7 +2,17 @@
|
||||
<div class="announcementDetails">
|
||||
<section class="container">
|
||||
<section class="leftNav">
|
||||
<div class="leftNav-item " :class="{active:DetailsParams.id == item.id}" v-for="item in problems" :key="item.id" @click="handleClick(item.id)">
|
||||
<div
|
||||
class="leftNav-item "
|
||||
:class="{active:DetailsParams.id == item.id}"
|
||||
v-for="item in problems"
|
||||
:key="item.id"
|
||||
@click="handleClick(item.id)"
|
||||
@keydown.enter.space="handleClick(item.id)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:aria-label="item.title"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</section>
|
||||
@@ -46,14 +56,16 @@
|
||||
|
||||
padding-top: 50px;
|
||||
.leftNav{
|
||||
width: 230px;
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px; // 预留滚动条空间，避免抖动
|
||||
border-right: 1px solid #f1f2f3;
|
||||
}
|
||||
.rightContent{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 50px;
|
||||
margin-left: 32px;
|
||||
overflow-y: auto;
|
||||
padding-right: 20px;
|
||||
.dynamic-content {
|
||||
@@ -66,6 +78,11 @@
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
}
|
||||
:deep(p) {
|
||||
line-height: 35px;
|
||||
margin: 8px 0;
|
||||
|
||||
}
|
||||
:deep(th), :deep(td) {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 8px 12px;
|
||||
@@ -115,17 +132,53 @@
|
||||
|
||||
.leftNav-item{
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-decoration: underline;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
outline: none;
|
||||
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
|
||||
|
||||
&:hover{
|
||||
background:rgba(0,0,0,0.02);
|
||||
color: #651FFF;
|
||||
background: #f7f7fb;
|
||||
color: #4c36ff;
|
||||
}
|
||||
|
||||
&:focus-visible{
|
||||
box-shadow: 0 0 0 3px rgba(101,31,255,0.2);
|
||||
background: #f7f7fb;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: #4c36ff;
|
||||
background: #f3f2ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.active::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
background: #4c36ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #651FFF;
|
||||
|
||||
/* 自定义滚动条，提升观感 */
|
||||
.leftNav::-webkit-scrollbar{
|
||||
width: 6px;
|
||||
}
|
||||
.leftNav::-webkit-scrollbar-thumb{
|
||||
background: #e2e2e8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.leftNav:hover::-webkit-scrollbar-thumb{
|
||||
background: #cfcfe7;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,18 @@
|
||||
<div>
|
||||
<section class="container">
|
||||
<section class="leftNav">
|
||||
<div class="leftNav-item " :class="{active:DetailsParams.id == item.id}" v-for="item in problems" :key="item.id" @click="handleClick(item.id)">
|
||||
<div
|
||||
class="leftNav-item "
|
||||
:class="{active:DetailsParams.id == item.id}"
|
||||
v-for="item in problems"
|
||||
:key="item.id"
|
||||
@click="handleClick(item.id)"
|
||||
@keydown.enter="handleClick(item.id)"
|
||||
@keydown.space.prevent="handleClick(item.id)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:aria-label="item.title"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</section>
|
||||
@@ -40,14 +51,16 @@ export default {
|
||||
margin-top: 60px;
|
||||
padding-top: 50px;
|
||||
.leftNav{
|
||||
width: 200px;
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px; // 预留滚动条空间，避免抖动
|
||||
border-right: 1px solid #f1f2f3;
|
||||
}
|
||||
.rightContent{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 50px;
|
||||
margin-left: 32px;
|
||||
overflow-y: auto;
|
||||
padding-right: 20px;
|
||||
.dynamic-content {
|
||||
@@ -60,6 +73,11 @@ export default {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
}
|
||||
:deep(p) {
|
||||
line-height: 35px;
|
||||
margin: 8px 0;
|
||||
|
||||
}
|
||||
:deep(th), :deep(td) {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 8px 12px;
|
||||
@@ -137,17 +155,53 @@ export default {
|
||||
|
||||
.leftNav-item{
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-decoration: underline;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
outline: none;
|
||||
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
|
||||
|
||||
&:hover{
|
||||
background:rgba(0,0,0,0.02);
|
||||
color: #651FFF;
|
||||
background: #f7f7fb;
|
||||
color: #4c36ff;
|
||||
}
|
||||
|
||||
&:focus-visible{
|
||||
box-shadow: 0 0 0 3px rgba(101,31,255,0.2);
|
||||
background: #f7f7fb;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: #4c36ff;
|
||||
background: #f3f2ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.active::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
background: #4c36ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #651FFF;
|
||||
/* 自定义滚动条 */
|
||||
.leftNav::-webkit-scrollbar{
|
||||
width: 6px;
|
||||
}
|
||||
.leftNav::-webkit-scrollbar-thumb{
|
||||
background: #e2e2e8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.leftNav:hover::-webkit-scrollbar-thumb{
|
||||
background: #cfcfe7;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
1
mining-pool/test/css/app-189e7968.203e02ca.css
Normal file
1
mining-pool/test/css/app-189e7968.203e02ca.css
Normal file
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=google-site-verification content=pKAZogQ0NQ6L4j9-V58WJMjm7zYCFwkJXSJzWu9UDM8><meta name=robots content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><meta name=googlebot content="index, follow"><meta name=googlebot-news content="index, follow"><meta name=bingbot content="index, follow"><link rel=alternate hreflang=zh href=https://m2pool.com/zh><link rel=alternate hreflang=en href=https://m2pool.com/en><link rel=alternate hreflang=x-default href=https://m2pool.com/en><meta property=og:title content="M2pool - Stable leading high-yield mining pool"><meta property=og:description content="M2Pool provides professional mining services, supporting multiple cryptocurrency mining"><meta property=og:url content=https://m2pool.com/en><meta property=og:site_name content=M2Pool><meta property=og:type content=website><meta property=og:image content=https://m2pool.com/logo.png><link rel=icon href=/favicon.ico><link rel=stylesheet href=//at.alicdn.com/t/c/font_4582735_7i8wfzc0art.css><title>M2pool - Stable leading high-yield mining pool</title><meta name=keywords content="M2Pool, cryptocurrency mining pool,entropyx, bitcoin mining, DGB mining, mining pool service, 加密货币矿池, 比特币挖矿, DGB挖矿"><meta name=description content="M2Pool provides professional mining services, supporting multiple cryptocurrency mining, including nexa, grs, mona, dgb, rxd"><script defer=defer src=/js/chunk-vendors-c0d76f48.f34181ba.js></script><script defer=defer src=/js/chunk-vendors-bc050c32.8062ab74.js></script><script defer=defer src=/js/chunk-vendors-3003db77.d0b93d36.js></script><script defer=defer src=/js/chunk-vendors-9d134daf.bb668c99.js></script><script defer=defer src=/js/chunk-vendors-96cecd74.a7d9b845.js></script><script defer=defer src=/js/chunk-vendors-c2f7d60e.3710fdc2.js></script><script defer=defer src=/js/chunk-vendors-89d5c698.2190b4ca.js></script><script defer=defer src=/js/chunk-vendors-377fed06.0e89b4b7.js></script><script defer=defer src=/js/chunk-vendors-c9ff040c.57bd8c18.js></script><script defer=defer src=/js/app-42f9d7e6.91b45f91.js></script><script defer=defer src=/js/app-5c551db8.9f0ca7c2.js></script><script defer=defer src=/js/app-45954fd3.cc32605b.js></script><script defer=defer src=/js/app-72600b29.938f975d.js></script><script defer=defer src=/js/app-5a0d40dd.21bd4ef8.js></script><script defer=defer src=/js/app-113c6c50.0baa904d.js></script><link href=/css/chunk-vendors-bc050c32.6f97509c.css rel=stylesheet><link href=/css/app-189e7968.5f2e4f20.css rel=stylesheet></head><body><div id=app></div></body></html>
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=google-site-verification content=pKAZogQ0NQ6L4j9-V58WJMjm7zYCFwkJXSJzWu9UDM8><meta name=robots content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><meta name=googlebot content="index, follow"><meta name=googlebot-news content="index, follow"><meta name=bingbot content="index, follow"><link rel=alternate hreflang=zh href=https://m2pool.com/zh><link rel=alternate hreflang=en href=https://m2pool.com/en><link rel=alternate hreflang=x-default href=https://m2pool.com/en><meta property=og:title content="M2pool - Stable leading high-yield mining pool"><meta property=og:description content="M2Pool provides professional mining services, supporting multiple cryptocurrency mining"><meta property=og:url content=https://m2pool.com/en><meta property=og:site_name content=M2Pool><meta property=og:type content=website><meta property=og:image content=https://m2pool.com/logo.png><link rel=icon href=/favicon.ico><link rel=stylesheet href=//at.alicdn.com/t/c/font_4582735_7i8wfzc0art.css><title>M2pool - Stable leading high-yield mining pool</title><meta name=keywords content="M2Pool, cryptocurrency mining pool,entropyx, bitcoin mining, DGB mining, mining pool service, 加密货币矿池, 比特币挖矿, DGB挖矿"><meta name=description content="M2Pool provides professional mining services, supporting multiple cryptocurrency mining, including nexa, grs, mona, dgb, rxd"><script defer=defer src=/js/chunk-vendors-c0d76f48.f34181ba.js></script><script defer=defer src=/js/chunk-vendors-bc050c32.8062ab74.js></script><script defer=defer src=/js/chunk-vendors-3003db77.d0b93d36.js></script><script defer=defer src=/js/chunk-vendors-9d134daf.bb668c99.js></script><script defer=defer src=/js/chunk-vendors-96cecd74.a7d9b845.js></script><script defer=defer src=/js/chunk-vendors-c2f7d60e.3710fdc2.js></script><script defer=defer src=/js/chunk-vendors-89d5c698.2190b4ca.js></script><script defer=defer src=/js/chunk-vendors-377fed06.0e89b4b7.js></script><script defer=defer src=/js/chunk-vendors-c9ff040c.57bd8c18.js></script><script defer=defer src=/js/app-42f9d7e6.91b45f91.js></script><script defer=defer src=/js/app-5c551db8.0e29a8bb.js></script><script defer=defer src=/js/app-45954fd3.3a701779.js></script><script defer=defer src=/js/app-72600b29.19bda109.js></script><script defer=defer src=/js/app-5a0d40dd.21bd4ef8.js></script><script defer=defer src=/js/app-113c6c50.0baa904d.js></script><link href=/css/chunk-vendors-bc050c32.6f97509c.css rel=stylesheet><link href=/css/app-189e7968.203e02ca.css rel=stylesheet></head><body><div id=app></div></body></html>
|
||||
1
mining-pool/test/js/app-45954fd3.3a701779.js
Normal file
1
mining-pool/test/js/app-45954fd3.3a701779.js
Normal file
File diff suppressed because one or more lines are too long
1
mining-pool/test/js/app-5c551db8.0e29a8bb.js
Normal file
1
mining-pool/test/js/app-5c551db8.0e29a8bb.js
Normal file
File diff suppressed because one or more lines are too long
1
mining-pool/test/js/app-72600b29.19bda109.js
Normal file
1
mining-pool/test/js/app-72600b29.19bda109.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user