文件操作 - TheFooter.vue

文件: /var/www/OLD/components/TheFooter.vue

编辑文件内容

interface NavItem {
  text: string;
  href: string;
}

const nav = tm('footer.nav.links') as NavItem[];
const social = tm('footer.social.links') as NavItem[];
const footNav = tm('footer.foot.nav') as NavItem[];

const goToTop = () => {
  document.body.scrollIntoView({ behavior: 'smooth' });
};

const route = useRoute();

const routeName = computed(() => {
  return String(route.name).split('___')[0];
});
</script>

<template>
  <footer
    class="footer"
    :class="`footer-${routeName}`"
  >
    <div class="container">
      <template v-if="routeName === 'index'">
        <div class="footer-main">
          <div class="footer-logo-wrapp">
            <div class="footer-logo">
              <img
                src="/img/logo-white.png"
                srcset="/img/logo-white@2x.png 2x"
                alt=""
              />
            </div>
          </div>
          <nav class="footer-nav">
            <div class="footer-nav-section">
              <div class="footer-nav-title">{{ $t('footer.nav.title') }}</div>
              <div class="footer-menu">
                <a
                  v-for="(item, index) in nav"
                  :key="index"
                  :href="rt(item.href)"
                  target="_blank"
                >
                  {{ rt(item.text) }}
                </a>
              </div>
            </div>
            <div class="footer-nav-section">
              <div class="footer-nav-title">
                {{ $t('footer.social.title') }}
              </div>
              <div class="footer-menu">
                <a
                  v-for="(item, index) in social"
                  :key="index"
                  :href="rt(item.href)"
                  target="_blank"
                >
                  {{ rt(item.text) }}
                </a>
              </div>
            </div>
          </nav>
          <div class="footer-awards">
            <button
              class="to-top"
              @click="goToTop"
              :aria-label="$t('footer.toTop')"
            >
              <AppIcon name="to-top"></AppIcon>
            </button>
            <div class="footer-award">
              <img
                src="/img/footer-award.png"
                srcset="/img/footer-award@2x.png 2x"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="footer-content">
          <div class="footer-app">
            <div class="footer-app-desc">
              <a
                :href="$t('footer.app.learn.href')"
                target="_blank"
              >
                {{ $t('footer.app.learn.text') }}
              </a>
              {{ $t('footer.app.download') }}
            </div>
            <div class="footer-app-links">
              <a
                :href="$t('footer.app.appStore.href')"
                :aria-label="$t('footer.app.appStore.text')"
                target="_blank"
              >
                <img
                  src="/img/app-store.svg"
                  alt=""
                />
              </a>
              <a
                :href="$t('footer.app.googlePlay.href')"
                :aria-label="$t('footer.app.googlePlay.text')"
                target="_blank"
              >
                <img
                  src="/img/google-play.svg"
                  alt=""
                />
              </a>
            </div>
          </div>
          <div class="footer-content-text">
            <p>
              {{ $t('footer.cookie.text') }}
              <a
                :href="$t('footer.cookie.link.href')"
                target="_blank"
              >
                {{ $t('footer.cookie.link.text') }}
              </a>
            </p>
            <p>
              {{ $t('footer.info') }}
            </p>
            <p>
              {{ $t('footer.company') }}
            </p>
          </div>
        </div>
      </template>
      <div class="foot">
        <div class="copyright">
          {{ $t('footer.foot.copyright', { Y: new Date().getFullYear() }) }}
        </div>
        <nav class="foot-nav">
          <a
            v-for="(item, index) in footNav"
            :key="index"
            :href="rt(item.href)"
            target="_blank"
          >
            {{ rt(item.text) }}
          </a>
        </nav>
      </div>
    </div>
  </footer>
</template>

