//鍏叡閮ㄥ垎 @import './common.less'; .container { padding: 0 锛乮mportant; } #myTabContent { background-color: #F2F2F2; padding-top: 40px; } .top-banner { background-image: url(../images/banner-solution.png); } .solution-wrap { border-bottom: 1px solid #E3E3E3; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07); .nav.nav-tabs { height: 66px; border-bottom: none; >li { margin: 0; padding: 0; height: 100%; margin-right: 6.1%; border: none; >a { margin: 0; padding: 0; line-height: 62px; font-size: 16px; border: none; color: #000; transition: all 0.1s; background-color: @fontColorfff; &:hover { border: none; color: @themeColor; border-bottom: 4px solid @themeColor; background-color: @fontColorfff; } } } >li:last-child { margin-right: 0; } >li.active>a { box-sizing: border-box; color: @themeColor; cursor: default; background-color: #fff; border: none; font-size: 16px; border-bottom: 4px solid @themeColor; } } } #myTabContent { .container { .top-synopsis { height: 520px; margin-bottom: 20px; h3 { margin: 0; margin-top: 10px; line-height: 100px; font-size: 28px; position: relative; &:before { content: ''; position: absolute; top: 85%; left: 0; width: 20px; height: 4px; background-color: #333; } } .left { width: 710px; background-color: #fff; padding: 0 80px 0 50px; height: 100%; span { line-height: 26px; font-size: 18px; color: @fontColor666; } p { margin-top: 10px; font-size: 14px; color: @fontColor666; line-height: 26px; } a { display: block; border: 1px solid #dddddd; border-radius: 100px; width: 98px; height: 34px; line-height: 32px; text-align: center; &:hover { color: @themeColor; } } } .right { width: 510px; height: 100%; padding-left: 0px; background: url('../images/bg-622.png') no-repeat; h3 { color: #fff; &:before { background-color: @fontColorfff; } } ul { margin: 0; margin-top: 40px; padding: 0; li { color: @fontColorfff; height: 56px; margin-bottom: 46px; &:nth-child(1){ >span:first-child{ background-position:0 0; } } &:nth-child(2){ >span:first-child{ background-position: 0 -57px; } } &:nth-child(3){ >span:first-child{ background-position: 0 -114px; } } >span { display: inline-block; height: 56px; float: left; &:first-child { width: 56px; margin-right: 20px; background-image: url('../images/bg-622-1111.png'); background-repeat: no-repeat; } &:last-child { width: 340px; } >span { p { &:first-child { font-size: 16px; margin-bottom: 9px; line-height: 22px; } &:last-child { line-height: 20; } } } } } } } } .bottom-content { padding: 40px; background-color: #fff; color: @fontColor666; line-height: 30px; margin-bottom: 60px; &.product { padding-left: 25px; >div { >p { margin-bottom: 20px; line-height: 50px; font-size: 16px; color: #333; } text-align: center; >div { border: 1px solid #ddd; width: 270px; height: 270px; line-height: 270px; img { width: 100%; height: auto; } } } } } } } .main { // background-color: #f8f8f8; padding-top: 40px; h2 { margin: 0; padding: 0; font-size: 30px; line-height: 40px; position: relative; text-align: center; margin-bottom: 20px; small{ line-height: 30px; font-size: 16px; } } .project { padding-bottom: 60px; >div { >a { display: block; width: 390px; background-color: #fff; padding: 20px 20px 0 20px; transition: all 0.2s; margin-bottom: 20px; .project-img { width: 100%; height: 260px; overflow: hidden; } &:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.17); .info span { color: @themeColor; b { background: url(../images/icon-arrow-themeColor.png) no-repeat; } } } &:nth-child(3n-1) { margin: 0 25px; } } } .info { padding-top: 20px; h3 { margin: 0; font-size: 16px; font-weight: bold; line-height: 22px; } p { font-size: 14px; color: @fontColor666; line-height: 26px; padding: 10px 0; margin-bottom: 0; border-bottom: 1px solid #ddd; } span { display: block; line-height: 50px; font-size: 14px; b { display: block; margin-top: 20px; width: 19px; height: 12px; background: url(../images/icon-arrow-gray.png) no-repeat; } &:hover { color: @themeColor; b { background: url(../images/icon-arrow-themeColor.png) no-repeat; } } } } } } footer { margin-top: 0; }