调整百科数据UI交互
This commit is contained in:
parent
41c69c2004
commit
b717fe0b3c
|
@ -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>
|
Loading…
Reference in New Issue
Block a user