@opendesign-plus/components 0.0.1-rc.6 → 0.0.1-rc.7

package/src/draft/Logo.vue

@@ -1,141 +1,141 @@
-<script setup lang="ts">
-import { computed, type PropType } from 'vue';
-import { ORow, OCol, OLink, OFigure } from '@opensig/opendesign';
-
-import ItemSwiper from '@component/ItemSwiper.vue';
-import ContentWrapper from '@component/ContentWrapper.vue';
-
-import { publisher } from '@/data/logo';
-
-interface ItemLogoT {
-  logo: {
-    [key: string]: string;
-  };
-  href: string;
-  hrefEn: string;
-}
-interface ItemSwiperT {
-  children: ItemLogoT[];
-  reverseDirection: boolean;
-}
-
-defineProps({
-  // 语言
-  lang: {
-    type: String as PropType<'zh' | 'en'>,
-    default: 'zh',
-  },
-  // 风格
-  theme: {
-    type: String as PropType<'light' | 'dark'>,
-    default: 'light',
-  },
-  // 指定在何处显示链接的资源
-  target: {
-    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
-    default: '_blank',
-  },
-});
-
-const total = publisher.length;
-
-const list = computed(() => {
-  const row = total > 15 ? 3 : 2;
-  const num = total / row;
-  let arr = [] as ItemSwiperT[];
-  for (let i = 0; i < row; i++) {
-    arr.push({
-      children: [...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))],
-      reverseDirection: false,
-    });
-    if (i === row - 1) {
-      arr[i].children = [...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))];
-    }
-    if (i % 2 === 1) {
-      arr[i].reverseDirection = true;
-    }
-  }
-  return arr;
-});
-
-const col = computed(() => {
-  let num = 5;
-  if (total < 6) {
-    num = total;
-  } else if (total < 7) {
-    num = 3;
-  } else if (total < 9) {
-    num = 4;
-  }
-  return num;
-});
-</script>
-
-<template>
-  <div class="logo-swiper">
-    <template v-if="total > 10">
-      <ItemSwiper v-for="(item, index) in list" :key="index" :data="item.children"
-        :reverse-direction="item.reverseDirection" :lang="lang" :theme="theme" :target="target"
-        class="partner-swiper" />
-    </template>
-    <template v-else>
-      <ContentWrapper>
-        <ORow gap="24px 24px" wrap="wrap" class="logo-data">
-          <OCol v-for="item in publisher" :key="item.href" :flex="`0 0 ${100 / col}%`">
-            <div class="item-logo">
-              <OLink v-if="item.href || item.hrefEn" :href="lang === 'en' ? item.hrefEn || item.href : item.href"
-                :target="target">
-                <div class="logo-card">
-                  <OFigure :src="item.logo[theme]" />
-                </div>
-              </OLink>
-              <div v-else class="logo-card">
-                <OFigure :src="item.logo[theme]" />
-              </div>
-            </div>
-          </OCol>
-        </ORow>
-      </ContentWrapper>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.logo-swiper {
-  width: 100%;
-  overflow: hidden;
-}
-
-.partner-swiper {
-  &+.partner-swiper {
-    margin-top: 24px;
-
-    @include respond-to('laptop') {
-      margin-top: 20px;
-    }
-
-    @include respond-to('pad_h') {
-      margin-top: 16px;
-    }
-
-    @include respond-to('<=pad_v') {
-      margin-top: 12px;
-    }
-  }
-}
-
-.item-logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
-
-  .o-figure {
-    :deep(img) {
-      width: auto;
-      max-height: 90px;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+import { ORow, OCol, OLink, OFigure } from '@opensig/opendesign';
+
+import ItemSwiper from '@component/ItemSwiper.vue';
+import ContentWrapper from '@component/ContentWrapper.vue';
+
+import { publisher } from '@/data/logo';
+
+interface ItemLogoT {
+  logo: {
+    [key: string]: string;
+  };
+  href: string;
+  hrefEn: string;
+}
+interface ItemSwiperT {
+  children: ItemLogoT[];
+  reverseDirection: boolean;
+}
+
+defineProps({
+  // 语言
+  lang: {
+    type: String as PropType<'zh' | 'en'>,
+    default: 'zh',
+  },
+  // 风格
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+  },
+  // 指定在何处显示链接的资源
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
+    default: '_blank',
+  },
+});
+
+const total = publisher.length;
+
+const list = computed(() => {
+  const row = total > 15 ? 3 : 2;
+  const num = total / row;
+  let arr = [] as ItemSwiperT[];
+  for (let i = 0; i < row; i++) {
+    arr.push({
+      children: [...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))],
+      reverseDirection: false,
+    });
+    if (i === row - 1) {
+      arr[i].children = [...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))];
+    }
+    if (i % 2 === 1) {
+      arr[i].reverseDirection = true;
+    }
+  }
+  return arr;
+});
+
+const col = computed(() => {
+  let num = 5;
+  if (total < 6) {
+    num = total;
+  } else if (total < 7) {
+    num = 3;
+  } else if (total < 9) {
+    num = 4;
+  }
+  return num;
+});
+</script>
+
+<template>
+  <div class="logo-swiper">
+    <template v-if="total > 10">
+      <ItemSwiper v-for="(item, index) in list" :key="index" :data="item.children"
+        :reverse-direction="item.reverseDirection" :lang="lang" :theme="theme" :target="target"
+        class="partner-swiper" />
+    </template>
+    <template v-else>
+      <ContentWrapper>
+        <ORow gap="24px 24px" wrap="wrap" class="logo-data">
+          <OCol v-for="item in publisher" :key="item.href" :flex="`0 0 ${100 / col}%`">
+            <div class="item-logo">
+              <OLink v-if="item.href || item.hrefEn" :href="lang === 'en' ? item.hrefEn || item.href : item.href"
+                :target="target">
+                <div class="logo-card">
+                  <OFigure :src="item.logo[theme]" />
+                </div>
+              </OLink>
+              <div v-else class="logo-card">
+                <OFigure :src="item.logo[theme]" />
+              </div>
+            </div>
+          </OCol>
+        </ORow>
+      </ContentWrapper>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.logo-swiper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.partner-swiper {
+  &+.partner-swiper {
+    margin-top: 24px;
+
+    @include respond-to('laptop') {
+      margin-top: 20px;
+    }
+
+    @include respond-to('pad_h') {
+      margin-top: 16px;
+    }
+
+    @include respond-to('<=pad_v') {
+      margin-top: 12px;
+    }
+  }
+}
+
+.item-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+
+  .o-figure {
+    :deep(img) {
+      width: auto;
+      max-height: 90px;
+    }
+  }
+}
+</style>