.footer-index {
  background: url('/img/footer-bg-left.svg') left top no-repeat,
    url('/img/footer-bg-right.svg') right top no-repeat, #6687b0;
  background-size: 622px 570px, 444px 700px;
  color: @white;
  letter-spacing: -0.04em;

@media @md_ {
    --container-padding: 56px;
  }
  @media @md {
    background: url('/img/footer-bg-mobile-left.svg') left top no-repeat,
      url('/img/footer-bg-mobile-right.svg') right top no-repeat, #6687b0;
    background-size: 390px 714px, 264px 718px;
  }
  .foot {
    color: #d3d8db;
  }
  .foot-nav {
    a {
      &:hover {
        color: @white;
      }
      &:active {
        color: fade(@white, 80%);
      }
    }
  }
}

.footer-main {
  padding: 56px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  @media @md {
    padding: 28px 0 24px;
    gap: 40px;
    position: relative;
    grid-template-columns: unset;
  }
}

.footer-logo-wrapp {
  grid-column: span 4;
  display: flex;
  align-items: flex-start;
  @media @md {
    grid-column: unset;
    padding-right: 64px;
  }
}

.footer-logo {
  display: flex;
  max-width: 272px;
  @media @md {
    max-width: 252px;
  }
}

.footer-nav {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  @media @md_ {
    grid-column: span 6;
  }
}

.footer-nav-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  @media @md {
    gap: 16px;
  }
}

.footer-nav-title {
  font-size: 24px;
  line-height: 1.16;
  font-weight: 600;
  @media @md {
    font-size: 20px;
  }
}

.footer-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  @media @md {
    font-size: 15px;
  }
  a {
    color: #f0f0f0;
    transition: color 0.4s;
    &:hover {
      color: @white;
    }
    &:active {
      color: fade(@white, 80%);
    }
  }
}

.footer-awards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  @media @md_ {
    grid-column: span 2;
    align-items: flex-end;
  }
}

.to-top {
  flex: none;
  width: 52px;
  aspect-ratio: 1;
  border: solid 1px fade(#f7f7f7, 77%);
  display: grid;
  place-items: center;
  color: inherit;
  transition: border-color 0.4s, color 0.4s;
  border-radius: 6px;
  @media @md {
    width: 40px;
    position: absolute;
    right: 0;
    top: 28px;
    z-index: 1;
  }
  &:hover {
    border-color: #6bb8ff;
    color: #6bb8ff;
  }
  &:active {
    border-color: fade(#5bb0ff, 77%);
    color: fade(#5bb0ff, 77%);
  }
  svg {
    --size: 40px;
    @media @md {
      --size: 30px;
    }
  }
}

.footer-award {
  max-width: 120px;
  display: flex;
  @media @md {
    max-width: 76px;
  }
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  padding-bottom: 44px;
  @media @md {
    grid-template-columns: unset;
    padding-bottom: 48px;
    gap: 48px;
  }
}

.footer-app {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media @md {
    grid-column: unset;
    order: 1;
    gap: 24px;
  }
}

.footer-app-desc {
  font-weight: 600;
  max-width: 308px;
  a {
    color: inherit;
    text-decoration: underline;
    transition: text-decoration-color 0.4s;
    &:hover {
      text-decoration-color: fade(@white, 0%);
    }
  }
}

.footer-app-links {
  display: flex;
  gap: 14px;
  a {
    display: flex;
    max-width: 163px;
    transition: opacity 0.4s;
    &:hover {
      opacity: 0.7;
    }
  }
}

.footer-content-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: fade(@white, 58%);
  font-size: 14px;
  font-weight: 500;
  @media @md_ {
    grid-column: span 8;
  }
  a {
    color: @white;
    text-decoration: underline;
    transition: text-decoration-color 0.4s;
    &:hover {
      text-decoration-color: fade(@white, 0%);
    }
  }
}

.foot {
  padding: 24px 0;
  border-top: solid 1px fade(#dbdbdb, 66%);
  display: flex;
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
  font-weight: 500;
  font-size: 14px;
  color: #a8a8a8;
  @media @md {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
  }
}

.foot-nav {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  @media @md {
    gap: 32px;
    order: -1;
  }
  a {
    color: inherit;
    transition: color 0.4s;
    &:hover {
      color: @text;
    }
    &:active {
      color: #727272;
    }
  }
}
</style>

文件操作 - TheFooter.vue

文件: /var/www/OLD/components/TheFooter.vue

编辑文件内容

修改文件时间

删除文件