yapi/client/components/Intro/Intro.scss

75 lines
1.5 KiB
SCSS
Raw Normal View History

2017-08-28 18:12:13 +08:00
$imgUrl: "../../../static/image/";
$color-grey: #E5E5E5;
$color-blue: #2395f1;
2017-07-17 21:11:58 +08:00
$color-white: #fff;
.intro-container{
.imgWrapper{
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
left: 0;
}
.textWrapper{
display: block;
width: 50%;
height: 150px;
vertical-align: top;
position: absolute;
margin: auto;
right: 0;
}
2017-07-17 21:11:58 +08:00
.des-container{
padding-left: .15rem;
.des-title{
font-size: .24rem;
margin-bottom: .1rem;
}
.des-detail{
font-size: .15rem;
margin-bottom: .2rem;
}
.des-switch{
.switch-content{
2017-07-28 20:35:44 +08:00
float: left;
width: 50%;
max-height: .85rem;
2017-07-17 21:11:58 +08:00
font-size: .14rem;
2017-07-28 20:35:44 +08:00
padding: .1rem .15rem .1rem 0;
2017-07-17 21:11:58 +08:00
div{
float: left;
}
.icon-switch{
2017-07-28 20:35:44 +08:00
height: .4rem;
width: .4rem;
2017-07-17 21:11:58 +08:00
border-radius: .02rem;
background-color: $color-blue;
margin-right: .1rem;
color: $color-white;
display: flex;
align-items: center;
justify-content: center;
2017-07-28 20:35:44 +08:00
font-size: .18rem;
}
.text-switch{
width: calc(100% - .65rem);
2017-07-17 21:11:58 +08:00
}
}
}
}
.img-container{
height: 100%;
width: 100%;
2017-07-17 21:11:58 +08:00
padding-right: .15rem;
//background-image: url("#{$imgUrl}demo-img.png");
img{
height: 100%;
width: 100%;
border: .01rem solid $color-grey;
box-shadow : 0 0 3px 1px $color-grey;
border-radius: .04rem;
}
}
}