add global styles & filters

src/constants/constants.ts

@@ -0,0 +1 @@
+export const YYYYMMDDHHmmss = "YYYY-MM-DD HH:mm:ss";

src/filters/index.ts

@@ -0,0 +1,9 @@
+import { YYYYMMDDHHmmss } from "@/constants/constants";
+import moment from "moment";
+
+export default {
+  /** 返回YYYY-MM-DD HH:mm:ss */
+  datetimeFilter(epochTime: number) {
+    return moment(epochTime).format(YYYYMMDDHHmmss);
+  },
+};

src/main.ts

@@ -1,9 +1,14 @@
+import "./styles/global.css";
+
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "@/router";
+import filters from "@/filters";
 import { createPinia } from "pinia";
 
 const app = createApp(App);
 app.use(router);
 app.use(createPinia());
+app.config.globalProperties.$filters = filters;
+
 app.mount("#app");

src/styles/cssvar.css

@@ -0,0 +1,15 @@
+:root {
+  --header-bg-color: #191b37;
+  --app-container-bg-color: white;
+  --app-main-bg-color: #edf2fa;
+  --app-main-text-color: #283e76;
+  --app-min-width: 1280px;
+  --app-bold-text-color: #435488;
+  --app-small-header-text-color: #7584ac;
+  --app-primary-button-bg-color: #5d65ff;
+  --app-undo-button-bg-color: #4ed885;
+
+  --app-main-font-size: 14px;
+  --app-secondary-font-size: 12px;
+  --app-title-font-size: 16px;
+}

src/styles/global.css

@@ -0,0 +1,60 @@
+@import "./tailwind.css";
+@import "./nprogress.css";
+@import "./cssvar.css";
+
+body {
+  margin: 0;
+  font-size: var(--app-main-font-size);
+  min-width: var(--app-min-width);
+  min-height: 600px;
+  user-select: none;
+}
+
+.main-text-color {
+  color: var(--app-main-text-color);
+}
+
+.secondary-text {
+  color: var(--app-small-header-text-color);
+  font-size: var(--app-secondary-font-size);
+}
+
+/* for MarkHeader */
+.header-small-text {
+  font-size: var(--app-secondary-font-size);
+}
+.highlight-text {
+  color: white;
+  font-size: var(--app-title-font-size);
+}
+
+.score-number-animation-enter-active,
+.score-number-animation-leave-active {
+  transition: all 0.2s ease-in-out 0.2s;
+  transform: scale(1.1);
+}
+.score-number-animation-enter-from,
+.score-number-animation-leave-to {
+  opacity: 0;
+  /* transform: translateX(40px) scale(0.3); */
+  transform: scale(0.3);
+  transition: all 0.2s ease-in-out;
+}
+
+/* override ant-design */
+.ant-message {
+  z-index: 6001 !important;
+  font-size: 16px !important;
+}
+
+.ant-message-custom-content span[role="img"] {
+  top: -4px;
+}
+
+button.ant-btn span[role="img"] {
+  display: inline-flex !important;
+}
+
+button.ant-btn-primary {
+  background-color: var(--app-primary-button-bg-color);
+}

src/styles/nprogress.css

@@ -0,0 +1,82 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: yellow;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  /* top: var(--); */
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: yellow;
+  border-left-color: yellow;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;