遇到的问题很多 js style “ flexDirection”写法，而在 css 里面 正确的写法是 flex-direction ，其他诸如，backgroundColor ，justifyContent ，alignItems 等等很多，不想穷举一个一个对应去替换，有什么好方法？或者好用的库来做个反向操作把 alignItems 转换为 align-items ，justifyContent 转换为 justify-content ，目前想到的方法是用 正则替换大写字母为 小写字母并且加上横杠 /([A-Z])/.replace(str,'-'+$1.toLower()) ? 但是觉得不够优雅，又担心出问题
{
".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"
}]
}
}
}
5 条回复 • 2024-09-21 09:40:50 +08:00
 |
1
Wanten 22 小时 38 分钟前 via Android
你的 y 问题是什么
|
 |
2
07aPzknB16ui9Cp3 22 小时 14 分钟前
kebab case 和 camelCase 和各种 case 互转的工具不是挺多么
|
 |
3
sunchuo 19 小时 10 分钟前
lexer parser compiler
|
 |
4
flyqie 17 小时 24 分钟前 via Android
xy 问题。
webpack 做的工作可不止这点，有这时间你要不还是人力吧。 |
 |
5
Austaras 9 小时 23 分钟前
|
Select Language