mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
perf(theme): 调整首页布局
This commit is contained in:
parent
deb17c7ebc
commit
ba235c421f
@ -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"
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user