galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
98 lines • 12.1 kB
JSON
{
"id": "Praashoo7_lucky-hound-44",
"name": "lucky-hound-44",
"category": "loaders",
"author": "Praashoo7",
"description": "lucky-hound-44 组件 (neumorphism, animation, loader, smooth, shadow, realistic, circle loader, spin, gradient)",
"tags": [
"neumorphism",
"animation",
"loader",
"smooth",
"shadow",
"realistic",
"circle loader",
"spin",
"gradient"
],
"original": {
"html": "<div class=\"main\">\n <div class=\"up\">\n <div class=\"loaders\">\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n <div class=\"loader\"></div>\n </div>\n <div class=\"loadersB\">\n <div class=\"loaderA\">\n <div class=\"ball0\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball1\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball2\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball3\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball4\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball5\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball6\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball7\"></div>\n </div>\n <div class=\"loaderA\">\n <div class=\"ball8\"></div>\n </div>\n </div>\n </div>\n</div>",
"css": "/* From Uiverse.io by Praashoo7 - Tags: neumorphism, animation, loader, smooth, shadow, realistic, circle loader, spin */\n.main {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loaders,\n.loadersB {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader {\n position: absolute;\n width: 1.15em;\n height: 13em;\n border-radius: 50px;\n background: #e0e0e0;\n}\n.loader:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 1.15em;\n height: 5em;\n background: #e0e0e0;\n border-radius: 50px;\n border: 1px solid #e2e2e2;\n box-shadow: inset 5px 5px 15px #d3d2d2ab, inset -5px -5px 15px #e9e9e9ab;\n mask-image: linear-gradient(\n to bottom,\n black calc(100% - 48px),\n transparent 100%\n );\n}\n.loader::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n width: 1.15em;\n height: 4.5em;\n background: #e0e0e0;\n border-radius: 50px;\n border: 1px solid #e2e2e2;\n box-shadow: inset 5px 5px 15px #d3d2d2ab, inset -5px -5px 15px #e9e9e9ab;\n mask-image: linear-gradient(\n to top,\n black calc(100% - 48px),\n transparent 100%\n );\n}\n.loaderA {\n position: absolute;\n width: 1.15em;\n height: 13em;\n border-radius: 50px;\n background: transparent;\n}\n.ball0,\n.ball1,\n.ball2,\n.ball3,\n.ball4,\n.ball5,\n.ball6,\n.ball7,\n.ball8,\n.ball9 {\n width: 1.15em;\n height: 1.15em;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,\n rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,\n rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,\n rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,\n rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px,\n 0px -1px 15px -8px rgba(0, 0, 0, 0.09);\n border-radius: 50%;\n transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);\n background-color: rgb(232, 232, 232, 1);\n animation: 3.63s move ease-in-out infinite;\n}\n.loader:nth-child(2) {\n transform: rotate(20deg);\n}\n.loader:nth-child(3) {\n transform: rotate(40deg);\n}\n.loader:nth-child(4) {\n transform: rotate(60deg);\n}\n.loader:nth-child(5) {\n transform: rotate(80deg);\n}\n.loader:nth-child(6) {\n transform: rotate(100deg);\n}\n.loader:nth-child(7) {\n transform: rotate(120deg);\n}\n.loader:nth-child(8) {\n transform: rotate(140deg);\n}\n.loader:nth-child(9) {\n transform: rotate(160deg);\n}\n\n.loaderA:nth-child(2) {\n transform: rotate(20deg);\n}\n.loaderA:nth-child(3) {\n transform: rotate(40deg);\n}\n.loaderA:nth-child(4) {\n transform: rotate(60deg);\n}\n.loaderA:nth-child(5) {\n transform: rotate(80deg);\n}\n.loaderA:nth-child(6) {\n transform: rotate(100deg);\n}\n.loaderA:nth-child(7) {\n transform: rotate(120deg);\n}\n.loaderA:nth-child(8) {\n transform: rotate(140deg);\n}\n.loaderA:nth-child(9) {\n transform: rotate(160deg);\n}\n\n.ball1 {\n animation-delay: 0.2s;\n}\n.ball2 {\n animation-delay: 0.4s;\n}\n.ball3 {\n animation-delay: 0.6s;\n}\n.ball4 {\n animation-delay: 0.8s;\n}\n.ball5 {\n animation-delay: 1s;\n}\n.ball6 {\n animation-delay: 1.2s;\n}\n.ball7 {\n animation-delay: 1.4s;\n}\n.ball8 {\n animation-delay: 1.6s;\n}\n.ball9 {\n animation-delay: 1.8s;\n}\n\n@keyframes move {\n 0% {\n transform: translateY(0em);\n }\n 50% {\n transform: translateY(12em);\n }\n 100% {\n transform: translateY(0em);\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/Praashoo7_lucky-hound-44.html"
},
"uniapp": {
"template": "<view class=\"main\"></view>\n <view class=\"up\"></view>\n <view class=\"loaders\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n <view class=\"loader\"></view>\n </div>\n <view class=\"loadersB\"></view>\n <view class=\"loaderA\"></view>\n <view class=\"ball0\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball1\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball2\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball3\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball4\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball5\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball6\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball7\"></view>\n </div>\n <view class=\"loaderA\"></view>\n <view class=\"ball8\"></view>\n </div>\n </div>\n </div>\n</div>",
"script": "export default {\n name: 'GalaxyLuckyHound44',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by Praashoo7 - Tags: neumorphism, animation, loader, smooth, shadow, realistic, circle loader, spin */\n.main {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loaders,\n.loadersB {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader {\n position: absolute;\n width: 1.15em;\n height: 13em;\n border-radius: 100rpx;\n background: #e0e0e0;\n}\n.loader:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 1.15em;\n height: 5em;\n background: #e0e0e0;\n border-radius: 100rpx;\n border: 2rpx solid #e2e2e2;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 10rpx 10rpx 30rpx #d3d2d2ab, inset -10rpx -10rpx 30rpx #e9e9e9ab;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n mask-image: linear-gradient(\n to bottom,\n black calc(100% - 96rpx),\n transparent 100%\n );\n}\n.loader::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n width: 1.15em;\n height: 4.5em;\n background: #e0e0e0;\n border-radius: 100rpx;\n border: 2rpx solid #e2e2e2;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 10rpx 10rpx 30rpx #d3d2d2ab, inset -10rpx -10rpx 30rpx #e9e9e9ab;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n mask-image: linear-gradient(\n to top,\n black calc(100% - 96rpx),\n transparent 100%\n );\n}\n.loaderA {\n position: absolute;\n width: 1.15em;\n height: 13em;\n border-radius: 100rpx;\n background: transparent;\n}\n.ball0,\n.ball1,\n.ball2,\n.ball3,\n.ball4,\n.ball5,\n.ball6,\n.ball7,\n.ball8,\n.ball9 {\n width: 1.15em;\n height: 1.15em;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: rgba(0, 0, 0, 0.17) 0rpx -20rpx 20rpx 0rpx inset,\n rgba(0, 0, 0, 0.15) 0rpx -30rpx 30rpx 0rpx inset,\n rgba(0, 0, 0, 0.1) 0rpx -80rpx 40rpx 0rpx inset, rgba(0, 0, 0, 0.06) 0rpx 4rpx 2rpx,\n rgba(0, 0, 0, 0.09) 0rpx 8rpx 4rpx, rgba(0, 0, 0, 0.09) 0rpx 16rpx 8rpx,\n rgba(0, 0, 0, 0.09) 0rpx 32rpx 16rpx, rgba(0, 0, 0, 0.09) 0rpx 64rpx 32rpx,\n 0rpx -2rpx 30rpx -16rpx rgba(0, 0, 0, 0.09);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n border-radius: 50%;\n transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);\n background-color: rgb(232, 232, 232, 1);\n animation: 3.63s move ease-in-out infinite;\n}\n.loader:nth-child(2) {\n transform: rotate(20deg);\n}\n.loader:nth-child(3) {\n transform: rotate(40deg);\n}\n.loader:nth-child(4) {\n transform: rotate(60deg);\n}\n.loader:nth-child(5) {\n transform: rotate(80deg);\n}\n.loader:nth-child(6) {\n transform: rotate(100deg);\n}\n.loader:nth-child(7) {\n transform: rotate(120deg);\n}\n.loader:nth-child(8) {\n transform: rotate(140deg);\n}\n.loader:nth-child(9) {\n transform: rotate(160deg);\n}\n\n.loaderA:nth-child(2) {\n transform: rotate(20deg);\n}\n.loaderA:nth-child(3) {\n transform: rotate(40deg);\n}\n.loaderA:nth-child(4) {\n transform: rotate(60deg);\n}\n.loaderA:nth-child(5) {\n transform: rotate(80deg);\n}\n.loaderA:nth-child(6) {\n transform: rotate(100deg);\n}\n.loaderA:nth-child(7) {\n transform: rotate(120deg);\n}\n.loaderA:nth-child(8) {\n transform: rotate(140deg);\n}\n.loaderA:nth-child(9) {\n transform: rotate(160deg);\n}\n\n.ball1 {\n animation-delay: 0.2s;\n}\n.ball2 {\n animation-delay: 0.4s;\n}\n.ball3 {\n animation-delay: 0.6s;\n}\n.ball4 {\n animation-delay: 0.8s;\n}\n.ball5 {\n animation-delay: 1s;\n}\n.ball6 {\n animation-delay: 1.2s;\n}\n.ball7 {\n animation-delay: 1.4s;\n}\n.ball8 {\n animation-delay: 1.6s;\n}\n.ball9 {\n animation-delay: 1.8s;\n}\n\n@keyframes move {\n 0% {\n transform: translateY(0em);\n }\n 50% {\n transform: translateY(12em);\n }\n 100% {\n transform: translateY(0em);\n }\n}\n\n",
"component_name": "GalaxyLuckyHound44"
},
"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 属性",
"不支持 mask 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 mask 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 4379,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:39.994Z",
"updated_at": "2025-07-31T07:55:39.994Z"
}