直播视频网站源码,翻页时钟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的使用和样式自定义, 更多内容欢迎关注之后的文章