@opendesign-plus/components 0.0.1-rc.21 → 0.0.1-rc.23

package/src/components/events/OEventsApply.vue

@@ -67,11 +67,12 @@ defineProps<EventsApplyPropsT>();
 
 <style lang="scss">
 .o-events-apply {
+  --events-card-radius: var(--o-radius-xs);
   width: 100%;
   // 移动端时间线序号
   .timeline-number {
     display: none; // 桌面端隐藏
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       display: flex;
       align-items: flex-start;
       padding-top: var(--o-gap-3); // 与 step-title 的 padding 对齐
@@ -118,7 +119,7 @@ defineProps<EventsApplyPropsT>();
     gap: var(--o-gap-6);
 
     // 移动端：2列布局（序号列 + 内容列）
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
       grid-template-rows: auto; // 行数自动
       gap: var(--o-gap-3); // 列间距12px，行间距12px
@@ -126,13 +127,13 @@ defineProps<EventsApplyPropsT>();
 
     .step-item {
       background: var(--o-color-fill2);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--events-card-radius);
       display: flex;
       flex-direction: column; // 垂直排列子元素
       --idx-size: 20px;
       --idx-gap: var(--o-gap-3);
       // 移动端：强制在第2列显示
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         grid-column: 2 !important;
         grid-row: auto !important;
       }
@@ -145,13 +146,13 @@ defineProps<EventsApplyPropsT>();
         display: flex;
         align-items: center;
         @include h2;
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           margin-bottom: 0;
           padding: var(--o-gap-3) var(--o-gap-4);
           border-bottom: 1px solid var(--o-color-control4);
           @include text1;
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-bottom: 0;
           padding: var(--o-gap-3) var(--o-gap-4);
           border-bottom: 1px solid var(--o-color-control4);
@@ -169,10 +170,10 @@ defineProps<EventsApplyPropsT>();
           color: #fff;
           text-align: center;
           font-weight: 400;
-          @include respond-to('pad_v') {
+          @include respond('pad_v') {
             display: none;
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             display: none;
           }
         }
@@ -182,10 +183,10 @@ defineProps<EventsApplyPropsT>();
         color: var(--o-color-info2);
         padding: 0 var(--o-gap-6) var(--o-gap-4) var(--o-gap-6);
         @include tip1;
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
 
@@ -195,7 +196,7 @@ defineProps<EventsApplyPropsT>();
 
         .desc-list-title {
           padding-left: calc(var(--idx-size) + var(--idx-gap));
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: none;
           }
         }
@@ -214,10 +215,10 @@ defineProps<EventsApplyPropsT>();
               font-size: 16px;
               margin-right: var(--o-gap-4);
               color: #fff;
