lizixuan/m2pool_web_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

公告中心、常见问题UI显示优化

Browse Source
This commit is contained in:
yaoqin
2025-09-26 16:38:48 +08:00
parent 1ca8b48ef7
commit cb9d2564cd
9 changed files with 135 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
mining-pool/src/views/announcementDetails/index.vue
View File

@@ -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>

76
mining-pool/src/views/commonProblem/index.vue
View File

@@ -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>