0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(components): 优化卡片组件样式、调整首页 PlatformPicCard 组件的背景图片大小

This commit is contained in:
fhysy 2025-04-21 10:48:13 +08:00
parent 1cac339528
commit 32ed53f92b
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/CardBox/index.vue
View File

@ -208,6 +208,7 @@ const handleClick = () => {
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: 10px;
&:hover { &:hover {
box-shadow: 0 0 24px rgba(#000, 0.1); box-shadow: 0 0 24px rgba(#000, 0.1);
@ -281,8 +282,8 @@ const handleClick = () => {
width: 100px; width: 100px;
padding: 2px 0; padding: 2px 0;
background-color: rgba(#5995f5, 0.15); background-color: rgba(#5995f5, 0.15);
transform: skewX(45deg); //transform: skewX(45deg);
border-radius: 15px 0 0 15px;
&.success { &.success {
background-color: @success-color-deprecated-bg; background-color: @success-color-deprecated-bg;
} }
@ -296,7 +297,7 @@ const handleClick = () => {
} }
.card-state-content { .card-state-content {
transform: skewX(-45deg); //transform: skewX(-45deg);
} }
} }
@ -424,8 +425,9 @@ const handleClick = () => {
width: 100%; width: 100%;
border-radius: 0; border-radius: 0;
background: #f6f6f6; background: #f6f6f6;
border: 1px solid #e6e6e6; border: none;
color: #2f54eb; color: #2f54eb;
border-radius: 20px;
&:hover { &:hover {
background-color: @primary-color-hover; background-color: @primary-color-hover;
@ -456,7 +458,7 @@ const handleClick = () => {
:deep(button) { :deep(button) {
background: @error-color-deprecated-bg; background: @error-color-deprecated-bg;
border: 1px solid @error-color-outline; //border: 1px solid @error-color-outline;
span { span {
color: @error-color !important; color: @error-color !important;

2
src/views/home/components/PlatformPicCard.vue
View File

@ -48,7 +48,7 @@ const props = defineProps({
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
margin-top: 40px; margin-top: 40px;
background-size: auto 90%; background-size: 85%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }