炫酷翻页时钟FlipClock的使用和样式自定义

本文档介绍了如何在Vue2.x项目中，基于kuan-vue-flip-clock插件进行样式自定义，以适应PC端vw+rem的响应式布局。通过修改全局样式表clock.scss，调整flip元素、colon元素的大小、颜色、边框等样式，实现了自定义背景色、文字阴影、边框圆角等效果。详细步骤包括安装插件、按需引入、编写自定义样式及在组件中应用。

前言

基于 kuan-vue-flip-clock 插件，由于插件的样式比较固定，所以想要改变其样式需要自定义，这里我是在PC端、vue2.x、样式表sass，样式vw+rem自适应

插件文档 https://www.npmjs.com/package/kuan-vue-flip-clock

自定义样式如下效果如下

默认样式如下

1.安装插件

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

2.引入

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

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

//  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.使用

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