From 5d0d61463780b696de0d875a0fdb7ff958d55f2a Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Fri, 3 Jan 2025 18:05:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AutoImport/BaseContainer/index.vue | 25 + .../AutoImport/BaseFooter/index.vue | 5 + .../AutoImport/BaseHeader/index.vue | 5 + src/components/AutoImport/BaseMain/index.vue | 15 + src/components/AutoImport/index.ts | 14 + src/layout/components/lay-content/index.vue | 306 ++++++----- src/main.ts | 81 ++- src/plugins/elementPlus.ts | 473 +++++++++--------- src/router/modules/template.ts | 8 + src/style/element-plus.scss | 267 +++++----- src/views/template/layout/index.vue | 225 +++++++++ 11 files changed, 850 insertions(+), 574 deletions(-) create mode 100644 src/components/AutoImport/BaseContainer/index.vue create mode 100644 src/components/AutoImport/BaseFooter/index.vue create mode 100644 src/components/AutoImport/BaseHeader/index.vue create mode 100644 src/components/AutoImport/BaseMain/index.vue create mode 100644 src/components/AutoImport/index.ts create mode 100644 src/views/template/layout/index.vue diff --git a/src/components/AutoImport/BaseContainer/index.vue b/src/components/AutoImport/BaseContainer/index.vue new file mode 100644 index 0000000..e571602 --- /dev/null +++ b/src/components/AutoImport/BaseContainer/index.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/components/AutoImport/BaseFooter/index.vue b/src/components/AutoImport/BaseFooter/index.vue new file mode 100644 index 0000000..24a49a9 --- /dev/null +++ b/src/components/AutoImport/BaseFooter/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/AutoImport/BaseHeader/index.vue b/src/components/AutoImport/BaseHeader/index.vue new file mode 100644 index 0000000..24a49a9 --- /dev/null +++ b/src/components/AutoImport/BaseHeader/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/components/AutoImport/BaseMain/index.vue b/src/components/AutoImport/BaseMain/index.vue new file mode 100644 index 0000000..d3c7efe --- /dev/null +++ b/src/components/AutoImport/BaseMain/index.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/AutoImport/index.ts b/src/components/AutoImport/index.ts new file mode 100644 index 0000000..0d0d1a0 --- /dev/null +++ b/src/components/AutoImport/index.ts @@ -0,0 +1,14 @@ +import { App, Component } from 'vue'; +import BaseContainer from '@/components/AutoImport/BaseContainer/index.vue'; +import BaseMain from '@/components/AutoImport/BaseMain/index.vue'; +import BaseHeader from '@/components/AutoImport/BaseHeader/index.vue'; +import BaseFooter from '@/components/AutoImport/BaseFooter/index.vue'; + +/** 注入全局组件 */ +export function useAutoImport(app: App) { + // 全局注册组件 + app.component('BaseContainer', BaseContainer); + app.component('BaseMain', BaseMain); + app.component('BaseHeader', BaseHeader); + app.component('BaseFooter', BaseFooter); +} diff --git a/src/layout/components/lay-content/index.vue b/src/layout/components/lay-content/index.vue index 5c7ceb9..669031b 100644 --- a/src/layout/components/lay-content/index.vue +++ b/src/layout/components/lay-content/index.vue @@ -1,213 +1,193 @@ diff --git a/src/main.ts b/src/main.ts index d603e32..e4edf22 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,64 +1,61 @@ -import App from "./App.vue"; -import router from "./router"; -import { setupStore } from "@/store"; -import { getPlatformConfig } from "./config"; -import { MotionPlugin } from "@vueuse/motion"; +import App from './App.vue'; +import router from './router'; +import { setupStore } from '@/store'; +import { getPlatformConfig } from './config'; +import { MotionPlugin } from '@vueuse/motion'; // import { useEcharts } from "@/plugins/echarts"; -import { createApp, type Directive } from "vue"; -import { useElementPlus } from "@/plugins/elementPlus"; -import { injectResponsiveStorage } from "@/utils/responsive"; +import { createApp, type Directive } from 'vue'; +import { useElementPlus } from '@/plugins/elementPlus'; +import { injectResponsiveStorage } from '@/utils/responsive'; +import { useAutoImport } from '@/components/AutoImport'; -import Table from "@pureadmin/table"; +import Table from '@pureadmin/table'; // import PureDescriptions from "@pureadmin/descriptions"; // 引入重置样式 -import "./style/reset.scss"; +import './style/reset.scss'; // 导入公共样式 -import "./style/index.scss"; +import './style/index.scss'; // 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题 -import "./style/tailwind.css"; -import "element-plus/dist/index.css"; +import './style/tailwind.css'; +import 'element-plus/dist/index.css'; // 导入字体图标 -import "./assets/iconfont/iconfont.js"; -import "./assets/iconfont/iconfont.css"; +import './assets/iconfont/iconfont.js'; +import './assets/iconfont/iconfont.css'; const app = createApp(App); // 自定义指令 -import * as directives from "@/directives"; -Object.keys(directives).forEach(key => { - app.directive(key, (directives as { [key: string]: Directive })[key]); +import * as directives from '@/directives'; +Object.keys(directives).forEach((key) => { + app.directive(key, (directives as { [key: string]: Directive })[key]); }); // 全局注册@iconify/vue图标库 -import { - IconifyIconOffline, - IconifyIconOnline, - FontIcon -} from "./components/ReIcon"; -app.component("IconifyIconOffline", IconifyIconOffline); -app.component("IconifyIconOnline", IconifyIconOnline); -app.component("FontIcon", FontIcon); +import { IconifyIconOffline, IconifyIconOnline, FontIcon } from './components/ReIcon'; +app.component('IconifyIconOffline', IconifyIconOffline); +app.component('IconifyIconOnline', IconifyIconOnline); +app.component('FontIcon', FontIcon); // 全局注册按钮级别权限组件 -import { Auth } from "@/components/ReAuth"; -import { Perms } from "@/components/RePerms"; -app.component("Auth", Auth); -app.component("Perms", Perms); +import { Auth } from '@/components/ReAuth'; +import { Perms } from '@/components/RePerms'; +app.component('Auth', Auth); +app.component('Perms', Perms); // 全局注册vue-tippy -import "tippy.js/dist/tippy.css"; -import "tippy.js/themes/light.css"; -import VueTippy from "vue-tippy"; +import 'tippy.js/dist/tippy.css'; +import 'tippy.js/themes/light.css'; +import VueTippy from 'vue-tippy'; app.use(VueTippy); -getPlatformConfig(app).then(async config => { - setupStore(app); - app.use(router); - await router.isReady(); - injectResponsiveStorage(app, config); - app.use(MotionPlugin).use(useElementPlus).use(Table); - // .use(PureDescriptions) - // .use(useEcharts); - app.mount("#app"); +getPlatformConfig(app).then(async (config) => { + setupStore(app); + app.use(router); + await router.isReady(); + injectResponsiveStorage(app, config); + app.use(MotionPlugin).use(useElementPlus).use(useAutoImport).use(Table); + // .use(PureDescriptions) + // .use(useEcharts); + app.mount('#app'); }); diff --git a/src/plugins/elementPlus.ts b/src/plugins/elementPlus.ts index 8363187..3822ac5 100644 --- a/src/plugins/elementPlus.ts +++ b/src/plugins/elementPlus.ts @@ -1,248 +1,245 @@ // 按需引入element-plus（该方法稳定且明确。当然也支持：https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5） -import type { App, Component } from "vue"; +import type { App, Component } from 'vue'; import { - /** - * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行 - * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211 - * */ - ElAffix, - ElAlert, - ElAutocomplete, - ElAutoResizer, - ElAvatar, - ElAnchor, - ElAnchorLink, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckTag, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElConfigProvider, - ElContainer, - ElAside, - ElFooter, - ElHeader, - ElMain, - ElDatePicker, - ElDescriptions, - ElDescriptionsItem, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElEmpty, - ElForm, - ElFormItem, - ElIcon, - ElImage, - ElImageViewer, - ElInput, - ElInputNumber, - ElLink, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElSubMenu, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElResult, - ElRow, - ElScrollbar, - ElSelect, - ElOption, - ElOptionGroup, - ElSelectV2, - ElSkeleton, - ElSkeletonItem, - ElSlider, - ElSpace, - ElStatistic, - ElCountdown, - ElSteps, - ElStep, - ElSwitch, - ElTable, - ElTableColumn, - ElTableV2, - ElTabs, - ElTabPane, - ElTag, - ElText, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElTreeSelect, - ElTreeV2, - ElUpload, - ElWatermark, - ElTour, - ElTourStep, - ElSegmented, - /** - * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行 - * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16 - * */ - ElLoading, // v-loading 指令 - ElInfiniteScroll, // v-infinite-scroll 指令 - ElPopoverDirective, // v-popover 指令 - ElMessage, // $message 全局属性对象globalProperties - ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties - ElNotification // $notify 全局属性对象globalProperties -} from "element-plus"; + /** + * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行 + * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211 + * */ + ElAffix, + ElAlert, + ElAutocomplete, + ElAutoResizer, + ElAvatar, + ElAnchor, + ElAnchorLink, + ElBacktop, + ElBadge, + ElBreadcrumb, + ElBreadcrumbItem, + ElButton, + ElButtonGroup, + ElCalendar, + ElCard, + ElCarousel, + ElCarouselItem, + ElCascader, + ElCascaderPanel, + ElCheckTag, + ElCheckbox, + ElCheckboxButton, + ElCheckboxGroup, + ElCol, + ElCollapse, + ElCollapseItem, + ElCollapseTransition, + ElColorPicker, + ElConfigProvider, + ElContainer, + ElAside, + ElFooter, + ElHeader, + ElMain, + ElDatePicker, + ElDescriptions, + ElDescriptionsItem, + ElDialog, + ElDivider, + ElDrawer, + ElDropdown, + ElDropdownItem, + ElDropdownMenu, + ElEmpty, + ElForm, + ElFormItem, + ElIcon, + ElImage, + ElImageViewer, + ElInput, + ElInputNumber, + ElLink, + ElMenu, + ElMenuItem, + ElMenuItemGroup, + ElSubMenu, + ElPageHeader, + ElPagination, + ElPopconfirm, + ElPopover, + ElPopper, + ElProgress, + ElRadio, + ElRadioButton, + ElRadioGroup, + ElRate, + ElResult, + ElRow, + ElScrollbar, + ElSelect, + ElOption, + ElOptionGroup, + ElSelectV2, + ElSkeleton, + ElSkeletonItem, + ElSlider, + ElSpace, + ElStatistic, + ElCountdown, + ElSteps, + ElStep, + ElSwitch, + ElTable, + ElTableColumn, + ElTableV2, + ElTabs, + ElTabPane, + ElTag, + ElText, + ElTimePicker, + ElTimeSelect, + ElTimeline, + ElTimelineItem, + ElTooltip, + ElTransfer, + ElTree, + ElTreeSelect, + ElTreeV2, + ElUpload, + ElWatermark, + ElTour, + ElTourStep, + ElSegmented, + /** + * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行 + * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16 + * */ + ElLoading, // v-loading 指令 + ElInfiniteScroll, // v-infinite-scroll 指令 + ElPopoverDirective, // v-popover 指令 + ElMessage, // $message 全局属性对象globalProperties + ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties + ElNotification, // $notify 全局属性对象globalProperties +} from 'element-plus'; const components = [ - ElAffix, - ElAlert, - ElAutocomplete, - ElAutoResizer, - ElAvatar, - ElAnchor, - ElAnchorLink, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckTag, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElConfigProvider, - ElContainer, - ElAside, - ElFooter, - ElHeader, - ElMain, - ElDatePicker, - ElDescriptions, - ElDescriptionsItem, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElEmpty, - ElForm, - ElFormItem, - ElIcon, - ElImage, - ElImageViewer, - ElInput, - ElInputNumber, - ElLink, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElSubMenu, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElResult, - ElRow, - ElScrollbar, - ElSelect, - ElOption, - ElOptionGroup, - ElSelectV2, - ElSkeleton, - ElSkeletonItem, - ElSlider, - ElSpace, - ElStatistic, - ElCountdown, - ElSteps, - ElStep, - ElSwitch, - ElTable, - ElTableColumn, - ElTableV2, - ElTabs, - ElTabPane, - ElTag, - ElText, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElTreeSelect, - ElTreeV2, - ElUpload, - ElWatermark, - ElTour, - ElTourStep, - ElSegmented + ElAffix, + ElAlert, + ElAutocomplete, + ElAutoResizer, + ElAvatar, + ElAnchor, + ElAnchorLink, + ElBacktop, + ElBadge, + ElBreadcrumb, + ElBreadcrumbItem, + ElButton, + ElButtonGroup, + ElCalendar, + ElCard, + ElCarousel, + ElCarouselItem, + ElCascader, + ElCascaderPanel, + ElCheckTag, + ElCheckbox, + ElCheckboxButton, + ElCheckboxGroup, + ElCol, + ElCollapse, + ElCollapseItem, + ElCollapseTransition, + ElColorPicker, + ElConfigProvider, + ElContainer, + ElAside, + ElFooter, + ElHeader, + ElMain, + ElDatePicker, + ElDescriptions, + ElDescriptionsItem, + ElDialog, + ElDivider, + ElDrawer, + ElDropdown, + ElDropdownItem, + ElDropdownMenu, + ElEmpty, + ElForm, + ElFormItem, + ElIcon, + ElImage, + ElImageViewer, + ElInput, + ElInputNumber, + ElLink, + ElMenu, + ElMenuItem, + ElMenuItemGroup, + ElSubMenu, + ElPageHeader, + ElPagination, + ElPopconfirm, + ElPopover, + ElPopper, + ElProgress, + ElRadio, + ElRadioButton, + ElRadioGroup, + ElRate, + ElResult, + ElRow, + ElScrollbar, + ElSelect, + ElOption, + ElOptionGroup, + ElSelectV2, + ElSkeleton, + ElSkeletonItem, + ElSlider, + ElSpace, + ElStatistic, + ElCountdown, + ElSteps, + ElStep, + ElSwitch, + ElTable, + ElTableColumn, + ElTableV2, + ElTabs, + ElTabPane, + ElTag, + ElText, + ElTimePicker, + ElTimeSelect, + ElTimeline, + ElTimelineItem, + ElTooltip, + ElTransfer, + ElTree, + ElTreeSelect, + ElTreeV2, + ElUpload, + ElWatermark, + ElTour, + ElTourStep, + ElSegmented, ]; -const plugins = [ - ElLoading, - ElInfiniteScroll, - ElPopoverDirective, - ElMessage, - ElMessageBox, - ElNotification -]; +const plugins = [ElLoading, ElInfiniteScroll, ElPopoverDirective, ElMessage, ElMessageBox, ElNotification]; + +/** 设置部分组件的默认属性 */ +ElCard.props.shadow = { type: String, default: 'never' }; +ElButton.props.round = { type: Boolean, default: true }; /** 按需引入`element-plus` */ export function useElementPlus(app: App) { - // 全局注册组件 - components.forEach((component: Component) => { - app.component(component.name, component); - }); - // 全局注册插件 - plugins.forEach(plugin => { - app.use(plugin); - }); + // 全局注册组件 + components.forEach((component: Component) => { + app.component(component.name, component); + }); + // 全局注册插件 + plugins.forEach((plugin) => { + app.use(plugin); + }); } diff --git a/src/router/modules/template.ts b/src/router/modules/template.ts index c66d1a2..676f096 100644 --- a/src/router/modules/template.ts +++ b/src/router/modules/template.ts @@ -19,5 +19,13 @@ export default { title: '基础模版', }, }, + { + path: '/template/layout', + name: 'TemplateLayout', + component: () => import('@/views/template/layout/index.vue'), + meta: { + title: '布局模版', + }, + }, ], } satisfies RouteConfigsTable; diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index 165008f..9c2bd44 100644 --- a/src/style/element-plus.scss +++ b/src/style/element-plus.scss @@ -1,188 +1,193 @@ .el-form-item__label { - font-weight: 700; + font-weight: 700; } .el-breadcrumb__inner, .el-breadcrumb__inner a { - font-weight: 400 !important; + font-weight: 400 !important; } .el-dropdown-menu { - padding: 0 !important; + padding: 0 !important; } .is-dark { - z-index: 9999 !important; + z-index: 9999 !important; } /* 重置 el-button 中 icon 的 margin */ -.reset-margin [class*="el-icon"] + span { - margin-left: 2px !important; +.reset-margin [class*='el-icon'] + span { + margin-left: 2px !important; } /* 自定义 popover 的类名 */ .pure-popper { - padding: 0 !important; + padding: 0 !important; } /* nprogress 适配 element-plus 的主题色 */ #nprogress { - & .bar { - background-color: var(--el-color-primary) !important; - } + & .bar { + background-color: var(--el-color-primary) !important; + } - & .peg { - box-shadow: - 0 0 10px var(--el-color-primary), - 0 0 5px var(--el-color-primary) !important; - } - - & .spinner-icon { - border-top-color: var(--el-color-primary); - border-left-color: var(--el-color-primary); - } + & .peg { + box-shadow: + 0 0 10px var(--el-color-primary), + 0 0 5px var(--el-color-primary) !important; + } + + & .spinner-icon { + border-top-color: var(--el-color-primary); + border-left-color: var(--el-color-primary); + } } .pure-dialog { - .el-dialog__header.show-close { - padding-right: 16px; - } - - .el-dialog__headerbtn { - top: 16px; - right: 12px; - width: 24px; - height: 24px; - } - - .pure-dialog-svg { - color: var(--el-color-info); - } - - .el-dialog__footer { - padding-top: 0; - } + .el-dialog__header.show-close { + padding-right: 16px; + } + + .el-dialog__headerbtn { + top: 16px; + right: 12px; + width: 24px; + height: 24px; + } + + .pure-dialog-svg { + color: var(--el-color-info); + } + + .el-dialog__footer { + padding-top: 0; + } } /* 全局覆盖element-plus的el-tour、el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */ .el-dialog__headerbtn, .el-message-box__headerbtn { - &:hover { - .el-dialog__close { - color: var(--el-color-info) !important; + &:hover { + .el-dialog__close { + color: var(--el-color-info) !important; + } } - } } .el-icon { - &.el-tour__close, - &.el-dialog__close, - &.el-drawer__close, - &.el-message-box__close, - &.el-notification__closeBtn, - .el-upload-list__item.is-ready &.el-icon--close { - width: 24px; - height: 24px; - border-radius: 4px; - outline: none; - transition: - background-color 0.2s, - color 0.2s; - - &:hover { - color: rgb(0 0 0 / 88%) !important; - text-decoration: none; - background-color: rgb(0 0 0 / 6%); - - .pure-dialog-svg { - color: rgb(0 0 0 / 88%) !important; - } + &.el-tour__close, + &.el-dialog__close, + &.el-drawer__close, + &.el-message-box__close, + &.el-notification__closeBtn, + .el-upload-list__item.is-ready &.el-icon--close { + width: 24px; + height: 24px; + border-radius: 4px; + outline: none; + transition: + background-color 0.2s, + color 0.2s; + + &:hover { + color: rgb(0 0 0 / 88%) !important; + text-decoration: none; + background-color: rgb(0 0 0 / 6%); + + .pure-dialog-svg { + color: rgb(0 0 0 / 88%) !important; + } + } } - } } /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体暗色风格在 src/style/dark.scss 文件进行了适配 */ .pure-message { - background: #fff !important; - border-width: 0 !important; - box-shadow: - 0 3px 6px -4px #0000001f, - 0 6px 16px #00000014, - 0 9px 28px 8px #0000000d !important; - - & .el-message__content { - color: #000000d9 !important; - pointer-events: all !important; - background-image: initial !important; - } - - & .el-message__closeBtn { - border-radius: 4px; - outline: none; - transition: - background-color 0.2s, - color 0.2s; + background: #fff !important; + border-width: 0 !important; + box-shadow: + 0 3px 6px -4px #0000001f, + 0 6px 16px #00000014, + 0 9px 28px 8px #0000000d !important; + + & .el-message__content { + color: #000000d9 !important; + pointer-events: all !important; + background-image: initial !important; + } - &:hover { - background-color: rgb(0 0 0 / 6%); + & .el-message__closeBtn { + border-radius: 4px; + outline: none; + transition: + background-color 0.2s, + color 0.2s; + + &:hover { + background-color: rgb(0 0 0 / 6%); + } } - } } /* 自定义菜单搜索样式 */ .pure-search-dialog { - @media screen and (width > 760px) and (width <= 940px) { - .el-input__inner { - font-size: 12px; + @media screen and (width > 760px) and (width <= 940px) { + .el-input__inner { + font-size: 12px; + } } - } - @media screen and (width <= 470px) { - .el-input__inner { - font-size: 12px; + @media screen and (width <= 470px) { + .el-input__inner { + font-size: 12px; + } } - } - .el-dialog__header { - display: none; - } + .el-dialog__header { + display: none; + } - .el-input__inner { - font-size: 1.2em; - } + .el-input__inner { + font-size: 1.2em; + } - .el-dialog__footer { - width: calc(100% + 32px); - padding: 10px 20px; - margin: auto -16px -16px; - box-shadow: - 0 -1px 0 0 #e0e3e8, - 0 -3px 6px 0 rgb(69 98 155 / 12%); - } + .el-dialog__footer { + width: calc(100% + 32px); + padding: 10px 20px; + margin: auto -16px -16px; + box-shadow: + 0 -1px 0 0 #e0e3e8, + 0 -3px 6px 0 rgb(69 98 155 / 12%); + } } /* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */ .pure-scrollbar { - /* Firefox */ - scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */ - scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */ - ::-webkit-scrollbar { - width: 6px; /* 滚动条宽度 */ - } - - /* 滚动条轨道 */ - ::-webkit-scrollbar-track { - background: transparent; /* 轨道颜色 */ - } - - /* 滚动条滑块 */ - ::-webkit-scrollbar-thumb { - background-color: rgb(221 222 224); - border-radius: 4px; - } - - /* 滚动条滑块：hover状态 */ - ::-webkit-scrollbar-thumb:hover { - background: rgb(199 201 203); /* 滑块hover颜色 */ - } + /* Firefox */ + scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */ + scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */ + ::-webkit-scrollbar { + width: 6px; /* 滚动条宽度 */ + } + + /* 滚动条轨道 */ + ::-webkit-scrollbar-track { + background: transparent; /* 轨道颜色 */ + } + + /* 滚动条滑块 */ + ::-webkit-scrollbar-thumb { + background-color: rgb(221 222 224); + border-radius: 4px; + } + + /* 滚动条滑块：hover状态 */ + ::-webkit-scrollbar-thumb:hover { + background: rgb(199 201 203); /* 滑块hover颜色 */ + } +} + +/** 默认el-card没有边框 */ +.el-card { + border: none !important; } diff --git a/src/views/template/layout/index.vue b/src/views/template/layout/index.vue new file mode 100644 index 0000000..9249e6b --- /dev/null +++ b/src/views/template/layout/index.vue @@ -0,0 +1,225 @@ + + + + +