布置开发环境

build/rollup.config.js

@@ -9,11 +9,8 @@ import replace from '@rollup/plugin-replace'
 import babel from '@rollup/plugin-babel'
 import PostCSS from 'rollup-plugin-postcss'
 import { terser } from 'rollup-plugin-terser'
-// import ttypescript from 'ttypescript'
-// import typescript from 'rollup-plugin-typescript2'
 import typescript from '@rollup/plugin-typescript'
 import minimist from 'minimist'
-// import postcssImport from 'postcss-import'
 import image from '@rollup/plugin-image'
 
 // Get browserslist config and remove ie from es build targets

dev/serve.ts

-import { createApp } from 'vue';
-import Dev from './serve.vue';
-// To register individual components where they are used (serve.vue) instead of using the
-// library as a whole, comment/remove this import and it's corresponding "app.use" call
-import Com from '@/entry.esm';
+import { createApp } from 'vue'
+import Dev from './serve.vue'
+import MyComponent from '@/components/MyComponent'
 
-const app = createApp(Dev);
-app.use(Com);
-
-app.mount('#app');
+createApp(Dev).use(MyComponent).mount('#app')

dev/serve.vue

-<script lang="ts">
-import { defineComponent } from 'vue';
-// Uncomment import and local "components" registration if library is not registered globally.
-// import { ComSample } from '@/entry.esm';
+<template>
+  <div id="main">
+    <div v-for="(component, key) in components" :key="key" class="box">
+      <component :is="component" />
+    </div>
+  </div>
+</template>
 
+<script lang="ts">
+import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ServeDev',
-  // components: {
-  //  ComSample,
-  // }
-});
+})
+</script>
+<script lang="ts" setup>
+import * as components from '@/lib/index'
 </script>
 
-<template>
-  <div id="app">
-    <com-sample />
-  </div>
-</template>
+<style lang="stylus" scoped>
+#main
+  width 100%
+  max-height 100%
+  box-sizing border-box
+  padding .05rem
+  -moz-column-count 4
+  -webkit-column-count 4
+  column-count 4
+  -moz-column-gap @padding
+  -webkit-column-gap @padding
+  column-gap @padding
+  >.box
+    -moz-page-break-inside avoid
+    -webkit-column-break-inside avoid
+    break-inside avoid
+    margin-bottom .05rem
+</style>
+<style lang="stylus">
+@font-face
+  font-family DIN
+  src url(../src/assets/font/DIN-Medium.otf)
+@font-face
+  font-family Pangmenzhengdao
+  src url(../src/assets/font/pangmenzhengdao.ttf)
+
+html, body
+  background #000
+  font-family DIN, Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  width 100%
+  height 100%
+  user-select none
+  font-size 16vh
+  line-height 1.5
+  p
+    margin 0
+#app
+  width 100%
+  height 100%
+  overflow hidden
+  font-size .1rem
+  background url('../src/assets/images/background.jpg') center/100% 100% no-repeat
+  color #fff
+.orange-count
+  font-size .14rem
+  font-weight bold
+  background-clip text
+  -webkit-background-clip text
+  -webkit-text-fill-color transparent
+  background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: .04rem;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  background:rgba(91, 213, 255, 0.3)
+  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background:rgba(91, 213, 255, 0.3)
+}
+</style>

src/components/MyComponent/MyStep/my-step.vue

@@ -16,7 +16,12 @@
       <p :title="step">
         {{ step }}
       </p>
-      <div v-if="i <= current" ref="iconRef" class="icon" />
+      <div
+        v-if="i <= current"
+        ref="iconRef"
+        class="icon"
+        :style="`url(${TrueIcon}) center center / 60% 60% no-repeat`"
+      />
       <div v-else class="none"></div>
       <span class="msg" :title="msg[i]" v-html="msg[i]" />
     </div>
@@ -32,6 +37,7 @@ import {
   PropType,
   ref,
 } from 'vue'
+import TrueIcon from '@/assets/images/true.png'
 
 export default defineComponent({
   name: 'MyStep',
@@ -76,6 +82,7 @@ export default defineComponent({
       doneWidth,
       undoneWidth,
       iconTop,
+      TrueIcon,
     }
   },
 })
@@ -111,7 +118,7 @@ export default defineComponent({
       width .1rem
       height @width
       border-radius 50%
-      background url('@/assets/images/true.png') center center / 60% 60% no-repeat
+      // background url('@/assets/images/true.png') center center / 60% 60% no-repeat
       background-color $edge
     .none
       width .06rem

src/components/MyComponent/util.ts

 import { App, Plugin } from 'vue'
 import dayjs from 'dayjs'
 import ch from 'dayjs/locale/zh-cn'
-import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
-dayjs.extend(LocalizedFormat)
+// import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
+// dayjs.extend(LocalizedFormat)
 dayjs.locale(ch)
 
 export const withInstall = <T>(comp: T): T & Plugin => {
@@ -13,8 +13,8 @@ export const withInstall = <T>(comp: T): T & Plugin => {
   return comp as T & Plugin
 }
 
-export const getDate = (): string => dayjs().format('ll')
-// export const getDate = (): string => dayjs().format('YYYY-MM-DD dddd')
+// export const getDate = (): string => dayjs().format('ll')
+export const getDate = (): string => dayjs().format('YYYY-MM-DD dddd')
 export const getTime = (): string => dayjs().format('LTS')
 
 export const toRGB = (c: string, opacity = 1): string => {