未对接接口

xinxuan/package-lock.json

@@ -7269,6 +7269,11 @@
         }
       }
     },
+    "smooth-scroll": {
+      "version": "16.1.3",
+      "resolved": "https://registry.npmjs.org/smooth-scroll/-/smooth-scroll-16.1.3.tgz",
+      "integrity": "sha512-ca9U+neJS/cbdScTBuUTCZvUWNF2EuMCk7oAx3ImdeRK5FPm+xRo9XsVHIkeEVkn7MBRx+ufVEhyveM4ZhaTGA=="
+    },
     "sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",

xinxuan/package.json

@@ -11,6 +11,7 @@
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
+    "smooth-scroll": "^16.1.3",
     "vue": "^2.6.14",
     "vue-axios": "^3.5.2",
     "vue-router": "^3.6.5"

xinxuan/src/assets/css/common.css

@@ -559,7 +559,7 @@ th {
     transition: transform 0s cubic-bezier(.77, 0, .175, 1) .4s, opacity .4s ease-out
 }
 
-.js_intro.is_fact .js_intro_backBaseInner {
+.is_fact .js_intro_backBaseInner {
     transform: scale(1, 1);
     opacity: 1;
     transition: transform 1.2s cubic-bezier(.77, 0, .175, 1) .4s, opacity 0s
@@ -7097,34 +7097,34 @@ strong.ff__en {
     margin-top: 2.8rem
 }
 
-#content #footer {
+  #footer {
     background-color: rgba(0, 0, 0, .9);
     color: #fff
 }
 
-#content #footer .inner {
+  #footer .inner {
     padding-top: 7rem;
     padding-bottom: 0 !important
 }
 
-#content #footer .inner .btn a {
+  #footer .inner .btn a {
     position: relative;
     padding-top: calc(2.1rem + 3px)
 }
 
-#content #footer .inner .btn a .prefix {
+  #footer .inner .btn a .prefix {
     margin-bottom: 4.2rem
 }
 
-#content #footer .inner .btn a .caption {
+  #footer .inner .btn a .caption {
     margin-top: 4.2rem
 }
 
-#content #footer .inner .type1 .btn {
+  #footer .inner .type1 .btn {
     margin-bottom: 44.1rem
 }
 
-#content #footer .inner .type1 .btn a .prefix span {
+  #footer .inner .type1 .btn a .prefix span {
     margin-top: -.2625rem;
     margin-bottom: -.2625rem;
     font-weight: 600;
@@ -7134,7 +7134,7 @@ strong.ff__en {
     letter-spacing: .01em
 }
 
-#content #footer .inner .type1 .btn a .prefix span.font__info::after {
+  #footer .inner .type1 .btn a .prefix span.font__info::after {
     display: block;
     content: "(13 / 15 / 10)";
     color: red;
@@ -7142,7 +7142,7 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .type1 .btn a .title span {
+  #footer .inner .type1 .btn a .title span {
     margin-top: -1.3rem;
     margin-bottom: -1.3rem;
     font-weight: 600;
@@ -7152,7 +7152,7 @@ strong.ff__en {
     letter-spacing: .02em
 }
 
-#content #footer .inner .type1 .btn a .title span.font__info::after {
+  #footer .inner .type1 .btn a .title span.font__info::after {
     display: block;
     content: "(96 / 98 / 20)";
     color: red;
@@ -7160,7 +7160,7 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .type1 .btn a .caption span {
+  #footer .inner .type1 .btn a .caption span {
     margin-top: -.3rem;
     margin-bottom: -.3rem;
     font-size: 1.5rem;
@@ -7168,7 +7168,7 @@ strong.ff__en {
     letter-spacing: .06em
 }
 
-#content #footer .inner .type1 .btn a .caption span.font__info::after {
+  #footer .inner .type1 .btn a .caption span.font__info::after {
     display: block;
     content: "(15 / 21 / 60)";
     color: red;
@@ -7176,11 +7176,11 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .type1 nav {
+  #footer .inner .type1 nav {
     position: relative
 }
 
-#content #footer .inner .type1 nav::after {
+  #footer .inner .type1 nav::after {
     position: absolute;
     top: 50%;
     right: 3rem;
@@ -7192,17 +7192,17 @@ strong.ff__en {
     content: ""
 }
 
-#content #footer .inner .type1 nav ul {
+  #footer .inner .type1 nav ul {
     display: flex;
     column-gap: 2.8rem;
     flex-direction: row
 }
 
-#content #footer .inner .type1 nav ul li a {
+  #footer .inner .type1 nav ul li a {
     position: relative
 }
 
-#content #footer .inner .type1 nav ul li a span {
+  #footer .inner .type1 nav ul li a span {
     z-index: 2;
     position: relative;
     margin-top: -.5375rem;
@@ -7215,7 +7215,7 @@ strong.ff__en {
     transition: opacity 120ms cubic-bezier(.165, .84, .44, 1)
 }
 
-#content #footer .inner .type1 nav ul li a span.font__info::after {
+  #footer .inner .type1 nav ul li a span.font__info::after {
     display: block;
     content: "(23 / 28 / 20)";
     color: red;
@@ -7223,64 +7223,64 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .type1 nav ul li a.over span {
+  #footer .inner .type1 nav ul li a.over span {
     /* opacity: .2 */
 }
 
-#content #footer .inner .type1 nav ul li.current a {
+  #footer .inner .type1 nav ul li.current a {
     pointer-events: none
 }
 
-#content #footer .inner .type1 nav ul li.current a span {
+  #footer .inner .type1 nav ul li.current a span {
     opacity: .2
 }
 
-#content #footer .inner .type1 nav ul li.synergy.current a::before {
+  #footer .inner .type1 nav ul li.synergy.current a::before {
     width: 12rem;
     height: 12rem;
     transform: translate(-50%, -50%) rotate(10deg);
     /* background-image: url(../images/common/line/s/type-1.jpg) */
 }
 
-#content #footer .inner .type1 nav ul li:not(.synergy).current a::before {
+  #footer .inner .type1 nav ul li:not(.synergy).current a::before {
     transform: translate(-50%, -43%) rotate(35deg);
     /* background-image: url(../images/common/line/s/type-2.jpg) */
 }
 
-#content #footer .inner .type1 .btn+nav {
+  #footer .inner .type1 .btn+nav {
     margin-top: 0;
     border-top: 1px solid rgba(255, 255, 255, .2)
 }
 
-#content #footer .inner .type1>nav {
+  #footer .inner .type1>nav {
     margin-top: -7rem
 }
 
-#content #footer .inner .type2 {
+  #footer .inner .type2 {
     margin-bottom: 34.3rem
 }
 
-#content #footer .inner .type2 nav {
+  #footer .inner .type2 nav {
     display: flex;
     column-gap: 3rem;
     flex-direction: row;
     width: 100%
 }
 
-#content #footer .inner .type2 nav .btn {
+  #footer .inner .type2 nav .btn {
     flex: 1
 }
 
-#content #footer .inner .type2 nav .btn a {
+  #footer .inner .type2 nav .btn a {
     display: block;
     z-index: 2
 }
 
-#content #footer .inner .type2 nav .btn a .title {
+  #footer .inner .type2 nav .btn a .title {
     min-height: 9.275rem
 }
 
-#content #footer .inner .type2 nav .btn a .title span {
+  #footer .inner .type2 nav .btn a .title span {
     z-index: 0;
     position: relative;
     margin-top: -.62475rem;
@@ -7292,7 +7292,7 @@ strong.ff__en {
     letter-spacing: .01em
 }
 
-#content #footer .inner .type2 nav .btn a .title span.font__info::after {
+  #footer .inner .type2 nav .btn a .title span.font__info::after {
     display: block;
     content: "(49 / 49.245 / 10)";
     color: red;
@@ -7300,11 +7300,11 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .type2 nav .btn a .caption {
+  #footer .inner .type2 nav .btn a .caption {
     opacity: .5
 }
 
-#content #footer .inner .type2 nav .btn a .caption span {
+  #footer .inner .type2 nav .btn a .caption span {
     margin-top: -.3rem;
     margin-bottom: -.3rem;
     font-size: 1.5rem;
@@ -7313,7 +7313,7 @@ strong.ff__en {
     letter-spacing: .03em
 }
 
-#content #footer .inner .type2 nav .btn a .caption span.font__info::after {
+  #footer .inner .type2 nav .btn a .caption span.font__info::after {
     display: block;
     content: "(15 / 21 / 60)";
     color: red;
@@ -7321,18 +7321,18 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .type2 nav .btn.current a::before {
+  #footer .inner .type2 nav .btn.current a::before {
     opacity: .2
 }
 
-#content #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base {
+  #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base {
     top: 1.8rem;
     right: 1.5rem;
     transform: translate(50%, -50%);
     opacity: .2
 }
 
-#content #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base .icon::after {
+  #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base .icon::after {
     width: 1.4rem;
     height: 1.4rem;
     border-radius: 50%;
@@ -7340,11 +7340,11 @@ strong.ff__en {
     background-color: #fff
 }
 
-#content #footer .inner .type2 nav .btn.current a .icon_wrap>span {
+  #footer .inner .type2 nav .btn.current a .icon_wrap>span {
     color: rgba(255, 255, 255, .2)
 }
 
