// Place all the styles related to the welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
/* === 以下是首页banner滚动大图的CSS样式包 === */
/* --- 大图高度 和 滚动按钮 --- */
.fade-carousel { //滚动大图的相框高
position: relative;
height: 816px;
margin-top: -15px;
}
.fade-carousel .carousel-inner .item { //图片截取的宽度，这里与相框高度一致
height: 816px;
}
.fade-carousel .carousel-indicators > li { //滚动按钮的设置
width: 5px;
height: 5px;
margin: 0 2px;
background-color: #fff;
opacity: 0.5;
}
.fade-carousel .carousel-indicators > li.active { //当前滚动按钮的设置
width: 40px;
height: 5px;
opacity: 0.8;
}
/* --- 标题文字设置 --- */
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3; //元素堆叠等级3，将显示在最上层
color: #fff;
text-align: center;
text-transform: uppercase; //英文大写
text-shadow: 0 0 5px #666; //文字阴影 和 动态显示时间
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 { //h1标题设置
font-size: 4em;
font-weight: 500;
margin: 10px;
padding: 0;
}
.hero h3 { //h1标题设置
letter-spacing: 0.1em;
}
.fade-carousel .carousel-inner .item .hero { //动态出现设置
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero { //动态出现设置
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/* --- 遮罩滤镜层 --- */
.overlay { //遮罩滤镜层，把图片调暗，突出文案内容
position: absolute;
width: 100%;
height: 100%;
z-index: 2; //元素堆叠等级2，将显示在最中层
background-color: #080d15;
opacity: 0;
}
/* --- 按钮 --- */
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/* --- 图片 --- */
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 816px;
background-size: cover; //确保图片完全撑开
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://ww3.sinaimg.cn/large/006tKfTcgy1fg7v5k07bij31kw0w0774.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(https://ww1.sinaimg.cn/large/006tKfTcgy1fg7vwjz7taj31kw0w2dll.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(https://ww3.sinaimg.cn/large/006tKfTcgy1fg7wqj9r2dj31kw0lctcl.jpg);
}
/* --- 响应式设置 --- */
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 3em; }
}
@media screen and (max-width: 640px){
.hero h3 { font-size: 1.5em; }
}
/* --- 完成首页banner滚动大图的CSS样式包 --- */
// 中间区域（为了你的有趣生活）介绍内容样式
.landing-page-mid { //给图片整好形
height: 770px;
background-size: cover; //确保图片完全撑开
background-position: center center;
background-repeat: no-repeat;
background-image: url(https://ww2.sinaimg.cn/large/006tNc79gy1fg3uatrwy8j31kw0wudoi.jpg);
}
.landing-page-mid .tagline { //编写标题样式
text-align: center;
color: #7f8c8d;
letter-spacing: 0.1em; //把字间距撑开，视觉感更优雅
font-size: 1.6em;
margin-top: 3.2em;
}
.landing-page-mid .tagp { //编写内容样式
text-align: center;
color: #666;
font-size: 1.2em;
margin-top: 2.5em;
line-height: 2.5em; //行间距也要拉开大一些
letter-spacing: 0.18em; //把字间距撑开，视觉感更优雅
}
// 区块分类标识样式
.topspan {
margin-top: 2em;
}
.titspan {
font-weight: 400;
}
.morespan {
margin: 2em auto;
}
// 四季如风区域样式设置
.all-categories-box{
background-color: #f5f5f5;
}
.product-course-box-1 {
background-color: #7f8c8d;
padding: 30px 30px;
color: #fff;
text-align: center;
a {
color: #fff;
}
a:hover {
color: #f5f5f5;
}
}
.product-course-box-2 {
background-color: #8d827f;
padding: 30px 30px;
color: #fff;
text-align: center;
a {
color: #fff;
}
a:hover {
color: #f5f5f5;
}
}
.product-course-box-3 {
background-color: #8d7f85;
padding: 30px 30px;
color: #fff;
text-align: center;
a {
color: #fff;
}
a:hover {
color: #f5f5f5;
}
}
//------- 用户反馈区 -------------//
.sec-about {
background-color: #EBEBEB;
margin: -15px 0 -15px 0;
.container{
padding: 30px 0 30px 0;
}
}
.sec-about p {
text-align: center;
}
.sec-about a {
color: #000;
&:hover,
&:focus {
color: #ad0000;
}
}
/* Carousel with face indicators begin */
#quote-carousel {
padding: 0 10px 10px 10px;
margin-top: 30px;
/* Control buttons */
/* Previous button */
/* Next button */
/* Changes the position of the indicators */
/* Changes the color of the indicators */
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
// margin-top: 30px;
}
#quote-carousel .carousel-control.left {
left: -60px;
}
#quote-carousel .carousel-control.right {
right: -60px;
}
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 2px solid #CCC;
border-radius: 50px;
opacity: 0.4;
overflow: hidden;
transition: all 0.4s;
.avata {
width: 100%;
height: 100%;
border-radius: 50%;
margin-top: 0;
}
}
#quote-carousel .carousel-indicators .active {
background: #333333;
width: 100px;
height: 100px;
border-radius: 100px;
border-color: #f33;
opacity: 1;
overflow: hidden;
}
#quote-carousel .carousel-inner {
min-height: 250px;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/* Carousel with face indicators over */
//------- end of 用户反馈区 -------------//
// 精选产品展示列表样式设置，为商品栏做好排版整形
.product-list-style { //图片+文字 块样式整形
margin: 3em auto 2em;
img{
width: 100%;
height: 200px;
border-radius: 10px;
}
}
.product-list-style-img { //文字 块样式整形
margin-bottom: 1.2em;
}
.all-product-box {
background-color: #fff;
margin-bottom: 3em;
}
//团队介绍版面样式
.landing-page-eva {
background-color: #fff;
padding-bottom: 6em;
}
.landing-page-eva .tagline { //编写标题样式
text-align: center;
// color: #7f8c8d;
letter-spacing: 0.2em; //把字间距撑开，视觉感更优雅
font-size: 1.6em;
margin-top: 2.8em;
margin-bottom: 2em;
}
.landing-page-eva-style {
margin-top: 2em;
text-align: justify;
line-height: 2em;
}
//公告栏样式
.landing-page-adv {
padding-bottom: 2em;
text-align: center;
background-size: cover; //确保图片完全撑开
background-position: center center;
background-repeat: no-repeat;
background-image: url("https://ooo.0o0.ooo/2017/05/13/5915dfb428d47.jpg");
color: #fff;
}
.landing-page-adv h4{
margin-top: 30px;
text-align: center;
font-size: 1.3em;
}
.landing-page-adv h5{
margin-top: 30px;
text-align: center;
font-size: 1.8em;
}
.btn.btn-primary-welcome{
position: relative;
background-color: transparent;
color: #fff;
border-color: #fff;
margin-top: 20px;
font-size: 20px;
letter-spacing: 1px;
z-index:3;
}
.btn.btn-primary-welcome:hover{
background-color: #217F7B;
border-color: #217F7B;
color: #fff;
}
