.app-custom-theme { .title { margin-left: 4px; } } // 抽屉样式 .app-custom-theme__drawer { .el-drawer__body { padding: 24px; } } .app-custom-theme__color { height: 54px; h3 { margin-bottom: 10px; font-size: 16px; line-height: 22px; } .color-item { float: left; width: 56px; height: 24px; margin-right: 8px; font-weight: 700; text-align: center; border-radius: 2px; cursor: pointer; position: relative; } .is-active::after { content: ''; position: absolute; top: 4px; right: 24px; width: 6px; height: 12px; border: 0; border-right: 2px solid; border-bottom: 2px solid; border-color: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } } .app-custom-theme__color .color-item:first-of-type.is-active::after { border-color: #409eff; } .app-custom-theme__theme-vars { .theme-vars-group { margin: 12px 0; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } .theme-vars-group__title { font-size: 16px; font-weight: 600; } .theme-vars-item { display: flex; align-items: center; padding: 4px 0; } .theme-vars-item .el-color-picker__trigger, .theme-vars-item__font .el-select { width: 100px; } .theme-vars-item__title { font-size: 14px; width: 140px; padding-right: 12px; } } .app-custom-theme__split { height: 2px; background-color: rgba(0, 0, 0, 0.06); margin: 24px 0; } .app-custom-theme__buttons { .app-button { margin: 0 8px; &:first-child { margin-left: 0px; } } }