-#content #footer .inner .type2 nav .btn.current a .icon_wrap>span::before {
+  #footer .inner .type2 nav .btn.current a .icon_wrap>span::before {
     z-index: -1;
     position: absolute;
     left: 50%;
@@ -7357,11 +7357,11 @@ strong.ff__en {
     pointer-events: none
 }
 
-#content #footer .inner .type2 nav .btn.current a .caption {
+  #footer .inner .type2 nav .btn.current a .caption {
     opacity: .2
 }
 
-#content #footer .inner .type2 nav .btn.current.synergy a .title span::before {
+  #footer .inner .type2 nav .btn.current.synergy a .title span::before {
     top: 4.5rem;
     width: 50rem;
     height: 50rem;
@@ -7369,13 +7369,13 @@ strong.ff__en {
     /* background-image: url(../images/common/line/s/type-3.jpg) */
 }
 
-#content #footer .inner .type2 nav .btn.current:not(.synergy) a .title span::before {
+  #footer .inner .type2 nav .btn.current:not(.synergy) a .title span::before {
     top: 3.5rem;
     transform: translate(-40%, -50%);
     /* background-image: url(../images/common/line/s/type-1.jpg) */
 }
 
-#content #footer .inner .common {
+  #footer .inner .common {
     display: flex;
     column-gap: 2.8rem;
     flex-direction: row;
@@ -7384,13 +7384,13 @@ strong.ff__en {
     border-top: 1px solid rgba(255, 255, 255, .5)
 }
 
-#content #footer .inner .common nav ul {
+  #footer .inner .common nav ul {
     display: flex;
     column-gap: 2.8rem;
     flex-direction: row
 }
 
-#content #footer .inner .common nav:not(.sub) li a span {
+  #footer .inner .common nav:not(.sub) li a span {
     margin-top: -.3165rem;
     margin-bottom: -.3165rem;
     font-weight: 700;
@@ -7400,7 +7400,7 @@ strong.ff__en {
     letter-spacing: .01em
 }
 
-#content #footer .inner .common nav:not(.sub) li a span.font__info::after {
+  #footer .inner .common nav:not(.sub) li a span.font__info::after {
     display: block;
     content: "(16 / 18.33 / 10)";
     color: red;
@@ -7408,12 +7408,12 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .common nav.sub {
+  #footer .inner .common nav.sub {
     margin-right: 0;
     margin-left: auto
 }
 
-#content #footer .inner .common nav.sub ul li a span {
+  #footer .inner .common nav.sub ul li a span {
     margin-top: -.3rem;
     margin-bottom: -.3rem;
     font-size: 1.5rem;
@@ -7421,7 +7421,7 @@ strong.ff__en {
     letter-spacing: .06em
 }
 
-#content #footer .inner .common nav.sub ul li a span.font__info::after {
+  #footer .inner .common nav.sub ul li a span.font__info::after {
     display: block;
     content: "(15 / 21 / 60)";
     color: red;
@@ -7429,20 +7429,20 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content #footer .inner .common a {
+  #footer .inner .common a {
     opacity: .5;
     transition: opacity 120ms cubic-bezier(.165, .84, .44, 1)
 }
 
-#content #footer .inner .common a.over {
+  #footer .inner .common a.over {
     opacity: 1
 }
 
-#content #footer .inner .common .copyright {
+  #footer .inner .common .copyright {
     opacity: .5
 }
 
-#content #footer .inner .common .copyright span {
+  #footer .inner .common .copyright span {
     margin-top: -.3165rem;
     margin-bottom: -.3165rem;
     font-weight: 600;
@@ -7452,7 +7452,7 @@ strong.ff__en {
     letter-spacing: .01em
 }
 
-#content #footer .inner .common .copyright span.font__info::after {
+  #footer .inner .common .copyright span.font__info::after {
     display: block;
     content: "(16 / 18.33 / 10)";
     color: red;
@@ -7460,7 +7460,7 @@ strong.ff__en {
     font-family: HelveticaNowDisplay
 }
 
-#content .cover {
+  .cover {
     z-index: 200;
     position: fixed;
     top: 0;
@@ -7470,29 +7470,29 @@ strong.ff__en {
     /* background: #fff fixed url(../images/common/bg.png) repeat 50% 50% */
 }
 
-#content .inner {
+  .inner {
     padding-top: 10.1rem;
     padding-bottom: 26.6rem
 }
 
-#content .inner.fit--v {
+  .inner.fit--v {
     padding-bottom: 5.3rem !important
 }
 
-#content .inner .content.fit .main {
+  .inner .content.fit .main {
     height: calc(100% - 2.4rem)
 }
 
-#content #header .inner {
+  #header .inner {
     padding-top: 0;
     padding-bottom: 0
 }
 
-body:not(.home) #content.no-snap {
+body:not(.home)  .no-snap {
     visibility: hidden
 }
 
-body:not(.home) #content .js_snap_section {
+body:not(.home)   .js_snap_section {
     visibility: hidden
 }
 
@@ -10124,23 +10124,23 @@ body:not(.home) #content .js_snap_section {
         margin-top: 0
     }
 
-    #content #footer .inner {
+      #footer .inner {
         padding-top: 14rem
     }
 
-    #content #footer .inner .btn a .prefix {
+      #footer .inner .btn a .prefix {
         margin-bottom: 8.4rem
     }
 
-    #content #footer .inner .type1 .btn {
+      #footer .inner .type1 .btn {
         margin-bottom: 36.4rem
     }
 
-    #content #footer .inner .type1 .btn a .prefix {
+      #footer .inner .type1 .btn a .prefix {
         height: 1.3rem
     }
 
-    #content #footer .inner .type1 .btn a .prefix span {
+      #footer .inner .type1 .btn a .prefix span {
         margin-top: -.459rem;
         margin-bottom: -.459rem;
         transform: scale(.5);
@@ -10150,7 +10150,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .01em
     }
 
-    #content #footer .inner .type1 .btn a .prefix span.font__info::after {
+      #footer .inner .type1 .btn a .prefix span.font__info::after {
         display: block;
         content: "(36 / 36.18 / 10)";
         color: red;
@@ -10158,16 +10158,16 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .type1 .btn a .icon_wrap[class*=__size--xl]:not([class*=hp--left]) {
+      #footer .inner .type1 .btn a .icon_wrap[class*=__size--xl]:not([class*=hp--left]) {
         padding-right: 0
     }
 
-    #content #footer .inner .type1 .btn a .title .icon_base {
+      #footer .inner .type1 .btn a .title .icon_base {
         top: 0;
         transform: translate(0, 0)
     }
 
-    #content #footer .inner .type1 .btn a .title span {
+      #footer .inner .type1 .btn a .title span {
         margin-top: -1.4898375rem;
         margin-bottom: -1.4898375rem;
         font-size: 11.685rem;
@@ -10175,7 +10175,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .01em
     }
 
-    #content #footer .inner .type1 .btn a .title span.font__info::after {
+      #footer .inner .type1 .btn a .title span.font__info::after {
         display: block;
         content: "(116.85 / 117.43425 / 10)";
         color: red;
@@ -10183,7 +10183,7 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .type1 .btn a .caption span {
+      #footer .inner .type1 .btn a .caption span {
         margin-top: -.6rem;
         margin-bottom: -.6rem;
         font-size: 3rem;
@@ -10191,7 +10191,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .06em
     }
 
-    #content #footer .inner .type1 .btn a .caption span.font__info::after {
+      #footer .inner .type1 .btn a .caption span.font__info::after {
         display: block;
         content: "(30 / 42 / 60)";
         color: red;
@@ -10199,16 +10199,16 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .type1 nav::after {
+      #footer .inner .type1 nav::after {
         display: none
     }
 
-    #content #footer .inner .type1 nav ul {
+      #footer .inner .type1 nav ul {
         row-gap: 2.1rem;
         flex-direction: column
     }
 
-    #content #footer .inner .type1 nav ul li a span {
+      #footer .inner .type1 nav ul li a span {
         margin-top: -1.075rem;
         margin-bottom: -1.075rem;
         font-size: 4.6rem;
@@ -10216,7 +10216,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .02em
     }
 
-    #content #footer .inner .type1 nav ul li a span.font__info::after {
+      #footer .inner .type1 nav ul li a span.font__info::after {
         display: block;
         content: "(46 / 56 / 20)";
         color: red;
@@ -10224,7 +10224,7 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .type1 nav ul li.current a::after {
+      #footer .inner .type1 nav ul li.current a::after {
         position: absolute;
         top: 50%;
         right: 3.4rem;
@@ -10237,32 +10237,32 @@ body:not(.home) #content .js_snap_section {
         opacity: .2
     }
 
-    #content #footer .inner .type1>nav {
+      #footer .inner .type1>nav {
         margin-top: -14rem
     }
 
-    #content #footer .inner .type2 {
+      #footer .inner .type2 {
         margin-bottom: 36.4rem
     }
 
-    #content #footer .inner .type2 nav {
+      #footer .inner .type2 nav {
         row-gap: 8.4rem;
         flex-direction: column
     }
 
-    #content #footer .inner .type2 nav .btn a {
+      #footer .inner .type2 nav .btn a {
         padding-top: 4.2rem
     }
 
-    #content #footer .inner .type2 nav .btn a::before {
+      #footer .inner .type2 nav .btn a::before {
         height: 1px
     }
 
-    #content #footer .inner .type2 nav .btn a .title {
+      #footer .inner .type2 nav .btn a .title {
         min-height: 0
     }
 
