vue3重构个人网站2——首页

1 首页思路

2 轮播图

3 文章列表卡片

1 首页思路

  直接上图，主页跟旧版的类似。开头的固定图片改成轮播图，手动搞了个循环轮播，效果还不错。主体内容仍然是左边导航，右侧推荐文章列表。底部是仓库，邮箱地址等。

2 轮播图

  轮播图的布局不是很复杂，左右切换键跟中间文字都是绝对定位，所以实际上只有图片。重点是循环轮播的特征，即在最后一张继续点击切换下一张时会切换到第一张，并且保证切换动画方向不变，在很多轮播图插件中，要么在第一张和最后一张无法继续切换；要么是倒退的动画回到第一张或最后一张，我个人感觉这种不连续的动画不是很好，于是自己搞了个循环轮播。主要有以下思路。

1. 将需要展示的图片放在一个数组。
2. 在数组首尾追加尾末图片，即实际上加载n+2张图。
3. 图片宽度设为100vw铺满屏幕，通过flex布局将图片放在同一行，通过translateX来切换图片。
4. 当切换的首尾两张图时（新数组，额外添加尾首图片后），关闭DOM动画，直接切换到最后一张或第一张，此时用户不会看到该切换过程。

<div class="imgs">
	<!-- 动态绑定transition和translateX -->
	<img
		class="bg-img"
		v-for="(img, index) in imgs"
		:key="index"
		:style="
			`