-              @include respond-to('pad_v') {
+              @include respond('pad_v') {
                 margin-right: var(--o-gap-2);
               }
-              @include respond-to('phone') {
+              @include respond('phone') {
                 margin-right: var(--o-gap-2);
               }
 
@@ -236,13 +237,11 @@ defineProps<EventsApplyPropsT>();
             --padding-left: var(--o-gap-4);
             padding-left: calc(var(--o-gap-4) + var(--o-gap-4));
             color: rgba(255, 255, 255, 0.8);
-            @include respond-to('pad_v') {
+            @include respond('pad_v') {
               padding-left: var(--o-gap-5);
-              color: var(--o-color-info2);
             }
-            @include respond-to('phone') {
+            @include respond('phone') {
               padding-left: var(--o-gap-5);
-              color: var(--o-color-info2);
             }
           }
         }
@@ -257,20 +256,20 @@ defineProps<EventsApplyPropsT>();
       }
 
       .img-wrapper {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           display: none;
         }
       }
 
       .img-wrapper-phone {
-        @include respond-to('>pad_v') {
+        @include respond('>pad_v') {
           display: none;
         }
       }
 
       &.step-1 {
         .step-desc {
-          @include respond-to('>pad_v') {
+          @include respond('>pad_v') {
             padding-bottom: 0;
           }
         }
@@ -288,7 +287,7 @@ defineProps<EventsApplyPropsT>();
 
       &.step-2 {
         .step-desc {
-          @include respond-to('>pad_v') {
+          @include respond('>pad_v') {
             padding-bottom: 0;
           }
         }
@@ -305,31 +304,33 @@ defineProps<EventsApplyPropsT>();
       }
 
       &.step-3 {
-        @include respond-to('>pad_v') {
+        background: linear-gradient(
+            142.13deg,
+            color-mix(in srgb, transparent 0%, transparent) 0%,
+            color-mix(in srgb, rgba(var(--o-white), 0.6) 60%, transparent) 100%
+        ),
+        var(--o-color-primary1);
+
+        &.is-dark {
           background: linear-gradient(
               142.13deg,
-              color-mix(in srgb, transparent 0%, transparent) 0%,
-              color-mix(in srgb, rgba(var(--o-white), 0.6) 60%, transparent) 100%
+              color-mix(in srgb, var(--o-color-primary1) 40%, transparent) 0%,
+              color-mix(in srgb, var(--o-color-primary1) 16%, transparent) 100%
           ),
-          var(--o-color-primary1);
-          &.is-dark {
-            background: linear-gradient(
-                142.13deg,
-                color-mix(in srgb, var(--o-color-primary1) 40%, transparent) 0%,
-                color-mix(in srgb, var(--o-color-primary1) 16%, transparent) 100%
-            ),
-            var(--o-color-fill2);
-          }
-          .step-idx {
-            background-color: #fff;
-            color: #000;
-          }
-          .step-title {
-            color: #fff;
-          }
-          .step-desc {
-            color: #fff;
-          }
+          var(--o-color-fill2);
+        }
+
+        .step-idx {
+          background-color: #fff;
+          color: #000;
+        }
+
+        .step-title {
+          color: #fff;
+        }
+
+        .step-desc {
+          color: #fff;
         }
 
         .img-wrapper {
@@ -349,10 +350,10 @@ defineProps<EventsApplyPropsT>();
       &.step-4 {
         position: relative;
         padding-right: 292px;
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           padding-right: 192px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           padding-right: var(--o-gap-4);
         }
 

package/src/components/events/OEventsCalendar.vue

@@ -236,9 +236,11 @@ const getIcon = (item: CalendarItemT) => {
 
 <style lang="scss">
 .o-events-calendar {
+  --events-card-radius: var(--o-radius-xs);
+  --events-name-radius: var(--o-radius-xs);
   .month-list {
     display: flex;
-    border-radius: var(--o-radius_control-l) var(--o-radius_control-l) 0 0;
+    border-radius: var(--events-card-radius) var(--events-card-radius) 0 0;
     background-color: var(--o-color-control2-light);
     color: var(--o-color-info1);
 
@@ -248,10 +250,10 @@ const getIcon = (item: CalendarItemT) => {
       height: var(--header-height);
       line-height: var(--header-height);
       text-align: center;
-      @include respond-to('laptop') {
+      @include respond('laptop') {
         --header-height: 40px;
       }
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         --header-height: 38px;
       }
     }
@@ -259,19 +261,19 @@ const getIcon = (item: CalendarItemT) => {
 
   .o-collapse {
     --collapse-padding: 0;
-    --collapse-radius: 0 0 var(--o-radius_control-l) var(--o-radius_control-l);
-    @include respond-to('pad_v') {
-      --collapse-radius: var(--o-radius_control-l);
+    --collapse-radius: 0 0 var(--events-card-radius) var(--events-card-radius);
+    @include respond('pad_v') {
+      --collapse-radius: var(--events-card-radius);
     }
-    @include respond-to('phone') {
-      --collapse-radius: var(--o-radius_control-l);
+    @include respond('phone') {
+      --collapse-radius: var(--events-card-radius);
     }
 
     .o-collapse-item {
       .o-collapse-item-header {
         padding: var(--o-gap-4) var(--o-gap-6);
         align-items: center;
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           padding: var(--o-gap-2) var(--o-gap-3);
         }
 
@@ -298,7 +300,7 @@ const getIcon = (item: CalendarItemT) => {
     align-items: center;
     justify-content: space-between;
     margin-right: var(--o-gap-4);
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       flex-direction: column;
       align-items: flex-start;
     }
@@ -317,7 +319,7 @@ const getIcon = (item: CalendarItemT) => {
         justify-content: center;
         margin-right: var(--o-gap-4);
         background-color: rgb(var(--bg-color));
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           margin-right: var(--o-gap-2);
         }
       }
@@ -325,10 +327,10 @@ const getIcon = (item: CalendarItemT) => {
       .o-icon {
         font-size: 20px;
         color: var(--o-white);
-        @include respond-to('laptop') {
+        @include respond('laptop') {
           font-size: 16px;
         }
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           font-size: 16px;
         }
 
@@ -350,7 +352,7 @@ const getIcon = (item: CalendarItemT) => {
       color: var(--o-color-info3);
       white-space: normal;
       @include text1;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-top: var(--o-gap-1);
         font-size: 12px;
       }
@@ -364,7 +366,7 @@ const getIcon = (item: CalendarItemT) => {
   .month-content {
     padding: var(--o-gap-3) 0;
     position: relative;
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       padding: var(--o-gap-2) 0;
     }
     background-image: linear-gradient(
@@ -446,7 +448,7 @@ const getIcon = (item: CalendarItemT) => {
     );
 
     --event-gap: 6px;
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --event-gap: var(--o-gap-1);
     }
     // 跨月事件布局：Grid
@@ -493,7 +495,7 @@ const getIcon = (item: CalendarItemT) => {
         color: var(--o-color-info1);
         min-height: 32px;
         padding: 2px var(--o-gap-2);
-        border-radius: 4px;
+        border-radius: var(--events-name-radius);
         word-break: normal;
         overflow-wrap: anywhere;
         background: linear-gradient(to right, rgba(var(--bg-color), 0.06) 0%, rgba(var(--bg-color), 0.2) 100%), var(--o-color-fill2); // 底层实色背景遮住分割线
@@ -507,7 +509,7 @@ const getIcon = (item: CalendarItemT) => {
           --link-gap: 2px;
           display: flex;
           @include tip1;
-          @include respond-to('pad_v') {
+          @include respond('pad_v') {
             color: var(--o-color-info1);
           }
 
@@ -549,7 +551,7 @@ const getIcon = (item: CalendarItemT) => {
         color: var(--o-color-info2);
         font-weight: 400;
         @include tip1;
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           @include text2;
         }
       }

package/src/components/events/OEventsList.vue

@@ -186,17 +186,19 @@ const list = computed(() => {
 
 <style lang="scss">
 .o-events-list {
+  --events-card-radius: var(--o-radius-xs);
+  --events-tag-radius: var(--o-radius-xs);
   .filter-wrapper {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
     background-color: var(--o-color-fill2);
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--events-card-radius);
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       padding: var(--o-gap-3) var(--o-gap-4);
     }
 
@@ -210,10 +212,10 @@ const list = computed(() => {
         flex-shrink: 0;
         margin-right: var(--o-gap-5);
         font-weight: 500;
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           margin-right: var(--o-gap-4);
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-right: var(--o-gap-4);
         }
       }
@@ -221,7 +223,7 @@ const list = computed(() => {
       .o-toggle {
         --toggle-size: 32px;
         --toggle-padding: 3px 15px;
-        --toggle-radius: 4px;
+        --toggle-radius: var(--events-tag-radius);
         max-height: 32px;
         --toggle-bg-color: var(--o-color-fill1);
         --toggle-bg-color-hover: var(--o-color-control2-light);
@@ -236,7 +238,7 @@ const list = computed(() => {
     .o-input {
       .o-icon-search {
         font-size: 24px;
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           font-size: 16px;
         }
       }
@@ -247,15 +249,15 @@ const list = computed(() => {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--o-gap-6);
     margin-top: var(--o-gap-6);
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       grid-template-columns: repeat(1, 1fr);
       container-type: inline-size;
     }
-    @include respond-to('pad_v') {
+    @include respond('pad_v') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
     }
@@ -263,7 +265,7 @@ const list = computed(() => {
     .o-card {
       aspect-ratio: 1 / 1;
       position: relative;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         aspect-ratio: 1 / 0.4;
       }
       @container (max-width: 300px) {
@@ -301,10 +303,10 @@ const list = computed(() => {
         text-align: center;
         padding: var(--o-gap-6);
 
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           margin-top: var(--o-gap-4);
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-top: var(--o-gap-4);
         }
 
@@ -316,8 +318,8 @@ const list = computed(() => {
           position: absolute;
           top: var(--o-gap-3);
           right: var(--o-gap-3);
-          border-radius: var(--o-radius-xs);
-          @include respond-to('<=pad_v') {
+          border-radius: var(--events-tag-radius);
+          @include respond('<=pad_v') {
             --tag-padding: var(--o-gap-1);
           }
         }
@@ -328,10 +330,10 @@ const list = computed(() => {
           height: 3lh; // 3倍行高
           @include h2;
           @include text-truncate(3);
-          @include respond-to('pad_v') {
+          @include respond('pad_v') {
             @include h1;
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             height: 2lh;
             @include text-truncate(2);
           }
@@ -349,13 +351,13 @@ const list = computed(() => {
           }
 
           @include text1;
-          @include respond-to('pad_v') {
+          @include respond('pad_v') {
             margin-top: var(--o-gap-2);
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             margin-top: var(--o-gap-2);
           }
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: flex;
             align-items: center;
             .o-divider {
@@ -368,7 +370,7 @@ const list = computed(() => {
     }
 
     .event-card {
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--events-card-radius);
       color: rgb(var(--o-white));
       background-size: cover;
       background-repeat: no-repeat;

package/src/components/header/OHeader.vue

@@ -149,9 +149,9 @@ const handleMouseleaveSub = (val: string) => {
 }
 
 .header-wrap-dark {
-  box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
+  box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
   .header-nav-content {
-    box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
+    box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
   }
 }
 </style>