zq
1 day ago
7 changed files with 220 additions and 206 deletions
@ -1,107 +1,196 @@ |
|||||
// 提示框组件 |
// 提示框组件 |
||||
// .prompt-text { |
.guip-prompt-text { |
||||
// padding: 8px 13px; |
padding: 8px 13px; |
||||
// border-radius: 4px; |
border-radius: 4px; |
||||
|
|
||||
// .flex-text { |
.flex-text { |
||||
// display: flex; |
display: flex; |
||||
// align-items: center; |
align-items: center; |
||||
// align-self: stretch; |
align-self: stretch; |
||||
// justify-content: space-between; |
justify-content: space-between; |
||||
// z-index: 1; |
z-index: 1; |
||||
// } |
} |
||||
|
|
||||
// .prompt-icon { |
.prompt-icon { |
||||
// width: 16px; |
width: 16px; |
||||
// height: 16px; |
height: 16px; |
||||
// ; |
; |
||||
// margin-right: 8px; |
margin-right: 8px; |
||||
// } |
} |
||||
|
|
||||
// .prompt-desc { |
.prompt-desc { |
||||
// color: #1E2226; |
color: #1E2226; |
||||
// letter-spacing: 0.08em; |
letter-spacing: 0.08em; |
||||
// } |
} |
||||
|
|
||||
// .prompt-extra {} |
.prompt-extra {} |
||||
// } |
} |
||||
|
|
||||
// .prompt-text.info { |
.guip-prompt-text.info { |
||||
// background: #F2F7FF; |
background: #F2F7FF; |
||||
// border: 1px solid #BFDAFF; |
border: 1px solid #BFDAFF; |
||||
// } |
} |
||||
|
|
||||
// .prompt-text.notice { |
.guip-prompt-text.notice { |
||||
// background: #FEFCE8; |
background: #FEFCE8; |
||||
// border: 1px solid rgba(255, 140, 0, 0.3); |
border: 1px solid rgba(255, 140, 0, 0.3); |
||||
// } |
} |
||||
|
|
||||
// .prompt-text.warning { |
.guip-prompt-text.warning { |
||||
// background: #FFF1F0; |
background: #FFF1F0; |
||||
// border: 1px solid #FFA39E; |
border: 1px solid #FFA39E; |
||||
// } |
} |
||||
|
|
||||
// // 实时预览外框组件 |
// 实时预览外框组件 |
||||
// .preview-container { |
.guip-preview-container { |
||||
// max-width: 800px; |
max-width: 800px; |
||||
// min-width: 300px; |
min-width: 300px; |
||||
// margin: 0 auto; |
margin: 0 auto; |
||||
// padding: 24px; |
padding: 24px; |
||||
// border-radius: 4px; |
border-radius: 4px; |
||||
// background: #FAFAFA; |
background: #FAFAFA; |
||||
|
|
||||
// .preview_top { |
.preview_top { |
||||
// margin-bottom: 20px; |
margin-bottom: 20px; |
||||
// } |
} |
||||
|
|
||||
// .preview-title { |
.preview-title { |
||||
// text-align: center; |
text-align: center; |
||||
// color: #1E2226; |
color: #1E2226; |
||||
// } |
} |
||||
|
|
||||
// .toggle-container { |
.toggle-container { |
||||
// display: flex; |
display: flex; |
||||
// height: 26px; |
height: 26px; |
||||
// justify-content: center; |
justify-content: center; |
||||
// align-items: center; |
align-items: center; |
||||
// padding: 3px 6px; |
padding: 3px 6px; |
||||
// border-radius: 4px; |
border-radius: 4px; |
||||
// background: #F2F3F5; |
background: #F2F3F5; |
||||
// } |
} |
||||
|
|
||||
// .toggle-button { |
.toggle-button { |
||||
// padding: 1px 12px; |
padding: 1px 12px; |
||||
// border-radius: 2px; |
border-radius: 2px; |
||||
// box-sizing: border-box; |
box-sizing: border-box; |
||||
// cursor: pointer; |
cursor: pointer; |
||||
// transition: all 0.3s ease; |
transition: all 0.3s ease; |
||||
// } |
} |
||||
|
|
||||
// .toggle-button.active { |
.toggle-button.active { |
||||
// color: #006AFF; |
color: #006AFF; |
||||
// background: #FFFFFF; |
background: #FFFFFF; |
||||
// } |
} |
||||
|
|
||||
// .toggle-button.active:after { |
.toggle-button.active:after { |
||||
// /* content: ''; |
/* content: ''; |
||||
// position: absolute; |
position: absolute; |
||||
// bottom: -11px; |
bottom: -11px; |
||||
// left: 0; |
left: 0; |
||||
// width: 100%; |
width: 100%; |
||||
// height: 2px; |
height: 2px; |
||||
// background-color: #1890ff; */ |
background-color: #1890ff; */ |
||||
// } |
} |
||||
|
|
||||
// .content-container { |
.content-container { |
||||
// /* min-height: 300px; |
/* min-height: 300px; |
||||
// padding: 20px; |
padding: 20px; |
||||
// border: 2px solid #ffd700; |
border: 2px solid #ffd700; |
||||
// border-radius: 4px; |
border-radius: 4px; |
||||
// background-color: #fff; */ |
background-color: #fff; */ |
||||
// } |
} |
||||
|
|
||||
// .desktop-view, |
.desktop-view, |
||||
// .mobile-view { |
.mobile-view { |
||||
// width: 100%; |
width: 100%; |
||||
// } |
} |
||||
// } |
} |
||||
|
|
||||
|
// 面包屑组件 |
||||
|
.guip-breadcrumb-container { |
||||
|
padding: 16px 12px; |
||||
|
background-color: #f5f5f5; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.breadRight { |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.home-icon { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.breadcrumb { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
height: 22px; |
||||
|
align-items: center; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
.breadcrumb-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.router-link-active { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.breadcrumb-item a { |
||||
|
color: #626573; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.breadcrumb-item.active span { |
||||
|
color: #1E2226; |
||||
|
; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.separator { |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 图标组件 |
||||
|
.guip-svg-icon-wrapper { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.svg-icon { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: var(--icon-color); |
||||
|
transition: color 0.3s; |
||||
|
} |
||||
|
|
||||
|
.svg-icon:hover { |
||||
|
color: var(--icon-hover-color); |
||||
|
} |
||||
|
|
||||
|
.svg-icon { |
||||
|
display: inline-flex; |
||||
|
} |
||||
|
|
||||
|
.svg-icon>>>svg { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue