update 调整样式

This commit is contained in:
zk
2024-06-15 18:26:15 +08:00
parent fc6e3a736e
commit 1645f16579
13 changed files with 191 additions and 159 deletions
+42 -39
View File
@@ -62,6 +62,7 @@
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
import { DataType } from '/@/utils/settings.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
import { message } from 'ant-design-vue';
const props = defineProps({
setting: Object,
@@ -128,6 +129,8 @@
Map.createMarker(item, () => {
handlePolice(item);
});
} else {
message.warn('暂无定位信息');
}
}
@@ -219,49 +222,49 @@
}
}
</style>
<style lang="less">
.dialog-con {
background-color: #00152b;
// antd表格样式
.ant-table-thead > tr > th {
//border-bottom: 1px solid #1e73c2 !important;
}
<!--<style lang="less">-->
<!-- .dialog-con {-->
<!-- background-color: #00152b;-->
<!-- // antd表格样式-->
<!-- .ant-table-thead > tr > th {-->
<!-- //border-bottom: 1px solid #1e73c2 !important;-->
<!-- }-->
.ant-table-body {
background-color: #00152b !important;
}
<!-- .ant-table-body {-->
<!-- background-color: #00152b !important;-->
<!-- }-->
.ant-modal-header {
border-bottom: none !important;
}
<!-- .ant-modal-header {-->
<!-- border-bottom: none !important;-->
<!-- }-->
.ant-table-tbody > tr > td {
border-bottom: 1px solid #1e73c2 !important;
background-color: #00152b !important;
color: #ffffff !important;
}
<!-- .ant-table-tbody > tr > td {-->
<!-- border-bottom: 1px solid #1e73c2 !important;-->
<!-- background-color: #00152b !important;-->
<!-- color: #ffffff !important;-->
<!-- }-->
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover,
.ant-table-thead > tr > th {
background-color: #00152b !important;
color: #ffffff !important;
}
<!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
<!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
<!-- .ant-table-thead > tr > th {-->
<!-- background-color: #00152b !important;-->
<!-- color: #ffffff !important;-->
<!-- }-->
.ant-table-cell-scrollbar {
box-shadow: none !important;
}
<!-- .ant-table-cell-scrollbar {-->
<!-- box-shadow: none !important;-->
<!-- }-->
/*
表格滚动条
*/
<!-- /*-->
<!--表格滚动条-->
<!--*/-->
.ant-table-body::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(30, 115, 194, 0.3);
}
}
</style>
<!-- .ant-table-body::-webkit-scrollbar-thumb {-->
<!-- border: 4px solid rgba(0, 0, 0, 0);-->
<!-- height: 6px;-->
<!-- border-radius: 25px;-->
<!-- background-clip: padding-box;-->
<!-- background-color: rgba(30, 115, 194, 0.3);-->
<!-- }-->
<!-- }-->
<!--</style>-->
+4 -60
View File
@@ -1,6 +1,6 @@
<template>
<a-modal
:class="[themeType == ThemeType.dark ? 'dialog-dark' : 'dialog-light']"
:class="['dialog', themeType]"
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
@@ -13,9 +13,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useUserStore } from '/@/store/modules/user.ts';
import { ThemeType } from '/@/utils/settings.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const emit = defineEmits(['close']);
const props = defineProps({
@@ -29,11 +27,7 @@
type: String,
},
});
const store = useUserStore();
const themeType = ref('');
onMounted(() => {
themeType.value = store.getThemeType;
});
const { themeType } = useTheme();
function handleCancel() {
emit('close');
@@ -41,7 +35,7 @@
</script>
<style lang="less">
.dialog-dark {
.dialog {
border: 1px solid #0a50a0;
background-color: #00152b;
@@ -51,56 +45,6 @@
align-items: center;
width: 100%;
height: 40px;
background: url('../../assets/images/dialog.png') no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
padding-left: 2%;
font-size: 18px;
font-weight: bold;
}
.ant-modal-header {
padding: 0 !important;
border-bottom: none;
}
.ant-modal-header,
.ant-modal-content {
background-color: transparent !important;
box-shadow: none;
}
.ant-modal-body {
padding: 0 !important;
}
.ant-modal-close-x,
.anticon {
color: #999999 !important;
height: 40px;
line-height: 40px;
}
.ant-modal-footer {
border-top: none !important;
}
.ant-modal-wrap {
//background-color: rgba(0, 0, 0, 0.6);
}
}
.dialog-light {
border: 1px solid #0a50a0;
background-color: #fff;
.ant-modal-title {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 40px;
background: url('../../assets/images/dialog.png') no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
padding-left: 2%;
@@ -109,9 +109,9 @@
</script>
<style scoped lang="less">
:deep(.ant-table-thead > tr > th) {
color: #fff !important;
background: rgba(35, 132, 221, 0.5) !important;
border-top: 1px solid #1d4e7c !important;
color: var(--tableFontColor) !important;
background: var(--tableHeadBg) !important;
border-top: 1px solid var(--tableHeadBg) !important;
border-bottom: none;
padding: 9px 9px;
}
@@ -121,7 +121,7 @@
}
:deep(.ant-table) {
color: #fff;
color: var(--tableFontColor);
background-color: transparent;
//pointer-events: none;
}
@@ -133,13 +133,13 @@
:deep(.ant-table-row:hover) {
background-color: transparent;
color: #ffffff;
color: var(--tableFontColor);
}
.ant-table-striped :deep(.table-default) td,
.ant-table-striped :deep(.table-striped) td {
background-color: #00152b;
border-bottom: 1px solid #2384dd;
background-color: var(--tableRowBg) !important;
border-bottom: 1px solid var(--tableRowBorder);
padding: 10px 4px !important;
}
@@ -147,42 +147,41 @@
background: transparent;
}
//#00152b
// 分页
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935;
background-color: var(--pageItemLink);
color: #8291a9;
border: none;
}
:deep(.ant-pagination-item) {
background-color: #1f2935;
color: #ffffff;
background-color: var(--pageItemLink);
color: var(--tableFontColor);
border: none;
}
// 当前页选中的样式
:deep(.ant-pagination-item-active) {
background-color: #0081ff;
background-color: var(--pageItemActiveBg);
}
:deep(.ant-pagination-item-active a) {
color: #ffffff;
color: #fff;
}
:deep(.ant-pagination-item a),
:deep(.ant-pagination-total-text) {
color: #ffffff;
color: var(--tableFontColor);
}
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
color: #ffffff;
background-color: #1f2935;
}
//:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
// color: var(--tableFontColor);
// background-color: var(--pageItemLink);
//}
// 省略样式
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
color: #ffffff;
color: var(--tableFontColor);
}
// 省略鼠标移入样式
@@ -192,7 +191,7 @@
// 下一页
:deep(.ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935;
background-color: var(--pageItemLink);
color: #8291a9;
border: none;
}