extends /layouts/empty.pug

block pageHead
  +js("https://unpkg.com/tiny-swiper@latest/lib/index.min.js")

mixin PeopleCared(name, role, desc, avatar)
  .bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4
    img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name)
    .flex-1
      .text-lg.font-semibold.text-gray-900 #{name}
      if role
        .text-sm.text-gray-500.mt-1 #{role}
      if desc
        p.text-sm.text-gray-600.mt-2 #{desc}
  

block pageContent
  .-mt-5
    //- form(action="/upload" method="post" enctype="multipart/form-data" class="mb-4 flex items-center")
    //-   input(type="file" name="file" required)
    //-   button(type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded") 上传文件 
    //- box-shadow 是在所有内容底部
    .swiper-container(style="height:400px;box-shadow: inset 0 -100px 120px #fff;overflow:hidden;mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);")
      .swiper-wrapper.h-full
        .swiper-slide(style="flex-shrink: 0;")
          img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png")
        .swiper-slide(style="flex-shrink: 0;")
          img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png")
        .swiper-slide(style="flex-shrink: 0;")
          img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png")
    .container
      .grid.grid-cols-1.gap-4(class="md:grid-cols-4")
        +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650')
        +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650')
        +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650')
        +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650')
        +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650')

block pageScripts
  script.
    //- Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])
    const swiper = new Swiper(".swiper-container", {
      //- loop: true,
      //- pagination: {
      //-   el: ".swiper-pagination",
      //-   clickable: true,
      //- },
      //- lazy: {
      //-   loadPrevNext: true,
      //- },
    });