UNPKG

galaxy-uniapp-mcp-server

Version:

Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成

github.com/galaxy/uniapp-mcp-server

galaxy/uniapp-mcp-server

93 lines • 37.2 kB
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
{ "id": "Admin12121_stupid-mouse-29", "name": "stupid-mouse-29", "category": "loaders", "author": "Admin12121", "description": "stupid-mouse-29 组件 (loader, animated, animation, gradient)", "tags": [ "loader", "animated", "animation", "gradient" ], "original": { "html": "<div class=\"scene\">\n <div class=\"forest\">\n <div class=\"tree tree1\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n </div>\n\n <div class=\"tree tree2\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n <div class=\"branch branch-bottom\"></div>\n </div>\n\n <div class=\"tree tree3\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n <div class=\"branch branch-bottom\"></div>\n </div>\n\n <div class=\"tree tree4\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n <div class=\"branch branch-bottom\"></div>\n </div>\n\n <div class=\"tree tree5\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n <div class=\"branch branch-bottom\"></div>\n </div>\n\n <div class=\"tree tree6\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n <div class=\"branch branch-bottom\"></div>\n </div>\n\n <div class=\"tree tree7\">\n <div class=\"branch branch-top\"></div>\n <div class=\"branch branch-middle\"></div>\n <div class=\"branch branch-bottom\"></div>\n </div>\n </div>\n \n <div class=\"tent\">\n <div class=\"roof\"></div>\n <div class=\"roof-border-left\">\n <div class=\"roof-border roof-border1\"></div>\n <div class=\"roof-border roof-border2\"></div>\n <div class=\"roof-border roof-border3\"></div>\n </div>\n <div class=\"entrance\">\n <div class=\"door left-door\">\n <div class=\"left-door-inner\"></div>\n </div>\n <div class=\"door right-door\">\n <div class=\"right-door-inner\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"floor\">\n <div class=\"ground ground1\"></div>\n <div class=\"ground ground2\"></div>\n </div>\n \n <div class=\"fireplace\">\n <div class=\"support\"></div>\n <div class=\"support\"></div>\n <div class=\"bar\"></div>\n <div class=\"hanger\"></div>\n <div class=\"smoke\"></div>\n <div class=\"pan\"></div>\n <div class=\"fire\">\n <div class=\"line line1\">\n <div class=\"particle particle1\"></div>\n <div class=\"particle particle2\"></div>\n <div class=\"particle particle3\"></div>\n <div class=\"particle particle4\"></div>\n </div>\n <div class=\"line line2\">\n <div class=\"particle particle1\"></div>\n <div class=\"particle particle2\"></div>\n <div class=\"particle particle3\"></div>\n <div class=\"particle particle4\"></div>\n </div>\n <div class=\"line line3\">\n <div class=\"particle particle1\"></div>\n <div class=\"particle particle2\"></div>\n <div class=\"particle particle3\"></div>\n <div class=\"particle particle4\"></div>\n </div>\n </div>\n </div>\n \n <div class=\"time-wrapper\">\n <div class=\"time\">\n <div class=\"day\"></div>\n <div class=\"night\">\n <div class=\"moon\"></div>\n <div class=\"star star1 star-big\"></div>\n <div class=\"star star2 star-big\"></div>\n <div class=\"star star3 star-big\"></div>\n <div class=\"star star4\"></div>\n <div class=\"star star5\"></div>\n <div class=\"star star6\"></div>\n <div class=\"star star7\"></div>\n </div>\n </div>\n </div>\n</div>", "css": "/* From Uiverse.io by Admin12121 - Tags: loader, animated */\n@keyframes stageBackground {\n 0%, 10%, 90%, 100% {\n background-color: #00B6BB;\n }\n\n 25%, 75% {\n background-color: #0094bd;\n }\n}\n\n@keyframes earthRotation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes sunrise {\n 0%, 10%, 90%, 100% {\n box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);\n }\n\n 25%, 75% {\n box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);\n }\n}\n\n@keyframes moonOrbit {\n 25% {\n transform: rotate(-60deg);\n }\n\n 50% {\n transform: rotate(-60deg);\n }\n\n 75% {\n transform: rotate(-120deg);\n }\n\n 0%, 100% {\n transform: rotate(-180deg);\n }\n}\n\n@keyframes nightTime {\n 0%, 90% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes hotPan {\n 0%, 90% {\n background-color: #74667e;\n }\n\n 50%, 75% {\n background-color: #b2241c;\n }\n}\n\n@keyframes heat {\n 0%, 90% {\n box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);\n }\n\n 50%, 75% {\n box-shadow: inset 0 -2px 0 0 white;\n }\n}\n\n@keyframes smoke {\n 0%, 50%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 0.7;\n }\n}\n\n@keyframes fire {\n 0%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes treeShake {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-2deg);\n }\n\n 40% {\n transform: rotate(4deg);\n }\n\n 50% {\n transform: rotate(-4deg);\n }\n\n 60% {\n transform: rotate(6deg);\n }\n\n 75% {\n transform: rotate(-6deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes fireParticles {\n 0% {\n height: 30%;\n opacity: 1;\n top: 75%;\n }\n\n 25% {\n height: 25%;\n opacity: 0.8;\n top: 40%;\n }\n\n 50% {\n height: 15%;\n opacity: 0.6;\n top: 20%;\n }\n\n 75% {\n height: 10%;\n opacity: 0.3;\n top: 0;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes fireLines {\n 0%, 25%, 75%, 100% {\n bottom: 0;\n }\n\n 50% {\n bottom: 5%;\n }\n}\n\n.scene {\n display: flex;\n margin: 0 auto 80px auto;\n justify-content: center;\n align-items: flex-end;\n width: 400px;\n height: 300px;\n position: relative;\n}\n\n.forest {\n display: flex;\n width: 75%;\n height: 90%;\n position: relative;\n}\n\n.tree {\n display: block;\n width: 50%;\n position: absolute;\n bottom: 0;\n opacity: 0.4;\n}\n\n.tree .branch {\n width: 80%;\n height: 0;\n margin: 0 auto;\n padding-left: 40%;\n padding-bottom: 50%;\n overflow: hidden;\n}\n\n.tree .branch:before {\n content: \"\";\n display: block;\n width: 0;\n height: 0;\n margin-left: -600px;\n border-left: 600px solid transparent;\n border-right: 600px solid transparent;\n border-bottom: 950px solid #000;\n}\n\n.tree .branch.branch-top {\n transform-origin: 50% 100%;\n animation: treeShake 0.5s linear infinite;\n}\n\n.tree .branch.branch-middle {\n width: 90%;\n padding-left: 45%;\n padding-bottom: 65%;\n margin: 0 auto;\n margin-top: -25%;\n}\n\n.tree .branch.branch-bottom {\n width: 100%;\n padding-left: 50%;\n padding-bottom: 80%;\n margin: 0 auto;\n margin-top: -40%;\n}\n\n.tree1 {\n width: 31%;\n}\n\n.tree1 .branch-top {\n transition-delay: 0.3s;\n}\n\n.tree2 {\n width: 39%;\n left: 9%;\n}\n\n.tree2 .branch-top {\n transition-delay: 0.4s;\n}\n\n.tree3 {\n width: 32%;\n left: 24%;\n}\n\n.tree3 .branch-top {\n transition-delay: 0.5s;\n}\n\n.tree4 {\n width: 37%;\n left: 34%;\n}\n\n.tree4 .branch-top {\n transition-delay: 0.6s;\n}\n\n.tree5 {\n width: 44%;\n left: 44%;\n}\n\n.tree5 .branch-top {\n transition-delay: 0.7s;\n}\n\n.tree6 {\n width: 34%;\n left: 61%;\n}\n\n.tree6 .branch-top {\n transition-delay: 0.2s;\n}\n\n.tree7 {\n width: 24%;\n left: 76%;\n}\n\n.tree7 .branch-top {\n transition-delay: 0.1s;\n}\n\n.tent {\n width: 60%;\n height: 25%;\n position: absolute;\n bottom: -0.5%;\n right: 15%;\n z-index: 1;\n text-align: right;\n}\n\n.roof {\n display: inline-block;\n width: 45%;\n height: 100%;\n margin-right: 10%;\n position: relative;\n /*bottom: 0;\n right: 9%;*/\n z-index: 1;\n border-top: 4px solid #4D4454;\n border-right: 4px solid #4D4454;\n border-left: 4px solid #4D4454;\n border-top-right-radius: 6px;\n transform: skew(30deg);\n box-shadow: inset -3px 3px 0px 0px #F7B563;\n /*background: linear-gradient(\n to bottom, \n rgba(246,212,132,1) 0%,\n rgba(246,212,132,1) 24%,\n rgba(#F0B656,1) 25%,\n rgba(#F0B656,1) 74%,\n rgba(235,151,53,1) 75%,\n rgba(235,151,53,1) 100%\n );*/\n background: #f6d484;\n}\n\n.roof:before {\n content: \"\";\n width: 70%;\n height: 70%;\n position: absolute;\n top: 15%;\n left: 15%;\n z-index: 0;\n border-radius: 10%;\n background-color: #E78C20;\n}\n\n.roof:after {\n content: \"\";\n height: 75%;\n width: 100%;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 1;\n background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);\n}\n\n.roof-border-left {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 1%;\n height: 125%;\n position: absolute;\n top: 0;\n left: 35.7%;\n z-index: 1;\n transform-origin: 50% 0%;\n transform: rotate(35deg);\n}\n\n.roof-border-left .roof-border {\n display: block;\n width: 100%;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.roof-border-left .roof-border1 {\n height: 40%;\n}\n\n.roof-border-left .roof-border2 {\n height: 10%;\n}\n\n.roof-border-left .roof-border3 {\n height: 40%;\n}\n\n.door {\n width: 55px;\n height: 92px;\n position: absolute;\n bottom: 2%;\n overflow: hidden;\n z-index: 0;\n transform-origin: 0 105%;\n}\n\n.left-door {\n transform: rotate(35deg);\n position: absolute;\n left: 13.5%;\n bottom: -3%;\n z-index: 0;\n}\n\n.left-door .left-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 105%;\n transform: rotate(-35deg);\n position: absolute;\n top: 0;\n overflow: hidden;\n background-color: #EDDDC2;\n}\n\n.left-door .left-door-inner:before {\n content: \"\";\n width: 15%;\n height: 100%;\n position: absolute;\n top: 0;\n right: 0;\n background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);\n}\n\n.left-door .left-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n left: 10%;\n transform: rotate(25deg);\n background-color: #fff;\n}\n\n.right-door {\n height: 89px;\n right: 21%;\n transform-origin: 0 105%;\n transform: rotate(-30deg) scaleX(-1);\n position: absolute;\n bottom: -3%;\n z-index: 0;\n}\n\n.right-door .right-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 120%;\n transform: rotate(-30deg);\n position: absolute;\n bottom: 0px;\n overflow: hidden;\n background-color: #EFE7CF;\n}\n\n.right-door .right-door-inner:before {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -28%;\n z-index: 1;\n transform: rotate(15deg);\n background-color: #524A5A;\n}\n\n.right-door .right-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -20%;\n transform: rotate(20deg);\n background-color: #fff;\n}\n\n.floor {\n width: 80%;\n position: absolute;\n right: 10%;\n bottom: 0;\n z-index: 1;\n}\n\n.floor .ground {\n position: absolute;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.floor .ground.ground1 {\n width: 65%;\n left: 0;\n}\n\n.floor .ground.ground2 {\n width: 30%;\n right: 0;\n}\n\n.fireplace {\n display: block;\n width: 24%;\n height: 20%;\n position: absolute;\n left: 5%;\n}\n\n.fireplace:before {\n content: \"\";\n display: block;\n width: 8%;\n position: absolute;\n bottom: -4px;\n left: 2%;\n border-radius: 2px;\n border: 2px solid #4D4454;\n background: #4D4454;\n}\n\n.fireplace .support {\n display: block;\n height: 105%;\n width: 2px;\n position: absolute;\n bottom: -5%;\n left: 10%;\n border: 2px solid #4D4454;\n}\n\n.fireplace .support:before {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: -4px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n transform-origin: 100% 100%;\n transform: rotate(45deg);\n}\n\n.fireplace .support:after {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: 0px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n transform-origin: 0 100%;\n transform: rotate(-45deg);\n}\n\n.fireplace .support:nth-child(1) {\n left: 85%;\n}\n\n.fireplace .bar {\n width: 100%;\n height: 2px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.fireplace .hanger {\n display: block;\n width: 2px;\n height: 25%;\n margin-left: -4px;\n position: absolute;\n left: 50%;\n border: 2px solid #4D4454;\n}\n\n.fireplace .pan {\n display: block;\n width: 25%;\n height: 50%;\n border-radius: 50%;\n border: 4px solid #4D4454;\n position: absolute;\n top: 25%;\n left: 35%;\n overflow: hidden;\n animation: heat 5s linear infinite;\n}\n\n.fireplace .pan:before {\n content: \"\";\n display: block;\n height: 53%;\n width: 100%;\n position: absolute;\n bottom: 0;\n z-index: -1;\n border-top: 4px solid #4D4454;\n background-color: #74667e;\n animation: hotPan 5s linear infinite;\n}\n\n.fireplace .smoke {\n display: block;\n width: 20%;\n height: 25%;\n position: absolute;\n top: 25%;\n left: 37%;\n background-color: white;\n filter: blur(5px);\n animation: smoke 5s linear infinite;\n}\n\n.fireplace .fire {\n display: block;\n width: 25%;\n height: 120%;\n position: absolute;\n bottom: 0;\n left: 33%;\n z-index: 1;\n animation: fire 5s linear infinite;\n}\n\n.fireplace .fire:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: -4px;\n z-index: 1;\n border-radius: 2px;\n border: 1px solid #efb54a;\n background-color: #efb54a;\n}\n\n.fireplace .fire .line {\n display: block;\n width: 2px;\n height: 100%;\n position: absolute;\n bottom: 0;\n animation: fireLines 1s linear infinite;\n}\n\n.fireplace .fire .line2 {\n left: 50%;\n margin-left: -1px;\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line3 {\n right: 0;\n animation-delay: 0.5s;\n}\n\n.fireplace .fire .line .particle {\n height: 10%;\n position: absolute;\n top: 100%;\n z-index: 1;\n border-radius: 2px;\n border: 2px solid #efb54a;\n animation: fireParticles 0.5s linear infinite;\n}\n\n.fireplace .fire .line .particle1 {\n animation-delay: 0.1s;\n}\n\n.fireplace .fire .line .particle2 {\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line .particle3 {\n animation-delay: 0.6s;\n}\n\n.fireplace .fire .line .particle4 {\n animation-delay: 0.9s;\n}\n\n.time-wrapper {\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n}\n\n.time {\n display: block;\n width: 100%;\n height: 200%;\n position: absolute;\n transform-origin: 50% 50%;\n transform: rotate(270deg);\n animation: earthRotation 5s linear infinite;\n}\n\n.time .day {\n display: block;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 20%;\n left: 40%;\n border-radius: 50%;\n box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);\n animation: sunrise 5s ease-in-out infinite;\n background-color: #ef9431;\n}\n\n.time .night {\n animation: nightTime 5s ease-in-out infinite;\n}\n\n.time .night .star {\n display: block;\n width: 4px;\n height: 4px;\n position: absolute;\n bottom: 10%;\n border-radius: 50%;\n background-color: #fff;\n}\n\n.time .night .star-big {\n width: 6px;\n height: 6px;\n}\n\n.time .night .star1 {\n right: 23%;\n bottom: 25%;\n}\n\n.time .night .star2 {\n right: 35%;\n bottom: 18%;\n}\n\n.time .night .star3 {\n right: 47%;\n bottom: 25%;\n}\n\n.time .night .star4 {\n right: 22%;\n bottom: 20%;\n}\n\n.time .night .star5 {\n right: 18%;\n bottom: 30%;\n}\n\n.time .night .star6 {\n right: 60%;\n bottom: 20%;\n}\n\n.time .night .star7 {\n right: 70%;\n bottom: 23%;\n}\n\n.time .night .moon {\n display: block;\n width: 25px;\n height: 25px;\n position: absolute;\n bottom: 22%;\n right: 33%;\n border-radius: 50%;\n transform: rotate(-60deg);\n box-shadow: 9px 9px 3px 0 white;\n filter: blur(1px);\n animation: moonOrbit 5s ease-in-out infinite;\n}\n\n.time .night .moon:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n bottom: -9px;\n left: 9px;\n border-radius: 50%;\n box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05);\n background-color: rgba(255, 255, 255, 0.2);\n}", "file_path": "/mnt/persist/workspace/loaders/Admin12121_stupid-mouse-29.html" }, "uniapp": { "template": "<view class=\"scene\"></view>\n <view class=\"forest\"></view>\n <view class=\"tree tree1\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n </div>\n\n <view class=\"tree tree2\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n <view class=\"branch branch-bottom\"></view>\n </div>\n\n <view class=\"tree tree3\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n <view class=\"branch branch-bottom\"></view>\n </div>\n\n <view class=\"tree tree4\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n <view class=\"branch branch-bottom\"></view>\n </div>\n\n <view class=\"tree tree5\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n <view class=\"branch branch-bottom\"></view>\n </div>\n\n <view class=\"tree tree6\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n <view class=\"branch branch-bottom\"></view>\n </div>\n\n <view class=\"tree tree7\"></view>\n <view class=\"branch branch-top\"></view>\n <view class=\"branch branch-middle\"></view>\n <view class=\"branch branch-bottom\"></view>\n </div>\n </div>\n \n <view class=\"tent\"></view>\n <view class=\"roof\"></view>\n <view class=\"roof-border-left\"></view>\n <view class=\"roof-border roof-border1\"></view>\n <view class=\"roof-border roof-border2\"></view>\n <view class=\"roof-border roof-border3\"></view>\n </div>\n <view class=\"entrance\"></view>\n <view class=\"door left-door\"></view>\n <view class=\"left-door-inner\"></view>\n </div>\n <view class=\"door right-door\"></view>\n <view class=\"right-door-inner\"></view>\n </div>\n </div>\n </div>\n\n <view class=\"floor\"></view>\n <view class=\"ground ground1\"></view>\n <view class=\"ground ground2\"></view>\n </div>\n \n <view class=\"fireplace\"></view>\n <view class=\"support\"></view>\n <view class=\"support\"></view>\n <view class=\"bar\"></view>\n <view class=\"hanger\"></view>\n <view class=\"smoke\"></view>\n <view class=\"pan\"></view>\n <view class=\"fire\"></view>\n <view class=\"line line1\"></view>\n <view class=\"particle particle1\"></view>\n <view class=\"particle particle2\"></view>\n <view class=\"particle particle3\"></view>\n <view class=\"particle particle4\"></view>\n </div>\n <view class=\"line line2\"></view>\n <view class=\"particle particle1\"></view>\n <view class=\"particle particle2\"></view>\n <view class=\"particle particle3\"></view>\n <view class=\"particle particle4\"></view>\n </div>\n <view class=\"line line3\"></view>\n <view class=\"particle particle1\"></view>\n <view class=\"particle particle2\"></view>\n <view class=\"particle particle3\"></view>\n <view class=\"particle particle4\"></view>\n </div>\n </div>\n </div>\n \n <view class=\"time-wrapper\"></view>\n <view class=\"time\"></view>\n <view class=\"day\"></view>\n <view class=\"night\"></view>\n <view class=\"moon\"></view>\n <view class=\"star star1 star-big\"></view>\n <view class=\"star star2 star-big\"></view>\n <view class=\"star star3 star-big\"></view>\n <view class=\"star star4\"></view>\n <view class=\"star star5\"></view>\n <view class=\"star star6\"></view>\n <view class=\"star star7\"></view>\n </div>\n </div>\n </div>\n</div>", "script": "export default {\n name: 'GalaxyStupidMouse29',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}", "style": "\n/* From Uiverse.io by Admin12121 - Tags: loader, animated */\n@keyframes stageBackground {\n 0%, 10%, 90%, 100% {\n background-color: #00B6BB;\n }\n\n 25%, 75% {\n background-color: #0094bd;\n }\n}\n\n@keyframes earthRotation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes sunrise {\n 0%, 10%, 90%, 100% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 0 50rpx #5ad6bd, 0 0 0 80rpx #4acead, 0 0 0 120rpx rgba(74, 206, 173, 0.6), 0 0 0 180rpx rgba(74, 206, 173, 0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 25%, 75% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n}\n\n@keyframes moonOrbit {\n 25% {\n transform: rotate(-60deg);\n }\n\n 50% {\n transform: rotate(-60deg);\n }\n\n 75% {\n transform: rotate(-120deg);\n }\n\n 0%, 100% {\n transform: rotate(-180deg);\n }\n}\n\n@keyframes nightTime {\n 0%, 90% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes hotPan {\n 0%, 90% {\n background-color: #74667e;\n }\n\n 50%, 75% {\n background-color: #b2241c;\n }\n}\n\n@keyframes heat {\n 0%, 90% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 50%, 75% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 -4rpx 0 0 white;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n}\n\n@keyframes smoke {\n 0%, 50%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 0.7;\n }\n}\n\n@keyframes fire {\n 0%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes treeShake {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-2deg);\n }\n\n 40% {\n transform: rotate(4deg);\n }\n\n 50% {\n transform: rotate(-4deg);\n }\n\n 60% {\n transform: rotate(6deg);\n }\n\n 75% {\n transform: rotate(-6deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes fireParticles {\n 0% {\n height: 30%;\n opacity: 1;\n top: 75%;\n }\n\n 25% {\n height: 25%;\n opacity: 0.8;\n top: 40%;\n }\n\n 50% {\n height: 15%;\n opacity: 0.6;\n top: 20%;\n }\n\n 75% {\n height: 10%;\n opacity: 0.3;\n top: 0;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes fireLines {\n 0%, 25%, 75%, 100% {\n bottom: 0;\n }\n\n 50% {\n bottom: 5%;\n }\n}\n\n.scene {\n display: flex;\n margin: 0 auto 160rpx auto;\n justify-content: center;\n align-items: flex-end;\n width: 800rpx;\n height: 600rpx;\n position: relative;\n}\n\n.forest {\n display: flex;\n width: 75%;\n height: 90%;\n position: relative;\n}\n\n.tree {\n display: block;\n width: 50%;\n position: absolute;\n bottom: 0;\n opacity: 0.4;\n}\n\n.tree .branch {\n width: 80%;\n height: 0;\n margin: 0 auto;\n padding-left: 40%;\n padding-bottom: 50%;\n overflow: hidden;\n}\n\n.tree .branch:before {\n content: \"\";\n display: block;\n width: 0;\n height: 0;\n margin-left: -1200rpx;\n border-left: 1200rpx solid transparent;\n border-right: 1200rpx solid transparent;\n border-bottom: 1900rpx solid #000;\n}\n\n.tree .branch.branch-top {\n transform-origin: 50% 100%;\n animation: treeShake 0.5s linear infinite;\n}\n\n.tree .branch.branch-middle {\n width: 90%;\n padding-left: 45%;\n padding-bottom: 65%;\n margin: 0 auto;\n margin-top: -25%;\n}\n\n.tree .branch.branch-bottom {\n width: 100%;\n padding-left: 50%;\n padding-bottom: 80%;\n margin: 0 auto;\n margin-top: -40%;\n}\n\n.tree1 {\n width: 31%;\n}\n\n.tree1 .branch-top {\n transition-delay: 0.3s;\n}\n\n.tree2 {\n width: 39%;\n left: 9%;\n}\n\n.tree2 .branch-top {\n transition-delay: 0.4s;\n}\n\n.tree3 {\n width: 32%;\n left: 24%;\n}\n\n.tree3 .branch-top {\n transition-delay: 0.5s;\n}\n\n.tree4 {\n width: 37%;\n left: 34%;\n}\n\n.tree4 .branch-top {\n transition-delay: 0.6s;\n}\n\n.tree5 {\n width: 44%;\n left: 44%;\n}\n\n.tree5 .branch-top {\n transition-delay: 0.7s;\n}\n\n.tree6 {\n width: 34%;\n left: 61%;\n}\n\n.tree6 .branch-top {\n transition-delay: 0.2s;\n}\n\n.tree7 {\n width: 24%;\n left: 76%;\n}\n\n.tree7 .branch-top {\n transition-delay: 0.1s;\n}\n\n.tent {\n width: 60%;\n height: 25%;\n position: absolute;\n bottom: -0.5%;\n right: 15%;\n z-index: 1;\n text-align: right;\n}\n\n.roof {\n display: inline-block;\n width: 45%;\n height: 100%;\n margin-right: 10%;\n position: relative;\n /*bottom: 0;\n right: 9%;*/\n z-index: 1;\n border-top: 8rpx solid #4D4454;\n border-right: 8rpx solid #4D4454;\n border-left: 8rpx solid #4D4454;\n border-top-right-radius: 12rpx;\n transform: skew(30deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset -6rpx 6rpx 0rpx 0rpx #F7B563;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n /*background: linear-gradient(\n to bottom, \n rgba(246,212,132,1) 0%,\n rgba(246,212,132,1) 24%,\n rgba(#F0B656,1) 25%,\n rgba(#F0B656,1) 74%,\n rgba(235,151,53,1) 75%,\n rgba(235,151,53,1) 100%\n );*/\n background: #f6d484;\n}\n\n.roof:before {\n content: \"\";\n width: 70%;\n height: 70%;\n position: absolute;\n top: 15%;\n left: 15%;\n z-index: 0;\n border-radius: 10%;\n background-color: #E78C20;\n}\n\n.roof:after {\n content: \"\";\n height: 75%;\n width: 100%;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 1;\n background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);\n}\n\n.roof-border-left {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 1%;\n height: 125%;\n position: absolute;\n top: 0;\n left: 35.7%;\n z-index: 1;\n transform-origin: 50% 0%;\n transform: rotate(35deg);\n}\n\n.roof-border-left .roof-border {\n display: block;\n width: 100%;\n border-radius: 4rpx;\n border: 4rpx solid #4D4454;\n}\n\n.roof-border-left .roof-border1 {\n height: 40%;\n}\n\n.roof-border-left .roof-border2 {\n height: 10%;\n}\n\n.roof-border-left .roof-border3 {\n height: 40%;\n}\n\n.door {\n width: 110rpx;\n height: 184rpx;\n position: absolute;\n bottom: 2%;\n overflow: hidden;\n z-index: 0;\n transform-origin: 0 105%;\n}\n\n.left-door {\n transform: rotate(35deg);\n position: absolute;\n left: 13.5%;\n bottom: -3%;\n z-index: 0;\n}\n\n.left-door .left-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 105%;\n transform: rotate(-35deg);\n position: absolute;\n top: 0;\n overflow: hidden;\n background-color: #EDDDC2;\n}\n\n.left-door .left-door-inner:before {\n content: \"\";\n width: 15%;\n height: 100%;\n position: absolute;\n top: 0;\n right: 0;\n background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);\n}\n\n.left-door .left-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n left: 10%;\n transform: rotate(25deg);\n background-color: #fff;\n}\n\n.right-door {\n height: 178rpx;\n right: 21%;\n transform-origin: 0 105%;\n transform: rotate(-30deg) scaleX(-1);\n position: absolute;\n bottom: -3%;\n z-index: 0;\n}\n\n.right-door .right-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 120%;\n transform: rotate(-30deg);\n position: absolute;\n bottom: 0rpx;\n overflow: hidden;\n background-color: #EFE7CF;\n}\n\n.right-door .right-door-inner:before {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -28%;\n z-index: 1;\n transform: rotate(15deg);\n background-color: #524A5A;\n}\n\n.right-door .right-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -20%;\n transform: rotate(20deg);\n background-color: #fff;\n}\n\n.floor {\n width: 80%;\n position: absolute;\n right: 10%;\n bottom: 0;\n z-index: 1;\n}\n\n.floor .ground {\n position: absolute;\n border-radius: 4rpx;\n border: 4rpx solid #4D4454;\n}\n\n.floor .ground.ground1 {\n width: 65%;\n left: 0;\n}\n\n.floor .ground.ground2 {\n width: 30%;\n right: 0;\n}\n\n.fireplace {\n display: block;\n width: 24%;\n height: 20%;\n position: absolute;\n left: 5%;\n}\n\n.fireplace:before {\n content: \"\";\n display: block;\n width: 8%;\n position: absolute;\n bottom: -8rpx;\n left: 2%;\n border-radius: 4rpx;\n border: 4rpx solid #4D4454;\n background: #4D4454;\n}\n\n.fireplace .support {\n display: block;\n height: 105%;\n width: 4rpx;\n position: absolute;\n bottom: -5%;\n left: 10%;\n border: 4rpx solid #4D4454;\n}\n\n.fireplace .support:before {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: -8rpx;\n border-radius: 4rpx;\n border: 4rpx solid #4D4454;\n transform-origin: 100% 100%;\n transform: rotate(45deg);\n}\n\n.fireplace .support:after {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: 0rpx;\n border-radius: 4rpx;\n border: 4rpx solid #4D4454;\n transform-origin: 0 100%;\n transform: rotate(-45deg);\n}\n\n.fireplace .support:nth-child(1) {\n left: 85%;\n}\n\n.fireplace .bar {\n width: 100%;\n height: 4rpx;\n border-radius: 4rpx;\n border: 4rpx solid #4D4454;\n}\n\n.fireplace .hanger {\n display: block;\n width: 4rpx;\n height: 25%;\n margin-left: -8rpx;\n position: absolute;\n left: 50%;\n border: 4rpx solid #4D4454;\n}\n\n.fireplace .pan {\n display: block;\n width: 25%;\n height: 50%;\n border-radius: 50%;\n border: 8rpx solid #4D4454;\n position: absolute;\n top: 25%;\n left: 35%;\n overflow: hidden;\n animation: heat 5s linear infinite;\n}\n\n.fireplace .pan:before {\n content: \"\";\n display: block;\n height: 53%;\n width: 100%;\n position: absolute;\n bottom: 0;\n z-index: -1;\n border-top: 8rpx solid #4D4454;\n background-color: #74667e;\n animation: hotPan 5s linear infinite;\n}\n\n.fireplace .smoke {\n display: block;\n width: 20%;\n height: 25%;\n position: absolute;\n top: 25%;\n left: 37%;\n background-color: white;\n \n animation: smoke 5s linear infinite;\n}\n\n.fireplace .fire {\n display: block;\n width: 25%;\n height: 120%;\n position: absolute;\n bottom: 0;\n left: 33%;\n z-index: 1;\n animation: fire 5s linear infinite;\n}\n\n.fireplace .fire:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 4rpx;\n position: absolute;\n bottom: -8rpx;\n z-index: 1;\n border-radius: 4rpx;\n border: 2rpx solid #efb54a;\n background-color: #efb54a;\n}\n\n.fireplace .fire .line {\n display: block;\n width: 4rpx;\n height: 100%;\n position: absolute;\n bottom: 0;\n animation: fireLines 1s linear infinite;\n}\n\n.fireplace .fire .line2 {\n left: 50%;\n margin-left: -2rpx;\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line3 {\n right: 0;\n animation-delay: 0.5s;\n}\n\n.fireplace .fire .line .particle {\n height: 10%;\n position: absolute;\n top: 100%;\n z-index: 1;\n border-radius: 4rpx;\n border: 4rpx solid #efb54a;\n animation: fireParticles 0.5s linear infinite;\n}\n\n.fireplace .fire .line .particle1 {\n animation-delay: 0.1s;\n}\n\n.fireplace .fire .line .particle2 {\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line .particle3 {\n animation-delay: 0.6s;\n}\n\n.fireplace .fire .line .particle4 {\n animation-delay: 0.9s;\n}\n\n.time-wrapper {\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n}\n\n.time {\n display: block;\n width: 100%;\n height: 200%;\n position: absolute;\n transform-origin: 50% 50%;\n transform: rotate(270deg);\n animation: earthRotation 5s linear infinite;\n}\n\n.time .day {\n display: block;\n width: 40rpx;\n height: 40rpx;\n position: absolute;\n top: 20%;\n left: 40%;\n border-radius: 50%;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 0 50rpx #5ad6bd, 0 0 0 80rpx #4acead, 0 0 0 120rpx rgba(74, 206, 173, 0.6), 0 0 0 180rpx rgba(74, 206, 173, 0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n animation: sunrise 5s ease-in-out infinite;\n background-color: #ef9431;\n}\n\n.time .night {\n animation: nightTime 5s ease-in-out infinite;\n}\n\n.time .night .star {\n display: block;\n width: 8rpx;\n height: 8rpx;\n position: absolute;\n bottom: 10%;\n border-radius: 50%;\n background-color: #fff;\n}\n\n.time .night .star-big {\n width: 12rpx;\n height: 12rpx;\n}\n\n.time .night .star1 {\n right: 23%;\n bottom: 25%;\n}\n\n.time .night .star2 {\n right: 35%;\n bottom: 18%;\n}\n\n.time .night .star3 {\n right: 47%;\n bottom: 25%;\n}\n\n.time .night .star4 {\n right: 22%;\n bottom: 20%;\n}\n\n.time .night .star5 {\n right: 18%;\n bottom: 30%;\n}\n\n.time .night .star6 {\n right: 60%;\n bottom: 20%;\n}\n\n.time .night .star7 {\n right: 70%;\n bottom: 23%;\n}\n\n.time .night .moon {\n display: block;\n width: 50rpx;\n height: 50rpx;\n position: absolute;\n bottom: 22%;\n right: 33%;\n border-radius: 50%;\n transform: rotate(-60deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 18rpx 18rpx 6rpx 0 white;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n \n animation: moonOrbit 5s ease-in-out infinite;\n}\n\n.time .night .moon:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n bottom: -18rpx;\n left: 18rpx;\n border-radius: 50%;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0.05), 0 0 0 30rpx rgba(255, 255, 255, 0.05), 0 0 0 50rpx rgba(255, 255, 255, 0.05), 0 0 0 70rpx rgba(255, 255, 255, 0.05);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n background-color: rgba(255, 255, 255, 0.2);\n}\n", "component_name": "GalaxyStupidMouse29" }, "platforms": { "h5": true, "mp-weixin": true, "mp-alipay": true, "mp-baidu": true, "mp-toutiao": true, "app-plus": true }, "props": [ { "name": "disabled", "type": "Boolean", "default": false, "required": false, "description": "是否禁用" } ], "events": [], "slots": [ { "name": "", "description": "", "props": [] } ], "compatibility": { "h5": { "supported": true, "issues": [], "alternatives": [] }, "mp-weixin": { "supported": true, "issues": [ "不支持 box-shadow 属性", "不支持 filter 属性" ], "alternatives": [] }, "mp-alipay": { "supported": true, "issues": [ "不支持 box-shadow 属性", "不支持 filter 属性" ], "alternatives": [] }, "app-plus": { "supported": true, "issues": [], "alternatives": [] } }, "performance": { "complexity": "high", "bundle_size": 15715, "render_cost": "high", "memory_usage": "high" }, "dependencies": [], "examples": [ { "title": "", "description": "", "code": "" } ], "created_at": "2025-07-31T07:55:38.859Z", "updated_at": "2025-07-31T07:55:38.859Z" }