mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 22:06:45 +08:00
自适应调试其他细节调整
This commit is contained in:
670788339
@@ -169,7 +169,21 @@
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template v-else-if="column.key === 'operation'">
|
||||
<a-button type="link" @click="() => handleUnbindConfirm(record)" class="unbind-btn">解绑</a-button>
|
||||
<!-- <a-popconfirm
|
||||
title="确认解绑该课程？"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="unbindCurrentTag(record)"
|
||||
>
|
||||
<a-button type="link" class="unbind-btn">解绑</a-button>
|
||||
</a-popconfirm>-->
|
||||
<a-space :key="record.id">
|
||||
<a-button @click="() => handleOper(record)"
|
||||
type="link"
|
||||
>
|
||||
解绑
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -192,17 +206,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {reactive, toRefs, ref, h} from "vue";
|
||||
import { message, Tooltip, Modal } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { reactive, toRefs, ref } from "vue";
|
||||
import { message, Tooltip, Popconfirm } from "ant-design-vue";
|
||||
import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
|
||||
import moment from "moment";
|
||||
import dialog from "@/utils/dialog";
|
||||
|
||||
export default {
|
||||
name: "TagManage",
|
||||
components: {
|
||||
ATooltip: Tooltip,
|
||||
ExclamationCircleOutlined
|
||||
// APopconfirm: Popconfirm
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
@@ -252,7 +266,7 @@ export default {
|
||||
title: "已关联课程",
|
||||
dataIndex: "useCount",
|
||||
key: "useCount",
|
||||
width: 150,
|
||||
width: 120,
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
@@ -414,6 +428,7 @@ export default {
|
||||
getTagList();
|
||||
};
|
||||
|
||||
|
||||
// 表格排序变化
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
if (sorter.field === 'useCount') {
|
||||
@@ -537,20 +552,8 @@ export default {
|
||||
getCourseListByTag();
|
||||
};
|
||||
|
||||
// 解绑确认弹框
|
||||
const handleUnbindConfirm = (record) => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
icon: () => h(ExclamationCircleOutlined, { style: { color: '#1890ff' } }),
|
||||
content: '确认解绑该课程？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
centered: true,
|
||||
wrapClassName: 'unbind-confirm-modal',
|
||||
onOk: async () => {
|
||||
await unbindCurrentTag(record);
|
||||
}
|
||||
});
|
||||
const handleOper = (record) => {
|
||||
dialog({content: "确认解绑该课程？", ok: unbindCurrentTag(record)});
|
||||
};
|
||||
|
||||
// 解绑标签
|
||||
@@ -621,10 +624,10 @@ export default {
|
||||
showCourseByTagg,
|
||||
closeCourseDialog,
|
||||
changeCoursePagination,
|
||||
handleUnbindConfirm,
|
||||
unbindCurrentTag,
|
||||
formatDate,
|
||||
exportTag
|
||||
exportTag,
|
||||
handleOper
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -991,208 +994,138 @@ export default {
|
||||
.course-dialog-content {
|
||||
min-height: 280px;
|
||||
|
||||
.course-table {
|
||||
min-height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-dialog-content {
|
||||
min-height: 280px;
|
||||
|
||||
/* 弹窗在小屏幕下的适配 */
|
||||
@media (max-width: 768px) {
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
font-size: 12px;
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 10px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.course-table {
|
||||
min-height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-pagination {
|
||||
:deep(.ant-pagination) {
|
||||
.ant-pagination-item,
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.ant-pagination-item a {
|
||||
padding: 0 6px;
|
||||
/* 弹窗在小屏幕下的适配 */
|
||||
@media (max-width: 768px) {
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
font-size: 12px;
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 10px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-id-cell {
|
||||
font-size: 10px;
|
||||
max-width: 120px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
.course-pagination {
|
||||
:deep(.ant-pagination) {
|
||||
.ant-pagination-item,
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.course-name-cell {
|
||||
max-width: 150px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.creator-cell {
|
||||
max-width: 60px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.other-tags-cell {
|
||||
max-width: 150px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高DPI屏幕适配 */
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
|
||||
.tagManage {
|
||||
font-size: 15px;
|
||||
|
||||
.filter {
|
||||
.filterItems {
|
||||
.btn, .btnn {
|
||||
.btnText {
|
||||
font-size: 15px;
|
||||
.ant-pagination-item a {
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
font-size: 14px;
|
||||
}
|
||||
.course-id-cell {
|
||||
font-size: 10px;
|
||||
max-width: 120px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.course-name-cell {
|
||||
max-width: 150px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.creator-cell {
|
||||
max-width: 60px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.other-tags-cell {
|
||||
max-width: 150px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.course-id-cell,
|
||||
.course-name-cell,
|
||||
.creator-cell,
|
||||
.other-tags-cell {
|
||||
font-size: 14px;
|
||||
/* 高DPI屏幕适配 */
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
|
||||
.tagManage {
|
||||
font-size: 15px;
|
||||
|
||||
.filter {
|
||||
.filterItems {
|
||||
.btn, .btnn {
|
||||
.btnText {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-id-cell,
|
||||
.course-name-cell,
|
||||
.creator-cell,
|
||||
.other-tags-cell {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 解绑确认弹框样式 - 根据图片样式定制
|
||||
.unbind-confirm-modal {
|
||||
// 全局弹窗样式调整
|
||||
.course-dialog {
|
||||
.ant-modal {
|
||||
top: 50px !important;
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
.ant-modal-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: linear-gradient(0deg, rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100%);
|
||||
border-bottom: 1px solid #e8f4ff;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.anticon {
|
||||
color: #1890ff;
|
||||
font-size: 18px;
|
||||
}
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 24px;
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ant-modal-close {
|
||||
@@ -1207,14 +1140,55 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.unbind-confirm-modal {
|
||||
// 弹窗内表格工具提示样式优化
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// 确认框样式优化
|
||||
.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 {
|
||||
margin: 20px;
|
||||
.ant-modal-body {
|
||||
padding: 16px;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
padding: 12px 16px;
|
||||
@@ -1223,25 +1197,102 @@ export default {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
.ant-modal {
|
||||
width: 95% !important;
|
||||
max-width: none !important;
|
||||
|
||||
.ant-modal-content {
|
||||
.ant-modal-body {
|
||||
padding: 16px;
|
||||
|
||||
.ant-modal-confirm-body-wrapper {
|
||||
.ant-modal-confirm-btns {
|
||||
margin-top: 20px;
|
||||
|
||||
.ant-btn {
|
||||
height: 28px;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: 12px;
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格滚动条样式优化
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user