mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
119 lines • 3.15 kB
JavaScript
import { createStyles } from "antd-style";
var useStyles = createStyles(function (_ref) {
var token = _ref.token;
return {
"costom-table-card": {
border: "1px solid #e6e6e6",
width: "398px",
borderRadius: "6px",
position: "relative",
overflow: "hidden",
padding: "16px 24px",
"&::before": {
content: "''",
position: "absolute",
width: "30%",
height: "80px",
top: "-69px",
left: "20px",
zIndex: "0",
background: "rgba(47, 84, 235, 0.55)",
transform: "perspective(0.5em) rotateX(177deg)"
},
"&::after": {
content: "''",
position: "absolute",
width: "84px",
height: "84px",
top: "-84px",
left: "84px",
background: "linear-gradient(\n 301.73deg,\n rgba(150, 236, 227, 0.63) 16.45%,\n rgba(150, 236, 227, 0) 66.56%\n )",
boxShadow: "inset 30px -10px 60px rgba(255, 255, 255, 0.25)",
filter: "blur(25px)",
transform: "matrix(-1, 0, 0, 1, 0, 0)"
},
"&:hover": {
boxShadow: "0px 2px 16px rgba(0, 0, 0, 0.1)"
}
},
"table-card-title": {
width: "100%",
display: "flex",
padding: "20px 0",
alignItems: "center",
fontWeight: "700",
fontSize: "18px",
borderBottom: "1px solid #e6e6e6"
},
"table-card-status": {
width: "96px",
height: "30px",
lineHeight: "30px",
fontSize: "14px",
position: "absolute",
right: "0",
top: "0",
backgroundColor: "rgba(74, 234, 220, 0.3)",
clipPath: "polygon(0% 0%, 20% 100%, 100% 100%, 100% 0%)",
textAlign: "center"
},
"table-card-content": {
margin: "20px 0"
},
"table-card-btns": {
display: "flex",
justifyContent: "flex-end",
alignItems: "center"
},
"card-btn": {
flex: "1",
margin: "4px",
height: "40px"
},
"@{ant-prefix}-btn": {
width: "100%",
height: "40px",
background: "#f1f1f1",
borderRadius: "10px",
border: "1px solid #e6e6e6",
color: "#000000",
"&:hover": {
backgroundColor: token.colorPrimary,
color: "#ffffff"
},
"&:disabled": {
color: token["btn-disable-color"],
backgroundColor: token["btn-disable-bg"]
}
},
"@{ant-prefix}-popover-inner": {
backgroundColor: "#3f4960",
borderRadius: "4px"
},
"@{ant-prefix}-popover-inner-content": {
padding: "10px 0",
borderRadius: "4px"
},
"@{ant-prefix}-popover-arrow-content": {
background: "#3f4960"
},
"card-popover-item": {
width: "100%",
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
color: "#ffffff",
backgroundColor: "#3f4960",
fontSize: "14px",
padding: "10px 50px 10px 20px",
cursor: "pointer",
"span:last-child": {
marginLeft: "10px"
},
"&:hover": {
background: "rgba(255, 255, 255, 0.12)"
}
}
};
});
export default useStyles;