├── 2020 ├── image │ └── profile.png ├── css │ └── style.css └── index.html ├── .gitignore ├── README.md ├── card ├── image │ └── profile.png ├── images │ └── image01.jpg ├── index.html └── css │ └── style.css ├── clock ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── login ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── button ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── douyin ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── jianzhi ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── loading ├── image │ └── profile.png ├── css │ ├── style3.css │ ├── style.css │ ├── style6.css │ ├── style4.css │ ├── style5.css │ └── style2.css └── index.html ├── login2 ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── login3 ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── calendar ├── image │ └── profile.png ├── css │ ├── style.css.map │ ├── style.scss │ └── style.css └── index.html ├── code-box ├── image │ └── profile.png ├── js │ └── index.js ├── index.html └── css │ └── style.css ├── line-font ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── page-404 ├── image │ └── profile.png ├── index.html ├── css │ └── style.css └── static │ └── 404.svg ├── split-font ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── todo-list ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── border-button ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── nintendo-switch ├── image │ └── profile.png ├── images │ └── switch.svg ├── index.html └── css │ ├── style.css.map │ ├── style.scss │ └── style.css ├── switch-button ├── image │ └── profile.png ├── index.html └── css │ └── style.css ├── hetongxue-piantou ├── image │ ├── profile.jpg │ └── profile.png ├── css │ └── style.css └── index.html └── docs ├── index.html ├── css └── style.css └── js ├── app.js └── vue.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.vscode 2 | 3 | */.vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML&CSS ONLY 2 | 3 | 使用 HTML 和 CSS 编写一些好看的效果 4 | 5 | 求star啊各位 -------------------------------------------------------------------------------- /2020/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/2020/image/profile.png -------------------------------------------------------------------------------- /card/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/card/image/profile.png -------------------------------------------------------------------------------- /card/images/image01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/card/images/image01.jpg -------------------------------------------------------------------------------- /clock/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/clock/image/profile.png -------------------------------------------------------------------------------- /login/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/login/image/profile.png -------------------------------------------------------------------------------- /button/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/button/image/profile.png -------------------------------------------------------------------------------- /douyin/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/douyin/image/profile.png -------------------------------------------------------------------------------- /jianzhi/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/jianzhi/image/profile.png -------------------------------------------------------------------------------- /loading/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/loading/image/profile.png -------------------------------------------------------------------------------- /login2/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/login2/image/profile.png -------------------------------------------------------------------------------- /login3/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/login3/image/profile.png -------------------------------------------------------------------------------- /calendar/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/calendar/image/profile.png -------------------------------------------------------------------------------- /code-box/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/code-box/image/profile.png -------------------------------------------------------------------------------- /line-font/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/line-font/image/profile.png -------------------------------------------------------------------------------- /page-404/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/page-404/image/profile.png -------------------------------------------------------------------------------- /split-font/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/split-font/image/profile.png -------------------------------------------------------------------------------- /todo-list/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/todo-list/image/profile.png -------------------------------------------------------------------------------- /border-button/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/border-button/image/profile.png -------------------------------------------------------------------------------- /nintendo-switch/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/nintendo-switch/image/profile.png -------------------------------------------------------------------------------- /switch-button/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/switch-button/image/profile.png -------------------------------------------------------------------------------- /hetongxue-piantou/image/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/hetongxue-piantou/image/profile.jpg -------------------------------------------------------------------------------- /hetongxue-piantou/image/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyingwei/html-css-only/HEAD/hetongxue-piantou/image/profile.png -------------------------------------------------------------------------------- /code-box/js/index.js: -------------------------------------------------------------------------------- 1 | function preview() { 2 | document.querySelectorAll("pre code").forEach((block) => { 3 | hljs.highlightBlock(block) 4 | }) 5 | } -------------------------------------------------------------------------------- /border-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button 8 | 9 | 10 |
11 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BUTTON 9 | 10 | 11 |
12 |
13 | 14 |
Email
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /douyin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 抖音, 9 | 10 | 11 |
12 | 抖 13 | 音 14 | ， 15 | 记 16 | 录 17 | 美 18 | 好 19 | 生 20 | 活 21 | ! 22 |
23 | 24 | -------------------------------------------------------------------------------- /split-font/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | to be or not to be,that's a question 9 | 10 | 11 |
12 |
to be or not to be
13 |
that's a question
14 |
to be or not to be
15 |
16 | 17 | -------------------------------------------------------------------------------- /page-404/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 404 - 页面丢失啦 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 |
404
16 |
你查看的页面貌似丢失了呢...
17 |
返回首页,查看更多内容.
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /switch-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CheckBox 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /line-font/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 线条字 8 | 9 | 10 |
11 | 12 | 13 | 14 | Microgoople 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /login2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login2 8 | 9 | 10 |
11 |
12 |
Login
13 |
14 | 15 | 16 |
Login
17 |
18 |
19 | Don`t have account? Sign up 20 |
21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /jianzhi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 剪纸效果 9 | 10 | 11 | 31 | 32 | -------------------------------------------------------------------------------- /loading/css/style3.css: -------------------------------------------------------------------------------- 1 | .loading3 .wrapper { 2 | text-align: center; 3 | } 4 | 5 | .loading3 .wrapper .item { 6 | display: inline-block; 7 | height: 30px; 8 | width: 30px; 9 | font-size: 0; 10 | transform: translateY(135px); 11 | } 12 | 13 | .loading3 .wrapper .item::before { 14 | content: ''; 15 | display: inline-block; 16 | height: 30px; 17 | width: 30px; 18 | background-color: crimson; 19 | border-radius: 15px; 20 | } 21 | 22 | .loading3 .wrapper .item:nth-child(1)::before { 23 | animation: loading3 2s infinite 0s; 24 | } 25 | .loading3 .wrapper .item:nth-child(2)::before { 26 | animation: loading3 2s infinite 0.2s; 27 | } 28 | .loading3 .wrapper .item:nth-child(3)::before { 29 | animation: loading3 2s infinite 0.4s; 30 | } 31 | 32 | @keyframes loading3 { 33 | 0% { 34 | transform: scale(1); 35 | } 36 | 50% { 37 | transform: scale(0.1); 38 | } 39 | 100% { 40 | transform: scale(1); 41 | } 42 | } -------------------------------------------------------------------------------- /loading/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: rgb(55, 40, 65); 12 | } 13 | 14 | .main-container { 15 | color: aliceblue; 16 | padding-top: 100px; 17 | } 18 | 19 | .line-container { 20 | width: 910px; 21 | height: 300px; 22 | margin: 0 auto; 23 | display: flex; 24 | flex-direction: row; 25 | } 26 | 27 | .line-container .loading { 28 | width: 300px; 29 | text-align: center; 30 | } 31 | 32 | .line-container .loading.loading1 { 33 | animation: loading1-rotate 2s infinite 0s; 34 | } 35 | 36 | .line-container .loading.loading1 .item { 37 | stroke: crimson; 38 | stroke-dasharray: 100; 39 | stroke-width: 10; 40 | stroke-linecap: round; 41 | fill: none; 42 | } 43 | 44 | @keyframes loading1-rotate { 45 | 0% { 46 | transform: rotate(0); 47 | } 48 | 100% { 49 | transform: rotate(360deg); 50 | } 51 | } 52 | 53 | 54 | -------------------------------------------------------------------------------- /todo-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Todo List 8 | 9 | 10 |
11 |
12 | 待办事项 13 |
14 |
15 | 23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /loading/css/style6.css: -------------------------------------------------------------------------------- 1 | .loading6 { 2 | animation: loading6 2s infinite linear 0s; 3 | } 4 | 5 | @keyframes loading6 { 6 | 0% { 7 | transform: rotate(0deg); 8 | } 9 | 100% { 10 | transform: rotate(360deg); 11 | } 12 | } 13 | 14 | .loading6 .item { 15 | width: 120px; 16 | height: 120px; 17 | background-color: crimson; 18 | transform: translateX(90px) translateY(90px); 19 | 20 | animation: loading6-item 2s infinite linear 0s; 21 | } 22 | 23 | @keyframes loading6-item { 24 | 0% { 25 | border-radius: 0; 26 | } 27 | 12.5% { 28 | border-bottom-right-radius: 60px; 29 | } 30 | 25% { 31 | border-radius: 0; 32 | } 33 | 37.5% { 34 | border-top-right-radius: 60px; 35 | } 36 | 50% { 37 | border-radius: 0; 38 | } 39 | 62.5% { 40 | border-top-left-radius: 60px; 41 | } 42 | 75% { 43 | border-radius: 0; 44 | } 45 | 87.5% { 46 | border-bottom-left-radius: 60px; 47 | } 48 | 100% { 49 | border-radius: 0; 50 | } 51 | } -------------------------------------------------------------------------------- /loading/css/style4.css: -------------------------------------------------------------------------------- 1 | .loading4 .item { 2 | width: 100px; 3 | height: 100px; 4 | border: 10px solid crimson; 5 | margin: 0 auto; 6 | margin-top: 90px; 7 | animation: loading4-box 2s infinite 0s; 8 | } 9 | 10 | .loading4 .item::before { 11 | content: ''; 12 | display: inline-block; 13 | vertical-align: top; 14 | width: 100px; 15 | height: 0px; 16 | background-color: crimson; 17 | animation: loading4 2s infinite 0s; 18 | } 19 | 20 | @keyframes loading4-box { 21 | 0% { 22 | transform: rotate(0deg); 23 | } 24 | 25% { 25 | transform: rotate(0deg); 26 | } 27 | 50% { 28 | transform: rotate(180deg); 29 | } 30 | 75% { 31 | transform: rotate(180deg); 32 | } 33 | 100% { 34 | transform: rotate(360deg); 35 | } 36 | } 37 | 38 | @keyframes loading4 { 39 | 0% { 40 | height: 0px; 41 | } 42 | 25% { 43 | height: 100px; 44 | } 45 | 50% { 46 | height: 100px; 47 | } 48 | 75% { 49 | height: 0px; 50 | } 51 | 100% { 52 | height: 0px; 53 | } 54 | } -------------------------------------------------------------------------------- /login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Login 9 | 10 | 11 |
12 |
13 |
登录
14 |
15 | 16 | 17 |
18 |
19 | 忘记密码 20 |
21 |
22 |
23 |
24 | 注册 25 |
26 |
27 | 提交 28 |
29 |
30 |
31 | 32 | -------------------------------------------------------------------------------- /card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | html&css-card 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |

Ales Smith

18 |

Applied Psychometrics specialist

19 |
20 |
21 |
    22 |
    • 23 |
    • 24 |
    • 25 |
    • 26 |
27 |
28 |
29 |
30 | 31 | -------------------------------------------------------------------------------- /login3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | LOGIN 9 | 10 | 11 |
12 |
13 | login 14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 |
24 |
login
25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /code-box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Code Box 12 | 13 | 14 |
15 |
16 | 21 |
22 |
23 | 
24 |         
25 |           

26 |         
27 |
28 |
29 |
30 | preview 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | HTML 与 CSS 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 预览效果 18 | 19 | 20 | 21 | 22 | 观看视频 23 | 24 |
25 |
26 |
27 | 28 | 29 | 38 | -------------------------------------------------------------------------------- /clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 会走的时钟 9 | 10 | 11 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
7
21 |
8
22 |
9
23 |
10
24 |
11
25 |
12
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /jianzhi/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: brown; 12 | } 13 | 14 | ul { 15 | list-style: none; 16 | padding-top: 100px; 17 | } 18 | 19 | ul > li { 20 | font-size: 0; 21 | text-align: center; 22 | } 23 | 24 | ul > li > span { 25 | display: inline-block; 26 | /* border: 1px solid #000; */ 27 | width: 200px; 28 | height: 200px; 29 | font-size: 200px; 30 | line-height: 200px; 31 | text-align: center; 32 | font-weight: bolder; 33 | position: relative; 34 | } 35 | 36 | ul > li > span::before ,ul > li > span::after { 37 | content: attr(data); 38 | display: inline-block; 39 | width: 200px; 40 | height: 200px; 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | } 45 | 46 | ul > li > span::before { 47 | color: rgba(0, 0, 0, 0.2); 48 | transform: skew(5deg) translateX(10px); 49 | transition: .2s; 50 | } 51 | 52 | ul > li > span::after { 53 | color: brown; 54 | text-shadow: 0 -2px 5px rgb(212, 93, 93); 55 | transform-origin: 100% 0 0; 56 | transform: rotateX(20deg); 57 | transition: .2s; 58 | } 59 | 60 | ul > li > span:hover::before { 61 | transform: skew(20deg) translateX(25px) scale(1,1.1) translateY(10px); 62 | } 63 | 64 | ul > li > span:hover::after { 65 | color: rgb(190, 60, 60); 66 | transform: rotateX(40deg) translateY(5px); 67 | } -------------------------------------------------------------------------------- /page-404/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: rgba(223, 223, 255, 0.39); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .main-container { 18 | width: 80%; 19 | max-width: 1000px; 20 | max-height: 500px; 21 | min-width: 600px; 22 | background-color: white; 23 | font-size: 0; 24 | border-radius: 20px; 25 | box-shadow: 0 0 50px 0 rgba(146, 146, 146, 0.63); 26 | } 27 | 28 | .main-container .container-item { 29 | display: inline-block; 30 | vertical-align: middle; 31 | width: 50%; 32 | } 33 | 34 | .main-container .img-container { 35 | background-color: rgba(253, 216, 168, 0.692); 36 | border-top-left-radius: 20px; 37 | border-bottom-left-radius: 20px; 38 | } 39 | 40 | .main-container .text-container .code { 41 | font-size: clamp(150px,20vw,200px); 42 | font-family: 'Arial Narrow'; 43 | color: rgb(86, 86, 253); 44 | font-weight: bolder; 45 | text-align: center; 46 | } 47 | 48 | .main-container .text-container .msg { 49 | font-size: 18px; 50 | text-align: center; 51 | font-weight: 200; 52 | margin-bottom: 20px; 53 | } 54 | 55 | .main-container .text-container .action { 56 | font-size: 15px; 57 | font-weight: 200; 58 | text-align: center; 59 | text-decoration-line: underline; 60 | cursor: pointer; 61 | } -------------------------------------------------------------------------------- /line-font/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | background-color: rgb(41, 45, 62); 8 | } 9 | 10 | .container { 11 | font-size: 120px; 12 | font-weight: bold; 13 | text-transform: uppercase; 14 | } 15 | 16 | svg { 17 | position: absolute; 18 | width: 100%; 19 | height: 100%; 20 | } 21 | 22 | .text { 23 | fill: none; 24 | stroke-width: 5; 25 | stroke-dasharray: 0 240; 26 | stroke-dashoffset: 0; 27 | } 28 | 29 | .text:nth-child(4n + 1) { 30 | stroke: rgb(39, 135, 238); 31 | animation: text1 4s ease-in-out forwards; 32 | } 33 | .text:nth-child(4n + 2) { 34 | stroke: rgb(47, 169, 92); 35 | animation: text2 4s ease-in-out forwards; 36 | } 37 | .text:nth-child(4n + 3) { 38 | stroke: rgb(249, 189, 56); 39 | animation: text3 4s ease-in-out forwards; 40 | } 41 | .text:nth-child(4n + 4) { 42 | stroke: rgb(235, 61, 50); 43 | animation: text4 4s ease-in-out forwards; 44 | } 45 | 46 | @keyframes text1 { 47 | 100% { 48 | stroke-dashoffset: 1000; 49 | stroke-dasharray: 60 180; 50 | } 51 | } 52 | 53 | @keyframes text2 { 54 | 100% { 55 | stroke-dashoffset: 1060; 56 | stroke-dasharray: 60 180; 57 | } 58 | } 59 | 60 | @keyframes text3 { 61 | 100% { 62 | stroke-dashoffset: 1120; 63 | stroke-dasharray: 60 180; 64 | } 65 | } 66 | 67 | @keyframes text4 { 68 | 100% { 69 | stroke-dashoffset: 1180; 70 | stroke-dasharray: 60 180; 71 | } 72 | } -------------------------------------------------------------------------------- /split-font/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: lightcoral; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .main-container { 18 | width: 100%; 19 | height: 120px; 20 | text-align: center; 21 | position: relative; 22 | transition: .5s; 23 | } 24 | 25 | .main-container .text { 26 | font-family: 'Barlow', sans-serif; 27 | font-size: 120px; 28 | line-height: 120px; 29 | height: 120px; 30 | text-transform: uppercase; 31 | position: absolute; 32 | top: 0; 33 | text-align: center; 34 | width: 100%; 35 | } 36 | 37 | .main-container .text:nth-child(1) { 38 | clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); 39 | } 40 | 41 | .main-container .text:nth-child(3) { 42 | clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); 43 | transition: .5s; 44 | } 45 | 46 | .main-container .inner-text { 47 | height: 0px; 48 | overflow: hidden; 49 | font-family: 'Ubuntu', sans-serif; 50 | transform: scale(1,0); 51 | 52 | position: absolute; 53 | top: 60px; 54 | width: 100%; 55 | font-size: 60px; 56 | line-height: 70px; 57 | transition: .5s; 58 | text-align: center; 59 | } 60 | 61 | .main-container:hover { 62 | height: 190px; 63 | } 64 | 65 | .main-container:hover .inner-text { 66 | height: 70px; 67 | transform: scale(1,1); 68 | } 69 | 70 | .main-container:hover .text:nth-child(3) { 71 | top: 80px; 72 | } -------------------------------------------------------------------------------- /login2/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Open Sans Light'; 5 | letter-spacing: .05em; 6 | } 7 | 8 | html { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | height: 100%; 14 | } 15 | 16 | .container { 17 | height: 100%; 18 | background-image: linear-gradient(to right,#fbc2eb,#a6c1ee); 19 | } 20 | 21 | .login-wrapper{ 22 | background-color: #fff; 23 | width: 250px; 24 | height: 500px; 25 | border-radius: 15px; 26 | padding: 0 50px; 27 | position: relative; 28 | left: 50%; 29 | top: 50%; 30 | transform: translate(-50%,-50%); 31 | } 32 | 33 | .login-wrapper .header { 34 | font-size: 30px; 35 | font-weight: bold; 36 | text-align: center; 37 | line-height: 200px; 38 | } 39 | 40 | .login-wrapper .form-wrapper .input-item { 41 | display: block; 42 | width: 100%; 43 | margin-bottom: 20px; 44 | border: 0; 45 | padding: 10px; 46 | border-bottom: 1px solid rgb(128, 125, 125); 47 | font-size: 15px; 48 | outline: none; 49 | } 50 | 51 | .login-wrapper .form-wrapper .input-item::placeholder { 52 | text-transform: uppercase; 53 | } 54 | 55 | .login-wrapper .form-wrapper .btn { 56 | text-align: center; 57 | padding: 10px; 58 | width: 100%; 59 | margin-top: 40px; 60 | background-image: linear-gradient(to right,#a6c1ee,#fbc2eb); 61 | color: #fff; 62 | } 63 | 64 | .login-wrapper .msg { 65 | text-align: center; 66 | line-height: 80px; 67 | } 68 | 69 | .login-wrapper .msg a { 70 | text-decoration-line: none; 71 | color: #a6c1ee; 72 | } -------------------------------------------------------------------------------- /border-button/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: rgb(51, 51, 51); 12 | } 13 | 14 | .container { 15 | text-align: center; 16 | padding: 200px 0; 17 | } 18 | 19 | .btn { 20 | background: none; 21 | border: 0; 22 | outline: 0; 23 | color: aquamarine; 24 | font-family: 'JetBrains Mono'; 25 | font-size: 20px; 26 | cursor: pointer; 27 | border: 2px solid aquamarine; 28 | width: 250px; 29 | height: 50px; 30 | position: relative; 31 | } 32 | 33 | .btn label { 34 | position: absolute; 35 | left: 0; 36 | top: 0; 37 | line-height: 50px; 38 | width: 100%; 39 | height: 100%; 40 | z-index: 1; 41 | background-color: rgb(51, 51, 51); 42 | } 43 | 44 | .btn::before { 45 | content: ''; 46 | position: absolute; 47 | left: -2px; 48 | top: -2px; 49 | width: 0px; 50 | height: 0; 51 | z-index: 0; 52 | background-color: brown; 53 | transition: width .5s,height .5s; 54 | } 55 | 56 | .btn::after { 57 | content: ''; 58 | position: absolute; 59 | right: -2px; 60 | bottom: -2px; 61 | width: 0; 62 | height: 0; 63 | z-index: 0; 64 | background-color: brown; 65 | transition: width .5s,height .5s; 66 | 67 | /* width: calc(100% + 4px); 68 | height: calc(100% + 4px); */ 69 | } 70 | 71 | .btn:hover { 72 | color: brown; 73 | } 74 | 75 | .btn:hover::before { 76 | width: calc(100% + 4px); 77 | height: calc(100% + 4px); 78 | } 79 | 80 | .btn:hover::after { 81 | width: calc(100% + 4px); 82 | height: calc(100% + 4px); 83 | } -------------------------------------------------------------------------------- /nintendo-switch/images/switch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /loading/css/style5.css: -------------------------------------------------------------------------------- 1 | .loading5 .wrapper { 2 | height: 120px; 3 | width: 120px; 4 | display: flex; 5 | flex-flow: row wrap; 6 | transform: translateX(90px) translateY(90px); 7 | } 8 | 9 | .loading5 .wrapper .item { 10 | width: 36px; 11 | height: 36px; 12 | background-color: crimson; 13 | font-size: 0; 14 | margin: 2px; 15 | } 16 | 17 | .loading5 .wrapper .item:nth-child(1){ 18 | animation: loading5 4s infinite 0s; 19 | } 20 | .loading5 .wrapper .item:nth-child(2){ 21 | animation: loading5 4s infinite 0.25s; 22 | } 23 | .loading5 .wrapper .item:nth-child(3){ 24 | animation: loading5 4s infinite 0.5s; 25 | } 26 | 27 | .loading5 .wrapper .item:nth-child(4){ 28 | animation: loading5 4s infinite 0.75s; 29 | } 30 | .loading5 .wrapper .item:nth-child(5){ 31 | animation: loading5 4s infinite 1s; 32 | } 33 | .loading5 .wrapper .item:nth-child(6){ 34 | animation: loading5 4s infinite 1.25s; 35 | } 36 | 37 | .loading5 .wrapper .item:nth-child(7){ 38 | animation: loading5 4s infinite 1.5s; 39 | } 40 | .loading5 .wrapper .item:nth-child(8){ 41 | animation: loading5 4s infinite 1.75s; 42 | } 43 | .loading5 .wrapper .item:nth-child(9){ 44 | animation: loading5 4s infinite 2s; 45 | } 46 | 47 | @keyframes loading5 { 48 | 0% { 49 | transform: translateY(0px); 50 | opacity: 1; 51 | } 52 | 5% { 53 | transform: translateY(20px); 54 | opacity: 0; 55 | } 56 | 45% { 57 | transform: translateY(20px); 58 | opacity: 0; 59 | } 60 | 55% { 61 | transform: translateY(0px); 62 | opacity: 1; 63 | } 64 | 100% { 65 | transform: translateY(0px); 66 | opacity: 1; 67 | } 68 | } -------------------------------------------------------------------------------- /switch-button/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: black; 12 | } 13 | 14 | .main-container { 15 | text-align: center; 16 | padding-top: 200px; 17 | } 18 | 19 | .main-container .item { 20 | display: inline-block; 21 | width: 70px; 22 | vertical-align: top; 23 | margin-left: 20px; 24 | } 25 | 26 | .main-container .item i { 27 | display: block; 28 | color: rgb(55, 55, 55); 29 | font-size: 30px; 30 | text-align: center; 31 | margin-top: 10px; 32 | transition: .5s; 33 | } 34 | 35 | input[type='checkbox'] { 36 | display: block; 37 | width: 0; 38 | height: 70px; 39 | position: relative; 40 | } 41 | 42 | input[type='checkbox']::before { 43 | content: ''; 44 | display: block; 45 | width: 10px; 46 | height: 10px; 47 | background-color: rgb(25, 25, 25); 48 | border: 20px solid rgb(45, 45, 45); 49 | border-radius: 30px; 50 | position: absolute; 51 | z-index: 2; 52 | left: 10px; 53 | top: 10px; 54 | box-shadow: 0 0 10px 0 rgb(15, 15, 15); 55 | transition: .5s; 56 | } 57 | 58 | input[type='checkbox']::after { 59 | content: ''; 60 | width: 70px; 61 | height: 70px; 62 | background-color: rgb(55, 55, 55); 63 | display: block; 64 | position: absolute; 65 | z-index: 1; 66 | border-radius: 40px; 67 | box-shadow: 0 8px 10px 0 rgba(15, 15, 15, 0.411) inset; 68 | } 69 | input[type='checkbox']:checked::before { 70 | background-color: rgb(0, 183, 255); 71 | box-shadow: 0 0 10px 0 rgb(0, 183, 255); 72 | } 73 | 74 | input[type='checkbox']:checked+i { 75 | color: rgb(0, 183, 255); 76 | text-shadow: 0 0 10px rgb(0, 183, 255); 77 | } -------------------------------------------------------------------------------- /nintendo-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Nintendo Switch 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 |
34 |
Nintendo
35 |
Switch
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 | -------------------------------------------------------------------------------- /docs/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | html{ 6 | height: 100%; 7 | } 8 | body { 9 | height: 100%; 10 | background-color: rgb(197, 107, 120); 11 | } 12 | 13 | #app { 14 | padding: 20px 0px; 15 | width: 970px; 16 | /* border: 1px solid #000; */ 17 | margin: 0 auto; 18 | } 19 | 20 | .project { 21 | display: inline-block; 22 | vertical-align: top; 23 | margin: 10px; 24 | width: 300px; 25 | height: 200px; 26 | background-size: 300px 200px; 27 | /* background-repeat: no-repeat; */ 28 | background-position: center; 29 | -webkit-transition:all .6s; 30 | -moz-transition:all .6s; 31 | -ms-transition:all .6s; 32 | -o-transition:all .6s; 33 | transition:all .6s; 34 | box-shadow: 0 0 30px -10px rgb(75, 44, 44); 35 | border-radius: 2px; 36 | } 37 | 38 | .project:hover .actions { 39 | padding: 30px 10px; 40 | } 41 | 42 | .project .actions { 43 | width: calc(100% - 20px); 44 | padding: 10px; 45 | text-align: center; 46 | background-color: rgb(227, 205, 164); 47 | transition: .2s; 48 | } 49 | 50 | .project .actions .space { 51 | display: inline-block; 52 | width: 10px; 53 | } 54 | 55 | .project .actions .action { 56 | color: rgb(47, 52, 59); 57 | text-decoration-line: none; 58 | font-family: '微软雅黑'; 59 | font-weight: 200; 60 | } 61 | .project .actions .action:hover{ 62 | color: rgb(112, 48, 48); 63 | } 64 | a:hover { 65 | color: rgb(112, 48, 48); 66 | font-weight: 200; 67 | } 68 | /* a:visited { 69 | color: rgb(126, 130, 122); 70 | text-decoration-line: none; 71 | font-weight: 200; 72 | } */ 73 | a:link { 74 | color: rgb(126, 130, 122); 75 | text-decoration-line: none; 76 | font-weight: 200; 77 | } 78 | a:active { 79 | color: rgb(126, 130, 122); 80 | text-decoration-line: none; 81 | font-weight: 200; 82 | } -------------------------------------------------------------------------------- /todo-list/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: rgb(81, 43, 80); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .main-container { 18 | width: 300px; 19 | } 20 | 21 | .main-container .header { 22 | font-size: 25px; 23 | color: rgb(240, 208, 167); 24 | text-align: center; 25 | line-height: 80px; 26 | } 27 | 28 | .main-container .list-container { 29 | 30 | } 31 | 32 | .main-container .list-container > ul { 33 | list-style: none; 34 | } 35 | 36 | .main-container .list-container > ul >li { 37 | height: 50px; 38 | background-color: rgb(182, 104, 118); 39 | font-size: 16px; 40 | font-weight: 200; 41 | line-height: 50px; 42 | color: aliceblue; 43 | position: relative; 44 | border-bottom: 1px solid rgb(81, 43, 80); 45 | z-index: 1; 46 | } 47 | 48 | .main-container .list-container > ul >li>label>span { 49 | display: block; 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | height: 50px; 54 | width: calc(100% - 70px); 55 | padding: 0 20px 0 50px; 56 | user-select: none; 57 | transition: .5s; 58 | } 59 | 60 | input[type='checkbox'] { 61 | width: 0; 62 | } 63 | 64 | input[type='checkbox']::before { 65 | width: 10px; 66 | height: 10px; 67 | content: ''; 68 | display: block; 69 | background-color: aliceblue; 70 | border: 5px solid aliceblue; 71 | border-radius: 20px; 72 | position: absolute; 73 | top: calc(50% - 10px); 74 | left: 10px; 75 | z-index: 3; 76 | transition: .5s; 77 | } 78 | input[type='checkbox']:checked::before { 79 | background-color: rgb(81, 43, 80); 80 | } 81 | 82 | input[type='checkbox']:checked+span { 83 | background-color: rgb(102, 55, 100); 84 | text-decoration: line-through; 85 | } -------------------------------------------------------------------------------- /code-box/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: blanchedalmond; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .code-panel { 18 | width: 700px; 19 | background-color: rgb(43, 43, 43); 20 | border-radius: 10px; 21 | box-shadow: 0 0 50px 0 rgb(175, 174, 172); 22 | } 23 | 24 | .code-panel .header { 25 | height: 40px; 26 | background-color: white; 27 | border-top-left-radius: 8px; 28 | border-top-right-radius: 8px; 29 | padding: 0 10px; 30 | } 31 | 32 | .code-panel .header > ul { 33 | list-style: none; 34 | } 35 | 36 | 37 | .code-panel .header > ul > li { 38 | display: inline-block; 39 | width: 20px; 40 | height: 20px; 41 | background-color: black; 42 | border-radius: 10px; 43 | margin: 10px 2px; 44 | } 45 | 46 | .code-panel .header > ul > li:nth-child(1) { 47 | background-color: rgb(212, 26, 26); 48 | } 49 | 50 | .code-panel .header > ul > li:nth-child(2) { 51 | background-color: rgb(224, 224, 20); 52 | } 53 | 54 | .code-panel .header > ul > li:nth-child(3) { 55 | background-color: rgb(24, 194, 24); 56 | } 57 | 58 | .code-panel .footer { 59 | height: 30px; 60 | background-color: rgb(73, 83, 181); 61 | border-bottom-left-radius: 8px; 62 | border-bottom-right-radius: 8px; 63 | } 64 | .code-panel .footer > span { 65 | display: inline-block; 66 | line-height: 30px; 67 | background-color: rgb(107, 121, 192); 68 | margin-left: 20px; 69 | padding: 0 10px; 70 | cursor: pointer; 71 | color: aliceblue; 72 | } 73 | 74 | pre code > div { 75 | min-height: 100px; 76 | font-size: 16px; 77 | outline: none; 78 | color: aliceblue; 79 | padding: 20px; 80 | overflow-x: hidden; 81 | font-family: 'Source Code Pro', monospace; 82 | } -------------------------------------------------------------------------------- /calendar/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,OAAO,CAAC,kEAAI;AAEZ,AAAA,CAAC,CAAC;EACA,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;CACV;;AAED,AAAA,IAAI,EAAC,IAAI,CAAC;EACR,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,QAAQ;EAC1B,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,WAAW,EAAE,mBAAmB;CACjC;;AAED,AAAA,eAAe,CAAC;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,gBAAgB,EAAE,KAAK;EACvB,SAAS,EAAE,CAAC;CAkEb;;AAtED,AAKE,eALa,CAKb,KAAK,CAAC;EACJ,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,cAAc,EAAE,GAAG;EACnB,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,OAAiB;CAWpC;;AAtBH,AAYI,eAZW,CAKb,KAAK,CAOH,KAAK,CAAC;EACJ,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,KAAK;CACnB;;AAjBL,AAkBI,eAlBW,CAKb,KAAK,CAaH,IAAI,CAAC;EACH,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;CACb;;AArBL,AAuBE,eAvBa,CAuBb,MAAM,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM;CA0CnB;;AArEH,AA4BI,eA5BW,CAuBb,MAAM,CAKJ,KAAK,CAAC;EACJ,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,OAAiB;EACxB,WAAW,EAAE,MAAM;EACnB,WAAW,EAAE,KAAK;CACnB;;AAlCL,AAmCI,eAnCW,CAuBb,MAAM,CAYJ,SAAS,CAAC;EACR,OAAO,EAAE,MAAM;CAgChB;;AApEL,AAsCQ,eAtCO,CAuBb,MAAM,CAYJ,SAAS,CAEP,MAAM,CACJ,KAAK,CAAC;EACJ,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,MAAM;CACpB;;AA9CT,AAiDQ,eAjDO,CAuBb,MAAM,CAYJ,SAAS,CAaP,KAAK,CACH,IAAI,CAAC;EACH,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;EACf,MAAM,EAAE,OAAO;CAWhB;;AAlET,AAwDU,eAxDK,CAuBb,MAAM,CAYJ,SAAS,CAaP,KAAK,CACH,IAAI,AAOD,MAAM,CAAC;EACN,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;CACb;;AA5DX,AA6DU,eA7DK,CAuBb,MAAM,CAYJ,SAAS,CAaP,KAAK,CACH,IAAI,AAYD,MAAM,CAAC;EACN,gBAAgB,EAAE,OAAiB;EACnC,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;CACb", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /douyin/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html{ 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: black; 12 | } 13 | 14 | /* cyan 15 | 16 | red 17 | 18 | 方正细金陵简体 */ 19 | 20 | .font-box { 21 | text-align: center; 22 | padding: 200px 0; 23 | } 24 | 25 | .font-box span{ 26 | color: #fff; 27 | font-family: '方正细金陵简体'; 28 | font-size: 100px; 29 | font-weight: bold; 30 | text-shadow: -0.05em 0 cyan,0.05em 0 red; 31 | position: relative; 32 | display: inline-block; 33 | } 34 | 35 | @keyframes text-jump { 36 | 0% { 37 | top: 0px; 38 | } 39 | 50% { 40 | top: -150px; 41 | } 42 | 80% { 43 | top: 50px; 44 | } 45 | 100% { 46 | top: 0px; 47 | } 48 | } 49 | 50 | @keyframes text-rotate { 51 | 0% { 52 | transform: rotate(0deg); 53 | } 54 | 100% { 55 | transform: rotate(360deg); 56 | } 57 | } 58 | 59 | .font-box span:nth-child(1){ 60 | animation: text-jump 0.8s ease-in-out 0s,text-rotate 0.8s ease 0s; 61 | } 62 | .font-box span:nth-child(2){ 63 | animation: text-jump 0.8s ease-in-out 0.2s,text-rotate 0.8s ease 0.2s; 64 | } 65 | .font-box span:nth-child(3){ 66 | animation: text-jump 0.8s ease-in-out 0.4s,text-rotate 0.8s ease 0.4s; 67 | } 68 | .font-box span:nth-child(4){ 69 | animation: text-jump 0.8s ease-in-out 0.6s,text-rotate 0.8s ease 0.6s; 70 | } 71 | .font-box span:nth-child(5){ 72 | animation: text-jump 0.8s ease-in-out 0.8s,text-rotate 0.8s ease 0.8s; 73 | } 74 | .font-box span:nth-child(6){ 75 | animation: text-jump 0.8s ease-in-out 1s,text-rotate 0.8s ease 1s; 76 | } 77 | .font-box span:nth-child(7){ 78 | animation: text-jump 0.8s ease-in-out 1.2s,text-rotate 0.8s ease 1.2s; 79 | } 80 | .font-box span:nth-child(8){ 81 | animation: text-jump 0.8s ease-in-out 1.4s,text-rotate 0.8s ease 1.4s; 82 | } 83 | .font-box span:nth-child(9){ 84 | animation: text-jump 0.8s ease-in-out 1.6s,text-rotate 0.8s ease 1.6s; 85 | } 86 | .font-box span:nth-child(10){ 87 | animation: text-jump 0.8s ease-in-out 1.8s,text-rotate 0.8s ease 1.8s; 88 | } 89 | -------------------------------------------------------------------------------- /loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Loading... 13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /loading/css/style2.css: -------------------------------------------------------------------------------- 1 | 2 | .loading2 .wrapper { 3 | height: 100%; 4 | margin: 0 auto; 5 | font-size: 0; 6 | } 7 | 8 | .loading2 .wrapper .item { 9 | background-color: crimson; 10 | width: 15px; 11 | height: 0px; 12 | display: inline-block; 13 | font-size: 0; 14 | margin: 0 5px; 15 | position: relative; 16 | transform: translateY(145px); 17 | } 18 | 19 | .loading2 .wrapper .item::before { 20 | content: ''; 21 | height: 50px; 22 | width: 15px; 23 | position: absolute; 24 | bottom: 0; 25 | left: 0; 26 | border-top-left-radius: 8px; 27 | border-top-right-radius: 8px; 28 | background-color: crimson;; 29 | } 30 | 31 | 32 | .loading2 .wrapper .item::after { 33 | content: ''; 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | height: 50px; 38 | width: 15px; 39 | border-bottom-left-radius: 8px; 40 | border-bottom-right-radius: 8px; 41 | background-color: crimson; 42 | } 43 | 44 | .loading2 .wrapper .item:nth-child(1)::before { 45 | animation: loading2 2s infinite 0s; 46 | } 47 | .loading2 .wrapper .item:nth-child(2)::before { 48 | animation: loading2 2s infinite .2s; 49 | } 50 | .loading2 .wrapper .item:nth-child(3)::before { 51 | animation: loading2 2s infinite .4s; 52 | } 53 | .loading2 .wrapper .item:nth-child(4)::before { 54 | animation: loading2 2s infinite .6s; 55 | } 56 | .loading2 .wrapper .item:nth-child(5)::before { 57 | animation: loading2 2s infinite .8s; 58 | } 59 | 60 | 61 | .loading2 .wrapper .item:nth-child(1)::after { 62 | animation: loading2 2s infinite 0s; 63 | } 64 | .loading2 .wrapper .item:nth-child(2)::after { 65 | animation: loading2 2s infinite .2s; 66 | } 67 | .loading2 .wrapper .item:nth-child(3)::after { 68 | animation: loading2 2s infinite .4s; 69 | } 70 | .loading2 .wrapper .item:nth-child(4)::after { 71 | animation: loading2 2s infinite .6s; 72 | } 73 | .loading2 .wrapper .item:nth-child(5)::after { 74 | animation: loading2 2s infinite .8s; 75 | } 76 | 77 | 78 | @keyframes loading2 { 79 | 0% { 80 | height: 50px; 81 | } 82 | 50% { 83 | height: 5px; 84 | } 85 | 100% { 86 | height: 50px; 87 | } 88 | } -------------------------------------------------------------------------------- /2020/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | /* 11 | #E71D36 12 | #FF9F1C 13 | */ 14 | 15 | body { 16 | background: #FF9F1C; 17 | animation: bodyAction 2s ease-in-out; 18 | } 19 | 20 | @keyframes bodyAction { 21 | 0% { 22 | background: #E71D36; 23 | } 24 | 100% { 25 | background: #FF9F1C ; 26 | } 27 | } 28 | 29 | .num { 30 | font-size: 200px; 31 | position: fixed; 32 | color: #FF9F1C; 33 | text-shadow: 5px 0 0 #000; 34 | } 35 | 36 | .num span { 37 | display: block; 38 | vertical-align: top; 39 | height: 200px; 40 | width: 180px; 41 | text-align: center; 42 | line-height: 200px; 43 | } 44 | 45 | .num .check { 46 | color: #E71D36; 47 | } 48 | 49 | @keyframes checkAction { 50 | 0% { 51 | color: #FF9F1C; 52 | } 53 | 100% { 54 | color: #E71D36; 55 | } 56 | } 57 | 58 | .num.num1 { 59 | top: -1600px; 60 | left: calc(50% - 400px); 61 | animation: num1Action 2s ease-in-out; 62 | } 63 | 64 | @keyframes num1Action { 65 | 0% { 66 | top: 0px; 67 | } 68 | 100% { 69 | top: -1600px; 70 | /* color: #E71D36; */ 71 | } 72 | } 73 | 74 | .num.num2 { 75 | left: calc(50% - 200px); 76 | top: -1200px; 77 | animation: num2Actoin 2s ease-in-out; 78 | } 79 | 80 | @keyframes num2Actoin { 81 | 0% { 82 | top: 0px; 83 | } 84 | 100% { 85 | top: -1200px; 86 | /* color: #E71D36; */ 87 | } 88 | } 89 | 90 | .num.num3 { 91 | left: calc(50% + 0px); 92 | 93 | top: -1600px; 94 | animation: num3Actoin 2s ease-in-out; 95 | } 96 | 97 | @keyframes num3Actoin { 98 | 0% { 99 | top: 0px; 100 | } 101 | 100% { 102 | top: -1600px; 103 | /* color: #E71D36; */ 104 | } 105 | } 106 | 107 | .num.num4 { 108 | left: calc(50% + 200px); 109 | 110 | top: -1200px; 111 | animation: num4Actoin 2s ease-in-out; 112 | } 113 | 114 | @keyframes num4Actoin { 115 | 0% { 116 | top: 0px; 117 | } 118 | 100% { 119 | top: -1200px; 120 | /* color: #E71D36; */ 121 | } 122 | } -------------------------------------------------------------------------------- /calendar/css/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Karla&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | html,body { 9 | height: 100%; 10 | background-color: darkcyan; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-family: 'Karla', sans-serif; 15 | } 16 | 17 | .main-container { 18 | width: 700px; 19 | height: 400px; 20 | background-color: white; 21 | font-size: 0; 22 | .left { 23 | display: inline-block; 24 | width: 350px; 25 | height: 400px; 26 | vertical-align: top; 27 | text-align: center; 28 | background-color: rgb(75, 218, 218); 29 | .week { 30 | text-transform: uppercase; 31 | font-size: 35px; 32 | color: white; 33 | line-height: 100px; 34 | } 35 | .day { 36 | font-size: 180px; 37 | color: white; 38 | } 39 | } 40 | .right { 41 | display: inline-block; 42 | width: 350px; 43 | height: 400px; 44 | text-align: center; 45 | .year { 46 | text-transform: uppercase; 47 | font-size: 35px; 48 | color: rgb(33, 165, 165); 49 | font-weight: bolder; 50 | line-height: 100px; 51 | } 52 | .calendar { 53 | padding: 0 35px; 54 | .weeks { 55 | .item { 56 | font-size: 18px; 57 | text-transform: uppercase; 58 | display: inline-block; 59 | width: 40px; 60 | line-height: 40px; 61 | color: crimson; 62 | font-weight: bolder; 63 | } 64 | } 65 | .days { 66 | .day { 67 | font-size: 15px; 68 | display: inline-block; 69 | width: 40px; 70 | line-height: 40px; 71 | transition: .2s; 72 | cursor: pointer; 73 | &.today { 74 | background-color: crimson; 75 | font-weight: bolder; 76 | color: white; 77 | } 78 | &:hover { 79 | background-color: rgb(230, 76, 107); 80 | font-weight: bolder; 81 | color: white; 82 | } 83 | } 84 | } 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /button/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | /* rgb(51, 51, 51) 11 | 12 | rgb(73, 73, 73) 13 | 14 | rgb(239,77,138) */ 15 | 16 | body { 17 | background-color: rgb(51, 51, 51); 18 | font-family: 'Courier New', Courier, monospace; 19 | } 20 | 21 | .panel { 22 | text-align: center; 23 | padding: 10% 0; 24 | } 25 | 26 | .panel .btn-container { 27 | display: inline-block; 28 | } 29 | 30 | .panel .btn-container input { 31 | border: 0; 32 | outline: 0; 33 | height: 60px; 34 | width: 120px; 35 | border-radius: 30px; 36 | background-color: rgb(104, 101, 101); 37 | color: #fff; 38 | font-size: 20px; 39 | padding: 0 20px; 40 | vertical-align: middle; 41 | transition: .2s; 42 | 43 | } 44 | 45 | .panel .btn-container .btn { 46 | display: inline-block; 47 | height: 60px; 48 | background-color: rgb(239,77,138); 49 | vertical-align: middle; 50 | line-height: 60px; 51 | font-size: 20px; 52 | color: #fff; 53 | font-weight: bold; 54 | width: 170px; 55 | border-radius: 30px; 56 | margin-left: -170px; 57 | cursor: pointer; 58 | transition: .2s; 59 | } 60 | 61 | .panel .btn-container:hover input{ 62 | width: 400px; 63 | animation: inputAction .4s ease-out; 64 | } 65 | 66 | .panel .btn-container:hover .btn{ 67 | width: 100px; 68 | height: 60px; 69 | margin-left: -100px; 70 | animation: btnAction .4s ease-out; 71 | } 72 | 73 | @keyframes inputAction { 74 | 0% { 75 | width: 400px; 76 | } 77 | 60% { 78 | width: 450px; 79 | } 80 | 100% { 81 | width: 400px; 82 | } 83 | } 84 | 85 | @keyframes btnAction { 86 | 0% { 87 | width: 100px; 88 | height: 60px; 89 | margin-left: -100px; 90 | } 91 | 60% { 92 | width: 60px; 93 | height: 60px; 94 | margin-left: 10px; 95 | } 96 | 100% { 97 | width: 100px; 98 | height: 60px; 99 | margin-left: -100px; 100 | } 101 | } 102 | 103 | 104 | ::-webkit-input-placeholder { 105 | color: #fff; 106 | font-size: 20px; 107 | font-family: 'Courier New', Courier, monospace; 108 | } -------------------------------------------------------------------------------- /login3/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | height: 100%; 12 | font-family: 'JetBrains Mono Medium'; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | background-color: #0e92b3; 17 | } 18 | 19 | .form-wrapper { 20 | width: 300px; 21 | background-color: rgb(41, 45, 62); 22 | color: #fff; 23 | border-radius: 2px; 24 | padding: 50px; 25 | } 26 | 27 | .form-wrapper .header { 28 | text-align: center; 29 | font-size: 35px; 30 | text-transform: uppercase; 31 | line-height: 100px; 32 | } 33 | 34 | .form-wrapper .input-wrapper input { 35 | background-color: rgb(41, 45, 62); 36 | border: 0; 37 | width: 100%; 38 | text-align: center; 39 | font-size: 15px; 40 | color: #fff; 41 | outline: none; 42 | } 43 | .form-wrapper .input-wrapper input::placeholder { 44 | text-transform: uppercase; 45 | } 46 | 47 | .form-wrapper .input-wrapper .border-wrapper { 48 | background-image: linear-gradient(to right,#e8198b,#0eb4dd); 49 | width: 100%; 50 | height: 50px; 51 | margin-bottom: 20px; 52 | border-radius: 30px; 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | } 57 | 58 | .form-wrapper .input-wrapper .border-wrapper .border-item { 59 | height: calc(100% - 4px); 60 | width: calc(100% - 4px); 61 | border-radius: 30px; 62 | } 63 | .form-wrapper .action { 64 | display: flex; 65 | justify-content: center; 66 | } 67 | .form-wrapper .action .btn { 68 | width: 60%; 69 | text-transform: uppercase; 70 | border: 2px solid #0e92b3; 71 | text-align: center; 72 | line-height: 50px; 73 | border-radius: 30px; 74 | cursor: pointer; 75 | transition: .2s; 76 | } 77 | 78 | .form-wrapper .action .btn:hover{ 79 | background-color: #0e92b3; 80 | } 81 | 82 | .form-wrapper .icon-wrapper { 83 | text-align: center; 84 | width: 60%; 85 | margin: 0 auto; 86 | margin-top: 20px; 87 | border-top: 1px dashed rgb(146, 146, 146); 88 | padding: 20px; 89 | } 90 | 91 | .form-wrapper .icon-wrapper i { 92 | font-size: 20px; 93 | color: rgb(187, 187, 187); 94 | cursor: pointer; 95 | border: 1px solid #fff; 96 | padding: 5px; 97 | border-radius: 20px; 98 | } -------------------------------------------------------------------------------- /2020/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 2020 9 | 10 | 11 |
12 | 9 13 | 8 14 | 7 15 | 6 16 | 5 17 | 4 18 | 3 19 | 2 20 | 1 21 | 0 22 | 1 23 | 2 24 | 3 25 | 4 26 | 5 27 | 6 28 | 7 29 | 8 30 | 9 31 |
32 |
33 | 9 34 | 8 35 | 7 36 | 6 37 | 5 38 | 4 39 | 3 40 | 2 41 | 1 42 | 0 43 | 1 44 | 2 45 | 3 46 | 4 47 | 5 48 | 6 49 | 7 50 | 8 51 | 9 52 |
53 |
54 | 9 55 | 8 56 | 7 57 | 6 58 | 5 59 | 4 60 | 3 61 | 2 62 | 1 63 | 0 64 | 1 65 | 2 66 | 3 67 | 4 68 | 5 69 | 6 70 | 7 71 | 8 72 | 9 73 |
74 |
75 | 9 76 | 8 77 | 7 78 | 6 79 | 5 80 | 4 81 | 3 82 | 2 83 | 1 84 | 0 85 | 1 86 | 2 87 | 3 88 | 4 89 | 5 90 | 6 91 | 7 92 | 8 93 | 9 94 |
95 | 96 | -------------------------------------------------------------------------------- /card/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 12 | /* background-color: #000; */ 13 | padding-top: 10%; 14 | background: -webkit-linear-gradient(left bottom,rgb(121,150,137),rgb(55,68,110)); 15 | } 16 | 17 | .card-container { 18 | width: 600px; 19 | margin: 0 auto; 20 | animation: cardContainerLoad 2s; 21 | } 22 | 23 | @keyframes cardContainerLoad { 24 | from { 25 | opacity: 0; 26 | transform: translate3d(0,10%,0) 27 | } 28 | to { 29 | opacity: 1; 30 | transform: none; 31 | } 32 | } 33 | 34 | .card-container .image-wrapper { 35 | font-size: 0px; 36 | } 37 | 38 | .card-container .image-wrapper img { 39 | width: 600px; 40 | border-radius: 8px 8px 0 0 ; 41 | } 42 | 43 | .card-container .title-wrapper { 44 | background-color: #fff; 45 | border-radius: 0 0 8px 8px; 46 | } 47 | 48 | .card-container .title-wrapper .title { 49 | text-align: center; 50 | padding: 80px 0 40px 0; 51 | } 52 | 53 | .card-container .title-wrapper .subtitle { 54 | text-align: center; 55 | font-size: 20px; 56 | padding: 0 0 50px 0; 57 | color: rgb(79, 92, 99); 58 | } 59 | 60 | .card-container .title-wrapper hr { 61 | border: 0; 62 | height: 1px; 63 | background-color: rgb(179, 192, 199);; 64 | margin: 0 80px; 65 | } 66 | 67 | .card-container .title-wrapper .icon-btns { 68 | padding: 50px 0 60px 0; 69 | } 70 | 71 | .card-container .title-wrapper .icon-btns ul { 72 | list-style: none; 73 | padding: 0; 74 | margin: 0; 75 | text-align: center; 76 | } 77 | 78 | .card-container .title-wrapper .icon-btns ul li{ 79 | display: inline-block; 80 | border: 1px solid #000; 81 | padding: 15px; 82 | border-radius: 35px; 83 | cursor: pointer; 84 | border-color: rgb(79, 92, 99); 85 | transition: .2s; 86 | } 87 | 88 | .card-container .title-wrapper .icon-btns ul li:hover { 89 | border-color: rgb(179, 192, 199); 90 | } 91 | 92 | .card-container .title-wrapper .icon-btns ul li:hover i { 93 | color: rgb(179, 192, 199); 94 | } 95 | 96 | .card-container .title-wrapper .icon-btns ul li i { 97 | font-size: 25px; 98 | color: rgb(79, 92, 99); 99 | transition: .2s; 100 | } -------------------------------------------------------------------------------- /calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 日历 8 | 9 | 10 |
11 |
12 |
sunday
13 |
12
14 |
15 |
16 |
july 2020
17 |
18 |
19 |
s
20 |
m
21 |
t
22 |
w
23 |
t
24 |
f
25 |
s
26 |
27 |
28 |
28
29 |
29
30 |
30
31 |
1
32 |
2
33 |
3
34 |
4
35 |
5
36 |
6
37 |
7
38 |
8
39 |
9
40 |
10
41 |
11
42 |
12
43 |
13
44 |
14
45 |
15
46 |
16
47 |
17
48 |
18
49 |
19
50 |
20
51 |
21
52 |
22
53 |
23
54 |
24
55 |
25
56 |
26
57 |
27
58 |
28
59 |
29
60 |
30
61 |
31
62 |
1
63 |
64 |
65 |
66 |
67 | 68 | -------------------------------------------------------------------------------- /calendar/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Karla&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | html, body { 8 | height: 100%; 9 | background-color: darkcyan; 10 | display: -webkit-box; 11 | display: -ms-flexbox; 12 | display: flex; 13 | -webkit-box-pack: center; 14 | -ms-flex-pack: center; 15 | justify-content: center; 16 | -webkit-box-align: center; 17 | -ms-flex-align: center; 18 | align-items: center; 19 | font-family: 'Karla', sans-serif; 20 | } 21 | 22 | .main-container { 23 | width: 700px; 24 | height: 400px; 25 | background-color: white; 26 | font-size: 0; 27 | } 28 | 29 | .main-container .left { 30 | display: inline-block; 31 | width: 350px; 32 | height: 400px; 33 | vertical-align: top; 34 | text-align: center; 35 | background-color: #4bdada; 36 | } 37 | 38 | .main-container .left .week { 39 | text-transform: uppercase; 40 | font-size: 35px; 41 | color: white; 42 | line-height: 100px; 43 | } 44 | 45 | .main-container .left .day { 46 | font-size: 180px; 47 | color: white; 48 | } 49 | 50 | .main-container .right { 51 | display: inline-block; 52 | width: 350px; 53 | height: 400px; 54 | text-align: center; 55 | } 56 | 57 | .main-container .right .year { 58 | text-transform: uppercase; 59 | font-size: 35px; 60 | color: #21a5a5; 61 | font-weight: bolder; 62 | line-height: 100px; 63 | } 64 | 65 | .main-container .right .calendar { 66 | padding: 0 35px; 67 | } 68 | 69 | .main-container .right .calendar .weeks .item { 70 | font-size: 18px; 71 | text-transform: uppercase; 72 | display: inline-block; 73 | width: 40px; 74 | line-height: 40px; 75 | color: crimson; 76 | font-weight: bolder; 77 | } 78 | 79 | .main-container .right .calendar .days .day { 80 | font-size: 15px; 81 | display: inline-block; 82 | width: 40px; 83 | line-height: 40px; 84 | -webkit-transition: .2s; 85 | transition: .2s; 86 | cursor: pointer; 87 | } 88 | 89 | .main-container .right .calendar .days .day.today { 90 | background-color: crimson; 91 | font-weight: bolder; 92 | color: white; 93 | } 94 | 95 | .main-container .right .calendar .days .day:hover { 96 | background-color: #e64c6b; 97 | font-weight: bolder; 98 | color: white; 99 | } 100 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /docs/js/app.js: -------------------------------------------------------------------------------- 1 | var app = new Vue({ 2 | el: '#app', 3 | data: { 4 | projects:[ 5 | { 6 | name: "card", 7 | video: "https://www.bilibili.com/video/BV1bJ411s7rj/" 8 | }, 9 | { 10 | name: "login", 11 | video: "https://www.bilibili.com/video/BV1XJ411a7Mf/" 12 | }, 13 | { 14 | name: "button", 15 | video: "https://www.bilibili.com/video/BV1dJ41157wH/" 16 | }, 17 | { 18 | name: "2020", 19 | video: "https://www.bilibili.com/video/BV1xJ411G7ar/" 20 | }, 21 | { 22 | name: "douyin", 23 | video: "https://www.bilibili.com/video/BV1zJ411E7Xt/" 24 | }, 25 | { 26 | name: "jianzhi", 27 | video: "https://www.bilibili.com/video/BV1R7411v7Ah/" 28 | }, 29 | { 30 | name: "border-button", 31 | video: "https://www.bilibili.com/video/BV17741147Lg/" 32 | }, 33 | { 34 | name: "loading", 35 | video: "https://space.bilibili.com/163890510/channel/detail?cid=114891" 36 | }, 37 | { 38 | name: "line-font", 39 | video: "https://www.bilibili.com/video/BV16p4y117k1/" 40 | }, 41 | { 42 | name: "login2", 43 | video: "https://www.bilibili.com/video/BV1tA411h7id/" 44 | }, 45 | { 46 | name: "login3", 47 | video: "https://www.bilibili.com/video/BV1Sz411b7CR/" 48 | }, 49 | { 50 | name: "hetongxue-piantou", 51 | video: "https://www.bilibili.com/video/BV1h64y1T71F/" 52 | }, 53 | { 54 | name: "page-404", 55 | video: "https://www.bilibili.com/video/BV1Ti4y1b79K/" 56 | }, 57 | { 58 | name: "clock", 59 | video: "https://www.bilibili.com/video/BV18Q4y1N7Ft/" 60 | }, 61 | { 62 | name: "todo-list", 63 | video: "https://www.bilibili.com/video/BV13K4y187Hn/" 64 | }, 65 | { 66 | name: "switch-button", 67 | video: "https://www.bilibili.com/video/BV1vf4y1m7dC/" 68 | }, 69 | { 70 | name: "split-font", 71 | video: "https://www.bilibili.com/video/BV1hf4y1U7fh/" 72 | }, 73 | { 74 | name: "code-box", 75 | video: "https://www.bilibili.com/video/BV12p4y1S7qY/" 76 | }, 77 | { 78 | name: "nintendo-switch", 79 | video: "https://www.bilibili.com/video/BV1jV41167cM/" 80 | }, 81 | { 82 | name: "calendar", 83 | video: "https://www.bilibili.com/video/BV1Ma4y1a76e/" 84 | } 85 | ] 86 | }, 87 | methods: { 88 | getImagePath(pathName){ 89 | return "https://raw.githubusercontent.com/zhangyingwei/html-css-only/master/"+pathName+"/image/profile.png" 90 | }, 91 | getPagePath(pathName){ 92 | return "http://htmlpreview.github.io/?https://github.com/zhangyingwei/html-css-only/blob/master/"+pathName+"/index.html" 93 | } 94 | } 95 | }) -------------------------------------------------------------------------------- /hetongxue-piantou/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | height: 100%; 12 | background-color: rgb(0, 0, 0); 13 | } 14 | 15 | .container { 16 | height: 100%; 17 | font-size: 0; 18 | } 19 | 20 | .container .item { 21 | height: 100%; 22 | width: calc(100% / 12); 23 | display: inline-block; 24 | vertical-align: top; 25 | position: relative; 26 | } 27 | 28 | .container .item .part1,.part2,.part3,.part4,.part5{ 29 | font-size: 6vw; 30 | color: rgb(255, 255, 255); 31 | height: 100%; 32 | width: 0; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | overflow: hidden; 37 | font-style: italic; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | } 42 | 43 | .container .item .part1 { 44 | background-color: rgb(255, 202, 64); 45 | z-index: 1; 46 | animation: part .8s linear 0s forwards; 47 | } 48 | 49 | .container .item .part2 { 50 | background-color: rgb(77, 190, 255); 51 | z-index: 2; 52 | animation: part .4s linear 1.6s forwards; 53 | } 54 | .container .item .part3 { 55 | background-color: rgb(136, 216, 117); 56 | z-index: 3; 57 | animation: part .4s linear 2.1s forwards; 58 | } 59 | .container .item .part4 { 60 | background-color: rgb(255, 117, 76); 61 | z-index: 4; 62 | animation: part .4s linear 2.6s forwards; 63 | } 64 | .container .item .part5 { 65 | background-color: rgb(0, 0, 0); 66 | text-shadow: .2em 0 .2em rgb(26, 26, 209),-.2em 0 .2em rgb(26, 26, 209),0 -.2em .2em rgb(26, 26, 209),0 .2em .2em rgb(26, 26, 209); 67 | z-index: 5; 68 | } 69 | 70 | .container .item:nth-child(1) .part5 { 71 | animation: part .4s linear 5s forwards; 72 | } 73 | .container .item:nth-child(2) .part5 { 74 | animation: part .4s linear 5.1s forwards; 75 | } 76 | .container .item:nth-child(3) .part5 { 77 | animation: part .4s linear 5.2s forwards; 78 | } 79 | .container .item:nth-child(4) .part5 { 80 | animation: part .4s linear 5.3s forwards; 81 | } 82 | .container .item:nth-child(5) .part5 { 83 | animation: part .4s linear 5.4s forwards; 84 | } 85 | .container .item:nth-child(6) .part5 { 86 | animation: part .4s linear 5.5s forwards; 87 | } 88 | .container .item:nth-child(7) .part5 { 89 | animation: part .4s linear 5.6s forwards; 90 | } 91 | .container .item:nth-child(8) .part5 { 92 | animation: part .4s linear 5.7s forwards; 93 | } 94 | .container .item:nth-child(9) .part5 { 95 | animation: part .4s linear 5.8s forwards; 96 | } 97 | .container .item:nth-child(10) .part5 { 98 | animation: part .4s linear 5.9s forwards; 99 | } 100 | .container .item:nth-child(11) .part5 { 101 | animation: part .4s linear 6s forwards; 102 | } 103 | .container .item:nth-child(12) .part5 { 104 | animation: part .4s linear 6.1s forwards; 105 | } 106 | 107 | @keyframes part { 108 | 0% { 109 | width: 0px; 110 | } 111 | 100% { 112 | width: 100%; 113 | } 114 | } -------------------------------------------------------------------------------- /hetongxue-piantou/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 蹭何同学热度 - 片头 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
大
27 |
大
28 |
大
29 |
大
30 |
大
31 |
32 |
33 |
家
34 |
家
35 |
家
36 |
家
37 |
家
38 |
39 |
40 |
好
41 |
好
42 |
好
43 |
好
44 |
好
45 |
46 |
47 |
48 |
我
49 |
我
50 |
我
51 |
我
52 |
53 |
54 |
55 |
56 |
叫
57 |
叫
58 |
叫
59 |
60 |
61 |
62 |
63 |
64 |
何
65 |
何
66 |
67 |
68 |
69 |
70 |
71 |
同
72 |
同
73 |
74 |
75 |
76 |
77 |
78 |
学
79 |
学
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | 97 | -------------------------------------------------------------------------------- /login/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | } 9 | 10 | /* rgb(114,135,254) rgb(130,88,186) 11 | 12 | rgb(59,45,159) 13 | 14 | rgb(95, 76, 194) 15 | 16 | rgb(118,76,163) rgb(92,103,211) 17 | 18 | rgb(199, 191, 219) 19 | rgb(237,221,22) */ 20 | 21 | 22 | body { 23 | background-image: linear-gradient(to bottom right,rgb(114,135,254),rgb(130,88,186)); 24 | } 25 | 26 | body .login-container { 27 | width: 600px; 28 | height: 315px; 29 | margin: 0 auto; 30 | margin-top: 20%; 31 | border-radius: 15px; 32 | box-shadow: 0 10px 50px 0px rgb(59,45,159); 33 | background-color: rgb(95, 76, 194); 34 | } 35 | 36 | body .login-container .left-container { 37 | display: inline-block; 38 | width: 330px; 39 | border-top-left-radius: 15px; 40 | border-bottom-left-radius: 15px; 41 | padding: 60px; 42 | background-image: linear-gradient(to bottom right,rgb(118,76,163), rgb(92,103,211)); 43 | } 44 | 45 | body .login-container .left-container .title { 46 | color: #fff; 47 | font-size: 18px; 48 | font-weight: 200; 49 | } 50 | 51 | body .login-container .left-container .title span { 52 | border-bottom: 3px solid rgb(237,221,22) ; 53 | } 54 | 55 | body .login-container .left-container .input-container { 56 | padding: 20px 0; 57 | } 58 | 59 | body .login-container .left-container .input-container input { 60 | border: 0; 61 | background: none; 62 | outline: 0; 63 | color: #fff; 64 | margin: 20px 0; 65 | display: block; 66 | width: 100%; 67 | padding: 5px 0; 68 | transition: .2s; 69 | border-bottom: 1px solid rgb(199, 191, 219); 70 | } 71 | 72 | body .login-container .left-container .input-container input:hover { 73 | border-bottom-color: #fff; 74 | } 75 | 76 | ::-webkit-input-placeholder { 77 | color: rgb(199, 191, 219); 78 | } 79 | 80 | body .login-container .left-container .message-container { 81 | font-size: 14px; 82 | transition: .2s; 83 | color: rgb(199, 191, 219); 84 | cursor: pointer; 85 | } 86 | 87 | body .login-container .left-container .message-container:hover { 88 | color: #fff; 89 | } 90 | 91 | body .login-container .right-container { 92 | width: 145px; 93 | display: inline-block; 94 | height: calc(100% - 120px); 95 | vertical-align: top; 96 | padding: 60px 0; 97 | } 98 | 99 | body .login-container .right-container .regist-container { 100 | text-align: center; 101 | color: #fff; 102 | font-size: 18px; 103 | font-weight: 200; 104 | } 105 | 106 | body .login-container .right-container .regist-container span { 107 | border-bottom: 3px solid rgb(237,221,22) ; 108 | } 109 | 110 | body .login-container .right-container .actoin-container { 111 | font-size: 10px; 112 | color: #fff; 113 | height: 100%; 114 | position: relative; 115 | } 116 | 117 | body .login-container .right-container .actoin-container span { 118 | border: 1px solid rgb(237,221,22); 119 | padding: 10px; 120 | display: inline; 121 | line-height: 25px; 122 | border-radius: 25px; 123 | position: absolute; 124 | bottom: 10px; 125 | left: calc(72px - 25px); 126 | transition: .2s; 127 | cursor: pointer; 128 | } 129 | 130 | body .login-container .right-container .actoin-container span:hover { 131 | background-color: rgb(237,221,22); 132 | color: rgb(95, 76, 194); 133 | } -------------------------------------------------------------------------------- /nintendo-switch/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,CAAC,CAAC;EACA,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;CACV;;AACD,AAAA,IAAI,EAAC,IAAI,CAAC;EACR,MAAM,EAAE,IAAI;CACb;;AAED,AAAA,IAAI,CAAC;EACH,gBAAgB,EAAE,OAAiB;EACnC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;CACpB;;AAED,AAAA,OAAO,CAAC;EACN,gBAAgB,EAAE,IAAI;EACtB,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,CAAC;CAkIb;;AAvID,AAME,OANK,CAML,KAAK,CAAC;EACJ,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,sBAAsB,EAAE,IAAI;EAC5B,yBAAyB,EAAE,IAAI;EAC/B,gBAAgB,EAAE,OAAgB;CAwCnC;;AArDH,AAcI,OAdG,CAML,KAAK,CAQH,KAAK,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,KAAK;CAoClB;;AApDL,AAiBM,OAjBC,CAML,KAAK,CAQH,KAAK,CAGH,SAAS,CAAC;EACR,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,MAAM;CACpB;;AApBP,AAqBM,OArBC,CAML,KAAK,CAQH,KAAK,AAOF,UAAW,CAAA,CAAC,EAAE;EACb,OAAO,EAAE,SAAS;CAQnB;;AA9BP,AAuBQ,OAvBD,CAML,KAAK,CAQH,KAAK,AAOF,UAAW,CAAA,CAAC,EAEX,OAAO,CAAC;EACN,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,MAAM;CACf;;AA7BT,AA+BM,OA/BC,CAML,KAAK,CAQH,KAAK,AAiBF,UAAW,CAAA,CAAC,EAAE;EACb,SAAS,EAAE,aAAa;CAUzB;;AA1CP,AAiCQ,OAjCD,CAML,KAAK,CAQH,KAAK,AAiBF,UAAW,CAAA,CAAC,EAEX,OAAO,CAAC;EACN,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,KAAK;EACvB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,GAAG;EACnB,MAAM,EAAE,IAAI;CACb;;AAzCT,AA2CM,OA3CC,CAML,KAAK,CAQH,KAAK,AA6BF,UAAW,CAAA,CAAC,EAAE;EACb,UAAU,EAAE,KAAK;CAOlB;;AAnDP,AA6CQ,OA7CD,CAML,KAAK,CAQH,KAAK,AA6BF,UAAW,CAAA,CAAC,EAEX,OAAO,CAAC;EACN,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,KAAK;CACxB;;AAlDT,AAsDE,OAtDK,CAsDL,KAAK,CAAC;EACJ,KAAK,EAAE,kBAAkB;EACzB,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,GAAG;EACnB,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAgB;EAClC,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAe;EAClC,UAAU,EAAE,MAAM;CAuBnB;;AArFH,AA+DI,OA/DG,CAsDL,KAAK,CASH,KAAK,CAAC;EACJ,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,QAAQ;CAItB;;AAvEL,AAoEM,OApEC,CAsDL,KAAK,CASH,KAAK,CAKH,GAAG,CAAC;EACF,KAAK,EAAE,IAAI;CACZ;;AAtEP,AAwEI,OAxEG,CAsDL,KAAK,CAkBH,KAAK,CAAC;EACJ,MAAM,EAAE,GAAG;EACX,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK;CASb;;AApFL,AA4EM,OA5EC,CAsDL,KAAK,CAkBH,KAAK,CAIH,EAAE,CAAC;EACD,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,IAAI;CACrB;;AA/EP,AAgFM,OAhFC,CAsDL,KAAK,CAkBH,KAAK,CAQH,EAAE,CAAC;EACD,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,IAAI;CACrB;;AAnFP,AAsFE,OAtFK,CAsFL,MAAM,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,uBAAuB,EAAE,IAAI;EAC7B,0BAA0B,EAAE,IAAI;EAChC,gBAAgB,EAAE,OAAgB;CAyCnC;;AAtIH,AA8FI,OA9FG,CAsFL,MAAM,CAQJ,KAAK,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,IAAI;CAqCjB;;AArIL,AAiGM,OAjGC,CAsFL,MAAM,CAQJ,KAAK,CAGH,SAAS,CAAC;EACR,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,MAAM;CACpB;;AApGP,AAqGM,OArGC,CAsFL,MAAM,CAQJ,KAAK,AAOF,UAAW,CAAA,CAAC,EAAE;EACb,OAAO,EAAE,SAAS;CAQnB;;AA9GP,AAuGQ,OAvGD,CAsFL,MAAM,CAQJ,KAAK,AAOF,UAAW,CAAA,CAAC,EAEX,OAAO,CAAC;EACN,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,MAAM;CACf;;AA7GT,AA+GM,OA/GC,CAsFL,MAAM,CAQJ,KAAK,AAiBF,UAAW,CAAA,CAAC,EAAE;EACb,SAAS,EAAE,aAAa;CAUzB;;AA1HP,AAiHQ,OAjHD,CAsFL,MAAM,CAQJ,KAAK,AAiBF,UAAW,CAAA,CAAC,EAEX,OAAO,CAAC;EACN,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,KAAK;EACvB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,GAAG;EACnB,MAAM,EAAE,IAAI;CACb;;AAzHT,AA2HM,OA3HC,CAsFL,MAAM,CAQJ,KAAK,AA6BF,UAAW,CAAA,CAAC,EAAE;EACb,UAAU,EAAE,IAAI;CAQjB;;AApIP,AA6HQ,OA7HD,CAsFL,MAAM,CAQJ,KAAK,AA6BF,UAAW,CAAA,CAAC,EAEX,OAAO,CAAC;EACN,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,gBAAgB,EAAE,KAAK;CACxB", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /nintendo-switch/css/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | body,html { 6 | height: 100%; 7 | } 8 | 9 | body { 10 | background-color: rgb(236, 172, 70); 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .switch { 17 | background-color: #fff; 18 | width: 1000px; 19 | height: 400px; 20 | border-radius: 80px; 21 | font-size: 0; 22 | .left { 23 | display: inline-block; 24 | vertical-align: top; 25 | width: 150px; 26 | height: 100%; 27 | border-top-left-radius: 80px; 28 | border-bottom-left-radius: 80px; 29 | background-color: rgb(0, 140, 255); 30 | .item { 31 | padding: 10px; 32 | text-align: right; 33 | .iconfont { 34 | font-size: 25px; 35 | font-weight: bolder; 36 | } 37 | &:nth-child(2) { 38 | padding: 20px 10px; 39 | .action { 40 | background-color: black; 41 | width: 70px; 42 | height: 70px; 43 | border-radius: 40px; 44 | margin: 0 auto; 45 | } 46 | } 47 | &:nth-child(3) { 48 | transform: rotate(45deg); 49 | .action { 50 | width: 35px; 51 | height: 35px; 52 | background-color: black; 53 | border-radius: 20px; 54 | display: inline-block; 55 | vertical-align: top; 56 | margin: 10px; 57 | } 58 | } 59 | &:nth-child(4) { 60 | text-align: right; 61 | .action { 62 | display: inline-block; 63 | width: 30px; 64 | height: 30px; 65 | background-color: black; 66 | } 67 | } 68 | } 69 | } 70 | .body { 71 | width: calc(100% - 300px); 72 | display: inline-block; 73 | vertical-align: top; 74 | height: 100%; 75 | background-color: rgb(250, 17, 17); 76 | box-sizing: border-box; 77 | border: 30px solid rgb(43, 43, 43); 78 | text-align: center; 79 | .icon { 80 | height: 50%; 81 | display: flex; 82 | justify-content: center; 83 | align-items: flex-end; 84 | img { 85 | width: 80px; 86 | } 87 | } 88 | .text { 89 | height: 50%; 90 | text-transform: uppercase; 91 | color: white; 92 | .n { 93 | font-size: 22px; 94 | letter-spacing: .1em; 95 | } 96 | .s { 97 | font-size: 30px; 98 | letter-spacing: .1em; 99 | } 100 | } 101 | } 102 | .right { 103 | display: inline-block; 104 | vertical-align: top; 105 | width: 150px; 106 | height: 100%; 107 | border-top-right-radius: 80px; 108 | border-bottom-right-radius: 80px; 109 | background-color: rgb(248, 51, 51); 110 | .item { 111 | padding: 10px; 112 | text-align: left; 113 | .iconfont { 114 | font-size: 25px; 115 | font-weight: bolder; 116 | } 117 | &:nth-child(3) { 118 | padding: 20px 10px; 119 | .action { 120 | background-color: black; 121 | width: 70px; 122 | height: 70px; 123 | border-radius: 40px; 124 | margin: 0 auto; 125 | } 126 | } 127 | &:nth-child(2) { 128 | transform: rotate(45deg); 129 | .action { 130 | width: 35px; 131 | height: 35px; 132 | background-color: black; 133 | border-radius: 20px; 134 | display: inline-block; 135 | vertical-align: top; 136 | margin: 10px; 137 | } 138 | } 139 | &:nth-child(4) { 140 | text-align: left; 141 | .action { 142 | display: inline-block; 143 | width: 30px; 144 | height: 30px; 145 | border-radius: 20px; 146 | background-color: black; 147 | } 148 | } 149 | } 150 | } 151 | } -------------------------------------------------------------------------------- /nintendo-switch/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body, html { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-color: #ecac46; 12 | display: -webkit-box; 13 | display: -ms-flexbox; 14 | display: flex; 15 | -webkit-box-pack: center; 16 | -ms-flex-pack: center; 17 | justify-content: center; 18 | -webkit-box-align: center; 19 | -ms-flex-align: center; 20 | align-items: center; 21 | } 22 | 23 | .switch { 24 | background-color: #fff; 25 | width: 1000px; 26 | height: 400px; 27 | border-radius: 80px; 28 | font-size: 0; 29 | } 30 | 31 | .switch .left { 32 | display: inline-block; 33 | vertical-align: top; 34 | width: 150px; 35 | height: 100%; 36 | border-top-left-radius: 80px; 37 | border-bottom-left-radius: 80px; 38 | background-color: #008cff; 39 | } 40 | 41 | .switch .left .item { 42 | padding: 10px; 43 | text-align: right; 44 | } 45 | 46 | .switch .left .item .iconfont { 47 | font-size: 25px; 48 | font-weight: bolder; 49 | } 50 | 51 | .switch .left .item:nth-child(2) { 52 | padding: 20px 10px; 53 | } 54 | 55 | .switch .left .item:nth-child(2) .action { 56 | background-color: black; 57 | width: 70px; 58 | height: 70px; 59 | border-radius: 40px; 60 | margin: 0 auto; 61 | } 62 | 63 | .switch .left .item:nth-child(3) { 64 | -webkit-transform: rotate(45deg); 65 | transform: rotate(45deg); 66 | } 67 | 68 | .switch .left .item:nth-child(3) .action { 69 | width: 35px; 70 | height: 35px; 71 | background-color: black; 72 | border-radius: 20px; 73 | display: inline-block; 74 | vertical-align: top; 75 | margin: 10px; 76 | } 77 | 78 | .switch .left .item:nth-child(4) { 79 | text-align: right; 80 | } 81 | 82 | .switch .left .item:nth-child(4) .action { 83 | display: inline-block; 84 | width: 30px; 85 | height: 30px; 86 | background-color: black; 87 | } 88 | 89 | .switch .body { 90 | width: calc(100% - 300px); 91 | display: inline-block; 92 | vertical-align: top; 93 | height: 100%; 94 | background-color: #fa1111; 95 | -webkit-box-sizing: border-box; 96 | box-sizing: border-box; 97 | border: 30px solid #2b2b2b; 98 | text-align: center; 99 | } 100 | 101 | .switch .body .icon { 102 | height: 50%; 103 | display: -webkit-box; 104 | display: -ms-flexbox; 105 | display: flex; 106 | -webkit-box-pack: center; 107 | -ms-flex-pack: center; 108 | justify-content: center; 109 | -webkit-box-align: end; 110 | -ms-flex-align: end; 111 | align-items: flex-end; 112 | } 113 | 114 | .switch .body .icon img { 115 | width: 80px; 116 | } 117 | 118 | .switch .body .text { 119 | height: 50%; 120 | text-transform: uppercase; 121 | color: white; 122 | } 123 | 124 | .switch .body .text .n { 125 | font-size: 22px; 126 | letter-spacing: .1em; 127 | } 128 | 129 | .switch .body .text .s { 130 | font-size: 30px; 131 | letter-spacing: .1em; 132 | } 133 | 134 | .switch .right { 135 | display: inline-block; 136 | vertical-align: top; 137 | width: 150px; 138 | height: 100%; 139 | border-top-right-radius: 80px; 140 | border-bottom-right-radius: 80px; 141 | background-color: #f83333; 142 | } 143 | 144 | .switch .right .item { 145 | padding: 10px; 146 | text-align: left; 147 | } 148 | 149 | .switch .right .item .iconfont { 150 | font-size: 25px; 151 | font-weight: bolder; 152 | } 153 | 154 | .switch .right .item:nth-child(3) { 155 | padding: 20px 10px; 156 | } 157 | 158 | .switch .right .item:nth-child(3) .action { 159 | background-color: black; 160 | width: 70px; 161 | height: 70px; 162 | border-radius: 40px; 163 | margin: 0 auto; 164 | } 165 | 166 | .switch .right .item:nth-child(2) { 167 | -webkit-transform: rotate(45deg); 168 | transform: rotate(45deg); 169 | } 170 | 171 | .switch .right .item:nth-child(2) .action { 172 | width: 35px; 173 | height: 35px; 174 | background-color: black; 175 | border-radius: 20px; 176 | display: inline-block; 177 | vertical-align: top; 178 | margin: 10px; 179 | } 180 | 181 | .switch .right .item:nth-child(4) { 182 | text-align: left; 183 | } 184 | 185 | .switch .right .item:nth-child(4) .action { 186 | display: inline-block; 187 | width: 30px; 188 | height: 30px; 189 | border-radius: 20px; 190 | background-color: black; 191 | } 192 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /clock/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background-image: linear-gradient(to right,#203744,#3c4769,#203744); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .clock-container { 18 | width: 500px; 19 | height: 500px; 20 | background-color: white; 21 | border-radius: 300px; 22 | } 23 | 24 | .clock-container .panel-container { 25 | height: 440px; 26 | border: 30px solid rgb(255, 255, 255); 27 | border-radius: 300px; 28 | box-shadow: 0 0 20px 0 rgba(7, 7, 7, 0.459) inset; 29 | 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | 35 | .clock-container .panel-container .box { 36 | position: relative; 37 | width: 400px; 38 | height: 400px; 39 | display: flex; 40 | align-items: center; 41 | } 42 | 43 | .clock-container .panel-container .box .num,.point,.hand { 44 | position: absolute; 45 | font-size: 30px; 46 | line-height: 30px; 47 | height: 30px; 48 | font-family: 'Rubik', sans-serif; 49 | width: 100%; 50 | } 51 | 52 | .clock-container .panel-container .box .num span { 53 | display: inline-block; 54 | width: 30px; 55 | } 56 | 57 | .clock-container .panel-container .box .num:nth-child(1){ 58 | transform: rotate(120deg); 59 | } 60 | .clock-container .panel-container .box .num:nth-child(2){ 61 | transform: rotate(150deg); 62 | } 63 | .clock-container .panel-container .box .num:nth-child(3){ 64 | transform: rotate(180deg); 65 | } 66 | .clock-container .panel-container .box .num:nth-child(4){ 67 | transform: rotate(210deg); 68 | } 69 | .clock-container .panel-container .box .num:nth-child(5){ 70 | transform: rotate(240deg); 71 | } 72 | .clock-container .panel-container .box .num:nth-child(6){ 73 | transform: rotate(270deg); 74 | } 75 | .clock-container .panel-container .box .num:nth-child(7){ 76 | transform: rotate(300deg); 77 | } 78 | .clock-container .panel-container .box .num:nth-child(8){ 79 | transform: rotate(330deg); 80 | } 81 | .clock-container .panel-container .box .num:nth-child(9){ 82 | transform: rotate(360deg); 83 | } 84 | .clock-container .panel-container .box .num:nth-child(10){ 85 | transform: rotate(390deg); 86 | } 87 | .clock-container .panel-container .box .num:nth-child(11){ 88 | transform: rotate(420deg); 89 | } 90 | .clock-container .panel-container .box .num:nth-child(12){ 91 | transform: rotate(450deg); 92 | } 93 | 94 | 95 | 96 | 97 | .clock-container .panel-container .box .num:nth-child(1) span{ 98 | transform: rotate(-120deg); 99 | } 100 | .clock-container .panel-container .box .num:nth-child(2) span{ 101 | transform: rotate(-150deg); 102 | } 103 | .clock-container .panel-container .box .num:nth-child(3) span{ 104 | transform: rotate(-180deg); 105 | } 106 | .clock-container .panel-container .box .num:nth-child(4) span{ 107 | transform: rotate(-210deg); 108 | } 109 | .clock-container .panel-container .box .num:nth-child(5) span{ 110 | transform: rotate(-240deg); 111 | } 112 | .clock-container .panel-container .box .num:nth-child(6) span{ 113 | transform: rotate(-270deg); 114 | } 115 | .clock-container .panel-container .box .num:nth-child(7) span{ 116 | transform: rotate(-300deg); 117 | } 118 | .clock-container .panel-container .box .num:nth-child(8) span{ 119 | transform: rotate(-330deg); 120 | } 121 | .clock-container .panel-container .box .num:nth-child(9) span{ 122 | transform: rotate(-360deg); 123 | } 124 | .clock-container .panel-container .box .num:nth-child(10) span{ 125 | transform: rotate(-390deg); 126 | } 127 | .clock-container .panel-container .box .num:nth-child(11) span{ 128 | transform: rotate(-420deg); 129 | } 130 | .clock-container .panel-container .box .num:nth-child(12) span{ 131 | transform: rotate(-450deg); 132 | } 133 | 134 | .clock-container .panel-container .box .point{ 135 | text-align: center; 136 | } 137 | 138 | .clock-container .panel-container .box .point span { 139 | display: inline-block; 140 | width: 30px; 141 | height: 30px; 142 | border-radius: 20px; 143 | background-color: black; 144 | } 145 | .clock-container .panel-container .box .hand{ 146 | display: flex; 147 | align-items: center; 148 | } 149 | .clock-container .panel-container .box .hand span { 150 | background-color: black; 151 | display: block; 152 | } 153 | 154 | .clock-container .panel-container .box .hand.second span { 155 | width: calc(50% - 50px); 156 | height: 2px; 157 | border-radius: 4px; 158 | margin-left: 50px; 159 | } 160 | .clock-container .panel-container .box .hand.minute span { 161 | width: calc(50% - 70px); 162 | height: 4px; 163 | border-radius: 4px; 164 | margin-left: 70px; 165 | } 166 | .clock-container .panel-container .box .hand.hour span { 167 | width: calc(50% - 90px); 168 | height: 8px; 169 | border-radius: 4px; 170 | margin-left: 90px; 171 | } 172 | 173 | .clock-container .panel-container .box .hand.second { 174 | animation: clock-run 60s linear infinite; 175 | } 176 | .clock-container .panel-container .box .hand.minute { 177 | animation: clock-run 3600s linear infinite; 178 | } 179 | .clock-container .panel-container .box .hand.hour { 180 | animation: clock-run 86400s linear infinite; 181 | } 182 | 183 | @keyframes clock-run { 184 | 0% { 185 | transform: rotate(0deg); 186 | } 187 | 100% { 188 | transform: rotate(360deg); 189 | } 190 | } -------------------------------------------------------------------------------- /page-404/static/404.svg: -------------------------------------------------------------------------------- 1 | Support team -------------------------------------------------------------------------------- /docs/js/vue.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Vue.js v2.6.11 3 | * (c) 2014-2019 Evan You 4 | * Released under the MIT License. 5 | */ 6 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Vue=t()}(this,function(){"use strict";var e=Object.freeze({});function t(e){return null==e}function n(e){return null!=e}function r(e){return!0===e}function i(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function o(e){return null!==e&&"object"==typeof e}var a=Object.prototype.toString;function s(e){return"[object Object]"===a.call(e)}function c(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function u(e){return n(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function l(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===a?JSON.stringify(e,null,2):String(e)}function f(e){var t=parseFloat(e);return isNaN(t)?e:t}function p(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}var m=Object.prototype.hasOwnProperty;function y(e,t){return m.call(e,t)}function g(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var _=/-(\w)/g,b=g(function(e){return e.replace(_,function(e,t){return t?t.toUpperCase():""})}),$=g(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),w=/\B([A-Z])/g,C=g(function(e){return e.replace(w,"-$1").toLowerCase()});var x=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function k(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function A(e,t){for(var n in t)e[n]=t[n];return e}function O(e){for(var t={},n=0;n0,Z=J&&J.indexOf("edge/")>0,G=(J&&J.indexOf("android"),J&&/iphone|ipad|ipod|ios/.test(J)||"ios"===K),X=(J&&/chrome\/\d+/.test(J),J&&/phantomjs/.test(J),J&&J.match(/firefox\/(\d+)/)),Y={}.watch,Q=!1;if(z)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){Q=!0}}),window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===B&&(B=!z&&!V&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),B},ne=z&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function re(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,oe="undefined"!=typeof Symbol&&re(Symbol)&&"undefined"!=typeof Reflect&&re(Reflect.ownKeys);ie="undefined"!=typeof Set&&re(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var ae=S,se=0,ce=function(){this.id=se++,this.subs=[]};ce.prototype.addSub=function(e){this.subs.push(e)},ce.prototype.removeSub=function(e){h(this.subs,e)},ce.prototype.depend=function(){ce.target&&ce.target.addDep(this)},ce.prototype.notify=function(){for(var e=this.subs.slice(),t=0,n=e.length;t-1)if(o&&!y(i,"default"))a=!1;else if(""===a||a===C(e)){var c=Pe(String,i.type);(c<0||s0&&(st((u=e(u,(a||"")+"_"+c))[0])&&st(f)&&(s[l]=he(f.text+u[0].text),u.shift()),s.push.apply(s,u)):i(u)?st(f)?s[l]=he(f.text+u):""!==u&&s.push(he(u)):st(u)&&st(f)?s[l]=he(f.text+u.text):(r(o._isVList)&&n(u.tag)&&t(u.key)&&n(a)&&(u.key="__vlist"+a+"_"+c+"__"),s.push(u)));return s}(e):void 0}function st(e){return n(e)&&n(e.text)&&!1===e.isComment}function ct(e,t){if(e){for(var n=Object.create(null),r=oe?Reflect.ownKeys(e):Object.keys(e),i=0;i0,a=t?!!t.$stable:!o,s=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(a&&r&&r!==e&&s===r.$key&&!o&&!r.$hasNormal)return r;for(var c in i={},t)t[c]&&"$"!==c[0]&&(i[c]=pt(n,c,t[c]))}else i={};for(var u in n)u in i||(i[u]=dt(n,u));return t&&Object.isExtensible(t)&&(t._normalized=i),R(i,"$stable",a),R(i,"$key",s),R(i,"$hasNormal",o),i}function pt(e,t,n){var r=function(){var e=arguments.length?n.apply(null,arguments):n({});return(e=e&&"object"==typeof e&&!Array.isArray(e)?[e]:at(e))&&(0===e.length||1===e.length&&e[0].isComment)?void 0:e};return n.proxy&&Object.defineProperty(e,t,{get:r,enumerable:!0,configurable:!0}),r}function dt(e,t){return function(){return e[t]}}function vt(e,t){var r,i,a,s,c;if(Array.isArray(e)||"string"==typeof e)for(r=new Array(e.length),i=0,a=e.length;idocument.createEvent("Event").timeStamp&&(sn=function(){return cn.now()})}function un(){var e,t;for(an=sn(),rn=!0,Qt.sort(function(e,t){return e.id-t.id}),on=0;onon&&Qt[n].id>e.id;)n--;Qt.splice(n+1,0,e)}else Qt.push(e);nn||(nn=!0,Ye(un))}}(this)},fn.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||o(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Re(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},fn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},fn.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},fn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||h(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var pn={enumerable:!0,configurable:!0,get:S,set:S};function dn(e,t,n){pn.get=function(){return this[t][n]},pn.set=function(e){this[t][n]=e},Object.defineProperty(e,n,pn)}function vn(e){e._watchers=[];var t=e.$options;t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props={},i=e.$options._propKeys=[];e.$parent&&$e(!1);var o=function(o){i.push(o);var a=Me(o,t,n,e);xe(r,o,a),o in e||dn(e,"_props",o)};for(var a in t)o(a);$e(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?S:x(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;s(t=e._data="function"==typeof t?function(e,t){le();try{return e.call(t,t)}catch(e){return Re(e,t,"data()"),{}}finally{fe()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);for(;i--;){var o=n[i];r&&y(r,o)||(a=void 0,36!==(a=(o+"").charCodeAt(0))&&95!==a&&dn(e,"_data",o))}var a;Ce(t,!0)}(e):Ce(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=te();for(var i in t){var o=t[i],a="function"==typeof o?o:o.get;r||(n[i]=new fn(e,a||S,S,hn)),i in e||mn(e,i,o)}}(e,t.computed),t.watch&&t.watch!==Y&&function(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;i-1:"string"==typeof e?e.split(",").indexOf(t)>-1:(n=e,"[object RegExp]"===a.call(n)&&e.test(t));var n}function An(e,t){var n=e.cache,r=e.keys,i=e._vnode;for(var o in n){var a=n[o];if(a){var s=xn(a.componentOptions);s&&!t(s)&&On(n,o,r,i)}}}function On(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,h(n,t)}!function(t){t.prototype._init=function(t){var n=this;n._uid=bn++,n._isVue=!0,t&&t._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(n,t):n.$options=De($n(n.constructor),t||{},n),n._renderProxy=n,n._self=n,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(n),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&qt(e,t)}(n),function(t){t._vnode=null,t._staticTrees=null;var n=t.$options,r=t.$vnode=n._parentVnode,i=r&&r.context;t.$slots=ut(n._renderChildren,i),t.$scopedSlots=e,t._c=function(e,n,r,i){return Pt(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return Pt(t,e,n,r,i,!0)};var o=r&&r.data;xe(t,"$attrs",o&&o.attrs||e,null,!0),xe(t,"$listeners",n._parentListeners||e,null,!0)}(n),Yt(n,"beforeCreate"),function(e){var t=ct(e.$options.inject,e);t&&($e(!1),Object.keys(t).forEach(function(n){xe(e,n,t[n])}),$e(!0))}(n),vn(n),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(n),Yt(n,"created"),n.$options.el&&n.$mount(n.$options.el)}}(wn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=ke,e.prototype.$delete=Ae,e.prototype.$watch=function(e,t,n){if(s(t))return _n(this,e,t,n);(n=n||{}).user=!0;var r=new fn(this,e,t,n);if(n.immediate)try{t.call(this,r.value)}catch(e){Re(e,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}(wn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(Array.isArray(e))for(var i=0,o=e.length;i1?k(t):t;for(var n=k(arguments,1),r='event handler for "'+e+'"',i=0,o=t.length;iparseInt(this.max)&&On(a,s[0],s,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return F}};Object.defineProperty(e,"config",t),e.util={warn:ae,extend:A,mergeOptions:De,defineReactive:xe},e.set=ke,e.delete=Ae,e.nextTick=Ye,e.observable=function(e){return Ce(e),e},e.options=Object.create(null),M.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,A(e.options.components,Tn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=k(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=De(this.options,e),this}}(e),Cn(e),function(e){M.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&s(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}(e)}(wn),Object.defineProperty(wn.prototype,"$isServer",{get:te}),Object.defineProperty(wn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(wn,"FunctionalRenderContext",{value:Tt}),wn.version="2.6.11";var En=p("style,class"),Nn=p("input,textarea,option,select,progress"),jn=function(e,t,n){return"value"===n&&Nn(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Dn=p("contenteditable,draggable,spellcheck"),Ln=p("events,caret,typing,plaintext-only"),Mn=function(e,t){return Hn(t)||"false"===t?"false":"contenteditable"===e&&Ln(t)?t:"true"},In=p("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Fn="http://www.w3.org/1999/xlink",Pn=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},Rn=function(e){return Pn(e)?e.slice(6,e.length):""},Hn=function(e){return null==e||!1===e};function Bn(e){for(var t=e.data,r=e,i=e;n(i.componentInstance);)(i=i.componentInstance._vnode)&&i.data&&(t=Un(i.data,t));for(;n(r=r.parent);)r&&r.data&&(t=Un(t,r.data));return function(e,t){if(n(e)||n(t))return zn(e,Vn(t));return""}(t.staticClass,t.class)}function Un(e,t){return{staticClass:zn(e.staticClass,t.staticClass),class:n(e.class)?[e.class,t.class]:t.class}}function zn(e,t){return e?t?e+" "+t:e:t||""}function Vn(e){return Array.isArray(e)?function(e){for(var t,r="",i=0,o=e.length;i-1?hr(e,t,n):In(t)?Hn(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):Dn(t)?e.setAttribute(t,Mn(t,n)):Pn(t)?Hn(n)?e.removeAttributeNS(Fn,Rn(t)):e.setAttributeNS(Fn,t,n):hr(e,t,n)}function hr(e,t,n){if(Hn(n))e.removeAttribute(t);else{if(q&&!W&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var mr={create:dr,update:dr};function yr(e,r){var i=r.elm,o=r.data,a=e.data;if(!(t(o.staticClass)&&t(o.class)&&(t(a)||t(a.staticClass)&&t(a.class)))){var s=Bn(r),c=i._transitionClasses;n(c)&&(s=zn(s,Vn(c))),s!==i._prevClass&&(i.setAttribute("class",s),i._prevClass=s)}}var gr,_r,br,$r,wr,Cr,xr={create:yr,update:yr},kr=/[\w).+\-_$\]]/;function Ar(e){var t,n,r,i,o,a=!1,s=!1,c=!1,u=!1,l=0,f=0,p=0,d=0;for(r=0;r=0&&" "===(h=e.charAt(v));v--);h&&kr.test(h)||(u=!0)}}else void 0===i?(d=r+1,i=e.slice(0,r).trim()):m();function m(){(o||(o=[])).push(e.slice(d,r).trim()),d=r+1}if(void 0===i?i=e.slice(0,r).trim():0!==d&&m(),o)for(r=0;r-1?{exp:e.slice(0,$r),key:'"'+e.slice($r+1)+'"'}:{exp:e,key:null};_r=e,$r=wr=Cr=0;for(;!zr();)Vr(br=Ur())?Jr(br):91===br&&Kr(br);return{exp:e.slice(0,wr),key:e.slice(wr+1,Cr)}}(e);return null===n.key?e+"="+t:"$set("+n.exp+", "+n.key+", "+t+")"}function Ur(){return _r.charCodeAt(++$r)}function zr(){return $r>=gr}function Vr(e){return 34===e||39===e}function Kr(e){var t=1;for(wr=$r;!zr();)if(Vr(e=Ur()))Jr(e);else if(91===e&&t++,93===e&&t--,0===t){Cr=$r;break}}function Jr(e){for(var t=e;!zr()&&(e=Ur())!==t;);}var qr,Wr="__r",Zr="__c";function Gr(e,t,n){var r=qr;return function i(){null!==t.apply(null,arguments)&&Qr(e,i,n,r)}}var Xr=Ve&&!(X&&Number(X[1])<=53);function Yr(e,t,n,r){if(Xr){var i=an,o=t;t=o._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=i||e.timeStamp<=0||e.target.ownerDocument!==document)return o.apply(this,arguments)}}qr.addEventListener(e,t,Q?{capture:n,passive:r}:n)}function Qr(e,t,n,r){(r||qr).removeEventListener(e,t._wrapper||t,n)}function ei(e,r){if(!t(e.data.on)||!t(r.data.on)){var i=r.data.on||{},o=e.data.on||{};qr=r.elm,function(e){if(n(e[Wr])){var t=q?"change":"input";e[t]=[].concat(e[Wr],e[t]||[]),delete e[Wr]}n(e[Zr])&&(e.change=[].concat(e[Zr],e.change||[]),delete e[Zr])}(i),rt(i,o,Yr,Qr,Gr,r.context),qr=void 0}}var ti,ni={create:ei,update:ei};function ri(e,r){if(!t(e.data.domProps)||!t(r.data.domProps)){var i,o,a=r.elm,s=e.data.domProps||{},c=r.data.domProps||{};for(i in n(c.__ob__)&&(c=r.data.domProps=A({},c)),s)i in c||(a[i]="");for(i in c){if(o=c[i],"textContent"===i||"innerHTML"===i){if(r.children&&(r.children.length=0),o===s[i])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===i&&"PROGRESS"!==a.tagName){a._value=o;var u=t(o)?"":String(o);ii(a,u)&&(a.value=u)}else if("innerHTML"===i&&qn(a.tagName)&&t(a.innerHTML)){(ti=ti||document.createElement("div")).innerHTML=""+o+"";for(var l=ti.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;l.firstChild;)a.appendChild(l.firstChild)}else if(o!==s[i])try{a[i]=o}catch(e){}}}}function ii(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var r=e.value,i=e._vModifiers;if(n(i)){if(i.number)return f(r)!==f(t);if(i.trim)return r.trim()!==t.trim()}return r!==t}(e,t))}var oi={create:ri,update:ri},ai=g(function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach(function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t});function si(e){var t=ci(e.style);return e.staticStyle?A(e.staticStyle,t):t}function ci(e){return Array.isArray(e)?O(e):"string"==typeof e?ai(e):e}var ui,li=/^--/,fi=/\s*!important$/,pi=function(e,t,n){if(li.test(t))e.style.setProperty(t,n);else if(fi.test(n))e.style.setProperty(C(t),n.replace(fi,""),"important");else{var r=vi(t);if(Array.isArray(n))for(var i=0,o=n.length;i-1?t.split(yi).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function _i(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(yi).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function bi(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&A(t,$i(e.name||"v")),A(t,e),t}return"string"==typeof e?$i(e):void 0}}var $i=g(function(e){return{enterClass:e+"-enter",enterToClass:e+"-enter-to",enterActiveClass:e+"-enter-active",leaveClass:e+"-leave",leaveToClass:e+"-leave-to",leaveActiveClass:e+"-leave-active"}}),wi=z&&!W,Ci="transition",xi="animation",ki="transition",Ai="transitionend",Oi="animation",Si="animationend";wi&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(ki="WebkitTransition",Ai="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Oi="WebkitAnimation",Si="webkitAnimationEnd"));var Ti=z?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function Ei(e){Ti(function(){Ti(e)})}function Ni(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),gi(e,t))}function ji(e,t){e._transitionClasses&&h(e._transitionClasses,t),_i(e,t)}function Di(e,t,n){var r=Mi(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===Ci?Ai:Si,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ci,l=a,f=o.length):t===xi?u>0&&(n=xi,l=u,f=c.length):f=(n=(l=Math.max(a,u))>0?a>u?Ci:xi:null)?n===Ci?o.length:c.length:0,{type:n,timeout:l,propCount:f,hasTransform:n===Ci&&Li.test(r[ki+"Property"])}}function Ii(e,t){for(;e.length1}function Ui(e,t){!0!==t.data.show&&Pi(t)}var zi=function(e){var o,a,s={},c=e.modules,u=e.nodeOps;for(o=0;ov?_(e,t(i[y+1])?null:i[y+1].elm,i,d,y,o):d>y&&$(r,p,v)}(p,h,y,o,l):n(y)?(n(e.text)&&u.setTextContent(p,""),_(p,null,y,0,y.length-1,o)):n(h)?$(h,0,h.length-1):n(e.text)&&u.setTextContent(p,""):e.text!==i.text&&u.setTextContent(p,i.text),n(v)&&n(d=v.hook)&&n(d=d.postpatch)&&d(e,i)}}}function k(e,t,i){if(r(i)&&n(e.parent))e.parent.data.pendingInsert=t;else for(var o=0;o-1,a.selected!==o&&(a.selected=o);else if(N(Wi(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function qi(e,t){return t.every(function(t){return!N(t,e)})}function Wi(e){return"_value"in e?e._value:e.value}function Zi(e){e.target.composing=!0}function Gi(e){e.target.composing&&(e.target.composing=!1,Xi(e.target,"input"))}function Xi(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function Yi(e){return!e.componentInstance||e.data&&e.data.transition?e:Yi(e.componentInstance._vnode)}var Qi={model:Vi,show:{bind:function(e,t,n){var r=t.value,i=(n=Yi(n)).data&&n.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&i?(n.data.show=!0,Pi(n,function(){e.style.display=o})):e.style.display=r?o:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=Yi(n)).data&&n.data.transition?(n.data.show=!0,r?Pi(n,function(){e.style.display=e.__vOriginalDisplay}):Ri(n,function(){e.style.display="none"})):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,i){i||(e.style.display=e.__vOriginalDisplay)}}},eo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function to(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?to(zt(t.children)):e}function no(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var o in i)t[b(o)]=i[o];return t}function ro(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var io=function(e){return e.tag||Ut(e)},oo=function(e){return"show"===e.name},ao={name:"transition",props:eo,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(io)).length){var r=this.mode,o=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return o;var a=to(o);if(!a)return o;if(this._leaving)return ro(e,o);var s="__transition-"+this._uid+"-";a.key=null==a.key?a.isComment?s+"comment":s+a.tag:i(a.key)?0===String(a.key).indexOf(s)?a.key:s+a.key:a.key;var c=(a.data||(a.data={})).transition=no(this),u=this._vnode,l=to(u);if(a.data.directives&&a.data.directives.some(oo)&&(a.data.show=!0),l&&l.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(a,l)&&!Ut(l)&&(!l.componentInstance||!l.componentInstance._vnode.isComment)){var f=l.data.transition=A({},c);if("out-in"===r)return this._leaving=!0,it(f,"afterLeave",function(){t._leaving=!1,t.$forceUpdate()}),ro(e,o);if("in-out"===r){if(Ut(a))return u;var p,d=function(){p()};it(c,"afterEnter",d),it(c,"enterCancelled",d),it(f,"delayLeave",function(e){p=e})}}return o}}},so=A({tag:String,moveClass:String},eo);function co(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function uo(e){e.data.newPos=e.elm.getBoundingClientRect()}function lo(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate("+r+"px,"+i+"px)",o.transitionDuration="0s"}}delete so.mode;var fo={Transition:ao,TransitionGroup:{props:so,beforeMount:function(){var e=this,t=this._update;this._update=function(n,r){var i=Zt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,i(),t.call(e,n,r)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=no(this),s=0;s-1?Gn[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:Gn[e]=/HTMLUnknownElement/.test(t.toString())},A(wn.options.directives,Qi),A(wn.options.components,fo),wn.prototype.__patch__=z?zi:S,wn.prototype.$mount=function(e,t){return function(e,t,n){var r;return e.$el=t,e.$options.render||(e.$options.render=ve),Yt(e,"beforeMount"),r=function(){e._update(e._render(),n)},new fn(e,r,S,{before:function(){e._isMounted&&!e._isDestroyed&&Yt(e,"beforeUpdate")}},!0),n=!1,null==e.$vnode&&(e._isMounted=!0,Yt(e,"mounted")),e}(this,e=e&&z?Yn(e):void 0,t)},z&&setTimeout(function(){F.devtools&&ne&&ne.emit("init",wn)},0);var po=/\{\{((?:.|\r?\n)+?)\}\}/g,vo=/[-.*+?^${}()|[\]\/\\]/g,ho=g(function(e){var t=e[0].replace(vo,"\\$&"),n=e[1].replace(vo,"\\$&");return new RegExp(t+"((?:.|\\n)+?)"+n,"g")});var mo={staticKeys:["staticClass"],transformNode:function(e,t){t.warn;var n=Fr(e,"class");n&&(e.staticClass=JSON.stringify(n));var r=Ir(e,"class",!1);r&&(e.classBinding=r)},genData:function(e){var t="";return e.staticClass&&(t+="staticClass:"+e.staticClass+","),e.classBinding&&(t+="class:"+e.classBinding+","),t}};var yo,go={staticKeys:["staticStyle"],transformNode:function(e,t){t.warn;var n=Fr(e,"style");n&&(e.staticStyle=JSON.stringify(ai(n)));var r=Ir(e,"style",!1);r&&(e.styleBinding=r)},genData:function(e){var t="";return e.staticStyle&&(t+="staticStyle:"+e.staticStyle+","),e.styleBinding&&(t+="style:("+e.styleBinding+"),"),t}},_o=function(e){return(yo=yo||document.createElement("div")).innerHTML=e,yo.textContent},bo=p("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),$o=p("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),wo=p("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),Co=/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,xo=/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,ko="[a-zA-Z_][\\-\\.0-9_a-zA-Z"+P.source+"]*",Ao="((?:"+ko+"\\:)?"+ko+")",Oo=new RegExp("^<"+Ao),So=/^\s*(\/?)>/,To=new RegExp("^<\\/"+Ao+"[^>]*>"),Eo=/^]+>/i,No=/^",""":'"',"&":"&"," ":"\n"," ":"\t","'":"'"},Io=/&(?:lt|gt|quot|amp|#39);/g,Fo=/&(?:lt|gt|quot|amp|#39|#10|#9);/g,Po=p("pre,textarea",!0),Ro=function(e,t){return e&&Po(e)&&"\n"===t[0]};function Ho(e,t){var n=t?Fo:Io;return e.replace(n,function(e){return Mo[e]})}var Bo,Uo,zo,Vo,Ko,Jo,qo,Wo,Zo=/^@|^v-on:/,Go=/^v-|^@|^:|^#/,Xo=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Yo=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Qo=/^\(|\)$/g,ea=/^\[.*\]$/,ta=/:(.*)$/,na=/^:|^\.|^v-bind:/,ra=/\.[^.\]]+(?=[^\]]*$)/g,ia=/^v-slot(:|$)|^#/,oa=/[\r\n]/,aa=/\s+/g,sa=g(_o),ca="_empty_";function ua(e,t,n){return{type:1,tag:e,attrsList:t,attrsMap:ma(t),rawAttrsMap:{},parent:n,children:[]}}function la(e,t){Bo=t.warn||Sr,Jo=t.isPreTag||T,qo=t.mustUseProp||T,Wo=t.getTagNamespace||T;t.isReservedTag;zo=Tr(t.modules,"transformNode"),Vo=Tr(t.modules,"preTransformNode"),Ko=Tr(t.modules,"postTransformNode"),Uo=t.delimiters;var n,r,i=[],o=!1!==t.preserveWhitespace,a=t.whitespace,s=!1,c=!1;function u(e){if(l(e),s||e.processed||(e=fa(e,t)),i.length||e===n||n.if&&(e.elseif||e.else)&&da(n,{exp:e.elseif,block:e}),r&&!e.forbidden)if(e.elseif||e.else)a=e,(u=function(e){var t=e.length;for(;t--;){if(1===e[t].type)return e[t];e.pop()}}(r.children))&&u.if&&da(u,{exp:a.elseif,block:a});else{if(e.slotScope){var o=e.slotTarget||'"default"';(r.scopedSlots||(r.scopedSlots={}))[o]=e}r.children.push(e),e.parent=r}var a,u;e.children=e.children.filter(function(e){return!e.slotScope}),l(e),e.pre&&(s=!1),Jo(e.tag)&&(c=!1);for(var f=0;f]*>)","i")),p=e.replace(f,function(e,n,r){return u=r.length,Do(l)||"noscript"===l||(n=n.replace(//g,"$1").replace(//g,"$1")),Ro(l,n)&&(n=n.slice(1)),t.chars&&t.chars(n),""});c+=e.length-p.length,e=p,A(l,c-u,c)}else{var d=e.indexOf("<");if(0===d){if(No.test(e)){var v=e.indexOf("--\x3e");if(v>=0){t.shouldKeepComment&&t.comment(e.substring(4,v),c,c+v+3),C(v+3);continue}}if(jo.test(e)){var h=e.indexOf("]>");if(h>=0){C(h+2);continue}}var m=e.match(Eo);if(m){C(m[0].length);continue}var y=e.match(To);if(y){var g=c;C(y[0].length),A(y[1],g,c);continue}var _=x();if(_){k(_),Ro(_.tagName,e)&&C(1);continue}}var b=void 0,$=void 0,w=void 0;if(d>=0){for($=e.slice(d);!(To.test($)||Oo.test($)||No.test($)||jo.test($)||(w=$.indexOf("<",1))<0);)d+=w,$=e.slice(d);b=e.substring(0,d)}d<0&&(b=e),b&&C(b.length),t.chars&&b&&t.chars(b,c-b.length,c)}if(e===n){t.chars&&t.chars(e);break}}function C(t){c+=t,e=e.substring(t)}function x(){var t=e.match(Oo);if(t){var n,r,i={tagName:t[1],attrs:[],start:c};for(C(t[0].length);!(n=e.match(So))&&(r=e.match(xo)||e.match(Co));)r.start=c,C(r[0].length),r.end=c,i.attrs.push(r);if(n)return i.unarySlash=n[1],C(n[0].length),i.end=c,i}}function k(e){var n=e.tagName,c=e.unarySlash;o&&("p"===r&&wo(n)&&A(r),s(n)&&r===n&&A(n));for(var u=a(n)||!!c,l=e.attrs.length,f=new Array(l),p=0;p=0&&i[a].lowerCasedTag!==s;a--);else a=0;if(a>=0){for(var u=i.length-1;u>=a;u--)t.end&&t.end(i[u].tag,n,o);i.length=a,r=a&&i[a-1].tag}else"br"===s?t.start&&t.start(e,[],!0,n,o):"p"===s&&(t.start&&t.start(e,[],!1,n,o),t.end&&t.end(e,n,o))}A()}(e,{warn:Bo,expectHTML:t.expectHTML,isUnaryTag:t.isUnaryTag,canBeLeftOpenTag:t.canBeLeftOpenTag,shouldDecodeNewlines:t.shouldDecodeNewlines,shouldDecodeNewlinesForHref:t.shouldDecodeNewlinesForHref,shouldKeepComment:t.comments,outputSourceRange:t.outputSourceRange,start:function(e,o,a,l,f){var p=r&&r.ns||Wo(e);q&&"svg"===p&&(o=function(e){for(var t=[],n=0;nc&&(s.push(o=e.slice(c,i)),a.push(JSON.stringify(o)));var u=Ar(r[1].trim());a.push("_s("+u+")"),s.push({"@binding":u}),c=i+r[0].length}return c-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),Mr(e,"change","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+Br(t,"$$a.concat([$$v])")+")}else{$$i>-1&&("+Br(t,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+Br(t,"$$c")+"}",null,!0)}(e,r,i);else if("input"===o&&"radio"===a)!function(e,t,n){var r=n&&n.number,i=Ir(e,"value")||"null";Er(e,"checked","_q("+t+","+(i=r?"_n("+i+")":i)+")"),Mr(e,"change",Br(t,i),null,!0)}(e,r,i);else if("input"===o||"textarea"===o)!function(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,u=o?"change":"range"===r?Wr:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Br(t,l);c&&(f="if($event.target.composing)return;"+f),Er(e,"value","("+t+")"),Mr(e,u,f,null,!0),(s||a)&&Mr(e,"blur","$forceUpdate()")}(e,r,i);else if(!F.isReservedTag(o))return Hr(e,r,i),!1;return!0},text:function(e,t){t.value&&Er(e,"textContent","_s("+t.value+")",t)},html:function(e,t){t.value&&Er(e,"innerHTML","_s("+t.value+")",t)}},isPreTag:function(e){return"pre"===e},isUnaryTag:bo,mustUseProp:jn,canBeLeftOpenTag:$o,isReservedTag:Wn,getTagNamespace:Zn,staticKeys:function(e){return e.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(",")}(ba)},xa=g(function(e){return p("type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap"+(e?","+e:""))});function ka(e,t){e&&($a=xa(t.staticKeys||""),wa=t.isReservedTag||T,function e(t){t.static=function(e){if(2===e.type)return!1;if(3===e.type)return!0;return!(!e.pre&&(e.hasBindings||e.if||e.for||d(e.tag)||!wa(e.tag)||function(e){for(;e.parent;){if("template"!==(e=e.parent).tag)return!1;if(e.for)return!0}return!1}(e)||!Object.keys(e).every($a)))}(t);if(1===t.type){if(!wa(t.tag)&&"slot"!==t.tag&&null==t.attrsMap["inline-template"])return;for(var n=0,r=t.children.length;n|^function(?:\s+[\w$]+)?\s*\(/,Oa=/\([^)]*?\);*$/,Sa=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,Ta={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},Ea={esc:["Esc","Escape"],tab:"Tab",enter:"Enter",space:[" ","Spacebar"],up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete","Del"]},Na=function(e){return"if("+e+")return null;"},ja={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:Na("$event.target !== $event.currentTarget"),ctrl:Na("!$event.ctrlKey"),shift:Na("!$event.shiftKey"),alt:Na("!$event.altKey"),meta:Na("!$event.metaKey"),left:Na("'button' in $event && $event.button !== 0"),middle:Na("'button' in $event && $event.button !== 1"),right:Na("'button' in $event && $event.button !== 2")};function Da(e,t){var n=t?"nativeOn:":"on:",r="",i="";for(var o in e){var a=La(e[o]);e[o]&&e[o].dynamic?i+=o+","+a+",":r+='"'+o+'":'+a+","}return r="{"+r.slice(0,-1)+"}",i?n+"_d("+r+",["+i.slice(0,-1)+"])":n+r}function La(e){if(!e)return"function(){}";if(Array.isArray(e))return"["+e.map(function(e){return La(e)}).join(",")+"]";var t=Sa.test(e.value),n=Aa.test(e.value),r=Sa.test(e.value.replace(Oa,""));if(e.modifiers){var i="",o="",a=[];for(var s in e.modifiers)if(ja[s])o+=ja[s],Ta[s]&&a.push(s);else if("exact"===s){var c=e.modifiers;o+=Na(["ctrl","shift","alt","meta"].filter(function(e){return!c[e]}).map(function(e){return"$event."+e+"Key"}).join("||"))}else a.push(s);return a.length&&(i+=function(e){return"if(!$event.type.indexOf('key')&&"+e.map(Ma).join("&&")+")return null;"}(a)),o&&(i+=o),"function($event){"+i+(t?"return "+e.value+"($event)":n?"return ("+e.value+")($event)":r?"return "+e.value:e.value)+"}"}return t||n?e.value:"function($event){"+(r?"return "+e.value:e.value)+"}"}function Ma(e){var t=parseInt(e,10);if(t)return"$event.keyCode!=="+t;var n=Ta[e],r=Ea[e];return"_k($event.keyCode,"+JSON.stringify(e)+","+JSON.stringify(n)+",$event.key,"+JSON.stringify(r)+")"}var Ia={on:function(e,t){e.wrapListeners=function(e){return"_g("+e+","+t.value+")"}},bind:function(e,t){e.wrapData=function(n){return"_b("+n+",'"+e.tag+"',"+t.value+","+(t.modifiers&&t.modifiers.prop?"true":"false")+(t.modifiers&&t.modifiers.sync?",true":"")+")"}},cloak:S},Fa=function(e){this.options=e,this.warn=e.warn||Sr,this.transforms=Tr(e.modules,"transformCode"),this.dataGenFns=Tr(e.modules,"genData"),this.directives=A(A({},Ia),e.directives);var t=e.isReservedTag||T;this.maybeComponent=function(e){return!!e.component||!t(e.tag)},this.onceId=0,this.staticRenderFns=[],this.pre=!1};function Pa(e,t){var n=new Fa(t);return{render:"with(this){return "+(e?Ra(e,n):'_c("div")')+"}",staticRenderFns:n.staticRenderFns}}function Ra(e,t){if(e.parent&&(e.pre=e.pre||e.parent.pre),e.staticRoot&&!e.staticProcessed)return Ha(e,t);if(e.once&&!e.onceProcessed)return Ba(e,t);if(e.for&&!e.forProcessed)return za(e,t);if(e.if&&!e.ifProcessed)return Ua(e,t);if("template"!==e.tag||e.slotTarget||t.pre){if("slot"===e.tag)return function(e,t){var n=e.slotName||'"default"',r=qa(e,t),i="_t("+n+(r?","+r:""),o=e.attrs||e.dynamicAttrs?Ga((e.attrs||[]).concat(e.dynamicAttrs||[]).map(function(e){return{name:b(e.name),value:e.value,dynamic:e.dynamic}})):null,a=e.attrsMap["v-bind"];!o&&!a||r||(i+=",null");o&&(i+=","+o);a&&(i+=(o?"":",null")+","+a);return i+")"}(e,t);var n;if(e.component)n=function(e,t,n){var r=t.inlineTemplate?null:qa(t,n,!0);return"_c("+e+","+Va(t,n)+(r?","+r:"")+")"}(e.component,e,t);else{var r;(!e.plain||e.pre&&t.maybeComponent(e))&&(r=Va(e,t));var i=e.inlineTemplate?null:qa(e,t,!0);n="_c('"+e.tag+"'"+(r?","+r:"")+(i?","+i:"")+")"}for(var o=0;o>>0}(a):"")+")"}(e,e.scopedSlots,t)+","),e.model&&(n+="model:{value:"+e.model.value+",callback:"+e.model.callback+",expression:"+e.model.expression+"},"),e.inlineTemplate){var o=function(e,t){var n=e.children[0];if(n&&1===n.type){var r=Pa(n,t.options);return"inlineTemplate:{render:function(){"+r.render+"},staticRenderFns:["+r.staticRenderFns.map(function(e){return"function(){"+e+"}"}).join(",")+"]}"}}(e,t);o&&(n+=o+",")}return n=n.replace(/,$/,"")+"}",e.dynamicAttrs&&(n="_b("+n+',"'+e.tag+'",'+Ga(e.dynamicAttrs)+")"),e.wrapData&&(n=e.wrapData(n)),e.wrapListeners&&(n=e.wrapListeners(n)),n}function Ka(e){return 1===e.type&&("slot"===e.tag||e.children.some(Ka))}function Ja(e,t){var n=e.attrsMap["slot-scope"];if(e.if&&!e.ifProcessed&&!n)return Ua(e,t,Ja,"null");if(e.for&&!e.forProcessed)return za(e,t,Ja);var r=e.slotScope===ca?"":String(e.slotScope),i="function("+r+"){return "+("template"===e.tag?e.if&&n?"("+e.if+")?"+(qa(e,t)||"undefined")+":undefined":qa(e,t)||"undefined":Ra(e,t))+"}",o=r?"":",proxy:true";return"{key:"+(e.slotTarget||'"default"')+",fn:"+i+o+"}"}function qa(e,t,n,r,i){var o=e.children;if(o.length){var a=o[0];if(1===o.length&&a.for&&"template"!==a.tag&&"slot"!==a.tag){var s=n?t.maybeComponent(a)?",1":",0":"";return""+(r||Ra)(a,t)+s}var c=n?function(e,t){for(var n=0,r=0;r':'
',ts.innerHTML.indexOf(" ")>0}var os=!!z&&is(!1),as=!!z&&is(!0),ss=g(function(e){var t=Yn(e);return t&&t.innerHTML}),cs=wn.prototype.$mount;return wn.prototype.$mount=function(e,t){if((e=e&&Yn(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=ss(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){var i=rs(r,{outputSourceRange:!1,shouldDecodeNewlines:os,shouldDecodeNewlinesForHref:as,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return cs.call(this,e,t)},wn.compile=rs,wn}); --------------------------------------------------------------------------------