<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>