package/src/draft/LogoCard.vue

@@ -1,75 +1,75 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { OCard, ORow, OCol, OFigure } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-
-const { lePadV, isPhone } = useScreen();
-
-interface CardT {
-    title: string;
-    content: string;
-    cover: string;
-    time: string;
-}
-
-defineProps({
-    cards: {
-        type: Array as () => CardT[],
-        default: () => [],
-    },
-});
-
-const columns = computed(() => {
-    if (isPhone.value) {
-        return '0 1 100%';
-    } else if (lePadV.value) {
-        return '0 1 50%';
-    }
-    return '0 1 33.3333%';
-});
-
-</script>
-
-<template>
-    <div class="card-wrapper">
-        <ORow gap="var(--grid-column-gutter)">
-            <OCol v-for="(card, index) in cards" :key="index" :flex="columns">
-                <OCard :title="card.title" :detail="card.content" :cover-ratio="16 / 9" :layout="'v'">
-                    <template #cover>
-                        <div class="cover-box">
-                            <OFigure :src="card.cover" alt="Card Cover" class="cover-image" />
-                        </div>
-                    </template>
-                    <template #footer>
-                        <div class="timestamp">
-                            <span class="time">{{ card.time }}</span>
-                        </div>
-                    </template>
-                </OCard>
-            </OCol>
-        </ORow>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.card-wrapper {
-    --grid-column-gutter: var(--o3-gap-6);
-    --card-detail-max-row: 2
-}
-
-.cover-box {
-    height: 100px;
-
-    :deep(.cover-image) {
-        height: 100%;
-    }
-
-    @include respond-to('<=pad_v') {
-        height: 72px;
-    }
-
-    @include respond-to('phone') {
-        height: 68px;
-    }
-}
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OCard, ORow, OCol, OFigure } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+
+const { lePadV, isPhone } = useScreen();
+
+interface CardT {
+    title: string;
+    content: string;
+    cover: string;
+    time: string;
+}
+
+defineProps({
+    cards: {
+        type: Array as () => CardT[],
+        default: () => [],
+    },
+});
+
+const columns = computed(() => {
+    if (isPhone.value) {
+        return '0 1 100%';
+    } else if (lePadV.value) {
+        return '0 1 50%';
+    }
+    return '0 1 33.3333%';
+});
+
+</script>
+
+<template>
+    <div class="card-wrapper">
+        <ORow gap="var(--grid-column-gutter)">
+            <OCol v-for="(card, index) in cards" :key="index" :flex="columns">
+                <OCard :title="card.title" :detail="card.content" :cover-ratio="16 / 9" :layout="'v'">
+                    <template #cover>
+                        <div class="cover-box">
+                            <OFigure :src="card.cover" alt="Card Cover" class="cover-image" />
+                        </div>
+                    </template>
+                    <template #footer>
+                        <div class="timestamp">
+                            <span class="time">{{ card.time }}</span>
+                        </div>
+                    </template>
+                </OCard>
+            </OCol>
+        </ORow>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.card-wrapper {
+    --grid-column-gutter: var(--o3-gap-6);
+    --card-detail-max-row: 2
+}
+
+.cover-box {
+    height: 100px;
+
+    :deep(.cover-image) {
+        height: 100%;
+    }
+
+    @include respond-to('<=pad_v') {
+        height: 72px;
+    }
+
+    @include respond-to('phone') {
+        height: 68px;
+    }
+}
 </style>

