feat: 增强组件功能与样式优化

- 在多个组件中添加了新的属性和方法以提升功能性,如在卡片组件中引入 _ActiveTab 属性以管理活动标签。
- 优化了商品详情和商户页面的收藏逻辑,确保在未登录状态下引导用户登录。
- 更新了轮播组件的路由解析逻辑,增强了用户体验。
- 改进了投诉列表和收藏列表的样式,提升了响应式布局和可读性。
- 在全局配置中添加了对开发环境的错误处理,提升了调试体验。
This commit is contained in:
田香琪
2026-06-25 16:52:46 +08:00
parent 1b2e980fb6
commit ec948b5496
86 changed files with 1741 additions and 1050 deletions

View File

@@ -161,6 +161,9 @@
box-sizing: border-box;
margin: 0 13px 8px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.card {
width: 120px;
height: 120px;
@@ -172,12 +175,19 @@
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkbox {
.card-checkbox {
position: absolute;
top: 10px;
right: 10px;
top: 8px;
right: 8px;
z-index: 1000;
height: auto;
margin: 0;
:deep(.el-checkbox__label) {
display: none;
}
}
.preview {
width: 100%;
@@ -226,35 +236,6 @@
display: flex;
flex-direction: row-reverse;
}
/* Checkbox默认的样式 */
.check-box {
.ivu-checkbox {
position: absolute;
right: 10px;
top: 10px;
z-index: 100;
}
}
/* 覆盖iView默认的Checkbox样式 */
.ivu-checkbox-wrapper {
/*font-size: 16px; !* 修改字体大小 *!*/
/*color: #495060; !* 修改文本颜色 *!*/
/* 添加其他需要的样式 */
}
.ivu-checkbox-inner {
/*width: 20px; !* 修改选框大小 *!*/
/*height: 20px;*/
/*border-color: #dcdee2; !* 修改边框颜色 *!*/
/* 添加其他需要的样式 */
}
/* 当Checkbox被选中时的样式 */
.ivu-checkbox-checked .ivu-checkbox-inner {
/*background-color: #2db7f5; !* 修改选中时的背景颜色 *!*/
}
/* 当Checkbox不可用时的样式 */
.ivu-checkbox-disabled .ivu-checkbox-inner {
/*background-color: #e9e9e9; !* 修改禁用状态下的背景颜色 *!*/
}
.demo-tree-render .ivu-tree-title{
width: 94%;

View File

@@ -165,37 +165,39 @@
<el-checkbox-group v-model="selectedOss" @change="selectOssChange">
<div class="img-box">
<div v-for="(item, index) in data" :key="index" class="img-item">
<el-checkbox :value="item.id + ',' + item.url" class="check-box">
<div
class="card"
@mouseenter="onMouseOver(item, index)"
@mouseleave="onMouseOut(item, index)"
>
<img :src="item.url" alt="" />
<div v-if="item.isShowPreview" class="preview">
<div @click.prevent="download(item)">
<el-tooltip content="下载" placement="top">
<el-icon :size="18"><Download /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="remove(item)">
<el-tooltip content="删除" placement="top">
<el-icon :size="18"><Delete /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="showPic(item)">
<el-tooltip content="预览" placement="top">
<el-icon :size="22"><View /></el-icon>
</el-tooltip>
</div>
<div
class="card"
:class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
@mouseenter="onMouseOver(item, index)"
@mouseleave="onMouseOut(item, index)"
>
<el-checkbox
:value="item.id + ',' + item.url"
class="card-checkbox"
@click.stop
/>
<img :src="item.url" alt="" />
<div v-if="item.isShowPreview" class="preview">
<div @click.prevent="download(item)">
<el-tooltip content="下载" placement="top">
<el-icon :size="18"><Download /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="remove(item)">
<el-tooltip content="删除" placement="top">
<el-icon :size="18"><Delete /></el-icon>
</el-tooltip>
</div>
<div @click.prevent="showPic(item)">
<el-tooltip content="预览" placement="top">
<el-icon :size="22"><View /></el-icon>
</el-tooltip>
</div>
</div>
</el-checkbox>
<div>
<el-tooltip :content="item.name" placement="bottom">
<div class="text">{{ item.name }}</div>
</el-tooltip>
</div>
<el-tooltip :content="item.name" placement="bottom">
<div class="text">{{ item.name }}</div>
</el-tooltip>
</div>
</div>
</el-checkbox-group>