hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-07 07:35:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: less to scss

Browse Source
This commit is contained in:
xingyu4j
2022-11-23 15:18:59 +08:00
parent a5287d7186
commit 8a77c94710
36 changed files with 293 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
yudao-ui-admin-vue3/src/App.vue
View File

@ -33,8 +33,8 @@ const setDefaultTheme = () => {
setDefaultTheme()
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-app';
<style lang="scss">
$prefix-cls: #{$namespace}-app;
.size {
width: 100%;
@ -46,14 +46,14 @@ body {
padding: 0 !important;
margin: 0;
overflow: hidden;
.size;
@extend .size;
#app {
.size;
@extend .size;
}
}
.@{prefix-cls}-grey-mode {
.#{$prefix-cls}-grey-mode {
filter: grayscale(100%);
}
</style>

12
yudao-ui-admin-vue3/src/components/Breadcrumb/src/Breadcrumb.vue
View File

@ -87,13 +87,13 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{elNamespace}-breadcrumb';
<style lang="scss" scoped>
$prefix-cls: #{$elNamespace}-breadcrumb;
.@{prefix-cls} {
.#{$prefix-cls} {
:deep(&__item) {
display: flex;
.@{prefix-cls}__inner {
.#{$prefix-cls}__inner {
display: flex;
align-items: center;
color: var(--top-header-text-color);
@ -105,7 +105,7 @@ export default defineComponent({
}
:deep(&__item):not(:last-child) {
.@{prefix-cls}__inner {
.#{$prefix-cls}__inner {
color: var(--top-header-text-color);
&:hover {
@ -115,7 +115,7 @@ export default defineComponent({
}
:deep(&__item):last-child {
.@{prefix-cls}__inner {
.#{$prefix-cls}__inner {
color: var(--el-text-color-placeholder);
&:hover {

10
yudao-ui-admin-vue3/src/components/Descriptions/src/Descriptions.vue
View File

@ -129,10 +129,10 @@ const toggleClick = () => {
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-descriptions';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-descriptions;
.@{prefix-cls}-header {
.#{$prefix-cls}-header {
&__title {
&::after {
position: absolute;
@ -146,8 +146,8 @@ const toggleClick = () => {
}
}
.@{prefix-cls}-content {
:deep(.@{elNamespace}-descriptions__cell) {
.#{$prefix-cls}-content {
:deep(.#{$elNamespace}-descriptions__cell) {
width: 0;
}
}

21
yudao-ui-admin-vue3/src/components/Dialog/src/Dialog.vue
View File

@ -92,23 +92,14 @@ const dialogStyle = computed(() => {
</ElDialog>
</template>
<style lang="less">
.@{elNamespace}-dialog__header {
<style lang="scss">
.#{$elNamespace}-dialog__header {
margin-right: 0 !important;
padding-bottom: 6px;
padding-top: 10px;
border-bottom: 1px solid var(--tags-view-border-color);
}
.@{elNamespace}-dialog__headerbtn {
top: -4px !important;
}
.@{elNamespace}-dialog__footer {
border-top: 0px solid var(--tags-view-border-color);
}
.dialog-footer button:first-child {
margin-right: 10px;
.#{$elNamespace}-dialog__footer {
border-top: 1px solid var(--tags-view-border-color);
}
.is-hover {
@ -118,11 +109,11 @@ const dialogStyle = computed(() => {
}
.dark {
.@{elNamespace}-dialog__header {
.#{$elNamespace}-dialog__header {
border-bottom: 1px solid var(--el-border-color);
}
.@{elNamespace}-dialog__footer {
.#{$elNamespace}-dialog__footer {
border-top: 1px solid var(--el-border-color);
}
}

4
yudao-ui-admin-vue3/src/components/Form/src/Form.vue
View File

@ -294,8 +294,8 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
<style lang="scss" scoped>
.#{$elNamespace}-form.#{$namespace}-form .#{$elNamespace}-row {
margin-right: 0 !important;
margin-left: 0 !important;
}

1
yudao-ui-admin-vue3/src/components/IFrame/src/IFrame.vue
View File

@ -29,4 +29,3 @@ onMounted(() => {
></iframe>
</div>
</template>
<script lang="less" scoped></script>

2
yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue
View File

@ -182,7 +182,7 @@ watch(
</div>
</template>
<style lang="less" scoped>
<style lang="scss" scoped>
.el-divider--horizontal {
margin: 1px auto !important;
}

8
yudao-ui-admin-vue3/src/components/InputPassword/src/InputPassword.vue
View File

@ -74,11 +74,11 @@ const getIconName = computed(() => (unref(textType) === 'password' ? 'ep:hide' :
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-input-password';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-input-password;
.@{prefix-cls} {
:deep(.@{elNamespace}-input__clear) {
.#{$prefix-cls} {
:deep(.#{$elNamespace}-input__clear) {
margin-left: 5px;
}

64
yudao-ui-admin-vue3/src/components/Menu/src/Menu.vue
View File

@ -121,8 +121,8 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-menu';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-menu;
.is-active--after {
position: absolute;
@ -134,7 +134,7 @@ export default defineComponent({
content: '';
}
.@{prefix-cls} {
.#{$prefix-cls} {
position: relative;
transition: width var(--transition-time-02);
@ -147,20 +147,20 @@ export default defineComponent({
content: '';
}
:deep(.@{elNamespace}-menu) {
:deep(.#{$elNamespace}-menu) {
width: 100% !important;
border-right: none;
// 设置选中时子标题的颜色
.is-active {
& > .@{elNamespace}-sub-menu__title {
& > .#{$elNamespace}-sub-menu__title {
color: var(--left-menu-text-active-color) !important;
}
}
// 设置子菜单悬停的高亮和背景色
.@{elNamespace}-sub-menu__title,
.@{elNamespace}-menu-item {
.#{$elNamespace}-sub-menu__title,
.#{$elNamespace}-menu-item {
&:hover {
color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-color) !important;
@ -168,8 +168,8 @@ export default defineComponent({
}
// 设置选中时的高亮背景和高亮颜色
.@{elNamespace}-sub-menu.is-active,
.@{elNamespace}-menu-item.is-active {
.#{$elNamespace}-sub-menu.is-active,
.#{$elNamespace}-menu-item.is-active {
color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-active-color) !important;
@ -178,34 +178,34 @@ export default defineComponent({
}
}
.@{elNamespace}-menu-item.is-active {
.#{$elNamespace}-menu-item.is-active {
position: relative;
&:after {
.is-active--after;
@extend .is-active--after;
}
}
// 设置子菜单的背景颜色
.@{elNamespace}-menu {
.@{elNamespace}-sub-menu__title,
.@{elNamespace}-menu-item:not(.is-active) {
.#{$elNamespace}-menu {
.#{$elNamespace}-sub-menu__title,
.#{$elNamespace}-menu-item:not(.is-active) {
background-color: var(--left-menu-bg-light-color) !important;
}
}
}
// 折叠时的最小宽度
:deep(.@{elNamespace}-menu--collapse) {
:deep(.#{$elNamespace}-menu--collapse) {
width: var(--left-menu-min-width);
& > .is-active,
& > .is-active > .@{elNamespace}-sub-menu__title {
& > .is-active > .#{$elNamespace}-sub-menu__title {
position: relative;
background-color: var(--left-menu-collapse-bg-active-color) !important;
&:after {
.is-active--after;
@extend .is-active--after;
}
}
}
@ -213,26 +213,26 @@ export default defineComponent({
// 折叠动画的时候，就需要把文字给隐藏掉
:deep(.horizontal-collapse-transition) {
// transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
.@{prefix-cls}__title {
.#{$prefix-cls}__title {
display: none;
}
}
// 水平菜单
&__horizontal {
height: calc(~'var(--top-tool-height)') !important;
height: calc(var(--top-tool-height)) !important;
:deep(.@{elNamespace}-menu--horizontal) {
height: calc(~'var(--top-tool-height)');
:deep(.#{$elNamespace}-menu--horizontal) {
height: calc(var(--top-tool-height));
border-bottom: none;
// 重新设置底部高亮颜色
& > .@{elNamespace}-sub-menu.is-active {
.@{elNamespace}-sub-menu__title {
& > .#{$elNamespace}-sub-menu.is-active {
.#{$elNamespace}-sub-menu__title {
border-bottom-color: var(--el-color-primary) !important;
}
}
.@{elNamespace}-menu-item.is-active {
.#{$elNamespace}-menu-item.is-active {
position: relative;
&:after {
@ -240,19 +240,19 @@ export default defineComponent({
}
}
.@{prefix-cls}__title {
.#{$prefix-cls}__title {
/* stylelint-disable-next-line */
max-height: calc(~'var(--top-tool-height) - 2px') !important;
max-height: calc(var(--top-tool-height) - 2px) !important;
/* stylelint-disable-next-line */
line-height: calc(~'var(--top-tool-height) - 2px');
line-height: calc(var(--top-tool-height) - 2px);
}
}
}
}
</style>
<style lang="less">
@prefix-cls: ~'@{namespace}-menu-popper';
<style lang="scss">
$prefix-cls: #{$namespace}-menu-popper;
.is-active--after {
position: absolute;
@ -264,8 +264,8 @@ export default defineComponent({
content: '';
}
.@{prefix-cls}--vertical,
.@{prefix-cls}--horizontal {
.#{$prefix-cls}--vertical,
.#{$prefix-cls}--horizontal {
// 设置选中时子标题的颜色
.is-active {
& > .el-sub-menu__title {
@ -292,7 +292,7 @@ export default defineComponent({
}
&:after {
.is-active--after;
@extend .is-active--after;
}
}
}

6
yudao-ui-admin-vue3/src/components/Qrcode/src/Qrcode.vue
View File

@ -237,10 +237,10 @@ const disabledClick = () => {
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-qrcode';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-qrcode;
.@{prefix-cls} {
.#{$prefix-cls} {
&--disabled {
background: rgba(255, 255, 255, 0.95);

6
yudao-ui-admin-vue3/src/components/Setting/src/Setting.vue
View File

@ -288,10 +288,10 @@ const clear = () => {
</ElDrawer>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-setting;
.@{prefix-cls} {
.#{$prefix-cls} {
border-radius: 6px 0 0 6px;
}
</style>

6
yudao-ui-admin-vue3/src/components/Setting/src/components/ColorRadioPicker.vue
View File

@ -54,10 +54,10 @@ watch(
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-color-radio-picker';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-color-radio-picker;
.@{prefix-cls} {
.#{$prefix-cls} {
.is-active {
border-color: var(--el-color-primary);
}

6
yudao-ui-admin-vue3/src/components/Setting/src/components/LayoutRadioPicker.vue
View File

@ -59,10 +59,10 @@ const layout = computed(() => appStore.getLayout)
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-layout-radio-picker';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-layout-radio-picker;
.@{prefix-cls} {
.#{$prefix-cls} {
&__classic {
border: 2px solid #e5e7eb;
border-radius: 4px;

6
yudao-ui-admin-vue3/src/components/TabMenu/src/TabMenu.vue
View File

@ -213,10 +213,10 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tab-menu';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-tab-menu;
.@{prefix-cls} {
.#{$prefix-cls} {
transition: all var(--transition-time-02);
&:after {

2
yudao-ui-admin-vue3/src/components/Table/src/Table.vue
View File

@ -295,7 +295,7 @@ export default defineComponent({
}
})
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;

24
yudao-ui-admin-vue3/src/components/TagsView/src/TagsView.vue
View File

@ -463,11 +463,11 @@ watch(
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tags-view';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-tags-view;
.@{prefix-cls} {
:deep(.@{elNamespace}-scrollbar__view) {
.#{$prefix-cls} {
:deep(.#{$elNamespace}-scrollbar__view) {
height: 100%;
}
@ -485,7 +485,7 @@ watch(
top: 1px;
left: 0;
width: 100%;
height: calc(~'100% - 1px');
height: calc(100% - 1px);
border-right: 1px solid var(--tags-view-border-color);
border-left: 1px solid var(--tags-view-border-color);
content: '';
@ -495,7 +495,7 @@ watch(
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
height: calc(100% - 4px);
padding-right: 25px;
margin-left: 4px;
font-size: 12px;
@ -509,8 +509,8 @@ watch(
display: none;
transform: translate(0, -50%);
}
&:not(.@{prefix-cls}__item--affix):hover {
.@{prefix-cls}__item--close {
&:not(.#{$prefix-cls}__item--affix):hover {
.#{$prefix-cls}__item--close {
display: block;
}
}
@ -526,7 +526,7 @@ watch(
color: var(--el-color-white);
background-color: var(--el-color-primary);
border: 1px solid var(--el-color-primary);
.@{prefix-cls}__item--close {
.#{$prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;
}
@ -535,7 +535,7 @@ watch(
}
.dark {
.@{prefix-cls} {
.#{$prefix-cls} {
&__tool {
&:hover {
:deep(span) {
@ -552,7 +552,7 @@ watch(
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
height: calc(100% - 4px);
padding-right: 25px;
font-size: 12px;
cursor: pointer;
@ -568,7 +568,7 @@ watch(
&__item.is-active {
color: var(--el-color-white);
background-color: var(--el-color-primary);
.@{prefix-cls}__item--close {
.#{$prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;
}

2
yudao-ui-admin-vue3/src/components/XButton/src/XButton.vue
View File

@ -35,7 +35,7 @@ const getBindValue = computed(() => {
<Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
</el-button>
</template>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;

2
yudao-ui-admin-vue3/src/components/XButton/src/XTextButton.vue
View File

@ -34,7 +34,7 @@ const getBindValue = computed(() => {
<Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
</el-button>
</template>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;

8
yudao-ui-admin-vue3/src/hooks/web/useDesign.ts
View File

@ -1,18 +1,18 @@
import variables from '@/styles/variables.module.less'
import variables from '@/styles/global.module.scss'
export const useDesign = () => {
const lessVariables = variables
const scssVariables = variables
/**
* @param scope 类名
* @returns 返回空间名-类名
*/
const getPrefixCls = (scope: string) => {
return `${lessVariables.namespace}-${scope}`
return `${scssVariables.namespace}-${scope}`
}
return {
variables: lessVariables,
variables: scssVariables,
getPrefixCls
}
}

10
yudao-ui-admin-vue3/src/layout/Layout.vue
View File

@ -66,12 +66,12 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-layout';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-layout;
.@{prefix-cls} {
background-color: var(--app-contnet-bg-color);
:deep(.@{elNamespace}-scrollbar__view) {
.#{$prefix-cls} {
background-color: var(--app-content-bg-color);
:deep(.#{$elNamespace}-scrollbar__view) {
height: 100% !important;
}
}

6
yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue
View File

@ -74,10 +74,10 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tool-header';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-tool-header;
.@{prefix-cls} {
.#{$prefix-cls} {
transition: left var(--transition-time-02);
}
</style>

2
yudao-ui-admin-vue3/src/main.ts
View File

@ -20,7 +20,7 @@ import { setupElementPlus } from '@/plugins/elementPlus'
import { setupVxeTable } from '@/plugins/vxeTable'
// 引入全局样式
import '@/styles/index.less'
import '@/styles/index.scss'
// 引入动画
import '@/plugins/animate.css'

6
yudao-ui-admin-vue3/src/styles/global.module.scss Normal file
View File

@ -0,0 +1,6 @@
@import './variables.scss';
// 导出变量
:export {
namespace: $namespace;
elNamespace: $elNamespace;
}

3
yudao-ui-admin-vue3/src/styles/index.less
View File

@ -1,3 +0,0 @@
@import './var.css';
@import './vxe.css';
@import 'element-plus/theme-chalk/dark/css-vars.css';

23
yudao-ui-admin-vue3/src/styles/index.scss Normal file
View File

@ -0,0 +1,23 @@
@import './var.css';
@import './vxe.css';
@import 'element-plus/theme-chalk/dark/css-vars.css';
.reset-margin [class*='el-icon'] + span {
margin-left: 2px !important;
}
/* nprogress 适配 element-plus 的主题色 */
#nprogress {
& .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);
}
}

6
yudao-ui-admin-vue3/src/styles/theme.less
View File

@ -1,6 +0,0 @@
// .text-color {
// color: var(--el-text-color-regular);
// }
// .dark .dark\:text-color {
// color: rgba(255, 255, 255, var(--dark-text-color));
// }

10
yudao-ui-admin-vue3/src/styles/variables.module.less
View File

@ -1,10 +0,0 @@
// 命名空间
@namespace: v;
// el命名空间
@elNamespace: el;
// 导出变量
:export {
namespace: @namespace;
elNamespace: @elNamespace;
}

4
yudao-ui-admin-vue3/src/styles/variables.scss Normal file
View File

@ -0,0 +1,4 @@
// 命名空间
$namespace: v;
// el命名空间
$elNamespace: el;

18
yudao-ui-admin-vue3/src/views/Home/Index2.vue
View File

@ -270,10 +270,10 @@ const getAllApi = async () => {
getAllApi()
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-panel';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;
.@{prefix-cls} {
.#{$prefix-cls} {
&__item {
&--peoples {
color: #40c9c6;
@ -292,22 +292,22 @@ getAllApi()
}
&:hover {
:deep(.@{namespace}-icon) {
:deep(.#{$namespace}-icon) {
color: #fff !important;
}
.@{prefix-cls}__item--icon {
.#{$prefix-cls}__item--icon {
transition: all 0.38s ease-out;
}
.@{prefix-cls}__item--peoples {
.#{$prefix-cls}__item--peoples {
background: #40c9c6;
}
.@{prefix-cls}__item--message {
.#{$prefix-cls}__item--message {
background: #36a3f7;
}
.@{prefix-cls}__item--money {
.#{$prefix-cls}__item--money {
background: #f4516c;
}
.@{prefix-cls}__item--shopping {
.#{$prefix-cls}__item--shopping {
background: #34bfa3;
}
}

6
yudao-ui-admin-vue3/src/views/Login/Login.vue
View File

@ -73,10 +73,10 @@ const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-login';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;
.@{prefix-cls} {
.#{$prefix-cls} {
&__left {
&::before {
position: absolute;

2
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
View File

@ -307,7 +307,7 @@ onMounted(() => {
})
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;

2
yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
View File

@ -197,7 +197,7 @@ const signIn = async () => {
}
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;