参照上一版项目的UI，完成了第一版骨刻文项目的web端主页，主页主要包含的内容有滑动页设计、骨刻文背景介绍、骨刻文论文、学术动态等内容。后续可能会再加上骨刻文分布的地图（echart实现），再美化一下ui。
下面主要介绍主页的几个相对亮点的技术实现
一、滑动展示页的设计
上一版ui中的滑动展示页是这样的：
可以看出它有个很大的缺点就是在图片的边缘有边框，其实也就是图片大小和滑动页大小没有适配，这个问题其实很好解决。我使用的是swiper插件，在swiper插件中，放入的图片会自动适配滑动页的大小。下面我将附上我的思路和解决代码。
我做的效果如下：
可以看出它除了图片可以占满整张滑动页以外，它还增加了一个3d旋转效果。具体实现代码如下：
html
<!--在3个swiper里分别放上图片-->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/img/swiper/swiper1.jpeg"></div>
<div class="swiper-slide"><img src="assets/img/swiper/swiper2.webp"></div>
<div class="swiper-slide"><img src="assets/img/swiper/swiper3.webp"></div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
css
.swiper {
/*swiper主题色*/
--swiper-theme-color: rgba(171, 31, 42,1);
width: 90%;
height: 450px;
}
.swiper-slide{
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img{
/* 调整img的大小 */
width: 85%;
height: 80%;
/*缩放图片70%*/
transform: scale(0.7);
}
.swiper-slide-active img {
/* 正中间的图片为原始尺寸 */
transform: scale(1);
}
js
const mySwiper = new Swiper('.swiper', {
direction: 'horizontal',
loop: true, // 循环模式选项
autoplay:true,
speed:1000,
autoplayDisableOnInteraction : false,//用户操作swiper之后，是否禁止autoplay
centeredSlides : true,
slidesPerView:2,
effect:'coverflow',//可以实现3D效果的轮播,
coverflowEffect: {
rotate: 30, // slide做3d旋转时Y轴的旋转角度，默认为50
stretch: 100, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比，默认为0
depth: 0, // slide的位置深度。值越大z轴距离越远，看起来越小。 默认为100
modifier: 2, // depth和rotate和stretch的倍率，
// 相当于depth*modifier、rotate*modifier、stretch*modifier，
// 值越大这三个参数的效果越明显。默认为1
slideShadows : false //是否开启slide阴影
},
// 分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
});
//鼠标滑过pagination控制swiper切换
for(let i=0;i<mySwiper.pagination.bullets.length;i++){
mySwiper.pagination.bullets[i].onmouseover=function(){
this.click();
};
}
参考swiper官网：https://www.swiper.com.cn/
二、字体样式
为了更符合骨刻文项目的特点，把字体样式修改了一下，选择和上一版ui一样的字体。不过因为没有上一版的源码，所以字体样式需要自己去找到相应的文件，进行相应添加。
1. 下载字体文件
进入网址：方正字库
到达如图下载页面，登录即可获取字体ttf文件
2. 把字体文件导入项目中应用
复制ttf文件到css文件夹下
在css文件中引入，加上如下代码即可：
/*----------------------------------------
字体
*/
@font-face {
/*字体名称*/
font-family: "FZGLJW";
/*字体文件地址*/
src: url("FZGLJW.TTF");
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
/*设置全局应用该字体*/
font-family: "FZGLJW", serif;
/*font-family: "Open Sans", sans-serif;*/
color: #444444;
background-color: rgb(245, 222, 188);
}
效果如图：
总结
主页的初步设计比较简单，ui看上去也不是很美观，需要后期再继续优化。下篇文章将介绍一下本项目的重点内容，即画板的实现。