unika-components 1.0.16 → 1.0.20

package/dist/src/components/UniCountdown/UniCountdown.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    deadline: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    deadline: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    deadline: string;
+}, {}>;
+export default _default;

package/dist/src/components/UniCountdown/index.d.ts

@@ -0,0 +1,2 @@
+import UniCountdown from './UniCountdown.vue';
+export default UniCountdown;

package/dist/src/defaultProps.d.ts

@@ -254,6 +254,26 @@ export declare const calendarDefaultProps: {
     top: string;
     right: string;
 };
+export declare const countdownDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+};
 export declare const componentsDefaultProps: {
     'uni-text': {
         props: {
@@ -417,6 +437,28 @@ export declare const componentsDefaultProps: {
             right: string;
         };
     };
+    'uni-countdown': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+        };
+    };
 };
 export declare const isEditingProp: {
     isEditing: {

package/dist/src/index.d.ts

@@ -8,8 +8,9 @@ import UniBackground from './components/UniBackground';
 import UniMusic from './components/UniMusic';
 import UniVideo from './components/UniVideo';
 import UniCalendar from './components/UniCalendar';
+import UniCountdown from './components/UniCountdown';
 declare const install: (app: App) => void;
-export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniMusic, UniVideo, UniCalendar, install };
+export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniMusic, UniVideo, UniCalendar, UniCountdown, install };
 declare const _default: {
     install: (app: App<any>) => void;
 };

package/dist/unika-components.css

@@ -1,56 +1,4 @@
 
-.uni-image-component {
-  max-width: 100%;
-}
-
-h2.uni-text-component, p.uni-text-component {
-  margin-bottom: 0;
-}
-button.uni-text-component {
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.uni-text-component {
-  box-sizing: border-box;
-  white-space: pre-wrap;
-}
-
-  .uni-background-component {
-    width: 100%;
-  }
-  .bg-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index:1;
-  }
-  .watermark {
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-  .watermark-div {
-    height: 100%;
-    width:100%;
-    position:absolute;
-    z-index:99999999;
-  }
-  body:before{
-  content: '';
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
-  background-position: center;  
-  opacity: 0.1;
-}
-
  .slide-guide {
     position: absolute;
     bottom: 90px;
@@ -123,6 +71,79 @@ body, html {
         transform: translate3d(-50%, -50%, 0);
     }
 }
+
+.uni-image-component {
+  max-width: 100%;
+}
+
+h2.uni-text-component, p.uni-text-component {
+  margin-bottom: 0;
+}
+button.uni-text-component {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.uni-text-component {
+  box-sizing: border-box;
+  white-space: pre-wrap;
+}
+
+  .uni-background-component {
+    width: 100%;
+  }
+  .bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index:1;
+  }
+  .watermark {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .watermark-div {
+    height: 100%;
+    width:100%;
+    position:absolute;
+    z-index:99999999;
+  }
+  body:before{
+  content: '';
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  /* background: url(https://unika-static-dev.unika.cc/logo.png) 0 0 repeat; */
+  background-position: center;  
+  opacity: 0.1;
+}
+
+  .uni-video-component {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
 
 #audio {
   position: absolute;
@@ -226,27 +247,6 @@ body, html {
   font-size: 12px;
   color: #666
 }
-
-  .uni-video-component {
-    position: relative;
-    text-align: center;
-  }
-  .play-pause-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    font-size: 2rem;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    padding: 10px;
-    transition: background 0.3s;
-  }
-  .play-pause-button:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -883,3 +883,138 @@ button.swiper-pagination-bullet {
 .unika-calendar-row > *:not(:first-child) {
   margin-left: 10px;
 }
+
+.no-animation__card {
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 1.5;
+  display: block;
+  color: var(--main-color);
+}
+
+.flip-clock {
+  text-align: center;
+  perspective: 600px;
+  margin: 0 auto;
+}
+
+.flip-clock *,
+.flip-clock *:before,
+.flip-clock *:after {
+  box-sizing: border-box;
+}
+
+.flip-clock__piece {
+  display: inline-block;
+  margin: 0 0.2vw;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__piece {
+      margin: 0 5px;
+  }
+}
+
+.flip-clock__slot {
+  font-size: 1rem;
+  line-height: 1.5;
+  display: block;
+  color: var(--label-color);
+}
+
+.flip-card {
+  display: block;
+  position: relative;
+  padding-bottom: 0.72em;
+  font-size: 2.25rem;
+  line-height: 0.95;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__slot {
+      font-size: 1.2rem;
+  }
+
+  .flip-card {
+      font-size: 2rem;
+  }
+}
+
+.flip-card__top,
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__back::before,
+.flip-card__back::after {
+  display: block;
+  height: 0.72em;
+  color: var(--main-color);
+  background: var(--main-flip-background-color);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: 0.15em 0.15em 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.1em;
+  height: 0.72em;
+}
+
+.flip-card__back,
+.flip-card__back-4digits {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0%;
+    pointer-events: none;
+}
+
+.flip-card__back::before,
+.flip-card__back-4digits::before {
+    position: relative;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.flip .flip-card__back::before,
+.flip .flip-card__back-4digits::before {
+    z-index: 1;
+    animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
+    animation-fill-mode: both;
+    transform-origin: center bottom;
+}
+
+.flip .flip-card__bottom,
+.flip .flip-card__bottom-4digits {
+    transform-origin: center top;
+    animation-fill-mode: both;
+    animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
+}
+
+@keyframes flipTop {
+    0% {
+        transform: rotateX(0deg);
+        z-index: 2;
+    }
+    0%, 99% {
+        opacity: 1;
+    }
+    100% {
+        transform: rotateX(-90deg);
+        opacity: 0;
+    }
+}
+
+@keyframes flipBottom {
+    0%, 50% {
+        z-index: -1;
+        transform: rotateX(90deg);
+        opacity: 0;
+    }
+    51% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        transform: rotateX(0deg);
+        z-index: 5;
+    }
+}