tangning 1 year ago
parent
commit
2b295e8410
66 changed files with 2070 additions and 34 deletions
  1. BIN
      public/img/chapterunit/chapter-bg.webp
  2. BIN
      public/img/map/map-cstydhg.webp
  3. BIN
      public/img/map/map-k.webp
  4. BIN
      public/img/map/map-kfb.webp
  5. BIN
      public/img/map/map-kffsjz.webp
  6. BIN
      public/img/map/map-qbyteh.webp
  7. BIN
      public/img/map/map-swczyp.webp
  8. BIN
      public/img/map/map-tdxryds.webp
  9. BIN
      public/img/map/map-tshdzb.webp
  10. BIN
      public/img/map/map-whlp.webp
  11. BIN
      public/img/map/map-yg.webp
  12. BIN
      public/img/map/map-yljbxd.webp
  13. BIN
      public/img/map/map-yr.webp
  14. BIN
      public/img/map/map-ysm.webp
  15. BIN
      public/img/map/map-yz.webp
  16. BIN
      public/img/map/map-yzl.webp
  17. BIN
      public/img/map/map-yzun.webp
  18. BIN
      public/img/webp/cstythg-1.webp
  19. BIN
      public/img/webp/ewm-wx.webp
  20. BIN
      public/img/webp/ewm-yrzh.webp
  21. BIN
      public/img/webp/ewm-yy.webp
  22. BIN
      public/img/webp/jue-1.webp
  23. BIN
      public/img/webp/kefubi-1.webp
  24. BIN
      public/img/webp/kefufushijiezong-1.webp
  25. BIN
      public/img/webp/qbyteh-1.webp
  26. BIN
      public/img/webp/tdxryds-1.webp
  27. BIN
      public/img/webp/tshdzb-1.webp
  28. BIN
      public/img/webp/wuhuanglianpei-1.webp
  29. BIN
      public/img/webp/yazhang-1.webp
  30. BIN
      public/img/webp/yljbdd-1.webp
  31. BIN
      public/img/webp/yuge-1.webp
  32. BIN
      public/img/webp/yuren-1.webp
  33. BIN
      public/img/webp/yushenmian-1.webp
  34. BIN
      public/img/webp/yuzhulong-1.webp
  35. BIN
      public/img/webp/yuzun-1.webp
  36. BIN
      public/img/webp/yuzupei-1.webp
  37. 976 0
      src/assets/style/index.css
  38. 59 0
      src/components/pages/unit.vue
  39. 19 0
      src/pages/section.vue
  40. 2 1
      src/pages/section1.vue
  41. 43 0
      src/pages/section10.vue
  42. 47 0
      src/pages/section11.vue
  43. 40 0
      src/pages/section12.vue
  44. 45 0
      src/pages/section13.vue
  45. 31 0
      src/pages/section14.vue
  46. 31 0
      src/pages/section15.vue
  47. 42 0
      src/pages/section16.vue
  48. 42 0
      src/pages/section17.vue
  49. 43 0
      src/pages/section18.vue
  50. 31 0
      src/pages/section19.vue
  51. 2 1
      src/pages/section2.vue
  52. 52 0
      src/pages/section20.vue
  53. 48 0
      src/pages/section21.vue
  54. 40 0
      src/pages/section22.vue
  55. 34 0
      src/pages/section23.vue
  56. 31 0
      src/pages/section24.vue
  57. 37 0
      src/pages/section25.vue
  58. 54 31
      src/pages/section3.vue
  59. 72 0
      src/pages/section4.vue
  60. 73 0
      src/pages/section5.vue
  61. 41 0
      src/pages/section6.vue
  62. 31 0
      src/pages/section7.vue
  63. 45 0
      src/pages/section8.vue
  64. 43 0
      src/pages/section9.vue
  65. 4 1
      src/style.scss
  66. 12 0
      src/view/index.vue

BIN
public/img/chapterunit/chapter-bg.webp


BIN
public/img/map/map-cstydhg.webp


BIN
public/img/map/map-k.webp


BIN
public/img/map/map-kfb.webp


BIN
public/img/map/map-kffsjz.webp


BIN
public/img/map/map-qbyteh.webp


BIN
public/img/map/map-swczyp.webp


BIN
public/img/map/map-tdxryds.webp


BIN
public/img/map/map-tshdzb.webp


BIN
public/img/map/map-whlp.webp


BIN
public/img/map/map-yg.webp


BIN
public/img/map/map-yljbxd.webp


BIN
public/img/map/map-yr.webp


BIN
public/img/map/map-ysm.webp


BIN
public/img/map/map-yz.webp


BIN
public/img/map/map-yzl.webp


BIN
public/img/map/map-yzun.webp


BIN
public/img/webp/cstythg-1.webp


BIN
public/img/webp/ewm-wx.webp


BIN
public/img/webp/ewm-yrzh.webp


BIN
public/img/webp/ewm-yy.webp


BIN
public/img/webp/jue-1.webp


BIN
public/img/webp/kefubi-1.webp


BIN
public/img/webp/kefufushijiezong-1.webp


BIN
public/img/webp/qbyteh-1.webp


BIN
public/img/webp/tdxryds-1.webp


BIN
public/img/webp/tshdzb-1.webp


BIN
public/img/webp/wuhuanglianpei-1.webp


BIN
public/img/webp/yazhang-1.webp


BIN
public/img/webp/yljbdd-1.webp


BIN
public/img/webp/yuge-1.webp


BIN
public/img/webp/yuren-1.webp


BIN
public/img/webp/yushenmian-1.webp


BIN
public/img/webp/yuzhulong-1.webp


BIN
public/img/webp/yuzun-1.webp


BIN
public/img/webp/yuzupei-1.webp


+ 976 - 0
src/assets/style/index.css

