|
|
@@ -1,17 +1,21 @@
|
|
|
.slider-content {
|
|
|
width: 20%;
|
|
|
- margin-left: 20px;
|
|
|
- box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px;
|
|
|
+ min-width: 240px;
|
|
|
+ max-width: 350px;
|
|
|
+ margin-left: 1.25rem; /* 20px */
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0.25rem 0.625rem;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- transition: all .3s;
|
|
|
- padding: 20px 0;
|
|
|
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ padding: 1.25rem 0; /* 20px 0 */
|
|
|
box-sizing: border-box;
|
|
|
flex-shrink: 0;
|
|
|
background-color: #ffffff;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
&.shrink {
|
|
|
width: 80px;
|
|
|
+ min-width: 80px;
|
|
|
align-items: center;
|
|
|
|
|
|
& .slider-icons {
|
|
|
@@ -21,71 +25,111 @@
|
|
|
|
|
|
& .slider-item-box {
|
|
|
padding: 0;
|
|
|
- margin-top: 30px;
|
|
|
+ margin-top: 1.875rem; /* 30px */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
& .slider-icons {
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 0.625rem; /* 10px */
|
|
|
cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.slider-item-box {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- margin-top: 20px;
|
|
|
- padding: 0 15px 15px 15px;
|
|
|
+ gap: 1.25rem; /* 20px */
|
|
|
+ margin-top: 1.25rem; /* 20px */
|
|
|
+ padding: 0 0.9375rem 0.9375rem 0.9375rem; /* 0 15px 15px 15px */
|
|
|
box-sizing: border-box;
|
|
|
height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Webkit浏览器滚动条美化 */
|
|
|
+ .slider-item-box::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item-box::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item-box::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item-box::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
|
|
|
.slider-tag {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
+ gap: 0.625rem; /* 10px */
|
|
|
|
|
|
.slider-tag-item {
|
|
|
background-color: #4A90C4;
|
|
|
color: #FFFFFF;
|
|
|
- padding: 8px 0;
|
|
|
+ padding: 0.5rem 0; /* 8px 0 */
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 0.875rem; /* 14px */
|
|
|
border-radius: 1000px;
|
|
|
cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #3a7aa4;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 8px rgba(74, 144, 196, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.capacity-item {
|
|
|
width: 100%;
|
|
|
height: 48vh;
|
|
|
+ min-height: 300px;
|
|
|
+ max-height: 600px;
|
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
- border-radius: 12px;
|
|
|
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 0.75rem; /* 12px */
|
|
|
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
&:hover {
|
|
|
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
|
+ box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.12);
|
|
|
}
|
|
|
|
|
|
.remark {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- border-radius: 12px;
|
|
|
- overflow-y: auto; /* 垂直方向滚动 */
|
|
|
- overflow-x: hidden; /* 隐藏水平滚动条 */
|
|
|
- white-space: pre-wrap; /* 保留换行和空格,允许自动换行 */
|
|
|
- word-wrap: break-word; /* 长单词自动换行 */
|
|
|
- word-break: break-word; /* 确保单词在边界处断开 */
|
|
|
- padding: 16px;
|
|
|
- line-height: 1.8; /* 增加行高,提高可读性 */
|
|
|
- color: #2c3e50; /* 深色文字,提高对比度 */
|
|
|
- font-size: 14px;
|
|
|
- background-color: rgba(255, 255, 255, 0.6); /* 半透明白色背景 */
|
|
|
- backdrop-filter: blur(10px); /* 毛玻璃效果 */
|
|
|
+ border-radius: 0.75rem; /* 12px */
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-word;
|
|
|
+ padding: 1rem; /* 16px */
|
|
|
+ line-height: 1.8;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-size: 0.875rem; /* 14px */
|
|
|
+ background-color: rgba(255, 255, 255, 0.6);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
|
|
|
/* 自定义滚动条样式 */
|
|
|
&::-webkit-scrollbar {
|
|
|
@@ -113,18 +157,285 @@
|
|
|
|
|
|
|
|
|
.slider-item {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 0.875rem; /* 14px */
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
+ min-width: 40px;
|
|
|
+ min-height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-color: #d9d9d9;
|
|
|
border-radius: 100px;
|
|
|
- box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0.25rem 0.625rem;
|
|
|
cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #c0c0c0;
|
|
|
+ transform: scale(1.05);
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.15) 0 0.375rem 0.875rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.edit-text {
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 0.625rem; /* 10px */
|
|
|
+ font-size: 0.875rem; /* 14px */
|
|
|
+}
|
|
|
+
|
|
|
+/* 平板设备 (≤1440px) */
|
|
|
+@media (max-width: 1440px) {
|
|
|
+ .slider-content {
|
|
|
+ width: 22%;
|
|
|
+ min-width: 220px;
|
|
|
+ max-width: 320px;
|
|
|
+ margin-left: 1rem;
|
|
|
+ padding: 1rem 0;
|
|
|
+
|
|
|
+ .slider-item-box {
|
|
|
+ gap: 1rem;
|
|
|
+ margin-top: 1rem;
|
|
|
+ padding: 0 0.75rem 0.75rem 0.75rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-tag .slider-tag-item {
|
|
|
+ font-size: 0.8125rem; /* 13px */
|
|
|
+ padding: 0.4rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capacity-item {
|
|
|
+ height: 45vh;
|
|
|
+ min-height: 250px;
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ font-size: 0.8125rem; /* 13px */
|
|
|
+ padding: 0.875rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ min-width: 36px;
|
|
|
+ min-height: 36px;
|
|
|
+ font-size: 0.8125rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 小屏幕 (≤1024px) */
|
|
|
+@media (max-width: 1024px) {
|
|
|
+ .slider-content {
|
|
|
+ width: 24%;
|
|
|
+ min-width: 200px;
|
|
|
+ max-width: 260px;
|
|
|
+ margin-left: 0.75rem;
|
|
|
+ padding: 0.875rem 0;
|
|
|
+
|
|
|
+ .slider-item-box {
|
|
|
+ gap: 0.75rem;
|
|
|
+ margin-top: 0.75rem;
|
|
|
+ padding: 0 0.625rem 0.625rem 0.625rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-tag .slider-tag-item {
|
|
|
+ font-size: 0.75rem; /* 12px */
|
|
|
+ padding: 0.375rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capacity-item {
|
|
|
+ height: 42vh;
|
|
|
+ min-height: 220px;
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ font-size: 0.75rem; /* 12px */
|
|
|
+ padding: 0.75rem;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ min-width: 32px;
|
|
|
+ min-height: 32px;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit-text {
|
|
|
+ margin-left: 0.5rem;
|
|
|
+ font-size: 0.75rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 平板竖屏或小笔记本 (≤900px) */
|
|
|
+@media (max-width: 900px) {
|
|
|
+ .slider-content {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ padding: 0.75rem;
|
|
|
+ order: 1; /* 移到底部 */
|
|
|
+
|
|
|
+ &.shrink {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 100%;
|
|
|
+
|
|
|
+ & .slider-item-box {
|
|
|
+ padding: 0.5rem;
|
|
|
+ margin-top: 0.75rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item-box {
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 0.5rem;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ padding: 0.5rem;
|
|
|
+ max-height: 50vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-tag {
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .slider-tag-item {
|
|
|
+ flex: 0 1 auto;
|
|
|
+ padding: 0.375rem 0.75rem;
|
|
|
+ min-width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .capacity-item {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ min-height: 200px;
|
|
|
+ max-height: 300px;
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ font-size: 0.8125rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动设备 (≤768px) */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .slider-content {
|
|
|
+ padding: 0.5rem;
|
|
|
+
|
|
|
+ .slider-item-box {
|
|
|
+ gap: 0.375rem;
|
|
|
+ padding: 0.375rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-tag .slider-tag-item {
|
|
|
+ font-size: 0.6875rem; /* 11px */
|
|
|
+ padding: 0.3rem 0.5rem;
|
|
|
+ min-width: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capacity-item {
|
|
|
+ min-height: 180px;
|
|
|
+ max-height: 250px;
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ font-size: 0.75rem;
|
|
|
+ padding: 0.625rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ min-width: 28px;
|
|
|
+ min-height: 28px;
|
|
|
+ font-size: 0.6875rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 超大屏幕 (≥2560px) */
|
|
|
+@media (min-width: 2560px) {
|
|
|
+ .slider-content {
|
|
|
+ width: 18%;
|
|
|
+ min-width: 320px;
|
|
|
+ max-width: 450px;
|
|
|
+ margin-left: 1.5rem;
|
|
|
+ padding: 1.5rem 0;
|
|
|
+
|
|
|
+ .slider-item-box {
|
|
|
+ gap: 1.5rem;
|
|
|
+ margin-top: 1.5rem;
|
|
|
+ padding: 0 1.25rem 1.25rem 1.25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-tag .slider-tag-item {
|
|
|
+ font-size: 1rem; /* 16px */
|
|
|
+ padding: 0.625rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capacity-item {
|
|
|
+ height: 50vh;
|
|
|
+ min-height: 400px;
|
|
|
+ max-height: 800px;
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ font-size: 1rem; /* 16px */
|
|
|
+ padding: 1.25rem;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ min-width: 48px;
|
|
|
+ min-height: 48px;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit-text {
|
|
|
+ margin-left: 0.75rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 高对比度模式 */
|
|
|
+@media (prefers-contrast: high) {
|
|
|
+ .slider-content {
|
|
|
+ border: 2px solid currentColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider-item,
|
|
|
+ .capacity-item {
|
|
|
+ border: 2px solid currentColor;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 减少动画模式 */
|
|
|
+@media (prefers-reduced-motion: reduce) {
|
|
|
+ .slider-content,
|
|
|
+ .slider-item,
|
|
|
+ .slider-tag-item {
|
|
|
+ animation-duration: 0.01ms !important;
|
|
|
+ animation-iteration-count: 1 !important;
|
|
|
+ transition-duration: 0.01ms !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 打印样式 */
|
|
|
+@media print {
|
|
|
+ .slider-content {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|