-    #content #footer .inner .type2 nav .btn a .title span {
+      #footer .inner .type2 nav .btn a .title span {
         margin-top: -.5865rem;
         margin-bottom: -.5865rem;
         font-size: 4.6rem;
@@ -10270,7 +10270,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .01em
     }
 
-    #content #footer .inner .type2 nav .btn a .title span.font__info::after {
+      #footer .inner .type2 nav .btn a .title span.font__info::after {
         display: block;
         content: "(46 / 46.23 / 10)";
         color: red;
@@ -10278,7 +10278,7 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .type2 nav .btn a .caption span {
+      #footer .inner .type2 nav .btn a .caption span {
         margin-top: -.48rem;
         margin-bottom: -.48rem;
         font-size: 2.4rem;
@@ -10286,7 +10286,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .06em
     }
 
-    #content #footer .inner .type2 nav .btn a .caption span.font__info::after {
+      #footer .inner .type2 nav .btn a .caption span.font__info::after {
         display: block;
         content: "(24 / 33.6 / 60)";
         color: red;
@@ -10294,17 +10294,17 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base {
+      #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base {
         top: 1.65rem;
         right: 2.4rem
     }
 
-    #content #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base .icon::after {
+      #footer .inner .type2 nav .btn.current a .icon_wrap .icon_base .icon::after {
         width: 1.8rem;
         height: 1.8rem
     }
 
-    #content #footer .inner .common {
+      #footer .inner .common {
         display: grid;
         grid-template-rows: repeat(2, auto);
         grid-template-columns: repeat(2, 1fr);
@@ -10314,20 +10314,20 @@ body:not(.home) #content .js_snap_section {
         border-top-color: rgba(255, 255, 255, .2)
     }
 
-    #content #footer .inner .common nav ul {
+      #footer .inner .common nav ul {
         row-gap: 2.5rem;
         flex-direction: column
     }
 
-    #content #footer .inner .common nav ul li a {
+      #footer .inner .common nav ul li a {
         display: inline-flex
     }
 
-    #content #footer .inner .common nav:not(.sub) li a {
+      #footer .inner .common nav:not(.sub) li a {
         opacity: 1
     }
 
-    #content #footer .inner .common nav:not(.sub) li a span {
+      #footer .inner .common nav:not(.sub) li a span {
         margin-top: -.525rem;
         margin-bottom: -.525rem;
         font-size: 2.6rem;
@@ -10335,7 +10335,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .01em
     }
 
-    #content #footer .inner .common nav:not(.sub) li a span.font__info::after {
+      #footer .inner .common nav:not(.sub) li a span.font__info::after {
         display: block;
         content: "(26 / 30 / 10)";
         color: red;
@@ -10343,17 +10343,17 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .common nav.sub {
+      #footer .inner .common nav.sub {
         margin-right: auto;
         margin-left: 0
     }
 
-    #content #footer .inner .common nav.sub ul {
+      #footer .inner .common nav.sub ul {
         justify-content: space-between;
         height: 100%
     }
 
-    #content #footer .inner .common nav.sub ul li a span {
+      #footer .inner .common nav.sub ul li a span {
         margin-top: -.48rem;
         margin-bottom: -.48rem;
         font-size: 2.4rem;
@@ -10361,7 +10361,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .06em
     }
 
-    #content #footer .inner .common nav.sub ul li a span.font__info::after {
+      #footer .inner .common nav.sub ul li a span.font__info::after {
         display: block;
         content: "(24 / 33.6 / 60)";
         color: red;
@@ -10369,23 +10369,23 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content #footer .inner .common nav.sub ul li:nth-of-type(1) a {
+      #footer .inner .common nav.sub ul li:nth-of-type(1) a {
         opacity: 1
     }
 
-    #content #footer .inner .common nav.sub ul li:nth-of-type(2) {
+      #footer .inner .common nav.sub ul li:nth-of-type(2) {
         margin-top: auto;
         margin-bottom: 0
     }
 
-    #content #footer .inner .common .copyright {
+      #footer .inner .common .copyright {
         position: relative;
         grid-column-start: 1;
         grid-column-end: 3;
         opacity: 1
     }
 
-    #content #footer .inner .common .copyright::after {
+      #footer .inner .common .copyright::after {
         position: absolute;
         top: 50%;
         right: 3.4rem;
@@ -10397,7 +10397,7 @@ body:not(.home) #content .js_snap_section {
         content: ""
     }
 
-    #content #footer .inner .common .copyright span {
+      #footer .inner .common .copyright span {
         margin-top: -.525rem;
         margin-bottom: -.525rem;
         font-size: 2.6rem;
@@ -10405,7 +10405,7 @@ body:not(.home) #content .js_snap_section {
         letter-spacing: .01em
     }
 
-    #content #footer .inner .common .copyright span.font__info::after {
+      #footer .inner .common .copyright span.font__info::after {
         display: block;
         content: "(26 / 30 / 10)";
         color: red;
@@ -10413,22 +10413,22 @@ body:not(.home) #content .js_snap_section {
         font-family: HelveticaNowDisplay
     }
 
-    #content .inner {
+      .inner {
         padding-top: 11.4rem;
         padding-bottom: 42rem
     }
 
-    body[class*="404"] #content .inner,
-    body[class*=approach_index] #content .inner,
-    body[class*=synergy_index] #content .inner {
+    body[class*="404"]   .inner,
+    body[class*=approach_index]   .inner,
+    body[class*=synergy_index]   .inner {
         padding-bottom: 25.2rem
     }
 
-    #content .inner.fit--v {
+      .inner.fit--v {
         padding-bottom: 0 !important
     }
 
-    #content .inner.fit--v.sp--free {
+      .inner.fit--v.sp--free {
         padding-bottom: 0 !important
     }
 
@@ -11984,7 +11984,7 @@ body:not(.home) #content .js_snap_section {
         height: calc(100% - (5.8rem + 12.6rem - 5.7rem))
     }
 
-    #content #footer .inner .type1 nav ul li.current a::before {
+      #footer .inner .type1 nav ul li.current a::before {
         z-index: 1;
         position: absolute;
         top: 50%;

xinxuan/src/assets/css/index.css

@@ -1,7 +1,7 @@
-#content {
+  #content{
     /* background: #000; */
     background-size: 100%;
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     position: relative;
 }
@@ -9,7 +9,7 @@
     cursor: pointer;
 }
 .video {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -19,11 +19,14 @@
 }
 .videoContainer {
     position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: -100;
   }
+
  
   .videoContainer:before {
     content: '';
@@ -177,7 +180,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     background: #fff;
     /* z-index: 99; */
@@ -194,13 +197,18 @@
         top: -100%;
     }
 }
+.is_show {
+    display: block !important;
+}
 .one {
     height: 100vh;
+    position: relative;
+    /* display: none; */
 }
 .one .title {
     width: 100%;
-    position: absolute;
-    top: 70vh;
+    /* position: absolute; */
+    /* top: 70vh; */
     box-sizing: border-box;
     padding: 0 100px;
 }
@@ -213,12 +221,12 @@
     /* text-align: center; */
 }
 .one .subTitle {
-    position: relative;
+    /* position: relative;
     top: 0;
-    left: 0;
+    left: 0; */
     box-sizing: border-box;
-    padding: 194px 101px;
-    height: 80vh;
+    padding: 194px 101px 0;
+    height: 70vh;
     animation:js_subtitle 1s ease-out 2s backwards;
 }
 @keyframes js_subtitle {
@@ -250,12 +258,13 @@
     height: 1px;
     background: #333333;
     margin-bottom: 40px;
+    position: relative;
 }
 .one .title .line:after {
     display: block;
     position: absolute;
-    top: 180px;
-    left: 100px;
+    /* top: 180px; */
+    /* left: 100px; */
     width: 1720px;
     height: 1px;
     transform: scale(0, 1);
@@ -368,6 +377,7 @@
     margin-top: 100vh;
     width: 100%;
     height: 100vh;
+    position: relative;
 }
 .icon_down {
     position: fixed;
@@ -375,6 +385,7 @@
     bottom: 243px;
     height: 120px;
     width: 40px;
+    z-index: 9;
 }
 .icon_down .icon-down-1 {
     width: 34px;
@@ -383,4 +394,148 @@
 .icon_down .icon-down-2 {
     width: 34px;
     height: 40px;
+}
+.two .video_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+}
+.two .video_bg::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+    /* z-index: 1; */
+    top: 0;
+    left: 0;
+    background: rgba(25, 29, 34, 0.65);
+}
+.two .video_bg video {
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+    z-index: -999;
+}
+.two .video_bg .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0 101px;
+}
+.two .video_bg .content .name,.wenan{
+    font-size: 60px;
+    font-weight: 600;
+    color: #fff;
+    line-height: 60px;
+    z-index: 999;
+}
+.two .video_bg .content .name{
+    padding: 399px 0 75px;
+}
+.two .video_bg .content .content_right {
+    padding: 400px 0 200px;
+}
+.two .video_bg .content .content_right .right_index {
+    padding-top: 54px;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 140px;
+    font-size: 36px;
+}
+.two .video_bg .content .content_right .right_index .indexs {
+    font-size: 140px;
+}
+.two .video_bg .content .content_right .circle {
+    width: 12px;
+    height: 12px;
+    border: 2px solid #FFFFFF;
+    border-radius: 50%;
+    margin-bottom: 21px;
+}
+.two .video_bg .content .content_right .circle_active {
+    background: #FFFFFF;
+}
+.two .video_bg .content .content_right .icon_down2 {
+    /* position: absolute;
+    right: 243px;
+    bottom: 243px; */
+    height: 120px;
+    width: 40px;
+    z-index: 9;
+}
+.icon_down .icon-down-1 {
+    width: 34px;
+    height: 60px;
+}
+.icon_down .icon-down-2 {
+    width: 34px;
+    height: 40px;
+
+}
+.three {
+    margin-top: 100vh;
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    min-height: 100vh;
+}
+.three .video_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+}
+.three .video_bg::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+    /* z-index: 1; */
+    top: 0;
+    left: 0;
+    background: rgba(25, 29, 34, 0.65);
+}
+.three .video_bg video {
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+    z-index: -999;
+}
+.three .three_text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 400px 0 0;
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 90px;
+    text-align: center;
+}
+
+@media screen and (max-width: 750px) {
+
+    .two .video_bg .content .content_right .right_index {
+        position: absolute;
+        top: 100px;
+        left: 100px;
+    }
+    .two .video_bg .content .content_left {
+        padding: 70vh 0 0;
+    }
+    
+}
+
+/deep/ .footer {
+    margin-top: 100vh;
 }

