|
|
@@ -141,7 +141,7 @@
|
|
|
|
|
|
/* 原有样式保留，新增以下样式 */
|
|
|
.link-section {
|
|
|
- margin: 8px 0;
|
|
|
+ /*margin: 8px 0;*/
|
|
|
white-space: nowrap; /* 禁止换行 */
|
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
|
@@ -159,7 +159,7 @@
|
|
|
.item-description {
|
|
|
color: #666;
|
|
|
font-size: 12px;
|
|
|
- margin-bottom: 8px;
|
|
|
+ /*margin-bottom: 8px;*/
|
|
|
}
|
|
|
|
|
|
.screenshot-section {
|
|
|
@@ -171,6 +171,12 @@
|
|
|
.edit-dialog .el-dialog__body {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+ .el-card__header{
|
|
|
+ padding: 8px 20px;
|
|
|
+ }
|
|
|
+ .show-hover-class{
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
|
|
<script src="js/Sortable.min.js"></script>
|
|
|
@@ -180,7 +186,7 @@
|
|
|
<body>
|
|
|
<div id="app" class="tab-container">
|
|
|
<!-- 标签排序栏 -->
|
|
|
- <div class="tab-sort-bar" style="display: flex">
|
|
|
+ <div class="tab-sort-bar show-hover-class" style="display: flex">
|
|
|
<div style="">排序：</div>
|
|
|
<draggable
|
|
|
:disabled="readOnly"
|
|
|
@@ -206,20 +212,23 @@
|
|
|
<!-- <i class="el-icon-folder-opened"></i>-->
|
|
|
<div style="margin-right: 20px; margin-left: 5px">{{ group.name }}</div>
|
|
|
|
|
|
- <!-- 新增按钮 -->
|
|
|
- <el-button type="text" @click.stop="addTabAfter(group.name)" v-if="!readOnly" >
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
- </el-button>
|
|
|
- <el-button type="text" @click.stop="editCurrentTabName(group.name)" v-if="!readOnly" >
|
|
|
- <i class="el-icon-edit"></i>
|
|
|
- </el-button>
|
|
|
- <el-button type="text" @click.stop="deleteTab(group.name)" :disabled="Object.keys(groups).length <= 1" v-if="!readOnly" >
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
- </el-button>
|
|
|
- <div style="margin: 0 20px;color: #ccc;" v-if="!readOnly" >|</div>
|
|
|
- <el-button type="text" @click.stop="addContentItemAfter(group.name, group.datas.length-1)" v-if="!readOnly">
|
|
|
- 新增卡片
|
|
|
- </el-button>
|
|
|
+ <div class="show-hover-class" v-if="!readOnly" style="display: flex" >
|
|
|
+ <!-- 新增按钮 -->
|
|
|
+ <el-button type="text" @click.stop="addTabAfter(group.name)" >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="text" @click.stop="editCurrentTabName(group.name)" >
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="text" @click.stop="deleteTab(group.name)" :disabled="Object.keys(groups).length <= 1" >
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </el-button>
|
|
|
+ <div style="margin: 0 20px;color: #ccc;" v-if="!readOnly" >|</div>
|
|
|
+ <el-button type="text" @click.stop="addContentItemAfter(group.name, group.datas.length-1)" >
|
|
|
+ 新增卡片
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<draggable
|
|
|
@@ -243,11 +252,8 @@
|
|
|
fit="contain"
|
|
|
></el-image>
|
|
|
<span>{{ item.title }}</span>
|
|
|
- <div class="action-buttons">
|
|
|
+ <div class="action-buttons show-hover-class">
|
|
|
<div v-if="!readOnly">
|
|
|
- <el-button type="text" class="">
|
|
|
- <i class="el-icon-rank"></i>
|
|
|
- </el-button>
|
|
|
<el-button
|
|
|
type="text"
|
|
|
@click.stop="openEditDialog(group,item)">
|
|
|
@@ -418,6 +424,21 @@
|
|
|
}
|
|
|
if (pageManager.isReadOnly()) this.readOnly = true;
|
|
|
|
|
|
+
|
|
|
+ // .show-hover-class 鼠标滑过，设置 透明度为可见，移走则为0
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ const elements = document.querySelectorAll('.show-hover-class');
|
|
|
+ for (let i = 0; i < elements.length; i++) {
|
|
|
+ elements[i].addEventListener('mouseenter', function () {
|
|
|
+ this.style.opacity = 1;
|
|
|
+ });
|
|
|
+ elements[i].addEventListener('mouseleave', function () {
|
|
|
+ this.style.opacity = 0;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
tianyun