hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-10 03:16:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

自适应调试其他细节调整

Browse Source
This commit is contained in:
670788339
2025-11-01 10:35:30 +08:00
parent cf13f63a6a
commit 88b6fc58be
1 changed files with 302 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/views/tag/TagManage.vue
View File

@@ -169,14 +169,7 @@
<!-- 操作列 -->
<template v-else-if="column.key === 'operation'">
<a-popconfirm
title="确认解绑该课程？"
ok-text="确认"
cancel-text="取消"
@confirm="unbindCurrentTag(record)"
>
<a-button type="link" class="unbind-btn">解绑</a-button>
</a-popconfirm>
<a-button type="link" @click="() => handleUnbindConfirm(record)" class="unbind-btn">解绑</a-button>
</template>
</template>
</a-table>
@@ -200,15 +193,14 @@
<script>
import { reactive, toRefs, ref } from "vue";
import { message, Tooltip, Popconfirm } from "ant-design-vue";
import { message, Tooltip, Modal } from "ant-design-vue";
import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
import moment from "moment";
export default {
name: "TagManage",
components: {
ATooltip: Tooltip,
APopconfirm: Popconfirm
ATooltip: Tooltip
},
setup() {
const state = reactive({
@@ -543,6 +535,21 @@ export default {
getCourseListByTag();
};
// 解绑确认弹框
const handleUnbindConfirm = (record) => {
Modal.confirm({
title: '操作确认',
content: '确认解绑该课程？',
okText: '确定',
cancelText: '取消',
centered: true,
wrapClassName: 'unbind-confirm-modal',
onOk: async () => {
await unbindCurrentTag(record);
}
});
};
// 解绑标签
const unbindCurrentTag = async (record) => {
try {
@@ -611,6 +618,7 @@ export default {
showCourseByTagg,
closeCourseDialog,
changeCoursePagination,
handleUnbindConfirm,
unbindCurrentTag,
formatDate,
exportTag
@@ -977,9 +985,6 @@ export default {
}
}
.course-dialog-content {
min-height: 280px;
.course-dialog-content {
min-height: 280px;
@@ -989,7 +994,6 @@ export default {
}
}
/* 弹窗在小屏幕下的适配 */
@media (max-width: 768px) {
.course-dialog-content {
@@ -1083,7 +1087,6 @@ export default {
font-size: 14px;
}
}
}
</style>
<style lang="scss">
@@ -1139,35 +1142,6 @@ export default {
}
}
// 确认框样式优化
.ant-popconfirm {
.ant-popconfirm-message {
.ant-popconfirm-message-title {
font-size: 14px;
color: #333;
}
}
.ant-popconfirm-buttons {
button {
border-radius: 6px;
font-size: 13px;
height: 32px;
padding: 0 16px;
&.ant-btn-primary {
background: #ff4d4f;
border-color: #ff4d4f;
&:hover {
background: #ff7875;
border-color: #ff7875;
}
}
}
}
}
@media (max-width: 768px) {
.ant-modal {
.ant-modal-content {
@@ -1204,22 +1178,6 @@ export default {
padding: 6px 10px;
}
}
.ant-popconfirm {
.ant-popconfirm-message {
.ant-popconfirm-message-title {
font-size: 13px;
}
}
.ant-popconfirm-buttons {
button {
height: 28px;
padding: 0 12px;
font-size: 12px;
}
}
}
}
@media (max-width: 480px) {
@@ -1237,6 +1195,88 @@ export default {
}
}
// 解绑确认弹框样式 - 参考CourseRecommended.vue样式
.unbind-confirm-modal {
.ant-modal {
.ant-modal-content {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
.ant-modal-header {
background: #fafafa;
border-bottom: 1px solid #e8e8e8;
padding: 16px 24px;
border-radius: 8px 8px 0 0;
.ant-modal-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
}
.ant-modal-body {
padding: 24px;
font-size: 14px;
color: #666;
line-height: 1.5;
.ant-modal-confirm-body {
display: flex;
align-items: flex-start;
.ant-modal-confirm-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.ant-modal-confirm-content {
margin-left: 0;
margin-top: 0;
color: #666;
}
}
}
.ant-modal-footer {
padding: 10px 24px 24px;
border-top: 1px solid #e8e8e8;
text-align: right;
.ant-btn {
height: 32px;
padding: 0 16px;
border-radius: 6px;
font-size: 14px;
margin-left: 8px;
&.ant-btn-default {
border: 1px solid #d9d9d9;
color: #333;
&:hover {
border-color: #4ea6ff;
color: #4ea6ff;
}
}
&.ant-btn-primary {
background: #4ea6ff;
border-color: #4ea6ff;
&:hover {
background: #388be1;
border-color: #388be1;
}
}
}
}
}
}
}
// 表格滚动条样式优化
.course-dialog {
.ant-table-body {
@@ -1281,4 +1321,127 @@ export default {
}
}
}
// 确认框样式优化
.ant-modal-confirm {
.ant-modal-body {
padding: 24px !important;
.ant-modal-confirm-body-wrapper {
.ant-modal-confirm-body {
.anticon {
margin-top: 4px;
color: #faad14;
font-size: 22px;
}
.ant-modal-confirm-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.ant-modal-confirm-content {
margin-left: 38px;
color: #666;
font-size: 14px;
line-height: 1.5;
}
}
.ant-modal-confirm-btns {
margin-top: 24px;
text-align: right;
.ant-btn {
height: 32px;
padding: 0 16px;
border-radius: 6px;
font-size: 14px;
margin-left: 8px;
&.ant-btn-default {
border: 1px solid #d9d9d9;
color: #333;
&:hover {
border-color: #4ea6ff;
color: #4ea6ff;
}
}
&.ant-btn-primary {
background: #4ea6ff;
border-color: #4ea6ff;
&:hover {
background: #388be1;
border-color: #388be1;
}
}
}
}
}
}
}
// 响应式适配
@media (max-width: 768px) {
.unbind-confirm-modal {
.ant-modal {
.ant-modal-content {
margin: 20px;
width: auto !important;
.ant-modal-body {
padding: 16px !important;
.ant-modal-confirm-body-wrapper {
.ant-modal-confirm-body {
.ant-modal-confirm-content {
margin-left: 32px;
font-size: 13px;
}
}
.ant-modal-confirm-btns {
margin-top: 20px;
.ant-btn {
height: 28px;
padding: 0 12px;
font-size: 13px;
}
}
}
}
}
}
}
.ant-modal-confirm {
.ant-modal-body {
padding: 16px !important;
.ant-modal-confirm-body-wrapper {
.ant-modal-confirm-body {
.ant-modal-confirm-content {
margin-left: 32px;
font-size: 13px;
}
}
.ant-modal-confirm-btns {
margin-top: 20px;
.ant-btn {
height: 28px;
padding: 0 12px;
font-size: 13px;
}
}
}
}
}
}
</style>