Skip to content

phsl / admin

Go to a project
Commit 821c8041 by xingyu
Options

fix: stylelint

parent 249e0d21
Showing with 133 additions and 84 deletions
src/components/DiyEditor/components/ComponentContainer.vue
...@@ -126,93 +126,106 @@ $active-border-width: 2px; ...@@ -126,93 +126,106 @@ $active-border-width: 2px;
$hover-border-width: 1px; $hover-border-width: 1px;
$name-position: -85px; $name-position: -85px;
$toolbar-position: -55px; $toolbar-position: -55px;
/* 组件 */ /* 组件 */
.component { .component {
position: relative; position: relative;
cursor: move; cursor: move;
.component-wrap { .component-wrap {
display: block;
position: absolute; position: absolute;
left: -$active-border-width;
top: 0; top: 0;
left: -$active-border-width;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
/* 鼠标放到组件上时 */ /* 鼠标放到组件上时 */
&:hover { &:hover {
border: $hover-border-width dashed var(--el-color-primary); border: $hover-border-width dashed var(--el-color-primary);
box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3); box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
.component-name { .component-name {
top: $hover-border-width;
/* 防止加了边框之后，位置移动 */ /* 防止加了边框之后，位置移动 */
left: $name-position - $hover-border-width; left: $name-position - $hover-border-width;
top: $hover-border-width;
} }
} }
/* 左侧：组件名称 */ /* 左侧：组件名称 */
.component-name { .component-name {
display: block;
position: absolute; position: absolute;
top: $active-border-width;
left: $name-position;
display: block;
width: 80px; width: 80px;
text-align: center;
line-height: 25px;
height: 25px; height: 25px;
background: #fff;
font-size: 12px; font-size: 12px;
left: $name-position; line-height: 25px;
top: $active-border-width; text-align: center;
background: #fff;
box-shadow: box-shadow:
0 0 4px #00000014, 0 0 4px #00000014,
0 2px 6px #0000000f, 0 2px 6px #0000000f,
0 4px 8px 2px #0000000a; 0 4px 8px 2px #0000000a;
/* 右侧小三角 */ /* 右侧小三角 */
&:after { &::after {
position: absolute; position: absolute;
top: 7.5px; top: 7.5px;
right: -10px; right: -10px;
content: ' ';
height: 0;
width: 0; width: 0;
height: 0;
border: 5px solid transparent; border: 5px solid transparent;
border-left-color: #fff; border-left-color: #fff;
content: ' ';
} }
} }
/* 右侧：组件操作工具栏 */ /* 右侧：组件操作工具栏 */
.component-toolbar { .component-toolbar {
display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: $toolbar-position; right: $toolbar-position;
display: none;
/* 左侧小三角 */ /* 左侧小三角 */
&:before { &::before {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: -10px; left: -10px;
content: ' ';
height: 0;
width: 0; width: 0;
height: 0;
border: 5px solid transparent; border: 5px solid transparent;
border-right-color: #2d8cf0; border-right-color: #2d8cf0;
content: ' ';
} }
} }
} }
/* 组件选中时 */ /* 组件选中时 */
&.active { &.active {
margin-bottom: 4px; margin-bottom: 4px;
.component-wrap { .component-wrap {
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; 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 { .component-name {
background: var(--el-color-primary); top: 0 !important;
color: #fff;
/* 防止加了边框之后，位置移动 */ /* 防止加了边框之后，位置移动 */
left: $name-position - $active-border-width !important; left: $name-position - $active-border-width !important;
top: 0 !important; color: #fff;
&:after { background: var(--el-color-primary);
&::after {
border-left-color: var(--el-color-primary); border-left-color: var(--el-color-primary);
} }
} }
.component-toolbar { .component-toolbar {
display: block; display: block;
} }
......
src/components/DiyEditor/components/ComponentContainerProperty.vue
...@@ -157,6 +157,7 @@ const handleSliderChange = (prop: string) => { ...@@ -157,6 +157,7 @@ const handleSliderChange = (prop: string) => {
:deep(.el-slider__runway) { :deep(.el-slider__runway) {
margin-right: 16px; margin-right: 16px;
} }
:deep(.el-input-number) { :deep(.el-input-number) {
width: 50px; width: 50px;
} }
......
src/components/DiyEditor/components/ComponentLibrary.vue
...@@ -90,23 +90,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => { ...@@ -90,23 +90,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
.editor-left { .editor-left {
z-index: 1; z-index: 1;
flex-shrink: 0; 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) { :deep(.el-collapse) {
border-top: none; border-top: none;
} }
:deep(.el-collapse-item__wrap) { :deep(.el-collapse-item__wrap) {
border-bottom: none; border-bottom: none;
} }
:deep(.el-collapse-item__content) { :deep(.el-collapse-item__content) {
padding-bottom: 0; padding-bottom: 0;
} }
:deep(.el-collapse-item__header) { :deep(.el-collapse-item__header) {
border-bottom: none;
background-color: var(--el-bg-color-page);
padding: 0 24px;
height: 32px; height: 32px;
padding: 0 24px;
line-height: 32px; line-height: 32px;
background-color: var(--el-bg-color-page);
border-bottom: none;
} }
.component-container { .component-container {
...@@ -116,25 +119,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => { ...@@ -116,25 +119,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
} }
.component { .component {
display: flex;
width: 86px; width: 86px;
height: 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; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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 { .el-icon {
margin-bottom: 4px; margin-bottom: 4px;
color: gray; color: gray;
} }
} }
.component.active, .component.active,
.component:hover { .component:hover {
background: var(--el-color-primary);
color: var(--el-color-white); color: var(--el-color-white);
background: var(--el-color-primary);
.el-icon { .el-icon {
color: var(--el-color-white); color: var(--el-color-white);
...@@ -155,11 +159,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => { ...@@ -155,11 +159,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
.drag-area { .drag-area {
/* 拖拽到手机区域时的样式 */ /* 拖拽到手机区域时的样式 */
.draggable-ghost { .draggable-ghost {
display: flex;
width: 100%; width: 100%;
height: 40px; height: 40px;
display: flex;
justify-content: center;
align-items: center;
/* 条纹背景 */ /* 条纹背景 */
background: linear-gradient( background: linear-gradient(
45deg, 45deg,
...@@ -174,20 +177,25 @@ const handleCloneComponent = (component: DiyComponent<any>) => { ...@@ -174,20 +177,25 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
); );
background-size: 1rem 1rem; background-size: 1rem 1rem;
transition: all 0.5s; transition: all 0.5s;
justify-content: center;
align-items: center;
span { span {
color: #fff;
display: inline-block; display: inline-block;
width: 140px; width: 140px;
height: 25px; height: 25px;
font-size: 12px; font-size: 12px;
text-align: center;
line-height: 25px; line-height: 25px;
color: #fff;
text-align: center;
background: #5487df; background: #5487df;
} }
/* 拖拽时隐藏组件 */ /* 拖拽时隐藏组件 */
.component { .component {
display: none; display: none;
} }
/* 拖拽时显示占位提示 */ /* 拖拽时显示占位提示 */
.drag-placement { .drag-placement {
display: block; display: block;
......
src/components/DiyEditor/components/mobile/ImageBar/index.vue
...@@ -17,8 +17,8 @@ defineProps<{ property: ImageBarProperty }>() ...@@ -17,8 +17,8 @@ defineProps<{ property: ImageBarProperty }>()
<style scoped lang="scss"> <style scoped lang="scss">
/* 图片 */ /* 图片 */
img { img {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block;
} }
</style> </style>
src/components/DiyEditor/components/mobile/NavigationBar/index.vue
...@@ -35,22 +35,25 @@ defineProps<{ property: NavigationBarProperty }>() ...@@ -35,22 +35,25 @@ defineProps<{ property: NavigationBarProperty }>()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navigation-bar { .navigation-bar {
display: flex;
height: 35px; height: 35px;
background: #fff; background: #fff;
display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* 左边 */ /* 左边 */
.left { .left {
margin-left: 8px; margin-left: 8px;
} }
.center { .center {
flex: 1;
text-align: center;
font-size: 14px; font-size: 14px;
line-height: 35px; line-height: 35px;
color: #333333; color: #333;
text-align: center;
flex: 1;
} }
/* 右边 */ /* 右边 */
.right { .right {
margin-right: 8px; margin-right: 8px;
......
src/components/DiyEditor/components/mobile/SearchBar/index.vue
...@@ -45,21 +45,21 @@ defineProps<{ property: SearchProperty }>() ...@@ -45,21 +45,21 @@ defineProps<{ property: SearchProperty }>()
/* 搜索框 */ /* 搜索框 */
.inner { .inner {
position: relative; position: relative;
min-height: 28px;
display: flex; display: flex;
align-items: center; min-height: 28px;
font-size: 14px; font-size: 14px;
align-items: center;
.placeholder { .placeholder {
display: flex; display: flex;
align-items: center;
width: 100%; width: 100%;
padding: 0 8px; padding: 0 8px;
gap: 2px;
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
word-break: break-all; word-break: break-all;
white-space: nowrap; white-space: nowrap;
align-items: center;
gap: 2px;
} }
.right { .right {
......
src/components/DiyEditor/components/mobile/TabBar/index.vue
...@@ -30,8 +30,9 @@ defineProps<{ property: TabBarProperty }>() ...@@ -30,8 +30,9 @@ defineProps<{ property: TabBarProperty }>()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-bar { .tab-bar {
width: 100%;
z-index: 2; z-index: 2;
width: 100%;
.tab-bar-bg { .tab-bar-bg {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -41,11 +42,11 @@ defineProps<{ property: TabBarProperty }>() ...@@ -41,11 +42,11 @@ defineProps<{ property: TabBarProperty }>()
.tab-bar-item { .tab-bar-item {
display: flex; display: flex;
width: 100%;
font-size: 12px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px;
width: 100%;
img { img {
width: 26px; width: 26px;
......
src/components/DiyEditor/components/mobile/TitleBar/index.vue
...@@ -56,23 +56,23 @@ defineProps<{ property: TitleBarProperty }>() ...@@ -56,23 +56,23 @@ defineProps<{ property: TitleBarProperty }>()
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.title-bar { .title-bar {
border: 2px solid #fff; position: relative;
box-sizing: border-box;
width: 100%; width: 100%;
padding: 8px 16px;
min-height: 20px; min-height: 20px;
position: relative; padding: 8px 16px;
border: 2px solid #fff;
box-sizing: border-box;
/* 更多 */ /* 更多 */
.more { .more {
position: absolute; position: absolute;
right: 8px;
top: 0; top: 0;
right: 8px;
bottom: 0; bottom: 0;
display: flex;
margin: auto; margin: auto;
font-size: 10px; font-size: 10px;
color: #969799; color: #969799;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
......
src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
...@@ -23,8 +23,8 @@ defineProps<{ property: VideoPlayerProperty }>() ...@@ -23,8 +23,8 @@ defineProps<{ property: VideoPlayerProperty }>()
<style scoped lang="scss"> <style scoped lang="scss">
/* 图片 */ /* 图片 */
img { img {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block;
} }
</style> </style>
src/components/DiyEditor/index.vue
...@@ -337,28 +337,33 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -337,28 +337,33 @@ onMounted(() => setDefaultSelectedComponent())
/* 手机宽度 */ /* 手机宽度 */
$phone-width: 375px; $phone-width: 375px;
$toolbar-height: 42px; $toolbar-height: 42px;
/* 根节点样式 */ /* 根节点样式 */
.editor { .editor {
display: flex;
height: 100%; height: 100%;
margin: calc(0px - var(--app-content-padding)); margin: calc(0px - var(--app-content-padding));
display: flex;
flex-direction: column; flex-direction: column;
/* 顶部：工具栏 */ /* 顶部：工具栏 */
.editor-header { .editor-header {
display: flex; display: flex;
align-items: center;
justify-content: space-between;
height: $toolbar-height; height: $toolbar-height;
padding: 0; padding: 0;
border-bottom: solid 1px var(--el-border-color);
background-color: var(--el-bg-color); background-color: var(--el-bg-color);
border-bottom: solid 1px var(--el-border-color);
align-items: center;
justify-content: space-between;
/* 工具栏：右侧按钮 */ /* 工具栏：右侧按钮 */
.header-right { .header-right {
height: 100%; height: 100%;
.el-button { .el-button {
height: 100%; height: 100%;
} }
} }
/* 隐藏工具栏按钮的边框 */ /* 隐藏工具栏按钮的边框 */
:deep(.el-radio-button__inner), :deep(.el-radio-button__inner),
:deep(.el-button) { :deep(.el-button) {
...@@ -367,33 +372,40 @@ $toolbar-height: 42px; ...@@ -367,33 +372,40 @@ $toolbar-height: 42px;
border-radius: 0 !important; border-radius: 0 !important;
} }
} }
/* 中心操作区 */ /* 中心操作区 */
.editor-container { .editor-container {
height: calc( height: calc(
100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
$toolbar-height $toolbar-height
); );
/* 右侧属性面板 */ /* 右侧属性面板 */
.editor-right { .editor-right {
flex-shrink: 0;
box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
overflow: hidden; overflow: hidden;
box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
flex-shrink: 0;
/* 属性面板顶部：减少内边距 */ /* 属性面板顶部：减少内边距 */
:deep(.el-card__header) { :deep(.el-card__header) {
padding: 8px 16px; padding: 8px 16px;
} }
/* 属性面板分组 */ /* 属性面板分组 */
:deep(.property-group) { :deep(.property-group) {
margin: 0 -20px; margin: 0 -20px;
&.el-card { &.el-card {
border: none; border: none;
} }
/* 属性分组名称 */ /* 属性分组名称 */
.el-card__header { .el-card__header {
border: none;
background: var(--el-bg-color-page);
padding: 8px 32px; padding: 8px 32px;
background: var(--el-bg-color-page);
border: none;
} }
.el-card__body { .el-card__body {
border: none; border: none;
} }
...@@ -403,33 +415,36 @@ $toolbar-height: 42px; ...@@ -403,33 +415,36 @@ $toolbar-height: 42px;
/* 中心区域 */ /* 中心区域 */
.editor-center { .editor-center {
position: relative; position: relative;
flex: 1 1 0;
background-color: var(--app-content-bg-color);
display: flex; display: flex;
width: 100%;
margin: 16px 0 0;
overflow: hidden;
background-color: var(--app-content-bg-color);
flex: 1 1 0;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin: 16px 0 0 0;
overflow: hidden;
width: 100%;
/* 手机顶部 */ /* 手机顶部 */
.editor-design-top { .editor-design-top {
display: flex;
width: $phone-width; width: $phone-width;
margin: 0 auto; margin: 0 auto;
display: flex;
flex-direction: column; flex-direction: column;
/* 手机顶部状态栏 */ /* 手机顶部状态栏 */
.status-bar { .status-bar {
height: 20px;
width: $phone-width; width: $phone-width;
height: 20px;
background-color: #fff; background-color: #fff;
} }
} }
/* 手机底部导航 */ /* 手机底部导航 */
.editor-design-bottom { .editor-design-bottom {
width: $phone-width; width: $phone-width;
margin: 0 auto; margin: 0 auto;
} }
/* 手机页面编辑区域 */ /* 手机页面编辑区域 */
:deep(.editor-design-center) { :deep(.editor-design-center) {
width: 100%; width: 100%;
...@@ -437,14 +452,15 @@ $toolbar-height: 42px; ...@@ -437,14 +452,15 @@ $toolbar-height: 42px;
/* 主体内容 */ /* 主体内容 */
.phone-container { .phone-container {
position: relative; position: relative;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: $phone-width; width: $phone-width;
height: 100%;
margin: 0 auto; margin: 0 auto;
background-repeat: no-repeat;
background-size: 100% 100%;
.drag-area { .drag-area {
height: 100%;
width: 100%; width: 100%;
height: 100%;
} }
} }
} }
......
src/components/VerticalButtonGroup/index.vue
...@@ -17,24 +17,28 @@ defineOptions({ name: 'VerticalButtonGroup' }) ...@@ -17,24 +17,28 @@ defineOptions({ name: 'VerticalButtonGroup' })
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
} }
.el-button-group > :deep(.el-button:first-child) { .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-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) { .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-top-right-radius: 0;
border-bottom-left-radius: var(--el-border-radius-base); 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-top-color: var(--el-button-divide-border-color);
border-bottom-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)) { .el-button-group > :deep(.el-button:not(:last-child)) {
margin-bottom: -1px;
margin-right: 0; margin-right: 0;
margin-bottom: -1px;
} }
</style> </style>
src/layout/components/Message/src/Message.vue
...@@ -88,8 +88,8 @@ onMounted(() => { ...@@ -88,8 +88,8 @@ onMounted(() => {
} }
.message-list { .message-list {
height: 400px;
display: flex; display: flex;
height: 400px;
flex-direction: column; flex-direction: column;
.message-item { .message-item {
......
src/views/mall/statistics/member/components/MemberFunnelCard.vue
...@@ -110,9 +110,11 @@ const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType] ...@@ -110,9 +110,11 @@ const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]
.trapezoid1 { .trapezoid1 {
transform: perspective(5em) rotateX(-11deg); transform: perspective(5em) rotateX(-11deg);
} }
.trapezoid2 { .trapezoid2 {
transform: perspective(7em) rotateX(-20deg); transform: perspective(7em) rotateX(-20deg);
} }
.trapezoid3 { .trapezoid3 {
transform: perspective(3em) rotateX(-13deg); transform: perspective(3em) rotateX(-13deg);
} }
......
src/views/mall/trade/delivery/pickUpOrder/index.vue
...@@ -316,6 +316,7 @@ onMounted(() => { ...@@ -316,6 +316,7 @@ onMounted(() => {
:deep(.order-table-col > .cell) { :deep(.order-table-col > .cell) {
padding: 0; padding: 0;
} }
.summary { .summary {
.el-col { .el-col {
margin-bottom: 1rem; margin-bottom: 1rem;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment