直播視訊網站原始碼，翻頁時鐘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的使用和樣式自定義， 更多內容歡迎關注之後的文章