import { css } from "@linaria/core";

import { ArrowRightOutlined } from "@ant-design/icons-vue";
import { defineComponent } from "vue";

import { Swiper, SwiperSlide } from "swiper/vue";
import Image from "@/components/Image";
export default defineComponent({
  setup() {
    const images = [1, 2, 3, 4, 5, 6];
    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div>
          <div class={"home_lay_title global_w"}>
            教师队伍<span>/</span>
            <span>FACUlTY</span>
          </div>
          <div class={"teachers_box"}>
            <Swiper
              class={"teachers_swiper"}
              spaceBetween={24}
              slidesPerView={5}
            >
              {images.map(() => {
                return (
                  <SwiperSlide>
                    <div class={"teacher_item"}>
                      <a>
                        <Image src={""} />
                      </a>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <div class={"list_more"}>
            <a>
              查看更多
              <ArrowRightOutlined class={"arrow"} />
            </a>
          </div>
        </div>
      </div>
    );
  },
});
const page = css`
  background: linear-gradient(180deg, #f3fbf1 0%, #ffffff 100%);
  .teachers_box {
    .teachers_swiper {
      width: 100%;
      height: 500px;
    }
    .teacher_item {
      width: 100%;
      height: 500px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .list_more {
    margin-top: 35px;
    text-align: center;
    a {
      color: var(--vt-c-primary);
    }
    .arrow {
      margin-left: 8px;
      padding: 2px;
      border: 1px solid var(--vt-c-primary);
      font-size: 12px;
      border-radius: 50%;
    }
  }
`;