@@ -0,0 +1,976 @@
+body {
+    overflow: hidden;
+  }
+  
+  .section.active .wwbox.fadeIn {
+    -webkit-animation-name: fadeIn !important;
+            animation-name: fadeIn !important;
+  }
+  .section.active .wwbox.fadeInUp {
+    -webkit-animation-name: activedown-upin !important;
+            animation-name: activedown-upin !important;
+  }
+  .section.active .wwbox.fadeInLeft {
+    -webkit-animation-name: activedown-leftin !important;
+            animation-name: activedown-leftin !important;
+  }
+  .section.active .wwbox.fadeInDown {
+    -webkit-animation-name: activeup-downin !important;
+            animation-name: activeup-downin !important;
+  }
+  .section.active .wsicon {
+    opacity: 1 !important;
+    -webkit-animation-name: rotate1 !important;
+            animation-name: rotate1 !important;
+    -webkit-animation-duration: 0.6s !important;
+            animation-duration: 0.6s !important;
+    -webkit-animation-delay: 0s !important;
+            animation-delay: 0s !important;
+  }
+  
+  .chapter.down .box > *,
+  .unit.down .box > *,
+  .wwfirst.down .box > *,
+  .wwsecond.down .box > *,
+  .section-erweima.down .box > * {
+    opacity: 1;
+    -webkit-animation: down-upout 1s ease-out 0.1s forwards;
+    animation: down-upout 1s ease-out 0.1s forwards;
+  }
+  .chapter.active .box > *, .chapter.active.up .box > *,
+  .unit.active .box > *,
+  .unit.active.up .box > *,
+  .wwfirst.active .box > *,
+  .wwfirst.active.up .box > *,
+  .wwsecond.active .box > *,
+  .wwsecond.active.up .box > *,
+  .section-erweima.active .box > *,
+  .section-erweima.active.up .box > * {
+    opacity: 0;
+    -webkit-animation: activedown-upin 1s ease-out 0.3s forwards;
+    animation: activedown-upin 1s ease-out 0.3s forwards;
+  }
+  .chapter.up .box > *,
+  .unit.up .box > *,
+  .wwfirst.up .box > *,
+  .wwsecond.up .box > *,
+  .section-erweima.up .box > * {
+    opacity: 1;
+    -webkit-animation: up-downout 1s ease-out 0.3s forwards;
+    animation: up-downout 1s ease-out 0.3s forwards;
+  }
+  .chapter.down .box > *:nth-child(1), .chapter.up .box > *:nth-child(1), .chapter.active .box > *:nth-child(1),
+  .unit.down .box > *:nth-child(1),
+  .unit.up .box > *:nth-child(1),
+  .unit.active .box > *:nth-child(1),
+  .wwfirst.down .box > *:nth-child(1),
+  .wwfirst.up .box > *:nth-child(1),
+  .wwfirst.active .box > *:nth-child(1),
+  .wwsecond.down .box > *:nth-child(1),
+  .wwsecond.up .box > *:nth-child(1),
+  .wwsecond.active .box > *:nth-child(1),
+  .section-erweima.down .box > *:nth-child(1),
+  .section-erweima.up .box > *:nth-child(1),
+  .section-erweima.active .box > *:nth-child(1) {
+    -webkit-animation-delay: 0.3s;
+            animation-delay: 0.3s;
+  }
+  .chapter.down .box > *:nth-child(2), .chapter.up .box > *:nth-child(2), .chapter.active .box > *:nth-child(2),
+  .unit.down .box > *:nth-child(2),
+  .unit.up .box > *:nth-child(2),
+  .unit.active .box > *:nth-child(2),
+  .wwfirst.down .box > *:nth-child(2),
+  .wwfirst.up .box > *:nth-child(2),
+  .wwfirst.active .box > *:nth-child(2),
+  .wwsecond.down .box > *:nth-child(2),
+  .wwsecond.up .box > *:nth-child(2),
+  .wwsecond.active .box > *:nth-child(2),
+  .section-erweima.down .box > *:nth-child(2),
+  .section-erweima.up .box > *:nth-child(2),
+  .section-erweima.active .box > *:nth-child(2) {
+    -webkit-animation-delay: 0.5s;
+            animation-delay: 0.5s;
+  }
+  .chapter.down .box > *:nth-child(3), .chapter.up .box > *:nth-child(3), .chapter.active .box > *:nth-child(3),
+  .unit.down .box > *:nth-child(3),
+  .unit.up .box > *:nth-child(3),
+  .unit.active .box > *:nth-child(3),
+  .wwfirst.down .box > *:nth-child(3),
+  .wwfirst.up .box > *:nth-child(3),
+  .wwfirst.active .box > *:nth-child(3),
+  .wwsecond.down .box > *:nth-child(3),
+  .wwsecond.up .box > *:nth-child(3),
+  .wwsecond.active .box > *:nth-child(3),
+  .section-erweima.down .box > *:nth-child(3),
+  .section-erweima.up .box > *:nth-child(3),
+  .section-erweima.active .box > *:nth-child(3) {
+    -webkit-animation-delay: 0.6s;
+            animation-delay: 0.6s;
+  }
+  .chapter.down .box > *:nth-child(4), .chapter.up .box > *:nth-child(4), .chapter.active .box > *:nth-child(4),
+  .unit.down .box > *:nth-child(4),
+  .unit.up .box > *:nth-child(4),
+  .unit.active .box > *:nth-child(4),
+  .wwfirst.down .box > *:nth-child(4),
+  .wwfirst.up .box > *:nth-child(4),
+  .wwfirst.active .box > *:nth-child(4),
+  .wwsecond.down .box > *:nth-child(4),
+  .wwsecond.up .box > *:nth-child(4),
+  .wwsecond.active .box > *:nth-child(4),
+  .section-erweima.down .box > *:nth-child(4),
+  .section-erweima.up .box > *:nth-child(4),
+  .section-erweima.active .box > *:nth-child(4) {
+    -webkit-animation-delay: 0.8s;
+            animation-delay: 0.8s;
+  }
+  
+  .wwfirst.active .box .wwintrobox > *, .wwfirst.active.up .box .wwintrobox > * {
+    opacity: 0;
+    -webkit-animation: activedown-upin 1s ease-out 0.3s forwards;
+    animation: activedown-upin 1s ease-out 0.3s forwards;
+  }
+  .wwfirst.active .box .wwinfobox, .wwfirst.active.up .box .wwinfobox {
+    -webkit-animation-name: activedown-leftin !important;
+    animation-name: activedown-leftin;
+  }
+  .wwfirst.active .box .wwtitle {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+  }
+  .wwfirst.active .box .wwintro1 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+  }
+  .wwfirst.active .box .wwintro2 {
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+  }
+  .wwfirst.active .box > *:nth-child(2) {
+    -webkit-animation-delay: 0.8s;
+    -webkit-animation-duration: 1.5s;
+    animation-delay: 0.8s;
+    animation-duration: 1.5s;
+  }
+  .wwfirst.active .box > *:nth-child(3) {
+    -webkit-animation-delay: 1.5s;
+    animation-delay: 1.5s;
+  }
+  .wwfirst.active .box > *:nth-child(4) {
+    -webkit-animation-delay: 1.7s;
+    animation-delay: 1.7s;
+  }
+  
+  .wwsecond.active .box .wwintrobox > *, .wwsecond.active.up .box .wwintrobox > * {
+    opacity: 0;
+    -webkit-animation: activedown-upin 1s ease-out 0.3s forwards;
+    animation: activedown-upin 1s ease-out 0.3s forwards;
+  }
+  .wwsecond.active .box > *:nth-child(2) {
+    -webkit-animation-delay: 0.5s;
+    -webkit-animation-duration: 1.5s;
+    animation-delay: 0.5s;
+    animation-duration: 1.5s;
+  }
+  .wwsecond.active .box .wwintro:nth-child(1) {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+  }
+  .wwsecond.active .box .wwintro:nth-child(2) {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+  }
+  
+  .wapbody .chapter-title {
+    font-family: "simsun";
+  }
+  
+  .chapter {
+    background-image: url(../img/webp/chapterunit/chapter-bg.webp);
+  }
+  .chapter .box {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding-top: 15vh;
+    margin: 0 var(--wall-margin-left2);
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .chapter-num {
+    color: #d09d68;
+    font-size: 2.5rem;
+    width: 1em;
+    line-height: 1;
+    margin-top: 0.5rem;
+    margin-right: 2rem;
+  }
+  .chapter-title {
+    color: #d09d68;
+    font-size: 7.5rem;
+    font-family: "syst-bold";
+    width: 1em;
+    line-height: 1;
+  }
+  .chapter-intro {
+    padding-top: 11vh;
+    margin-left: auto;
+    margin-right: calc(var(--wall-margin-left3) - var(--wall-margin-left2));
+    width: 31vw;
+    font-size: 1.75rem;
+    line-height: 1.7;
+  }
+  .chapter-intro p {
+    text-indent: 2em;
+    margin-bottom: 1.5rem;
+  }
+  
+  .wapbody .unit-title {
+    font-family: "simsun";
+  }
+  
+  .unit {
+    background-image: url(../img/webp/chapterunit/unit-bg.webp);
+  }
+  .unit .box {
+    padding-top: 15vh;
+    margin: 0 var(--wall-margin-left3);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column;
+            flex-flow: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .unit-num {
+    color: #d09d68;
+    padding: 0.5rem 1.5rem;
+    border: 1px solid #d09d68;
+    font-size: 1.125rem;
+    margin-bottom: 2rem;
+  }
+  .unit-title {
+    color: #d09d68;
+    font-family: "syst-bold";
+    font-size: 3rem;
+  }
+  .unit-intro {
+    font-size: 1.5rem;
+    line-height: 1.7;
+    padding-top: 11vh;
+  }
+  .unit-intro p {
+    text-indent: 2em;
+    margin-bottom: 1.5rem;
+  }
+  
+  #fullPage-nav.right {
+    left: auto !important;
+    right: 0.5rem;
+    width: 0.3rem;
+  }
+  
+  #fullPage-nav {
+    display: none;
+  }
+  #fullPage-nav li {
+    position: relative;
+    width: 0.3rem;
+    height: 0.3rem;
+    margin: 0.2rem 0;
+  }
+  #fullPage-nav li a.active span {
+    background: none;
+    background: url(../img/webp/navicon-active.webp) no-repeat center/contain;
+  }
+  #fullPage-nav li:after {
+    content: "";
+    position: absolute;
+    bottom: -0.2rem;
+    left: 50%;
+    width: 100%;
+    margin-left: -0.15rem;
+    height: 0.2rem;
+    background: url(../img/webp/nav-bg.webp) no-repeat center/auto 100%;
+  }
+  #fullPage-nav li:last-child:after {
+    display: none;
+  }
+  #fullPage-nav span {
+    border: 0;
+    background: url(../img/webp/navicon.webp) no-repeat center/contain;
+    width: 0.3rem;
+    height: 0.3rem;
+    top: 0;
+    left: 0;
+  }
+  
+  .section-erweima {
+    background-image: url(../img/webp/ewm-bg.webp);
+  }
+  .section-erweima .box {
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column;
+            flex-flow: column;
+  }
+  .section-erweima .logo {
+    z-index: 1;
+    width: 6rem;
+    height: 6.375rem;
+    margin-bottom: 1.5rem;
+    display: block;
+    background: url(../img/webp/section1/logo.webp) no-repeat center/cover;
+  }
+  .section-erweima .ewmlist {
+    margin-top: 8vh;
+    margin-bottom: 7vh;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .section-erweima .ewmlist li {
+    margin: 0 4.2vw;
+  }
+  .section-erweima .ewmlist img {
+    width: 14rem;
+  }
+  .section-erweima .ewmlist p {
+    text-align: center;
+    font-size: 1.25rem;
+    color: #cfc4ab;
+    margin-top: 1rem;
+  }
+  .section-erweima .btn {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    font-size: 1.875rem;
+    border: 1px solid #997946;
+    color: #997946;
+    padding: 0.8rem 2.2rem 0.9rem;
+    border-radius: 0.5rem;
+    line-height: 1;
+  }
+  .section-erweima .btn i {
+    margin-left: 1rem;
+    width: 1.625rem;
+    height: 1.625rem;
+    display: inline-block;
+    background: url(../img/webp/xnzt-btn.webp) no-repeat center/contain;
+  }
+  .section-erweima .infoicon {
+    margin-top: 7vh;
+    width: 2rem;
+    height: 2rem;
+    background: url(../img/infoicon.png) no-repeat center/contain;
+    cursor: pointer;
+  }
+  .section-erweima .curatorialinfo {
+    visibility: hidden;
+    opacity: 0;
+    margin-top: 1vh;
+    color: #997946;
+    font-size: 1rem;
+    line-height: 2.4;
+    text-align: center;
+    -webkit-transform: translateY(10%);
+            transform: translateY(10%);
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    -webkit-animation: none !important;
+            animation: none !important;
+  }
+  .section-erweima .curatorialinfo.active {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    visibility: visible;
+    opacity: 1;
+  }
+  
+  .yushenmian-1 .wsicon {
+    right: 48%;
+    bottom: 15%;
+  }
+  
+  .yuzupei-2 .wsicon {
+    right: 23%;
+    bottom: 11%;
+  }
+  
+  .yuzupei-3 .wsicon {
+    right: 41%;
+    bottom: 5%;
+  }
+  
+  .yuzupei-4 .wsicon {
+    right: 41%;
+    bottom: 18%;
+  }
+  
+  .wwmap {
+    position: absolute;
+    top: 5vh !important;
+    right: 5vw;
+    left: auto;
+    width: auto !important;
+    text-align: right;
+  }
+  .wwmap img {
+    width: 21.875rem !important;
+    height: auto;
+  }
+  
+  .wapbody .chapter .box {
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    padding-top: 10vh;
+  }
+  .wapbody .chapter-num {
+    font-size: 1.4rem;
+  }
+  .wapbody .chapter-title {
+    margin-right: 54vw;
+    font-size: 4rem;
+  }
+  .wapbody .chapter-intro {
+    padding-top: 8vh;
+    -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+    margin-right: 0;
+    font-size: 1.5rem;
+  }
+  .wapbody .unit-num {
+    font-size: 1.4rem;
+  }
+  .wapbody .unit-title {
+    font-size: 4rem;
+  }
+  .wapbody .unit-intro {
+    font-size: 1.5rem;
+    padding-top: 8vh;
+  }
+  .wapbody .kefubi-2 .wwintrobox {
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 2rem 2.5rem;
+  }
+  .wapbody .kefubi-2 .wwbox img {
+    height: 100%;
+    left: auto;
+    margin-left: 0;
+    right: 0;
+  }
+  .wapbody .kefufushijiezong-2 .wwbox img {
+    height: 100%;
+    right: -30%;
+  }
+  .wapbody .yazhang-2 .wwintrobox {
+    top: 18vh;
+  }
+  .wapbody .yuzupei-1 .wwintrobox.bottom {
+    width: 42%;
+    top: 24vh;
+  }
+  .wapbody .yuzupei-2 .wwintrobox.bottom,
+  .wapbody .yuzupei-3 .wwintrobox.bottom {
+    top: 10vh;
+  }
+  .wapbody .yuzupei-2 .wwbox img,
+  .wapbody .yuzupei-3 .wwbox img {
+    right: 50%;
+    -webkit-transform: translateX(50%) !important;
+            transform: translateX(50%) !important;
+    height: 40%;
+    bottom: 28%;
+    top: auto;
+  }
+  .wapbody .yuzupei-4 .wwbox img {
+    right: 50%;
+    -webkit-transform: translateX(50%) !important;
+            transform: translateX(50%) !important;
+    height: auto;
+    width: 100%;
+    bottom: 28%;
+    top: auto;
+  }
+  .wapbody .tdxryds-2 .wwbox img,
+  .wapbody .tdxryds-3 .wwbox img {
+    height: auto !important;
+    width: 99%;
+    bottom: 38%;
+    right: 0 !important;
+  }
+  .wapbody .tdxryds-2 .wwinfobox .wwinfo1,
+  .wapbody .tdxryds-3 .wwinfobox .wwinfo1 {
+    padding: 0 var(--wall-margin-left);
+  }
+  .wapbody .tdxryds-4 .wwbox img {
+    right: 7%;
+    bottom: 5%;
+  }
+  .wapbody .yuzun-2 .wwbox img {
+    right: 3%;
+    top: 36%;
+    height: auto;
+    width: 150%;
+  }
+  .wapbody .centerimg img {
+    height: auto !important;
+    width: 156% !important;
+    -webkit-transform: translateX(27vw);
+            transform: translateX(27vw);
+  }
+  .wapbody .centerimg2 img {
+    height: 40% !important;
+    width: auto !important;
+    right: 50% !important;
+    -webkit-transform: translateX(50%) !important;
+            transform: translateX(50%) !important;
+  }
+  .wapbody .qbyteh-1 .wwbox img {
+    left: -43%;
+  }
+  .wapbody .qbyteh-2 .wwbox img {
+    height: auto;
+    top: 51%;
+    right: 0;
+    width: 180%;
+  }
+  .wapbody .qbyteh-2 .wwintrobox {
+    top: 27vh;
+  }
+  .wapbody .qbyteh-3 .wwbox img {
+    height: auto;
+    width: 200%;
+    top: 0;
+    left: -51%;
+  }
+  .wapbody .qbyteh-3 .wwintrobox {
+    top: auto;
+    bottom: 12vh;
+  }
+  .wapbody .yushenmian-2 .wwintrobox {
+    height: auto;
+    top: 10vh;
+  }
+  .tshdzb-1 .wapbody > .box .wwbox img {
+    left: -54%;
+  }
+  .wapbody .tshdzb-2 .wwbox img {
+    width: 100%;
+    top: 20%;
+  }
+  .wapbody #videocont2-2 {
+    width: calc(100% - var(--wall-margin-left) * 2);
+  }
+  .wapbody #videocont2-2 .wwintro {
+    margin-bottom: 0.8rem;
+  }
+  .wapbody #videocont2-4 {
+    width: calc(100% - var(--wall-margin-left) * 2);
+    top: auto;
+    bottom: 4%;
+  }
+  .wapbody #videocont2-5 {
+    width: calc(100% - var(--wall-margin-left) * 2);
+    top: auto;
+    bottom: 4%;
+  }
+  .wapbody .section-erweima .ewmlist li {
+    margin: 0 2.2vw;
+  }
+  .wapbody .section-erweima .ewmlist img {
+    width: 10rem;
+  }
+  .wapbody .yushenmian-1 .wsicon {
+    right: calc(50% - 2rem);
+    left: auto;
+    bottom: 27%;
+  }
+  .wapbody .yuzupei-2 .wsicon {
+    left: auto;
+    right: calc(50% - 2rem);
+    bottom: 21%;
+  }
+  .wapbody .yuzupei-3 .wsicon {
+    left: auto;
+    right: calc(50% - 2rem);
+    bottom: 24%;
+  }
+  .wapbody .yuzupei-4 .wsicon {
+    left: auto;
+    right: calc(50% - 2rem);
+    bottom: 25%;
+  }
+  .wapbody .wwmap {
+    position: absolute;
+    top: 8vh !important;
+    right: 5vw;
+    left: auto;
+    width: auto !important;
+    text-align: right;
+  }
+  .wapbody .wwmap#videocont-map {
+    top: 11.5vh !important;
+  }
+  .wapbody .wwmap img {
+    width: 10rem !important;
+    height: auto;
+  }
+  .wapbody .kefufushijiezong-1 .wwmap,
+  .wapbody .tdxryds-1 .wwmap,
+  .wapbody .yljbdd-1 .wwmap,
+  .wapbody .cstythg-1 .wwmap,
+  .wapbody .qbyteh-1 .wwmap,
+  .wapbody .tshdzb-1 .wwmap {
+    top: calc(8vh + 5.5rem) !important;
+  }
+  .wapbody .nav {
+    top: 0.6rem;
+  }
+  .wapbody .nav li .title h3 {
+    font-size: 1.1rem;
+  }
+  .wapbody .nav li i:after {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+  .wapbody .nav li.active i:after {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .wapbody .dialogclose-btn {
+    right: 3vw;
+    top: 3.2rem;
+  }
+  .wapbody .dialogclose-btn.far-right {
+    right: 3vw;
+  }
+  .wapbody .dialogbtn.yzpdialog1 {
+    left: 64%;
+    bottom: 65%;
+  }
+  .wapbody .dialogbtn.yzpdialog2 {
+    left: 64%;
+    bottom: 45%;
+  }
+  .wapbody .dialogbtn.yzpdialog3 {
+    left: 64%;
+    bottom: 30%;
+  }
+  .wapbody .dialogbtn.ytehdialog1 {
+    bottom: 64%;
+    left: 42%;
+  }
+  .wapbody .dialogbtn.ytehdialog2 {
+    bottom: 36%;
+    left: 39%;
+  }
+  .wapbody .wwfirst > .box .wwbox.yuzun-1 img {
+    top: 26%;
+  }
+  
+  .wwsecond .wwbox.centerimg2 img {
+    right: -18vw;
+  }
+  
+  .dialogimgbg {
+    z-index: 2;
+  }
+  
+  .section-loading {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: url(../img/webp/ewm-bg.webp) no-repeat center/cover;
+    z-index: 999;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column;
+            flex-flow: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+  .section-loading p {
+    font-size: 1.4rem;
+    color: #d09d68;
+  }
+  .section-loading .icon {
+    width: 100%;
+    text-align: center;
+  }
+  .section-loading .icon img {
+    width: 2.5rem;
+  }
+  .section-loading .section1-wwbox {
+    position: relative;
+    height: min(44rem, 70vh);
+    margin: -4rem 0 -6rem;
+    text-align: center;
+    -webkit-transform: translate3d(0, -3%, 0);
+            transform: translate3d(0, -3%, 0);
+  }
+  .section-loading .section1-wwbox img {
+    z-index: 1;
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .section-loading .section1-wwbox .title2 {
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(../img/webp/section1/section1-title.webp) no-repeat center/contain;
+  }
+  
+  .wapbody .section-loading p {
+    width: 84vw;
+    text-align: center;
+    font-size: 1.4rem;
+    color: #d09d68;
+  }
+  .wapbody .section-loading .icon {
+    width: 84vw;
+    text-align: center;
+  }
+  .wapbody .section-loading .icon img {
+    width: 2.5rem;
+  }
+  .wapbody .section-loading .section1-wwbox {
+    height: 61vh;
+    margin: 4vh 7vw -6vh;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -ms-flex-line-pack: end;
+        align-content: flex-end;
+  }
+  .wapbody .section-loading .section1-wwbox .title2 {
+    background-position: top;
+    background-size: 80% auto;
+    background-image: url(../img/webp/wap/section1/section1-title.webp);
+  }
+  
+  .dialoghide {
+    display: none;
+    background-color: black;
+    position: relative;
+    z-index: 9;
+  }
+  
+  .dialogclose-btn {
+    position: absolute;
+    top: 1rem;
+    right: 3.6rem;
+    width: 3rem;
+    height: 3rem;
+    z-index: 9;
+    cursor: pointer;
+  }
+  .dialogclose-btn.far-right {
+    right: 22vw;
+  }
+  .dialogclose-btn .icon {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url(../img/close-btn.png) no-repeat center/cover;
+  }
+  
+  @-webkit-keyframes scale {
+    0% {
+      -webkit-transform: scale(0.4);
+              transform: scale(0.4);
+    }
+    50% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+    75% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+    78% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  
+  @keyframes scale {
+    0% {
+      -webkit-transform: scale(0.4);
+              transform: scale(0.4);
+    }
+    50% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+    75% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+    78% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  .dialogbtn {
+    position: absolute;
+    bottom: -3.4rem;
+    left: 0;
+    z-index: 3;
+    width: 3.4rem;
+    height: 3.4rem;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .dialogbtn::before, .dialogbtn::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3.4rem;
+    height: 3.4rem;
+    border-radius: 50%;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    -webkit-box-shadow: inset 0 0 8px 16px #d2c0ae;
+            box-shadow: inset 0 0 8px 16px #d2c0ae;
+    -webkit-animation: scale 3s infinite cubic-bezier(0, 0, 0.49, 1.02);
+            animation: scale 3s infinite cubic-bezier(0, 0, 0.49, 1.02);
+  }
+  .dialogbtn::after {
+    -webkit-animation-delay: 0.4s;
+            animation-delay: 0.4s;
+  }
+  .dialogbtn .point {
+    position: absolute;
+    top: 1.3rem;
+    left: 1.3rem;
+    width: 0.8rem;
+    height: 0.8rem;
+    border-radius: 50%;
+    background-color: #d09d68;
+  }
+  .dialogbtn .inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+  .dialogbtn.yzpdialog1 {
+    left: 57%;
+    bottom: 80%;
+  }
+  .dialogbtn.yzpdialog2 {
+    left: 57%;
+    bottom: 45%;
+  }
+  .dialogbtn.yzpdialog3 {
+    left: 58%;
+    bottom: 15%;
+  }
+  .dialogbtn.kfbdialog {
+    bottom: 70%;
+    left: 51%;
+  }
+  
+  .wapbody .dialogbtn-mid {
+    bottom: 45% !important;
+  }
+  .wapbody .dialogbtn-top {
+    bottom: 66% !important;
+  }
+  .wapbody .dialogbtn-right {
+    left: 81% !important;
+  }
+  .wapbody .dialogbtn.kfbdialog {
+    bottom: 60%;
+    left: 46%;
+  }
+  
+  .dialogbtn-mid {
+    left: calc(50% - 1.7rem);
+    bottom: 43%;
+  }
+  
+  .dialogbtn-top {
+    left: calc(50% - 1.7rem);
+    bottom: 77%;
+  }
+  
+  .dialogbtn-right {
+    left: 65%;
+    bottom: 42%;
+  }
+  
+  .ytehdialog1 {
+    bottom: 75%;
+    left: 62%;
+  }
+  
+  .ytehdialog2 {
+    bottom: 27%;
+    left: 62%;
+  }
+  
+  .pcbody #ypzdialog .wwbox {
+    left: 10%;
+  }
+  .pcbody #ypzdialog .wwintrobox.wwintrobox2 {
+    bottom: 32%;
+  }
+  
+  .shortintrobox {
+    width: calc(31% - var(--wall-margin-left));
+  }
+  
+  .pcbody #csydgdialog .wwbox {
+    left: 14%;
+  }
+  
+  .wapbody .cstythg-1.wwfirst > .box .wwbox {
+    left: 0;
+  }
+  
+  #csydgdialog .wwintrobox2 {
+    bottom: 33vh;
+  }

+ 59 - 0
src/components/pages/unit.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+      <div class="wwintrobox wwintrobox1">
+        <div class="wwtitle">{{props.title}}</div>
+        <div class="wwintro1">{{props.years}}</div>
+      </div>
+      <div class="wwmap hide">
+        <img :src="request(`/img/map/${props.img}.webp`)/img/map/${}.webp" alt="" />
+      </div>
+      <div class="wwbox fadeIn">
+        <img
+          :src="request(`/img/webp/${props.img}.webp`)"
+          alt=""
+          style="transform: translateY(-13.9579px) translateX(40.2477px)"
+        />
+      </div>
+      <div class="wwinfobox">
+        <div class="wwinfo">陕西省考古研究院藏</div>
+        <div class="wwinfo">
+          1991年陕西省长安区南里王村<br />贞观元年(627)窦皦墓出土
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script setup>
+// ts写法
+const props = withDefaults(defineProps<{
+    title?: string, // 是否必传
+    years?: string, // 是否必传
+    position?: string, // 是否必传
+    address?: string, // 是否必传
+    img?: string, // 是否必传
+    map?: string // 是否必传
+}>(), {
+    title:'玉梁金宝钿带',
+    years:'北朝至唐早期',
+    address:'陕西省考古研究院藏',
+    position:'1991年陕西省长安区南里王村',
+    map: 'map-yljbxd',
+    img: 'yljbdd-1',
+})
+</script>
+  
+  <style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>
+  

+ 19 - 0
src/pages/section.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="section">
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 2 - 1
src/pages/section1.vue

@@ -21,7 +21,8 @@
 
 <script setup></script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
 .section {
   position: relative;
 }

+ 43 - 0
src/pages/section10.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玉猪龙</div>
+            <div class="wwintro1">红山文化</div>
+            <div class="wwintro2">距今6400-5000年前</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="yzldialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec1/map-yzl.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn">
+            <img src="./img/webp/yuzhulong-1.webp" alt="" style="transform: translateY(-14.0489px) translateX(35.7064px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">辽宁考古博物馆藏</div>
+            <div class="wwinfo">宽7.8厘米,厚3.3厘米,高10.3厘米</div>
+            <div class="wwinfo">
+              1984年辽宁省朝阳市牛河梁遗址<br>第二地点一号冢4号墓出土
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 47 - 0
src/pages/section11.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">刻符璧</div>
+            <div class="wwintro1">良渚文化</div>
+            <div class="wwintro2">距今5300-4300年前</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="kfbjjdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec1/map-kfb.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn">
+            <img src="./img/webp/kefubi-1.webp" alt="" style="transform: translateY(-13.9422px) translateX(38.5963px);">
+            <div class="intro dialogbtn dialogintro kfbdialog">
+              <div class="point"></div>
+              <div class="inner" dataname="kfbdialog"></div>
+            </div>
+          </div>
+
+          <div class="wwinfobox bottom">
+            <div class="wwinfo">南京博物院藏</div>
+            <div class="wwinfo">
+              直径24厘米,孔径5.1厘米~5.2厘米,厚1.3厘米~1.4厘米
+            </div>
+            <div class="wwinfo">2012年江苏省兴化蒋庄遗址36号墓出土</div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 40 - 0
src/pages/section12.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">刻符复式节琮</div>
+            <div class="wwintro1">良渚文化</div>
+            <div class="wwintro2">距今5300-4300年前</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="kffsjzdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec1/map-kffsjz.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn wwbox-big">
+            <img src="./img/webp/kefufushijiezong-1.webp" alt="" style="transform: translateY(-14.0709px) translateX(20.9817px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">首都博物馆藏</div>
+            <div class="wwinfo">射径6.8厘米,高38.2厘米</div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 45 - 0
src/pages/section13.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玉神面</div>
+            <div class="wwintro1">肖家屋脊文化</div>
+            <div class="wwintro2">距今4200-3800年前</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="ysmdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec1/map-ysm.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn">
+            <img src="./img/webp/yushenmian-1.webp" alt="" class="ww" style="transform: translateY(-14.1525px) translateX(30.0183px);">
+            <img src="./img/webp/yushenmian-line1.webp" alt="" class="line" style="transform: translateY(-14.1525px) translateX(30.0183px);">
+          </div>
+
+          <div class="wwinfobox bottom">
+            <div class="wwinfo">湖南省文物考古研究院藏</div>
+            <div class="wwinfo">残宽7.9厘米,高4.7厘米,厚0.3厘米</div>
+            <div class="wwinfo">2016-2018年湖南省澧县孙家岗遗址149号墓出土</div>
+          </div>
+          <div class="wsicon">
+            <div class="inner"></div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 31 - 0
src/pages/section14.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="section chapter">
+    <div class="box">
+          <div class="chapter-num">第二章</div>
+          <div class="chapter-title">玉成中国</div>
+          <div class="chapter-intro">
+            <p>
+              在历史的洪流中,用玉加速了中华文明融合、聚变直至统一。玉礼器成为“最早的中国”形成过程中,不可或缺的政治信物。
+            </p>
+            <p>
+              夏文明崛起时,玉礼器是早期中国形成的重要标志。商与西周,玉礼制一脉相承,奠定了华夏礼仪的基石。东周至秦汉,个体的理性思维开始觉醒,玉器,逐步塑造、确立起中华民族独特的气质涵养与精神品格。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 31 - 0
src/pages/section15.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+          <div class="unit-num">第一单元</div>
+          <div class="unit-title">呈礼</div>
+          <div class="unit-intro">
+            <p>
+              夏、商、周三代,华夏族群从古国走向王国,文明聚合、国家形成。玉器,从神坛上缓步走下,化身成国家王权政治、社会规范的标尺。
+            </p>
+            <p>
+              西周建立之初,周人制定了一系列礼乐制度以治理国家。玉礼器成为“周礼”中最显著的载体,是维持国家运转的重要工具。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 42 - 0
src/pages/section16.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">牙璋</div>
+            <div class="wwintro1">二里头文化</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="yzdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec2/map-yz.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn wwbox-big">
+            <img src="./img/webp/yazhang-1.webp" alt="" style="transform: translateY(-14.0615px) translateX(41.3028px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">洛阳博物馆藏</div>
+            <div class="wwinfo">长48.5厘米,宽8厘米,厚0.5厘米</div>
+            <div class="wwinfo">
+              1975年河南省洛阳市偃师县二里头遗址七区7号墓出土
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 42 - 0
src/pages/section17.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玉戈</div>
+            <div class="wwintro1">商</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="ygdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec2/map-yg.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn wwbox-big">
+            <img class="yuge-img" src="./img/webp/yuge-1.webp" alt="" style="transform: translateY(-14.2624px) translateX(40.7982px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">湖北省博物馆藏</div>
+            <div class="wwinfo">长94厘米</div>
+            <div class="wwinfo">
+              1974年湖北省武汉市盘龙城遗址李家嘴3号墓出土
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 43 - 0
src/pages/section18.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">五璜联佩</div>
+            <div class="wwintro1">西周</div>
+            <div class="wwintro2">公元前1046-771年</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="whlpdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec2/map-whlp.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn wwbox-big">
+            <img src="./img/webp/wuhuanglianpei-1.webp" alt="" style="transform: translateY(-13.8072px) translateX(35.6147px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">三门峡市虢国博物馆藏</div>
+            <div class="wwinfo">全长81cm</div>
+            <div class="wwinfo">
+              1991年河南省三门峡市虢国墓地2012号(虢季夫人)墓出土
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 31 - 0
src/pages/section19.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+          <div class="unit-num">第二单元</div>
+          <div class="unit-title">比德</div>
+          <div class="unit-intro">
+            <p>
+              东周,传统秩序与道德标准重整。对天地神灵的敬畏让位于对人本性的追崇。士人阶层提倡以玉为德行参照,给玉文明注入了新活力。
+            </p>
+            <p>
+              两汉,儒士们从玉的坚硬与温润中,凝练出君子的五种品行准则:仁、义、智、勇、洁。在践行如玉的美德中,他们相信,玉能使人长寿延年、羽化成仙。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 2 - 1
src/pages/section2.vue

@@ -19,7 +19,8 @@
 
 <script setup></script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
 .section {
   position: relative;
 }

+ 52 - 0
src/pages/section20.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle short">玉组佩</div>
+            <div class="wwintro1">战国晚期</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="ypzdialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec2/map-swczyp.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn wwbox-big">
+            <img src="./img/webp/yuzupei-1.webp" alt="" style="transform: translateY(-14.3879px) translateX(41.4404px);">
+            <div class="intro dialogbtn dialogintro yzpdialog1">
+              <div class="point"></div>
+              <div class="inner" dataname="yzpdialog1"></div>
+            </div>
+            <div class="intro dialogbtn dialogintro yzpdialog2">
+              <div class="point"></div>
+              <div class="inner" dataname="yzpdialog2"></div>
+            </div>
+            <div class="intro dialogbtn dialogintro yzpdialog3">
+              <div class="point"></div>
+              <div class="inner" dataname="yzpdialog3"></div>
+            </div>
+          </div>
+          <div class="wwinfobox">
+            <div class="wwinfo">淄博市博物馆藏</div>
+            <div class="wwinfo">
+              1992年山东省淄博市临淄区<br>商王村1号墓出土
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 48 - 0
src/pages/section21.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">透雕仙人玉叠胜</div>
+            <div class="wwintro1">东汉</div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec2/map-tdxryds.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn dialogimgbg">
+            <img src="./img/webp/tdxryds-1.webp" alt="" style="transform: translateY(-14.2467px) translateX(39.3303px);">
+            <div class="intro dialogbtn dialogbtn-top">
+              <div class="point"></div>
+              <div class="inner" dataname="tdyddialog1"></div>
+            </div>
+            <div class="intro dialogbtn dialogbtn-mid">
+              <div class="point"></div>
+              <div class="inner" dataname="tdyddialog2"></div>
+            </div>
+            <div class="intro dialogbtn dialogbtn-right">
+              <div class="point"></div>
+              <div class="inner" dataname="tdyddialog3"></div>
+            </div>
+          </div>
+          <div class="wwinfobox">
+            <div class="wwinfo">定州市博物馆藏</div>
+            <div class="wwinfo">高16.9厘米,长15.6厘米</div>
+            <div class="wwinfo">1969年河北省定州市43号(中山王刘畅)墓出土</div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 40 - 0
src/pages/section22.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玉樽</div>
+            <div class="wwintro1">东汉</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="yzdialog2"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec2/map-yzun.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn yuzun-1">
+            <img src="./img/webp/yuzun-1.webp" alt="" style="transform: translateY(-14.1682px) translateX(41.3486px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">湖南博物院藏</div>
+            <div class="wwinfo">高10厘米,口径10厘米</div>
+            <div class="wwinfo">1990年湖南省安乡县刘弘墓出土</div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 34 - 0
src/pages/section23.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="section chapter">
+    <div class="box">
+          <div class="chapter-num">第三章</div>
+          <div class="chapter-title">玉美神州</div>
+          <div class="chapter-intro">
+            <p>
+              三国至南北朝,地缘碰撞、丝路通达、民族交融,中华玉文明注入了新鲜血液;不同风格和异域材质聚合下,玉器激发出精彩与绮丽的光芒。
+            </p>
+            <p>
+              唐宋以降,玉是世俗社会幸福与美好的寄托;包容与开放、多元文化互通,让玉器充满了意趣和风雅。
+            </p>
+            <p>
+              明清时期,在江南、在宫廷,质精无瑕、工巧无匹,中华传统玉文明走向了巅峰。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 31 - 0
src/pages/section24.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+          <div class="unit-num">第一单元</div>
+          <div class="unit-title">琼华</div>
+          <div class="unit-intro">
+            <p>
+              南渡衣冠珍视着文化血脉,北漠胡风吹来异域风尚。多元一统始终是中华大地的主旋律,玉文明的层理更加丰富多彩。
+            </p>
+            <p>
+              奔放的纹样、多彩的宝玉石,沿着丝绸之路接踵而至,衬映出玉的温润多姿。宋代玉器在世俗化中推崇复古,频出新意;多民族交融中,涤荡出了中华美玉的崭新韵味。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 37 - 0
src/pages/section25.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玉梁金宝钿带</div>
+            <div class="wwintro1">北朝至唐早期</div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec3/map-yljbxd.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn">
+            <img src="./img/webp/yljbdd-1.webp" alt="" style="transform: translateY(-13.9579px) translateX(40.2477px);">
+          </div>
+          <div class="wwinfobox">
+            <div class="wwinfo">陕西省考古研究院藏</div>
+            <div class="wwinfo">
+              1991年陕西省长安区南里王村<br>贞观元年(627)窦皦墓出土
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 54 - 31
src/pages/section3.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="section section3">
-    <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 919px;"><div class="fp-scrollable" style="overflow: hidden; width: auto; height: 919px;">
+    <div
+      class="slimScrollDiv"
+      style="position: relative; width: 100%; height: 919px"
+    >
+      <div
+        class="fp-scrollable"
+        style="width: auto; height: 919px"
+      >
         <div class="wwmap hide active" id="videocont-map">
-          <img src="./img/map/map-rnsys.webp" alt="">
+          <img src="/img/map/map-rnsys.webp" alt="" />
         </div>
         <div class="wwintrobox wwintrobox-shadow hide active" id="videocont1-1">
           <div class="wwtitle">人鸟兽玉饰</div>
           <div class="wwintro">
-            原本湖绿色<b>玉质</b>在埋藏千年后<br>已焕发出带有<b>柔和光泽</b>的<br><b>白色斑纹</b>。
+            原本湖绿色<b>玉质</b>在埋藏千年后<br />已焕发出带有<b>柔和光泽</b>的<br /><b
+              >白色斑纹</b
+            >。
           </div>
         </div>
 
@@ -35,17 +44,49 @@
             人,立于天地之间,与生俱来地拥有智慧而承担起沟通天地的桥梁。
           </div>
         </div>
-      </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 10px; position: absolute; top: 444px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 30px;"></div><div class="slimScrollRail" style="width: 10px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
+      </div>
+      <div
+        class="slimScrollBar"
+        style="
+          background: rgb(0, 0, 0);
+          width: 10px;
+          position: absolute;
+          top: 444px;
+          opacity: 0.4;
+          display: block;
+          border-radius: 7px;
+          z-index: 99;
+          right: 1px;
+          height: 30px;
+        "
+      ></div>
+      <div
+        class="slimScrollRail"
+        style="
+          width: 10px;
+          height: 100%;
+          position: absolute;
+          top: 0px;
+          display: none;
+          border-radius: 7px;
+          background: rgb(51, 51, 51);
+          opacity: 0.2;
+          z-index: 90;
+          right: 1px;
+        "
+      ></div>
+    </div>
   </div>
 </template>
 
 <script setup></script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
 .section {
   position: relative;
 }
-.section2 {
+.section3 {
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -57,31 +98,13 @@
   -ms-flex-pack: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
-  ul {
-    li {
-      list-style-type: none;
-      position: relative;
-      &:first-child:after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 2px;
-        bottom: 0;
-        left: 0;
-        background: url(/img/section2/line.webp) no-repeat center/contain;
-      }
-      h3 {
-        font-size: 1.5rem;
-        padding: 0 var(--wall-margin-left3);
-        padding-top: 5.875rem;
-      }
-      p {
-        text-align: right;
-        font-size: 1.5rem;
-        padding: 0 var(--wall-margin-left3);
-        padding-bottom: 5.875rem;
-      }
-    }
+  .wwmap {
+    position: absolute;
+    top: 5vh !important;
+    right: 5vw;
+    left: auto;
+    width: auto !important;
+    text-align: right;
   }
 }
 </style>

+ 72 - 0
src/pages/section4.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="section chapter">
+    <div class="box">
+      <div class="chapter-num">第一章</div>
+      <div class="chapter-title">玉生华夏</div>
+      <div class="chapter-intro">
+        <p>玉器,发端于亚欧大陆的东端,有着上万年的历史。</p>
+        <p>
+          生活在这片土地上的先民,发现一类温润、坚韧的天然物质——玉。他们相信,玉可以感通天地,也能够寄托对万物的敬仰。
+        </p>
+        <p>
+          从东北松辽平原到长江流域,从西北昆仑山巅到南海之滨,玉,如点点繁星,在华夏大地广袤原野上闪耀;玉,以燎原之势,拉开了中国史前文明熠熠生辉的序幕。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+}
+.chapter {
+  justify-content: flex-start;
+  background-image: url(../img/webp/chapterunit/chapter-bg.webp);
+  .box {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding-top: 15vh;
+    margin: 0 var(--wall-margin-left2);
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+  .chapter-num {
+    color: #d09d68;
+    font-size: 2.5rem;
+    width: 1em;
+    line-height: 1;
+    margin-top: 0.5rem;
+    margin-right: 2rem;
+  }
+  .chapter-title {
+    color: #d09d68;
+    font-size: 7.5rem;
+    font-family: "syst-bold";
+    width: 1em;
+    line-height: 1;
+  }
+  .chapter-intro {
+    padding-top: 11vh;
+    margin-left: auto;
+    margin-right: calc(var(--wall-margin-left3) - var(--wall-margin-left2));
+    width: 31vw;
+    font-size: 1.75rem;
+    line-height: 1.7;
+    p {
+      text-indent: 2em;
+      margin-bottom: 1.5rem;
+    }
+  }
+}
+</style>

+ 73 - 0
src/pages/section5.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+          <div class="unit-num">第一单元</div>
+          <div class="unit-title">万年</div>
+          <div class="unit-intro">
+            <p>
+              遥远的洪荒时代,自然的力量巨大而神秘,华夏先民笃信万物皆有灵。在生存探索中,他们发现坚韧而温润的玉不仅是工具,更是可与天地对话的灵物。
+            </p>
+            <p>
+              在东北乌苏里江畔的小南山,燃起了华夏大地成熟用玉的星火。由此,玉器承载起中华民族对美的追求、对信仰的寄托,这是中华民族万年用玉的文明曙光。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+
+.unit {
+  background-image: url(../img/webp/chapterunit/unit-bg.webp);
+}
+.unit .box {
+  padding-top: 15vh;
+  margin: 0 var(--wall-margin-left3);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column;
+          flex-flow: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.unit-num {
+  color: #d09d68;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #d09d68;
+  font-size: 1.125rem;
+  margin-bottom: 2rem;
+}
+.unit-title {
+  color: #d09d68;
+  font-family: "syst-bold";
+  font-size: 3rem;
+}
+.unit-intro {
+  font-size: 1.5rem;
+  line-height: 1.7;
+  padding-top: 11vh;
+}
+.unit-intro p {
+  text-indent: 2em;
+  margin-bottom: 1.5rem;
+}
+</style>

+ 41 - 0
src/pages/section6.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玦</div>
+            <div class="wwintro1">小南山文化</div>
+            <div class="wwintro2">距今9500-8000年前</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="kuai"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="/img/map/map-k.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn">
+            <img src="/img/webp/jue-1.webp" alt="" style="transform: translateY(-14.5166px) translateX(47.9083px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">黑龙江省文物考古研究所藏</div>
+            <div class="wwinfo">外径5.6厘米,内径2.2厘米,厚0.5厘米</div>
+            <div class="wwinfo">2020年黑龙江省饶河县小南山遗址1号墓出土</div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 31 - 0
src/pages/section7.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="section unit">
+    <div class="box">
+          <div class="unit-num">第二单元</div>
+          <div class="unit-title">星辉</div>
+          <div class="unit-intro">
+            <p>
+              距今七千至四千年前的华夏大地上,史前社会正向着统一的“中华文明共同体”大步迈进。开采玉料、制作美玉、寄托信仰,玉器凝结着这个“文明体”的精神共识。
+            </p>
+            <p>
+              《禹贡》记载,美玉遍布华夏大地。此时用玉文化如满天星斗般异彩纷呈。“最早的中国”诞生之初,玉,得到了最纯正、最普世的认同。
+            </p>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 45 - 0
src/pages/section8.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+      <div class="wwintrobox wwintrobox1">
+        <div class="wwtitle">玉人</div>
+        <div class="wwintro1">凌家滩文化</div>
+        <div class="wwintro2">距今5800-5300年前</div>
+        <div class="introiconbox">
+          <div class="introicon" dataname="yrdialog"></div>
+        </div>
+      </div>
+      <div class="wwmap hide">
+        <img src="/img/map/map-yr.webp" alt="" />
+      </div>
+      <div class="wwbox fadeIn wwbox-big">
+        <img
+          src="/img/webp/yuren-1.webp"
+          alt=""
+          style="transform: translateY(-14.1839px) translateX(47.4495px)"
+        />
+      </div>
+
+      <div class="wwinfobox">
+        <div class="wwinfo">安徽省文物考古研究所藏</div>
+        <div class="wwinfo">肩宽2.4厘米,厚0.8厘米,高8.6厘米</div>
+        <div class="wwinfo">1998年安徽含山凌家滩29号墓出土</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 43 - 0
src/pages/section9.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="section wwfirst">
+    <div class="box">
+          <div class="wwintrobox wwintrobox1">
+            <div class="wwtitle">玉龙</div>
+            <div class="wwintro1">红山文化</div>
+            <div class="wwintro2">距今6400-5000年前</div>
+            <div class="introiconbox">
+              <div class="introicon" dataname="yldialog"></div>
+            </div>
+          </div>
+          <div class="wwmap hide">
+            <img src="./img/webp/map/sec1/map-yl.webp" alt="">
+          </div>
+          <div class="wwbox fadeIn">
+            <img src="./img/webp/yulong-1.webp" alt="" style="transform: translateY(-14.1211px) translateX(46.1193px);">
+          </div>
+
+          <div class="wwinfobox">
+            <div class="wwinfo">故宫博物院藏</div>
+            <div class="wwinfo">
+              曲长64.3厘米,最宽处21.8厘米<br>直径1.9-3厘米,高25.7厘米
+            </div>
+            <!-- <div class="wwinfo">1971年内蒙古翁牛特旗赛沁塔拉出土</div> -->
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/index.css";
+.section {
+  position: relative;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: no-repeat center/cover;
+  justify-content: flex-start;
+}
+</style>

+ 4 - 1
src/style.scss

@@ -5,7 +5,10 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --wall-margin-left3: 28vw
+  --wall-margin-left: 10vw;
+  --wall-margin-left2: 25vw;
+  --wall-margin-left3: 28vw;
+  --wall-margin-left4: 38vw;
 }
 html {
   font-size: 16px;

+ 12 - 0
src/view/index.vue

@@ -2,6 +2,12 @@
   <section1></section1>
   <section2 />
   <section3 />
+  <section4 />
+  <section5 />
+  <section6 />
+  <section7 />
+  <section8 />
+  <section9 />
   <div class="section fp-noscroll">
     Section 2
   </div>
@@ -19,6 +25,12 @@
 import Section1 from "../pages/section1.vue";
 import Section2 from "../pages/section2.vue";
 import Section3 from "../pages/section3.vue";
+import Section4 from "../pages/section4.vue";
+import Section5 from "../pages/section5.vue";
+import Section6 from "../pages/section6.vue";
+import Section7 from "../pages/section7.vue";
+import Section8 from "../pages/section8.vue";
+import Section9 from "../pages/section9.vue";
 defineOptions({
   name: "View",
 });