xinxuan/src/components/footer.vue

@@ -1,23 +1,166 @@
 <template>
-    <div></div>
+    <div class="footer">
+        <div class="hflex acenter jbetween footer_top">
+            <div class="top_item point" @click="toDetail(1)">
+                <div class="top_item-text hflex acenter jbetween">
+                    <div>跨境贸易</div>
+                    <img src="@/assets/images/common/arrow-right.png" alt="" />
+                </div>
+                <div class="top_item-text2">Cross-border Trade</div>
+            </div>
+            <div class="top_item point" @click="toDetail(2)">
+                <div class="top_item-text hflex acenter jbetween">
+                    <div>关于我们</div>
+                    <img src="@/assets/images/common/arrow-right.png" alt="" />
+                </div>
+                <div class="top_item-text2">About Us</div>
+            </div>
+            <div class="top_item point" @click="toDetail(3)">
+                <div class="top_item-text hflex acenter jbetween">
+                    <div>联系我们</div>
+                    <img src="@/assets/images/common/arrow-right.png" alt="" />
+                </div>
+                <div class="top_item-text2">Contact Us</div>
+            </div>
+        </div>
+        <div class="footer_bottom hflex acenter jbetween">
+            <div class="point">{{ footer.banquan }}</div>
+            <div class="hflex acenter point">
+                <img src="@/assets/images/common/tele.png" class="tele_icon" />
+                <div>{{ footer.tele }}</div>
+            </div>
+            <div class="hflex acenter point">
+                <img src="@/assets/images/common/addr.png" alt="" class="addr_icon" />
+                <div>{{ footer.addr }}</div>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
     var that = ""
     export default {
         data() {
             return {
-
+                footer: {
+                    banquan: '@2023 某某集团所拥有 201314687123',
+                    tele: '18569473721',
+                    addr: 'XX省XX市XX路XX交汇具体地点'
+                }
             }
         },
         created() {
-
+            that = this
         },
         methods: {
-            
+            toDetail(index) {
+                console.log(index)
+                var url = ''
+                switch(index) {
+                    case 1:
+                        url= './trade'
+                        break;
+                    case 2:
+                        url= './about'
+                        break;
+                    case 3:
+                        url= './contact'
+                        break;
+                }
+                console.log(url)
+                that.$router.push(url)
+                
+            }
         }
     }
     
 </script>
 <style scoped>
+@media screen and (max-width: 750px) {
+    .footer .footer_bottom {
+        flex-direction: column !important;
+        align-items: start;
+    }
+}
+.footer {
+    width: 100%;
+    /* height: 400px; */
+    background: #191818;
+    box-sizing: border-box;
+    padding: 120px 202px;
+    /* position: absolute; */
+    bottom: 0;
+}
+.footer .footer_top {
+    width: 100%;
+    padding-bottom: 59px;
+    border-bottom: 1px solid #fff;
+}
+.footer .footer_top .top_item {
+    width: 400px;
+    padding: 59px 0 0;
+    border-top: 4px solid #fff;
+    color: #FEFEFE;
+
+}
+.footer .footer_top .top_item .top_item-text {
+    font-size: 70px;
+    font-weight: 400;
+}
+.footer .footer_top .top_item:hover {
+    color: #666;
+}
+.footer .footer_top .top_item .top_item-text2 {
+    font-size: 40px;
+    font-weight: 400;
+    /* color: #FEFEFE; */
+    padding-top: 18px;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+}
+
+.footer .footer_top .top_item .top_item-text img {
+    width: 58px;
+    height: 58px;
+}
+.footer .footer_top .top_item:hover .top_item-text img {
+    animation: tran 0.2s linear;
+    animation-iteration-count: 1
+}
+@keyframes tran {
+    0% {
+        transform: translate3d(-20px, 0 ,0);
+        opacity: 0;
+    }
+    
+    100% {
+        transform: translate(0 ,0);
+        opacity: 1;
+    }
+ }
+.footer .footer_bottom {
+    width: 100%;
+    font-size: 24px;
+    font-weight: 400;
+    margin: 49px 0 0;
+}
+.footer .footer_bottom div {
+    color: #FEFEFE;
+
+}
+.footer .footer_bottom div:hover {
+    color: #666;
+}
+.footer .footer_bottom .tele_icon {
+    width: 32px;
+    margin-right: 23px;
+    height: 30px;
+}
+.footer .footer_bottom .addr_icon {
+    width: 28px;
+    height: 38px;
+    margin-right: 23px;
+
+}
 
 </style>

xinxuan/src/components/header.vue

@@ -1,10 +1,19 @@
 <template>
-    <div>
+    <div class="headers">
         <div class="js_snap js_intro is_top is_started" data-snap-needs-cancel="" data-enable-bit-scroll="" data-top="">
-            <header id="header">
-                <div class="inner inner_line">
-
-                    <div class="btn menu fixed"> 
+            <div id="header">
+                <div class="inner">
+                    <div class="hflex acent jbetween">
+                        <div class="header_home point" @click="toDetail(0)">绿巍仿真植物有限公司</div>
+                        <div class="hflex acent" style="margin-right: 150px">
+                            <div class="headers_text point" @click="toDetail(2)">新闻资讯</div>
+                            <div class="headers_text point" @click="toDetail(1)">产品服务</div>
+                            <div class="headers_text point" @click="toDetail(3)">跨境贸易</div>
+                            <div class="headers_text point" @click="toDetail(4)">关于我们</div>
+                            <div class="headers_text point" @click="toDetail(5)">联系我们</div>
+                        </div>      
+                    </div>
+                    <div class="btn menu absolutes"> 
                         <button class="fit" @mouseover="mouseOver()" @mouseleave="mouseLeave()" :class="over?'over':''" @click="toshow()">
                             <ul class="absolute full__w" v-if="!show" style="left: 0">
                                 <li class="absolute" :class="over?'absolute1':''"></li>
@@ -18,7 +27,9 @@
                             </ul>
                         </button>
                     </div>
+                    <div class="inner_line"></div>
                 </div>
+
                 <!-- 点击弹出的黑框 -->
                 <div id="floating_menu" ref="floating_menu">
                     <div class="inner">
@@ -49,7 +60,7 @@
                         </div>
                     </div>
                 </div>
-            </header>
+            </div>
            
             
         </div>
@@ -66,7 +77,7 @@
             }
         },
         created() {
-
+            that = this
         },
         methods: {
             toshow() {
@@ -88,7 +99,9 @@
                 console.log('chu');
             },
             toDetail(index) {
-                if(index == '1') {
+                if(index == '0') {
+                    that.$router.push('./index')
+                }else if(index == '1') {
                     that.$router.push('/product')
                 } else if(index == '2') {
                     that.$router.push('/news')
@@ -109,9 +122,51 @@
 @import '../assets/css/top.css';
 @import '../assets/css/index.css';
 
+.headers {
+    position: absolute;
+    top: 83px;
+    width: 100%;
+}
+.headers .header_home {
+    font-size: 38px;
+    font-weight: 600;
+    color: #FFFFFF;
+    white-space: nowrap;
+
+}
+.headers .header_home:hover {
+    color: #666;
+
+}
+.headers .headers_text:hover {
+    color: #666;
+
+}
+
+.headers .headers_text {
+    font-size: 28px;
+    font-weight: 600;
+    color: #FFFFFF;
+    padding: 0 25px;
+    white-space: nowrap;
+}
+@media screen and (max-width: 750px) {
+    .headers .headers_text {
+        display: none;
+    }
+    .absolutes {
+        position: absolute;
+        top: 20px !important;
+    }
+}
 .inner_line {
+    margin-top: 33px;
     width: 100%;
-    padding-bottom: 33px;
-    border-bottom: 4px solid #fff;
+    height: 4px;
+    background: #FFFFFF;
+}
+.absolutes {
+    position: absolute;
+    top: -20px !important;
 }
 </style>

xinxuan/src/route/index.js

@@ -37,10 +37,22 @@ const routes = [
         path: "/trade",
         name: 'Trade',
         component: resolve => require(['@/view/trade'],resolve)
+    },
+    {
+        path: "/detail",
+        name: 'Detail',
+        component: resolve => require(['@/view/detail'],resolve)
     }
 ]
+
 const router = new VueRouter({
   // 这里配置的是路由和组件的映射关系, 是一个数组.
   routes
 })
+router.beforeEach((to, from, next) => {
+    document.body.scrollTop = 0
+    // firefox
+    document.documentElement.scrollTop = 0
+    next()
+  })
 export default router

xinxuan/src/utils/config.js

@@ -0,0 +1,81 @@
+import axios from 'axios'
+import Vue from 'vue'
+import router from '../router/index'
+// axios.defaults.timeout = 5000;                        //响应时间
+/**
+ * @description 函数返回唯一的请求key **/
+function getRequestKey(config) {
+    let {
+        method,
+        url,
+        params,
+        data
+    } = config;
+    // axios中取消请求及阻止重复请求的方法
+    // 参数相同时阻止重复请求：
+    return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");
+    // 请求方法相同，参数不同时阻止重复请求
+    // return [method, url].join("&");
+}
+
+/**
+ * @description 添加请求信息 **/
+let pendingRequest = new Map();
+
+function addPendingRequest(config) {
+    // console.log(config.url)
+    let requestKey = getRequestKey(config);
+    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
+        if (!pendingRequest.has(requestKey)) {
+            pendingRequest.set(requestKey, cancel);
+        }
+    });
+}
+
+/**
+ * @description 取消重复请求 **/
+function removePendingRequest(config) {
+    let requestKey = getRequestKey(config);
+    if (pendingRequest.has(requestKey)) {
+        // 如果是重复的请求，则执行对应的cancel函数
+        let cancel = pendingRequest.get(requestKey);
+        cancel(requestKey);
+        // 将前一次重复的请求移除
+        pendingRequest.delete(requestKey);
+    }
+}
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+axios.interceptors.request.use(
+  (config) => {
+    if (localStorage.getItem('jx-token')) {
+      config.headers['Authorization'] = localStorage.getItem('jx-token')
+    }
+      // // 检查是否存在重复请求，若存在则取消已发的请求
+      // removePendingRequest(config);
+      // // 把当前请求信息添加到pendingRequest对象中
+      // addPendingRequest(config);
+    return config
+  },
+  (err) => {
+    window.console.log('请求超时')
+    return Promise.resolve(err)
+  }
+)
+// 统一的错误参数处理
+axios.interceptors.response.use(
+  (data) => {
+    if(data.data.is_login==0){
+      Vue.prototype.$message.error("账号已被禁用")
+      localStorage.removeItem('jx-token')
+      localStorage.removeItem('jx-userinfo')
+      localStorage.removeItem('jx-router')
+      router.push('/login')
+      window.location.reload()
+    }
+    return data
+  },
+  (error) => {
+    window.console.log(error)
+  }
+)
+export default axios

xinxuan/src/utils/http.js

@@ -0,0 +1,3 @@
+const baseUrl = '' //测试环境
+// const baseUrl = '' //正式环境
+export { baseUrl }

xinxuan/src/view/about.vue

@@ -1,29 +1,186 @@
 <template>
     <div>
-        <h3>关于我们</h3>
-        <h1 @click="toHome">返回首页</h1>
+        <Header></Header>
+        <div class="top">
+            <div class="videoContainer">
+                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                    <source :src="pageData.video" type="video/mp4" />
+                </video>
+            </div>    
+            <div class="title">关于我们</div>  
+            <div class="title">About us</div>  
+            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="line"></div> 
+        </div>
+        <div class="center hflex">
+            <div class="list hflex" id="scroll"  :style="'--div_width:' + div_width + ';' ">
+                <div class="item" v-for="(item,index) in pageData.list">
+                    <el-image fit="cover" :src="item.img" alt="" class="item_img" />
+                    <div class="item_text">{{ item.content }}</div>
+                </div>
+                <div class="item" v-for="(item,index) in pageData.list" :key="index">
+                    <el-image fit="cover" :src="item.img" alt="" class="item_img" />
+                    <div class="item_text">{{ item.content }}</div>
+                </div>
+            </div>
+        </div>
+        <Footer></Footer>
+
     </div>
 </template>
 <script>
+import Header from '@/components/header.vue'
+import Footer from '@/components/footer.vue'
 var that = ''
 export default {
     name: 'About',
+    components: {
+        Header,
+        Footer
+    },
     data() {
         return {
-
+            pageData: {
+                // title: '构建',
+                subTitle: `<p>我们是一家专门从事体育场地</p><p>工程设计、施工生产和铺装为一体的</p><p>专业公司</p></br><p>仿真草坪</p>`,
+                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+                list: [
+                    {
+                        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
+                    },
+                    {
+                        img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+                        content: '国际世界语教育电影节由国际世界语教师协会主办促进世界语在微电影等可视化',
+                    },
+                    {
+                        img: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+                        content: '旨在鼓励和促进世界语在微电影等可视化节目中的发展',
+                    },
+                    {
+                        img: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+                        content: '国际世界语教育电影节由国际世界语教师协会主办节目',
+                    },
+                    {
+                        img: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
+                    },
+                    {
+                        img: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
+                    },
+                    {
+                        img: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+                        content: '鼓励和促进世界语在微电影等可视化节目中的发展',
+                    }
+                ]
+            },
+            div_width: 0
         }
     },
-    onload() {
+    created() {
         that = this
     },
+    mounted() {
+        that.getWidth()
+    },
     methods: {
-        toHome() {
-            that = this
-            that.$router.push('/index')
+        getWidth() {
+            var data = document.getElementById("scroll").offsetWidth;
+            // var clientWidth = document.body.clientWidth
+            data = data / 2
+            console.log(data);
+            that.div_width = '-' +data + 'px'
         }
     }
 }
 </script>
 <style scoped> 
+:root {
+    --div_width: 0
+}
+.top {
+    box-sizing: border-box;
+    padding: 500px 100px 0;
+    min-height: 100vh;
+}
+.top .title {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+}
+.top .subTitle {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+    line-height: 90px;
+    padding-top: 79px;
+}
+.top .line {
+    width: 1720px;
+    height: 4px;
+    background: #FFFFFF;
+    margin: 58px 0;
+}
+.center {
+    width: 100%;
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: 200px 100px 159px;
+    background: #fff;
+    overflow: hidden;
+    position: relative;
+
+}
+@media screen and (max-width: 750px) {
+    .top {
+        padding-top: 60vh;
+
+    }
+    .center {
+        min-height: 1370px;
+    }
+}
+.center .list {
+    /* width: 100%; */
+    list-style:none;
+    position: absolute;
+    top: 200px;
+    left: 0;
+    /* overflow-x: hidden; */
+    /* left: 0px; */
+    animation: move 60s infinite linear;
+}
+@keyframes move {
+    from {
+        transform: translate(0,0);
+    }
+    to {
+        transform: translate(var(--div_width),0);
+    }
+}
+.center .list .item {
+    width: 395px;
+    margin-right: 47px;
+}
+.center .list .item .item_img {
+    width: 395px;
+    height: 570px;
+}
+.center .list:hover {
+    animation-play-state:paused;
 
+}
+.center .list .item .item_img:hover {
+    transfORM: scale(1.1);
+}
+.center .list .item .item_text {
+    padding-top: 36px;
+    font-size: 38px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 52px;
+}
 </style>

xinxuan/src/view/contact.vue

@@ -1,33 +1,110 @@
 <template>
     <div>
-        <header></header>
-        <h1 @click="toHome">返回首页</h1>
+        <Header></Header>
+        <div class="top">
+            <div class="videoContainer">
+                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                    <source :src="pageData.video" type="video/mp4" />
+                </video>
+            </div>    
+            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="line"></div> 
+        </div>
+        <Footer></Footer>
+
     </div>
 </template>
 <script>
-import header from '@/components/header.vue'
+import Header from '@/components/header.vue'
+import Footer from '@/components/footer.vue'
 var that = ''
 export default {
     name: 'Contact',
     components: {
-        header
+        Header,
+        Footer
     },
     data() {
         return {
-
+            background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+            pageData: {
+                // title: '构建',
+                subTitle: `<p>构建绿色和谐美丽环境</p><p>你我携手共进</p></br><p>绿色前行</p></br><p>电话： 18659373212</p><p>传真： 0269-22519</p><p>地址： XXXXXXXXXXXXXXXXXX地区19号楼306室</p>`,
+                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+            },
         }
     },
-    onload() {
+    created() {
         that = this
     },
+    mounted() {
+      this.getVideoStyle()
+    },
     methods: {
-        toHome() {
-            that = this
-            that.$router.push('/index')
-        }
+        
+         //监听屏幕大小实时给播放器设置宽高
+         getVideoStyle() {
+            window.onresize = () => {
+            const windowWidth = document.body.clientWidth
+            const windowHeight = document.body.clientHeight
+            const windowAspectRatio = windowHeight / windowWidth
+            console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
+            let videoWidth
+            let videoHeight
+            if (windowAspectRatio < 0.5625) {
+                videoWidth = windowWidth
+                videoHeight = videoWidth * 0.5625
+                this.fixStyle = {
+                    height: windowWidth * 0.5625 + 'px',
+                    width: windowWidth + 'px',
+                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
+                    'margin-left': 'initial'
+                }
+            } else {
+                videoHeight = windowHeight
+                videoWidth = videoHeight / 0.5625
+                this.fixStyle = {
+                    height: windowHeight + 'px',
+                    width: windowHeight / 0.5625 + 'px',
+                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
+                    'margin-bottom': 'initial'
+                }
+            }
+            }
+            window.onresize()
+        },
     }
 }
 </script>
 <style scoped> 
-
+@media (max-width: 750px) {
+    .top {
+        padding: 60vh 151px 200px !important;
+    }
+}
+.top {
+    box-sizing: border-box;
+    padding: 500px 100px 0;
+    min-height: 100vh;
+}
+.top .title {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-bottom: 200px;
+    padding-left: 151px;
+}
+.top .subTitle {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+    line-height: 90px;
+}
+.top .line {
+    width: 1720px;
+    height: 4px;
+    background: #FFFFFF;
+    margin: 58px 0;
+}
 </style>

xinxuan/src/view/detail.vue

@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <Header></Header>
+        <div class="content">
+            <div class="title">{{ pageData.title }}</div>
+            <div class="date">发布时间：{{ pageData.create_at }}</div>
+            <div v-html="pageData.content"></div>
+            <div class="list">
+                <div class="title">返回列表</div>
+                <div class="item" v-for="(item,indexs) in pageData.list" :key="indexs">
+                    <div class="item_text">{{ indexs + index }}.{{ item.name }}</div>
+                </div>
+            </div>
+        </div>
+        <Footer></Footer>
+    </div>
+</template>
+<script>
+import Header from '@/components/header.vue'
+import Footer from '@/components/footer.vue'
+var that = ''
+export default {
+    name: 'Detail',
+    components: {
+        Header,
+        Footer
+    },
+    data() {
+        return {
+            id: '',
+            index: 1,
+            pageData: {
+                title: '办公室设计中应注意的几个问题，办公室装修中应注意的几个问题',
+                create_at: '2019-12-05',
+                content: `<p>用户在设计办公室时应该注意什么</p>`,
+                list: [
+                    {
+                        name: '第二篇新闻'
+                    },
+                    {
+                        name: '第三篇新闻'
+                    },
+                    {
+                        name: '第四篇新闻'
+                    }
+                ]
+            }
+        }
+    },
+    created() {
+        that = this
+        this.id = this.$route.query.id
+        that.index = Number(that.$route.query.index) + 1
+        console.log('id=',this.id);
+        console.log('index=',this.index);
+
+    },
+    methods: {
+       
+    }
+}
+</script>
+<style scoped> 
+.content {
+    background: #fff;
+    box-sizing: border-box;
+    padding: 267px 216px 120px;
+    min-height: 100vh;
+}
+.content .title {
+    font-size: 56px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 92px;
+}
+.content .date {
+    font-size: 24px;
+    font-weight: 400;
+    color: #666666;
+    padding: 61px 0 109px;
+}
+.content .list {
+    margin-top: 120px;
+    padding: 42px 0 0;
+    border-top: 2px solid #ddd;
+}
+.content .list .title {
+    font-size: 36px;
+    font-weight: 400;
+    color: #4294F7;
+    line-height: 55px;
+    position: relative;
+}
+.content .list .title::before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: 176px;
+    width: 3px;
+    height: 35px;
+    background: #4294F7;
+}
+.content .list .item {
+    font-size: 24px;
+    font-weight: 400;
+    color: #666666;
+    line-height: 55px;
+    padding: 26px 0 0;
+}
+.content .list .item:hover {
+    color: #4294F7;
+}
+/deep/ #header .inner .header_home {
+    color: #333 !important;
+}
+/deep/ #header .inner .headers_text {
+    color: #333 !important;
+}
+/deep/ #header .inner .header_home:hover {
+    color: #666 !important;
+}
+/deep/ #header .inner .headers_text:hover {
+    color: #666 !important;
+}
+/deep/ #header .inner .btn.menu button ul li {
+    background: #333 !important;
+}
+/deep/ .inner_line {
+    background: #ccc !important;
+}
+</style>

xinxuan/src/view/index.vue

@@ -53,24 +53,25 @@
             
         </div>
         <div class="shua" :class="show_white?'shua_js':''"></div>
-        <div class="icon_down vflex acenter jbetween" v-show="scroll_top > 200">
-            <img src="@/assets/images/common/icon-down-1.png" alt="">
-            <img src="@/assets/images/common/icon-down-2.png" alt="">
-        </div>
+        
         <section class="one">
             <div class="videoContainer">
                 <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                     <source :src="background" type="video/mp4" />
                 </video>
+                
+            </div>
+            <div class="subTitle">
+                <h2 v-html="pageData.subTitle"></h2>
             </div>
             <div class="title">
                 <div v-show="scroll_top == 0">
                     <h1 :style="show_white?'color: #fff':''">{{pageData.title}}</h1>
-                    <div class="line" :style="show_white?'background: #fff':''"></div>
+                    <div class="line" :style="show_white?'background: rgba(255,255,255,.5)':''"></div>
                     <div class="hflex jbetween" v-show="show_white">
                         <div class="text point">{{pageData.date}}</div>
                         <div class="hflex point" @click="scorll_down(800)">
-                            <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="">
+                            <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
                             <div class="text">向下滑动</div>
                         </div>
                     </div>
@@ -78,26 +79,57 @@
                 <div class="content" v-html="pageData.content"></div>
 
             </div>
-            <div class="subTitle">
-                <h2 v-html="pageData.subTitle"></h2>
+            <div class="icon_down vflex acenter jbetween" v-show="scroll_top > 200 && scroll_top < 1500" @click="scorll_down2(-1)">
+                <img src="@/assets/images/common/icon-down-1.png" alt="" />
+                <img src="@/assets/images/common/icon-down-2.png" alt="" />
             </div>
 
         </section>
-        <section class="two">
-            <div class="videoContainer">
-                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
-                    <source :src="background" type="video/mp4" />
-                </video>
+        <div v-for="(item,index) in pageData.list" :key="index" class="two">
+            <div class="video_bg" :id="'video' + index">
+                <video :src="item.background" muted autoplay loop playsinline preload="metadata" crossorigin="anymous"></video>
+                <div class="content hflex jbetween">
+                    <div class="content_left">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="wenan" v-html="item.text"></div>
+                    </div>
+                    <div class="content_right vflex acenter jend">
+                        <div class="vflex acenter">
+                            <div v-for="(items,indexs) in pageData.list.length" :key="indexs">
+                                <div class="circle point" :class="index == indexs?'circle_active':''" @click="jump(indexs)"></div>
+                            </div>
+                            <div class="icon_down2 point vflex acenter jbetween" @click="scorll_down2(index + 1)">
+                                <img src="@/assets/images/common/icon-down-1.png" alt="" />
+                                <img src="@/assets/images/common/icon-down-2.png" alt="" />
+                            </div>
+                        </div>
+                        <div class="right_index">
+                            <span class="indexs">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</span>
+                            <span>/{{ pageData.list.length < 10 ? '0' + pageData.list.length : pageData.list.length }}</span>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div style="height:100vh"></div>
-        </section>
+           
+        </div>
+        <div class="three">
+            <div class="video_bg">
+                <video id="videos" :src="pageData.background" muted autoplay loop playsinline preload="metadata" crossorigin="anymous"></video>
+            </div>
+            <div class="three_text" v-html="pageData.text"></div> 
+        </div>
+        <Footer></Footer>   
     </div>
 </template>
 <script>
 import { getSlider } from '@/utils/common'
