galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
118 lines • 41.5 kB
JSON
{
"id": "barisdogansutcu_quiet-mayfly-12",
"name": "quiet-mayfly-12",
"category": "buttons",
"author": "barisdogansutcu",
"description": "quiet-mayfly-12 组件 (icon, button, css icon, animation, interactive)",
"tags": [
"icon",
"button",
"css icon",
"animation",
"interactive"
],
"original": {
"html": "<div class=\"icons\">\n <div class=\"title\">\n <span>O</span>\n <span>N</span>\n <span>L</span>\n <span>Y</span>\n <span>C</span>\n <span>S</span>\n <span>S</span>\n </div>\n <div class=\"icon-box\">\n <button class=\"activity\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n <span class=\"line-5\"></span>\n </button>\n <div class=\"text\">Activity</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"airplay\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">AirPlay</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"alert-circle\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">Alert</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"alert-octagon\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n <div class=\"center\">\n <span class=\"line-5\"></span>\n <span class=\"line-6\"></span>\n </div>\n </button>\n <div class=\"text\">Alert</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"center-text\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n </button>\n <div class=\"text\">Text Center</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"justify-text\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n </button>\n <div class=\"text\">Text Justify</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"left-text\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n </button>\n <div class=\"text\">Text Left</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"right-text\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n </button>\n <div class=\"text\">Text Right</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"left-arrow\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">Left Arrow</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"right-arrow\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">Right Arrow</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"bottom-arrow\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">Bottom Arrow</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"top-arrow\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">Top Arrow</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"battery-empty\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n </button>\n <div class=\"text\">Battery</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"battery-charge\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n <span class=\"line-4\"></span>\n </button>\n <div class=\"text\">Battery C.</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"battery\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n </button>\n <div class=\"text\">Battery 50%</div>\n </div>\n <div class=\"icon-box\">\n <button class=\"battery-full\">\n <span class=\"line-1\"></span>\n <span class=\"line-2\"></span>\n <span class=\"line-3\"></span>\n </button>\n <div class=\"text\">Battery Full</div>\n </div>\n</div>",
"css": "/* From Uiverse.io by barisdogansutcu - Tags: icon, button, css icon */\n.text {\n font-size: 5px;\n position: absolute;\n top: 3px;\n color: #2f363d;\n opacity: 0;\n}\n.icons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n place-content: center;\n gap: 5px;\n}\n.title {\n grid-column-start: 1;\n grid-column-end: 5;\n text-align: center;\n font-weight: 100;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.title span {\n text-shadow: 1px 1px #ffffff;\n}\n.icon-box:hover {\n transform: scale(2);\n z-index: 9;\n}\n.icon-box {\n background-color: #ffffff;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n border-radius: 5px;\n transition: all 0.2s ease;\n position: relative;\n}\n.icon-box:hover .text {\n opacity: 1;\n}\n.icon-box:hover button {\n margin-top: 5px;\n}\nbutton {\n background-color: transparent;\n z-index: 0;\n margin-top: 0px;\n}\n.activity {\n position: relative;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n}\n.activity .line-1 {\n display: inline-flex;\n width: 8px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n}\n.activity .line-2 {\n display: inline-flex;\n width: 9px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n transform: rotate(-75deg);\n margin-top: -8px;\n margin-left: -4px;\n}\n.activity .line-3 {\n display: inline-flex;\n width: 16px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n transform: rotate(70deg);\n margin-top: -3px;\n margin-left: -9px;\n}\n.activity .line-4 {\n display: inline-flex;\n width: 8px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n transform: rotate(-70deg);\n margin-top: 6px;\n margin-left: -8px;\n}\n.activity .line-5 {\n display: inline-flex;\n width: 8px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n margin-top: 0px;\n margin-left: -3px;\n}\n/* ----- */\n.airplay {\n position: relative;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n}\n.airplay .line-1 {\n width: 20px;\n height: 14px;\n background-color: white;\n border-radius: 2px;\n box-shadow: 0px 0px 0px 2px #2f363d;\n}\n.airplay .line-2 {\n width: 0;\n height: 0;\n border: 6px solid transparent;\n border-top: 0;\n border-bottom: 6px solid #2f363d;\n position: absolute;\n margin-top: 16px;\n background-color: #ffffff;\n border-radius: 100% 100% 0 0;\n}\n/* ----- */\n.alert-circle {\n width: 20px;\n height: 20px;\n background-color: #ffffff;\n border-radius: 100%;\n border: solid 2px #2f363d;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1px;\n cursor: pointer;\n}\n.alert-circle .line-1 {\n width: 2px;\n height: 6px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n.alert-circle .line-2 {\n width: 2px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n/* ----- */\n.alert-triangle {\n width: 20px;\n height: 20px;\n background-color: #ffffff;\n border-radius: 100%;\n border: solid 2px #2f363d;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1px;\n cursor: pointer;\n}\n.alert-triangle .line-1 {\n width: 2px;\n height: 6px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n.alert-triangle .line-2 {\n width: 2px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n/* ----- */\n.alert-octagon {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n position: relative;\n cursor: pointer;\n}\n.alert-octagon .line-1 {\n width: 20px;\n height: 8px;\n background-color: #fff;\n border-left: solid 2px #2f363d;\n border-right: solid 2px #2f363d;\n}\n.alert-octagon .line-2 {\n width: 8px;\n height: 20px;\n position: absolute;\n transform: rotate(0deg);\n background-color: #fff;\n border-top: solid 2px #2f363d;\n border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .line-3 {\n width: 8px;\n height: 20px;\n position: absolute;\n transform: rotate(45deg);\n background-color: #fff;\n border-top: solid 2px #2f363d;\n border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .line-4 {\n width: 8px;\n height: 20px;\n position: absolute;\n transform: rotate(-45deg);\n background-color: #fff;\n border-top: solid 2px #2f363d;\n border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .center {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1px;\n}\n.alert-octagon .center .line-5 {\n display: flex;\n width: 2px;\n height: 6px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n.alert-octagon .center .line-6 {\n display: flex;\n width: 2px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n/* ----- */\n.center-text {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.center-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.center-text .line-2 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.center-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.center-text .line-4 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ------ */\n.justify-text {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.justify-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.justify-text .line-2 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.justify-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.justify-text .line-4 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ----- */\n.left-text {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.left-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.left-text .line-2 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.left-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.left-text .line-4 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ----- */\n.right-text {\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.right-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.right-text .line-2 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.right-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.right-text .line-4 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ----- */\n.left-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(-135deg);\n cursor: pointer;\n margin-left: -2px;\n}\n.left-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.left-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.left-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.left-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.right-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(45deg);\n cursor: pointer;\n margin-left: 2px;\n}\n.right-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.right-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.right-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.right-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.bottom-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(135deg);\n cursor: pointer;\n margin-top: 2px;\n}\n.bottom-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.bottom-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.bottom-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.bottom-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.top-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(-45deg);\n cursor: pointer;\n margin-top: -2px;\n}\n.top-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.top-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.top-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.top-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.battery-empty {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery-empty .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery-empty .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n/* ----- */\n.battery-charge {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery-charge .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery-charge .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n.battery-charge .line-3 {\n position: absolute;\n display: flex;\n box-sizing: border-box;\n width: 0;\n height: 0;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n border-bottom: 4px solid #2f363d;\n left: 9px;\n top: 2px;\n transform: rotate(30deg);\n}\n.battery-charge .line-4 {\n position: absolute;\n display: flex;\n box-sizing: border-box;\n width: 0;\n height: 0;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n border-top: 5px solid #2f363d;\n right: 10px;\n bottom: 2px;\n transform: rotate(30deg);\n}\n/* ----- */\n.battery {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n.battery .line-3 {\n background-color: #2f363d;\n position: absolute;\n display: flex;\n box-sizing: border-box;\n height: 6px;\n width: 40%;\n border-radius: 1px;\n top: 3px;\n left: 3px;\n}\n/* ----- */\n.battery-full {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery-full .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery-full .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n.battery-full .line-3 {\n background-color: #2f363d;\n position: absolute;\n display: flex;\n box-sizing: border-box;\n height: 6px;\n width: calc(100% - 6px);\n border-radius: 1px;\n top: 3px;\n left: 3px;\n}",
"file_path": "/mnt/persist/workspace/Buttons/barisdogansutcu_quiet-mayfly-12.html"
},
"uniapp": {
"template": "<view class=\"icons\"></view>\n <view class=\"title\"></view>\n <text>O</text>\n <text>N</text>\n <text>L</text>\n <text>Y</text>\n <text>C</text>\n <text>S</text>\n <text>S</text>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"activity\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n <text class=\"line-5\"></text>\n </button>\n <view class=\"text\">Activity</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"airplay\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">AirPlay</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"alert-circle\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">Alert</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"alert-octagon\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n <view class=\"center\"></view>\n <text class=\"line-5\"></text>\n <text class=\"line-6\"></text>\n </div>\n </button>\n <view class=\"text\">Alert</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"center-text\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n </button>\n <view class=\"text\">Text Center</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"justify-text\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n </button>\n <view class=\"text\">Text Justify</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"left-text\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n </button>\n <view class=\"text\">Text Left</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"right-text\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n </button>\n <view class=\"text\">Text Right</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"left-arrow\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">Left Arrow</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"right-arrow\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">Right Arrow</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"bottom-arrow\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">Bottom Arrow</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"top-arrow\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">Top Arrow</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"battery-empty\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n </button>\n <view class=\"text\">Battery</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"battery-charge\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n <text class=\"line-4\"></text>\n </button>\n <view class=\"text\">Battery C.</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"battery\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n </button>\n <view class=\"text\">Battery 50%</view>\n </div>\n <view class=\"icon-box\"></view>\n <button class=\"battery-full\"></button>\n <text class=\"line-1\"></text>\n <text class=\"line-2\"></text>\n <text class=\"line-3\"></text>\n </button>\n <view class=\"text\">Battery Full</view>\n </div>\n</div>",
"script": "export default {\n name: 'GalaxyQuietMayfly12',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by barisdogansutcu - Tags: icon, button, css icon */\n.text {\n font-size: 10rpx;\n position: absolute;\n top: 6rpx;\n color: #2f363d;\n opacity: 0;\n}\n.icons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n place-content: center;\n gap: 10rpx;\n}\n.title {\n grid-column-start: 1;\n grid-column-end: 5;\n text-align: center;\n font-weight: 100;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.title span {\n /* #ifdef H5 */\n text-shadow: 2rpx 2rpx #ffffff;\n /* #endif */\n}\n.icon-box:hover {\n transform: scale(2);\n z-index: 9;\n}\n.icon-box {\n background-color: #ffffff;\n width: 80rpx;\n height: 80rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: rgba(99, 99, 99, 0.2) 0rpx 4rpx 16rpx 0rpx;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n border-radius: 10rpx;\n transition: all 0.2s ease;\n position: relative;\n}\n.icon-box:hover .text {\n opacity: 1;\n}\n.icon-box:hover button {\n margin-top: 10rpx;\n}\nbutton {\n background-color: transparent;\n z-index: 0;\n margin-top: 0rpx;\n}\n.activity {\n position: relative;\n width: 60rpx;\n height: 60rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.activity .line-1 {\n display: inline-flex;\n width: 16rpx;\n height: 4rpx;\n border-radius: 100rpx;\n background-color: #2f363d;\n}\n.activity .line-2 {\n display: inline-flex;\n width: 18rpx;\n height: 4rpx;\n border-radius: 100rpx;\n background-color: #2f363d;\n transform: rotate(-75deg);\n margin-top: -16rpx;\n margin-left: -8rpx;\n}\n.activity .line-3 {\n display: inline-flex;\n width: 32rpx;\n height: 4rpx;\n border-radius: 100rpx;\n background-color: #2f363d;\n transform: rotate(70deg);\n margin-top: -6rpx;\n margin-left: -18rpx;\n}\n.activity .line-4 {\n display: inline-flex;\n width: 16rpx;\n height: 4rpx;\n border-radius: 100rpx;\n background-color: #2f363d;\n transform: rotate(-70deg);\n margin-top: 12rpx;\n margin-left: -16rpx;\n}\n.activity .line-5 {\n display: inline-flex;\n width: 16rpx;\n height: 4rpx;\n border-radius: 100rpx;\n background-color: #2f363d;\n margin-top: 0rpx;\n margin-left: -6rpx;\n}\n/* ----- */\n.airplay {\n position: relative;\n width: 60rpx;\n height: 60rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.airplay .line-1 {\n width: 40rpx;\n height: 28rpx;\n background-color: white;\n border-radius: 4rpx;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0rpx 0rpx 0rpx 4rpx #2f363d;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n.airplay .line-2 {\n width: 0;\n height: 0;\n border: 12rpx solid transparent;\n border-top: 0;\n border-bottom: 12rpx solid #2f363d;\n position: absolute;\n margin-top: 32rpx;\n background-color: #ffffff;\n border-radius: 100% 100% 0 0;\n}\n/* ----- */\n.alert-circle {\n width: 40rpx;\n height: 40rpx;\n background-color: #ffffff;\n border-radius: 100%;\n border: solid 4rpx #2f363d;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2rpx;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.alert-circle .line-1 {\n width: 4rpx;\n height: 12rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n}\n.alert-circle .line-2 {\n width: 4rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n}\n/* ----- */\n.alert-triangle {\n width: 40rpx;\n height: 40rpx;\n background-color: #ffffff;\n border-radius: 100%;\n border: solid 4rpx #2f363d;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2rpx;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.alert-triangle .line-1 {\n width: 4rpx;\n height: 12rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n}\n.alert-triangle .line-2 {\n width: 4rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n}\n/* ----- */\n.alert-octagon {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n position: relative;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.alert-octagon .line-1 {\n width: 40rpx;\n height: 16rpx;\n background-color: #fff;\n border-left: solid 4rpx #2f363d;\n border-right: solid 4rpx #2f363d;\n}\n.alert-octagon .line-2 {\n width: 16rpx;\n height: 40rpx;\n position: absolute;\n transform: rotate(0deg);\n background-color: #fff;\n border-top: solid 4rpx #2f363d;\n border-bottom: solid 4rpx #2f363d;\n}\n.alert-octagon .line-3 {\n width: 16rpx;\n height: 40rpx;\n position: absolute;\n transform: rotate(45deg);\n background-color: #fff;\n border-top: solid 4rpx #2f363d;\n border-bottom: solid 4rpx #2f363d;\n}\n.alert-octagon .line-4 {\n width: 16rpx;\n height: 40rpx;\n position: absolute;\n transform: rotate(-45deg);\n background-color: #fff;\n border-top: solid 4rpx #2f363d;\n border-bottom: solid 4rpx #2f363d;\n}\n.alert-octagon .center {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2rpx;\n}\n.alert-octagon .center .line-5 {\n display: flex;\n width: 4rpx;\n height: 12rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n}\n.alert-octagon .center .line-6 {\n display: flex;\n width: 4rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n}\n/* ----- */\n.center-text {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 4rpx;\n width: 36rpx;\n height: 48rpx;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.center-text .line-1 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.center-text .line-2 {\n width: 24rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.center-text .line-3 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.center-text .line-4 {\n width: 24rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n/* ------ */\n.justify-text {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 4rpx;\n width: 36rpx;\n height: 48rpx;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.justify-text .line-1 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.justify-text .line-2 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.justify-text .line-3 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.justify-text .line-4 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n/* ----- */\n.left-text {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 4rpx;\n width: 36rpx;\n height: 48rpx;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.left-text .line-1 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.left-text .line-2 {\n width: 24rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.left-text .line-3 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.left-text .line-4 {\n width: 24rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n/* ----- */\n.right-text {\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: column;\n gap: 4rpx;\n width: 36rpx;\n height: 48rpx;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.right-text .line-1 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.right-text .line-2 {\n width: 24rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.right-text .line-3 {\n width: 36rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n.right-text .line-4 {\n width: 24rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n}\n/* ----- */\n.left-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 20rpx;\n height: 20rpx;\n border: none;\n position: relative;\n transform: rotate(-135deg);\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n margin-left: -4rpx;\n}\n.left-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.left-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n left: 0;\n top: 0;\n}\n.left-arrow .line-1:after {\n content: \"\";\n width: 4rpx;\n height: 100%;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n right: 0;\n top: 0;\n}\n.left-arrow .line-2 {\n width: 28rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.right-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 20rpx;\n height: 20rpx;\n border: none;\n position: relative;\n transform: rotate(45deg);\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n margin-left: 4rpx;\n}\n.right-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.right-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n left: 0;\n top: 0;\n}\n.right-arrow .line-1:after {\n content: \"\";\n width: 4rpx;\n height: 100%;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n right: 0;\n top: 0;\n}\n.right-arrow .line-2 {\n width: 28rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.bottom-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 20rpx;\n height: 20rpx;\n border: none;\n position: relative;\n transform: rotate(135deg);\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n margin-top: 4rpx;\n}\n.bottom-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.bottom-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n left: 0;\n top: 0;\n}\n.bottom-arrow .line-1:after {\n content: \"\";\n width: 4rpx;\n height: 100%;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n right: 0;\n top: 0;\n}\n.bottom-arrow .line-2 {\n width: 28rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.top-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 20rpx;\n height: 20rpx;\n border: none;\n position: relative;\n transform: rotate(-45deg);\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n margin-top: -4rpx;\n}\n.top-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.top-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n left: 0;\n top: 0;\n}\n.top-arrow .line-1:after {\n content: \"\";\n width: 4rpx;\n height: 100%;\n background-color: #2f363d;\n border-radius: 100rpx;\n position: absolute;\n right: 0;\n top: 0;\n}\n.top-arrow .line-2 {\n width: 28rpx;\n height: 4rpx;\n background-color: #2f363d;\n border-radius: 10rpx;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.battery-empty {\n position: relative;\n display: flex;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.battery-empty .line-1 {\n box-sizing: border-box;\n width: 40rpx;\n height: 24rpx;\n border: 4rpx solid #2f363d;\n border-radius: 6rpx;\n}\n.battery-empty .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 6rpx;\n width: 8rpx;\n height: 12rpx;\n right: -4rpx;\n top: 6rpx;\n background-color: #2f363d;\n}\n/* ----- */\n.battery-charge {\n position: relative;\n display: flex;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.battery-charge .line-1 {\n box-sizing: border-box;\n width: 40rpx;\n height: 24rpx;\n border: 4rpx solid #2f363d;\n border-radius: 6rpx;\n}\n.battery-charge .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 6rpx;\n width: 8rpx;\n height: 12rpx;\n right: -4rpx;\n top: 6rpx;\n background-color: #2f363d;\n}\n.battery-charge .line-3 {\n position: absolute;\n display: flex;\n box-sizing: border-box;\n width: 0;\n height: 0;\n border-left: 2rpx solid transparent;\n border-right: 2rpx solid transparent;\n border-bottom: 8rpx solid #2f363d;\n left: 18rpx;\n top: 4rpx;\n transform: rotate(30deg);\n}\n.battery-charge .line-4 {\n position: absolute;\n display: flex;\n box-sizing: border-box;\n width: 0;\n height: 0;\n border-left: 2rpx solid transparent;\n border-right: 2rpx solid transparent;\n border-top: 10rpx solid #2f363d;\n right: 20rpx;\n bottom: 4rpx;\n transform: rotate(30deg);\n}\n/* ----- */\n.battery {\n position: relative;\n display: flex;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.battery .line-1 {\n box-sizing: border-box;\n width: 40rpx;\n height: 24rpx;\n border: 4rpx solid #2f363d;\n border-radius: 6rpx;\n}\n.battery .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 6rpx;\n width: 8rpx;\n height: 12rpx;\n right: -4rpx;\n top: 6rpx;\n background-color: #2f363d;\n}\n.battery .line-3 {\n background-color: #2f363d;\n position: absolute;\n display: flex;\n box-sizing: border-box;\n height: 12rpx;\n width: 40%;\n border-radius: 2rpx;\n top: 6rpx;\n left: 6rpx;\n}\n/* ----- */\n.battery-full {\n position: relative;\n display: flex;\n border: none;\n /* #ifdef H5 */\n cursor: pointer;\n /* #endif */\n}\n.battery-full .line-1 {\n box-sizing: border-box;\n width: 40rpx;\n height: 24rpx;\n border: 4rpx solid #2f363d;\n border-radius: 6rpx;\n}\n.battery-full .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 6rpx;\n width: 8rpx;\n height: 12rpx;\n right: -4rpx;\n top: 6rpx;\n background-color: #2f363d;\n}\n.battery-full .line-3 {\n background-color: #2f363d;\n position: absolute;\n display: flex;\n box-sizing: border-box;\n height: 12rpx;\n width: calc(100% - 12rpx);\n border-radius: 2rpx;\n top: 6rpx;\n left: 6rpx;\n}\n\n",
"component_name": "GalaxyQuietMayfly12"
},
"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 属性",
"不支持 text-shadow 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性",
"不支持 text-shadow 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 17590,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:35.912Z",
"updated_at": "2025-07-31T07:55:35.912Z"
}