前言
基于kuan-vue-flip-clock插件，由于插件的样式比较固定，所以想要改变其样式需要自定义，这里我是在PC端、vue2.x、样式表sass，样式vw+rem自适应
插件文档/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" />
