@opendesign-plus/components 0.0.1-rc.10

package/src/components/events/OEventsApply.vue

@@ -0,0 +1,419 @@
+<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 {
+  width: 100%;
+  // 移动端时间线序号
+  .timeline-number {
+    display: none; // 桌面端隐藏
+    @include respond-to('<=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);
+      }
+
+      // 最后一个序号不显示连接线（倒数第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);
+
+    // 移动端：2列布局（序号列 + 内容列）
+    @include respond-to('<=pad_v') {
+      grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
+      grid-template-rows: auto; // 行数自动
+      gap: 0 var(--o-gap-3); // 列间距12px，行间距0
+      row-gap: var(--o-gap-6); // 行间距
+    }
+
+    .step-item {
+      background: var(--o-color-fill2);
+      border-radius: var(--o-radius-xs);
+      display: flex;
+      flex-direction: column; // 垂直排列子元素
+      --idx-size: 20px;
+      --idx-gap: var(--o-gap-3);
+      // 移动端：强制在第2列显示
+      @include respond-to('<=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-to('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') {
+          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: 400;
+          @include respond-to('pad_v') {
+            display: none;
+          }
+          @include respond-to('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-to('pad_v') {
+          padding: var(--o-gap-3) var(--o-gap-4);
+        }
+        @include respond-to('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-to('<=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-to('pad_v') {
+                margin-right: var(--o-gap-2);
+              }
+              @include respond-to('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-to('pad_v') {
+              padding-left: var(--o-gap-5);
+              color: var(--o-color-info2);
+            }
+            @include respond-to('phone') {
+              padding-left: var(--o-gap-5);
+              color: var(--o-color-info2);
+            }
+          }
+        }
+      }
+
+      .img-wrapper,
+      .img-wrapper-phone {
+        background-position: center bottom;
+        margin-top: auto; // 将元素推到父容器底部
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+
+      .img-wrapper {
+        @include respond-to('<=pad_v') {
+          display: none;
+        }
+      }
+
+      .img-wrapper-phone {
+        @include respond-to('>pad_v') {
+          display: none;
+        }
+      }
+
+      &.step-1 {
+        .step-desc {
+          @include respond-to('>pad_v') {
+            padding-bottom: 0;
+          }
+        }
+
+        .img-wrapper {
+          height: 130px;
+        }
+
+        &.is-dark {
+          .img-wrapper {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      &.step-2 {
+        .step-desc {
+          @include respond-to('>pad_v') {
+            padding-bottom: 0;
+          }
+        }
+
+        .img-wrapper {
+          height: 136px;
+        }
+
+        &.is-dark {
+          .img-wrapper {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      &.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, 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: calc(100% - var(--o-gap-6) * 2);
+          margin-left: auto;
+          margin-right: auto;
+        }
+
+        .img-wrapper-phone {
+          height: 66px;
+          width: calc(100% - 24px);
+          margin: 0 12px 12px;
+        }
+      }
+
+      &.step-4 {
+        position: relative;
+        padding-right: 292px;
+        @include respond-to('pad_h') {
+          padding-right: 192px;
+        }
+        @include respond-to('<=pad_v') {
+          padding-right: var(--o-gap-4);
+        }
+
+        .step-desc {
+          padding-bottom: var(--o-gap-5);
+        }
+
+        .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>