UNPKG

galaxy-uniapp-mcp-server

Version:

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

86 lines 13.7 kB
{ "id": "JkHuger_dangerous-dolphin-42", "name": "dangerous-dolphin-42", "category": "loaders", "author": "JkHuger", "description": "dangerous-dolphin-42 组件 (loader, animation, gradient)", "tags": [ "loader", "animation", "gradient" ], "original": { "html": "<div class=\"rocket\">\n <div class=\"rocket-body\">\n <div class=\"body\"></div>\n <div class=\"fin fin-left\"></div>\n <div class=\"fin fin-right\"></div>\n <div class=\"window\"></div>\n </div>\n <div class=\"exhaust-flame\"></div>\n <ul class=\"exhaust-fumes\">\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n </ul>\n <ul class=\"star\">\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n <li></li>\n </ul>\n </div>", "css": "/* From Uiverse.io by JkHuger - Tags: loader */\n.rocket {\n position: absolute;\n top: 20%;\n width: 80px;\n left: calc(50% - 40px);\n}\n\n.rocket .rocket-body {\n width: 80px;\n left: calc(50% - 50px);\n animation: bounce 0.5s infinite;\n}\n\n.rocket .rocket-body .body {\n background-color: #dadada;\n height: 180px;\n left: calc(50% - 50px);\n border-top-right-radius: 100%;\n border-top-left-radius: 100%;\n border-bottom-left-radius: 50%;\n border-bottom-right-radius: 50%;\n border-top: 5px solid #f5f5f5;\n}\n\n.rocket .rocket-body:before {\n content: '';\n position: absolute;\n left: calc(50% - 24px);\n width: 48px;\n height: 13px;\n background-color: #554842;\n bottom: -13px;\n border-bottom-right-radius: 60%;\n border-bottom-left-radius: 60%;\n}\n\n.rocket .window {\n position: absolute;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background-color: #a75248;\n left: calc(50% - 25px);\n top: 40px;\n border: 5px solid #b4b2b2;\n}\n\n.rocket .fin {\n position: absolute;\n z-index: -100;\n height: 55px;\n width: 50px;\n background-color: #a75248;\n}\n\n.rocket .fin-left {\n left: -30px;\n top: calc(100% - 55px);\n border-top-left-radius: 80%;\n border-bottom-left-radius: 20%;\n}\n\n.rocket .fin-right {\n right: -30px;\n top: calc(100% - 55px);\n border-top-right-radius: 80%;\n border-bottom-right-radius: 20%;\n}\n\n.rocket .exhaust-flame {\n position: absolute;\n top: 90%;\n width: 28px;\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n height: 150px;\n left: calc(50% - 14px);\n animation: exhaust 0.2s infinite;\n}\n\n.rocket .exhaust-fumes li {\n width: 60px;\n height: 60px;\n background-color: #f5f5f5;\n list-style: none;\n position: absolute;\n border-radius: 100%;\n}\n\n.rocket .exhaust-fumes li:first-child {\n width: 200px;\n height: 200px;\n bottom: -300px;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(2) {\n width: 150px;\n height: 150px;\n left: -120px;\n top: 260px;\n animation: fumes 3.2s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(3) {\n width: 120px;\n height: 120px;\n left: -40px;\n top: 330px;\n animation: fumes 3s 1s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(4) {\n width: 100px;\n height: 100px;\n left: -170px;\n animation: fumes 4s 2s infinite;\n top: 380px;\n}\n\n.rocket .exhaust-fumes li:nth-child(5) {\n width: 130px;\n height: 130px;\n left: -120px;\n top: 350px;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(6) {\n width: 200px;\n height: 200px;\n left: -60px;\n top: 280px;\n animation: fumes2 10s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(7) {\n width: 100px;\n height: 100px;\n left: -100px;\n top: 320px;\n}\n\n.rocket .exhaust-fumes li:nth-child(8) {\n width: 110px;\n height: 110px;\n left: 70px;\n top: 340px;\n}\n\n.rocket .exhaust-fumes li:nth-child(9) {\n width: 90px;\n height: 90px;\n left: 200px;\n top: 380px;\n animation: fumes 20s infinite;\n}\n\n.star li {\n list-style: none;\n position: absolute;\n}\n\n.star li:before, .star li:after {\n content: '';\n position: absolute;\n background-color: #f5f5f5;\n}\n\n.star li:before {\n width: 10px;\n height: 2px;\n border-radius: 50%;\n}\n\n.star li:after {\n height: 8px;\n width: 2px;\n left: 4px;\n top: -3px;\n}\n\n.star li:first-child {\n top: -30px;\n left: -210px;\n animation: twinkle 0.4s infinite;\n}\n\n.star li:nth-child(2) {\n top: 0;\n left: 60px;\n animation: twinkle 0.5s infinite;\n}\n\n.star li:nth-child(2):before {\n height: 1px;\n width: 5px;\n}\n\n.star li:nth-child(2):after {\n width: 1px;\n height: 5px;\n top: -2px;\n left: 2px;\n}\n\n.star li:nth-child(3) {\n left: 120px;\n top: 220px;\n animation: twinkle 1s infinite;\n}\n\n.star li:nth-child(4) {\n left: -100px;\n top: 200px;\n animation: twinkle 0.5s ease infinite;\n}\n\n.star li:nth-child(5) {\n left: 170px;\n top: 100px;\n animation: twinkle 0.4s ease infinite;\n}\n\n.star li:nth-child(6) {\n top: 87px;\n left: -79px;\n animation: twinkle 0.2s infinite;\n}\n\n.star li:nth-child(6):before {\n height: 1px;\n width: 5px;\n}\n\n.star li:nth-child(6):after {\n width: 1px;\n height: 5px;\n top: -2px;\n left: 2px;\n}\n\n@keyframes fumes {\n 50% {\n transform: scale(1.5);\n background-color: transparent;\n }\n\n 51% {\n transform: scale(0.8);\n }\n\n 100% {\n background-color: #f5f5f5;\n transform: scale(1);\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: translate3d(0px, 0px, 0);\n }\n\n 50% {\n transform: translate3d(0px, -4px, 0);\n }\n\n 100% {\n transform: translate3d(0px, 0px, 0);\n }\n}\n\n@keyframes exhaust {\n 0% {\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n }\n\n 50% {\n background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);\n }\n\n 75% {\n background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);\n }\n}\n\n@keyframes fumes2 {\n 50% {\n transform: scale(1.1);\n }\n}\n\n@keyframes twinkle {\n 80% {\n transform: scale(1.1);\n opacity: 0.7;\n }\n}", "file_path": "/mnt/persist/workspace/loaders/JkHuger_dangerous-dolphin-42.html" }, "uniapp": { "template": "<view class=\"rocket\"></view>\n <view class=\"rocket-body\"></view>\n <view class=\"body\"></view>\n <view class=\"fin fin-left\"></view>\n <view class=\"fin fin-right\"></view>\n <view class=\"window\"></view>\n </div>\n <view class=\"exhaust-flame\"></view>\n <view class=\"exhaust-fumes\"></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n </ul>\n <view class=\"star\"></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n <view></view>\n </ul>\n </div>", "script": "export default {\n name: 'GalaxyDangerousDolphin42',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}", "style": "\n/* From Uiverse.io by JkHuger - Tags: loader */\n.rocket {\n position: absolute;\n top: 20%;\n width: 160rpx;\n left: calc(50% - 80rpx);\n}\n\n.rocket .rocket-body {\n width: 160rpx;\n left: calc(50% - 100rpx);\n animation: bounce 0.5s infinite;\n}\n\n.rocket .rocket-body .body {\n background-color: #dadada;\n height: 360rpx;\n left: calc(50% - 100rpx);\n border-top-right-radius: 100%;\n border-top-left-radius: 100%;\n border-bottom-left-radius: 50%;\n border-bottom-right-radius: 50%;\n border-top: 10rpx solid #f5f5f5;\n}\n\n.rocket .rocket-body:before {\n content: '';\n position: absolute;\n left: calc(50% - 48rpx);\n width: 96rpx;\n height: 26rpx;\n background-color: #554842;\n bottom: -26rpx;\n border-bottom-right-radius: 60%;\n border-bottom-left-radius: 60%;\n}\n\n.rocket .window {\n position: absolute;\n width: 80rpx;\n height: 80rpx;\n border-radius: 100%;\n background-color: #a75248;\n left: calc(50% - 50rpx);\n top: 80rpx;\n border: 10rpx solid #b4b2b2;\n}\n\n.rocket .fin {\n position: absolute;\n z-index: -100;\n height: 110rpx;\n width: 100rpx;\n background-color: #a75248;\n}\n\n.rocket .fin-left {\n left: -60rpx;\n top: calc(100% - 110rpx);\n border-top-left-radius: 80%;\n border-bottom-left-radius: 20%;\n}\n\n.rocket .fin-right {\n right: -60rpx;\n top: calc(100% - 110rpx);\n border-top-right-radius: 80%;\n border-bottom-right-radius: 20%;\n}\n\n.rocket .exhaust-flame {\n position: absolute;\n top: 90%;\n width: 56rpx;\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n height: 300rpx;\n left: calc(50% - 28rpx);\n animation: exhaust 0.2s infinite;\n}\n\n.rocket .exhaust-fumes li {\n width: 120rpx;\n height: 120rpx;\n background-color: #f5f5f5;\n list-style: none;\n position: absolute;\n border-radius: 100%;\n}\n\n.rocket .exhaust-fumes li:first-child {\n width: 400rpx;\n height: 400rpx;\n bottom: -600rpx;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(2) {\n width: 300rpx;\n height: 300rpx;\n left: -240rpx;\n top: 520rpx;\n animation: fumes 3.2s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(3) {\n width: 240rpx;\n height: 240rpx;\n left: -80rpx;\n top: 660rpx;\n animation: fumes 3s 1s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(4) {\n width: 200rpx;\n height: 200rpx;\n left: -340rpx;\n animation: fumes 4s 2s infinite;\n top: 760rpx;\n}\n\n.rocket .exhaust-fumes li:nth-child(5) {\n width: 260rpx;\n height: 260rpx;\n left: -240rpx;\n top: 700rpx;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(6) {\n width: 400rpx;\n height: 400rpx;\n left: -120rpx;\n top: 560rpx;\n animation: fumes2 10s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(7) {\n width: 200rpx;\n height: 200rpx;\n left: -200rpx;\n top: 640rpx;\n}\n\n.rocket .exhaust-fumes li:nth-child(8) {\n width: 220rpx;\n height: 220rpx;\n left: 140rpx;\n top: 680rpx;\n}\n\n.rocket .exhaust-fumes li:nth-child(9) {\n width: 180rpx;\n height: 180rpx;\n left: 400rpx;\n top: 760rpx;\n animation: fumes 20s infinite;\n}\n\n.star li {\n list-style: none;\n position: absolute;\n}\n\n.star li:before, .star li:after {\n content: '';\n position: absolute;\n background-color: #f5f5f5;\n}\n\n.star li:before {\n width: 20rpx;\n height: 4rpx;\n border-radius: 50%;\n}\n\n.star li:after {\n height: 16rpx;\n width: 4rpx;\n left: 8rpx;\n top: -6rpx;\n}\n\n.star li:first-child {\n top: -60rpx;\n left: -420rpx;\n animation: twinkle 0.4s infinite;\n}\n\n.star li:nth-child(2) {\n top: 0;\n left: 120rpx;\n animation: twinkle 0.5s infinite;\n}\n\n.star li:nth-child(2):before {\n height: 2rpx;\n width: 10rpx;\n}\n\n.star li:nth-child(2):after {\n width: 2rpx;\n height: 10rpx;\n top: -4rpx;\n left: 4rpx;\n}\n\n.star li:nth-child(3) {\n left: 240rpx;\n top: 440rpx;\n animation: twinkle 1s infinite;\n}\n\n.star li:nth-child(4) {\n left: -200rpx;\n top: 400rpx;\n animation: twinkle 0.5s ease infinite;\n}\n\n.star li:nth-child(5) {\n left: 340rpx;\n top: 200rpx;\n animation: twinkle 0.4s ease infinite;\n}\n\n.star li:nth-child(6) {\n top: 174rpx;\n left: -158rpx;\n animation: twinkle 0.2s infinite;\n}\n\n.star li:nth-child(6):before {\n height: 2rpx;\n width: 10rpx;\n}\n\n.star li:nth-child(6):after {\n width: 2rpx;\n height: 10rpx;\n top: -4rpx;\n left: 4rpx;\n}\n\n@keyframes fumes {\n 50% {\n transform: scale(1.5);\n background-color: transparent;\n }\n\n 51% {\n transform: scale(0.8);\n }\n\n 100% {\n background-color: #f5f5f5;\n transform: scale(1);\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: translate3d(0rpx, 0rpx, 0);\n }\n\n 50% {\n transform: translate3d(0rpx, -8rpx, 0);\n }\n\n 100% {\n transform: translate3d(0rpx, 0rpx, 0);\n }\n}\n\n@keyframes exhaust {\n 0% {\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n }\n\n 50% {\n background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);\n }\n\n 75% {\n background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);\n }\n}\n\n@keyframes fumes2 {\n 50% {\n transform: scale(1.1);\n }\n}\n\n@keyframes twinkle {\n 80% {\n transform: scale(1.1);\n opacity: 0.7;\n }\n}\n \n", "component_name": "GalaxyDangerousDolphin42" }, "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": [], "alternatives": [] }, "mp-alipay": { "supported": true, "issues": [], "alternatives": [] }, "app-plus": { "supported": true, "issues": [], "alternatives": [] } }, "performance": { "complexity": "high", "bundle_size": 5455, "render_cost": "high", "memory_usage": "high" }, "dependencies": [], "examples": [ { "title": "", "description": "", "code": "" } ], "created_at": "2025-07-31T07:55:39.458Z", "updated_at": "2025-07-31T07:55:39.458Z" }