遇到的问题很多
js style “ flexDirection”写法，而在 css 里面 正确的写法是 flex-direction ，其他诸如，backgroundColor ，justifyContent ，alignItems 等等很多，不想穷举一个一个对应去替换，有什么好方法？或者好用的库来做个反向操作把 alignItems 转换为 align-items ，justifyContent 转换为 justify-content ，目前想到的方法是用 正则替换大写字母为 小写字母并且加上横杠
/([A-Z])/.replace(str,'-'+$1.toLower()) ? 但是觉得不够优雅，又担心出问题
```javascript
{
".full-content": {
position: "absolute",
top: "0px",
left: "0px",
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-end",
width: "100%",
backgroundColor: "rgba(0,0,0,0.01)"
},
".full-content .ad-button-extra": {
marginTop: "-100px",
marginLeft: "-200px",
width: "200px",
height: "100px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "ad-button-extra"
}]
}
},
".full-content .full-swiper": {
width: "100%",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "full-swiper"
}]
}
},
".full-content .full-div": {
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-end",
width: "100%",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "full-div"
}]
}
},
".full-content .btn-wrap": {
width: "750px",
height: "180px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-wrap"
}]
}
},
".full-content .btn-wrap-extra": {
width: "750px",
height: "215px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-wrap-extra"
}]
}
},
".full-content .btn-content": {
position: "absolute",
transform: "{\"scaleX\":60,\"scaleY\":60}",
width: "750px",
height: "180px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-content"
}]
}
},
".full-content .btn-origin-0": {
transformOrigin: "0px 0px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-origin-0"
}]
}
},
".full-content .btn-origin-1": {
transformOrigin: "750px 0px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-origin-1"
}]
}
},
".full-content .btn-origin-2": {
transformOrigin: "0px 180px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-origin-2"
}]
}
},
".full-content .btn-origin-3": {
transformOrigin: "750px 180px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-origin-3"
}]
}
},
".full-content .btn-origin-4": {
transformOrigin: "0px 0px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-origin-4"
}]
}
},
".full-content .btn": {
width: "750px",
height: "180px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn"
}]
}
},
".full-content .btn-extra": {
position: "absolute",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "full-content"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "btn-extra"
}]
}
},
".mask-all": {
position: "absolute",
left: "0px",
top: "0px",
width: "750px",
height: "100%"
},
".content-wrap": {
position: "absolute",
top: "0px",
left: "0px"
},
".content-wrap .content-box": {
position: "absolute",
top: "0px",
left: "0px",
width: "750px",
transform: "{\"translateY\":\"1px\"}",
backgroundColor: "#000000",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}]
}
},
".content-wrap .content-box .bg-img": {
width: "750px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "bg-img"
}]
}
},
".content-wrap .content-box .user-id": {
paddingTop: "80px",
paddingRight: "20px",
paddingBottom: "80px",
paddingLeft: "20px",
height: "180px",
width: "750px",
lineHeight: "20px",
fontSize: "18px",
color: "#333333",
opacity: 0.6,
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "user-id"
}]
}
},
".content-wrap .content-box .pop-wrap": {
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-end",
width: "100%",
height: "100%",
backgroundColor: "rgba(0,0,0,0.78)",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-wrap"
}]
}
},
".content-wrap .content-box .pop-wrap .pop-box": {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-box"
}]
}
},
".content-wrap .content-box .pop-wrap .pop-box .pop-image": {
width: "700px",
height: "800px",
objectFit: "contain",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-image"
}]
}
},
".content-wrap .content-box .pop-wrap .pop-box .pop-image-extra": {
width: "750px",
height: "600px",
objectFit: "contain",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-image-extra"
}]
}
},
".content-wrap .content-box .pop-wrap .nav": {
width: "750px",
height: "80px",
_meta: {
ruleDef: [{
t: "a",
n: "class",
i: false,
a: "element",
v: "content-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "content-box"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "pop-wrap"
}, {
t: "d"
}, {
t: "a",
n: "class",
i: false,
a: "element",
v: "nav"
}]
}
}
}
``` |
|
