系统UI美化
parent
0168d71154
commit
abdc9da743
Binary file not shown.
After Width: | Height: | Size: 4.1 KiB |
|
@ -322,7 +322,24 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*【美化表单】form的字体改小一号*/
|
||||
.ant-form-item-label > label{
|
||||
font-size: 13px;
|
||||
}
|
||||
.ant-form-item .ant-select {
|
||||
font-size: 13px;
|
||||
}
|
||||
.ant-select-item-option-selected {
|
||||
font-size: 13px;
|
||||
}
|
||||
.ant-select-item-option-content {
|
||||
font-size: 13px;
|
||||
}
|
||||
.ant-input {
|
||||
font-size: 13px;
|
||||
}
|
||||
/*【美化表单】form的字体改小一号*/
|
||||
|
||||
.ant-form-explain {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<!-- antd v3 升级兼容,阻止数据的收集,防止控制台报错 -->
|
||||
<!-- https://antdv.com/docs/vue/migration-v3-cn -->
|
||||
<a-form-item-rest>
|
||||
<Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @change="handleTableChange">
|
||||
<Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @resizeColumn="handleResizeColumn" @change="handleTableChange">
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
|
@ -289,6 +289,9 @@
|
|||
wrapRef,
|
||||
tableAction,
|
||||
redoHeight,
|
||||
handleResizeColumn: (w, col) => {
|
||||
col.width = w;
|
||||
},
|
||||
getFormProps: getFormProps as any,
|
||||
replaceFormSlotKey,
|
||||
getFormSlotKeys,
|
||||
|
@ -406,8 +409,8 @@
|
|||
//表格选择工具栏样式
|
||||
.alert {
|
||||
height: 38px;
|
||||
background-color: #f3f3f3;
|
||||
border-color: #e3e3e3;
|
||||
background-color: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
&--inset {
|
||||
.ant-table-wrapper {
|
||||
|
|
|
@ -20,7 +20,7 @@ export const basicProps = {
|
|||
},
|
||||
showTableSetting: propTypes.bool,
|
||||
autoCreateKey: propTypes.bool.def(true),
|
||||
striped: propTypes.bool.def(true),
|
||||
striped: propTypes.bool.def(false),
|
||||
showSummary: propTypes.bool,
|
||||
summaryFunc: {
|
||||
type: [Function, Array] as PropType<(...arg: any[]) => any[]>,
|
||||
|
|
|
@ -94,5 +94,9 @@
|
|||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
/*【美化表单】行编辑table的title字体改小一号*/
|
||||
.vxe-header--column.col--ellipsis>.vxe-cell .vxe-cell--title{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -50,7 +50,9 @@ html[data-theme='dark'] {
|
|||
.ant-pagination-next,
|
||||
.ant-pagination-item {
|
||||
margin: 0 4px !important;
|
||||
background-color: #f4f4f5 !important;
|
||||
//update-begin---author:scott ---date:2022-09-30 for:【美化】Table分页页面默认背景色丑,去掉-----------
|
||||
//background-color: #f4f4f5 !important;
|
||||
//update-end---author:scott ---date::2022-09-30 for:【美化】Table分页页面默认背景色丑,去掉------------
|
||||
border: none;
|
||||
border-radius: none !important;
|
||||
|
||||
|
|
|
@ -6,7 +6,23 @@ html[data-theme='light'] {
|
|||
.text-secondary {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
/*【美化】自定义table字体颜色*/
|
||||
.ant-table {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
/*【美化】自定义table字体颜色*/
|
||||
/*【美化】自定义form字体颜色*/
|
||||
.ant-select-multiple .ant-select-selection-item-content {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.ant-input-affix-wrapper > input.ant-input {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.ant-select-single.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder{
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
/*【美化】自定义form字体颜色*/
|
||||
|
||||
.ant-alert-success {
|
||||
background-color: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
|
|
|
@ -50,6 +50,9 @@ export function useHeaderSetting() {
|
|||
const getShowBread = computed(() => {
|
||||
return unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit);
|
||||
});
|
||||
const getShowBreadTitle = computed(() => {
|
||||
return unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(getShowBreadCrumb) && !unref(getSplit);
|
||||
});
|
||||
|
||||
const getShowHeaderLogo = computed(() => {
|
||||
return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
|
||||
|
@ -82,5 +85,6 @@ export function useHeaderSetting() {
|
|||
getShowInsetHeaderRef,
|
||||
getUnFixedAndFull,
|
||||
getHeaderBgColor,
|
||||
getShowBreadTitle
|
||||
};
|
||||
}
|
||||
|
|
|
@ -235,7 +235,7 @@ export function useListTable(tableProps: TableProps): [
|
|||
},
|
||||
},
|
||||
// 斑马纹
|
||||
striped: true,
|
||||
striped: false,
|
||||
// 是否可以自适应高度
|
||||
canResize: true,
|
||||
// 表格最小高度
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
:sider="false"
|
||||
/>
|
||||
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
|
||||
<!-- 欢迎语 -->
|
||||
<span v-if="getShowContent && getShowBreadTitle" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> 欢迎进入 {{ title }} </span>
|
||||
</div>
|
||||
<!-- left end -->
|
||||
|
||||
|
@ -42,7 +44,7 @@
|
|||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
|
||||
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
|
||||
import { Layout } from 'ant-design-vue';
|
||||
|
@ -98,7 +100,8 @@
|
|||
const userStore = useUserStore();
|
||||
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
|
||||
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
|
||||
|
||||
const { title } = useGlobSetting();
|
||||
|
||||
const {
|
||||
getHeaderTheme,
|
||||
getShowFullScreen,
|
||||
|
@ -109,6 +112,7 @@
|
|||
getShowHeader,
|
||||
getShowSearch,
|
||||
getUseLockPage,
|
||||
getShowBreadTitle,
|
||||
} = useHeaderSetting();
|
||||
|
||||
const { getShowLocalePicker } = useLocale();
|
||||
|
@ -185,6 +189,7 @@
|
|||
getHeaderTheme,
|
||||
getShowHeaderTrigger,
|
||||
getIsMobile,
|
||||
getShowBreadTitle,
|
||||
getShowBread,
|
||||
getShowContent,
|
||||
getSplitType,
|
||||
|
@ -203,10 +208,43 @@
|
|||
getUseLockPage,
|
||||
loginSelectOk,
|
||||
loginSelectRef,
|
||||
title
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import './index.less';
|
||||
//update-begin---author:scott ---date:2022-09-30 for:默认隐藏顶部菜单面包屑-----------
|
||||
//顶部欢迎语展示样式
|
||||
@prefix-cls: ~'@{namespace}-layout-header';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
|
||||
.headerIntroductionClass {
|
||||
margin-right: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
&--light {
|
||||
.headerIntroductionClass {
|
||||
color: @breadcrumb-item-normal-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--dark {
|
||||
.headerIntroductionClass {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.anticon {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
//update-end---author:scott ---date::2022-09-30 for:默认隐藏顶部菜单面包屑--------------
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -167,7 +167,7 @@ const setting: ProjectConfig = {
|
|||
lockTime: 0,
|
||||
|
||||
// 显示面包屑
|
||||
showBreadCrumb: true,
|
||||
showBreadCrumb: false,
|
||||
|
||||
// 显示面包屑图标
|
||||
showBreadCrumbIcon: true,
|
||||
|
|
Loading…
Reference in New Issue