package/src/draft/LogoV2.vue

@@ -1,19 +1,19 @@
-<script lang="ts" setup>
-import {} from '@opensig/opendesign';
-
-interface companyT {
-  href: string;
-  hrefEn: string;
-  logo: {
-    dark: string;
-    light: string;
-  };
-}
-defineProps<{
-  logos?: companyT[];
-}>();
-</script>
-<template>
-  <div>logo</div>
-</template>
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import {} from '@opensig/opendesign';
+
+interface companyT {
+  href: string;
+  hrefEn: string;
+  logo: {
+    dark: string;
+    light: string;
+  };
+}
+defineProps<{
+  logos?: companyT[];
+}>();
+</script>
+<template>
+  <div>logo</div>
+</template>
+<style lang="scss" scoped></style>

package/src/draft/MainCard.vue

@@ -1,38 +1,38 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import type { LinkCardItemT } from './OInfoCard.vue';
-import OInfoCard from './OInfoCard.vue';
-
-defineProps({
-  cards: {
-    type: Array as PropType<LinkCardItemT[]>,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="card-list">
-    <OInfoCard v-for="(card, index) in cards" :key="index" :item="card" class="card-item"></OInfoCard>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.card-list {
-  display: grid;
-  grid-template-columns: 3.95fr 6.05fr;
-  gap: var(--o3-gap-6);
-
-  .card-item {
-    &:first-child {
-      grid-row-start: 1;
-      grid-row-end: 3;
-
-      :deep(.o-card-main) {
-        display: flex;
-        justify-content: end;
-      }
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import type { LinkCardItemT } from './OInfoCard.vue';
+import OInfoCard from './OInfoCard.vue';
+
+defineProps({
+  cards: {
+    type: Array as PropType<LinkCardItemT[]>,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="card-list">
+    <OInfoCard v-for="(card, index) in cards" :key="index" :item="card" class="card-item"></OInfoCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  display: grid;
+  grid-template-columns: 3.95fr 6.05fr;
+  gap: var(--o3-gap-6);
+
+  .card-item {
+    &:first-child {
+      grid-row-start: 1;
+      grid-row-end: 3;
+
+      :deep(.o-card-main) {
+        display: flex;
+        justify-content: end;
+      }
+    }
+  }
+}
+</style>