├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── base.less
    │   ├── images.less
    │   └── logo.png
    ├── components
    │   ├── clock.vue
    │   ├── setbox.vue
    │   ├── slider.vue
    │   └── timePicker.vue
    ├── main.js
    └── utils
    │   ├── easeinout.js
    │   └── getnum.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/vue3-essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | node_modules
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # timer
 2 | 
 3 | flip clock
 4 | 
 5 | 翻页时钟
 6 | 
 7 | ## demo
 8 | 
 9 | [clock](https://lufunc.github.io/timer/)
10 | 
11 | ## Project setup
12 | ```
13 | npm install
14 | ```
15 | 
16 | ### Compiles and hot-reloads for development
17 | ```
18 | npm run serve
19 | ```
20 | 
21 | ### Compiles and minifies for production
22 | ```
23 | npm run build
24 | ```
25 | 
26 | ### Lints and fixes files
27 | ```
28 | npm run lint
29 | ```
30 | 
31 | ### Customize configuration
32 | See [Configuration Reference](https://cli.vuejs.org/config/).
33 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "timer",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "@vue/eslint-config-standard": "^5.1.2",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-import": "^2.20.2",
23 |     "eslint-plugin-node": "^11.1.0",
24 |     "eslint-plugin-promise": "^4.2.1",
25 |     "eslint-plugin-standard": "^4.0.0",
26 |     "eslint-plugin-vue": "^7.0.0-0",
27 |     "less": "^3.0.4",
28 |     "less-loader": "^5.0.0",
29 |     "lint-staged": "^9.5.0"
30 |   },
31 |   "gitHooks": {
32 |     "pre-commit": "lint-staged"
33 |   },
34 |   "lint-staged": {
35 |     "*.{js,jsx,vue}": [
36 |       "vue-cli-service lint",
37 |       "git add"
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lufunc/timer/73dfbb72268ce741cdd0b2438970bbe594954a93/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Clock</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg">
  3 |     <div class="timer" :style="{'transform': 'translateY(-50%) scale('+(scale/100)+')','filter': 'brightness('+brightness/100+')'}">
  4 |       <clock :class="[showSecond?'timer_hms':'timer_hm']" cid="clock_h" :msg="num_h" :ampm="hourFormat===0" :bg="showBg"></clock>
  5 |       <clock :class="[showSecond?'timer_hms':'timer_hm']" cid="clock_m" :msg="num_m" :bg="showBg"></clock>
  6 |       <clock v-if="showSecond" :class="[showSecond?'timer_hms':'timer_hm']" cid="clock_s" :msg="num_s" :bg="showBg"></clock>
  7 |       <div class="watchBtn" @click="startStop" v-show="timeMode>0">
  8 |         <div :style="{'color': watching?'red':'green'}">{{watching?'Stop':'Start'}}</div>
  9 |         <div style="color: #666;">click or space</div>
 10 |       </div>
 11 |     </div>
 12 |     <setbox class="set_box" ref="setRef" @closeSet="saveSet">
 13 |       <ul class="set_box_inner">
 14 |         <li>
 15 |           <div class="setName">Hour Format:</div>
 16 |           <ul class="pickItem">
 17 |             <li @click="hourFormat=0" :class="{'pick-active':hourFormat===0}">12h</li>
 18 |             <li @click="hourFormat=1" :class="{'pick-active':hourFormat===1}">24h</li>
 19 |             <li @click="hourFormat=2" :class="{'pick-active':hourFormat===2}">024h</li>
 20 |           </ul>
 21 |         </li>
 22 |         <li>
 23 |           <div class="setName">Scale:</div>
 24 |           <slider v-model="scale"></slider>
 25 |           <div style="width:32px;padding-left: 8px;">{{scale}}</div>
 26 |         </li>
 27 |         <li>
 28 |           <div class="setName">Brightness:</div>
 29 |           <slider v-model="brightness"></slider>
 30 |           <div style="width:32px;padding-left: 8px;">{{brightness}}</div>
 31 |         </li>
 32 |         <li>
 33 |           <div class="setName">Show:</div>
 34 |           <div @click="showBg=!showBg" style="margin-right: 12px;cursor: pointer;">
 35 |             <input type="checkbox" v-model="showBg" style="margin: 0;vertical-align: middle;width: 18px;height: 18px;cursor: pointer;">
 36 |             <span>Background</span>
 37 |           </div>
 38 |           <div @click="showSecond=!showSecond" style="cursor: pointer;">
 39 |             <input type="checkbox" v-model="showSecond" style="margin: 0;vertical-align: middle;width: 18px;height: 18px;cursor: pointer;">
 40 |             <span>Second</span>
 41 |           </div>
 42 |         </li>
 43 |         <li>
 44 |           <div class="setName">Stopwatch:</div>
 45 |           <button class="timerBtn startBtn" @click="stopWatch">Start</button>
 46 |           <button class="timerBtn startBtn" @click="cancelWatch">Cancel</button>
 47 |         </li>
 48 |         <li>
 49 |           <div class="setName">Timer:</div>
 50 |           <button class="timerBtn" @click="getTimer(5)">
 51 |             <span class="iconTime"></span>
 52 |             <span style="vertical-align: middle;">5m</span>
 53 |           </button>
 54 |           <button class="timerBtn" @click="getTimer(10)">
 55 |             <span class="iconTime"></span>
 56 |             <span style="vertical-align: middle;">10m</span>
 57 |           </button>
 58 |           <button class="timerBtn" @click="getTimer(25)">
 59 |             <span class="iconTomato"></span>
 60 |             <span style="vertical-align: middle;">25m</span>
 61 |           </button>
 62 |           <button class="timerBtn" @click="cancelTimer" style="margin-right: 0px;">
 63 |             <span class="iconCancel"></span>
 64 |             <span style="vertical-align: middle;">Off</span>
 65 |           </button>
 66 |         </li>
 67 |         <li>
 68 |           <div class="setName">My Timer:</div>
 69 |           <timePicker :numRange="24" v-model="my_h"></timePicker>
 70 |           <timePicker :numRange="60" v-model="my_m"></timePicker>
 71 |           <timePicker :numRange="60" v-model="my_s"></timePicker>
 72 |           <button class="timerBtn" @click="getTimer(0)" style="margin-left: 4px;">Start</button>
 73 |           <!-- <span style="font-size: 8px;">{{my_h+' '+my_m+' '+my_s}}</span> -->
 74 |         </li>
 75 |       </ul>
 76 |       <footer style="position: relative;margin: -2px 20px 0px;">
 77 |         <a href="https://github.com/lufunc/timer" target="_blank" style="color: #666;">1.0.0 @lufunc 2021</a>
 78 |         <span style="position: absolute;right: 0;color: #fff;">F11 - Full Screen</span>
 79 |       </footer>
 80 |     </setbox>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import { reactive, toRefs, onMounted } from 'vue'
 86 | import clock from './components/clock'
 87 | import setbox from './components/setbox'
 88 | import slider from './components/slider'
 89 | import timePicker from './components/timePicker'
 90 | import { getClock, zeroNum } from './utils/getnum'
 91 | export default {
 92 |   components: { clock, setbox, slider, timePicker },
 93 |   setup () {
 94 |     const data = reactive({
 95 |       setRef: null,
 96 |       // clock content
 97 |       num_h: '你',
 98 |       num_m: '好',
 99 |       num_s: '!',
100 |       // setting
101 |       hourFormat: 0, // 12h 24h 024h
102 |       scale: 100,
103 |       brightness: 100,
104 |       showBg: true,
105 |       showSecond: true,
106 |       timeMode: 0, // clock timer stopWatch
107 |       tempTime: 0,
108 |       stopTime: 0,
109 |       watching: true,
110 |       my_h: 0,
111 |       my_m: 0,
112 |       my_s: 0,
113 |       setShow: null
114 |     })
115 |     const formatNum = (n) => {
116 |       if (data.hourFormat < 2) {
117 |         return n
118 |       } else {
119 |         return zeroNum(n)
120 |       }
121 |     }
122 |     const getTimer = (n) => {
123 |       data.watching = true
124 |       let t = 0
125 |       if (n === 0) {
126 |         t = (data.my_h * 3600 + data.my_m * 60 + data.my_s) * 1000
127 |         console.log('t', t)
128 |       } else {
129 |         t = 1000 * 60 * n
130 |       }
131 |       const temp = new Date().getTime()
132 |       data.tempTime = temp + t
133 |       data.timeMode = 1
134 |       data.setRef.hidesetF()
135 |     }
136 |     const _getTimer = () => {
137 |       if (data.watching) {
138 |         const temp = new Date().getTime()
139 |         let t = data.tempTime - temp
140 |         if (t <= 0) return { h: 'ok', m: 'ok', s: 'ok' }
141 |         t = parseInt(t / 1000)
142 |         const h = parseInt(t / 3600)
143 |         const m = parseInt(t / 60) % 60
144 |         const s = t % 60
145 |         return { h, m, s }
146 |       } else {
147 |         return {
148 |           h: data.num_h,
149 |           m: data.num_m,
150 |           s: data.num_s
151 |         }
152 |       }
153 |     }
154 |     const cancelTimer = () => {
155 |       data.timeMode = 0
156 |       data.setRef.hidesetF()
157 |     }
158 |     const stopWatch = () => {
159 |       data.tempTime = new Date().getTime()
160 |       data.watching = true
161 |       data.timeMode = 2
162 |       data.setRef.hidesetF()
163 |     }
164 |     const _stopWatch = () => {
165 |       if (data.watching) {
166 |         const temp = new Date().getTime()
167 |         let t = temp - data.tempTime
168 |         t = parseInt(t / 1000)
169 |         const h = parseInt(t / 3600)
170 |         const m = parseInt(t / 60) % 60
171 |         const s = t % 60
172 |         return { h, m, s }
173 |       } else {
174 |         return {
175 |           h: data.num_h,
176 |           m: data.num_m,
177 |           s: data.num_s
178 |         }
179 |       }
180 |     }
181 |     const cancelWatch = () => {
182 |       data.timeMode = 0
183 |       data.setRef.hidesetF()
184 |     }
185 |     const startStop = () => {
186 |       const t = document.getElementsByClassName('pic_set')[0]
187 |       t.style.opacity = 1
188 |       if (data.setShow) clearTimeout(data.setShow)
189 |       data.setShow = setTimeout(() => {
190 |         t.style.opacity = ''
191 |       }, 400)
192 |       if (data.watching) {
193 |         data.watching = false
194 |         data.stopTime = new Date().getTime()
195 |       } else {
196 |         data.watching = true
197 |         const temp = new Date().getTime()
198 |         data.tempTime = data.tempTime + temp - data.stopTime
199 |       }
200 |     }
201 |     setInterval(() => {
202 |       let res = {}
203 |       const m = data.timeMode
204 |       if (m === 0) {
205 |         res = getClock()
206 |       } else if (m === 1) {
207 |         res = _getTimer()
208 |       } else if (m === 2) {
209 |         res = _stopWatch()
210 |       }
211 |       data.num_h = formatNum(res.h)
212 |       data.num_m = zeroNum(res.m)
213 |       data.num_s = zeroNum(res.s)
214 |     }, 200)
215 |     const saveSet = () => {
216 |       const arr = ['hourFormat', 'scale', 'brightness', 'showBg', 'showSecond', 'my_h', 'my_m', 'my_s']
217 |       const info = {}
218 |       for (const k of arr) {
219 |         info[k] = data[k]
220 |       }
221 |       const t = JSON.stringify(info)
222 |       localStorage.info = t
223 |     }
224 |     const readSet = () => {
225 |       if (localStorage.info) {
226 |         const info = JSON.parse(localStorage.info)
227 |         for (const k in info) {
228 |           data[k] = info[k]
229 |         }
230 |       }
231 |     }
232 |     readSet()
233 |     onMounted(() => {
234 |       document.onkeydown = (e) => {
235 |         // console.log('e.keyCode', e.keyCode)
236 |         if (e.keyCode === 32 || e.keyCode === 13) {
237 |           startStop()
238 |         }
239 |       }
240 |     })
241 |     const ttt = () => {
242 |       console.log('ttt')
243 |     }
244 |     return {
245 |       ...toRefs(data),
246 |       getTimer,
247 |       cancelTimer,
248 |       stopWatch,
249 |       startStop,
250 |       cancelWatch,
251 |       saveSet,
252 |       ttt
253 |     }
254 |   }
255 | }
256 | </script>
257 | 
258 | <style lang="less">
259 | @import './assets/base';
260 | @import './assets/images';
261 | .bg{
262 |   position: fixed;
263 |   top: 0;
264 |   bottom: 0;
265 |   left: 0;
266 |   right: 0;
267 |   background-color: #000;
268 | }
269 | .timer{
270 |   position: absolute;
271 |   top: 50%;
272 |   width: 100%;
273 |   transform: translateY(-50%);
274 |   display: flex;
275 |   justify-content: space-evenly;
276 | }
277 | .timer_hm{
278 |   width: 47.5vw;
279 |   height: 47.5vw;
280 | }
281 | .timer_hms{
282 |   width: 30vw;
283 |   height: 30vw;
284 | }
285 | .watchBtn{
286 |   position: absolute;
287 |   width: 100%;
288 |   height: 100%;
289 |   background-color: rgba(255, 255, 255, 0.1);
290 |   text-align: center;
291 |   opacity: 0;
292 |   transition: all 0.3s;
293 |   cursor: pointer;
294 |   &:hover{
295 |     opacity: 1;
296 |   }
297 |   &:active{
298 |     background-color: rgba(255, 255, 255, 0);
299 |   }
300 |   &>div{
301 |     position: absolute;
302 |     left: 50%;
303 |     transform: translate(-50%,-50%);
304 |   }
305 |   &>div:first-child{
306 |     font-size: 180px;
307 |     top: 46%;
308 |   }
309 |   &>div:last-child{
310 |     top: 90%;
311 |   }
312 | }
313 | .set_box{
314 |   position: fixed;
315 |   bottom: 0;
316 |   right: 0;
317 | }
318 | .set_box_inner{
319 |   padding: 20px;
320 |   padding-bottom: 0px;
321 |   color: #fff;
322 |   font-size: 18px;
323 |   &>li{
324 |     display: flex;
325 |     align-items: center;
326 |     margin-bottom: 8px;
327 |   }
328 | }
329 | .setName{
330 |   width: 116px;
331 |   margin-right: 12px;
332 |   text-align: right;
333 | }
334 | .pickItem{
335 |   display: flex;
336 |   text-align: center;
337 |   border-radius: 6px;
338 |   cursor: pointer;
339 |   &>li{
340 |     box-sizing: border-box;
341 |     width: 60px;
342 |     height: 24px;
343 |     line-height: 22px;
344 |     border: 1px solid #666;
345 |     border-right: 0;
346 |     &:first-child{
347 |       border-top-left-radius: inherit;
348 |       border-bottom-left-radius: inherit;
349 |     }
350 |     &:last-child{
351 |       border-right: 1px solid #666;
352 |       border-top-right-radius: inherit;
353 |       border-bottom-right-radius: inherit;
354 |     }
355 |   }
356 | }
357 | .pick-active{
358 |   color: #333;
359 |   background-color: #fff;
360 | }
361 | .timerBtn{
362 |   box-sizing: border-box;
363 |   width: 60px;
364 |   height: 24px;
365 |   border-radius: 4px;
366 |   margin-right: 6px;
367 |   background-color: #fff;
368 |   color: #1c1c1c;
369 |   font-size: 16px;
370 |   // font-size: 18px;
371 |   cursor: pointer;
372 |   &:active{
373 |     background-color: #ddd;
374 |   }
375 | }
376 | .startBtn{
377 |   background-color: #666;
378 |   color: #fff;
379 |   &:active{
380 |     background-color: #555;
381 |   }
382 | }
383 | .iconTime,.iconTomato,.iconCancel{
384 |   display: inline-block;
385 |   width: 20px;
386 |   height: 20px;
387 |   vertical-align: middle;
388 |   background-size: contain;
389 | }
390 | .iconTime{
391 |   background-image: url(@timer);
392 | }
393 | .iconTomato{
394 |   margin-top: -3px;
395 |   background-image: url(@tomato);
396 | }
397 | .iconCancel{
398 |   background-image: url(@cancel);
399 | }
400 | </style>
401 | 


--------------------------------------------------------------------------------
/src/assets/base.less:
--------------------------------------------------------------------------------
 1 | body{
 2 |   margin: 0;
 3 | }
 4 | ul{
 5 |   margin: 0;
 6 |   padding: 0;
 7 |   list-style: none;
 8 | }
 9 | button { border:none; padding:0;margin:0;outline-style:none; }
10 | 


--------------------------------------------------------------------------------
/src/assets/images.less:
--------------------------------------------------------------------------------
1 | @set_pic : 'data:image/png;base64,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';
2 | 
3 | @tomato: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEnElEQVRYR71XbUybVRR+zi2F0Q/o2IBiyYBg1B+6j8QfOpeJoZhFVuzix0wwDHRZYoiBGRJN/CExxj+aAFGXbJoMfmhEMy3r5hLBrBgCxAwzNkeo24BNwY0NKG35avu+17yFt+v315zvz/c85znPOffcc+8lJPlpTzXXu15q74wH13z3dj5TsM+cmStvwHRiORlqSgYkYbTdjdOeyxN71z46dz2aj/aHpj0EnOLOpSlX169TOP/nwWS4kxaQ823jrGfs7/HVD3v28gqzblUp7JADvPl84XNnytXvE5Dh7h6EcMv5Kvrt3/9nAqSABYcfurnscGkvWu4uFpEyVyY/Xa5GozEfIiN4xv5C2S9Xb/3Gyt5TC6yHbBZHIhFxKyAFXs4Qm0SgefvrBt2cVommk5fw7loOODiO7dTh46fz/DH4mhfOThsGhWJsp03gHA4GtKt8rCOekJgC3FWmes6pjQg6KcATtQbM52SiYOA6bOMKHNlXgIFiVSDB1UE7XhuZwxcZRSFJS0KI+FFNrzVqA0cIkLJeUgptANUHM8kCpEz1HuC2VhkwS//Er/pxmUqQTxkxqs47Nb3WhnBjhABXlclGoGfDgbKAaOzc44PJasfx2XsViYrj3KLtsx4ItoUIcFfVSGU6FO68kMXwZK0Bq1mxsgO4IKJl4A7eGUu0/UMrERDgMta0EuGD8OBLSsIBcxGubM1K1NB++zOTLnwyuIASpxAbz/lRTZ+1XQL4BUjr7s4QJ+WGkz2XM4C6F/QYMmSHrDdl3Vv/aFFI5Kj7w4n6Ky484vBGQKTG1PhYmbQ7/AKilX5RSairLsSFovXg3CvAa5/G6vA15LzyFJCrAhc5lq0j8M0sAL7QjHWc4S2FDi1sC7LAouns0vSerqf1rhcXghF3sxlertHjqi4Tvuk5eOz/wHvtNrZ5gQ6mx/FKA4Ye2+zf+xVfDuNzpkdezO6PvhKBKkj7HaCTMsxarkL3oxpM37yDC/YJGFZE1JAW1UyNPaSCAoRPd2jRtnsrhHk3Wr4ZR4tiS1L9EQniDeQymixE9KJsdHAB7eI8ssFQTWo8zjZF+J0rU+HwvkJ4p2bRdnYGtSwwmVMSwjnvoVj7Ph7TeJ4SlQeLsTYygdPDK9jN4u//WFwcvJ9cxhoHEVJKYUVBePhIKZbO/o7JG1psTnH9ZUH+Me2uquEp1W0DXH7IAPXXQ7jk25aOe8CH3EbTFIhKUmWprsxFyc92HFPoU3UNwvPRtHpAYjih51DPONNuQP9skXog1vxPlNYE90AFgp7iT8UEPB20VGkyc0Y/Jgr4YOy+XeujOM0+uC9RnN/Q9FlLZQHNIGq7L8JUnTdOxMBx/P9WgY9qeq07Jc1B94H9FUTsfKqJpIf37dL0/nQxRIC/F8IOpvTIE3nxhuALasSd8MGKCA0eUQFZu8u4vwJgllTPiJiHDsciIJq1fWds4ZiY74KVCnOpoBRbo11SExU5zN6l9rLmWI+ThG/D9WpQc/CdIUkBXQova822Wabi4RMKkJ39zzSFUMEZmTm4NEB0AG08UPkoBxwEmiKRW1SCwpbMu1Di/hfd0smNt8fdPgAAAABJRU5ErkJggg==';
4 | 
5 | @timer: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADTUlEQVRYR8XXR6glVRAG4G/MoCCKKAZMiIJpM+a4EhMqKujCjaPO4AyDCRUDoohgQlTMgmEnKAbEuBJMiIoLc8KAAbOCCbP8j7rSr+d2376+B692955z6vynqv6/qhdZYFu0wPebK4DbsAW+wCd4BC9P86i5AFgLv4257DVcj7vx1yQwcwGwHn7En/gKm7Uuexdn4PE+EPMB4FtshC1xOE7Cbo1Lby0g46LVWQOrYz+80BHm+B9FYASg+dADcRN2qj9fwr74ox2NrghciXNxPq7oCGEfgBzJI67GmXX+Bpw2BMBeeJ6Z6CxHQjjO1sVP+Bob9+T5QlxW60nRY8297QgE9dvYDs9hf/yDTSqvj7YuSqV/hEt6AOSOp5C0vI8dm6loA1iGcPt3bFX8ju99CtB9OBXfTaJXa30bvFdpSUquG623AXyIrXELVrSc5NDp+AYn4+EpQaQo4zM6ses4ANvjnVrYfYyiRXhexQ61555y+MNAIGHVM7U3EUnqZtEwBXcz4nDDyn3b9y4FLGBiX2LJJLGpvWvg+6Jv0phUzwJwOc4rlAf0vOosXNNav7NqYxWet/a9iET3UlzcBnAXTkQK7biBVd3cFu3IA/rsIRyFO3BKG0D+jIzei+MnONoUb2CDxr6ni2p9R+/HMV0AIhYRjSGOcskReLCold9Ruahdnz1bkpy7Luoqwo+LikOKe08chA8QVkS0uiyUTxGuX+wJ1WcVYfgfHYil2l8fgmCKPXuXxOdI1PCtNoD8jkjsjCEFNcXdM1tvx1J8js1Hh9tKmDxmmvm5pDitdj5sW2RASa8Jhc/uArBmaXb6QKRz5TzcnkemAx5SE1R8pxZmbNw8cDCeqPVj8cAcQVyFc8pHROzapr+ugSRpSDp+wQmIgExr8R26XVAHMzEf2WZKF4BofRrHHnU4Q0l4m044xFJk0YSja/MrNeL92j7cN5SuU+FK44glGjfWuD1DoZaF35kbDkXmirVr/clSv5xfxYZMxYcVkLTrkUUj3sRn1d0yxmUAXa2xJ0NN8p0U/N0VtiEAcjb0SaPKQBKR6rNQOIUbWc/XUq8NBdB0srg6Wj5E8lmWr598mn1aY1vmv0lt+T9//wfApEdNtb7gAP4FyRimIUFX3cMAAAAASUVORK5CYII=';
6 | 
7 | @cancel: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEZklEQVRYR8VXW29UVRT+vjOd6YVyDUhSGjNtz21SfVBelCiYELWiQYJoTKg+4A+g+GoilBfji2B8FRMlJF5QkCgCMSY0pg9GfZFmztlzOh1IaSQQikC5zHT2MmecqdPpTGdKCezHc9blW5f9rbWJh3z4kP2jYQCmaTaT0Y2k9AnxNARrAawDmafIJRATEPwmwp9iMePsyMhItpHgGgJgOs4bFH5C8pFGjAL4W0PvDnz/63ry8wLo6upaG422fAZiS9HQVQiOAfgOyKcnJ6Pjq1ZNMwt0NGlaJLeB2A5gZUFecDKXu7NrbGzsUi0gNQGYpvuCYeAIyNUCXIDWH6RS/iEAufmi6u3tjWWz07tAvkeyEyJXtMbOIPDOVNOrCiB0TgOnSBKC77PZ229mMpk79dJZ/j8ej7dEYy1HSG4XEdGULaO+f6rSxhwAtm2vE0TOkVghwMcpPzmwEMeVspaVOEADAyK4RuQfU0pdLJeZA8CyE0MknhWRH1LK21qo5OIOLcc9TnCrCIZSKrmpJgDLcl+jwaMicnHq5nV7YmLiVkVaV2QymWvz4YnH43NkOjo62pa0L1Mk14mWHamU923JxqwMWLY7SrJbC94OVPJwuSPLcvaD3Dmdu7uhVlf/Vz5jSIDPA+XtL9c37cRbBvGFiKRTyuuZA6Cnx10faeLvgGSU73WVKxcj+CsEFxog9MbKWhacMzJM4FERjN6+dePx8fHx2+V2bNtNg+zSeawPguSf4b+ZDNi2uw/kXtE4mEol91SmOeSEpmjzcAEEcIGS31ACUe4cED+XvbupWpZKDQmRQaW8fRUAEj+D2Kzz0hcE3ulqda4GosA3xchD5xD9jFLqSjX9ArdEeBoivyjlbZ4NwHF9gPZ0Tpx02lO1Gq3AjrHmswAdAOcFYJj2es5De93drt0UpQ+IUr4X6v9fAstJTBFo0/nc8iAIrs/X6bZtrwaNX4sgIIIRIv9crchLtkzTXGZEov8AmFJ+sr0yA9cBLp28aiy9fHnk5kIANBJ9aG/Nmt72lav0DUBuKN9bVgnACyOqV4KK6M8jjB+MNwKirAS+8j23VhO+WGtwlNe/dBMW0oSWlXieBs5UbULTdt83yEGIHFDKe3cx17DWTbBt9yOQe7TI3hJRzfCAaSaeNCL4oxoRdXZ2tra2tZ9rlIjCctyauvnEgogojNiyEwGJHg3dH/j+kQoWGxSgvy4VMzIsIofmULHj9BswDtek4tCZaTo7jIjxzWKGUXd39/J0Oh1etZkTZrBtSXsAsEPn9etB4B+tOoyKWThLYqNATqR8b9t9Gce2e4LkK3XHcQjgvi8kTuIggd0NLyQhiB7H6TOEJxe7ksVirV+CeDVcyUQjnDFz9sKGltKQ8zX0h4Hvf/pAltJSgxSn3yGSLxe/XRXgOLQcmzYkFQMmwu+11nIR+XE6d/ede1rLy7v4Xh4mEAwolfxqvpkyi4rrCZY9zV4S4qkH+jSrB24x/xt6Gy7GQT3dfwGYhJY/e5MivQAAAABJRU5ErkJggg==';
8 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lufunc/timer/73dfbb72268ce741cdd0b2438970bbe594954a93/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/clock.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="clock">
  3 |     <canvas :id="cid" class="clock_canva" width="800" height="800"></canvas>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import { onMounted, reactive, watch } from 'vue'
  9 | import easeInout from '../utils/easeinout'
 10 | export default {
 11 |   props: {
 12 |     cid: String,
 13 |     msg: {
 14 |       default: '13'
 15 |     },
 16 |     bg: {
 17 |       default: true
 18 |     },
 19 |     ampm: {
 20 |       default: false
 21 |     }
 22 |   },
 23 |   setup (props) {
 24 |     const data = reactive({
 25 |       r: 64,
 26 |       fontSize: 660,
 27 |       fontFamily: 'Arial',
 28 |       flipping: false,
 29 |       tempVal: '08',
 30 |       tempAp: 'AM',
 31 |       ctx: null
 32 |     })
 33 |     const getAp = () => {
 34 |       const res = {}
 35 |       res.ap = ''
 36 |       res.num = props.msg
 37 |       if (props.ampm && typeof (props.msg) === 'number') {
 38 |         if (props.msg < 13) {
 39 |           res.ap = 'AM'
 40 |         } else if (props.msg < 24) {
 41 |           res.ap = 'PM'
 42 |           res.num -= 12
 43 |         }
 44 |       }
 45 |       return res
 46 |     }
 47 |     const init = () => {
 48 |       const canvas = document.querySelector('#' + props.cid)
 49 |       if (!canvas.getContext) return
 50 |       const ctx = canvas.getContext('2d')
 51 |       data.ctx = ctx
 52 |       console.log('init')
 53 |       ctx.translate(0, 400)
 54 |       ctx.textAlign = 'center'
 55 |       ctx.textBaseline = 'middle'
 56 |       ctx.font = 'normal bold ' + data.fontSize + 'px ' + data.fontFamily
 57 |       const { ap, num } = getAp()
 58 |       data.tempAp = ap
 59 |       data.tempVal = num
 60 |       drawPage(num, ap, true)
 61 |       drawPage(num, ap, false)
 62 |     }
 63 |     const clipArea = (up) => {
 64 |       const ctx = data.ctx
 65 |       const r = data.r
 66 |       ctx.beginPath()
 67 |       ctx.moveTo(0, 0)
 68 |       ctx.lineTo(800, 0)
 69 |       if (up) {
 70 |         ctx.lineTo(800, r - 400)
 71 |         ctx.quadraticCurveTo(800, -400, 800 - r, -400)
 72 |         ctx.lineTo(r, -400)
 73 |         ctx.quadraticCurveTo(0, -400, 0, r - 400)
 74 |       } else {
 75 |         ctx.lineTo(800, 400 - r)
 76 |         ctx.quadraticCurveTo(800, 400, 800 - r, 400)
 77 |         ctx.lineTo(r, 400)
 78 |         ctx.quadraticCurveTo(0, 400, 0, 400 - r)
 79 |       }
 80 |       ctx.clip()
 81 |     }
 82 |     const gradient = (ctx, c1, c2) => {
 83 |       const lg = ctx.createLinearGradient(0, -400, 0, 400)
 84 |       lg.addColorStop(0, c1)
 85 |       lg.addColorStop(1, c2)
 86 |       return lg
 87 |     }
 88 |     const drawBg = () => {
 89 |       const ctx = data.ctx
 90 |       ctx.fillStyle = gradient(ctx, '#161616', '#0c0c0c')
 91 |       ctx.fillRect(0, -400, 800, 800)
 92 |     }
 93 |     const drawAmpm = (ap) => {
 94 |       const ctx = data.ctx
 95 |       // console.log('ap', ap)
 96 |       const x = 100; const y = 264
 97 |       ctx.save()
 98 |       ctx.font = 'normal bold 80px ' + data.fontFamily
 99 |       if (ap === 'AM') {
100 |         ctx.fillStyle = '#bbbbbb'
101 |         ctx.fillText(ap, x, -y)
102 |       } else {
103 |         ctx.fillStyle = '#b9b9b9'
104 |         ctx.fillText(ap, x, y)
105 |       }
106 |       ctx.restore()
107 |     }
108 |     const drawText = (s) => {
109 |       const ctx = data.ctx
110 |       ctx.fillStyle = gradient(ctx, '#bcbcbc', '#b8b8b8')
111 |       ctx.fillText(s, 400, 0)
112 |     }
113 |     const blackLine = (w = 12) => {
114 |       const ctx = data.ctx
115 |       ctx.fillStyle = '#000000'
116 |       ctx.fillRect(0, -w / 2, 800, w)
117 |     }
118 |     const drawPage = (s, ap, up = true, sy = 1) => {
119 |       const ctx = data.ctx
120 |       ctx.save()
121 |       ctx.scale(1, sy) // scale Y
122 |       clipArea(up)
123 |       if (props.bg) drawBg()
124 |       else ctx.clearRect(0, -400, 800, 800)
125 |       if (props.ampm) drawAmpm(ap)
126 |       drawText(s)
127 |       blackLine()
128 |       ctx.restore()
129 |     }
130 |     const drawFlip = () => {
131 |       if (data.flipping) return
132 |       data.flipping = true
133 |       const timer = new Date().getTime()
134 |       const duration = 600
135 |       const { ap, num } = getAp()
136 |       const flipping = () => {
137 |         const temp = new Date().getTime()
138 |         const t = temp - timer
139 |         if (t > duration) {
140 |           data.flipping = false
141 |           data.tempVal = num
142 |           data.tempAp = ap
143 |           drawPage(num, ap)
144 |           drawPage(num, ap, false)
145 |           return
146 |         }
147 |         let drawUp = true // Page turning is done and draw it again
148 |         const pi = Math.PI
149 |         const sy = Math.sin(easeInout(t, -90, 90, duration) * pi / 180)
150 |         if (t < duration / 2) {
151 |           drawPage(num, ap)
152 |           drawPage(data.tempVal, data.tempAp, true, -sy)
153 |         } else {
154 |           if (drawUp) {
155 |             drawUp = false
156 |             drawPage(num, ap)
157 |           }
158 |           drawPage(data.tempVal, data.tempAp, false)
159 |           drawPage(num, ap, false, sy)
160 |         }
161 |         requestAnimationFrame(flipping)
162 |       }
163 |       flipping()
164 |     }
165 |     onMounted(() => {
166 |       init()
167 |       // drawFlip()
168 |     })
169 |     // const ttt = () => {
170 |     //   console.log('tttx')
171 |     //   const timer = new Date().getTime()
172 |     //   const ttt2 = () => {
173 |     //     console.log('ttt2')
174 |     //     const temp = new Date().getTime()
175 |     //     const t = temp - timer
176 |     //     if (t > 600) return
177 |     //     requestAnimationFrame(ttt2)
178 |     //   }
179 |     //   ttt2()
180 |     // }
181 |     watch([() => props.msg, () => props.ampm],
182 |       () => {
183 |         // console.log('watch', props.msg, props.ampm)
184 |         drawFlip()
185 |       })
186 |     watch(() => props.bg, () => { drawFlip() })
187 |     // watchEffect(()=>{
188 |     //   console.log('watchEffect',props.msg,props.ampm)
189 |     //   if(data.ctx){
190 |     //     console.log('ctx')
191 |     //     // ttt()
192 |     //     drawFlip()
193 |     //   }
194 |     // })
195 |   }
196 | }
197 | </script>
198 | 
199 | <style lang="less">
200 | .clock{
201 |   width: 240px;
202 |   height: 240px;
203 | }
204 | .clock_canva{
205 |   width: 100%;
206 |   height: 100%;
207 | }
208 | </style>
209 | 


--------------------------------------------------------------------------------
/src/components/setbox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="setbox">
  3 |     <div class="set-warp" @mouseleave="hideSet">
  4 |       <div class="setting" @mouseenter="isShow=true">
  5 |         <div class="pic_set"></div>
  6 |       </div>
  7 |     </div>
  8 |     <div class="set_item setLoad" ref="setDom" @mouseleave="hideSet" v-show="isShow">
  9 |       <slot></slot>
 10 |     </div>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import { ref, onMounted } from 'vue'
 16 | export default {
 17 |   setup (props, { emit }) {
 18 |     const isShow = ref(false)
 19 |     const setDom = ref(null)
 20 |     const hidesetF = () => {
 21 |       isShow.value = false
 22 |       emit('closeSet')
 23 |     }
 24 |     const hideSet = (e) => {
 25 |       if (e.toElement && setDom.value !== e.toElement) {
 26 |         hidesetF()
 27 |       }
 28 |     }
 29 |     onMounted(() => {
 30 |       setDom.value.classList.remove('setLoad')
 31 |     })
 32 |     return {
 33 |       isShow,
 34 |       setDom,
 35 |       hideSet,
 36 |       hidesetF
 37 |     }
 38 |   }
 39 | }
 40 | </script>
 41 | 
 42 | <style lang="less">
 43 | @import '../assets/images';
 44 | .setbox{
 45 |   width: 200px;
 46 |   height: 200px;
 47 |   &:hover .pic_set{
 48 |     opacity: 1;
 49 |   }
 50 | }
 51 | .set-warp{
 52 |   display: inline-block;
 53 |   padding: 20px 20px 12px 24px;
 54 |   margin-top: 94px;
 55 |   margin-left: 78px;
 56 |   // background-color: #fff;
 57 | }
 58 | .setting{
 59 |   width: 36px;
 60 |   height: 36px;
 61 |   padding: 8px;
 62 |   &:hover>div{
 63 |     transform: rotateZ(120deg);
 64 |   }
 65 | }
 66 | .pic_set{
 67 |   width: 36px;
 68 |   height: 36px;
 69 |   background-image: url(@set_pic);
 70 |   transition: all 0.5s ease-in-out;
 71 |   opacity: 0;
 72 | }
 73 | .set_item{
 74 |   position: absolute;
 75 |   top: -208px;
 76 |   left: -256px;
 77 |   width: 432px;
 78 |   height: 312px;
 79 |   box-sizing: border-box;
 80 |   background-color: #262729;
 81 |   border-radius: 20px;
 82 |   border: 1px solid #666;
 83 |   &::before{
 84 |     content: '';
 85 |     position: absolute;
 86 |     bottom: 0;
 87 |     right: 36px;
 88 |     width: 20px;
 89 |     height: 20px;
 90 |     background-color: #262729;
 91 |     border: 1px solid #666;
 92 |     border-top-color: transparent;
 93 |     border-left-color: transparent;
 94 |     transform: translateY(50%) rotateZ(45deg);
 95 |   }
 96 | }
 97 | .setLoad{
 98 |   display: block !important;
 99 |   visibility: hidden;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/slider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="slider" ref="mySlider" :style="{'height':barHeight}" @mousedown="sliderHandle">
 3 |     <div class="bar-line-right" :style="{'width':barHeight,'height':lineHeight}"></div>
 4 |     <div class="bar-line" :style="{'width': 'calc(100% - '+barHeight+')','height':lineHeight,'background-size':modelValue+'%'}">
 5 |       <div class="bar-handle" :style="{'width':barHeight,'height':barHeight,'left':modelValue+'%'}"></div>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { ref } from 'vue'
12 | export default {
13 |   props: {
14 |     modelValue: Number,
15 |     barHeight: {
16 |       default: '20px'
17 |     },
18 |     lineHeight: {
19 |       default: '4px'
20 |     }
21 |   },
22 |   setup (props, { emit }) {
23 |     const mySlider = ref(null)
24 |     const sliderHandle = (event) => {
25 |       let x = props.barHeight.match(/(\d+)/)[1]
26 |       x = parseInt(x)
27 |       const temp = mySlider.value
28 |       const tl = temp.getBoundingClientRect().left
29 |       const tw = temp.offsetWidth
30 |       const numRange = (n) => {
31 |         let res = n
32 |         const max = tw - x
33 |         if (n < 0) res = 0
34 |         else if (n > max) res = max
35 |         emit('update:modelValue', parseInt(res * 100 / max))
36 |       }
37 |       numRange(event.pageX - tl - x / 2)
38 |       document.onmousemove = (e) => {
39 |         numRange(e.pageX - tl - x / 2)
40 |       }
41 |       document.onmouseup = () => {
42 |         document.onmousemove = null
43 |         document.onmouseup = null
44 |       }
45 |     }
46 |     return {
47 |       sliderHandle,
48 |       mySlider
49 |     }
50 |   }
51 | }
52 | </script>
53 | 
54 | <style lang="less">
55 | .slider{
56 |   position: relative;
57 |   width: 220px;
58 |   // background-color: chocolate;
59 |   cursor: pointer;
60 | }
61 | .bar-line{
62 |   position: absolute;
63 |   top: 50%;
64 |   left: 0;
65 |   transform: translateY(-50%);
66 |   background: -webkit-linear-gradient(#fff, #fff) no-repeat, rgba(255,255,255,0.25);
67 |   background-size: 0% 100%;
68 | }
69 | .bar-line-right{
70 |   position: absolute;
71 |   top: 50%;
72 |   right: 0;
73 |   transform: translateY(-50%);
74 |   background-color: rgba(255,255,255,0.25);
75 | }
76 | .bar-handle{
77 |   position: absolute;
78 |   top: 50%;
79 |   transform: translateY(-50%);
80 |   box-sizing: border-box;
81 |   border: 4px solid #fff;
82 |   background-color: #262729;
83 |   border-radius: 50%;
84 |   box-shadow: 0 0 0 4px #262729;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/timePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="time-panel-box">
  3 |     <div class="time-panel">
  4 |       <div class="scroll-box" ref="sb">
  5 |         <ul class="panel-item">
  6 |           <li v-for="(item,index) in temp" :key="index">{{item}}</li>
  7 |         </ul>
  8 |       </div>
  9 |       <div class="panel-up" @click="changeNum(-1)">︿</div>
 10 |       <div class="panel-down" @click="changeNum(1)">﹀</div>
 11 |     </div>
 12 |   </div>
 13 | 
 14 | </template>
 15 | 
 16 | <script>
 17 | import { reactive, toRefs, onMounted } from 'vue'
 18 | export default {
 19 |   props: {
 20 |     modelValue: Number,
 21 |     numRange: {
 22 |       default: 12
 23 |     }
 24 |   },
 25 |   setup (props, { emit }) {
 26 |     const data = reactive({
 27 |       val: 0,
 28 |       temp: [],
 29 |       sb: null,
 30 |       timeout: null
 31 |     })
 32 |     // console.log('props.numRange', props.numRange)
 33 |     const init = () => {
 34 |       for (let i = 0; i < props.numRange; i++) {
 35 |         const x = i > 9 ? i : '0' + i
 36 |         data.temp.push(x)
 37 |       }
 38 |     }
 39 |     init()
 40 |     const debounce = (fn, wait = 300) => {
 41 |       data.timeout = null
 42 |       return function () {
 43 |         clearTimeout(data.timeout)
 44 |         data.timeout = setTimeout(() => {
 45 |           fn.apply(this, arguments)
 46 |         }, wait)
 47 |       }
 48 |     }
 49 |     const changeNum = (n) => {
 50 |       if (data.timeout) clearTimeout(data.timeout)
 51 |       const e = data.sb
 52 |       const t = e.scrollTop
 53 |       const h = 24
 54 |       const tl = data.temp.length
 55 |       for (let i = tl - 1; i >= 0; i--) {
 56 |         if (t > h * i - h / 2) {
 57 |           // console.log('i', i)
 58 |           let x = i + n
 59 |           if (x < 0) x = 0
 60 |           if (x > tl - 1) x = tl - 1
 61 |           // console.log('x', x)
 62 |           e.scrollTop = h * x
 63 |           emit('update:modelValue', x)
 64 |           break
 65 |         }
 66 |       }
 67 |     }
 68 |     const comfirmNum = debounce(() => {
 69 |       changeNum(0)
 70 |     })
 71 |     onMounted(() => {
 72 |       data.sb.scrollTop = props.modelValue * 24
 73 |       setTimeout(() => {
 74 |         data.sb.addEventListener('scroll', comfirmNum)
 75 |       }, 0)
 76 |     })
 77 |     return {
 78 |       ...toRefs(data),
 79 |       changeNum,
 80 |       comfirmNum
 81 |     }
 82 |   }
 83 | }
 84 | </script>
 85 | 
 86 | <style lang="less">
 87 | .time-panel-box{
 88 |   height: 24px;
 89 |   padding: 16px 0;
 90 |   margin-right: 4px;
 91 |   &:hover .time-panel{
 92 |     overflow: visible;
 93 |   }
 94 | }
 95 | .time-panel{
 96 |   position: relative;
 97 |   background-color: #666;
 98 |   width: 48px;
 99 |   height: 24px;
100 |   border-radius: 4px;
101 |   line-height: 24px;
102 |   text-align: center;
103 |   overflow: hidden;
104 | }
105 | .panel-up,.panel-down{
106 |   position: absolute;
107 |   left: 50%;
108 |   width: 100%;
109 |   transform: translateX(-50%);
110 |   font-weight: 900;
111 |   cursor: pointer;
112 |   &:hover{
113 |     display: block;
114 |   }
115 | }
116 | .panel-up{
117 |   top: -100%;
118 |   background-image: linear-gradient(0deg, rgba(38, 39, 41,0), rgb(38, 39, 41) 100%);
119 | }
120 | .panel-down{
121 |   bottom: -100%;
122 |   background-image: linear-gradient(to bottom, rgba(38, 39, 41,0), rgb(38, 39, 41) 100%);
123 | }
124 | .scroll-box{
125 |   position: relative;
126 |   top: -16px;
127 |   height: 56px;
128 |   overflow-y: scroll;
129 |   color: #fff;
130 |   // &::-::-webkit-scrollbar
131 |   &::-webkit-scrollbar{
132 |     display: none;
133 |   }
134 | }
135 | .panel-item{
136 |   &::before{
137 |     content: "";
138 |     display: block;
139 |     height: 16px;
140 |   }
141 |   &::after{
142 |     content: "";
143 |     display: block;
144 |     height: 16px;
145 |   }
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | console.log = () => {}
5 | 
6 | createApp(App).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/utils/easeinout.js:
--------------------------------------------------------------------------------
 1 | const easeIn = (curtime, begin, end, duration) => {
 2 |   const x = curtime / duration
 3 |   const y = x * x
 4 |   return begin + (end - begin) * y
 5 | }
 6 | 
 7 | const easeOut = (curtime, begin, end, duration) => {
 8 |   const x = curtime / duration
 9 |   const y = -x * x + 2 * x
10 |   return begin + (end - begin) * y
11 | }
12 | 
13 | const easeInout = (curtime, begin, end, duration) => {
14 |   if (curtime < duration / 2) {
15 |     return easeIn(curtime, begin, (begin + end) / 2, duration / 2)
16 |   } else {
17 |     const curtime1 = curtime - duration / 2
18 |     const begin1 = (begin + end) / 2
19 |     return easeOut(curtime1, begin1, end, duration / 2)
20 |   }
21 | }
22 | 
23 | export default easeInout
24 | 


--------------------------------------------------------------------------------
/src/utils/getnum.js:
--------------------------------------------------------------------------------
 1 | export const zeroNum = (n) => {
 2 |   const str = n.toString()
 3 |   return str[1] ? n : '0' + str
 4 | }
 5 | 
 6 | export const getClock = () => {
 7 |   const t = new Date()
 8 |   const h = t.getHours()
 9 |   const m = t.getMinutes()
10 |   const s = t.getSeconds()
11 |   return { h, m, s }
12 | }
13 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   lintOnSave: false,
3 |   publicPath: './'
4 | }
5 | 


--------------------------------------------------------------------------------