refine css

This commit is contained in:
Pan 2019-05-10 18:18:14 +08:00
parent 06e88f25cd
commit 7d19b1b7f5
1 changed files with 37 additions and 2 deletions

View File

@ -73,9 +73,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.panel-group { .panel-group {
margin-top: 18px; margin-top: 18px;
.card-panel-col{
.card-panel-col {
margin-bottom: 32px; margin-bottom: 32px;
} }
.card-panel { .card-panel {
height: 108px; height: 108px;
cursor: pointer; cursor: pointer;
@ -86,35 +88,45 @@ export default {
background: #fff; background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05);
&:hover { &:hover {
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
color: #fff; color: #fff;
} }
.icon-people { .icon-people {
background: #40c9c6; background: #40c9c6;
} }
.icon-message { .icon-message {
background: #36a3f7; background: #36a3f7;
} }
.icon-money { .icon-money {
background: #f4516c; background: #f4516c;
} }
.icon-shopping { .icon-shopping {
background: #34bfa3 background: #34bfa3
} }
} }
.icon-people { .icon-people {
color: #40c9c6; color: #40c9c6;
} }
.icon-message { .icon-message {
color: #36a3f7; color: #36a3f7;
} }
.icon-money { .icon-money {
color: #f4516c; color: #f4516c;
} }
.icon-shopping { .icon-shopping {
color: #34bfa3 color: #34bfa3
} }
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
float: left; float: left;
margin: 14px 0 0 14px; margin: 14px 0 0 14px;
@ -122,25 +134,48 @@ export default {
transition: all 0.38s ease-out; transition: all 0.38s ease-out;
border-radius: 6px; border-radius: 6px;
} }
.card-panel-icon { .card-panel-icon {
float: left; float: left;
font-size: 48px; font-size: 48px;
} }
.card-panel-description { .card-panel-description {
float: right; float: right;
font-weight: bold; font-weight: bold;
margin: 26px; margin: 26px;
margin-left: 0px; margin-left: 0px;
.card-panel-text { .card-panel-text {
line-height: 18px; line-height: 18px;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
font-size: 16px; font-size: 16px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.card-panel-num { .card-panel-num {
font-size: 20px; font-size: 20px;
} }
} }
} }
} }
@media (max-width:600px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style> </style>