@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

package/src/components/element-plus/OElCookieNotice.vue

@@ -25,7 +25,7 @@ const emits = defineEmits<{
   (e: 'update:visible', value: boolean): void;
 }>();
 
-const { lePadV, isPhone } = useScreen();
+const { lePadV } = useScreen();
 const { locale, t } = useI18n();
 const isZh = computed(() => locale.value === 'zh');
 
@@ -291,7 +291,7 @@ defineExpose({
 }
 
 .cookie-notice-content {
-  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  background-color: rgba(var(--o-grey-1), 0.9);
   backdrop-filter: blur(5px);
   box-shadow: var(--o-shadow-1);
 }
@@ -304,13 +304,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px var(--layout-content-padding);
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     padding: 8px var(--layout-content-padding);
   }
   @media (max-width: 840px) {
     padding: 16px var(--layout-content-padding);
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px var(--layout-content-padding);
   }
   &:not([type='zh']) {
@@ -327,13 +327,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px 0;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     padding: 8px 0;
   }
   @media (max-width: 840px) {
     padding: 16px 0;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px 0;
   }
   &:not([type='zh']) {
@@ -353,13 +353,13 @@ defineExpose({
   @media (max-width: 1680px) {
     font-size: 14px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     text-align: center;
   }
 }
 
 .cookie-en-title {
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-left: auto;
   }
 }
@@ -369,7 +369,7 @@ defineExpose({
   line-height: 22px;
   margin-right: 8px;
   text-align: start;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     font-size: 12px;
     line-height: 18px;
   }
@@ -379,7 +379,7 @@ defineExpose({
   display: flex;
   width: 100%;
   margin-top: 8px;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     flex-direction: column;
   }
 }
@@ -394,10 +394,10 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     margin-right: 40px;
   }
-  @include respond-to('pad') {
+  @include respond('pad') {
     margin-right: 24px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin: 0;
   }
 }
@@ -411,7 +411,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-left: 12px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-left: 8px;
     }
     @media (min-width: 841px) {
@@ -419,7 +419,7 @@ defineExpose({
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-top: 16px;
     width: 100%;
     display: grid;
@@ -464,7 +464,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       margin-top: 12px;
     }
     &:nth-child(2) {
@@ -485,7 +485,7 @@ defineExpose({
         @media (1680px >= width >= 1201px) {
           font-size: 18px;
         }
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           font-size: 16px;
         }
       }
@@ -494,7 +494,7 @@ defineExpose({
         font-size: 14px;
         color: var(--o-color-info3);
         margin-left: 24px;
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           font-size: 12px;
         }
       }
@@ -508,7 +508,7 @@ defineExpose({
         margin-top: 12px;
         font-size: 14px;
       }
-      @include respond-to('<=pad') {
+      @include respond('<=pad') {
         margin-top: 8px;
       }
       @media (max-width: 840px) {
@@ -524,7 +524,7 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     font-size: 20px;
   }
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     font-size: 18px;
   }
 }
@@ -550,29 +550,29 @@ defineExpose({
 }
 
 :deep(.el-dialog) {
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --el-dialog-width: 100vw;
   }
   &.grid-width-dlg {
-    @include respond-to('>pad') {
+    @include respond('>pad') {
       --el-dialog-width: var(--grid-14);
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --el-dialog-width: var(--grid-8);
     }
   }
 }
 
 :deep(.el-dialog) {
-  --el-bg-color: var(--o-color-control-light);
+  --el-bg-color: var(--o-color-control5-light);
   --el-dialog-padding-primary: 32px;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     --el-dialog-padding-primary: 24px;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     --el-dialog-padding-primary: 16px;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     --el-dialog-padding-primary: 16px 24px;
   }
   .el-dialog__header {
@@ -586,7 +586,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond-to('<=pad_h') {
+    @include respond('<=pad_h') {
       margin-top: 12px;
     }
     .el-button+.el-button {

package/src/components/events/OEventsApply.vue

@@ -71,7 +71,7 @@ defineProps<EventsApplyPropsT>();
   // 移动端时间线序号
   .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 +118,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
@@ -132,7 +132,7 @@ defineProps<EventsApplyPropsT>();
       --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 +145,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 +169,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 +182,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 +195,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 +214,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 +236,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 +255,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 +286,7 @@ defineProps<EventsApplyPropsT>();
 
       &.step-2 {
         .step-desc {
-          @include respond-to('>pad_v') {
+          @include respond('>pad_v') {
             padding-bottom: 0;
           }
         }
@@ -305,31 +303,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 +349,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

@@ -248,10 +248,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;
       }
     }
@@ -260,10 +260,10 @@ 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') {
+    @include respond('pad_v') {
       --collapse-radius: var(--o-radius_control-l);
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       --collapse-radius: var(--o-radius_control-l);
     }
 
@@ -271,7 +271,7 @@ const getIcon = (item: CalendarItemT) => {
       .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 +298,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 +317,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 +325,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 +350,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 +364,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 +446,7 @@ const getIcon = (item: CalendarItemT) => {
     );
 
     --event-gap: 6px;
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --event-gap: var(--o-gap-1);
     }
     // 跨月事件布局：Grid
@@ -507,7 +507,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 +549,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;
         }
       }