调整百科数据UI交互

This commit is contained in:
wangchengming 2025-07-14 20:45:05 +08:00
parent 41c69c2004
commit b717fe0b3c

View File

@ -22,6 +22,14 @@
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
@ -36,6 +44,14 @@
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
@ -50,6 +66,14 @@
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
@ -64,6 +88,14 @@
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
@ -78,6 +110,14 @@
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
@ -92,6 +132,14 @@
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
</div>
@ -106,6 +154,8 @@
<script setup>
import { useRouter } from 'vue-router'
import addIcon from '@/assets/images/addIcon.png'
import editIcon from '@/assets/images/editIcon.png'
import deleteIcon from '@/assets/images/deleteIcon.png'
const router = useRouter()
const handleOpenAddForm = () => {
@ -153,6 +203,11 @@ const handleOpenAddForm = () => {
border-bottom: 1px solid #F8F8F8;
margin: 20px 20px 0;
padding-bottom: 20px;
&:hover .publish-btns {
opacity: 1;
visibility: visible;
}
}
.document-header {
@ -204,6 +259,15 @@ const handleOpenAddForm = () => {
color: #ACABAB;
}
.publish-btns {
display: inline-flex;
width: 85%;
justify-content: flex-end;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.moreoptionBtn {
margin-top: 36px;
padding: 20px;
@ -226,4 +290,21 @@ const handleOpenAddForm = () => {
.moreBtn:hover {
background: #ffffff;
}
.editIconBtn {
width: 14px;
height: 14px;
border: none;
background: transparent;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
text-align: center;
}
.editIconBtnicon {
width: 14px !important;
height: 14px !important;
}
</style>