@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/events/OEventsApply.vue

@@ -1,509 +0,0 @@
-<script setup lang="ts">
-import { OIcon } from '@opensig/opendesign';
-import IconChecked from '~icons/events/icon-checked.svg';
-import { type EventsApplyPropsT } from './types.ts';
-import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
-import { useTheme } from '@opendesign-plus/composables';
-
-const { isDark } = useTheme();
-// 局部注册 v-dompurify-html 指令
-const vDompurifyHtml = buildVueDompurifyHTMLDirective();
-
-defineProps<EventsApplyPropsT>();
-</script>
-
-<template>
-  <div class="o-events-apply">
-    <div class="events-apply-grid">
-      <template v-for="(step, idx) in steps" :key="idx">
-        <!-- 移动端序号（grid第1列） -->
-        <div class="timeline-number">
-          <div class="number-circle">{{ idx + 1 }}</div>
-        </div>
-
-        <!-- 卡片内容（grid第2列或桌面端正常位置） -->
-        <div class="step-item" :class="`step-${idx + 1} ${isDark ? 'is-dark' : ''}`" :style="{}">
-          <div class="step-title">
-            <div class="step-idx">{{ idx + 1 }}</div>
-            <span>{{ step.title }}</span>
-          </div>
-          <div class="step-desc">
-            <div v-if="step.desc" v-dompurify-html="step.desc"></div>
-            <slot :name="`step${idx + 1}`"></slot>
-            <div class="desc-list-wrapper">
-              <div class="desc-list-title" v-if="step.listTitle">{{ step.listTitle }}</div>
-              <div class="desc-list-content">
-                <div class="desc-list-item" v-for="(item, itemIdx) in step.list" :key="itemIdx">
-                  <div class="desc-list-item-title">
-                    <OIcon>
-                      <IconChecked />
-                    </OIcon>
-                    <span>{{ item.title }}</span>
-                  </div>
-                  <div class="desc-list-item-desc">{{ item.desc }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="step.img"
-            class="img-wrapper"
-            :style="{
-              backgroundImage: `url(${step.img})`,
-            }"
-          ></div>
-          <div
-            v-if="step.imgPhone"
-            class="img-wrapper-phone"
-            :style="{
-              backgroundImage: `url(${step.imgPhone})`,
-            }"
-          ></div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.o-events-apply {
-  --events-card-radius: var(--o-radius-xs);
-  width: 100%;
-  // 移动端时间线序号
-  .timeline-number {
-    display: none; // 桌面端隐藏
-    @include respond('<=pad_v') {
-      display: flex;
-      align-items: flex-start;
-      padding-top: var(--o-gap-3); // 与 step-title 的 padding 对齐
-      position: relative;
-      grid-column: 1; // 固定在第1列
-
-      .number-circle {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background-color: var(--o-color-primary1);
-        color: #fff;
-        font-size: 12px;
-        line-height: 24px;
-        text-align: center;
-        font-weight: 400;
-        position: relative;
-        z-index: 1;
-      }
-
-      // 连接线（伪元素）
-      &::after {
-        content: '';
-        position: absolute;
-        left: 11px; // 圆圈中心 (24px / 2 - 1px = 11px)
-        top: 44px; // number-circle 下方
-        width: 1px;
-        --height: var(--o-gap-6);
-        height: calc(100% + var(--height) - 40px); // 延伸到下一个元素
-        background-color: var(--o-color-control4);
-        @include respond('laptop') {
-          --height: var(--o-gap-5);
-        }
-        @include respond('pad_h') {
-          --height: var(--o-gap-4);
-        }
-        @include respond('pad_v') {
-          --height: var(--o-gap-5);
-        }
-        @include respond('phone') {
-          --height: var(--o-gap-5);
-        }
-      }
-
-      // 最后一个序号不显示连接线（倒数第2个子元素，因为最后一个是step-item）
-      &:nth-last-child(2)::after {
-        display: none;
-      }
-    }
-  }
-
-  .events-apply-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr); // 桌面端：3列
-    grid-template-rows: repeat(3, auto); // 桌面端：3行
-    gap: var(--o-gap-6);
-    @include respond('laptop') {
-      gap: var(--o-gap-5);
-    }
-    @include respond('pad_h') {
-      gap: var(--o-gap-4);
-    }
-    @include respond('pad_v') {
-      gap: var(--o-gap-5);
-    }
-    @include respond('phone') {
-      gap: var(--o-gap-5);
-    }
-
-    // 移动端：2列布局（序号列 + 内容列）
-    @include respond('<=pad_v') {
-      grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
-      grid-template-rows: auto; // 行数自动
-      gap: var(--o-gap-3); // 列间距12px，行间距12px
-      row-gap: var(--o-gap-6); // 行间距
-
-      @include respond('laptop') {
-        row-gap: var(--o-gap-5);
-      }
-      @include respond('pad_h') {
-        row-gap: var(--o-gap-4);
-      }
-      @include respond('pad_v') {
-        row-gap: var(--o-gap-3);
-      }
-      @include respond('phone') {
-        row-gap: var(--o-gap-3);
-      }
-    }
-
-    .step-item {
-      background: var(--o-color-fill2);
-      border-radius: var(--events-card-radius);
-      display: flex;
-      flex-direction: column; // 垂直排列子元素
-      --idx-size: 20px;
-      --idx-gap: var(--o-gap-3);
-      @include respond('laptop') {
-        --idx-gap: var(--o-gap-2);
-      }
-      @include respond('pad_h') {
-        --idx-gap: var(--o-gap-2);
-      }
-      // 移动端：强制在第2列显示
-      @include respond('<=pad_v') {
-        grid-column: 2 !important;
-        grid-row: auto !important;
-      }
-
-      .step-title {
-        font-weight: 600;
-        color: var(--o-color-info1);
-        margin-bottom: var(--o-gap-4);
-        padding: var(--o-gap-5) var(--o-gap-6) 0 var(--o-gap-6);
-        display: flex;
-        align-items: center;
-        @include h2;
-        @include respond('laptop') {
-          margin-bottom: var(--o-gap-3);
-          padding: var(--o-gap-4) var(--o-gap-5) 0 var(--o-gap-5);
-        }
-        @include respond('pad_h') {
-          margin-bottom: var(--o-gap-2);
-          padding: var(--o-gap-3) var(--o-gap-4) 0 var(--o-gap-4);
-        }
-        @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('phone') {
-          margin-bottom: 0;
-          padding: var(--o-gap-3) var(--o-gap-4);
-          border-bottom: 1px solid var(--o-color-control4);
-          @include text1;
-        }
-
-        .step-idx {
-          margin-right: var(--idx-gap);
-          width: var(--idx-size);
-          height: var(--idx-size);
-          font-size: 12px;
-          line-height: 20px;
-          border-radius: 50%;
-          background-color: var(--o-color-primary1);
-          color: #fff;
-          text-align: center;
-          font-weight: 600;
-          @include respond('pad_v') {
-            display: none;
-          }
-          @include respond('phone') {
-            display: none;
-          }
-        }
-      }
-
-      .step-desc {
-        color: var(--o-color-info2);
-        padding: 0 var(--o-gap-6) var(--o-gap-4) var(--o-gap-6);
-        @include tip1;
-        @include respond('laptop') {
-          padding: 0 var(--o-gap-5) var(--o-gap-3) var(--o-gap-5);
-        }
-        @include respond('pad_h') {
-          padding: 0 var(--o-gap-4) var(--o-gap-3) var(--o-gap-4);
-        }
-        @include respond('pad_v') {
-          padding: var(--o-gap-3) var(--o-gap-4);
-        }
-        @include respond('phone') {
-          padding: var(--o-gap-3) var(--o-gap-4);
-        }
-
-        .desc-list-wrapper {
-          @include tip1;
-        }
-
-        .desc-list-title {
-          padding-left: calc(var(--idx-size) + var(--idx-gap));
-          @include respond('<=pad_v') {
-            display: none;
-          }
-        }
-
-        .desc-list-content {
-          .desc-list-item {
-            margin-top: var(--o-gap-1);
-            font-weight: 400;
-          }
-
-          .desc-list-item-title {
-            display: flex;
-            align-items: center;
-
-            .o-icon {
-              font-size: 16px;
-              margin-right: var(--o-gap-4);
-              color: #fff;
-              @include respond('laptop') {
-                margin-right: var(--o-gap-3);
-              }
-              @include respond('pad_h') {
-                margin-right: var(--o-gap-2);
-              }
-              @include respond('pad_v') {
-                margin-right: var(--o-gap-2);
-              }
-              @include respond('phone') {
-                margin-right: var(--o-gap-2);
-              }
-
-              svg path {
-                fill: currentColor;
-              }
-            }
-
-            span {
-              font-weight: 600;
-            }
-          }
-
-          .desc-list-item-desc {
-            font-weight: 400;
-            --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('laptop') {
-              --padding-left: var(--o-gap-3);
-            }
-            @include respond('pad_h') {
-              --padding-left: var(--o-gap-2);
-            }
-            @include respond('pad_v') {
-              padding-left: var(--o-gap-5);
-            }
-            @include respond('phone') {
-              padding-left: var(--o-gap-5);
-            }
-          }
-        }
-      }
-
-      .img-wrapper,
-      .img-wrapper-phone {
-        background-position: center bottom;
-        margin-top: auto; // 将元素推到父容器底部
-        background-size: contain;
-        background-repeat: no-repeat;
-      }
-
-      .img-wrapper {
-        @include respond('<=pad_v') {
-          display: none;
-        }
-      }
-
-      .img-wrapper-phone {
-        @include respond('>pad_v') {
-          display: none;
-        }
-      }
-
-      &.step-1 {
-        .step-desc {
-          @include respond('>pad_v') {
-            padding-bottom: 0;
-          }
-        }
-
-        .img-wrapper {
-          height: 130px;
-        }
-
-        &.is-dark {
-          .img-wrapper {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &.step-2 {
-        .step-desc {
-          @include respond('>pad_v') {
-            padding-bottom: 0;
-          }
-        }
-
-        .img-wrapper {
-          height: 136px;
-        }
-
-        &.is-dark {
-          .img-wrapper {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &.step-3 {
-        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, 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;
-        }
-
-        .img-wrapper {
-          height: 280px;
-          --width: var(--o-gap-6);
-          width: calc(100% - var(--width) * 2);
-          margin-left: auto;
-          margin-right: auto;
-          @include respond('laptop') {
-            --width: var(--o-gap-5);
-          }
-          @include respond('pad_h') {
-            --width: var(--o-gap-4);
-            height: 220px;
-          }
-          @include respond('pad_v') {
-            --width: var(--o-gap-5);
-          }
-          @include respond('phone') {
-            --width: var(--o-gap-5);
-          }
-        }
-
-        .img-wrapper-phone {
-          height: 66px;
-          width: calc(100% - 24px);
-          margin: 0 12px 12px;
-        }
-      }
-
-      &.step-4 {
-        position: relative;
-        padding-right: 292px;
-        @include respond('pad_h') {
-          padding-right: 192px;
-        }
-        @include respond('<=pad_v') {
-          padding-right: 0;
-        }
-
-        .step-desc {
-          padding-bottom: var(--o-gap-5);
-          @include respond('laptop') {
-            padding-bottom: var(--o-gap-4);
-          }
-          @include respond('<=pad') {
-            padding-bottom: var(--o-gap-3);
-          }
-        }
-
-        .img-wrapper {
-          width: 226px;
-          height: 116px;
-          position: absolute;
-          bottom: 0;
-          right: 0;
-        }
-
-        &.is-dark {
-          .img-wrapper {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &.step-5 {
-
-        .step-desc {
-          padding-bottom: var(--o-gap-5);
-        }
-      }
-    }
-
-    // 卡片1: 第1行第1列
-    .step-1 {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    // 卡片2: 第1行第2列
-    .step-2 {
-      grid-row: 1;
-      grid-column: 2;
-    }
-
-    // 卡片3: 跨3行，占据第3列
-    .step-3 {
-      grid-row: 1 / 4; // 从第1行到第4行（跨3行）
-      grid-column: 3;
-    }
-
-    // 卡片4: 第2行，占据第1-2列
-    .step-4 {
-      grid-row: 2;
-      grid-column: 1 / 3; // 从第1列到第3列（占2列）
-    }
-
-    // 卡片5: 第3行，占据第1-2列
-    .step-5 {
-      grid-row: 3;
-      grid-column: 1 / 3;
-    }
-  }
-}
-
-</style>