feat(regulatoryPlatForm): 添加统计卡片点击跳转功能
- 为统计卡片添加点击事件,支持跳转到对应的待办列表页面 - 增加卡片点击动效和悬停效果提升用户体验 - 在路由跳转时传递时间戳参数避免缓存问题
This commit is contained in:
parent
41d13a8193
commit
2b981b3ffd
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
<!-- 统计卡片 -->
|
<!-- 统计卡片 -->
|
||||||
<div class="card-group">
|
<div class="card-group">
|
||||||
<div class="stat-card">
|
<div class="stat-card" @click="goToTodoList('all')">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<svg-icon icon-class="d1" />
|
<svg-icon icon-class="d1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<div class="card-num">{{ cardData.myTodo }}</div>
|
<div class="card-num">{{ cardData.myTodo }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card" @click="goToTodoList('abnormal')">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<svg-icon icon-class="d2" />
|
<svg-icon icon-class="d2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
<div class="card-num">{{ cardData.abnormal }}</div>
|
<div class="card-num">{{ cardData.abnormal }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card" @click="goToTodoList('illegal')">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<svg-icon icon-class="d3" />
|
<svg-icon icon-class="d3" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
<div class="card-num">{{ cardData.illegal }}</div>
|
<div class="card-num">{{ cardData.illegal }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card" @click="goToTodoList('repair')">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<svg-icon icon-class="d1" />
|
<svg-icon icon-class="d1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
<div class="card-num">{{ cardData.creditRepair }}</div>
|
<div class="card-num">{{ cardData.creditRepair }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card" @click="goToTodoList('correct')">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<svg-icon icon-class="d2" />
|
<svg-icon icon-class="d2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -312,6 +312,13 @@ export default {
|
||||||
data: pieData
|
data: pieData
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
// 跳转到我的待办对应 tab
|
||||||
|
goToTodoList(activeName) {
|
||||||
|
this.$router.push({
|
||||||
|
path: '/toDoList',
|
||||||
|
query: { activeName, activeNamet: Date.now() }
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -397,6 +404,12 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
.icon{
|
.icon{
|
||||||
background: #EBF5FF;
|
background: #EBF5FF;
|
||||||
border-radius: 65px;
|
border-radius: 65px;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ export default {
|
||||||
if (this.$route.query.activeName === 'fraudCheck') {
|
if (this.$route.query.activeName === 'fraudCheck') {
|
||||||
this.url = '/aiccs/#/cancel/fraudCheckList'
|
this.url = '/aiccs/#/cancel/fraudCheckList'
|
||||||
} else {
|
} else {
|
||||||
this.url = '/aiccs/#/todo/list' + '?activeName=' + this.activeName + '&bustype=' + this.bustype
|
this.url = '/aiccs/#/todo/list' + '?activeName=' + this.activeName + '&bustype=' + this.bustype + '&activeNamet=' + (this.$route.query.activeNamet || '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.src = this.url
|
this.src = this.url
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue