|
|
@@ -82,7 +82,7 @@
|
|
|
<div class="middle">
|
|
|
<p class="middle-title">产品优势</p>
|
|
|
<div class="middle-div clear">
|
|
|
- <ul>
|
|
|
+ <ul class="fliist">
|
|
|
<li
|
|
|
v-for="(item, index) in list1"
|
|
|
:key="item.title + index"
|
|
|
@@ -103,7 +103,7 @@
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <ul>
|
|
|
+ <ul class="slist">
|
|
|
<li
|
|
|
v-for="(item, index) in list2"
|
|
|
:key="item.title + index"
|
|
|
@@ -276,15 +276,6 @@ export default {
|
|
|
font-weight: 200;
|
|
|
color: #666666;
|
|
|
font-size: 13px;
|
|
|
- // background: linear-gradient(
|
|
|
- // -4deg,
|
|
|
- // #b8925c 0%,
|
|
|
- // #936e40 28.80859375%,
|
|
|
- // #f6c684 65.8203125%,
|
|
|
- // #936e40 100%
|
|
|
- // );
|
|
|
- // -webkit-background-clip: text;
|
|
|
- // -webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -331,60 +322,62 @@ export default {
|
|
|
}
|
|
|
.middle-div {
|
|
|
width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
ul {
|
|
|
width: 100%;
|
|
|
float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
li {
|
|
|
width: calc(50% - 6px);
|
|
|
float: right;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
- background: linear-gradient(
|
|
|
- 0deg,
|
|
|
- #a2794d,
|
|
|
- #ba9363,
|
|
|
- #cba66f,
|
|
|
- #d7b27a,
|
|
|
- #e3c48a,
|
|
|
- #e3d097
|
|
|
- );
|
|
|
+ background: linear-gradient(0deg, #d5a15d 0%, #f0e09e 100%);
|
|
|
&.left {
|
|
|
float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
-
|
|
|
.first {
|
|
|
float: left;
|
|
|
- width: 48%;
|
|
|
+ width: 47%;
|
|
|
+ box-sizing: border-box;
|
|
|
height: 100%;
|
|
|
.title {
|
|
|
color: #613c0c;
|
|
|
+ box-sizing: border-box;
|
|
|
font-weight: bolder;
|
|
|
}
|
|
|
.desc {
|
|
|
color: #613c0c;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.lastP {
|
|
|
- background: #0f0b06;
|
|
|
+ // background: #0f0b06;
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
border-radius: 10px;
|
|
|
- padding: 2px 0 0 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding: 2px 0 0 3px;
|
|
|
margin: 15px 0 0 0;
|
|
|
width: 46px;
|
|
|
height: 13px;
|
|
|
img {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.second {
|
|
|
- width: 52%;
|
|
|
- float: left;
|
|
|
+ width: 53%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
img {
|
|
|
display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
@@ -398,7 +391,7 @@ export default {
|
|
|
li {
|
|
|
height: 90px;
|
|
|
margin: 0 0 10px 0;
|
|
|
- padding: 9px 15px;
|
|
|
+ padding: 9px 0 9px 15px;
|
|
|
&.he {
|
|
|
height: 190px;
|
|
|
}
|
|
|
@@ -420,8 +413,8 @@ export default {
|
|
|
padding: 42px 0 0 0;
|
|
|
}
|
|
|
.second img {
|
|
|
- width: 120%;
|
|
|
- margin: 35px 0 0 0;
|
|
|
+ width: calc(100% + 8px);
|
|
|
+ margin: 35px 0 0 -5px;
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(4) {
|
|
|
@@ -435,6 +428,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.fliist {
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 37px;
|
|
|
+ margin: 2px 18px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(3) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 56px;
|
|
|
+ margin: 20px 7px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.slist {
|
|
|
+ li:nth-child(1) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 70px;
|
|
|
+ margin: 22px 1px 0 -50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 55px;
|
|
|
+ margin: 10px 10px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -444,7 +473,7 @@ export default {
|
|
|
li {
|
|
|
height: 105px;
|
|
|
margin: 0 0 10px 0;
|
|
|
- padding: 9px 15px;
|
|
|
+ padding: 9px 0 9px 15px;
|
|
|
&.he {
|
|
|
height: 220px;
|
|
|
}
|
|
|
@@ -466,8 +495,8 @@ export default {
|
|
|
padding: 42px 0 0 0;
|
|
|
}
|
|
|
.second img {
|
|
|
- width: 120%;
|
|
|
- margin: 35px 0 0 0;
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ margin: 35px 0 0 -9px;
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(4) {
|
|
|
@@ -481,6 +510,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.fliist {
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 44px;
|
|
|
+ margin: 3px 20px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(3) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 68px;
|
|
|
+ margin: 23px 8px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.slist {
|
|
|
+ li:nth-child(1) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 85px;
|
|
|
+ margin: 30px 1px 0 -50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 62px;
|
|
|
+ margin: 15px 12px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -490,7 +555,7 @@ export default {
|
|
|
li {
|
|
|
height: 108px;
|
|
|
margin: 0 0 10px 0;
|
|
|
- padding: 9px 15px;
|
|
|
+ padding: 9px 0 9px 15px;
|
|
|
&.he {
|
|
|
height: 226px;
|
|
|
}
|
|
|
@@ -512,8 +577,8 @@ export default {
|
|
|
padding: 50px 0 0 0;
|
|
|
}
|
|
|
.second img {
|
|
|
- width: 120%;
|
|
|
- margin: 40px 0 0 0;
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ margin: 40px 0 0 -9px;
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(4) {
|
|
|
@@ -527,6 +592,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.fliist {
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 45px;
|
|
|
+ margin: 3px 20px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(3) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 68px;
|
|
|
+ margin: 23px 8px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.slist {
|
|
|
+ li:nth-child(1) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 90px;
|
|
|
+ margin: 30px 1px 0 -50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 65px;
|
|
|
+ margin: 15px 12px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -536,7 +637,7 @@ export default {
|
|
|
li {
|
|
|
height: 120px;
|
|
|
margin: 0 0 10px 0;
|
|
|
- padding: 9px 15px;
|
|
|
+ padding: 9px 0 9px 15px;
|
|
|
&.he {
|
|
|
height: 250px;
|
|
|
}
|
|
|
@@ -558,8 +659,8 @@ export default {
|
|
|
padding: 70px 0 0 0;
|
|
|
}
|
|
|
.second img {
|
|
|
- width: 120%;
|
|
|
- margin: 50px 0 0 0;
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ margin: 50px 0 0 -9px;
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(4) {
|
|
|
@@ -573,6 +674,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.fliist {
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ margin: 3px 22px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(3) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 78px;
|
|
|
+ margin: 23px 8px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.slist {
|
|
|
+ li:nth-child(1) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 103px;
|
|
|
+ margin: 30px 1px 0 -50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(2) {
|
|
|
+ .second {
|
|
|
+ img {
|
|
|
+ width: 68px;
|
|
|
+ margin: 18px 15px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
