galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
94 lines • 28.8 kB
JSON
{
"id": "VashonG_clever-bullfrog-59",
"name": "clever-bullfrog-59",
"category": "loaders",
"author": "VashonG",
"description": "clever-bullfrog-59 组件 (animation, loader, flip, realistic, mac, computer, gradient)",
"tags": [
"animation",
"loader",
"flip",
"realistic",
"mac",
"computer",
"gradient"
],
"original": {
"html": "<div class=\"macbook\">\n <div class=\"inner\">\n <div class=\"screen\">\n <div class=\"face-one\">\n <div class=\"camera\"></div>\n <div class=\"display\">\n <div class=\"shade\"></div>\n </div>\n <span>MacBook Air</span>\n </div>\n <title>Layer 1</title>\n </div>\n <div class=\"macbody\">\n <div class=\"face-one\">\n <div class=\"touchpad\">\n </div>\n <div class=\"keyboard\">\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key space\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n <div class=\"key f\"></div>\n </div>\n </div>\n <div class=\"pad one\"></div>\n <div class=\"pad two\"></div>\n <div class=\"pad three\"></div>\n <div class=\"pad four\"></div>\n </div>\n </div>\n <div class=\"shadow\"></div>\n</div>",
"css": "/* From Uiverse.io by VashonG - Tags: animation, loader, flip, realistic, mac, computer */\n.macbook {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -85px 0 0 -78px;\n perspective: 500px;\n}\n\n.shadow {\n position: absolute;\n width: 60px;\n height: 0px;\n left: 40px;\n top: 160px;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n animation: shadow infinite 7s ease;\n}\n\n.inner {\n z-index: 20;\n position: absolute;\n width: 150px;\n height: 96px;\n left: 0;\n top: 0;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n animation: rotate infinite 7s ease;\n}\n\n.screen {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #ddd;\n transform-style: preserve-3d;\n transform-origin: 50% 93px;\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n animation: lid-screen infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);\n background-position: left bottom;\n background-size: 300px 300px;\n box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);\n}\n\n.screen .logo {\n position: absolute;\n width: 20px;\n height: 24px;\n left: 50%;\n top: 50%;\n margin: -12px 0 0 -10px;\n transform: rotateY(180deg) translateZ(0.1px);\n}\n\n.screen .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #d3d3d3;\n transform: translateZ(2px);\n background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.screen .face-one .camera {\n width: 3px;\n height: 3px;\n border-radius: 100%;\n background: #000;\n position: absolute;\n left: 50%;\n top: 4px;\n margin-left: -1.5px;\n}\n\n.screen .face-one .display {\n width: 130px;\n height: 74px;\n margin: 10px;\n background-color: #000;\n background-size: 100% 100%;\n border-radius: 1px;\n position: relative;\n box-shadow: inset 0 0 2px rgba(0,0,0,1);\n}\n\n.screen .face-one .display .shade {\n position: absolute;\n left: 0;\n top: 0;\n width: 130px;\n height: 74px;\n background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);\n animation: screen-shade infinite 7s ease;\n background-size: 300px 200px;\n background-position: 0px 0px;\n}\n\n.screen .face-one span {\n position: absolute;\n top: 85px;\n left: 57px;\n font-size: 6px;\n color: #666\n}\n\n.macbody {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #cbcbcb;\n transform-style: preserve-3d;\n transform-origin: 50% bottom;\n transform: rotateX(-90deg);\n animation: lid-macbody infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n transform-style: preserve-3d;\n background: #dfdfdf;\n animation: lid-keyboard-area infinite 7s ease;\n transform: translateZ(-2px);\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .touchpad {\n width: 40px;\n height: 31px;\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 4px;\n margin: -44px 0 0 -18px;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #888;\n}\n\n.macbody .keyboard {\n width: 130px;\n height: 45px;\n position: absolute;\n left: 7px;\n top: 41px;\n border-radius: 4px;\n transform-style: preserve-3d;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #777;\n padding: 0 0 0 2px;\n}\n\n.keyboard .key {\n width: 6px;\n height: 6px;\n background: #444;\n float: left;\n margin: 1px;\n transform: translateZ(-2px);\n border-radius: 2px;\n box-shadow: 0 -2px 0 #222;\n animation: keys infinite 7s ease;\n}\n\n.key.space {\n width: 45px;\n}\n\n.key.f {\n height: 3px;\n}\n\n.macbody .pad {\n width: 5px;\n height: 5px;\n background: #333;\n border-radius: 100%;\n position: absolute;\n}\n\n.pad.one {\n left: 20px;\n top: 20px;\n}\n\n.pad.two {\n right: 20px;\n top: 20px;\n}\n\n.pad.three {\n right: 20px;\n bottom: 20px;\n}\n\n.pad.four {\n left: 20px;\n bottom: 20px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n }\n\n 5% {\n transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);\n }\n\n 25% {\n transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);\n }\n\n 60% {\n transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);\n }\n\n 65% {\n transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);\n }\n\n 80% {\n transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);\n }\n\n 85% {\n transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);\n }\n\n 87% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n}\n\n@keyframes lid-screen {\n 0% {\n transform: rotateX(0deg);\n background-position: left bottom;\n }\n\n 5% {\n transform: rotateX(50deg);\n background-position: left bottom;\n }\n\n 20% {\n transform: rotateX(-90deg);\n background-position: -150px top;\n }\n\n 25% {\n transform: rotateX(15deg);\n background-position: left bottom;\n }\n\n 30% {\n transform: rotateX(-5deg);\n background-position: right top;\n }\n\n 38% {\n transform: rotateX(5deg);\n background-position: right top;\n }\n\n 48% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 90% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 100% {\n transform: rotateX(0deg);\n background-position: right center;\n }\n}\n\n@keyframes lid-macbody {\n 0% {\n transform: rotateX(-90deg);\n }\n\n 50% {\n transform: rotateX(-90deg);\n }\n\n 100% {\n transform: rotateX(-90deg);\n }\n}\n\n@keyframes lid-keyboard-area {\n 0% {\n background-color: #dfdfdf;\n }\n\n 50% {\n background-color: #bbb;\n }\n\n 100% {\n background-color: #dfdfdf;\n }\n}\n\n@keyframes screen-shade {\n 0% {\n background-position: -20px 0px;\n }\n\n 5% {\n background-position: -40px 0px;\n }\n\n 20% {\n background-position: 200px 0;\n }\n\n 50% {\n background-position: -200px 0;\n }\n\n 80% {\n background-position: 0px 0px;\n }\n\n 85% {\n background-position: -30px 0;\n }\n\n 90% {\n background-position: -20px 0;\n }\n\n 100% {\n background-position: -20px 0px;\n }\n}\n\n@keyframes keys {\n 0% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 5% {\n box-shadow: 1 -1px 0 #222;\n }\n\n 20% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 25% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 60% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 80% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 85% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 87% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 100% {\n box-shadow: 0 -2px 0 #222;\n }\n}\n\n@keyframes shadow {\n 0% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 5% {\n transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);\n box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);\n }\n\n 25% {\n transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);\n box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);\n }\n\n 60% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 100% {\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n}",
"file_path": "/mnt/persist/workspace/loaders/VashonG_clever-bullfrog-59.html"
},
"uniapp": {
"template": "<view class=\"macbook\"></view>\n <view class=\"inner\"></view>\n <view class=\"screen\"></view>\n <view class=\"face-one\"></view>\n <view class=\"camera\"></view>\n <view class=\"display\"></view>\n <view class=\"shade\"></view>\n </div>\n <text>MacBook Air</text>\n </div>\n <title>Layer 1</title>\n </div>\n <view class=\"macbody\"></view>\n <view class=\"face-one\"></view>\n <view class=\"touchpad\"></view>\n </div>\n <view class=\"keyboard\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key space\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n <view class=\"key f\"></view>\n </div>\n </div>\n <view class=\"pad one\"></view>\n <view class=\"pad two\"></view>\n <view class=\"pad three\"></view>\n <view class=\"pad four\"></view>\n </div>\n </div>\n <view class=\"shadow\"></view>\n</div>",
"script": "export default {\n name: 'GalaxyCleverBullfrog59',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by VashonG - Tags: animation, loader, flip, realistic, mac, computer */\n.macbook {\n width: 300rpx;\n height: 192rpx;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -170rpx 0 0 -156rpx;\n perspective: 1000rpx;\n}\n\n.shadow {\n position: absolute;\n width: 120rpx;\n height: 0rpx;\n left: 80rpx;\n top: 320rpx;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 120rpx 80rpx rgba(0,0,0,0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n animation: shadow infinite 7s ease;\n}\n\n.inner {\n z-index: 20;\n position: absolute;\n width: 300rpx;\n height: 192rpx;\n left: 0;\n top: 0;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n animation: rotate infinite 7s ease;\n}\n\n.screen {\n width: 300rpx;\n height: 192rpx;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 14rpx;\n background: #ddd;\n transform-style: preserve-3d;\n transform-origin: 50% 186rpx;\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n animation: lid-screen infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);\n background-position: left bottom;\n background-size: 600rpx 600rpx;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 6rpx 14rpx rgba(255,255,255,0.5);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n\n.screen .logo {\n position: absolute;\n width: 40rpx;\n height: 48rpx;\n left: 50%;\n top: 50%;\n margin: -24rpx 0 0 -20rpx;\n transform: rotateY(180deg) translateZ(0.2rpx);\n}\n\n.screen .face-one {\n width: 300rpx;\n height: 192rpx;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 14rpx;\n background: #d3d3d3;\n transform: translateZ(4rpx);\n background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.screen .face-one .camera {\n width: 6rpx;\n height: 6rpx;\n border-radius: 100%;\n background: #000;\n position: absolute;\n left: 50%;\n top: 8rpx;\n margin-left: -3rpx;\n}\n\n.screen .face-one .display {\n width: 260rpx;\n height: 148rpx;\n margin: 20rpx;\n background-color: #000;\n background-size: 100% 100%;\n border-radius: 2rpx;\n position: relative;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 4rpx rgba(0,0,0,1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n\n.screen .face-one .display .shade {\n position: absolute;\n left: 0;\n top: 0;\n width: 260rpx;\n height: 148rpx;\n background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);\n animation: screen-shade infinite 7s ease;\n background-size: 600rpx 400rpx;\n background-position: 0rpx 0rpx;\n}\n\n.screen .face-one span {\n position: absolute;\n top: 170rpx;\n left: 114rpx;\n font-size: 12rpx;\n color: #666\n}\n\n.macbody {\n width: 300rpx;\n height: 192rpx;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 14rpx;\n background: #cbcbcb;\n transform-style: preserve-3d;\n transform-origin: 50% bottom;\n transform: rotateX(-90deg);\n animation: lid-macbody infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .face-one {\n width: 300rpx;\n height: 192rpx;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 14rpx;\n transform-style: preserve-3d;\n background: #dfdfdf;\n animation: lid-keyboard-area infinite 7s ease;\n transform: translateZ(-4rpx);\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .touchpad {\n width: 80rpx;\n height: 62rpx;\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 8rpx;\n margin: -88rpx 0 0 -36rpx;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 6rpx #888;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n}\n\n.macbody .keyboard {\n width: 260rpx;\n height: 90rpx;\n position: absolute;\n left: 14rpx;\n top: 82rpx;\n border-radius: 8rpx;\n transform-style: preserve-3d;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: inset 0 0 6rpx #777;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n padding: 0 0 0 4rpx;\n}\n\n.keyboard .key {\n width: 12rpx;\n height: 12rpx;\n background: #444;\n float: left;\n margin: 2rpx;\n transform: translateZ(-4rpx);\n border-radius: 4rpx;\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 -4rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n animation: keys infinite 7s ease;\n}\n\n.key.space {\n width: 90rpx;\n}\n\n.key.f {\n height: 6rpx;\n}\n\n.macbody .pad {\n width: 10rpx;\n height: 10rpx;\n background: #333;\n border-radius: 100%;\n position: absolute;\n}\n\n.pad.one {\n left: 40rpx;\n top: 40rpx;\n}\n\n.pad.two {\n right: 40rpx;\n top: 40rpx;\n}\n\n.pad.three {\n right: 40rpx;\n bottom: 40rpx;\n}\n\n.pad.four {\n left: 40rpx;\n bottom: 40rpx;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n }\n\n 5% {\n transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);\n }\n\n 25% {\n transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);\n }\n\n 60% {\n transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);\n }\n\n 65% {\n transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);\n }\n\n 80% {\n transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);\n }\n\n 85% {\n transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);\n }\n\n 87% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n}\n\n@keyframes lid-screen {\n 0% {\n transform: rotateX(0deg);\n background-position: left bottom;\n }\n\n 5% {\n transform: rotateX(50deg);\n background-position: left bottom;\n }\n\n 20% {\n transform: rotateX(-90deg);\n background-position: -300rpx top;\n }\n\n 25% {\n transform: rotateX(15deg);\n background-position: left bottom;\n }\n\n 30% {\n transform: rotateX(-5deg);\n background-position: right top;\n }\n\n 38% {\n transform: rotateX(5deg);\n background-position: right top;\n }\n\n 48% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 90% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 100% {\n transform: rotateX(0deg);\n background-position: right center;\n }\n}\n\n@keyframes lid-macbody {\n 0% {\n transform: rotateX(-90deg);\n }\n\n 50% {\n transform: rotateX(-90deg);\n }\n\n 100% {\n transform: rotateX(-90deg);\n }\n}\n\n@keyframes lid-keyboard-area {\n 0% {\n background-color: #dfdfdf;\n }\n\n 50% {\n background-color: #bbb;\n }\n\n 100% {\n background-color: #dfdfdf;\n }\n}\n\n@keyframes screen-shade {\n 0% {\n background-position: -40rpx 0rpx;\n }\n\n 5% {\n background-position: -80rpx 0rpx;\n }\n\n 20% {\n background-position: 400rpx 0;\n }\n\n 50% {\n background-position: -400rpx 0;\n }\n\n 80% {\n background-position: 0rpx 0rpx;\n }\n\n 85% {\n background-position: -60rpx 0;\n }\n\n 90% {\n background-position: -40rpx 0;\n }\n\n 100% {\n background-position: -40rpx 0rpx;\n }\n}\n\n@keyframes keys {\n 0% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 -4rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 5% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 1 -2rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 20% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: -2rpx 2rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 25% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: -2rpx 2rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 60% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: -2rpx 2rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 80% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 -4rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 85% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 -4rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 87% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 -4rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 100% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 -4rpx 0 #222;\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n}\n\n@keyframes shadow {\n 0% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 120rpx 80rpx rgba(0,0,0,0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 5% {\n transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 120rpx 80rpx rgba(0,0,0,0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 100rpx 60rpx rgba(0,0,0,0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 25% {\n transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 70rpx 30rpx rgba(0,0,0,0.1);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 60% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(60rpx);\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 120rpx 80rpx rgba(0,0,0,0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n\n 100% {\n /* #ifdef H5 */\n /* #ifdef H5 */\n box-shadow: 0 0 120rpx 80rpx rgba(0,0,0,0.3);\n /* #endif */\n /* #ifdef MP */\n border: 1rpx solid rgba(0,0,0,0.1);\n /* #endif */\n /* #endif */\n }\n}\n\n",
"component_name": "GalaxyCleverBullfrog59"
},
"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 属性"
],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [
"不支持 box-shadow 属性"
],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 10960,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:40.727Z",
"updated_at": "2025-07-31T07:55:40.727Z"
}