feat: 增加 styles 样式文件
This commit is contained in:
Edan's Win11
@@ -0,0 +1,121 @@
|
||||
// 导入重置样式
|
||||
@use './reset.scss';
|
||||
|
||||
// 导入变量
|
||||
@use './variables.scss' as *;
|
||||
|
||||
// 全局样式
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
color: $text-primary;
|
||||
background-color: $bg-color-page;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// 通用工具类
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 间距工具类
|
||||
.m-0 { margin: 0; }
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mr-0 { margin-right: 0; }
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.ml-0 { margin-left: 0; }
|
||||
|
||||
.m-1 { margin: $spacing-xs; }
|
||||
.mt-1 { margin-top: $spacing-xs; }
|
||||
.mr-1 { margin-right: $spacing-xs; }
|
||||
.mb-1 { margin-bottom: $spacing-xs; }
|
||||
.ml-1 { margin-left: $spacing-xs; }
|
||||
|
||||
.m-2 { margin: $spacing-sm; }
|
||||
.mt-2 { margin-top: $spacing-sm; }
|
||||
.mr-2 { margin-right: $spacing-sm; }
|
||||
.mb-2 { margin-bottom: $spacing-sm; }
|
||||
.ml-2 { margin-left: $spacing-sm; }
|
||||
|
||||
.m-3 { margin: $spacing-md; }
|
||||
.mt-3 { margin-top: $spacing-md; }
|
||||
.mr-3 { margin-right: $spacing-md; }
|
||||
.mb-3 { margin-bottom: $spacing-md; }
|
||||
.ml-3 { margin-left: $spacing-md; }
|
||||
|
||||
.m-4 { margin: $spacing-lg; }
|
||||
.mt-4 { margin-top: $spacing-lg; }
|
||||
.mr-4 { margin-right: $spacing-lg; }
|
||||
.mb-4 { margin-bottom: $spacing-lg; }
|
||||
.ml-4 { margin-left: $spacing-lg; }
|
||||
|
||||
.p-0 { padding: 0; }
|
||||
.pt-0 { padding-top: 0; }
|
||||
.pr-0 { padding-right: 0; }
|
||||
.pb-0 { padding-bottom: 0; }
|
||||
.pl-0 { padding-left: 0; }
|
||||
|
||||
.p-1 { padding: $spacing-xs; }
|
||||
.pt-1 { padding-top: $spacing-xs; }
|
||||
.pr-1 { padding-right: $spacing-xs; }
|
||||
.pb-1 { padding-bottom: $spacing-xs; }
|
||||
.pl-1 { padding-left: $spacing-xs; }
|
||||
|
||||
.p-2 { padding: $spacing-sm; }
|
||||
.pt-2 { padding-top: $spacing-sm; }
|
||||
.pr-2 { padding-right: $spacing-sm; }
|
||||
.pb-2 { padding-bottom: $spacing-sm; }
|
||||
.pl-2 { padding-left: $spacing-sm; }
|
||||
|
||||
.p-3 { padding: $spacing-md; }
|
||||
.pt-3 { padding-top: $spacing-md; }
|
||||
.pr-3 { padding-right: $spacing-md; }
|
||||
.pb-3 { padding-bottom: $spacing-md; }
|
||||
.pl-3 { padding-left: $spacing-md; }
|
||||
|
||||
.p-4 { padding: $spacing-lg; }
|
||||
.pt-4 { padding-top: $spacing-lg; }
|
||||
.pr-4 { padding-right: $spacing-lg; }
|
||||
.pb-4 { padding-bottom: $spacing-lg; }
|
||||
.pl-4 { padding-left: $spacing-lg; }
|
||||
@@ -0,0 +1,119 @@
|
||||
/* CSS Reset - 删除浏览器默认样式 */
|
||||
|
||||
/* 1. Use a more-intuitive box-sizing model */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 2. Remove default margin and padding */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 3. Allow percentage-based heights in the application */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 4. Add accessible line-height and improve text rendering */
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
/* 5. Improve media defaults */
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 6. Remove built-in form typography styles */
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* 7. Avoid text overflows */
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 8. Create a root stacking context */
|
||||
#root, #__next, #app {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* 9. Remove list styles */
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 10. Remove default button styles */
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 11. Remove default link styles */
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 12. Remove default table styles */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* 13. Remove default fieldset styles */
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 14. Remove default legend styles */
|
||||
legend {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* 15. Remove default details/summary styles */
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* 16. Remove default hr styles */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
/* 17. Remove default blockquote styles */
|
||||
blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* 18. Remove default cite styles */
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 19. Remove default address styles */
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// 颜色变量
|
||||
$primary-color: #409eff;
|
||||
$success-color: #67c23a;
|
||||
$warning-color: #e6a23c;
|
||||
$danger-color: #f56c6c;
|
||||
$info-color: #909399;
|
||||
|
||||
// 文字颜色
|
||||
$text-primary: #303133;
|
||||
$text-regular: #606266;
|
||||
$text-secondary: #909399;
|
||||
$text-placeholder: #c0c4cc;
|
||||
|
||||
// 边框颜色
|
||||
$border-base: #dcdfe6;
|
||||
$border-light: #e4e7ed;
|
||||
$border-lighter: #ebeef5;
|
||||
$border-extra-light: #f2f6fc;
|
||||
|
||||
// 背景颜色
|
||||
$bg-color: #ffffff;
|
||||
$bg-color-page: #f2f3f5;
|
||||
$bg-color-overlay: #ffffff;
|
||||
|
||||
// 字体大小
|
||||
$font-size-extra-large: 20px;
|
||||
$font-size-large: 18px;
|
||||
$font-size-medium: 16px;
|
||||
$font-size-base: 14px;
|
||||
$font-size-small: 13px;
|
||||
$font-size-extra-small: 12px;
|
||||
|
||||
// 间距
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
$spacing-lg: 24px;
|
||||
$spacing-xl: 32px;
|
||||
|
||||
// 圆角
|
||||
$border-radius-base: 4px;
|
||||
$border-radius-small: 2px;
|
||||
$border-radius-round: 20px;
|
||||
$border-radius-circle: 50%;
|
||||
|
||||
// 阴影
|
||||
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 层级
|
||||
$z-index-normal: 1;
|
||||
$z-index-top: 1000;
|
||||
$z-index-popper: 2000;
|
||||
Reference in New Issue
Block a user