lixin-web/webapp/css/index.css

vue and bootstrap

/*ҩæââ¬â¬SҩáõҦà÷ҥüÏҥüââ¬a¬Ò¥Ã§ââ¬Â¹*/

.main2{overflow: auto;}

.main3{max-width: 980px;margin: 0 auto;overflow: auto;}
.main3 .main3-li{text-align: center;margin-top: 40px;}


.swiper-wrapper .swiper-slide{text-align: center;color: #fff}
.main4-warp{background: #5c636c;width: 100%;}
.main4{max-width: 980px;margin: 0 auto;text-align: center;color: #fff;padding-left: 0}
.main4 li{padding: 50px 40px 20px 40px}
.main4 li:nth-child(odd){background: #50565e}
.main4  .progress{margin-bottom:5px;height: 12px;border-radius: 10px;background: #494e55}
.main4 .progress-bar-danger{background: #ffffff;border-radius: 10px;}
.main4 .p1{font-size: 16px;margin: 15px 0}

.main5{max-width: 980px;margin: 10px auto;padding-left: 0;padding-bottom: 20px;}
.main5 .p1{font-size: 16px;line-height: 3}
.main5 li{padding-top: 15px;}
.main5 .p2{color:#aaaaaa;}
.main5 .p3 a{color: #787876}
.main5 .btn{color: #00c4ff;border:1px dotted #00c4ff;display: table;margin: 0 auto;}
.swp-ul li{border:1px solid #fff;padding:8px 0;text-align: center;}

.login-frame{position: absolute;height: 100%;width: 280px;background: url(../img/dlb.jpg);right: 0;top: 0;text-align: center;
color:#fff;padding: 40px 20px;}
.login-frame-warp{position: fixed;height: 100%;width: 100%;top: 0;}
.login-frame-warp .form-group{position: relative;}
.login-frame-warp .glyphicon{position: absolute;left: 24px;color: #333;top: 10px;}
.login-frame-warp input{text-indent: 15px;}
.login-frame-warp .yan-img{position: absolute;right: 15px;width: 80px;}
.login-frame-warp .form-horizontal{margin-top: 30px;}
.login-frame-warp .login-btn{width: 240px;background: #00c4ff}





.swp-ul2{padding-left: 0}
.swp-ul2 li span{display: inline-block;width: 100%;background: rgba(0,0,0,0.3);padding: 5px 0;margin-top: 10px;}
.swp-ul2 li img{margin: 0 auto}
.swp-ul2 li .div1{height: 80px;margin-top: 20px;}
.swp-ul2 li{margin-top:10px}



.lmin1{width:100%; position:relative; overflow:hidden;}
      .lmin1 .lmin1-1{position:absolute; }
      .lmin1 .lmin1-2{position:absolute;bottom:0px;left: 50%;}
      .lmin1 .lmin1-2 .lmin1-2-1{text-align:center;}
      .lmin1 .lmin1-3{padding-top:5%;position:absolute;width:100%;height:100%;}
      .lmin1-3 .lmin1-3-1{font-size: 44px;font-weight:700;text-align:center;line-height: 100px;}
      .lmin1-3 .lmin1-3-2{text-align:center; color:#FFF; font-size:14px; padding-top:20px;}
      .lmin1-3 .lmin1-3-3{text-align:center; padding:21px 20px 20px 20px; background:#333; color:#FFF; width:366px; margin:0 auto; border-radius:3px; margin-top:10px;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
      
.swiper-pagination-bullet{height: 17px;width:17px;background: #007aff;
    opacity: 1;}
.swiper-pagination-bullet-active{background: #fa6400;}
.swiper-container-horizontal>.swiper-pagination-bullets{bottom:-4px;}
.swiper-container{padding-bottom: 50px;cursor: move;}

      


.swp-ul.row,.swp-ul.row a{color:#fff}

	.mouse-icon {position: absolute;left: 50%;bottom: 40px;border: 2px solid #fff;border-radius: 16px;height: 50px;width: 30px;margin-left: -17px;display: block;z-index: 10}
.mouse-icon .wheel {
    -webkit-animation-name: drop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: drop;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running
}
.mouse-icon .wheel {position: relative;border-radius: 10px;background: #fff;width: 4px;height: 10px;top: 4px;margin-left: auto;margin-right: auto}
@-webkit-keyframes drop {
    0% {
        top: 5px;
        opacity: 0
    }

    30% {
        top: 10px;
        opacity: 1
    }

    100% {
        top: 25px;
        opacity: 0
    }
}

@keyframes drop {
    0% {
        top: 5px;
        opacity: 0
    }

    30% {
        top: 10px;
        opacity: 1
    }

    100% {
        top: 25px;
        opacity: 0
    }
}
.mouse-text {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    width: 8em;
 margin-left:-60px;
    color: #fff;
    font-size: 14px;
    bottom: 100px;
}
.swp-ul li {
    margin-top: 36px;}
    .aImgList{margin-top: 142px;}
.grid {position: relative;clear: both;margin: 0 auto;padding: 1em 0 4em;max-width: 1000px;list-style: none;text-align: center;}
/* Common style */
.grid figure {position: relative;float: left;overflow: hidden;margin: 10px 1%;min-width: 220px;max-width: 480px;max-height: 360px;/*width: 48%;*/height: auto;background: #3085a3;text-align:center;cursor:pointer;}
.grid figure img {position: relative;display: block;width:220px;min-height: 100%;max-width: 100%;opacity: 0.8;}
.grid figure figcaption {padding: 2em;color: #fff;text-transform:uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after {pointer-events: none;}
.grid figure figcaption,
.grid figure figcaption > a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.grid figure figcaption > a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}
.grid figure h2 {font-size:24px;word-spacing: -0.15em;font-weight: 300;}
.grid figure h2,.grid figure p {margin:0;}
.grid figure p {letter-spacing: 1px;font-size: 68.5%;}
figure.effect-jazz {background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);}
figure.effect-jazz img {opacity: 0.9;}
figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}

figure.effect-jazz figcaption::after {position:absolute;top: 0;left: 0;width: 100%;height: 100%;border-top: 1px solid #fff;border-bottom: 1px solid #fff;content: '';opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
figure.effect-jazz h2,
figure.effect-jazz p {opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}
figure.effect-jazz h2 {padding-top:10%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-jazz p {margin-top:0.5rem;text-transform:none;font-size:0.60em;opacity:0;}
figure.effect-jazz:hover img {opacity: 0.7;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}
figure.effect-jazz:hover figcaption::after {opacity: 1;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}
figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {padding-top:0;opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
.wxBox{width:100%;text-align: left;}
.wxBox dt{float:left;padding-right:20px;}
.wxBox dd{line-height:26px;color:#787876;}
.wxBox dd em{color:#26c8ff;font-style:normal;}

@media screen and (min-width: 1200px) and (max-width: 1436px) {


}
@media screen and (max-width: 1000px) {

}
@media screen and (min-width: 960px) {
.main3 .main3-li{float: left;width: 470px;}
.main3 .main3-li:nth-child(2){float: right;}
.main2-right{width: 50%;float: left;}
.main2-left{width: 50%;float: left;padding: 50px 0;}
.main4-warp{margin-top: 40px;}
.main5 .btn{width: 100%}
.main5 li:nth-child(2),.main5 li:nth-child(3){padding-left: 50px;}
.swp-ul li{margin-top: 25px;cursor: pointer;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;

}
.swp-ul li:hover{background: rgba(0,0,0,0.3);border:1px solid rgba(0,0,0,0.0);}

.swiper-wrapper .swiper-slide{/*padding: 50px 0;*/}
.swiper-wrapper .swiper-slide h1{margin: 35px 0}

.main2 .main-left-anm{opacity: 0;left: -50%;position: relative;}
  .main2 .main-right-anm{opacity: 0;right: -50%;position: relative;}
  .main2{overflow: hidden;}
  .main3,.main4,.main5{position: relative;left: -100%;}


}

@media screen and (min-width: 990px) {

}

@media screen and  (max-width: 945px)  {
footer{text-align: center;}
.swiper-wrapper .swiper-slide{padding-bottom: 0}

}
@media screen and (max-width:768px){
	.lmin1-3 .lmin1-3-1{font-size: 25px;}
    .swiper-wrapper .swiper-slide{padding:20px 1px}
    .swp-ul{margin:0;padding:20px 0;margin: 0 10px;}
    .swiper-container {padding-bottom: 2px;}
	.swiper-container-horizontal>.swiper-pagination-bullets,.hidden-xs{display:none}
	.swp-ul li:nth-child(2n+1){border-right:0}
	.indexwapp{margin-top:-18px}

.wxBox .wxBox span{text-align:center;}
.wxBox dt{margin-left: 44px;}
.wxBox dd{line-height:26px;color:#787876;}
.wxBox dd em{color:#26c8ff;font-style:normal;}
.main5 .p2{text-align: center;margin-top:14px;font-size:16px}
.main3 .main3-li{margin:0}

}


@-webkit-keyframes arrow {
 0%,100% {
  top:10px;
 }
 50% {
  top:30px;
 }
}
@keyframes arrow {
 0%,100% {
  top:10px;
 }
 50% {
  top:30px;
 }
}