mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 10:56:46 +08:00
自适应调试其他细节调整
This commit is contained in:
670788339
@@ -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
|
||||
@@ -980,108 +988,103 @@ export default {
|
||||
.course-dialog-content {
|
||||
min-height: 280px;
|
||||
|
||||
.course-dialog-content {
|
||||
min-height: 280px;
|
||||
|
||||
.course-table {
|
||||
min-height: 180px;
|
||||
}
|
||||
.course-table {
|
||||
min-height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗在小屏幕下的适配 */
|
||||
@media (max-width: 768px) {
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
font-size: 12px;
|
||||
|
||||
/* 弹窗在小屏幕下的适配 */
|
||||
@media (max-width: 768px) {
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 10px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 12px;
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 10px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高DPI屏幕适配 */
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
|
||||
.tagManage {
|
||||
font-size: 15px;
|
||||
.course-id-cell {
|
||||
font-size: 10px;
|
||||
max-width: 120px;
|
||||
line-height: 1.2;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
|
||||
.filter {
|
||||
.filterItems {
|
||||
.btn, .btnn {
|
||||
.btnText {
|
||||
font-size: 15px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-dialog-content {
|
||||
.course-table {
|
||||
:deep(.ant-table) {
|
||||
font-size: 14px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.course-id-cell,
|
||||
.course-name-cell,
|
||||
.creator-cell,
|
||||
.other-tags-cell {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user