perf(theme): 调整首页布局

This commit is contained in:
pengzhanbo 2024-03-09 00:30:26 +08:00
parent deb17c7ebc
commit ba235c421f
4 changed files with 11 additions and 13 deletions

View File

@ -64,7 +64,7 @@ function resolveComponentName(type: string) {
v-for="(item, index) in config"
:key="item.type + index"
>
<div :class="{ layout: index > 0 && item.type !== 'features' }">
<div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
<component
:is="resolveComponentName(item.type)"
v-bind="item"

View File

@ -201,7 +201,7 @@ const actions = computed(() => hero.value.actions ?? [])
width: 714px;
height: 390px;
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
background: #fe5;
background: var(--vp-c-yellow-3);
transform: translate(-50%, 0);
}
@ -211,7 +211,7 @@ const actions = computed(() => hero.value.actions ?? [])
width: 1000px;
height: 450px;
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
background: #e950d1;
background: var(--vp-c-red-3);
transform: translate(-50%, 0);
}
@ -221,7 +221,7 @@ const actions = computed(() => hero.value.actions ?? [])
width: 1000px;
height: 450px;
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
background: rgba(87, 80, 233);
background: var(--vp-c-purple-3);
transform: translate(-50%, 0);
}

View File

@ -31,13 +31,9 @@ const profile = computed(() => {
>
<VImage v-if="profile.avatar" :image="profile.avatar" :class="{ circle: profile.circle }" />
<h3 v-if="profile.name">
{{ profile.name }}
</h3>
<h3 v-if="profile.name" v-html="profile.name" />
<p v-if="profile.description">
{{ profile.description }}
</p>
<p v-if="profile.description" v-html="profile.description" />
</HomeBox>
</template>

View File

@ -80,6 +80,7 @@ const maxWidth = computed(() => {
.content-text h2 {
margin-top: 0;
margin-bottom: 12px;
}
.content-text ul {
@ -87,6 +88,7 @@ const maxWidth = computed(() => {
}
.content-text .description {
margin: 12px 0 24px;
font-size: 16px;
font-weight: 500;
color: var(--vp-c-text-1);
@ -102,6 +104,7 @@ const maxWidth = computed(() => {
.content-text ul p {
margin: 0;
font-weight: 400;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
@ -112,13 +115,12 @@ const maxWidth = computed(() => {
@media (min-width: 768px) {
.content-image :deep(.plume-image) {
max-width: 160px;
max-width: 180px;
margin: 0 48px;
}
.content-text {
flex: 1;
width: 100%;
}
}
@ -128,7 +130,7 @@ const maxWidth = computed(() => {
}
.content-image :deep(.plume-image) {
max-width: 180px;
max-width: 220px;
margin: 0 96px;
}