Update style

This commit is contained in:
JeremyWuuuuu 2022-04-03 17:28:59 +08:00 committed by zouhang
parent caa5e1e40f
commit 085bbe2e09
3 changed files with 24 additions and 33 deletions

View File

@ -3,18 +3,17 @@ import { platinumSponsors } from '../../config/sponsors'
</script>
<template>
<div class="container">
<div v-for="item in platinumSponsors" :key="item.name" class="sponsor-item">
<a
:href="item.url"
:title="`${item.name_cn || item.name} - ${
item.slogan_cn || item.slogan
}`"
target="_blank"
>
<img :src="item.banner_img" :alt="item.name" />
</a>
</div>
<div class="sponsor-container">
<a
v-for="item in platinumSponsors"
:key="item.name"
:href="item.url"
:title="`${item.name_cn || item.name} - ${item.slogan_cn || item.slogan}`"
class="sponsor-item inline-flex"
target="_blank"
>
<img :src="item.banner_img" :alt="item.name" />
</a>
</div>
</template>

View File

@ -4,27 +4,25 @@ import { goldSponsors } from '../../config/sponsors'
</script>
<template>
<div class="container">
<div
<div class="sponsor-container">
<a
v-for="item in goldSponsors"
:key="item.name"
:class="['sponsor-item', item.isDark && isDark ? 'filter invert' : '']"
:class="[
'sponsor-item inline-flex items-center',
item.isDark && isDark ? 'filter invert' : '',
]"
:href="item.url"
:title="`${item.name_cn || item.name} - ${item.slogan_cn || item.slogan}`"
target="_blank"
>
<a
:href="item.url"
:title="`${item.name_cn || item.name} - ${
item.slogan_cn || item.slogan
}`"
target="_blank"
>
<img :src="item.img" :alt="item.name" />
</a>
</div>
<img :src="item.img" :alt="item.name" />
</a>
</div>
</template>
<style scoped lang="scss">
.container {
.sponsor-container {
display: flex;
align-items: center;
.sponsor-item {
@ -32,12 +30,6 @@ import { goldSponsors } from '../../config/sponsors'
height: 36px;
width: 36px;
a {
display: inline-flex;
align-items: center;
height: inherit;
width: inherit;
}
img {
height: 100%;
width: 100%;

View File

@ -50,7 +50,7 @@
}
@include respond-to('xxl') {
padding: 0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2);
padding: 47px 32px 96px calc((100% - var(--vp-screen-max-width)) / 2);
width: calc(
(100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
);