cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搜索结果列表页面开发

Browse Source
This commit is contained in:
付民康
2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
src/assets/css/devui.scss Normal file
View File

@@ -0,0 +1,318 @@
/* devui css override */
// d-layout
div.devui-layout__header {
flex: none;
}
div.devui-layout__content {
flex: 1;
min-height: auto;
min-width: 0;
}
ul.devui-menu-vertical {
.devui-menu-item {
background: transparent;
align-items: center;
}
.devui-menu-item-select {
background: var(--color-CG300) !important;
border-radius: var(--border-radius);
&:after {
display: none;
}
}
}
.devui-input-slot__suffix > span {
color: var(--devui-text);
}
div.devui-tooltip {
z-index: var(--devui-z-index-pop-up, 1060);
background-color: var(--devui-feedback-overlay-bg, #464d6e);
border-radius: var(--devui-border-radius-feedback, 4px);
}
/* 隐藏必选符号 */
// .devui-form__label--required:before {
// display: none;
// content: '';
// }
// d-skeleton-item
.devui-skeleton-item {
&.devui-skeleton-item--square {
border-radius: var(--border-radius);
}
}
// d-tree
.devui-tree {
&__node,
&__node-title {
color: var(--color-font) !important;
}
}
// d-editor
.devui-code-editor {
.monaco-editor {
.line-numbers {
color: var(--color-lighter);
}
}
}
.devui-splitter {
&__collapse {
background-color: var(--color-lighter) !important;
}
}
// tab
.devui-menu-horizontal {
.devui-menu-item {
span {
font-weight: 400;
color: var(--color-light);
}
}
.devui-menu-item-select,
.devui-menu-active-parent,
.devui-menu-overflow-container:hover,
.devui-menu-item:hover {
span {
color: var(--color-light);
}
&:after {
background-color: var(--color-font) !important;
}
}
}
.devui-icon--operable.devui-icon__container {
display: inline-flex;
align-items: center;
}
.devui-menu-vertical {
.devui-menu-item:hover {
background-color: $devui-list-item-hover-bg;
border-radius: var(--border-radius);
}
}
// input输入框icon
.devui-input {
&__container {
i.icon {
&:before {
color: var(--color-CG500);
}
}
}
}
// date-range组件
.devui-range-date-picker-pro {
.devui-range-date-picker-pro__range-picker-icon {
svg {
width: 14px;
height: 14px;
}
}
}
// modal
.devui-modal {
&__header {
height: 40px !important;
}
}
// textarea 文字计数颜色
.devui-textarea__show-count {
color: var(--color-lighter) !important;
}
.devui-progress__content .devui-progress__line {
background: var(--color-CG300, #e4e9f0);
}
// radio button
.devui-radio-button {
&.active {
background-color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: white;
}
}
// button
button.devui-button--solid--primary {
background-color: #5e7ce0;
border: none;
}
button.devui-button--solid--danger {
background-color: var(--devui-contrast, #c7000b);
border: none;
}
button.devui-button--outline {
background-color: #fff;
}
// 次要按钮样式
button.devui-button--solid--secondary {
border: var(--devui-btn-common-border-color) solid 1px;
border-radius: 4px;
background: #D1D1D1;
&:hover,
&:active,
&:focus {
border: var(--devui-btn-common-border-color) solid 1px;
color: var(--devui-text);
background: linear-gradient(0deg, rgba(188, 188, 208, 0.1) 0%, rgba(188, 188, 208, 0.1) 100%), var(--White, #FFF);
}
}
// d-avatar
.devui-avatar {
vertical-align: middle;
display: inline-flex;
align-items: center;
margin-top: auto;
margin-bottom: auto;
img {
background-color: white;
}
&.devui-avatar-square {
img,
.devui-avatar--style {
border-radius: var(--border-radius) !important;
}
&.radius-big {
img,
.devui-avatar--style {
border-radius: 8px !important;
}
}
}
}
.devui-result {
&__title {
color: var(--color-light);
}
&__desc {
color: var(--color-light);
}
&__extra {
color: var(--color-lighter);
}
}
.devui-tree {
&__node {
&-content {
&--value-wrapper {
div {
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
.devui-tabs__nav--slider > li.active {
text-shadow: none;
}
.devui-table {
&__tbody {
tr {
td {
border-bottom: 1px solid var(--color-border-light);
}
&:first-of-type {
td {
border-top: none;
&:first-of-type {
border-top-left-radius: var(--border-radius);
}
&:last-of-type {
border-top-right-radius: var(--border-radius);
}
}
}
&:last-of-type {
td {
border-bottom: none;
&:first-of-type {
border-bottom-left-radius: var(--border-radius);
}
&:last-of-type {
border-bottom-right-radius: var(--border-radius);
}
}
}
}
}
}
.devui-breadcrumb {
&__separator {
margin: 0 2px;
}
}
// .devui-input--error,.devui-select__selection--error,.devui-textarea--error {
// background-color: #fff;
// }
.devui-editable-select .devui-editable-select__inner {
max-height: 300px;
}
.devui-link-hover {
&:hover {
color: var(--devui-link) !important;
}
}
.devui-textarea__show-count {
color: var(--devui-text) !important;
}
//.devui-form__label-span {
// color: var(--devui-text) !important;
// font-size: 16px !important;
// line-height: 22px;
// font-weight: 500;
//}
.devui-checkbox {
padding: 3px 0;
}
.devui-radio__wrapper {
padding: 3px 0;
}
.devui-checkbox__label-text {
font-size: 16px;
}
.devui-radio.devui-radio--md span .devui-radio__label {
font-size: 16px;
}
.devui-radio-group div.devui-radio__wrapper {
height: auto;
}
.devui-radio__wrapper label.devui-radio {
display: flex;
align-items: center;
}
.button-content {
// font-weight: 600;
}
.devui-checkbox span.devui-checkbox__material {
border-color: var(--checkbox-border-color);
}
circle.devui-radio__material-outer {
stroke: var(--checkbox-border-color);
}
.devui-table--lg tbody>tr.devui-table__row>td,
.cardlist-item-padding {
padding: 16px 20px;
}

458
src/assets/css/devui_mdpreview.scss Normal file
View File

@@ -0,0 +1,458 @@
// markdown
.dp-md-view {
pre {
position: relative;
code {
padding-right: 32px!important;
}
}
.md-view-copy-icon {
cursor: pointer;
position: absolute;
right: 8px;
top: 9px;
&:hover {
opacity: 0.5;
}
}
}
.g-md-container {
:deep(.md-toolbar-container) {
padding-right: 88px;
}
:deep(.dp-editor-md-preview-container.dp-md-view summary) {
cursor: pointer;
}
position: relative;
.g-md-preview-btn {
position: absolute;
top: 12px;
right: 16px;
color: var(--color-lighter);
&:hover {
:deep(.button-content) {
color: var(--color-primary) !important;
}
}
}
.g-md-upload-btn {
position: absolute;
left: 710px;
top: 10px;
cursor: pointer;
:deep(.devui-icon__container) {
display: inline-flex;
justify-content: center;
align-items: center;
}
:deep(.icon) {
color: var(--devui-icon-text, #71757f);
}
}
:deep(.devui-fullscreen) {
z-index: 999 !important;
}
}
:deep(.dp-md-container) {
border: none;
.CodeMirror {
border-radius: 3px;
pre {
word-break: break-all;
}
}
}
.dp-editor-md-preview-container.dp-md-view {
word-break: break-all;
line-height: normal;
* {
box-sizing: border-box;
}
/* 文章正文 */
p {
font-size: 14px;
color: var(--color-G900);
font-weight: normal;
line-height: 26px;
margin: 0;
overflow-x: auto;
overflow: hidden;
}
p:has(+ pre) {
margin-bottom: 8px;
}
span,
p span {
line-height: 1.5;
}
/* 加粗 */
strong {
font-weight: bold;
}
/* 斜体 */
i,
cite,
em,
var,
address,
dfn {
font-style: italic;
}
/* 上标 */
sup {
left: 2px;
}
/* 下标 */
sub {
margin: 0 2px;
}
/* 标题通用格式 */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-G900);
margin: 0.67em 0;
font-weight: 600;
}
h1 {
font-size: 22px;
line-height: 32px;
margin-top: 24px;
margin-bottom: 16px;
}
h2 {
font-size: 20px;
line-height: 30px;
}
h3 {
font-size: 18px;
line-height: 28px;
}
h4 {
font-size: 16px;
line-height: 26px;
}
h5 {
font-size: 16px;
line-height: 24px;
}
h6 {
font-size: 16px;
line-height: 24px;
}
h1 code {
font-size: 28px;
}
h2 code {
font-size: 24px;
}
h3 code {
font-size: 22px;
}
h4 code {
font-size: 20px;
}
h5 code {
font-size: 18px;
}
h6 code {
font-size: 16px;
}
/* 列表（有序，无序） */
ul,
ol {
margin: 0 0 8px 0;
padding: 0;
font-size: 14px;
overflow: hidden;
overflow-x: auto;
color: var(--color-CG600);
}
li {
margin: 4px 0 0 18px;
}
ol,
ol > li {
list-style-type: decimal !important;
// 表达式,修复有序列表序号展示不全的问题
:nth-child(n+10){
margin-left: 24px;
}
:nth-child(n+100){
margin-left: 30px;
}
}
ul,
ul > li {
list-style-type: disc;
font-size: 14px;
margin-right: 11px;
color: var(--color-G900);
}
ol ul,
ol ul > li,
ul ul,
ul ul li {
// list-style: circle;
font-size: 14px;
list-style: none;
margin-left: 16px;
}
ul ul ul,
ul ul ul li,
ol ol,
ol ol > li,
ol ul ul,
ol ul ul > li,
ul ol,
ul ol > li {
list-style: square;
}
/* 任务列表 */
.task-list-item {
list-style: none;
margin: 8px 0 0 0;
}
.task-list-item label {
margin-left: 4px;
}
input[type=checkbox]+label, label+a {
vertical-align: middle;
}
input[type=checkbox]+label {
margin-left: 5px;
}
/* 图片 */
img {
margin: 8px 0;
max-width: 100%;
display: inline-block;
}
/* 引用 */
blockquote {
display: block;
padding: 16px;
margin: 0 0 24px;
border-left: 8px solid #dddfe4;
background: #eef0f4;
overflow: auto;
word-break: break-word !important;
}
blockquote ul,
blockquote ol {
margin-bottom: 0;
padding: 0;
font-size: 14px;
line-height: 22px;
}
blockquote ul li {
margin-bottom: 0;
}
blockquote ol li {
margin-bottom: 0;
}
/* 引用 - 文字 */
blockquote p {
font-size: 14px;
line-height: 22px;
color: #555666;
font-weight: normal;
margin-bottom: 0;
}
/* 分割线 */
hr {
margin: 24px 0;
border: none;
border-bottom: solid #ddd 1px;
}
/* 表格 */
tbody {
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #ddd;
background-color: white;
}
table {
border-collapse: collapse;
display: table;
width: 100%;
text-align: center;
margin-bottom: 24px;
}
tbody {
border: 0;
}
table tr:nth-child(2n) {
background-color: #f7f7f7;
}
table tr th,
table tr td {
font-size: 14px;
color: #4f4f4f;
line-height: 22px;
border: 1px solid #ddd;
padding: 8px;
word-break: normal !important;
vertical-align: middle;
}
table tr th code,
table tr td code {
white-space: normal;
word-break: normal !important;
}
table tr th {
font-weight: bold;
background-color: #eff3f5;
}
/* 目录列表 */
dl {
margin: 24px;
}
dl dt {
margin: 8px;
font-weight: bold;
}
dl dd {
margin: 0 0 8px 40px;
}
dl dt dd {
margin: 8px;
}
/* pre */
pre {
margin-bottom: 24px;
white-space: pre-wrap;
padding: 0;
}
pre code {
// color: unset;
color: var(--color-G900);
}
/* 代码块字体 */
code,
kbd,
pre,
samp {
font-size: 14px;
line-height: 22px;
color: var(--color-G900);
}
code {
color: #c7254e;
// background-color: #f9f2f4;
background-color: var(--color-G200);
border-radius: 4px;
padding: 6px;
// display: inline;
}
kbd {
padding: 2px 8px;
border: 1px solid rgba(63, 63, 63, 0.25);
box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
background-color: #fff;
color: #333;
border-radius: 4px;
display: inline-block;
margin: 0 2px;
white-space: nowrap;
}
/* 超链接 */
a {
// color: #4ea1db;
color: var(--color-B600);
text-decoration: none;
}
a:hover,
a:focus {
// color: #ca0c16;
color: var(--color-B600);
text-decoration: underline;
}
a:visited {
// color: #6795b5;
color: var(--color-B600);
}
/* abbr */
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #999;
}
/* toc TODO: devui 尚未支持 */
.toc {
font-size: 18px;
line-height: 24px;
margin: 0 0 24px;
padding: 0;
}
.toc ul {
margin: 0 0 8px;
padding: 0;
}
.toc ul ul {
padding-left: 24px;
}
.toc ul li {
list-style-type: none;
margin: 8px 0 0 24px;
}
/* 脚注 TODO: devui 尚未支持*/
.footnote {
vertical-align: top;
position: relative;
top: -4px;
font-size: 12px;
}
.footnotes ol li {
font-size: 14px;
line-height: 22px;
margin: 0 0 8px 24px;
}
}

49
src/assets/css/jyh.scss Normal file
View File

@@ -0,0 +1,49 @@
/* devui css override */
// d-layout
.jyh-form {
.devui-form__label-span {
color: #595959;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 14px;
line-height: 32px;
letter-spacing: 0px;
text-align: left;
}
.devui-form__label--start {
text-align: right;
}
.devui-form__item--horizontal {
margin-bottom: 0;
}
.jyh-form-operation {
margin-left: 20px !important;
}
}
.jyh-table {
.devui-table__cell {
color: #191919;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.devui-table__cell a {
cursor: pointer;
color: #0A59F7;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.devui-table__row td {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}

458
src/assets/css/main.scss Normal file
View File

@@ -0,0 +1,458 @@
/* 引入全局css变量 */
@import './variable.css';
@import './devui.scss';
@import './theme.scss';
@import './jyh.scss';
@import './mixins/index.scss';
/* 引入tailwindCSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
// 基础CSS
html,
body,
#app {
height: 100%;
-webkit-font-smoothing: antialiased;
// scorll 事件失效 overflow-y: overlay
}
html {
overflow-y: scroll; // html本身没有滚动 为了防止自定义滚动条出现时界面抖动，需要预留轨道
}
html body {
background-color: $devui-global-bg;
font-size: var(--text-sm);
color: var(--color-font);
}
input::placeholder,
textarea::placeholder {
color: var(--color-lighter);
}
// 解决滚动条占用内容宽度
// html {
// overflow-y: scroll;
// }
// :root {
// overflow-y: auto;
// overflow-x: hidden;
// }
// :root body {
// position: absolute;
// }
// body {
// width: 100vw;
// overflow: hidden;
// }
// 兼容火狐浏览器
:focus-visible {
outline: none;
}
// 自定义class
.g-border {
border: 1px solid var(--devui-line);
border-radius: var(--border-radius);
&-light {
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius);
}
}
.g-card,
.g-content-card {
background-color: $devui-base-bg;
box-shadow: $devui-shadow-length-base $devui-light-shadow;
border-radius: var(--border-radius);
}
.g-main-content {
line-height: 30px;
}
.g-sub-content {
line-height: 20px;
}
.g-border-bottom {
border-bottom: solid 1px var(--color-G200);
}
.g-icon-pointer {
cursor: pointer;
&:hover {
color: var(--color-link) !important;
}
}
.g-border-radius-top-no {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.g-icon-right {
vertical-align: middle;
margin-right: 4px;
}
.g-icon-left {
vertical-align: middle;
margin-left: 8px;
}
.g-drop-menu {
width: 100px;
padding: 0 16px;
}
.g-mid-line {
width: 0.5px;
height: 16px;
background: var(--color-border-light);
}
.g-row-line {
height: 1px;
width: 100%;
background: var(--color-G300);
}
.g-max-width {
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.g-font-bold {
font-weight: 600;
}
.g-label-font {
.devui-form__label {
font-weight: 500;
}
}
/* 滚动条样式自定义 */
body::-webkit-scrollbar, body>* ::-webkit-scrollbar {
width: 6px;
height: 4px;
}
body::-webkit-scrollbar-thumb, body>* ::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: var(--devui-disabled-text);
&:hover{
background-color: var(--devui-placeholder)
}
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-corner {
background: transparent;
}
.clearfix {
&:after {
content: '';
clear: both;
visibility: hidden;
display: block;
}
}
.space-y-20 > *:not(:last-child) {
margin-bottom: 20px;
}
/* 分隔符 | */
.g-delimiter {
display: inline-block;
width: 1px;
height: 20px;
background: var(--color-G300);
vertical-align: middle;
}
.g-input-border {
.devui-input__wrapper:not(.devui-input--focus) {
border-color: var(--devui-line, #d7d8da);
}
.devui-input-slot__prepend,
.devui-input-slot__append {
border-color: var(--devui-line, #d7d8da);
}
}
.devui-select__dropdown .devui-select__dropdown--empty {
padding: 4px 8px;
}
/* 输入框 去掉hover效果*/
.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover {
border-color: var(--devui-line, #d7d8da);
}
/* 多行文本输入框 去掉hover效果*/
.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover {
border-color: var(--devui-line, #d7d8da);
}
/* 自动补全输入框 去掉hover效果*/
.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
border-color: var(--devui-line, #d7d8da);
}
/* 可输入下拉选择框 去掉hover效果*/
.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(.devui-editable-select-input__wrapper--focus):hover {
border-color: var(--devui-line, #d7d8da);
}
/* 分页 去掉hover效果*/
.devui-pagination .devui-pagination__size:hover {
border-color: var(--devui-line, #d7d8da);
}
/* 数字输入框 去掉hover效果*/
.devui-input-number:hover .devui-input-number__control-buttons:not(.disabled) {
border-color: var(--devui-line, #d7d8da);
}
.devui-input-number:hover .devui-input-number__input-box:not(.disabled) {
border: 1px solid var(--devui-line, #9b9fa8);
}
/* 下拉框 去掉hover效果*/
.devui-select__selection:hover {
border-color: var(--devui-line, #d7d8da);
}
/* 时间范围选择 去掉hover效果 */
.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(.devui-range-date-picker-pro--disabled):hover {
border-color: var(--devui-line, #d7d8da);
}
.g-add-border {
border-color: var(--devui-line, #d7d8da);
}
.g-z-index-9 {
z-index: 9 !important;
}
.g-z-index-9999 {
z-index: 9999 !important; // 9的层级低于列表的遮罩层
}
.g-hidden-scrollbar {
scrollbar-width: none;
scrollbar-color: transparent transparent;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
&::-webkit-scrollbar-horizontal {
display: none;
}
}
.g-discussion-item .dp-md-container .dp-md-content-container {
min-height: 150px;
}
// modal相关
.g-modal-footer {
display: flex;
padding: 20px;
gap: 8px;
justify-content: flex-end;
}
.row-reverse {
display: flex;
justify-content: flex-start;
flex-direction: row-reverse;
}
.ellipsis {
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis-pre {
white-space: pre-line;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis-two-line {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ellipsis-three-line {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.absolute-full {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.inline-center {
display: inline-flex;
align-items: center;
justify-content: center;
}
// 重置a标签的默认和hover色值
.reset-hover {
color: unset;
&:hover {
color: unset;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spin {
animation: spin 2s linear infinite;
transform-origin: center center;
}
// 重写RadioGroup样式
.g-radio-group {
&.devui-radio-group {
background-color: var(--color-G100);
padding: 2px;
.devui-radio-button {
border: none;
line-height: 22px;
height: 28px;
color: var(--color-CG600);
&:first-child {
border-left: none !important;
}
&.active {
color: #fff;
box-shadow: 0px 2px 6px 0px rgba(37, 43, 58, 0.12);
border-radius: var(--border-radius);
font-weight: 500;
}
}
}
}
.border-none {
border: none !important;
}
input {
background-color:transparent !important;
// appearance: none;
&:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-text-fill-color: inherit !important;
background-color: transparent !important;
background-image: none;
transition: background-color 36000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
&:-moz-autofill, textarea:-moz-autofill, select:-moz-autofill {
-webkit-text-fill-color: inherit !important;
background-color: transparent !important;
background-image: none;
transition: background-color 36000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
}
@media screen and (max-width: 1536px) {
.g-padding-x {
padding: 0 32px;
}
}
@media screen and (max-width: 768px) {
.g-padding-x {
padding: 0 16px;
}
}
.g-content-card-v2 {
background-color: $devui-global-bg;
border-radius: $devui-border-radius-card;
border: 1px solid var(--gray-border-color);
}
.g-number {
border-radius: 4px;
padding: 0 4px;
background: var(--gray-bg-color);
font-size: 12px;
line-height: 16px;
color: var(--devui-text);
}
.font-color-t1 {
color: $devui-text;
}
.font-color-t2 {
color: $devui-aide-text;
}
.font-color-placeholder {
color: $devui-placeholder;
}
.g-large-title-font {
font-size: 22px;
line-height: 22px;
font-weight: 500;
}
.g-divide-line {
height: 1px;
width: 100%;
background: var(--devui-dividing-line);
margin: 32px 0
}
.g-tip-text {
font-size: var(--devui-font-size);
line-height: 20px;
color: $devui-placeholder;
}
// 新版设计统一设置标题样式 大小颜色行高
.unify-settingTitle-title{
font-weight: 700;
line-height: 34px;
font-size: 24px;
color: var(--devui-text);
}
// 项目设置页面标题
.repo-settings-title {
@apply text-xl mb-[12px] flex items-center justify-between font-semibold;
}
// 下拉框动效
.arrow-down{
transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
transform-origin: center;
transform: rotateZ(0deg) !important;
}
.arrow-up{
transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
transform-origin: center;
transform: rotateZ(180deg) !important;
}

147
src/assets/css/mixins/button.scss Normal file
View File

@@ -0,0 +1,147 @@
// 自定义 按钮额外主题 红绿橙
button.devui-button {
// 实心按钮
&--solid {
//绿色按钮
&--success,
&--operable {
background-color: $v2-color-success;
&:hover {
background-color: $v2-color-success-hover;
}
&:active {
background-color: $v2-color-success-active;
}
&:disabled {
background-color: $v2-color-success-disable;
}
}
// 橙色按钮
&--warning {
background-color: $v2-color-warning;
&:hover {
background-color: $v2-color-warning-hover;
}
&:active {
background-color: $v2-color-warning-active;
}
&:disabled {
background-color: $v2-color-warning-disable;
}
}
// 暗红按钮
&--error {
background-color: $v2-color-error;
&:hover {
background-color: $v2-color-error-hover;
}
&:active {
background-color: $v2-color-error-active;
}
&:disabled {
background-color: $v2-color-error-disable;
}
}
}
//镂空按钮
&--outline {
&--success,
&--operable {
color: $v2-color-success;
border-color: $v2-color-success;
&:hover {
color: $v2-color-success-hover;
border-color: $v2-color-success-hover;
}
&:active {
color: $v2-color-success-active;
border-color: $v2-color-success-active;
}
&:disabled {
color: $v2-color-success-disable;
border-color: $v2-color-success-disable;
}
}
// 橙色按钮
&--warning {
color: $v2-color-warning;
border-color: $v2-color-warning;
&:hover {
color: $v2-color-warning-hover;
border-color: $v2-color-warning-hover;
}
&:active {
color: $v2-color-warning-active;
border-color: $v2-color-warning-active;
}
&:disabled {
color: $v2-color-warning-disable;
border-color: $v2-color-warning-disable;
}
}
// 暗红按钮
&--error {
color: $v2-color-error;
border-color: $v2-color-error;
&:hover {
color: $v2-color-error-hover;
border-color: $v2-color-error-hover;
}
&:active {
color: $v2-color-error-active;
border-color: $v2-color-error-active;
}
&:disabled {
color: $v2-color-error-disable;
border-color: $v2-color-error-disable;
}
}
}
//文字按钮
&--text {
&--success,
&--operable {
color: $v2-color-success;
&:hover {
color: $v2-color-success-hover;
}
&:active {
color: $v2-color-success-active;
}
&:disabled {
color: $v2-color-success-disable;
}
}
&--warning {
color: $v2-color-warning;
&:hover {
color: $v2-color-warning-hover;
}
&:active {
color: $v2-color-warning-active;
}
&:disabled {
color: $v2-color-warning-disable;
}
}
&--error {
color: $v2-color-success;
&:hover {
color: $v2-color-success-hover;
}
&:active {
color: $v2-color-success-active;
}
&:disabled {
color: $v2-color-success-disable;
}
}
}
}

34
src/assets/css/mixins/card.scss Normal file
View File

@@ -0,0 +1,34 @@
@import './variables.scss';
.v2-g-card {
position: relative;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid $card-border-color;
border-radius: $card-border-radius;
color: $card-text-color;
}
.v2-g-card-header:first-child {
border-radius: $card-border-radius $card-border-radius 0 0;
}
.v2-g-card-header {
margin-bottom: 0;
padding: $card-padding;
background-color: $card-border-header-bg;
border-bottom: 1px solid $card-border-color;
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
}
.v2-g-card-body {
padding: $card-padding;
}
.v2-g-card-header:only-child {
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
margin-bottom: -1px;
}

2
src/assets/css/mixins/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './card.scss';
@import './button.scss';

21
src/assets/css/mixins/variables.scss Normal file
View File

@@ -0,0 +1,21 @@
// 按钮 scss 变量
$v2-color-success: #10a35c;
$v2-color-success-hover: #31a26c;
$v2-color-success-active: #31a26c;
$v2-color-success-disable: #d6ece2;
$v2-color-warning: #ed5f22;
$v2-color-warning-hover: #f07a47;
$v2-color-warning-active: #f07a47;
$v2-color-warning-disable: #fce4da;
$v2-color-error: #da203e;
$v2-color-error-hover: #da203e;
$v2-color-error-active: hsla(350, 74%, 44%, 1);
$v2-color-error-disable: #fce4da;
$card-border-color: #e3e3ee;
$card-padding: 16px;
$card-border-radius: 8px;
$card-border-header-bg: #f9f9fb;
$card-text-color: #3b3e55;

16
src/assets/css/theme.scss Normal file
View File

@@ -0,0 +1,16 @@
/**
* 网站主题（暂定前端控制）
*/
// 亮色
.g-theme-light {
.dp-editor-md-preview-container.dp-md-view [src$="#gh-dark-mode-only"] {
display: none;
}
}
// 暗色
.g-theme-dark {
.dp-editor-md-preview-container.dp-md-view [src$="#gh-light-mode-only"] {
display: none;
}
}

78
src/assets/css/variable.css Normal file
View File

@@ -0,0 +1,78 @@
:root {
--color-G100: #FBFBFB;
--color-G150: #F6F6F8;
--color-G200: #F0F1F2;
--color-G300: #E6E6E8;
--color-G400: #D1D2D4;
--color-G500: #B3B4B5;
--color-G600: #9A9B9C;
--color-G700: #7E7E80;
--color-G800: #5B5B5C;
--color-G900: #2D2D2E;
--color-G1000: #000000;
--color-CG100: #F8F9FB;
--color-CG200: #F4F7F9;
--color-CG300: #E4E9F0;
--color-CG400: #CAD0D9;
--color-CG500: #9FA7B3;
--color-CG600: #707A87;
--color-CG700: #505A69;
--color-CG800: #3B4655;
--color-CG900: #252D3B;
--color-CG950: #151A26;
--color-DP100: #FDF4F6;
--color-DP200: #FAE5EC;
--color-DP300: #F4C7D5;
--color-DP400: #EA92AD;
--color-DP500: #E05E86;
--color-DP600: #B64C6D;
--color-DP700: #963F59;
--color-DP800: #652A3C;
--color-DP900: #3E1A25;
--color-DP950: #261017;
--color-B300: #AECCFC;
--color-B400: #6FA3F7;
--color-B500: #3B82F6;
--color-B600: #2562C4;
--color-R500: #F2050D;
--color-O500: #FF6C17;
--color-Y100: #FEF6E5;
--color-Y200: #FCE7BB;
--color-Y500: #F5AB0B;
--color-GN500: #0EB07B;
--color-linear100: linear-gradient(180deg, #FCFCFC 0%, #F8F9FB 100%);
--color-linear200: linear-gradient(180deg, #F8F9FA 0%, #F0F1F2 100%);
--color-primary: var(--color-B500);
--color-primary-hover: var(--color-B400);
--color-primary-active: var(--color-B600);
--color-primary-disable: var(--color-B300);
--color-danger: var(--color-R500);
--color-success: var(--color-GN500);
--color-tip: var(--color-Y500);
--color-warning: var(--color-O500);
--color-link: var(--color-B600);
--color-font: var(--color-G900);
--color-light: var(--color-CG600);
--color-lighter: var(--color-CG500);
--color-disabled: var(--color-CG500);
--color-border: var(--color-G300);
--color-border-light: var(--color-G200);
--color-button-border: var(--color-G400);
--color-button-border-hover: var(--color-B500);
--w-normal: 1440px;
--w-sm: 1100px;
--w-xs: 720px;
--spacing-normal: 32px;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 22px;
--border-radius: 3px;
--gray-border-color: #E3E3EE;
--gray-bg-color: #e3e3ed;
--tab-active-bg: #F1F1F8;
--checkbox-border-color: #D1D1E0;
}