root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: stylelint

Browse Source 
(cherry picked from commit 821c804189)
This commit is contained in:
xingyu 2023-11-14 21:56:54 +08:00 committed by shizhong
parent 18251290f9
commit 9d52790910
14 changed files with 143 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/DiyEditor/components/ComponentContainer.vue
View File

@ -1,7 +1,6 @@
<template>
<div :class="['component', { active: active }]">
<div
class="component-inner"
:style="{
...style
}"
@ -127,114 +126,110 @@ $active-border-width: 2px;
$hover-border-width: 1px;
$name-position: -85px;
$toolbar-position: -55px;
/* 组件 */
.component {
position: relative;
cursor: move;
.component-inner {
position: relative;
z-index: 1;
}
/* 用于包裹组件，为组件提供 组件名称、工具栏、边框等样式 */
.component-wrap {
z-index: 0;
// 不可以被点击
// component-wrap会遮挡组件，导致组件不能触发鼠标事件，所以这里要先禁用，然后在组件名称、工具栏上开启。
pointer-events: none;
display: block;
position: absolute;
left: -$active-border-width;
top: 0;
left: -$active-border-width;
display: block;
width: 100%;
height: 100%;
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--el-color-primary);
box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
.component-name {
top: $hover-border-width;
/* 防止加了边框之后，位置移动 */
left: $name-position - $hover-border-width;
}
}
/* 左侧：组件名称 */
.component-name {
// 可以被点击
pointer-events: auto;
display: block;
position: absolute;
width: 80px;
text-align: center;
line-height: 25px;
height: 25px;
background: #fff;
font-size: 12px;
left: $name-position;
top: $active-border-width;
left: $name-position;
display: block;
width: 80px;
height: 25px;
font-size: 12px;
line-height: 25px;
text-align: center;
background: #fff;
box-shadow:
0 0 4px #00000014,
0 2px 6px #0000000f,
0 4px 8px 2px #0000000a;
/* 右侧小三角 */
&:after {
&::after {
position: absolute;
top: 7.5px;
right: -10px;
content: ' ';
height: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #fff;
content: ' ';
}
}
/* 右侧：组件操作工具栏 */
.component-toolbar {
// 可以被点击
pointer-events: auto;
display: none;
position: absolute;
top: 0;
right: $toolbar-position;
display: none;
/* 左侧小三角 */
&:before {
&::before {
position: absolute;
top: 10px;
left: -10px;
content: ' ';
height: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #2d8cf0;
content: ' ';
}
}
}
/* 组件选中时 */
&.active {
margin-bottom: 4px;
.component-wrap {
z-index: 2;
border: $active-border-width solid var(--el-color-primary) !important;
box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
margin-bottom: $active-border-width + $active-border-width;
border: $active-border-width solid var(--el-color-primary) !important;
box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
.component-name {
background: var(--el-color-primary);
color: #fff;
top: 0 !important;
/* 防止加了边框之后，位置移动 */
left: $name-position - $active-border-width !important;
top: 0 !important;
&:after {
color: #fff;
background: var(--el-color-primary);
&::after {
border-left-color: var(--el-color-primary);
}
}
.component-toolbar {
display: block;
}
}
}
/* 鼠标放到组件上时 */
&:hover {
.component-wrap {
z-index: 2;
border: $hover-border-width dashed var(--el-color-primary);
box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
.component-name {
/* 防止加了边框之后，位置移动 */
left: $name-position - $hover-border-width;
top: $hover-border-width;
}
}
}
}
</style>

1
src/components/DiyEditor/components/ComponentContainerProperty.vue
View File

@ -157,6 +157,7 @@ const handleSliderChange = (prop: string) => {
:deep(.el-slider__runway) {
margin-right: 16px;
}
:deep(.el-input-number) {
width: 50px;
}

36
src/components/DiyEditor/components/ComponentLibrary.vue
View File

@ -90,23 +90,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
.editor-left {
z-index: 1;
flex-shrink: 0;
box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12);
box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
:deep(.el-collapse) {
border-top: none;
}
:deep(.el-collapse-item__wrap) {
border-bottom: none;
}
:deep(.el-collapse-item__content) {
padding-bottom: 0;
}
:deep(.el-collapse-item__header) {
border-bottom: none;
background-color: var(--el-bg-color-page);
padding: 0 24px;
height: 32px;
padding: 0 24px;
line-height: 32px;
background-color: var(--el-bg-color-page);
border-bottom: none;
}
.component-container {
@ -116,25 +119,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
}
.component {
display: flex;
width: 86px;
height: 86px;
display: flex;
cursor: move;
border-right: 1px solid var(--el-border-color-lighter);
border-bottom: 1px solid var(--el-border-color-lighter);
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid var(--el-border-color-lighter);
border-bottom: 1px solid var(--el-border-color-lighter);
cursor: move;
.el-icon {
margin-bottom: 4px;
color: gray;
}
}
.component.active,
.component:hover {
background: var(--el-color-primary);
color: var(--el-color-white);
background: var(--el-color-primary);
.el-icon {
color: var(--el-color-white);
@ -155,11 +159,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
.drag-area {
/* 拖拽到手机区域时的样式 */
.draggable-ghost {
display: flex;
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
/* 条纹背景 */
background: linear-gradient(
45deg,
@ -174,20 +177,25 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
);
background-size: 1rem 1rem;
transition: all 0.5s;
justify-content: center;
align-items: center;
span {
color: #fff;
display: inline-block;
width: 140px;
height: 25px;
font-size: 12px;
text-align: center;
line-height: 25px;
color: #fff;
text-align: center;
background: #5487df;
}
/* 拖拽时隐藏组件 */
.component {
display: none;
}
/* 拖拽时显示占位提示 */
.drag-placement {
display: block;

2
src/components/DiyEditor/components/mobile/ImageBar/index.vue
View File

@ -17,8 +17,8 @@ defineProps<{ property: ImageBarProperty }>()
<style scoped lang="scss">
/* 图片 */
img {
display: block;
width: 100%;
height: 100%;
display: block;
}
</style>

11
src/components/DiyEditor/components/mobile/NavigationBar/index.vue
View File

@ -35,22 +35,25 @@ defineProps<{ property: NavigationBarProperty }>()
</script>
<style lang="scss" scoped>
.navigation-bar {
display: flex;
height: 35px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
/* 左边 */
.left {
margin-left: 8px;
}
.center {
flex: 1;
text-align: center;
font-size: 14px;
line-height: 35px;
color: #333333;
color: #333;
text-align: center;
flex: 1;
}
/* 右边 */
.right {
margin-right: 8px;

10
src/components/DiyEditor/components/mobile/SearchBar/index.vue
View File

@ -45,21 +45,21 @@ defineProps<{ property: SearchProperty }>()
/* 搜索框 */
.inner {
position: relative;
min-height: 28px;
display: flex;
align-items: center;
min-height: 28px;
font-size: 14px;
align-items: center;
.placeholder {
display: flex;
align-items: center;
width: 100%;
padding: 0 8px;
gap: 2px;
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
align-items: center;
gap: 2px;
}
.right {

7
src/components/DiyEditor/components/mobile/TabBar/index.vue
View File

@ -30,8 +30,9 @@ defineProps<{ property: TabBarProperty }>()
</script>
<style lang="scss" scoped>
.tab-bar {
width: 100%;
z-index: 2;
width: 100%;
.tab-bar-bg {
display: flex;
flex-direction: row;
@ -41,11 +42,11 @@ defineProps<{ property: TabBarProperty }>()
.tab-bar-item {
display: flex;
width: 100%;
font-size: 12px;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
width: 100%;
img {
width: 26px;

12
src/components/DiyEditor/components/mobile/TitleBar/index.vue
View File

@ -56,23 +56,23 @@ defineProps<{ property: TitleBarProperty }>()
</script>
<style scoped lang="scss">
.title-bar {
position: relative;
width: 100%;
min-height: 20px;
padding: 8px 16px;
border: 2px solid #fff;
box-sizing: border-box;
width: 100%;
padding: 8px 16px;
min-height: 20px;
position: relative;
/* 更多 */
.more {
position: absolute;
right: 8px;
top: 0;
right: 8px;
bottom: 0;
display: flex;
margin: auto;
font-size: 10px;
color: #969799;
display: flex;
align-items: center;
justify-content: center;
}

2
src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
View File

@ -23,8 +23,8 @@ defineProps<{ property: VideoPlayerProperty }>()
<style scoped lang="scss">
/* 图片 */
img {
display: block;
width: 100%;
height: 100%;
display: block;
}
</style>

54
src/components/DiyEditor/index.vue
View File

@ -337,28 +337,33 @@ onMounted(() => setDefaultSelectedComponent())
/* 手机宽度 */
$phone-width: 375px;
$toolbar-height: 42px;
/* 根节点样式 */
.editor {
display: flex;
height: 100%;
margin: calc(0px - var(--app-content-padding));
display: flex;
flex-direction: column;
/* 顶部：工具栏 */
.editor-header {
display: flex;
align-items: center;
justify-content: space-between;
height: $toolbar-height;
padding: 0;
border-bottom: solid 1px var(--el-border-color);
background-color: var(--el-bg-color);
border-bottom: solid 1px var(--el-border-color);
align-items: center;
justify-content: space-between;
/* 工具栏：右侧按钮 */
.header-right {
height: 100%;
.el-button {
height: 100%;
}
}
/* 隐藏工具栏按钮的边框 */
:deep(.el-radio-button__inner),
:deep(.el-button) {
@ -367,33 +372,40 @@ $toolbar-height: 42px;
border-radius: 0 !important;
}
}
/* 中心操作区 */
.editor-container {
height: calc(
100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
$toolbar-height
);
/* 右侧属性面板 */
.editor-right {
flex-shrink: 0;
box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
overflow: hidden;
box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
flex-shrink: 0;
/* 属性面板顶部：减少内边距 */
:deep(.el-card__header) {
padding: 8px 16px;
}
/* 属性面板分组 */
:deep(.property-group) {
margin: 0 -20px;
&.el-card {
border: none;
}
/* 属性分组名称 */
.el-card__header {
border: none;
background: var(--el-bg-color-page);
padding: 8px 32px;
background: var(--el-bg-color-page);
border: none;
}
.el-card__body {
border: none;
}
@ -403,33 +415,36 @@ $toolbar-height: 42px;
/* 中心区域 */
.editor-center {
position: relative;
flex: 1 1 0;
background-color: var(--app-content-bg-color);
display: flex;
width: 100%;
margin: 16px 0 0;
overflow: hidden;
background-color: var(--app-content-bg-color);
flex: 1 1 0;
flex-direction: column;
justify-content: center;
margin: 16px 0 0 0;
overflow: hidden;
width: 100%;
/* 手机顶部 */
.editor-design-top {
display: flex;
width: $phone-width;
margin: 0 auto;
display: flex;
flex-direction: column;
/* 手机顶部状态栏 */
.status-bar {
height: 20px;
width: $phone-width;
height: 20px;
background-color: #fff;
}
}
/* 手机底部导航 */
.editor-design-bottom {
width: $phone-width;
margin: 0 auto;
}
/* 手机页面编辑区域 */
:deep(.editor-design-center) {
width: 100%;
@ -437,14 +452,15 @@ $toolbar-height: 42px;
/* 主体内容 */
.phone-container {
position: relative;
width: $phone-width;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: $phone-width;
margin: 0 auto;
.drag-area {
height: 100%;
width: 100%;
height: 100%;
}
}
}

18
src/components/VerticalButtonGroup/index.vue
View File

@ -17,24 +17,28 @@ defineOptions({ name: 'VerticalButtonGroup' })
display: inline-flex;
flex-direction: column;
}
.el-button-group > :deep(.el-button:first-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: var(--el-border-radius-base);
border-bottom-color: var(--el-button-divide-border-color);
border-top-right-radius: var(--el-border-radius-base);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.el-button-group > :deep(.el-button:last-child) {
border-top-left-radius: 0;
border-top-color: var(--el-button-divide-border-color);
border-top-right-radius: 0;
border-bottom-left-radius: var(--el-border-radius-base);
border-top-color: var(--el-button-divide-border-color);
border-top-left-radius: 0;
}
.el-button-group :deep(.el-button--primary:not(:first-child):not(:last-child)) {
.el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) {
border-top-color: var(--el-button-divide-border-color);
border-bottom-color: var(--el-button-divide-border-color);
}
.el-button-group > :deep(.el-button:not(:last-child)) {
margin-bottom: -1px;
margin-right: 0;
margin-bottom: -1px;
}
</style>

2
src/layout/components/Message/src/Message.vue
View File

@ -91,8 +91,8 @@ onUnmounted(() => {
}
.message-list {
height: 400px;
display: flex;
height: 400px;
flex-direction: column;
.message-item {

2
src/views/mall/statistics/member/components/MemberFunnelCard.vue
View File

@ -110,9 +110,11 @@ const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]
.trapezoid1 {
transform: perspective(5em) rotateX(-11deg);
}
.trapezoid2 {
transform: perspective(7em) rotateX(-20deg);
}
.trapezoid3 {
transform: perspective(3em) rotateX(-13deg);
}

1
src/views/mall/trade/delivery/pickUpOrder/index.vue
View File

@ -316,6 +316,7 @@ onMounted(() => {
:deep(.order-table-col > .cell) {
padding: 0;
}
.summary {
.el-col {
margin-bottom: 1rem;