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

自适应调试其他细节调整

Browse Source
This commit is contained in:
670788339
2025-11-01 10:54:37 +08:00
parent 88b6fc58be
commit 74c937517e
1 changed files with 102 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -194,13 +194,15 @@
<script> <script>
import { reactive, toRefs, ref } from "vue"; import { reactive, toRefs, ref } from "vue";
import { message, Tooltip, Modal } from "ant-design-vue"; import { message, Tooltip, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js"; import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
import moment from "moment"; import moment from "moment";
export default { export default {
name: "TagManage", name: "TagManage",
components: { components: {
ATooltip: Tooltip ATooltip: Tooltip,
ExclamationCircleOutlined
}, },
setup() { setup() {
const state = reactive({ const state = reactive({
@@ -538,7 +540,8 @@ export default {
// 解绑确认弹框 // 解绑确认弹框
const handleUnbindConfirm = (record) => { const handleUnbindConfirm = (record) => {
Modal.confirm({ Modal.confirm({
title: '操作确认', title: '提示',
icon: () => h(ExclamationCircleOutlined, { style: { color: '#1890ff' } }),
content: '确认解绑该课程？', content: '确认解绑该课程？',
okText: '确定', okText: '确定',
cancelText: '取消', cancelText: '取消',
@@ -1090,31 +1093,106 @@ export default {
</style> </style>
<style lang="scss"> <style lang="scss">
// 全局弹窗样式调整 // 解绑确认弹框样式 - 根据图片样式定制
.course-dialog { .unbind-confirm-modal {
.ant-modal { .ant-modal {
top: 50px !important;
.ant-modal-content { .ant-modal-content {
border-radius: 12px; border-radius: 8px;
overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: #fff;
.ant-modal-header { .ant-modal-header {
background: linear-gradient(0deg, rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100%); background: #fff;
border-bottom: 1px solid #e8f4ff; border-bottom: 1px solid #f0f0f0;
padding: 16px 24px; padding: 16px 24px;
border-radius: 8px 8px 0 0;
.ant-modal-title { .ant-modal-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #1890ff; color: #333;
display: flex;
align-items: center;
gap: 8px;
.anticon {
color: #1890ff;
font-size: 18px;
}
} }
} }
.ant-modal-body { .ant-modal-body {
padding: 24px; padding: 24px;
max-height: 70vh; font-size: 14px;
overflow-y: auto; color: #666;
line-height: 1.5;
text-align: center;
.ant-modal-confirm-body-wrapper {
.ant-modal-confirm-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
.anticon {
color: #1890ff;
font-size: 22px;
margin: 0;
}
.ant-modal-confirm-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.ant-modal-confirm-content {
margin: 0;
color: #666;
font-size: 14px;
line-height: 1.5;
}
}
.ant-modal-confirm-btns {
margin-top: 24px;
text-align: center;
.ant-btn {
height: 32px;
padding: 0 20px;
border-radius: 6px;
font-size: 14px;
margin: 0 8px;
min-width: 80px;
&.ant-btn-default {
border: 1px solid #1890ff;
color: #1890ff;
background: #fff;
&:hover {
border-color: #40a9ff;
color: #40a9ff;
background: #f5f5f5;
}
}
&.ant-btn-primary {
background: #1890ff;
border-color: #1890ff;
&:hover {
background: #40a9ff;
border-color: #40a9ff;
}
}
}
}
}
} }
.ant-modal-close { .ant-modal-close {
@@ -1129,260 +1207,6 @@ export default {
} }
} }
} }
// 弹窗内表格工具提示样式优化
.ant-tooltip {
.ant-tooltip-inner {
max-width: 400px;
word-break: break-all;
background-color: rgba(0, 0, 0, 0.85);
font-size: 13px;
line-height: 1.5;
padding: 8px 12px;
}
}
@media (max-width: 768px) {
.ant-modal {
.ant-modal-content {
.ant-modal-body {
padding: 16px;
max-height: 60vh;
}
.ant-modal-header {
padding: 12px 16px;
.ant-modal-title {
font-size: 14px;
}
}
}
.ant-modal-close {
top: 8px;
right: 8px;
.ant-modal-close-x {
width: 36px;
height: 36px;
line-height: 36px;
}
}
}
.ant-tooltip {
.ant-tooltip-inner {
max-width: 300px;
font-size: 12px;
padding: 6px 10px;
}
}
}
@media (max-width: 480px) {
.ant-modal {
width: 95% !important;
max-width: none !important;
.ant-modal-content {
.ant-modal-body {
padding: 12px;
max-height: 50vh;
}
}
}
}
}
// 解绑确认弹框样式 - 参考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 {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
&:hover {
background: #a8a8a8;
}
}
}
}
// 空状态样式优化
.course-dialog {
.ant-table-placeholder {
.ant-empty {
.ant-empty-image {
height: 80px;
svg {
width: 80px;
height: 80px;
}
}
.ant-empty-description {
font-size: 14px;
color: #999;
}
}
}
}
// 确认框样式优化
.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;
}
}
}
}
}
}
} }
// 响应式适配 // 响应式适配
@@ -1391,26 +1215,27 @@ export default {
.ant-modal { .ant-modal {
.ant-modal-content { .ant-modal-content {
margin: 20px; margin: 20px;
width: auto !important;
.ant-modal-header {
padding: 12px 16px;
.ant-modal-title {
font-size: 14px;
}
}
.ant-modal-body { .ant-modal-body {
padding: 16px !important; padding: 16px;
.ant-modal-confirm-body-wrapper { .ant-modal-confirm-body-wrapper {
.ant-modal-confirm-body {
.ant-modal-confirm-content {
margin-left: 32px;
font-size: 13px;
}
}
.ant-modal-confirm-btns { .ant-modal-confirm-btns {
margin-top: 20px; margin-top: 20px;
.ant-btn { .ant-btn {
height: 28px; height: 28px;
padding: 0 12px; padding: 0 16px;
font-size: 13px; font-size: 13px;
min-width: 70px;
} }
} }
} }
@@ -1418,30 +1243,5 @@ export default {
} }
} }
} }
.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> </style>