parent
75d6b08f2b
commit
a9f82558d1
@ -1,47 +1,57 @@ |
|||||||
.banner { |
.index-container { |
||||||
display: flex; |
|
||||||
|
|
||||||
image { |
|
||||||
width: 200px; |
|
||||||
height: 150px; |
|
||||||
margin: 30px auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.btn-list { |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
$btn-item-height: 120rpx; |
justify-content: center; |
||||||
$btn-item-icon: 116rpx; |
align-items: center; |
||||||
.btn-item { |
height: 80vh; |
||||||
|
.banner { |
||||||
display: flex; |
display: flex; |
||||||
// border-bottom: 1px solid gray; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
image { |
image { |
||||||
background-color: rgb(146, 206, 248); |
width: 200px; |
||||||
width: $btn-item-icon; |
height: 150px; |
||||||
height: $btn-item-icon; |
margin: 30px auto; |
||||||
border-radius: 100%; |
|
||||||
position: relative; |
|
||||||
right: 15px; |
|
||||||
margin: ($btn-item-height - $btn-item-icon) / 2; |
|
||||||
box-shadow: rgba(128, 128, 128, 0.3) 1px 4px 5px 0.5px; |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
text { |
.btn-list { |
||||||
border-radius: 25rpx; |
display: flex; |
||||||
height: $btn-item-height; |
flex-direction: column; |
||||||
line-height: $btn-item-height; |
$btn-item-height: 120rpx; |
||||||
font-size: 32px; |
$btn-item-icon: 116rpx; |
||||||
font-weight: 600; |
|
||||||
color: black; |
.btn-item { |
||||||
display: block; |
display: flex; |
||||||
&::after{ |
// border-bottom: 1px solid gray; |
||||||
content: ""; |
justify-content: center; |
||||||
border-bottom: rgba(128, 128, 128, 0.3) solid 1px; |
align-items: center; |
||||||
|
|
||||||
|
image { |
||||||
|
background-color: rgb(146, 206, 248); |
||||||
|
width: $btn-item-icon; |
||||||
|
height: $btn-item-icon; |
||||||
|
border-radius: 100%; |
||||||
|
position: relative; |
||||||
|
right: 15px; |
||||||
|
margin: ($btn-item-height - $btn-item-icon) / 2; |
||||||
|
box-shadow: rgba(128, 128, 128, 0.3) 1px 4px 5px 0.5px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
text { |
||||||
|
border-radius: 25rpx; |
||||||
|
height: $btn-item-height; |
||||||
|
line-height: $btn-item-height; |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 600; |
||||||
|
color: black; |
||||||
display: block; |
display: block; |
||||||
|
|
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
border-bottom: rgba(128, 128, 128, 0.3) solid 1px; |
||||||
|
display: block; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
Loading…
Reference in new issue