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.
51 lines
2.8 KiB
51 lines
2.8 KiB
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,
|
|
//- },
|
|
});
|