|
@@ -760,4 +760,454 @@
|
|
|
border-radius: 3px;
|
|
|
transition: width 0.3s ease;
|
|
|
}
|
|
|
-
|
|
|
+ //7.1
|
|
|
+ /* 原有样式保持不变... */
|
|
|
+
|
|
|
+/* 新增可点击标签样式 */
|
|
|
+.clickable-tag {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(0, 123, 255, 0.1);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 模态框样式 */
|
|
|
+.modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 1000;
|
|
|
+ backdrop-filter: blur(3px);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-content {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 500px;
|
|
|
+ max-height: 80vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ animation: modalFadeIn 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes modalFadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-20px);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ right: 15px;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-title {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 0;
|
|
|
+ color: #555;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-input, .modal-select, .modal-textarea, .modal-file-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #007bff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-textarea {
|
|
|
+ min-height: 100px;
|
|
|
+ resize: vertical;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-file-input {
|
|
|
+ padding: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-button {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &.cancel {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #0069d9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.contract-info, .training-info {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+/* 添加在原有样式之后 */
|
|
|
+
|
|
|
+/* 可访问性相关样式 */
|
|
|
+.sr-only {
|
|
|
+ position: absolute;
|
|
|
+ width: 1px;
|
|
|
+ height: 1px;
|
|
|
+ padding: 0;
|
|
|
+ margin: -1px;
|
|
|
+ overflow: hidden;
|
|
|
+ clip: rect(0, 0, 0, 0);
|
|
|
+ white-space: nowrap;
|
|
|
+ border-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.file-upload-label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ input[type="file"] {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+label:not(.sr-only):not(.file-upload-label) {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #555;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+/* 修复source-tag的悬停效果 */
|
|
|
+.source-tag {
|
|
|
+ /* 原有基础样式保持不变 */
|
|
|
+ background: #f0f4f8;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $text-dark;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ /* 确保悬停效果优先级 */
|
|
|
+ &:hover {
|
|
|
+ background: #e0e0e0 !important;
|
|
|
+ transform: translateY(-2px) !important;
|
|
|
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 活动状态 */
|
|
|
+ &.active {
|
|
|
+ border-color: $primary;
|
|
|
+ box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
|
|
|
+ color: $primary;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(66, 133, 244, 0.08);
|
|
|
+
|
|
|
+ /* 活动状态下的悬停效果 */
|
|
|
+ &:hover {
|
|
|
+ background: rgba(66, 133, 244, 0.15) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图标样式 */
|
|
|
+ i {
|
|
|
+ margin-right: 0; /* 改为使用gap布局 */
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.source-tag {
|
|
|
+ /* 原有基础样式保持不变 */
|
|
|
+ background: #f0f4f8;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $text-dark;
|
|
|
+ transition: all 0.3s ease; /* 增加过渡时间使效果更平滑 */
|
|
|
+ border: 1px solid transparent; /* 初始透明边框 */
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ position: relative; /* 为伪元素定位做准备 */
|
|
|
+
|
|
|
+ /* 新增悬停蓝色边框效果 */
|
|
|
+ &:hover {
|
|
|
+ border-color: $primary; /* 蓝色边框 */
|
|
|
+ box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3); /* 外发光效果 */
|
|
|
+
|
|
|
+ /* 如果想要更明显的发光效果,可以使用以下替代方案 */
|
|
|
+ /*
|
|
|
+ box-shadow: 0 0 0 2px $primary-light,
|
|
|
+ 0 4px 8px rgba(0,0,0,0.1);
|
|
|
+ */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 活动状态 */
|
|
|
+ &.active {
|
|
|
+ border-color: $primary;
|
|
|
+ box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
|
|
|
+ color: $primary;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(66, 133, 244, 0.08);
|
|
|
+
|
|
|
+ /* 活动状态下的悬停效果 */
|
|
|
+ &:hover {
|
|
|
+ background: rgba(66, 133, 244, 0.15);
|
|
|
+ box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.4); /* 悬停时加强效果 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图标样式 */
|
|
|
+ i {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//
|
|
|
+/* 标签选择器样式 */
|
|
|
+.tag-selector-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 1001; /* 比模态框更高 */
|
|
|
+ backdrop-filter: blur(3px);
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-container {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 16px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 400px;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
|
+ animation: modalFadeIn 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-header {
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
+ color: $text-dark;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-close {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 20px;
|
|
|
+ color: $text-light;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: $primary;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-body {
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-scroll-container {
|
|
|
+ max-height: 50vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-option {
|
|
|
+ padding: 12px 15px;
|
|
|
+ margin: 5px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ transition: all 0.2s;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #eee;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(66, 133, 244, 0.1);
|
|
|
+ transform: translateX(5px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ background-color: rgba(66, 133, 244, 0.15);
|
|
|
+ border-color: $primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ margin-right: 10px;
|
|
|
+ color: $primary;
|
|
|
+ width: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.checkmark {
|
|
|
+ margin-left: auto;
|
|
|
+ color: $primary;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 15px;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-btn {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &.cancel {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: $text-dark;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm {
|
|
|
+ background-color: $primary;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: $primary-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.add-tag-btn {
|
|
|
+ position: relative; // 确保按钮在顶层
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+/* 在文件末尾添加以下内容 */
|
|
|
+
|
|
|
+/* 标签选择器样式 */
|
|
|
+.tag-selector-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 1001;
|
|
|
+ backdrop-filter: blur(3px);
|
|
|
+}
|
|
|
+
|
|
|
+.tag-selector-container {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 16px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 400px;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保按钮层级 */
|
|
|
+.add-tag-btn {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 模态框层级 */
|
|
|
+.modal-overlay {
|
|
|
+ z-index: 1000;
|
|
|
+}
|