galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
118 lines • 20.8 kB
JSON
{
"id": "SanthoshSJ-Dev_slimy-lionfish-25",
"name": "slimy-lionfish-25",
"category": "buttons",
"author": "SanthoshSJ-Dev",
"description": "slimy-lionfish-25 组件 (glassmorphism, button, colorful, battery, animation, gradient, interactive)",
"tags": [
"glassmorphism",
"button",
"colorful",
"battery",
"animation",
"gradient",
"interactive"
],
"original": {
"html": "<div class=\"container\">\n <button class=\"button\">\n <div class=\"plate\"></div>\n <div class=\"plate\"></div>\n <div class=\"plate\"></div>\n <div class=\"plate\"></div>\n <div class=\"plate\"></div>\n <div class=\"button__wrapper\">\n <span class=\"button__text\">Battery</span>\n </div>\n <div class=\"button__box\">\n <div class=\"inner inner__top\"></div>\n <div class=\"inner inner__front\"></div>\n <div class=\"inner inner__bottom\"></div>\n <div class=\"inner inner__back\"></div>\n <div class=\"inner inner__left\"></div>\n <div class=\"inner inner__right\"></div>\n </div>\n </button>\n</div>",
"css": "/* From Uiverse.io by SanthoshSJ-Dev - Tags: glassmorphism, button, colorful, battery */\n.button {\n display: flex;\n position: relative;\n width: 200px;\n height: 60px;\n text-decoration: none;\n perspective: 600px;\n background: linear-gradient(#ffffff1a 0%, #ffffff00 30%, #ffffff00 70%, #ffffff1a);\n box-shadow: 0 0 32px #000000;\n}\n\n.button::before,\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 100%;\n height: 100%;\n}\n\n.button::before {\n top: 0;\n transform-origin: top center;\n transform: rotateX(70deg);\n background: linear-gradient(135deg, #ffffff4d 10%, #ffffff00 60%);\n}\n\n.button::after {\n bottom: 0;\n transform-origin: bottom center;\n transform: rotateX(-110deg);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n background: linear-gradient(#ffffff66 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n transform: translate3d(0, 27px, 74px);\n perspective: 600px;\n}\n\n.button__text {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n font-size: 32px;\n font-weight: 900;\n color: #ffffff33;\n transition: all ease-in-out 1s;\n}\n\n.button__text::before {\n content: '';\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 200px;\n height: 60px;\n background: linear-gradient(25deg, #ffffff1a, #ffffff00);\n clip-path: path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z');\n}\n\n.button__text::after {\n content: '';\n position: absolute;\n z-index: 2;\n top: 4px;\n left: 4px;\n width: 272px;\n height: 40px;\n background: linear-gradient(25deg, #ffffff4d, #ffffff00);\n clip-path: path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z');\n}\n\n.button__wrapper::before,\n.button__wrapper::after {\n content: '';\n position: absolute;\n top: 0;\n width: 84px;\n height: 100%;\n background: linear-gradient(90deg, #ffffff33 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper::before {\n left: 0;\n transform-origin: left center;\n transform: rotateY(90deg) skewY(-20deg);\n}\n\n.button__wrapper::after {\n right: 0;\n transform-origin: right center;\n transform: rotateY(-90deg) skewY(20deg);\n}\n\n.button__box {\n position: absolute;\n top: 0;\n left: 8px;\n bottom: 0;\n margin: auto 0;\n width: 180px;\n height: 49px;\n transform: translate3d(0, 4px, 10px);\n perspective: 600px;\n}\n\n.inner {\n transition: all ease-in-out 1s;\n}\n\n.inner__back {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: #64646433;\n perspective: 600px;\n}\n\n.inner__top {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: rotateX(70deg);\n background: #646464cc;\n}\n\n.inner__front {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: translate3d(0, 24px, 68px);\n background: #646464cc;\n}\n\n.inner__bottom {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: bottom left;\n transform: rotateX(-110deg);\n background: #64646433;\n}\n\n.inner__left {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 68px;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n transition: all linear .01s;\n}\n\n.inner__right {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 68px;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n}\n\n.button:hover .inner__top,\n.button:hover .inner__front,\n.button:hover .inner__bottom,\n.button:hover .inner__back {\n width: 100%;\n}\n\n.button:hover .inner__left {\n background: #64646480;\n}\n\n.button:hover .inner__right {\n left: 100%;\n background: #64646480;\n}\n\n.button:hover .button__text {\n color: #ffffff;\n}\n\n.plate {\n position: absolute;\n z-index: 10;\n top: 0;\n left: -20px;\n width: 320px;\n height: 120px;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n\n.plate:nth-child(1) {\n animation-name: plate_1;\n}\n\n.plate:nth-child(2) {\n animation-name: plate_2;\n}\n\n.plate:nth-child(3) {\n animation-name: plate_3;\n}\n\n.plate:nth-child(4) {\n animation-name: plate_4;\n}\n\n.plate:nth-child(5) {\n animation-name: plate_5;\n}\n\n.button:hover .plate {\n animation-play-state: paused;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__top,\n.plate:nth-child(1):hover~.button__box .inner__front {\n background: #d8003ccc;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__left,\n.plate:nth-child(1):hover~.button__box .inner__right {\n background: #d8003c80;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__back,\n.plate:nth-child(1):hover~.button__box .inner__bottom {\n background: #d8003c33;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__top,\n.plate:nth-child(2):hover~.button__box .inner__front {\n background: #0064becc;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__left,\n.plate:nth-child(2):hover~.button__box .inner__right {\n background: #0064be80;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__back,\n.plate:nth-child(2):hover~.button__box .inner__bottom {\n background: #0064be33;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__top,\n.plate:nth-child(3):hover~.button__box .inner__front {\n background: #00aa64cc;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__left,\n.plate:nth-child(3):hover~.button__box .inner__right {\n background: #00aa6480;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__back,\n.plate:nth-child(3):hover~.button__box .inner__bottom {\n background: #00aa6433;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__top,\n.plate:nth-child(4):hover~.button__box .inner__front {\n background: #ffe614cc;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__left,\n.plate:nth-child(4):hover~.button__box .inner__right {\n background: #ffe61480;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__back,\n.plate:nth-child(4):hover~.button__box .inner__bottom {\n background: #ffe61433;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__top,\n.plate:nth-child(5):hover~.button__box .inner__front {\n background: #9b32ffcc;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__left,\n.plate:nth-child(5):hover~.button__box .inner__right {\n background: #9b32ff80;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__back,\n.plate:nth-child(5):hover~.button__box .inner__bottom {\n background: #9b32ff33;\n}\n\n@keyframes plate_1 {\n 0% {\n transform: scale(1);\n }\n\n 19.9% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_2 {\n 0% {\n transform: scale(0);\n }\n\n 19.9% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1);\n }\n\n 39.9% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_3 {\n 0% {\n transform: scale(0);\n }\n\n 39.9% {\n transform: scale(0);\n }\n\n 40% {\n transform: scale(1);\n }\n\n 59.9% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_4 {\n 0% {\n transform: scale(0);\n }\n\n 59.9% {\n transform: scale(0);\n }\n\n 60% {\n transform: scale(1);\n }\n\n 79.9% {\n transform: scale(1);\n }\n\n 80% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_5 {\n 0% {\n transform: scale(0);\n }\n\n 79.9% {\n transform: scale(0);\n }\n\n 80% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #212121;\n padding: 50px 50px 80px 50px;\n border-radius: 10px;\n}",
"file_path": "/mnt/persist/workspace/Buttons/SanthoshSJ-Dev_slimy-lionfish-25.html"
},
"uniapp": {
"template": "<view class=\"container\"></view>\n <button class=\"button\"></button>\n <view class=\"plate\"></view>\n <view class=\"plate\"></view>\n <view class=\"plate\"></view>\n <view class=\"plate\"></view>\n <view class=\"plate\"></view>\n <view class=\"button__wrapper\"></view>\n <text class=\"button__text\">Battery</text>\n </div>\n <view class=\"button__box\"></view>\n <view class=\"inner inner__top\"></view>\n <view class=\"inner inner__front\"></view>\n <view class=\"inner inner__bottom\"></view>\n <view class=\"inner inner__back\"></view>\n <view class=\"inner inner__left\"></view>\n <view class=\"inner inner__right\"></view>\n </div>\n </button>\n</div>",
"script": "export default {\n name: 'GalaxySlimyLionfish25',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by SanthoshSJ-Dev - Tags: glassmorphism, button, colorful, battery */\n.button {\n display: flex;\n position: relative;\n width: 400rpx;\n height: 120rpx;\n text-decoration: none;\n perspective: 1200rpx;\n background: linear-gradient(#ffffff1a 0%, #ffffff00 30%, #ffffff00 70%, #ffffff1a);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 64rpx #000000;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n\n.button::before,\n.button::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 100%;\n height: 100%;\n}\n\n.button::before {\n top: 0;\n transform-origin: top center;\n transform: rotateX(70deg);\n background: linear-gradient(135deg, #ffffff4d 10%, #ffffff00 60%);\n}\n\n.button::after {\n bottom: 0;\n transform-origin: bottom center;\n transform: rotateX(-110deg);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper {\n position: relative;\n z-index: 2;\n width: 100%;\n height: 100%;\n background: linear-gradient(#ffffff66 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n transform: translate3d(0, 54rpx, 148rpx);\n perspective: 1200rpx;\n}\n\n.button__text {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n font-size: 64rpx;\n font-weight: 900;\n color: #ffffff33;\n transition: all ease-in-out 1s;\n}\n\n.button__text::before {\n content: '';\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 400rpx;\n height: 120rpx;\n background: linear-gradient(25deg, #ffffff1a, #ffffff00);\n \n}\n\n.button__text::after {\n content: '';\n position: absolute;\n z-index: 2;\n top: 8rpx;\n left: 8rpx;\n width: 544rpx;\n height: 80rpx;\n background: linear-gradient(25deg, #ffffff4d, #ffffff00);\n \n}\n\n.button__wrapper::before,\n.button__wrapper::after {\n content: '';\n position: absolute;\n top: 0;\n width: 168rpx;\n height: 100%;\n background: linear-gradient(90deg, #ffffff33 0%, #ffffff00 30%, #ffffff00 70%, #ffffff33);\n background: radial-gradient(#ffffff00 40%, #ffffff1a);\n}\n\n.button__wrapper::before {\n left: 0;\n transform-origin: left center;\n transform: rotateY(90deg) skewY(-20deg);\n}\n\n.button__wrapper::after {\n right: 0;\n transform-origin: right center;\n transform: rotateY(-90deg) skewY(20deg);\n}\n\n.button__box {\n position: absolute;\n top: 0;\n left: 16rpx;\n bottom: 0;\n margin: auto 0;\n width: 360rpx;\n height: 98rpx;\n transform: translate3d(0, 8rpx, 20rpx);\n perspective: 1200rpx;\n}\n\n.inner {\n transition: all ease-in-out 1s;\n}\n\n.inner__back {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: #64646433;\n perspective: 1200rpx;\n}\n\n.inner__top {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: rotateX(70deg);\n background: #646464cc;\n}\n\n.inner__front {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: top left;\n transform: translate3d(0, 48rpx, 136rpx);\n background: #646464cc;\n}\n\n.inner__bottom {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n transform-origin: bottom left;\n transform: rotateX(-110deg);\n background: #64646433;\n}\n\n.inner__left {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 136rpx;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n transition: all linear .01s;\n}\n\n.inner__right {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 136rpx;\n height: 100%;\n transform-origin: center left;\n transform: rotateY(-90deg) skewY(20deg);\n background: rgba(255, 0, 0, 0);\n}\n\n.button:hover .inner__top,\n.button:hover .inner__front,\n.button:hover .inner__bottom,\n.button:hover .inner__back {\n width: 100%;\n}\n\n.button:hover .inner__left {\n background: #64646480;\n}\n\n.button:hover .inner__right {\n left: 100%;\n background: #64646480;\n}\n\n.button:hover .button__text {\n color: #ffffff;\n}\n\n.plate {\n position: absolute;\n z-index: 10;\n top: 0;\n left: -40rpx;\n width: 640rpx;\n height: 240rpx;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n\n.plate:nth-child(1) {\n animation-name: plate_1;\n}\n\n.plate:nth-child(2) {\n animation-name: plate_2;\n}\n\n.plate:nth-child(3) {\n animation-name: plate_3;\n}\n\n.plate:nth-child(4) {\n animation-name: plate_4;\n}\n\n.plate:nth-child(5) {\n animation-name: plate_5;\n}\n\n.button:hover .plate {\n animation-play-state: paused;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__top,\n.plate:nth-child(1):hover~.button__box .inner__front {\n background: #d8003ccc;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__left,\n.plate:nth-child(1):hover~.button__box .inner__right {\n background: #d8003c80;\n}\n\n.plate:nth-child(1):hover~.button__box .inner__back,\n.plate:nth-child(1):hover~.button__box .inner__bottom {\n background: #d8003c33;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__top,\n.plate:nth-child(2):hover~.button__box .inner__front {\n background: #0064becc;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__left,\n.plate:nth-child(2):hover~.button__box .inner__right {\n background: #0064be80;\n}\n\n.plate:nth-child(2):hover~.button__box .inner__back,\n.plate:nth-child(2):hover~.button__box .inner__bottom {\n background: #0064be33;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__top,\n.plate:nth-child(3):hover~.button__box .inner__front {\n background: #00aa64cc;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__left,\n.plate:nth-child(3):hover~.button__box .inner__right {\n background: #00aa6480;\n}\n\n.plate:nth-child(3):hover~.button__box .inner__back,\n.plate:nth-child(3):hover~.button__box .inner__bottom {\n background: #00aa6433;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__top,\n.plate:nth-child(4):hover~.button__box .inner__front {\n background: #ffe614cc;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__left,\n.plate:nth-child(4):hover~.button__box .inner__right {\n background: #ffe61480;\n}\n\n.plate:nth-child(4):hover~.button__box .inner__back,\n.plate:nth-child(4):hover~.button__box .inner__bottom {\n background: #ffe61433;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__top,\n.plate:nth-child(5):hover~.button__box .inner__front {\n background: #9b32ffcc;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__left,\n.plate:nth-child(5):hover~.button__box .inner__right {\n background: #9b32ff80;\n}\n\n.plate:nth-child(5):hover~.button__box .inner__back,\n.plate:nth-child(5):hover~.button__box .inner__bottom {\n background: #9b32ff33;\n}\n\n@keyframes plate_1 {\n 0% {\n transform: scale(1);\n }\n\n 19.9% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_2 {\n 0% {\n transform: scale(0);\n }\n\n 19.9% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1);\n }\n\n 39.9% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_3 {\n 0% {\n transform: scale(0);\n }\n\n 39.9% {\n transform: scale(0);\n }\n\n 40% {\n transform: scale(1);\n }\n\n 59.9% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_4 {\n 0% {\n transform: scale(0);\n }\n\n 59.9% {\n transform: scale(0);\n }\n\n 60% {\n transform: scale(1);\n }\n\n 79.9% {\n transform: scale(1);\n }\n\n 80% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes plate_5 {\n 0% {\n transform: scale(0);\n }\n\n 79.9% {\n transform: scale(0);\n }\n\n 80% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #212121;\n padding: 100rpx 100rpx 160rpx 100rpx;\n border-radius: 20rpx;\n}\n",
"component_name": "GalaxySlimyLionfish25"
},
"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": "是否禁用"
},
{
"name": "text",
"type": "String",
"default": "按钮",
"required": false,
"description": "按钮文字"
},
{
"name": "type",
"type": "String",
"default": "primary",
"required": false,
"description": "按钮类型"
}
],
"events": [
{
"name": "click",
"description": "点击事件",
"parameters": [
"event"
]
}
],
"slots": [
{
"name": "",
"description": "",
"props": []
}
],
"compatibility": {
"h5": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-weixin": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 clip-path 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 clip-path 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 8554,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:34.539Z",
"updated_at": "2025-07-31T07:55:34.539Z"
}