You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.4 KiB
139 lines
3.4 KiB
<template>
|
|
<div class="w-full bg-white pb-20 mb-3 relative"
|
|
:style="`background: url('${config?.IndexAboutBg}') no-repeat center`">
|
|
<template v-if="showAboutUs">
|
|
<div class="text-center flex flex-col items-center py-15 relative ">
|
|
<div class="sub-title">
|
|
<p class="text-gray-200 text-6xl font-bold dark:text-gray-700 py-0 line-height-5">
|
|
{{ comments }}
|
|
</p>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-green-600 dark:text-white sm:text-4xl lg:text-5xl">
|
|
{{ title }}
|
|
</h2>
|
|
</div>
|
|
<div class="hidden-sm-and-down">
|
|
<div class="xl:w-screen-xl m-auto text-xl flex justify-between " v-if="config?.IndexAboutInfo">
|
|
<p class="indent-xl max-w-3/5 px-4 left-2-right" :class="config?.IndexAboutStyle"
|
|
style="font-family: Source Han Serif, SimSun,serif">{{ config?.IndexAboutInfo }}</p>
|
|
<div class="carousel px-3 text-center right-to-left">
|
|
<img :src="config?.IndexAboutImg" class="scale-img"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-sm-and-up">
|
|
<div class="xl:w-screen-xl m-auto text-lg flex flex-col " v-if="config?.IndexAboutInfo">
|
|
<div class="carousel px-3 text-center right-to-left">
|
|
<img :src="config?.IndexAboutImg" class="scale-img"/>
|
|
</div>
|
|
<p class="p-3 left-2-right" :class="config?.IndexAboutStyle"
|
|
style="font-family: Source Han Serif, SimSun,serif">{{ config?.IndexAboutInfo }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import type {ApiResult} from "~/api";
|
|
import type {Config} from "~/types/global";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
config?: any;
|
|
title?: string;
|
|
comments?: string;
|
|
scrollTop: number;
|
|
}>(),
|
|
{}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done'): void;
|
|
}>();
|
|
|
|
const showAboutUs = ref(false)
|
|
watch(
|
|
() => props.scrollTop,
|
|
() => {
|
|
if (props.scrollTop > 700) showAboutUs.value = true
|
|
},
|
|
{immediate: true}
|
|
);
|
|
// 请求数据
|
|
// const reload = async () => {
|
|
// const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/cms-website-field/config', {baseURL: 'https://server.gxwebsoft.com/api',});
|
|
// if (fields.value?.data) {
|
|
// config.value = fields.value?.data;
|
|
// }
|
|
// }
|
|
|
|
// reload();
|
|
</script>
|
|
|
|
<style lang="less">
|
|
/* 在全局样式表如 app.css 或 styles.css 中添加 */
|
|
.el-tabs__item {
|
|
font-size: 3em; /* 调整为你想要的字体大小 */
|
|
}
|
|
|
|
.custom-tabs .el-tabs__item {
|
|
font-size: 20px; /* 调整为你想要的字体大小 */
|
|
}
|
|
</style>
|
|
|
|
<style lang="less" scoped>
|
|
.scale-img {
|
|
width: 500px;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.scale-img:hover {
|
|
animation: scale;
|
|
animation-duration: 0.5s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes scale {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.left-2-right {
|
|
animation: left-2-right-ani;
|
|
animation-duration: 0.5s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes left-2-right-ani {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.right-to-left {
|
|
animation: right-to-left-ani;
|
|
animation-duration: 0.5s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes right-to-left-ani {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style>
|