直播视频网站源码，翻页时钟FlipClock的使用和样式自定义

直播视频网站源码，翻页时钟FlipClock的使用和样式自定义
1.在直播视频网站源码中安装插件

```cpp
npm i kuan-vue-flip-clock
//或者 cnpm i kuan-vue-flip-clock
//或者yarn add kuan-vue-flip-clock
```

 

2.引入

```cpp
//在某组件我这里是按需引入的
import FlipClock from "kuan-vue-flip-clock";
```

 

3.自定义样式(在全局样式下,不需要改变样式的略过)

```cpp
// clock.scss
// 自定义类名可以在组件上直接写 我这里的rem比例 1rem = 100px 作者前端阿玉
.my-clock {
// height: 100% !important;
>div {
// height: 100% !important;
}
.flip {
height: 0.24rem !important;
width: 0.18rem !important;
font-size: 0.16rem !important;
margin: 0.01rem !important;
line-height: 0.24rem !important;
.inn{
color: #fff !important;
text-shadow: 0 1px 2px #000 !important;
background-color: #46c9c6 !important;
border-radius: 4px !important;
}
.item .up:after {
content: '';
position: absolute;
top: 0.12rem;
left: 0;
z-index: 99;
width: 100%;
height: 3px;
background-color: rgb(9, 29, 29) !important;

}
.shadow{
// width: auto !important;
}
}

.colon {
height: 0.16rem !important;
padding: 0 0.05rem !important;

&::after {
content: '';
display: block;
width: 0.03rem !important;
height: 0.03rem !important;
background: #46c9c6 ;
border-radius: 50%;
}

&::before {
content: '';
display: block;
width: 0.03rem !important;
height: 0.03rem !important;
background: #46c9c6 ;
border-radius: 50%;
}
}
}
```

 

4.使用

```cpp
//在组件下直接写就行了
<FlipClock class="my-clock" />
```

 

以上就是直播视频网站源码，翻页时钟FlipClock的使用和样式自定义， 更多内容欢迎关注之后的文章