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

package/src/components/OBanner.vue

@@ -1,390 +1,398 @@
-<script setup lang="ts">
-import { OButton, OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
-import { computed, ref } from 'vue';
-
-import { useScreen, useTheme } from '@opendesign-plus/composables';
-import ContentWrapper from './common/ContentWrapper.vue';
-
-const props = defineProps({
-  options: undefined,
-  size: 'large',
-  contentJustifyCenter: false,
-});
-
-const { isLight } = useTheme('opendesignplus', document.domain || 'localhost');
-const { isPhone } = useScreen();
-
-const bannerInfo = computed(() => props.options);
-
-// 主题切换
-const theme = ref('');
-const onBeforeChange = (idx: number) => {
-  setTimeout(() => {
-    theme.value = bannerInfo.value[idx].bg_theme ?? 'light';
-  }, 100);
-};
-
-// banner跳转
-const onClick = (href: string, hasBtn: boolean | undefined) => {
-  if (href && !hasBtn) {
-    window.open(href);
-  }
-};
-</script>
-
-<template>
-  <div :class="['home-banner', size]">
-    <div v-if="size === 'tiny'">
-      {{ bannerInfo[1].title }}
-    </div>
-
-    <OCarousel
-      v-else-if="!isPhone"
-      class="banner-carousel"
-      effect="toggle"
-      active-class="current-slide"
-      indicator-click
-      :auto-play="true"
-      :data-o-theme="theme"
-      @before-change="onBeforeChange"
-    >
-      <OCarouselItem v-for="(info, index) in bannerInfo" :key="index" class="banner-item" :class="`banner-item${index}`">
-        <OFigure
-          class="banner-bg"
-          :src="info.bg"
-          :class="{
-            'with-sticky-bg': info.withStickyBg,
-            'in-dark': !isLight,
-            'cursor-pointer': info.href && !info.btn,
-          }"
-          :style="{
-            '--pad-offset': info.pad_offset,
-          }"
-          @click="onClick(info.href, info.btn)"
-        >
-          <ContentWrapper class="banner-wrapper" :class="['banner-wrapper', contentJustifyCenter ? 'content-center' : '']">
-            <div class="banner-content">
-              <img v-if="!isPhone && info.attach" :src="info.attach" class="banner-attach" />
-
-              <!-- 标题 -->
-              <div class="banner-title" v-if="info.title">{{ info.title }}</div>
-              <!-- 副标题 -->
-              <div class="banner-subtitle" v-if="info.subtitle">{{ info.subtitle }}</div>
-              <div
-                class="banner-text"
-                v-if="info.bg_text"
-                :style="{
-                  backgroundImage: `url(${info.bg_text})`,
-                  '--pc-width': info.pc_text_width,
-                  '--pc-height': info.pc_text_height,
-                  '--pad-width': info.pad_text_width,
-                  '--pad-height': info.pad_text_height,
-                }"
-              ></div>
-              <!-- 操作按钮 -->
-              <div v-if="info.btn" class="banner-opts">
-                <OButton :href="info.href" target="_blank" variant="solid" color="primary" :size="size">
-                  {{ info.btn }}
-                </OButton>
-              </div>
-            </div>
-          </ContentWrapper>
-        </OFigure>
-      </OCarouselItem>
-    </OCarousel>
-
-    <OCarousel
-      v-else="isPhone"
-      class="banner-carousel"
-      effect="gallery"
-      indicator-click
-      :data-o-theme="theme"
-      arrow="never"
-      :auto-play="true"
-      @before-change="onBeforeChange"
-    >
-      <OCarouselItem v-for="(info, index) in bannerInfo" class="banner-item" :class="`banner-item${index}`">
-        <ContentWrapper class="banner-wrapper">
-          <OFigure class="banner-bg" :src="info.bg" @click="onClick(info.href)" />
-        </ContentWrapper>
-      </OCarouselItem>
-    </OCarousel>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.home-banner {
-  overflow: hidden;
-  position: relative;
-
-  &.tiny {
-    @include display2;
-    font-weight: 500;
-    margin: var(--o-gap-8) 0;
-    color: var(--o-color-info1);
-  }
-
-  .banner-title {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    font-size: 48px; // 基础字体大小
-    margin-bottom: 8px;
-  }
-
-  .banner-subtitle {
-    color: var(--o-color-info1);
-    margin-top: 8px;
-    font-size: 16px;
-  }
-
-  .banner-text {
-    height: var(--pc-height);
-    width: var(--pc-width);
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    @include respond-to('pad') {
-      height: var(--pad-height);
-      width: var(--pad-width);
-    }
-  }
-
-  &.large {
-    --banner-height: 460px;
-    height: var(--banner-height);
-
-    .banner-title {
-      @include display1;
-    }
-
-    .banner-subtitle {
-      @include h4;
-    }
-
-    @include respond-to('laptop-pc_s') {
-      --banner-height: 400px;
-    }
-
-    @include respond-to('pad_h') {
-      --banner-height: 360px;
-    }
-
-    @include respond-to('<=pad_v') {
-      --banner-height: 184px;
-    }
-  }
-
-  &.medium {
-    --banner-height: 360px;
-    height: var(--banner-height);
-
-    .banner-title {
-      @include display2;
-    }
-
-    .banner-subtitle {
-      @include text2;
-    }
-
-    @include respond-to('laptop-pc_s') {
-      --banner-height: 280px;
-    }
-
-    @include respond-to('pad_h') {
-      --banner-height: 220px;
-    }
-
-    @include respond-to('<=pad_v') {
-      --banner-height: 120px;
-    }
-
-    .banner-text {
-      --pc-height: 100px !important;
-      --pc-width: 500px !important;
-
-      @include respond-to('pad') {
-        --pc-height: 60px !important;
-        --pc-width: 300px !important;
-      }
-    }
-  }
-
-  &.small {
-    --banner-height: 280px;
-    height: var(--banner-height);
-
-    .banner-title {
-      @include display2;
-    }
-
-    .banner-subtitle {
-      @include text2;
-    }
-
-    @include respond-to('laptop-pc_s') {
-      --banner-height: 220px;
-    }
-
-    @include respond-to('pad_h') {
-      --banner-height: 180px;
-    }
-
-    @include respond-to('<=pad_v') {
-      display: none;
-    }
-
-    .banner-text {
-      --pc-height: 80px !important;
-      --pc-width: 400px !important;
-
-      @include respond-to('pad') {
-        --pc-height: 50px !important;
-        --pc-width: 250px !important;
-      }
-    }
-  }
-
-  :deep(.o-btn) {
-    border-radius: var(--btn-height);
-  }
-}
-
-.banner-carousel {
-  width: 100%;
-  height: 100%;
-  @include respond-to('>pad_v') {
-    --carousel-indicator-offset: 53px;
-  }
-
-  @include respond-to('<=pad_v') {
-    --carousel-indicator-offset: 1px;
-  }
-
-  :deep(.o-carousel-indicator-bar) {
-    height: 24px;
-  }
-}
-
-.banner-item {
-  width: 100%;
-  height: 100%;
-}
-
-.banner-bg {
-  width: 100%;
-  height: 100%;
-
-  :deep(.o-figure-img) {
-    width: 100%;
-    height: 100%;
-  }
-
-  @include respond-to('pad') {
-    :deep(.o-figure-img) {
-      transition: object-position 0.3s ease;
-      object-position: var(--pad-offset);
-    }
-  }
-
-  @include respond-to('phone') {
-    --figure-radius: 4px;
-  }
-}
-
-.banner-wrapper {
-  height: 100%;
-
-  &.content-center {
-    display: flex;
-    justify-content: center;
-
-    & .banner-content {
-      align-items: center;
-    }
-  }
-}
-
-.banner-content {
-  height: 100%;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  position: relative;
-}
-
-.banner-opts {
-  margin-top: 24px;
-  --d: 20px;
-}
-
-@keyframes fade-up {
-  from {
-    transform: translateY(var(--d));
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.current-slide {
-  .banner-title {
-    animation: fade-up 400ms ease-in;
-  }
-  .banner-subtitle {
-    animation: fade-up 400ms ease-in;
-  }
-  .banner-text {
-    animation: fade-up 400ms ease-in;
-  }
-  .banner-opts {
-    animation: fade-up 400ms ease-in;
-  }
-}
-
-.in-dark.with-sticky-bg {
-  :deep(.o-figure-img) {
-    @include img-in-dark;
-  }
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-</style>
-
-<style lang="scss" scoped>
-// 定制修改item1
-.banner-item0 {
-  .banner-attach {
-    height: 120px;
-
-    @include respond-to('pad') {
-      height: 80px;
-    }
-  }
-}
-
-.banner-item1 {
-  .banner-attach {
-    height: 156px;
-
-    @include respond-to('pad') {
-      height: 120px;
-    }
-  }
-}
-
-// 定制修改item2
-.banner-item2 {
-  .banner-content {
-    width: 100%;
-    justify-content: center;
-  }
-  .banner-attach {
-    height: 38%;
-    margin-top: -60px;
-    object-fit: contain;
-  }
-}
-</style>
+<script setup lang="ts">
+import { OButton, OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
+import { computed, ref } from 'vue';
+
+import { useScreen, useTheme } from '@opendesign-plus/composables';
+import ContentWrapper from './common/ContentWrapper.vue';
+
+const props = withDefaults(defineProps<{
+  options: any;
+  size: string;
+  contentJustifyCenter: boolean;
+}>(), {
+  options: undefined,
+  size: 'large',
+  contentJustifyCenter: false,
+});
+
+const { isLight } = useTheme('opendesignplus', document.domain || 'localhost');
+const { isPhone } = useScreen();
+
+const bannerInfo = computed(() => props.options);
+
+// 主题切换
+const theme = ref('');
+const onBeforeChange = (idx: number) => {
+  setTimeout(() => {
+    theme.value = bannerInfo.value[idx].bg_theme ?? 'light';
+  }, 100);
+};
+
+// banner跳转
+const onClick = (href: string, hasBtn: boolean | undefined) => {
+  if (href && !hasBtn) {
+    window.open(href);
+  }
+};
+</script>
+
+<template>
+  <div :class="['home-banner', size]">
+    <div v-if="size === 'tiny'">
+      {{ bannerInfo[1].title }}
+    </div>
+
+    <OCarousel
+      v-else-if="!isPhone"
+      class="banner-carousel"
+      effect="toggle"
+      active-class="current-slide"
+      indicator-click
+      :auto-play="true"
+      :data-o-theme="theme"
+      @before-change="onBeforeChange"
+    >
+      <OCarouselItem v-for="(info, index) in bannerInfo" :key="index" class="banner-item" :class="`banner-item${index}`">
+        <OFigure
+          class="banner-bg"
+          :src="info.bg"
+          :class="{
+            'with-sticky-bg': info.withStickyBg,
+            'in-dark': !isLight,
+            'cursor-pointer': info.href && !info.btn,
+          }"
+          :style="{
+            '--pad-offset': info.pad_offset,
+          }"
+          @click="onClick(info.href, info.btn)"
+        >
+          <ContentWrapper class="banner-wrapper" :class="['banner-wrapper', contentJustifyCenter ? 'content-center' : '']">
+            <div class="banner-content">
+              <img v-if="!isPhone && info.attach" :src="info.attach" class="banner-attach" />
+
+              <!-- 标题 -->
+              <div class="banner-title" v-if="info.title">{{ info.title }}</div>
+              <!-- 副标题 -->
+              <div class="banner-subtitle" v-if="info.subtitle">{{ info.subtitle }}</div>
+              <div
+                class="banner-text"
+                v-if="info.bg_text"
+                :style="{
+                  backgroundImage: `url(${info.bg_text})`,
+                  '--pc-width': info.pc_text_width,
+                  '--pc-height': info.pc_text_height,
+                  '--pad-width': info.pad_text_width,
+                  '--pad-height': info.pad_text_height,
+                }"
+              ></div>
+              <!-- 操作按钮 -->
+              <div v-if="info.btn" class="banner-opts">
+                <OButton :href="info.href" target="_blank" variant="solid" color="primary" :size="size">
+                  {{ info.btn }}
+                </OButton>
+              </div>
+            </div>
+          </ContentWrapper>
+        </OFigure>
+      </OCarouselItem>
+    </OCarousel>
+
+    <OCarousel
+      v-else-if="isPhone"
+      class="banner-carousel"
+      effect="gallery"
+      indicator-click
+      :data-o-theme="theme"
+      arrow="never"
+      :auto-play="true"
+      @before-change="onBeforeChange"
+    >
+      <OCarouselItem
+        v-for="(info, index) in bannerInfo"
+        class="banner-item"
+        :class="`banner-item${index}`"
+        :key="index">
+        <ContentWrapper class="banner-wrapper">
+          <OFigure class="banner-bg" :src="info.bg" @click="onClick(info.href)" />
+        </ContentWrapper>
+      </OCarouselItem>
+    </OCarousel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home-banner {
+  overflow: hidden;
+  position: relative;
+
+  &.tiny {
+    @include display2;
+    font-weight: 500;
+    margin: var(--o-gap-8) 0;
+    color: var(--o-color-info1);
+  }
+
+  .banner-title {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    font-size: 48px; // 基础字体大小
+    margin-bottom: 8px;
+  }
+
+  .banner-subtitle {
+    color: var(--o-color-info1);
+    margin-top: 8px;
+    font-size: 16px;
+  }
+
+  .banner-text {
+    height: var(--pc-height);
+    width: var(--pc-width);
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    @include respond-to('pad') {
+      height: var(--pad-height);
+      width: var(--pad-width);
+    }
+  }
+
+  &.large {
+    --banner-height: 460px;
+    height: var(--banner-height);
+
+    .banner-title {
+      @include display1;
+    }
+
+    .banner-subtitle {
+      @include h4;
+    }
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 400px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 360px;
+    }
+
+    @include respond-to('<=pad_v') {
+      --banner-height: 184px;
+    }
+  }
+
+  &.medium {
+    --banner-height: 360px;
+    height: var(--banner-height);
+
+    .banner-title {
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 280px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 220px;
+    }
+
+    @include respond-to('<=pad_v') {
+      --banner-height: 120px;
+    }
+
+    .banner-text {
+      --pc-height: 100px !important;
+      --pc-width: 500px !important;
+
+      @include respond-to('pad') {
+        --pc-height: 60px !important;
+        --pc-width: 300px !important;
+      }
+    }
+  }
+
+  &.small {
+    --banner-height: 280px;
+    height: var(--banner-height);
+
+    .banner-title {
+      @include display2;
+    }
+
+    .banner-subtitle {
+      @include text2;
+    }
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 220px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 180px;
+    }
+
+    @include respond-to('<=pad_v') {
+      display: none;
+    }
+
+    .banner-text {
+      --pc-height: 80px !important;
+      --pc-width: 400px !important;
+
+      @include respond-to('pad') {
+        --pc-height: 50px !important;
+        --pc-width: 250px !important;
+      }
+    }
+  }
+
+  :deep(.o-btn) {
+    border-radius: var(--btn-height);
+  }
+}
+
+.banner-carousel {
+  width: 100%;
+  height: 100%;
+  @include respond-to('>pad_v') {
+    --carousel-indicator-offset: 53px;
+  }
+
+  @include respond-to('<=pad_v') {
+    --carousel-indicator-offset: 1px;
+  }
+
+  :deep(.o-carousel-indicator-bar) {
+    height: 24px;
+  }
+}
+
+.banner-item {
+  width: 100%;
+  height: 100%;
+}
+
+.banner-bg {
+  width: 100%;
+  height: 100%;
+
+  :deep(.o-figure-img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include respond-to('pad') {
+    :deep(.o-figure-img) {
+      transition: object-position 0.3s ease;
+      object-position: var(--pad-offset);
+    }
+  }
+
+  @include respond-to('phone') {
+    --figure-radius: 4px;
+  }
+}
+
+.banner-wrapper {
+  height: 100%;
+
+  &.content-center {
+    display: flex;
+    justify-content: center;
+
+    & .banner-content {
+      align-items: center;
+    }
+  }
+}
+
+.banner-content {
+  height: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.banner-opts {
+  margin-top: 24px;
+  --d: 20px;
+}
+
+@keyframes fade-up {
+  from {
+    transform: translateY(var(--d));
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.current-slide {
+  .banner-title {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-subtitle {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-text {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-opts {
+    animation: fade-up 400ms ease-in;
+  }
+}
+
+.in-dark.with-sticky-bg {
+  :deep(.o-figure-img) {
+    @include img-in-dark;
+  }
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" scoped>
+// 定制修改item1
+.banner-item0 {
+  .banner-attach {
+    height: 120px;
+
+    @include respond-to('pad') {
+      height: 80px;
+    }
+  }
+}
+
+.banner-item1 {
+  .banner-attach {
+    height: 156px;
+
+    @include respond-to('pad') {
+      height: 120px;
+    }
+  }
+}
+
+// 定制修改item2
+.banner-item2 {
+  .banner-content {
+    width: 100%;
+    justify-content: center;
+  }
+  .banner-attach {
+    height: 38%;
+    margin-top: -60px;
+    object-fit: contain;
+  }
+}
+</style>