diff --git a/.stylelintignore b/.stylelintignore
index 8e46e1069..0c34e6193 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,3 +1,4 @@
/dist/*
/public/*
-public/*
\ No newline at end of file
+public/*
+src/style/reset.scss
\ No newline at end of file
diff --git a/index.html b/index.html
index e4c1b6437..aba69fddf 100644
--- a/index.html
+++ b/index.html
@@ -21,50 +21,50 @@
html,
body,
#app {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 100%;
height: 100%;
- display: flex;
- position: relative;
- justify-content: center;
- align-items: center;
overflow: hidden;
}
.loader,
- .loader:before,
- .loader:after {
- border-radius: 50%;
+ .loader::before,
+ .loader::after {
width: 2.5em;
height: 2.5em;
- animation-fill-mode: both;
+ border-radius: 50%;
animation: loadAnimation 1.8s infinite ease-in-out;
+ animation-fill-mode: both;
}
.loader {
- color: #406eeb;
- font-size: 10px;
- margin: 80px auto;
position: relative;
+ top: 0;
+ margin: 80px auto;
+ font-size: 10px;
+ color: #406eeb;
text-indent: -9999em;
transform: translateZ(0);
- animation-delay: -0.16s;
- top: 0;
transform: translate(-50%, 0);
+ animation-delay: -0.16s;
}
- .loader:before,
- .loader:after {
- content: "";
+ .loader::before,
+ .loader::after {
position: absolute;
top: 0;
+ content: "";
}
- .loader:before {
+ .loader::before {
left: -3.5em;
animation-delay: -0.32s;
}
- .loader:after {
+ .loader::after {
left: 3.5em;
}
diff --git a/src/components/ReFlop/src/index.vue b/src/components/ReFlop/src/index.vue
index fc20e9100..91e6491f8 100644
--- a/src/components/ReFlop/src/index.vue
+++ b/src/components/ReFlop/src/index.vue
@@ -123,9 +123,9 @@ onUnmounted(() => {
.flip-clock em {
display: inline-block;
- line-height: 102px;
font-size: 66px;
font-style: normal;
+ line-height: 102px;
vertical-align: top;
}
diff --git a/src/components/ReFlowChart/src/Control.vue b/src/components/ReFlowChart/src/Control.vue
index c93848f1a..d142db840 100644
--- a/src/components/ReFlowChart/src/Control.vue
+++ b/src/components/ReFlowChart/src/Control.vue
@@ -132,10 +132,10 @@ onMounted(() => {
diff --git a/src/components/ReIcon/src/Select.vue b/src/components/ReIcon/src/Select.vue
index 27f4e8883..22ca700b6 100644
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -200,8 +200,8 @@ watch(
.icon-item {
&:hover {
- border-color: var(--el-color-primary);
color: var(--el-color-primary);
+ border-color: var(--el-color-primary);
transition: all 0.4s;
transform: scaleX(1.05);
}
@@ -224,15 +224,15 @@ watch(
}
:deep(.el-tabs__item) {
+ height: 30px;
font-size: 12px;
font-weight: normal;
- height: 30px;
line-height: 30px;
}
:deep(.el-tabs__header),
:deep(.el-tabs__nav-wrap) {
- margin: 0;
position: static;
+ margin: 0;
}
diff --git a/src/components/ReQrcode/src/index.scss b/src/components/ReQrcode/src/index.scss
index 5f6a3ff3c..66ff6348c 100644
--- a/src/components/ReQrcode/src/index.scss
+++ b/src/components/ReQrcode/src/index.scss
@@ -1,6 +1,7 @@
.qrcode {
&--disabled {
- background: rgba(255, 255, 255, 0.95);
+ background: rgb(255 255 255 / 95%);
+
& > div {
transform: translate(-50%, -50%);
}
diff --git a/src/components/ReTreeLine/index.scss b/src/components/ReTreeLine/index.scss
index 443d83251..c3d22d249 100644
--- a/src/components/ReTreeLine/index.scss
+++ b/src/components/ReTreeLine/index.scss
@@ -8,42 +8,48 @@ $--element-tree-line-width: 1px !default;
}
.element-tree-node-label-wrapper {
- flex: 1;
display: flex;
+ flex: 1;
align-items: center;
}
+
.element-tree-node-label {
font-size: 12px;
}
+
.element-tree-node-line-ver {
- display: block;
position: absolute;
top: 0;
left: 0;
+ display: block;
height: 100%;
border-left: $--element-tree-line-width $--element-tree-line-style
$--element-tree-line-color;
+
&.last-node-line {
border-left: $--element-tree-line-width $--element-tree-line-style
transparent;
}
+
&.last-node-isLeaf-line {
height: 50%;
}
}
+
.element-tree-node-line-hor {
- display: block;
position: absolute;
top: 50%;
left: 0;
+ display: block;
height: 0;
border-bottom: $--element-tree-line-width $--element-tree-line-style
$--element-tree-line-color;
}
+
.element-tree-node-label-line {
flex: 1;
- border-top: $--element-tree-line-width $--element-tree-line-style
- $--element-tree-line-color;
align-self: center;
margin: 0 10px;
+ border-top: $--element-tree-line-width $--element-tree-line-style
+ $--element-tree-line-color;
}
diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index e9b54506a..3f2a2449e 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -130,16 +130,16 @@ const transitionMain = defineComponent({
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index ea0502f74..125a26556 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -46,8 +46,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
display: flex;
align-items: center;
justify-content: center;
- height: 48px;
width: 60px;
+ height: 48px;
cursor: pointer;
.header-notice-icon {
@@ -59,7 +59,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
width: 330px;
.noticeList-container {
- padding: 15px 24px 0 24px;
+ padding: 15px 24px 0;
}
:deep(.el-tabs__header) {
@@ -71,7 +71,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
}
:deep(.el-tabs__nav-wrap) {
- padding: 0 36px 0 36px;
+ padding: 0 36px;
}
}
diff --git a/src/layout/components/notice/noticeItem.vue b/src/layout/components/notice/noticeItem.vue
index 032e6ac42..b7a2b14c6 100644
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -118,6 +118,7 @@ function hoverDescription(event, description) {
align-items: flex-start;
justify-content: space-between;
padding: 12px 0;
+
// border-bottom: 1px solid #f0f0f0;
.notice-container-avatar {
@@ -127,15 +128,15 @@ function hoverDescription(event, description) {
.notice-container-text {
display: flex;
+ flex: 1;
flex-direction: column;
justify-content: space-between;
- flex: 1;
.notice-text-title {
display: flex;
margin-bottom: 8px;
- font-weight: 400;
font-size: 14px;
+ font-weight: 400;
line-height: 1.5715;
cursor: pointer;
@@ -143,8 +144,8 @@ function hoverDescription(event, description) {
flex: 1;
width: 200px;
overflow: hidden;
- white-space: nowrap;
text-overflow: ellipsis;
+ white-space: nowrap;
}
.notice-title-extra {
@@ -162,8 +163,8 @@ function hoverDescription(event, description) {
.notice-text-description {
display: -webkit-box;
- text-overflow: ellipsis;
overflow: hidden;
+ text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
diff --git a/src/layout/components/panel/index.vue b/src/layout/components/panel/index.vue
index 85241af35..d5f4f5a2a 100644
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -60,9 +60,9 @@ emitter.on("openPanel", () => {
@@ -71,23 +71,23 @@ emitter.on("openPanel", () => {
position: fixed;
top: 0;
left: 0;
+ z-index: -1;
+ background: rgb(0 0 0 / 20%);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
- background: rgba(0, 0, 0, 0.2);
- z-index: -1;
}
.right-panel {
- width: 100%;
- max-width: 315px;
- height: 100vh;
position: fixed;
top: 0;
right: 0;
- box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
+ z-index: 40000;
+ width: 100%;
+ max-width: 315px;
+ height: 100vh;
+ box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
- z-index: 40000;
}
.show {
@@ -95,9 +95,9 @@ emitter.on("openPanel", () => {
.right-panel-background {
z-index: 20000;
- opacity: 1;
width: 100%;
height: 100%;
+ opacity: 1;
}
.right-panel {
@@ -106,20 +106,20 @@ emitter.on("openPanel", () => {
}
.handle-button {
+ position: absolute;
+ top: 45%;
+ left: -48px;
+ z-index: 0;
width: 48px;
height: 48px;
- position: absolute;
- left: -48px;
- text-align: center;
font-size: 24px;
- border-radius: 6px 0 0 6px !important;
- z-index: 0;
+ line-height: 48px;
+ color: #fff;
+ text-align: center;
pointer-events: auto;
cursor: pointer;
- color: #fff;
- line-height: 48px;
- top: 45%;
- background: rgb(24, 144, 255);
+ background: rgb(24 144 255);
+ border-radius: 6px 0 0 6px !important;
i {
font-size: 24px;
@@ -128,24 +128,24 @@ emitter.on("openPanel", () => {
}
.right-panel-items {
- margin-top: 60px;
height: calc(100vh - 60px);
+ margin-top: 60px;
overflow-y: auto;
}
.project-configuration {
+ position: fixed;
+ top: 15px;
display: flex;
+ align-items: center;
+ justify-content: space-between;
width: 100%;
height: 30px;
- position: fixed;
- justify-content: space-between;
- align-items: center;
- top: 15px;
margin-left: 10px;
}
:deep(.el-divider--horizontal) {
width: 90%;
- margin: 20px auto 0 auto;
+ margin: 20px auto 0;
}
diff --git a/src/layout/components/search/components/SearchResult.vue b/src/layout/components/search/components/SearchResult.vue
index 7bdf397ae..f73e94c08 100644
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -84,11 +84,11 @@ function handleTo() {
display: flex;
align-items: center;
height: 56px;
- margin-top: 8px;
padding: 14px;
- border-radius: 4px;
+ margin-top: 8px;
cursor: pointer;
border: 0.1px solid #ccc;
+ border-radius: 4px;
transition: all 0.3s;
&-title {
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 206d9bf61..b7e354493 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -418,35 +418,35 @@ onBeforeMount(() => {
li {
display: flex;
- justify-content: space-between;
align-items: center;
+ justify-content: space-between;
margin: 25px;
}
}
.pure-datatheme {
+ display: block;
width: 100%;
height: 50px;
- text-align: center;
- display: block;
padding-top: 25px;
+ text-align: center;
}
.pure-theme {
- margin-top: 25px;
- width: 100%;
- height: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
+ width: 100%;
+ height: 50px;
+ margin-top: 25px;
li {
+ position: relative;
width: 18%;
height: 45px;
- background: #f0f2f5;
- position: relative;
overflow: hidden;
cursor: pointer;
+ background: #f0f2f5;
border-radius: 4px;
box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
@@ -459,13 +459,13 @@ onBeforeMount(() => {
}
&:nth-child(2) {
- width: 70%;
- height: 30%;
+ position: absolute;
top: 0;
right: 0;
+ width: 70%;
+ height: 30%;
background: #fff;
box-shadow: 0 0 1px #888;
- position: absolute;
}
}
}
@@ -491,13 +491,13 @@ onBeforeMount(() => {
}
&:nth-child(2) {
- width: 30%;
- height: 70%;
+ position: absolute;
bottom: 0;
left: 0;
+ width: 30%;
+ height: 70%;
background: #fff;
box-shadow: 0 0 1px #888;
- position: absolute;
}
}
}
@@ -505,11 +505,11 @@ onBeforeMount(() => {
}
.theme-color {
+ display: flex;
+ justify-content: center;
width: 100%;
height: 40px;
margin-top: 20px;
- display: flex;
- justify-content: center;
li {
float: left;
@@ -519,8 +519,8 @@ onBeforeMount(() => {
margin-right: 8px;
font-weight: 700;
text-align: center;
- border-radius: 2px;
cursor: pointer;
+ border-radius: 2px;
&:nth-child(2) {
border: 1px solid #ddd;
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index 6d2574f74..61a7db275 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -156,9 +156,9 @@ watch(
max-width: 120px;
::v-deep(.el-dropdown-menu__item) {
- min-width: 100%;
display: inline-flex;
flex-wrap: wrap;
+ min-width: 100%;
}
}
diff --git a/src/layout/components/sidebar/logo.vue b/src/layout/components/sidebar/logo.vue
index f079b3bab..2c6c329d6 100644
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -37,33 +37,33 @@ const { title } = useNav();
diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss
index 2d78469e4..121b5e704 100644
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -39,41 +39,41 @@
}
.tags-view {
- width: 100%;
- font-size: 14px;
+ position: relative;
display: flex;
align-items: center;
+ width: 100%;
+ font-size: 14px;
color: var(--el-text-color-primary);
background: #fff;
- position: relative;
box-shadow: 0 0 1px #888;
.scroll-item {
- border-radius: 3px 3px 0 0;
- padding: 0 6px;
- box-shadow: 0 0 1px #888;
position: relative;
- margin-right: 4px;
- height: 28px;
display: inline-block;
+ height: 28px;
+ padding: 0 6px;
+ margin-right: 4px;
line-height: 28px;
- transition: all 0.4s;
cursor: pointer;
+ border-radius: 3px 3px 0 0;
+ box-shadow: 0 0 1px #888;
+ transition: all 0.4s;
.el-icon-close {
+ position: absolute;
+ top: 50%;
font-size: 10px;
color: var(--el-color-primary);
cursor: pointer;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
transition: font-size 0.2s;
+ transform: translate(-50%, -50%);
&:hover {
- border-radius: 50%;
+ font-size: 13px;
color: #fff;
background: #b4bccc;
- font-size: 13px;
+ border-radius: 50%;
}
}
@@ -91,24 +91,24 @@
}
a {
- text-decoration: none;
- color: var(--el-text-color-primary);
padding: 0 4px;
+ color: var(--el-text-color-primary);
+ text-decoration: none;
}
.scroll-container {
- flex: 1;
- overflow: hidden;
- padding: 5px 0;
- white-space: nowrap;
position: relative;
+ flex: 1;
+ padding: 5px 0;
+ overflow: hidden;
+ white-space: nowrap;
.tab {
position: relative;
float: left;
- list-style: none;
overflow: visible;
white-space: nowrap;
+ list-style: none;
transition: transform 0.5s ease-in-out;
.scroll-item {
@@ -123,29 +123,28 @@
/* 右键菜单 */
.contextmenu {
- margin: 0;
- background: #fff;
position: absolute;
- list-style-type: none;
padding: 5px 0;
- border-radius: 4px;
- color: var(--el-text-color-primary);
- font-weight: normal;
+ margin: 0;
font-size: 13px;
+ font-weight: normal;
+ color: var(--el-text-color-primary);
white-space: nowrap;
+ list-style-type: none;
+ background: #fff;
+ border-radius: 4px;
outline: 0;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
li {
- width: 100%;
- margin: 0;
- padding: 7px 12px;
- cursor: pointer;
display: flex;
align-items: center;
+ width: 100%;
+ padding: 7px 12px;
+ margin: 0;
+ cursor: pointer;
&:hover {
- // background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
@@ -159,11 +158,11 @@
.el-dropdown-menu {
li {
+ display: flex;
+ align-items: center;
width: 100%;
margin: 0;
cursor: pointer;
- display: flex;
- align-items: center;
svg {
display: block;
@@ -184,6 +183,7 @@
:deep(.el-dropdown-menu__item--divided) {
margin: 1px 0;
}
+
.el-dropdown-menu__item--divided::before {
margin: 0;
}
@@ -193,7 +193,6 @@
}
.scroll-item.is-active {
- // background-color: var(--el-color-primary-light-9);
position: relative;
color: #fff;
@@ -213,16 +212,16 @@
.arrow-left,
.arrow-right,
.arrow-down {
+ position: relative;
width: 40px;
height: 38px;
color: var(--el-text-color-primary);
- position: relative;
svg {
- width: 20px;
- height: 20px;
position: absolute;
left: 50%;
+ width: 20px;
+ height: 20px;
transform: translate(-50%, 50%);
}
}
@@ -236,8 +235,8 @@
}
.arrow-right {
- box-shadow: -5px 0 5px -6px #ccc;
border-right: 0.5px solid #ccc;
+ box-shadow: -5px 0 5px -6px #ccc;
&:hover {
cursor: e-resize;
@@ -255,8 +254,8 @@
/* 卡片模式下鼠标移出隐藏蓝色边框 */
.card-out {
- border: none;
color: #666;
+ border: none;
a {
color: #666;
@@ -265,32 +264,32 @@
/* 灵动模式 */
.schedule-active {
+ position: absolute;
+ bottom: 0;
+ left: 0;
width: 100%;
height: 2px;
- position: absolute;
- left: 0;
- bottom: 0;
background: var(--el-color-primary);
}
/* 灵动模式下鼠标移入显示蓝色进度条 */
.schedule-in {
+ position: absolute;
+ bottom: 0;
+ left: 0;
width: 100%;
height: 2px;
- position: absolute;
- left: 0;
- bottom: 0;
background: var(--el-color-primary);
animation: scheduleInWidth 200ms ease-in;
}
/* 灵动模式下鼠标移出隐藏蓝色进度条 */
.schedule-out {
+ position: absolute;
+ bottom: 0;
+ left: 0;
width: 0;
height: 2px;
- position: absolute;
- left: 0;
- bottom: 0;
background: var(--el-color-primary);
animation: scheduleOutWidth 200ms ease-in;
}
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 73a66c131..bff272b95 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -603,5 +603,5 @@ onMounted(() => {
diff --git a/src/layout/frameView.vue b/src/layout/frameView.vue
index cc2ab18a0..a74f22f9e 100644
--- a/src/layout/frameView.vue
+++ b/src/layout/frameView.vue
@@ -56,15 +56,15 @@ onMounted(() => {
diff --git a/src/views/able/qrcode.vue b/src/views/able/qrcode.vue
index 7384384bb..8a84de17d 100644
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -30,7 +30,7 @@ const disabledClick = () => {
qrcode
diff --git a/src/views/able/swiper.vue b/src/views/able/swiper.vue
index 5539c96c0..842c2ab1a 100644
--- a/src/views/able/swiper.vue
+++ b/src/views/able/swiper.vue
@@ -91,7 +91,7 @@ const swiperExample: any[] = [
github地址
diff --git a/src/views/able/timeline.vue b/src/views/able/timeline.vue
index b64b8a214..702bdbf0c 100644
--- a/src/views/able/timeline.vue
+++ b/src/views/able/timeline.vue
@@ -80,26 +80,26 @@ const activities = [
diff --git a/src/views/able/virtual-list/index.vue b/src/views/able/virtual-list/index.vue
index 5b3ff66d3..30a0956f2 100644
--- a/src/views/able/virtual-list/index.vue
+++ b/src/views/able/virtual-list/index.vue
@@ -16,7 +16,7 @@ defineOptions({
github地址
diff --git a/src/views/able/virtual-list/vertical.vue b/src/views/able/virtual-list/vertical.vue
index 16abd0ffa..ba80fbc00 100644
--- a/src/views/able/virtual-list/vertical.vue
+++ b/src/views/able/virtual-list/vertical.vue
@@ -60,9 +60,9 @@ const filteredItems = computed(() => {
diff --git a/src/views/components/contextmenu/basic.vue b/src/views/components/contextmenu/basic.vue
index bb93233b4..faa038768 100644
--- a/src/views/components/contextmenu/basic.vue
+++ b/src/views/components/contextmenu/basic.vue
@@ -63,12 +63,12 @@ export default defineComponent({
diff --git a/src/views/components/contextmenu/menuDynamic.vue b/src/views/components/contextmenu/menuDynamic.vue
index d04180dfd..b9ec75941 100644
--- a/src/views/components/contextmenu/menuDynamic.vue
+++ b/src/views/components/contextmenu/menuDynamic.vue
@@ -98,13 +98,13 @@ export default defineComponent({
diff --git a/src/views/components/contextmenu/menuGroup.vue b/src/views/components/contextmenu/menuGroup.vue
index 371bef225..8085c45bc 100644
--- a/src/views/components/contextmenu/menuGroup.vue
+++ b/src/views/components/contextmenu/menuGroup.vue
@@ -60,12 +60,12 @@ export default ExampleSFC;
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 12b95a5c9..d513513e6 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -44,8 +44,8 @@ const onCropper = (): void => {
diff --git a/src/views/components/video/index.vue b/src/views/components/video/index.vue
index 22958a912..98c4cfa1a 100644
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -42,7 +42,7 @@ onMounted(() => {
href="https://v3.h5player.bytedance.com/"
target="_blank"
:icon="useRenderIcon(VideoPlay)"
- style="font-size: 16px; margin: 0 4px 5px"
+ style="margin: 0 4px 5px; font-size: 16px"
>
西瓜播放器
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index b0d7b5b9a..6f1d51322 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -48,7 +48,7 @@ const handleCreated = editor => {
href="https://www.wangeditor.com"
target="_blank"
:icon="useRenderIcon(Edit)"
- style="font-size: 16px; margin: 0 4px 5px"
+ style="margin: 0 4px 5px; font-size: 16px"
>
Wangeditor
diff --git a/src/views/empty/index.vue b/src/views/empty/index.vue
index bc42d4b29..887c6fba9 100644
--- a/src/views/empty/index.vue
+++ b/src/views/empty/index.vue
@@ -18,21 +18,21 @@ defineOptions({