@opendesign-plus/components 0.0.1-rc.10

package/src/components/OFooter.vue

@@ -0,0 +1,576 @@
+<script setup lang="ts">
+import { ODivider } from '@opensig/opendesign';
+
+import ContentWrapper from './common/ContentWrapper.vue';
+
+const props = withDefaults(defineProps<{
+  simple: any;
+  atom: any;
+  lang: any;
+  quickNav: any;
+  friendshipLink: any;
+  footerLogo: any;
+  footerOption: any;
+  qrcode: any;
+  footerBg: any;
+}>(), {
+  simple: false,
+  atom: undefined,
+  lang: undefined,
+  quickNav: undefined,
+  friendshipLink: undefined,
+  footerLogo: undefined,
+  footerOption: undefined,
+  qrcode: undefined,
+  footerBg: undefined,
+});
+</script>
+
+<template>
+  <div :class="[props.simple ? 'app-footer-simple' : 'app-footer']">
+    <!-- 全局列表式导航 -->
+    <template v-if="!props.simple">
+      <!-- 网站信息 -->
+      <ContentWrapper v-if="$slots.atom || props.atom">
+        <slot name="atom">
+          <div v-if="props.atom" class="atom">
+            <p class="atom-text">{{ props.atom[props.lang].title }}</p>
+            <a :href="props.atom[props.lang].href" target="_blank">
+              <img :src="props.atom[props.lang].img" class="atom-logo" alt="" />
+            </a>
+          </div>
+          <ODivider class="atom-divider" />
+        </slot>
+      </ContentWrapper>
+      <div class="footer-content" :style="{ backgroundImage: `url(${props.footerBg})` }">
+        <ContentWrapper>
+          <!-- 导航链接 -->
+          <template v-if="$slots.quickNav || props.quickNav">
+            <slot name="quickNav">
+              <div v-if="props.quickNav" class="quick-nav">
+                <div v-for="category in props.quickNav[props.lang]" :key="category.title" class="category">
+                  <div class="category-title">
+                    {{ category.title }}
+                  </div>
+                  <ul class="navs">
+                    <li v-for="nav in category.list" :key="nav.title" class="nav">
+                      <a :href="nav.link" target="_blank" rel="noopener noreferrer">{{ nav.title }}</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </slot>
+          </template>
+          <!-- 友情链接 -->
+          <template v-if="$slots.friendshipLink || props.friendshipLink">
+            <slot name="friendshipLink">
+              <div v-if="props.friendshipLink" class="friendship-link">
+                <div class="friendship-link-title">
+                  {{ props.friendshipLink.title[props.lang] }}
+                </div>
+                <div class="friendship-link-box">
+                  <a v-for="link in props.friendshipLink.link[props.lang]" :href="link.link" :key="link.link" target="_blank">{{ link.title }}</a>
+                </div>
+              </div>
+            </slot>
+          </template>
+          <!-- 底部信息 版权、隐私声明、联系方式 -->
+          <slot name="footer">
+            <div class="inner" :class="{ 'inner-en': props.lang === 'en' }">
+              <div v-if="props.footerLogo" class="footer-logo">
+                <img class="show-pc" :src="props.footerLogo.logo" alt="" />
+                <img class="show-mo" :src="props.footerLogo.logoMb" alt="" />
+                <p>
+                  <a class="email" :href="`mailto:${props.footerLogo.email}`" target="_blank">{{ props.footerLogo.email }}</a>
+                </p>
+              </div>
+              <div v-if="props.footerOption" class="footer-option">
+                <div class="footer-option-item">
+                  <template v-for="(link, index) in props.footerOption[props.lang].link" :key="link.url">
+                    <a target="_blank" :href="link.url">{{ link.name }}</a>
+                    <ODivider
+                      v-if="index !== props.footerOption[props.lang].link.length - 1"
+                      :style="{
+                        '--o-divider-bd-color': 'var(--o-color-info3-inverse)',
+                        '--o-divider-label-gap': '0 8px',
+                      }"
+                      direction="v"
+                    />
+                  </template>
+                </div>
+                <p class="license">
+                  <span>{{ props.footerOption[props.lang].licenseText }}</span>
+                  {{ props.footerOption[props.lang].licenseInfo }}
+                </p>
+                <div class="copyright">
+                  <p>{{ props.footerOption[props.lang].copyright }}</p>
+                  <div class="filing">
+                    <a :href="props.footerOption[props.lang].beianLink" target="_blank">
+                      {{ props.footerOption[props.lang].beianInfo1 }}
+                    </a>
+                    <img :src="props.footerOption[props.lang].policeIcon" class="filing-img" />
+                    <p>{{ props.footerOption[props.lang].beianInfo2 }}</p>
+                  </div>
+                </div>
+              </div>
+              <div v-if="props.qrcode" class="footer-right">
+                <div v-if="props.lang === 'zh'" class="code-box">
+                  <div v-for="(item, index) in props.qrcode" :key="index" class="code-pop">
+                    <img :src="item.img" class="code-img" alt="" />
+                    <div class="code-layer">
+                      <img :src="item.code" alt="" />
+                      <p class="txt">{{ item.label }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </slot>
+        </ContentWrapper>
+      </div>
+    </template>
+    <!-- 沉浸式底部导航 -->
+    <ContentWrapper v-else>
+      <div class="app-footer-pc">
+        <template v-if="$slots.left || props.footerOption">
+          <slot name="left">
+            <div v-if="props.footerOption" class="footer-left">
+              <span>{{ props.footerOption[props.lang].copyright }}</span>
+              <a class="approval" :href="props.footerOption[props.lang].beianLink" target="_blank" rel="noopener noreferrer">{{
+                props.footerOption[props.lang].beianInfo1
+              }}</a>
+              <img class="police-img" :src="props.footerOption[props.lang].policeIcon" />
+              <span>{{ props.footerOption[props.lang].beianInfo2 }}</span>
+            </div>
+          </slot>
+        </template>
+
+        <template v-if="$slots.right || props.footerOption">
+          <slot name="right">
+            <div v-if="props.footerOption" class="footer-right">
+              <template v-for="(link, index) in props.footerOption[props.lang].link" :key="link.url">
+                <a target="_blank" :href="link.url" class="link">{{ link.name }}</a>
+                <ODivider v-if="index !== props.footerOption[props.lang].link.length - 1" direction="v" />
+              </template>
+            </div>
+          </slot>
+        </template>
+      </div>
+      <div class="app-footer-mb">
+        <template v-if="$slots.right || props.footerOption">
+          <slot name="right">
+            <div v-if="props.footerOption" class="links">
+              <template v-for="(link, index) in props.footerOption[props.lang].link" :key="link.url">
+                <a target="_blank" :href="link.url" class="link">{{ link.name }}</a>
+                <ODivider v-if="index !== props.footerOption[props.lang].link.length - 1" direction="v" />
+              </template>
+            </div>
+          </slot>
+        </template>
+        <slot name="copyright">
+          <div class="copyright">{{ props.footerOption[props.lang].copyright }}</div>
+        </slot>
+        <template v-if="$slots.left || props.footerOption">
+          <slot name="left">
+            <div v-if="props.footerOption" class="approval">
+              <a :href="props.footerOption[props.lang].beianLink" target="_blank" rel="noopener noreferrer">{{ props.footerOption[props.lang].beianInfo1 }}</a>
+              <img class="police-img" :src="props.footerOption[props.lang].policeIcon" />
+              <span>{{ props.footerOption[props.lang].beianInfo2 }}</span>
+            </div>
+          </slot>
+        </template>
+      </div>
+    </ContentWrapper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-footer {
+  overflow: hidden;
+  background: #121214;
+  .atom {
+    text-align: center;
+    margin-top: 24px;
+    position: relative;
+
+    .atom-text {
+      color: var(--o-color-white);
+      @include h4;
+    }
+    .atom-logo {
+      height: 32px;
+      margin-top: 12px;
+
+      @include respond-to('<=laptop') {
+        margin-top: 8px;
+      }
+
+      @include respond-to('<=pad_v') {
+        height: 30px;
+        margin-top: 12px;
+      }
+    }
+  }
+  .atom-divider {
+    --o-divider-bd-color: rgba(229, 229, 229, 0.12);
+    --o-divider-gap: 16px;
+    @include respond-to('laptop') {
+      --o-divider-gap: 12px;
+    }
+    @include respond-to('pad_h') {
+      --o-divider-gap: 8px;
+    }
+  }
+  .footer-content {
+    @include tip1;
+    background-position: bottom;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    a {
+      color: rgba(var(--o-white), 0.6);
+      text-decoration: none;
+      white-space: nowrap;
+      @include hover {
+        color: rgba(var(--o-white), 1);
+      }
+    }
+  }
+  .quick-nav {
+    margin: 16px auto 0;
+    display: flex;
+    justify-content: space-between;
+    max-width: 1140px;
+    @include respond-to('<=pad_v') {
+      display: none;
+    }
+    .category {
+      .category-title {
+        @include h4;
+        color: var(--o-color-white);
+      }
+      .navs {
+        display: flex;
+        flex-direction: column;
+        list-style: none outside none;
+        padding-left: 0;
+        .nav {
+          margin-top: 8px;
+          @include tip1;
+        }
+        .nav:first-child {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+  .friendship-link {
+    margin-top: 16px;
+    padding-bottom: 12px;
+    display: flex;
+    justify-content: center;
+    border-bottom: 1px solid rgba(229, 229, 229, 0.12);
+    @include tip2;
+    .friendship-link-title {
+      color: var(--o-color-white);
+      margin-right: 32px;
+      flex-shrink: 0;
+    }
+    a:not(:last-of-type) {
+      margin-right: 24px;
+    }
+
+    @include respond-to('<=pad') {
+      .friendship-link-title {
+        margin-right: 24px;
+        min-width: 48px;
+      }
+      a:not(:last-of-type) {
+        margin-right: 12px;
+      }
+    }
+
+    @include respond-to('<=pad_v') {
+      display: none;
+    }
+  }
+  .inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0 32px;
+    position: relative;
+
+    @include respond-to('<=pad_v') {
+      margin: 0 auto;
+      padding: 0 0 24px;
+      flex-direction: column;
+    }
+  }
+  .inner-en {
+    @include respond-to('<=pad_v') {
+      max-width: fit-content;
+    }
+  }
+  .footer-logo {
+    flex: 1;
+    img {
+      height: 46px;
+    }
+    .show-pc {
+      display: block;
+    }
+    .show-mo {
+      display: none;
+    }
+    .email {
+      color: var(--o-color-white);
+    }
+
+    @include respond-to('<=pad_v') {
+      text-align: center;
+      margin: 16px 0;
+      .show-pc {
+        display: none;
+      }
+      .show-mo {
+        display: inline-block;
+        height: 20px;
+      }
+    }
+  }
+  .footer-option {
+    text-align: center;
+    @include tip1;
+    a {
+      color: var(--o-color-white);
+      display: inline-block;
+    }
+    .footer-option-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .o-divider {
+        height: 12px;
+      }
+    }
+
+    @include respond-to('<=pad_v') {
+      order: -1;
+    }
+  }
+  .license {
+    color: var(--o-color-white);
+    margin-top: 8px;
+    span {
+      color: rgba(var(--o-white), 0.6);
+    }
+  }
+  .copyright {
+    margin-top: 6px;
+    color: rgba(var(--o-white), 0.6);
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    p {
+      margin-bottom: 0;
+    }
+
+    .filing {
+      display: flex;
+      margin-left: 8px;
+      a {
+        color: rgba(var(--o-white), 0.6);
+        @include hover {
+          color: rgba(var(--o-white), 1);
+        }
+      }
+      .filing-img {
+        height: 16px;
+        align-self: center;
+        margin-left: 8px;
+      }
+      p {
+        margin-left: 8px;
+      }
+    }
+
+    @include respond-to('<=pad') {
+      flex-direction: column;
+      .filing {
+        margin-left: 6px;
+      }
+    }
+
+    @include respond-to('<=pad_v') {
+      margin-top: 4px;
+      .filing {
+        margin-left: 4px;
+      }
+    }
+  }
+  .footer-right {
+    flex: 1;
+    .code-box {
+      display: flex;
+      justify-content: right;
+      .code-pop {
+        cursor: pointer;
+        position: relative;
+        height: 20px;
+        display: block;
+        > img {
+          height: 100%;
+          object-fit: cover;
+        }
+        .code-layer {
+          position: absolute;
+          top: -105px;
+          left: -32px;
+          z-index: 99;
+          display: none;
+          background: var(--o-color-white);
+          padding: 6px;
+          img {
+            width: 78px;
+            height: 78px;
+          }
+          .txt {
+            margin-top: 8px;
+            color: var(--o-color-white);
+            display: none;
+          }
+          &::after {
+            border: 10px solid transparent;
+            content: '';
+            border-top-color: var(--o-color-white);
+            position: absolute;
+            bottom: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: block;
+          }
+        }
+        @include hover {
+          .code-layer {
+            display: block;
+          }
+        }
+
+        @include respond-to('pad_h') {
+          height: 18px;
+        }
+      }
+      .code-pop + .code-pop {
+        margin-left: 80px;
+        @include respond-to('<=pad_v') {
+          margin-left: 64px;
+        }
+      }
+    }
+
+    @include respond-to('<=pad_v') {
+      .code-box {
+        justify-content: space-between;
+        .code-pop {
+          height: auto;
+          > img {
+            display: none;
+          }
+          .code-layer {
+            display: block;
+            position: initial;
+            background: none;
+            padding: 0;
+            text-align: center;
+            &::after {
+              display: none !important;
+            }
+            .txt {
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.app-footer-simple {
+  background: var(--o-color-fill2);
+  .police-img {
+    width: 16px;
+    margin: 0 8px;
+  }
+  .app-footer-pc {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    color: var(--o-color-info3);
+    @include tip1;
+    .footer-left {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-top: 2px;
+    }
+    .approval {
+      margin-left: 8px;
+    }
+    a {
+      color: var(--o-color-info3);
+      @include hover {
+        color: var(--o-color-link1);
+      }
+    }
+    .footer-right {
+      flex-shrink: 0;
+      margin-left: 16px;
+      display: flex;
+      align-items: center;
+      .o-divider-v {
+        height: 12px;
+      }
+    }
+  }
+  .app-footer-mb {
+    display: none;
+    margin-top: 16px;
+    text-align: center;
+    color: var(--o-color-info4);
+    @include tip1;
+    .links {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .o-divider-v {
+        height: 12px;
+      }
+    }
+    .copyright {
+      margin-top: 4px;
+    }
+    .approval {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 4px;
+    }
+    a {
+      color: var(--o-color-info4);
+      @include hover {
+        color: var(--o-color-link1);
+      }
+    }
+  }
+  @include respond-to('<=pad') {
+    .app-footer-pc {
+      display: none;
+    }
+    .app-footer-mb {
+      display: block;
+    }
+  }
+}
+</style>