日常记录

一、录播组件开发

application/Recommend/index.js

npm install swiper --save

注意编写 /component/slider/index.js

// 新版 6.x 引入方式变化：
import 'swiper/swiper-bundle.css';
import Swiper, { Pagination, Autoplay } from 'swiper';

Swiper.use([Pagination, Autoplay]);

二、推荐列表开发

值得关注的是：

<div className="decorate"></div>

上面 style.js 中对应样式:

.decorate {
  position: absolute;
  top: 0;
  width: 100%;
  height: 35px;
  border-radius: 3px;
  background: linear-gradient(hsla(0,0%,43%,.4),hsla(0,0%,100%,0));
}

这个标签的样式，它的作用就是给图片上的图标和文字提供一个遮罩，因为在字体颜色是白色，在面对白色图片背景的时候，文字会看不清或者看不到，因此提供一个阴影来衬托出文字，这个细节很容易被忽略，希望大家也能注意一下。