+import Footer from '@/components/footer.vue'
 var that = ''
 export default {
     name: 'index',
+    components: {
+        Footer
+    },
     data() {
         return {
             show: false,
@@ -109,15 +141,41 @@ export default {
                 subTitle: '<p>加密仿真草坪	</p><br><p>加密仿真草坪环保易用	</p>',
                 date: '2023.01.01',
                 content: `<p>注塑仿真草坪和编织仿真草坪</p><br><p>注塑仿真草坪采用注塑工艺	</p><p>编织草坪以仿草叶状的合成纤维。</p>`,
-                background: require('../assets/images/common/snsdyvideodownload.mp4'),
+                background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
                 list: [
                     {
-                        background: require('../assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4')
+                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
+                        name: '加密仿真草坪	',
+                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
+                    },
+                    {
+                        background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+                        name: '加密仿真草坪	',
+                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
+                    },
+                    {
+                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
+                        name: '加密仿真草坪	',
+                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
+                    },
+                    {
+                        background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+                        name: '加密仿真草坪	',
+                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
+                    },
+                    {
+                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
+                        name: '加密仿真草坪	',
+                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
                     }
-                ]
+                ],
+                text: `<p>加密仿真草坪</p><p>防火阻燃，为生活增添一份色彩</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪采用注塑工艺</p><p>编织草坪以仿草叶状的合成纤维</p>`
             },
-            background: '',
+            background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
             scroll_top: 0,
+            windowWidth: 0,
+            windowHeight: 0,
+            index: -1
         }
     },
     created() {
@@ -135,7 +193,6 @@ export default {
             that.background = that.pageData.background
             setTimeout(() => {
                 this.show_white = true
-                console.log(this.show_white);
             }, 1000);
 
         },
@@ -156,28 +213,28 @@ export default {
         //监听屏幕大小实时给播放器设置宽高
         getVideoStyle() {
             window.onresize = () => {
-            const windowWidth = document.body.clientWidth
-            const windowHeight = document.body.clientHeight
-            const windowAspectRatio = windowHeight / windowWidth
-            console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
+            that.windowWidth = document.body.clientWidth
+            that.windowHeight = document.body.clientHeight
+            const windowAspectRatio = that.windowHeight / that.windowWidth
+            // console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
             let videoWidth
             let videoHeight
             if (windowAspectRatio < 0.5625) {
-                videoWidth = windowWidth
+                videoWidth = that.windowWidth
                 videoHeight = videoWidth * 0.5625
                 this.fixStyle = {
-                    height: windowWidth * 0.5625 + 'px',
-                    width: windowWidth + 'px',
-                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
+                    height: that.windowWidth * 0.5625 + 'px',
+                    width: that.windowWidth + 'px',
+                    'margin-bottom': (that.windowHeight - videoHeight) / 2 + 'px',
                     'margin-left': 'initial'
                 }
             } else {
-                videoHeight = windowHeight
+                videoHeight = that.windowHeight
                 videoWidth = videoHeight / 0.5625
                 this.fixStyle = {
-                    height: windowHeight + 'px',
-                    width: windowHeight / 0.5625 + 'px',
-                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
+                    height: that.windowHeight + 'px',
+                    width: that.windowHeight / 0.5625 + 'px',
+                    'margin-left': (that.windowWidth - videoWidth) / 2 + 'px',
                     'margin-bottom': 'initial'
                 }
             }
@@ -196,11 +253,9 @@ export default {
         },
         mouseOver() {
             this.over = true
-            console.log('ru');
         },
         mouseLeave() {
             this.over = false
-            console.log('chu');
         },
         toDetail(index) {
             if(index == '1') {
@@ -217,15 +272,40 @@ export default {
         },
         handleScroll() {
             that = this
-            // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-            this.scroll_top = document.documentElement.scrollTop
-            console.log(this.scroll_top);
             
+            this.scroll_top = document.documentElement.scrollTop
+            const clientHeight = document.documentElement.clientHeight;
             
         },
         scorll_down(value) {
-            document.documentElement.scrollTop = value
-            this.scroll_top = this.scroll_top + value
+            console.log(value)
+            document.documentElement.scrollTop = this.scroll_top + value
+            this.scroll_top = document.documentElement.scrollTop
+        },
+        scorll_down2(index) {
+            console.log(that.index)
+            that.index = index
+            if(that.index == 5) {
+                document.querySelector('#videos').scrollIntoView({
+                    block: 'start',
+                    behavior: 'smooth'
+                })
+                return
+            }
+            if(that.index == -1) {
+                that.index = 0
+            }
+            document.querySelector('#video' + that.index).scrollIntoView({
+                block: 'start',
+                behavior: 'smooth'
+            })
+        },
+        jump(index) {
+            that.index = index
+            document.querySelector('#video' + that.index).scrollIntoView({
+                block: 'start',
+                behavior: 'smooth'
+            })
         }
     }
 }

xinxuan/src/view/news.vue

@@ -1,29 +1,239 @@
 <template>
     <div>
-        <h3>关于我们</h3>
-        <h1 @click="toHome">返回首页</h1>
+        <Header></Header>
+        <div class="top">
+            <div class="videoContainer">
+                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                    <source :src="pageData.video" type="video/mp4" />
+                </video>
+            </div>    
+            <div class="title">{{ pageData.title }}</div>  
+            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="line"></div> 
+        </div>
+        <div class="center hflex fwrap">
+            <div class="first">
+                <div class="title" v-html="pageData.news"></div>
+            </div>
+            <div class="item hflex acenter fwrap" v-for="(item,index) in pageData.list" :key="index" @click="toNews(index)">
+                <div class="hflex acenter jbetween" style="width: 100%">
+                    <div class="title">{{ item.name }}</div>
+                    <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
+                </div>
+                <div class="hflex aend jbetween" style="padding: 29px 0">
+                    <div class="text2">{{ item.contetn }}</div>
+                    <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
+                </div>
+                <div class="item_img" :style="{'background-image':'url(' + item.img + ')'}"></div>
+            </div>
+        </div>
+        <Footer></Footer>
+        
     </div>
 </template>
 <script>
+import Header from '@/components/header.vue'
+import Footer from '@/components/footer.vue'
 var that = ''
 export default {
     name: 'News',
+    components: {
+        Header,
+        Footer
+    },
     data() {
         return {
+            pageData: {
+                title: '小区内毁绿占道经营？相关部门出手了！',
+                subTitle: `<p>小区内毁绿占道经营</p><p>相关部门出手了！</p><p>小区内毁绿占道经营？相关部门出手了！</p>`,
+                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+                list: [
+                    {
+                        id: 1,
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    },
+                    {
+                        id: 2,
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+
+                    },
+                    {
+                        id: 3,
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
 
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                    }
+                ],
+                news: `<p>世界头条！</p><p>营造消费环境。</p></br><p>世界</p><p>最新的消费环境</p><p>消费头条！</p>`,
+            }
         }
     },
-    onload() {
+    created() {
         that = this
     },
     methods: {
-        toHome() {
-            that = this
-            that.$router.push('/index')
+        
+        toNews(index) {
+            that.$router.push({
+                path: '/detail',
+                query: {
+                    index: index,
+                    id: that.pageData.list[index].id
+                }
+            })
         }
     }
 }
 </script>
 <style scoped> 
-
+@media (max-width: 750px) {
+    .top .title {
+        padding: 60vh 151px 200px;
+    }
+    
+}
+.top {
+    box-sizing: border-box;
+    padding: 500px 100px 100px;
+    height: 100vh;
+}
+.top .title {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-bottom: 200px;
+    padding-left: 151px;
+}
+.top .subTitle {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+    line-height: 90px;
+}
+.top .line {
+    width: 1720px;
+    height: 4px;
+    background: #FFFFFF;
+    margin: 58px 0;
+}
+.center {
+    min-height: 100vh;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    margin: 150px 0 0;
+    padding: 150px 100px;
+}
+.center .first {
+    width: 700px;
+    padding-top: 125px;
+    border-top: 4px solid #ccc;
+    margin-right: 55px;
+}
+.center .first .title {
+    font-size: 80px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 80px;
+}
+.center .item {
+    padding-top: 125px;
+    width: 380px;
+    margin-left: 47px;
+    border-top: 4px solid #ccc;
+    margin-bottom: 100px;
+    color: #333333;
+}
+.center .item:hover {
+    color: #666;;
+}
+.center .item:hover .icon_right {
+    animation: tran 0.2s linear;
+    animation-iteration-count: 1
+}
+@keyframes tran {
+    0% {
+        transform: translate3d(-20px, 0 ,0);
+        opacity: 0;
+    }
+    
+    100% {
+        transform: translate(0 ,0);
+        opacity: 1;
+    }
+ }
+.center .item:nth-child(4n+4) {
+    margin-left: 0;
+}
+.center .item .title {
+    font-size: 38px;
+    font-weight: 500;
+    /* color: #333333; */
+}
+.center .item .text2 {
+    font-size: 38px;
+    font-weight: 500;
+    /* color: #333333; */
+    overflow:hidden; 
+    text-overflow:ellipsis;
+    /* white-space: nowrap; */
+    display:-webkit-box; 
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2; 
+    width: 100%;
+    line-height: 70px;
+}
+.center .item .item_left_index {
+    font-size: 38px;
+    font-weight: 500;
+    /* color: #333333; */
+}
+.center .item .icon_right {
+    width: 49px;
+    height: 41px;
+    margin-bottom: 20px;
+}
+.center .item .item_img {
+    width: 395px;
+    height: 570px;
+    display: inline-block;
+    vertical-align: top;
+    background-size: cover;
+    background-position: center center;
+}
 </style>

xinxuan/src/view/product.vue

@@ -1,29 +1,257 @@
 <template>
     <div>
-        <h3>关于我们</h3>
-        <h1 @click="toHome">返回首页</h1>
+        <Header></Header>
+        <div class="top">
+            <div class="videoContainer">
+                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                    <source :src="pageData.video" type="video/mp4" />
+                </video>
+            </div>    
+            <div class="title">{{ pageData.title }}</div>  
+            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="line"></div> 
+        </div>
+        <div class="center">
+            <div class="info">
+                <div class="info-h hflex acenter jbetween">
+                    <div class="info-text">
+                        <div v-html="pageData.info.title" style="margin-bottom: 99px;"></div>
+                        <div v-html="pageData.info.subTitle"></div>
+                    </div>
+                    <el-image fit="cover" :src="pageData.info.img" alt="" class="info-img" />
+                </div>
+                
+            </div>
+            <div class="list">
+                <div v-for="(item,index) in pageData.list" :key="index" class="hflex acenter jbetween">
+                    <div class="item_left vflex jcenter">
+                        <div class="item_left_top">Product Services</div>
+                        <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
+                    </div>
+                    <div class="item_right hflex acenter jbetween">
+                        <div class=" vflex jbetween">
+                            <div class="item_right_text">{{ item.name }}</div>
+                            <div class="item_right_text2">{{ item.contetn }}</div>
+                        </div>
+                        <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <!-- <video muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" :src="pageData.video"></video> -->
+            <el-image fit="cover" :src="pageData.img" alt="" class="img" />
+            <div class="bottom_content">
+                <div class="title">总结：</div>  
+                <div class="subTitle" v-html="pageData.subTitle"></div>  
+            </div>
+        </div>
+        <Footer></Footer>
+
     </div>
 </template>
 <script>
+import Header from '@/components/header.vue'
+import Footer from '@/components/footer.vue'
 var that = ''
 export default {
     name: 'Product',
+    components: {
+        Header,
+        Footer
+    },
     data() {
         return {
-
+            pageData: {
+                title: '仿真草坪按生产工艺',
+                subTitle: `<p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p>`,
+                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+                info: {
+                    title: `<p>注塑仿真草坪和编织仿真草坪</p>`,
+                    subTitle: `<p>注塑仿真草坪和编织仿真草坪</p>`,
+                    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                },
+                list: [
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    }
+                ],
+                img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+            },
+            num: 0
         }
     },
-    onload() {
+    created() {
         that = this
     },
     methods: {
-        toHome() {
-            that = this
-            that.$router.push('/index')
-        }
+        
     }
 }
 </script>
 <style scoped> 
+.top {
+    box-sizing: border-box;
+    padding: 500px 100px 0;
+    min-height: 100vh;
+}
 
+@media (max-width: 750px) {
+    .top .title {
+        padding: 60vh 151px 200px;
+    }
+}
+.top .title {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-bottom: 200px;
+    padding-left: 151px;
+}
+.top .subTitle {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+    line-height: 90px;
+}
+.top .line {
+    width: 1720px;
+    height: 4px;
+    background: #FFFFFF;
+    margin: 58px 0;
+}
+.center {
+    background: #fff;
+    box-sizing: border-box;
+    padding: 0 202px;
+    min-height: 100vh;
+}
+.info {
+    width: 100%;
+    padding: 150px 0 75px;
+    /* padding: 129px 0 0; */
+}
+.info-h {
+    padding: 129px 0 0;
+    border-top: 4px solid #ccc;
+}
+.info-h .info-text {
+    font-size: 80px;
+    font-weight: 500;
+    color: #333333;
+    margin-right: 38px;
+}
+.info-h .info-img {
+    width: 1058px;
+    height: 722px;
+}
+.list {
+    padding: 150px 0 34px;
+    width: 100%;
+}
+.list .item_left {
+    width: 450px;
+    height: 296px;
+    /* padding: 60px 0; */
+    border-top: 2px solid #191818;
+    /* border-bottom: 2px solid #191818; */
+}
+.list div:nth-last-child(1) .item_left {
+    border-bottom: 2px solid #191818;
+}
+.list .item_left .item_left_top {
+    font-size: 42px;
+    font-weight: 400;
+    color: #666666;
+}
+.list .item_left .item_left_index {
+    font-size: 140px;
+    font-weight: bold;
+    color: #333333;
+    /* padding-top: 40px; */
+}
+.list .item_right {
+    width: 992px;
+    height: 296px;
+
+    padding: 60px 0;
+    border-top: 2px solid #191818;
+}
+.list div:nth-last-child(1) .item_right {
+    border-bottom: 2px solid #191818;
+}
+.list .item_right .item_right_text,.item_right_text2 {
+    font-size: 36px;
+    font-weight: 500;
+    color: #333333;
+    max-width: 779px;
+    /* line-height: 48px; */
+}
+@media (max-width: 750px) {
+    .list .item_right .item_right_text2 {
+        overflow:hidden; 
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        /* display:-webkit-box;  */
+        /* -webkit-box-orient:vertical; */
+        /* -webkit-line-clamp:2;  */
+    }
+}
+.list .item_right .icon_right {
+    width: 129px;
+    height: 106px;
+}
+.list .item_right:hover .icon_right {
+    animation: tran 0.2s linear;
+    animation-iteration-count: 1
+}
+@keyframes tran {
+    0% {
+        transform: translate3d(-50px, 0 ,0);
+        opacity: 0;
+    }
+    
+    100% {
+        transform: translate(0 ,0);
+        opacity: 1;
+    }
+ }
+.bottom {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+}
+.bottom .img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.bottom .bottom_content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 98px 101px;
+}
+.bottom .bottom_content .title,.subTitle {
+    font-size: 60px;
+    font-weight: 600;
+    color: #fff;
+    line-height: 60px;
+}
+.bottom .bottom_content .title {
+    padding-bottom: 44px;
+}
 </style>

xinxuan/src/view/trade.vue

@@ -1,29 +1,236 @@
 <template>
     <div>
-        <h3>关于我们</h3>
-        <h1 @click="toHome">返回首页</h1>
+        <Header></Header>
+        <div class="top">
+            <div class="videoContainer">
+                <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
+                    <source :src="pageData.video" type="video/mp4" />
+                </video>
+            </div>    
+            <div class="title">{{ pageData.title }}</div>  
+            <div class="subTitle" v-html="pageData.subTitle"></div>  
+            <div class="line"></div> 
+        </div>
+        <div class="center">
+            <div class="info">
+                <div class="info-h hflex acenter jbetween">
+                    <div class="info-text">
+                        <div v-html="pageData.info.title" style="margin-bottom: 99px;"></div>
+                        <div v-html="pageData.info.subTitle"></div>
+                    </div>
+                    <div class="info-img">
+                        <el-image fit="cover" :src="pageData.info.img" alt="" >
+                        </el-image>
+                        <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
+                    </div>
+                </div>
+                
+            </div>
+            <div class="list">
+                <div class="line"></div>
+                <div  class="hflex acenter fwrap imgs">
+                    <div v-for="(item,index) in pageData.list" :key="index" class="list_item">
+                        <el-image fit="cover" :src="item.img" alt="" class="img" />
+                        <div class="text">{{ item.name }}</div>
+                    </div> 
+                </div>
+                
+            </div> 
+        </div>
+        <Footer></Footer>
+
     </div>
 </template>
 <script>
+import Header from '@/components/header.vue'
+import Footer from '@/components/footer.vue'
 var that = ''
 export default {
     name: 'Trade',
+    components: {
+        Header,
+        Footer
+    },
     data() {
         return {
+            pageData: {
+                title: '仿真草坪按生产工艺',
+                subTitle: `<p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪和编织仿真草坪</p>`,
+                video: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
+                info: {
+                    title: `<p>注塑仿真草坪和编织仿真草坪</p>`,
+                    subTitle: `<p>注塑仿真草坪和编织仿真草坪</p>`,
+                    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+                },
+                list: [
+                    {
+                        name: '绿色仿真草坪',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
 
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    },
+                    {
+                        name: '人造草坪',
+                        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                        contetn: '仿真草坪地毯人造人工草皮绿色户外装饰假草塑料垫子阳台幼儿园'
+                    }
+                ],
+                img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+            },
         }
     },
-    onload() {
+    created() {
         that = this
     },
     methods: {
-        toHome() {
-            that = this
-            that.$router.push('/index')
-        }
+        
     }
 }
 </script>
 <style scoped> 
+.top {
+    box-sizing: border-box;
+    padding: 500px 100px 0;
+    min-height: 100vh;
+}
+
+@media (max-width: 750px) {
+    .center {
+        min-height: 1370px !important;
+    }
+    .top .title {
+        padding: 60vh 151px 200px;
+    }
+    .center .list .list_item .text {
+        opacity: 1 !important;
+    }
+}
+.top .title {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-bottom: 200px;
+    padding-left: 151px;
+}
+.top .subTitle {
+    font-size: 60px;
+    font-weight: 500;
+    color: #fff;
+    padding-left: 151px;
+    line-height: 90px;
+}
+.top .line {
+    width: 1720px;
+    height: 4px;
+    background: #FFFFFF;
+    margin: 58px 0;
+}
+.center {
+    background: #fff;
+    box-sizing: border-box;
+    padding: 0 202px;
+    min-height: 100vh;
+}
+.info {
+    width: 100%;
+    padding: 150px 0 75px;
+    /* padding: 129px 0 0; */
+}
+.info-h {
+    padding: 129px 0 0;
+    border-top: 4px solid #ccc;
+}
+.info-h .info-text {
+    font-size: 80px;
+    font-weight: 500;
+    color: #333333;
+    margin-right: 38px;
+}
+.info-h .info-img {
+    width: 1058px;
+    height: 722px;
+    position: relative;
+}
+/deep/ .info-h .info-img .el-image {
+    width: 100%;
+    height: 100%;
+}
+.info-h .info-img .img_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.center .list {
+    width: 100%;
+    padding: 150px 0 75px;
+}
+.center .list .line {
+    width: 100%;
+    height: 4px;
+    background: #CCCCCC;
+}
+.center .list .imgs {
+    margin: 66px 0 80px;
+}
+.center .list .list_item {
+    width: 470px;
+    height: 376px;
+    background: #FFFFFF;
+    margin: 0 30px 28px 0;
+    position: relative;
+}
+.center .list .list_item .img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+
+}
+.center .list .list_item:nth-child(3n+3) {
+    margin: 0 0 28px;
+}
+.center .list .list_item .text {
+    width: 100%;
+    text-align: center;
+    max-width: 470px;
+    height: 128px;
+    line-height: 128px;
+    color: #fff;
+    background: rgba(0,0,0,.4);
+    opacity: 0;
+    border-radius: 0px 0px 10px 10px;
+    position: absolute;
+    bottom: 0;
+    transition-delay: 500ms;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+
+}
+.center .list .list_item:hover .text {
+    opacity: 1;
+}
 
 </style>