galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
95 lines • 32.7 kB
JSON
{
"id": "csemszepp_happy-dog-58",
"name": "happy-dog-58",
"category": "loaders",
"author": "csemszepp",
"description": "happy-dog-58 组件 (loader, animated, #darthvader, animation, gradient, interactive)",
"tags": [
"loader",
"animated",
"#darthvader",
"animation",
"gradient",
"interactive"
],
"original": {
"html": "<div class=\"vader\">\n<div class=\"shadow\"></div>\n<div class=\"head\"><div class=\"helmet\"><span class=\"left\"></span><span class=\"right\"></span></div><div class=\"eyes\"><span class=\"left\"></span><span class=\"right\"></span></div><span class=\"grill\"><span class=\"left\"></span><span class=\"center\"></span><span class=\"right\"></span></span><span class=\"mask\"><span class=\"top\"></span><span class=\"left\"></span><span class=\"center\"></span><span class=\"right\"></span></span><span class=\"line\"></span></div>\n<div class=\"torso\"><span class=\"neck\"><span class=\"left\"></span><span class=\"center\"></span><span class=\"right\"></span><span class=\"bottom\"></span></span><span class=\"belt\"><span class=\"center\"></span></span><div class=\"plate\"><span class=\"red_top\"></span><span class=\"red_center\"></span><span class=\"red_bottom\"></span><span class=\"blue\"></span><span class=\"gray\"></span></div></div>\n<div class=\"hand left\"><span class=\"hand\"></span></div>\n<div class=\"hand right animation-right\"><span class=\"hand\"></span></div>\n<div class=\"legs\"><span class=\"left\"></span><span class=\"right\"></span></div>\n<div class=\"boots\"><span class=\"left\"></span><span class=\"right\"></span></div>\n<div class=\"sword animation-left\"><span class=\"handle\"></span><span class=\"light\"></span></div>\n</div>\n<p class=\"text\">Darth Vader By <a href=\"https://codepen.io/poziomq\">qpoziomek</a></p>",
"css": "/* From Uiverse.io by csemszepp - Source: https://codepen.io/poziomq/details/Lbyomj - Tags: loader, animated, #darthvader */\n::-moz-selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n::selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n.text {\n position: absolute;\n bottom: 20px;\n left: 25px;\n color: black;\n font-family: Arial,sans-serif;\n text-transform: uppercase;\n font-size: 14px;\n line-height: 28px;\n font-weight: bold;\n letter-spacing: 2px;\n z-index: 99\n}\n\na {\n color: #6172BA;\n text-decoration: none;\n cursor: pointer\n}\n\na:hover {\n text-decoration: underline\n}\n\n.vader {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n -webkit-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%)\n}\n\n.vader .head {\n position: relative;\n width: 100px;\n height: 100px;\n margin-bottom: -10px;\n z-index: 1\n}\n\n.vader .helmet {\n position: absolute;\n top: 0;\n left: 5px;\n width: 90px;\n height: 80px;\n background: #222222;\n border-radius: 80px 80px 0 0\n}\n\n.vader .helmet::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: 50%;\n width: 50px;\n height: 8px;\n margin-left: -25px;\n background: #040507;\n border-radius: 25px 25px 0 0 / 8px 8px 0 0\n}\n\n.vader .helmet::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 8px;\n left: 50%;\n margin-left: -25px;\n height: 0;\n width: 0;\n border-left: 25px solid transparent;\n border-right: 25px solid transparent;\n border-top: 24px solid #040507\n}\n\n.vader .helmet span {\n position: absolute;\n top: 50%;\n width: 35px;\n height: 55px;\n background: #040507\n}\n\n.vader .helmet .left {\n left: -6px;\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg)\n}\n\n.vader .helmet .right {\n right: -6px;\n -webkit-transform: rotate(-25deg);\n transform: rotate(-25deg)\n}\n\n.vader .helmet span::before {\n content: '';\n position: absolute;\n top: -5px;\n width: 8px;\n height: 55px;\n background: #222222\n}\n\n.vader .helmet .left::before {\n left: 0\n}\n\n.vader .helmet .right::before {\n right: 0\n}\n\n.vader .line {\n position: absolute;\n top: -3px;\n left: 50%;\n width: 6px;\n height: 38px;\n margin-left: -3px;\n background: #343434\n}\n\n.vader .line::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -4px;\n bottom: 0;\n width: 4px;\n height: 12px;\n background: #040507\n}\n\n.vader .line::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -4px;\n bottom: 0;\n width: 4px;\n height: 12px;\n background: #040507\n}\n\n.vader .mask {\n position: absolute;\n bottom: 19px;\n left: 50%\n}\n\n.vader .mask span {\n position: absolute;\n top: 0;\n width: 4px;\n height: 4px;\n border-radius: 1px;\n background: #C6C6C6\n}\n\n.vader .mask .top {\n left: 50%;\n margin-top: -16px;\n margin-left: -2px\n}\n\n.vader .mask .top::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -7px;\n top: -2px;\n width: 4px;\n height: 24px;\n background: #040507;\n border-radius: 4px;\n -webkit-transform: rotate(40deg);\n transform: rotate(40deg)\n}\n\n.vader .mask .top::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -7px;\n top: -2px;\n width: 4px;\n height: 24px;\n background: #040507;\n border-radius: 4px;\n -webkit-transform: rotate(-40deg);\n transform: rotate(-40deg)\n}\n\n.vader .mask .left {\n left: 12px\n}\n\n.vader .mask .center {\n left: 50%;\n margin-top: -16px;\n margin-left: -2px\n}\n\n.vader .mask .right {\n right: 12px\n}\n\n.vader .grill {\n position: absolute;\n bottom: 20px;\n left: 50%;\n width: 20px;\n margin-left: -10px\n}\n\n.vader .grill span {\n position: absolute;\n bottom: -5px;\n width: 2px;\n margin-left: -1px;\n background: #C6C6C6\n}\n\n.vader .grill .left {\n left: 4px;\n height: 10px\n}\n\n.vader .grill .center {\n left: 50%;\n height: 17px\n}\n\n.vader .grill .right {\n right: 2px;\n height: 10px\n}\n\n.vader .eyes {\n position: absolute;\n top: 35px;\n left: 10px;\n width: 80px;\n height: 40px;\n border-radius: 40px;\n background: #343434\n}\n\n.vader .eyes::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 33px;\n left: 5px;\n height: 0;\n width: 0;\n border-left: 35px solid transparent;\n border-right: 35px solid transparent;\n border-top: 30px solid #343434\n}\n\n.vader .eyes span {\n position: absolute;\n top: 5px;\n width: 30px;\n height: 30px;\n border-radius: 30px;\n background: #010000;\n -webkit-transition: background .3s ease-in-out;\n transition: background .3s ease-in-out\n}\n\n.vader .eyes .left {\n left: 7px\n}\n\n.vader .eyes .right {\n right: 7px\n}\n\n.vader .torso {\n position: relative;\n width: 60px;\n height: 80px;\n border-radius: 50px 50px 0 0;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .torso::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -20px;\n top: -15px;\n width: 100px;\n height: 115px;\n border-radius: 50px 50px 0 0;\n margin: 0 auto;\n background: #040507;\n z-index: -1\n}\n\n.vader .belt {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 10px;\n background: #040507\n}\n\n.vader .belt span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n width: 20px;\n height: 10px;\n border-radius: 10px;\n margin-left: -10px;\n background: #C6C6C6\n}\n\n.vader .neck {\n position: absolute;\n left: 6px;\n top: 3px;\n width: 48px;\n height: 8px;\n background: #010000;\n z-index: 5\n}\n\n.vader .neck::before {\n content: '';\n position: absolute;\n top: -8px;\n left: 8px;\n width: 32px;\n height: 10px;\n background: #222222;\n border-radius: 0 0 4px 4px\n}\n\n.vader .neck::after {\n content: '';\n position: absolute;\n top: -8px;\n left: 8px;\n width: 32px;\n height: 1px;\n background: #666666\n}\n\n.vader .neck span {\n position: absolute;\n top: 0;\n width: 6px;\n height: 125%;\n margin-left: -3px;\n background: #434343\n}\n\n.vader .neck .left {\n left: 6px;\n -webkit-transform: rotate(30deg);\n transform: rotate(30deg);\n border-radius: 5px 0 0 0\n}\n\n.vader .neck .center {\n left: 50%;\n top: 2px\n}\n\n.vader .neck .right {\n right: 3px;\n -webkit-transform: rotate(-30deg);\n transform: rotate(-30deg);\n border-radius: 0 5px 0 0\n}\n\n.vader .neck .bottom {\n position: absolute;\n top: 8px;\n left: 4px;\n width: 46px;\n height: 5px;\n background: #222222\n}\n\n.vader .plate {\n position: absolute;\n left: 15px;\n top: 25px;\n width: 30px;\n height: 32px;\n background: #343434\n}\n\n.vader .plate .red_top {\n position: absolute;\n left: 2px;\n top: 2px;\n width: 12px;\n height: 18px;\n background: #d81f27\n}\n\n.vader .plate .red_top::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_top::after {\n content: '';\n position: absolute;\n bottom: 5px;\n left: 0;\n width: 100%;\n height: 2px;\n background: #343434\n}\n\n.vader .plate .red_center {\n position: absolute;\n right: 2px;\n top: 12px;\n width: 12px;\n height: 8px;\n background: #d81f27\n}\n\n.vader .plate .red_center::before {\n content: '';\n position: absolute;\n left: 0;\n top: 4px;\n width: 100%;\n height: 4px;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_center::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 0;\n width: 2px;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .red_bottom {\n position: absolute;\n right: 2px;\n bottom: 2px;\n width: 4px;\n height: 8px;\n background: #d81f27\n}\n\n.vader .plate .blue {\n position: absolute;\n right: 2px;\n top: 2px;\n width: 12px;\n height: 8px;\n background: #455caa\n}\n\n.vader .plate .blue::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 0;\n width: 100%;\n height: 2px;\n background: #343434\n}\n\n.vader .plate .gray {\n position: absolute;\n left: 2px;\n bottom: 2px;\n width: 20px;\n height: 8px;\n background: #9f9fa1\n}\n\n.vader .plate .gray::before {\n content: '';\n position: absolute;\n left: 5px;\n top: 0;\n width: 2px;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .gray::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n width: 8px;\n height: 100%;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .legs {\n position: relative;\n width: 50px;\n height: 20px;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .legs::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 20px;\n height: 100%;\n margin-left: -10px;\n background: #040507\n}\n\n.vader .boots {\n position: absolute;\n bottom: 0;\n left: 50%\n}\n\n.vader .boots span {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 30px;\n height: 10px;\n background: #040507\n}\n\n.vader .boots .left {\n left: 10px;\n border-radius: 0 15px 0 0\n}\n\n.vader .boots .right {\n right: 10px;\n border-radius: 15px 0 0 0\n}\n\n.vader .hand {\n position: absolute;\n top: 60%;\n z-index: 2\n}\n\n.vader .hand.left {\n left: -2px;\n top: 82%\n}\n\n.vader .hand.right {\n right: -20px\n}\n\n.vader .hand .hand {\n position: absolute;\n top: 0;\n width: 11px;\n height: 22px;\n margin-top: -12px;\n margin-left: -12px;\n background: #040507\n}\n\n.vader .hand.left .hand {\n left: 0;\n border-radius: 22px 0 0 22px\n}\n\n.vader .hand.right .hand {\n right: 0;\n width: 22px;\n border-radius: 22px\n}\n\n.vader .sword {\n position: absolute;\n top: 50%;\n left: -20px;\n z-index: 10\n}\n\n.vader .sword .handle {\n position: absolute;\n top: 0;\n left: 0;\n width: 6px;\n height: 30px;\n margin-left: -3px;\n background: #343434\n}\n\n.vader .sword .handle::before {\n content: '';\n position: absolute;\n left: 0;\n top: 5px;\n width: 100%;\n height: 5px;\n background: #888888\n}\n\n.vader .sword .handle::after {\n content: '';\n position: absolute;\n right: 4px;\n top: 5px;\n width: 4px;\n height: 5px;\n background: #343434\n}\n\n.vader .sword .light {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 20px;\n height: 120px;\n margin-left: -10px;\n background: rgba(248,80,50,0);\n background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));\n background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n}\n\n.vader .sword .light::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 3px;\n height: 120px;\n margin-left: -1px;\n background: rgba(248,80,50,1);\n z-index: -1\n}\n\n.vader .shadow {\n position: absolute;\n bottom: -17px;\n left: -25px;\n display: block;\n width: 150px;\n height: 14px;\n background: rgba(0,0,0,0.15);\n border-radius: 50%\n}\n\n.animation-right {\n -webkit-animation: animationHandRight 1.5s linear infinite;\n animation: animationHandRight 1.5s linear infinite\n}\n\n@-webkit-keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n@keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n.animation-left {\n -webkit-animation: animationHandLeft 3s ease-in-out infinite;\n animation: animationHandLeft 3s ease-in-out infinite\n}\n\n@-webkit-keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(150px) rotate(25deg);\n transform: translateX(150px) rotate(25deg)\n }\n}\n\n@keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(150px) rotate(25deg);\n transform: translateX(150px) rotate(25deg)\n }\n}\n\n.vader:hover .eyes .left {\n background: #d81f27\n}\n\n.vader:hover .eyes .right {\n background: #455caa\n}",
"file_path": "/mnt/persist/workspace/loaders/csemszepp_happy-dog-58.html"
},
"uniapp": {
"template": "<view class=\"vader\"></view>\n<view class=\"shadow\"></view>\n<view class=\"head\"><view class=\"helmet\"></view><text class=\"left\"></text><text class=\"right\"></text></view><view class=\"eyes\"><text class=\"left\"></text><text class=\"right\"></text></view><text class=\"grill\"><text class=\"left\"></text></text><text class=\"center\"></text><text class=\"right\"></text></span><text class=\"mask\"><text class=\"top\"></text></text><text class=\"left\"></text><text class=\"center\"></text><text class=\"right\"></text></span><text class=\"line\"></text></div>\n<view class=\"torso\"><text class=\"neck\"><text class=\"left\"></text></text><text class=\"center\"></text><text class=\"right\"></text><text class=\"bottom\"></text></span><text class=\"belt\"><text class=\"center\"></text></text></span><view class=\"plate\"></view><text class=\"red_top\"></text><text class=\"red_center\"></text><text class=\"red_bottom\"></text><text class=\"blue\"></text><text class=\"gray\"></text></view></div>\n<view class=\"hand left\"><text class=\"hand\"></text></view>\n<view class=\"hand right animation-right\"><text class=\"hand\"></text></view>\n<view class=\"legs\"><text class=\"left\"></text><text class=\"right\"></text></view>\n<view class=\"boots\"><text class=\"left\"></text><text class=\"right\"></text></view>\n<view class=\"sword animation-left\"><text class=\"handle\"></text><text class=\"light\"></text></view>\n</div>\n<text class=\"text\">Darth Vader By <navigator href=\"https://codepen.io/poziomq\">qpoziomek</navigator></text>",
"script": "export default {\n name: 'GalaxyHappyDog58',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by csemszepp - Source: https://codepen.io/poziomq/details/Lbyomj - Tags: loader, animated, #darthvader */\n::-moz-selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n::selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n.text {\n position: absolute;\n bottom: 40rpx;\n left: 50rpx;\n color: black;\n font-family: Arial,sans-serif;\n text-transform: uppercase;\n font-size: 28rpx;\n line-height: 56rpx;\n font-weight: bold;\n letter-spacing: 4rpx;\n z-index: 99\n}\n\na {\n color: #6172BA;\n text-decoration: none;\n /* #ifdef H5 */\n cursor: pointer\n}\n\na:hover {\n text-decoration: underline\n}\n\n.vader {\n position: absolute;\n /* #endif */\n top: 50%;\n left: 50%;\n display: inline-block;\n -webkit-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%)\n}\n\n.vader .head {\n position: relative;\n width: 200rpx;\n height: 200rpx;\n margin-bottom: -20rpx;\n z-index: 1\n}\n\n.vader .helmet {\n position: absolute;\n top: 0;\n left: 10rpx;\n width: 180rpx;\n height: 160rpx;\n background: #222222;\n border-radius: 160rpx 160rpx 0 0\n}\n\n.vader .helmet::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: 50%;\n width: 100rpx;\n height: 16rpx;\n margin-left: -50rpx;\n background: #040507;\n border-radius: 50rpx 50rpx 0 0 / 16rpx 16rpx 0 0\n}\n\n.vader .helmet::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 16rpx;\n left: 50%;\n margin-left: -50rpx;\n height: 0;\n width: 0;\n border-left: 50rpx solid transparent;\n border-right: 50rpx solid transparent;\n border-top: 48rpx solid #040507\n}\n\n.vader .helmet span {\n position: absolute;\n top: 50%;\n width: 70rpx;\n height: 110rpx;\n background: #040507\n}\n\n.vader .helmet .left {\n left: -12rpx;\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg)\n}\n\n.vader .helmet .right {\n right: -12rpx;\n -webkit-transform: rotate(-25deg);\n transform: rotate(-25deg)\n}\n\n.vader .helmet span::before {\n content: '';\n position: absolute;\n top: -10rpx;\n width: 16rpx;\n height: 110rpx;\n background: #222222\n}\n\n.vader .helmet .left::before {\n left: 0\n}\n\n.vader .helmet .right::before {\n right: 0\n}\n\n.vader .line {\n position: absolute;\n top: -6rpx;\n left: 50%;\n width: 12rpx;\n height: 76rpx;\n margin-left: -6rpx;\n background: #343434\n}\n\n.vader .line::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -8rpx;\n bottom: 0;\n width: 8rpx;\n height: 24rpx;\n background: #040507\n}\n\n.vader .line::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -8rpx;\n bottom: 0;\n width: 8rpx;\n height: 24rpx;\n background: #040507\n}\n\n.vader .mask {\n position: absolute;\n bottom: 38rpx;\n left: 50%\n}\n\n.vader .mask span {\n position: absolute;\n top: 0;\n width: 8rpx;\n height: 8rpx;\n border-radius: 2rpx;\n background: #C6C6C6\n}\n\n.vader .mask .top {\n left: 50%;\n margin-top: -32rpx;\n margin-left: -4rpx\n}\n\n.vader .mask .top::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -14rpx;\n top: -4rpx;\n width: 8rpx;\n height: 48rpx;\n background: #040507;\n border-radius: 8rpx;\n -webkit-transform: rotate(40deg);\n transform: rotate(40deg)\n}\n\n.vader .mask .top::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -14rpx;\n top: -4rpx;\n width: 8rpx;\n height: 48rpx;\n background: #040507;\n border-radius: 8rpx;\n -webkit-transform: rotate(-40deg);\n transform: rotate(-40deg)\n}\n\n.vader .mask .left {\n left: 24rpx\n}\n\n.vader .mask .center {\n left: 50%;\n margin-top: -32rpx;\n margin-left: -4rpx\n}\n\n.vader .mask .right {\n right: 24rpx\n}\n\n.vader .grill {\n position: absolute;\n bottom: 40rpx;\n left: 50%;\n width: 40rpx;\n margin-left: -20rpx\n}\n\n.vader .grill span {\n position: absolute;\n bottom: -10rpx;\n width: 4rpx;\n margin-left: -2rpx;\n background: #C6C6C6\n}\n\n.vader .grill .left {\n left: 8rpx;\n height: 20rpx\n}\n\n.vader .grill .center {\n left: 50%;\n height: 34rpx\n}\n\n.vader .grill .right {\n right: 4rpx;\n height: 20rpx\n}\n\n.vader .eyes {\n position: absolute;\n top: 70rpx;\n left: 20rpx;\n width: 160rpx;\n height: 80rpx;\n border-radius: 80rpx;\n background: #343434\n}\n\n.vader .eyes::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 66rpx;\n left: 10rpx;\n height: 0;\n width: 0;\n border-left: 70rpx solid transparent;\n border-right: 70rpx solid transparent;\n border-top: 60rpx solid #343434\n}\n\n.vader .eyes span {\n position: absolute;\n top: 10rpx;\n width: 60rpx;\n height: 60rpx;\n border-radius: 60rpx;\n background: #010000;\n -webkit-transition: background .3s ease-in-out;\n transition: background .3s ease-in-out\n}\n\n.vader .eyes .left {\n left: 14rpx\n}\n\n.vader .eyes .right {\n right: 14rpx\n}\n\n.vader .torso {\n position: relative;\n width: 120rpx;\n height: 160rpx;\n border-radius: 100rpx 100rpx 0 0;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .torso::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -40rpx;\n top: -30rpx;\n width: 200rpx;\n height: 230rpx;\n border-radius: 100rpx 100rpx 0 0;\n margin: 0 auto;\n background: #040507;\n z-index: -1\n}\n\n.vader .belt {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 20rpx;\n background: #040507\n}\n\n.vader .belt span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n width: 40rpx;\n height: 20rpx;\n border-radius: 20rpx;\n margin-left: -20rpx;\n background: #C6C6C6\n}\n\n.vader .neck {\n position: absolute;\n left: 12rpx;\n top: 6rpx;\n width: 96rpx;\n height: 16rpx;\n background: #010000;\n z-index: 5\n}\n\n.vader .neck::before {\n content: '';\n position: absolute;\n top: -16rpx;\n left: 16rpx;\n width: 64rpx;\n height: 20rpx;\n background: #222222;\n border-radius: 0 0 8rpx 8rpx\n}\n\n.vader .neck::after {\n content: '';\n position: absolute;\n top: -16rpx;\n left: 16rpx;\n width: 64rpx;\n height: 2rpx;\n background: #666666\n}\n\n.vader .neck span {\n position: absolute;\n top: 0;\n width: 12rpx;\n height: 125%;\n margin-left: -6rpx;\n background: #434343\n}\n\n.vader .neck .left {\n left: 12rpx;\n -webkit-transform: rotate(30deg);\n transform: rotate(30deg);\n border-radius: 10rpx 0 0 0\n}\n\n.vader .neck .center {\n left: 50%;\n top: 4rpx\n}\n\n.vader .neck .right {\n right: 6rpx;\n -webkit-transform: rotate(-30deg);\n transform: rotate(-30deg);\n border-radius: 0 10rpx 0 0\n}\n\n.vader .neck .bottom {\n position: absolute;\n top: 16rpx;\n left: 8rpx;\n width: 92rpx;\n height: 10rpx;\n background: #222222\n}\n\n.vader .plate {\n position: absolute;\n left: 30rpx;\n top: 50rpx;\n width: 60rpx;\n height: 64rpx;\n background: #343434\n}\n\n.vader .plate .red_top {\n position: absolute;\n left: 4rpx;\n top: 4rpx;\n width: 24rpx;\n height: 36rpx;\n background: #d81f27\n}\n\n.vader .plate .red_top::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 10rpx;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_top::after {\n content: '';\n position: absolute;\n bottom: 10rpx;\n left: 0;\n width: 100%;\n height: 4rpx;\n background: #343434\n}\n\n.vader .plate .red_center {\n position: absolute;\n right: 4rpx;\n top: 24rpx;\n width: 24rpx;\n height: 16rpx;\n background: #d81f27\n}\n\n.vader .plate .red_center::before {\n content: '';\n position: absolute;\n left: 0;\n top: 8rpx;\n width: 100%;\n height: 8rpx;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_center::after {\n content: '';\n position: absolute;\n left: 10rpx;\n top: 0;\n width: 4rpx;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .red_bottom {\n position: absolute;\n right: 4rpx;\n bottom: 4rpx;\n width: 8rpx;\n height: 16rpx;\n background: #d81f27\n}\n\n.vader .plate .blue {\n position: absolute;\n right: 4rpx;\n top: 4rpx;\n width: 24rpx;\n height: 16rpx;\n background: #455caa\n}\n\n.vader .plate .blue::before {\n content: '';\n position: absolute;\n top: 6rpx;\n left: 0;\n width: 100%;\n height: 4rpx;\n background: #343434\n}\n\n.vader .plate .gray {\n position: absolute;\n left: 4rpx;\n bottom: 4rpx;\n width: 40rpx;\n height: 16rpx;\n background: #9f9fa1\n}\n\n.vader .plate .gray::before {\n content: '';\n position: absolute;\n left: 10rpx;\n top: 0;\n width: 4rpx;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .gray::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n width: 16rpx;\n height: 100%;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .legs {\n position: relative;\n width: 100rpx;\n height: 40rpx;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .legs::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 40rpx;\n height: 100%;\n margin-left: -20rpx;\n background: #040507\n}\n\n.vader .boots {\n position: absolute;\n bottom: 0;\n left: 50%\n}\n\n.vader .boots span {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 60rpx;\n height: 20rpx;\n background: #040507\n}\n\n.vader .boots .left {\n left: 20rpx;\n border-radius: 0 30rpx 0 0\n}\n\n.vader .boots .right {\n right: 20rpx;\n border-radius: 30rpx 0 0 0\n}\n\n.vader .hand {\n position: absolute;\n top: 60%;\n z-index: 2\n}\n\n.vader .hand.left {\n left: -4rpx;\n top: 82%\n}\n\n.vader .hand.right {\n right: -40rpx\n}\n\n.vader .hand .hand {\n position: absolute;\n top: 0;\n width: 22rpx;\n height: 44rpx;\n margin-top: -24rpx;\n margin-left: -24rpx;\n background: #040507\n}\n\n.vader .hand.left .hand {\n left: 0;\n border-radius: 44rpx 0 0 44rpx\n}\n\n.vader .hand.right .hand {\n right: 0;\n width: 44rpx;\n border-radius: 44rpx\n}\n\n.vader .sword {\n position: absolute;\n top: 50%;\n left: -40rpx;\n z-index: 10\n}\n\n.vader .sword .handle {\n position: absolute;\n top: 0;\n left: 0;\n width: 12rpx;\n height: 60rpx;\n margin-left: -6rpx;\n background: #343434\n}\n\n.vader .sword .handle::before {\n content: '';\n position: absolute;\n left: 0;\n top: 10rpx;\n width: 100%;\n height: 10rpx;\n background: #888888\n}\n\n.vader .sword .handle::after {\n content: '';\n position: absolute;\n right: 8rpx;\n top: 10rpx;\n width: 8rpx;\n height: 10rpx;\n background: #343434\n}\n\n.vader .sword .light {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 40rpx;\n height: 240rpx;\n margin-left: -20rpx;\n background: rgba(248,80,50,0);\n background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));\n background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n}\n\n.vader .sword .light::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 6rpx;\n height: 240rpx;\n margin-left: -2rpx;\n background: rgba(248,80,50,1);\n z-index: -1\n}\n\n.vader .shadow {\n position: absolute;\n bottom: -34rpx;\n left: -50rpx;\n display: block;\n width: 300rpx;\n height: 28rpx;\n background: rgba(0,0,0,0.15);\n border-radius: 50%\n}\n\n.animation-right {\n -webkit-animation: animationHandRight 1.5s linear infinite;\n animation: animationHandRight 1.5s linear infinite\n}\n\n@-webkit-keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n@keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n.animation-left {\n -webkit-animation: animationHandLeft 3s ease-in-out infinite;\n animation: animationHandLeft 3s ease-in-out infinite\n}\n\n@-webkit-keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(300rpx) rotate(25deg);\n transform: translateX(300rpx) rotate(25deg)\n }\n}\n\n@keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(300rpx) rotate(25deg);\n transform: translateX(300rpx) rotate(25deg)\n }\n}\n\n.vader:hover .eyes .left {\n background: #d81f27\n}\n\n.vader:hover .eyes .right {\n background: #455caa\n}\n",
"component_name": "GalaxyHappyDog58"
},
"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": [
"不支持 mask 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 mask 属性",
"不支持 cursor 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 14239,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:41.152Z",
"updated_at": "2025-07-31T07:55:41.152Z"
}