initHeader

frontend/src/layouts/components/ThemeDrawer/index.scss

@@ -0,0 +1,137 @@
+.divider {
+  margin-top: 15px;
+  .el-icon {
+    position: relative;
+    top: 2px;
+    right: 5px;
+    font-size: 15px;
+  }
+}
+.theme-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 5px;
+  margin: 14px 0;
+  span {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    .el-icon {
+      margin-left: 3px;
+      font-size: 15px;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+    }
+  }
+}
+.layout-box {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 15px 7px 0;
+  .layout-item {
+    position: relative;
+    box-sizing: border-box;
+    width: 100px;
+    height: 70px;
+    padding: 6px;
+    cursor: pointer;
+    border-radius: 5px;
+    box-shadow: 0 0 5px 1px var(--el-border-color-dark);
+    transition: all 0.2s;
+    .layout-dark {
+      background-color: var(--el-color-primary);
+      border-radius: 3px;
+    }
+    .layout-light {
+      background-color: var(--el-color-primary-light-5);
+      border-radius: 3px;
+    }
+    .layout-content {
+      background-color: var(--el-color-primary-light-8);
+      border: 1px dashed var(--el-color-primary);
+      border-radius: 3px;
+    }
+    .el-icon {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      color: var(--el-color-primary);
+      transition: all 0.2s;
+    }
+    &:hover {
+      box-shadow: 0 0 5px 1px var(--el-text-color-secondary);
+    }
+  }
+  .is-active {
+    box-shadow: 0 0 0 2px var(--el-color-primary) !important;
+  }
+  .layout-vertical {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-dark {
+      width: 20%;
+    }
+    .layout-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 72%;
+      .layout-light {
+        height: 20%;
+      }
+      .layout-content {
+        height: 67%;
+      }
+    }
+  }
+  .layout-classic {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-dark {
+      height: 22%;
+    }
+    .layout-container {
+      display: flex;
+      justify-content: space-between;
+      height: 70%;
+      .layout-light {
+        width: 20%;
+      }
+      .layout-content {
+        width: 70%;
+      }
+    }
+  }
+  .layout-transverse {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    .layout-dark {
+      height: 20%;
+    }
+    .layout-content {
+      height: 67%;
+    }
+  }
+  .layout-columns {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    .layout-dark {
+      width: 14%;
+    }
+    .layout-light {
+      width: 17%;
+    }
+    .layout-content {
+      width: 55%;
+    }
+  }
+}