index.wxss 6.7 KB
/**index.wxss**/
swiper{
  height: 100%;
  width: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background:linear-gradient(rgba(249,243,239,1),rgba(237,215,204,1));
}
.imgPolytope {
    width: 519rpx;
    height: 577rpx;
    margin: 190rpx auto;
    position: relative;
}
.index_zhutu {
    width: 314rpx;
    height: 347rpx;
    position: absolute;
    left: 110rpx;
    bottom: 85rpx;
}
.image0 {
    position: absolute;
}
.fenxi {
    width:57rpx;
    height:28rpx;
    /* opacity: 0.5; */
    top: 156rpx;
    right: 12rpx;
}
.jiaohu {
    width:69rpx;
    height:34rpx;
    left: 0;
    top: 120rpx;
}
.xiezuo {
    width:53rpx;
    height:26rpx;
    top: 0;
    left: 210rpx;
}
.guankong {
    width:62rpx;
    height:31rpx;
    right: 0;
    top: 360rpx;
}
.image01 {
    width: 78rpx;
    height: 68rpx;
    top: 197rpx;
    left: 58rpx;
    z-index: -1;
}
.image02 {
    width: 56rpx;
    height: 47rpx;
    right: 116rpx;
    top: 110rpx;
}
.image03 {
    left: 20rpx;
    bottom: 112rpx;
    width: 103rpx;
    height: 84rpx;
}
.image04 {
    right: 60rpx;
    bottom: 115rpx;
    width: 100rpx;
    height: 85rpx;
}
.image05 {
    left: 10rpx;
    top: 289rpx;
    width: 58rpx;
    height: 48rpx;
}
.image06 {
    left: 200rpx;
    bottom: 0;
    width: 97rpx;
    height: 82rpx;
}
.image07 {
    left: 100rpx;
    bottom: 0;
    width: 57rpx;
    height: 47rpx;
}
.image08 {
    top: 80rpx;
    left: 224rpx;
    width: 56rpx;
    height: 47rpx;
}
.image09 {
    top: 248rpx;
    right: 34rpx;
    width: 92rpx;
    height: 77rpx;
    z-index: -1;
}
.image10 {
    bottom: 19rpx;
    right: 110rpx;
    width: 66rpx;
    height: 55rpx;
}
/* .imgPolytope image {
    width: 100%;
    height: 100%;
} */
.index_title{
  text-align: center;
}
.index_title .title {
    color: #000;
    font-size: 46rpx;
    margin-bottom: 31rpx;
}
.content {
    color: #F0830C;
    font-size: 26rpx;
}
.init {
    opacity: 0;
    transform: translateY(1000px);
}
.contentInit {
    opacity: 0;
    transform: translateX(1000px);
}

/* 动画 */
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,24rpx)}
}
@keyframes heart01{
from{transform:translate(0,0)}
to{transform:translate(0,20rpx)}
}
@keyframes heart02 {
    from{transform: translate(0,0)}
    to{transform: translate(0,30rpx)}
}
.fenxi.heart{
animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}
.guankong.heart{
animation: heart 2s ease-in-out 4s infinite alternate;
}
.xiezuo.heart{
animation: heart 1.9s ease-in-out 2.6s infinite alternate;
}
.jiaohu.heart{
animation: heart 1.6s ease-in-out 2.2s infinite alternate;
}
.image01.heart01{
animation: heart01 1.7s ease-in-out 3.3s infinite alternate;
}
.image02.heart01{
animation: heart01 2s ease-in-out 3s infinite alternate;
}
.image03.heart01{
animation: heart01 1s ease-in-out 2.5s infinite alternate;
}
.image04.heart{
animation: heart 1.8s ease-in-out 2.7s infinite alternate;
}
.image05.heart01{
animation: heart01 2.1s ease-in-out 3.5s infinite alternate;
}
.image06.heart02{
animation: heart02 2.6s ease-in-out 3s infinite alternate;
}
.image07.heart02{
animation: heart02 1.6s ease-in-out 3.1s infinite alternate;
}
.image08.heart02{
animation: heart02 1.4s ease-in-out 2.9s infinite alternate;
}
.image09.heart01{
animation: heart01 2.8s ease-in-out 3.6s infinite alternate;
}
.image10.heart02{
animation: heart 2.3s ease-in-out 3.5s infinite alternate;
}
.drop_img.heart{
animation: heart 1.1s ease-in-out 2.5s infinite alternate;
}
/* 第二屏 */

/* pages/case/case.wxss */

.case_wrap {
    width: 100%;
    height: 100%;
    background: #F0EEED;
    display: flex;
    flex-direction: column;
}
.case_wrap .case_banner_box {
    width: 100%;
    height: 540rpx;
    background: #fff;
    position: relative;
    box-sizing: border-box;
    padding-top: 20rpx;
}
.case_wrap .case_banner_box swiper {
    width: 100%;
    height: 487rpx;
}
.bg {
    width: 100%;
    height: 476rpx;
    background: url("http://pjq0ww1cj.bkt.clouddn.com/bg.png") no-repeat center;
    background-size: 100%;
    position: relative;
}
.case_wrap .case_banner_box image {
    width: 690rpx;
    height: 429rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10rpx;
}
.min_bg {
    width:590rpx;
    height:344rpx;
    background:rgba(18,142,238,0.1);
    border-radius:10rpx;
    position: absolute;
    left: 0;
    /* top: 0; */
    bottom: 22rpx;
    right: 0;
    margin: auto;
}


/*案例css  */
.case_box {
    width: 100%;
    /* height: 647rpx; */
    background: #fff;
    flex: 1;
    margin-top: 20rpx;
    /* position: absolute;
    bottom: 0;
    left: 0; */
    display: flex;
    flex-direction: column;
    /* padding-bottom: 40rpx; */
}
.case_title {
    width: 100%;
    height: 112rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.case_title .case_title_content {
    width:276rpx;
    height: 100%;
    position: relative;
}
.case_title_content .case_contnet_line {
    position: absolute;
    width:100%;
    height:2rpx;
    background:linear-gradient(90deg,rgba(240,131,12,1),rgba(230,0,18,1));
    opacity:0.5;
    left: 0;
    top: 50%;
}
.case_title_content .case_title_text {
    width: 142rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -72rpx;
    background-color: #fff;
    color: #000000;
    font-size: 30rpx;
}
.case_content {
    display: flex;
    flex-wrap: wrap;
}
.case_content .case_list {
    width: 194rpx;
    height: 194rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-weight: 500;
    font-size: 26rpx;
    position: relative;
    margin: 0 28rpx 30rpx;
    border-radius:10rpx;
}
.case_list image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
     /* z-index: 0;  */
}
.case_list_text {
    position: absolute;
    /* top: 50%;
    left: 50%; */
}

/* 跳转按钮 */
.jump_btns {
    box-sizing: border-box;
    width: 100%;
    padding: 0 31rpx;
    display: flex;
    justify-content: space-between;
}
.jump_btn {
    width: 330rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background: -moz-linear-gradient( 65deg, rgb(250,117,81) 0%, rgb(253,144,52) 55%, rgb(255,170,22) 100%);
    background: -webkit-linear-gradient( 65deg, rgb(250,117,81) 0%, rgb(253,144,52) 55%, rgb(255,170,22) 100%);
    background: -ms-linear-gradient( 65deg, rgb(250,117,81) 0%, rgb(253,144,52) 55%, rgb(255,170,22) 100%);
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
}
swiper {
    width: 100%;
    height: 100%;
}
swiper image {
    width: 100%;
    height: 100%;
}