diff --git a/src/assets/images/2323tys.png b/src/assets/images/2323tys.png
new file mode 100644
index 0000000..ecc4dd8
Binary files /dev/null and b/src/assets/images/2323tys.png differ
diff --git a/src/assets/images/37d12f2eb9389b502d3fca2a863.png b/src/assets/images/37d12f2eb9389b502d3fca2a863.png
new file mode 100644
index 0000000..571be2b
Binary files /dev/null and b/src/assets/images/37d12f2eb9389b502d3fca2a863.png differ
diff --git a/src/assets/images/800@3x.png b/src/assets/images/800@3x.png
new file mode 100644
index 0000000..e23af20
Binary files /dev/null and b/src/assets/images/800@3x.png differ
diff --git a/src/assets/images/H—128-A-0001@3x.png b/src/assets/images/H—128-A-0001@3x.png
new file mode 100644
index 0000000..2bb3982
Binary files /dev/null and b/src/assets/images/H—128-A-0001@3x.png differ
diff --git a/src/assets/images/L—0381-D-0001@3x.png b/src/assets/images/L—0381-D-0001@3x.png
new file mode 100644
index 0000000..48f4372
Binary files /dev/null and b/src/assets/images/L—0381-D-0001@3x.png differ
diff --git a/src/assets/images/YW—0314-A-1@3x.png b/src/assets/images/YW—0314-A-1@3x.png
new file mode 100644
index 0000000..620666e
Binary files /dev/null and b/src/assets/images/YW—0314-A-1@3x.png differ
diff --git a/src/assets/images/dfdf8@2x.png b/src/assets/images/dfdf8@2x.png
new file mode 100644
index 0000000..6edc699
Binary files /dev/null and b/src/assets/images/dfdf8@2x.png differ
diff --git a/src/assets/images/dfdjqqd@2x.png b/src/assets/images/dfdjqqd@2x.png
new file mode 100644
index 0000000..d221978
Binary files /dev/null and b/src/assets/images/dfdjqqd@2x.png differ
diff --git a/src/assets/images/fdfdfdf1.png b/src/assets/images/fdfdfdf1.png
new file mode 100644
index 0000000..c53c611
Binary files /dev/null and b/src/assets/images/fdfdfdf1.png differ
diff --git a/src/assets/images/hb123322.png b/src/assets/images/hb123322.png
new file mode 100644
index 0000000..9e8a18d
Binary files /dev/null and b/src/assets/images/hb123322.png differ
diff --git a/src/assets/images/jingqingqita1.png b/src/assets/images/jingqingqita1.png
new file mode 100644
index 0000000..1e6845f
Binary files /dev/null and b/src/assets/images/jingqingqita1.png differ
diff --git a/src/assets/images/jx1@2x.png b/src/assets/images/jx1@2x.png
new file mode 100644
index 0000000..4cf1cbd
Binary files /dev/null and b/src/assets/images/jx1@2x.png differ
diff --git a/src/assets/images/jx58@2x.png b/src/assets/images/jx58@2x.png
new file mode 100644
index 0000000..b2a8d47
Binary files /dev/null and b/src/assets/images/jx58@2x.png differ
diff --git a/src/assets/images/sdfsfddfd.png b/src/assets/images/sdfsfddfd.png
new file mode 100644
index 0000000..0ef24b0
Binary files /dev/null and b/src/assets/images/sdfsfddfd.png differ
diff --git a/src/assets/images/zi17@3x.png b/src/assets/images/zi17@3x.png
new file mode 100644
index 0000000..ae2eae8
Binary files /dev/null and b/src/assets/images/zi17@3x.png differ
diff --git a/src/assets/images/zu24@2x.png b/src/assets/images/zu24@2x.png
index 0145974..a4f753d 100644
Binary files a/src/assets/images/zu24@2x.png and b/src/assets/images/zu24@2x.png differ
diff --git a/src/assets/images/zu28@3x.png b/src/assets/images/zu28@3x.png
new file mode 100644
index 0000000..d9c7f9e
Binary files /dev/null and b/src/assets/images/zu28@3x.png differ
diff --git a/src/assets/images/zughjlkop.png b/src/assets/images/zughjlkop.png
new file mode 100644
index 0000000..921be27
Binary files /dev/null and b/src/assets/images/zughjlkop.png differ
diff --git a/src/assets/images/zujsf23@2x.png b/src/assets/images/zujsf23@2x.png
new file mode 100644
index 0000000..0e63b39
Binary files /dev/null and b/src/assets/images/zujsf23@2x.png differ
diff --git a/src/views/navigation/index.vue b/src/views/navigation/index.vue
index f83edcc..f841798 100644
--- a/src/views/navigation/index.vue
+++ b/src/views/navigation/index.vue
@@ -1,584 +1,21 @@
 <script setup>
-
+import pcIndex from '@/views/navigation/pc-index.vue'
+import modelIndex from '@/views/navigation/model-index.vue'
+import {ref} from "vue";
+const mediaQueryList = window.matchMedia('(max-width: 768px)');
+const currentComponent=ref(modelIndex)
+mediaQueryList.addListener(function(event) {
+  if (event.matches) {
+    currentComponent.value=modelIndex
+  } else {
+    currentComponent.value=pcIndex
+  }
+});
 </script>
 <template>
-  <div class="container">
-    <div class="content1">
-      <div class="wrap1">
-        <img src="@/assets/images/gb1@2x.png">
-      </div>
-      <div class="wrap2">
-<!--        <div class="wrap2_1">
-          <div class="wrap2_1_1"></div>
-          <div class="wrap2_1_2"></div>
-        </div>-->
-        <div class="wrap2_2">
-          <div class="wrap2_2_1">
-            <div class="wrap2_2_1_1">
-              <img src="@/assets/images/YW—0314-A-1@2x.png" alt="">
-            </div>
-          </div>
-          <div class="wrap2_2_2">
-            <div class="wrap2_2_2_1">
-              <img src="@/assets/images/H—128-A-0001@2x.png" alt="">
-            </div>
-          </div>
-          <div class="wrap2_2_3">
-            <div class="wrap2_2_3_1">
-              <img src="@/assets/images/L—0381-D-0001@2x.png" alt="">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="content2">
-      <div class="wrap1">
-        <div class="wrap1_1">
-          <div class="wrap1_1_1">
-            <div class="wrap1_1_1_1">
-              <img src="@/assets/images/116e81@2x.png" alt="">
-            </div>
-          </div>
-          <div class="wrap1_1_2">
-            <div class="wrap1_1_2_1">
-              <div class="wrap1_1_2_1_1">
-                <img src="@/assets/images/zu5@2x.png" alt="">
-              </div>
-              <div class="wrap1_1_2_1_2">
-                <div class="wrap1_1_2_1_2_1">
-                  <img src="@/assets/images/yqbwgjs@3x.png" alt="">
-                </div>
-                <div class="wrap1_1_2_1_2_2">
-                  <img src="@/assets/images/ntroduction@3x.png">
-                </div>
-              </div>
-            </div>
-            <div class="wrap1_1_2_2">延庆博物馆（Yanqing
-              Museum）是北京市延庆区一座大型综合性博物馆，属中国区县级大型综合性博物馆，位于延庆城区主干道繁华街区（妫水北街24号），其前身为延庆区文物管理所展陈库房。
-              延庆博物馆是目前北京郊区规模最大、功能最全的区级现代化综合性博物馆，2004年开始筹备，2008年9月30日正式对外开放，2016年实施升级改造工程，2018年11月1日升级改造完成正式对外开放。全馆建筑面积逾6100平方米，展厅面积2400余平方米。延庆博物馆以延庆区文物管理所历年保藏、征集和延庆地区出土文物为基本素材
-            </div>
-          </div>
-        </div>
-        <div class="wrap1_2">
-          <div class="wrap1_2_1"></div>
-          <div class="wrap1_2_2"></div>
-        </div>
-      </div>
-      <div class="wrap2">
-        <div class="wrap2_1">
-          <div class="wrap2_1_1">
-            <img src="@/assets/images/zu17@2x.png">
-          </div>
-          <div class="wrap2_1_2">
-            <img src="@/assets/images/zu27@3x.png" alt="">
-          </div>
-        </div>
-        <div class="wrap2_2">
-        <div class="wrap2_2_1">
-          <div class="wrap2_2_1_1">掐丝珐琅兽面纹冲耳鼎式炉</div>
-          <div class="wrap2_2_1_2">清乾隆,炉作鼎式，宝珠钮盖。通体天蓝地上掐丝填釉鎏金装饰，盖面、腹部、足上均饰兽面纹，炉底分布缠枝六瓣花三朵。古人抚琴讲究雅致的环境和氛围，常用炉焚香。</div>
-        </div>
-        <div class="wrap2_2_2">
-          <img src="@/assets/images/TNyFFEulxfFqX4vq2V.jpg" alt="">
-        </div>
-        </div>
-      </div>
-      <div class="wrap3">
-          <div class="wrap3_1">
-            <img src="@/assets/images/15357[1024].jpg" alt="">
-          </div>
-          <div class="wrap3_2">掐丝珐琅卧麒麟式镇纸，清，麒麟式，俯卧状，身上采用掐丝珐琅工艺饰蓝色鳞龙纹。此镇纸形象自然生动，细节表现到位。清宫旧藏镇纸多种多样，但采用掐丝珐琅工艺且器形为麒麟式的镇纸只此一件，弥足珍贵。</div>
-      </div>
-      <div class="wrap4">
-        <div class="wrap4_1">
-          <div class="wrap4_1_2">
-            <img src="@/assets/images/zu24@2x.png" alt="">
-          </div>
-          <div class="wrap4_1_1">
-            <img src="@/assets/images/zu18@2x.png">
-          </div>
-        </div>
-        <div class="wrap4_2">
-          <img src="@/assets/images/jqqd@2x.png" alt="">
-<!--          <div class="wrap4_2_1">
-            <div class="wrap4_2_1_1">某某某某某-藏品</div>
-            <div class="wrap4_2_1_2">咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩</div>
-          </div>
-          <div class="wrap4_2_2"></div>-->
-        </div>
-      </div>
-      <div class="wrap5">
-        <div class="wrap5_1">
-          <div class="wrap5_1_1">
-            <img src="@/assets/images/zu19@2x.png">
-          </div>
-          <div class="wrap5_1_2">
-            <img src="@/assets/images/zu23@2x.png" alt="">
-          </div>
-        </div>
-        <div class="wrap5_2">
-          <img src="@/assets/images/jqqd@2x12.png" alt="">
-        </div>
-      </div>
-    </div>
-  </div>
+ <div>
+   <component :is="currentComponent" />
+ </div>
 </template>
 <style scoped lang="scss">
-.container {
-  width: 1920px;
-  .content2 {
-    width: 100%;
-    height: 2470px;
-    background-size: contain;
-    background-image: url("@/assets/images/zu16@2x.png");
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .wrap5 {
-      margin-top: 57px;
-      .wrap5_2{
-        box-sizing: border-box;
-        margin-top: 20px;
-        height: 340px;
-        width: 1085px;
-        background-size: contain;
-        background-image: url("@/assets/images/hb1@21x.png");
-        padding: 24px 44px 24px 53px;
-      display: flex;
-        justify-content: center;
-        align-items: center;
-        img{
-          width: 80px;
-          height: 28px;
-        }
-        .wrap5_2_2{
-          margin-left: 42px;
-          flex-shrink: 0;
-          opacity: 1;
-          width: 300px;
-          height: 291px;
-          background-color: #4E0A0A;
-          border-radius: 10px;
-        }
-        .wrap5_2_1{
-
-          display: flex;
-          flex-direction: column;
-          justify-content: start;
-          .wrap5_2_1_2{
-            margin-top: 9px;
-            line-height: 20px;
-            color: #A26E52;
-            font-size: 16px;
-          }
-          .wrap5_2_1_1{
-            font-weight: 900;
-            color: #5F4040;
-            font-size: 20px;
-          }
-        }
-      }
-      .wrap5_1 {
-
-        display: flex;
-        align-items: end;
-        justify-content: space-between;
-        .wrap5_1_2{
-          img{
-            width: 59.9px;
-            height: 28px;
-          }
-        }
-        .wrap5_1_1 {
-          margin-left: -58px;
-          border-radius: 10px;
-          background-color: #5F4040;
-          width:255px;
-          height: 60px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          img{
-            width: 182.26px;
-            height: 46px;
-          }
-        }
-      }
-    }
-    .wrap4 {
-      margin-top: 57px;
-      .wrap4_2{
-        box-sizing: border-box;
-        display: flex;
-        margin-top: 20px;
-        height: 340px;
-        width: 1085px;
-        background-image: url("@/assets/images/dfhb1@2x.png");
-        padding: 24px 44px 24px 53px;
-        background-size: contain;
-    align-items: center;
-        justify-content: center;
-        img{
-          width: 80px;
-          height: 28px;
-        }
-      }
-      .wrap4_1 {
-
-        display: flex;
-        align-items: end;
-        justify-content: space-between;
-        .wrap4_1_2{
-          img{
-            width: 59.9px;
-            height: 28px;
-          }
-
-        }
-        .wrap4_1_1 {
-          margin-right: -58px;
-          border-radius: 10px;
-          background-color: #54796F;
-          width: 255px;
-          height: 60px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          img{
-            width: 199.3px;
-            height: 45px;
-          }
-        }
-      }
-    }
-    .wrap3{
-      box-sizing: border-box;
-      margin-top: 15px;
-      background-size: contain;
-      width: 1085px;
-      height: 340px;
-    background-image: url("@/assets/images/jx39@2x.png");
-      display: flex;
-    padding: 24px 46px 24px 49px;
-      .wrap3_2{
-        color: #3B5D54;
-        font-size: 16px;
-      }
-      .wrap3_1{
-        margin-right: 35px;
-        flex-shrink: 0;
-        width: 300px;
-        height: 291.87px;
-        background-color: #395212;
-        border-radius: 10px;
-        overflow: hidden;
-        img{
-          width: 300px;
-          height: 291.87px;
-        }
-      }
-    }
-    .wrap2 {
-      margin-top: 57px;
-      .wrap2_2{
-        box-sizing: border-box;
-        display: flex;
-        margin-top: 20px;
-        height: 340px;
-        width: 1085px;
-      background-image: url("@/assets/images/jx41@2x.png");
-        background-size: contain;
-        padding: 24px 44px 24px 53px;
-        overflow: hidden;
-
-        .wrap2_2_2{
-          margin-left: 42px;
-          flex-shrink: 0;
-          opacity: 1;
-          width: 300px;
-          height: 291px;
-          background-color: #4E0A0A;
-          border-radius: 10px;
-          overflow: hidden;
-          img{
-            width: 300px;
-            height: 291px;
-          }
-        }
-      .wrap2_2_1{
-
-        display: flex;
-        flex-direction: column;
-        justify-content: start;
-        .wrap2_2_1_2{
-          margin-top: 9px;
-          line-height: 20px;
-          color: #A26E52;
-          font-size: 16px;
-        }
-        .wrap2_2_1_1{
-          font-weight: 900;
-          color: #5F4040;
-          font-size: 20px;
-        }
-      }
-      }
-      .wrap2_1 {
-
-        display: flex;
-        align-items: end;
-        justify-content: space-between;
-        .wrap2_1_2{
-          img{
-            width: 59.9px;
-            height: 28px;
-          }
-
-        }
-        .wrap2_1_1 {
-          margin-left: -58px;
-          border-radius: 10px;
-          background-color: #A46247;
-          width: 255px;
-          height: 60px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          img{
-            width: 132px;
-            height: 44px;
-          }
-        }
-      }
-    }
-
-    .wrap1 {
-      margin-top: 107px;
-      display: flex;
-      flex-direction: column;
-
-      .wrap1_2 {
-        margin-top: 17px;
-        display: flex;
-
-        .wrap1_2_2 {
-          margin-left: 10px;
-          width: 25px;
-          height: 25px;
-          border-radius: 180px;
-          background-color: #A9AE8E;
-        }
-
-        .wrap1_2_1 {
-          width: 25px;
-          height: 25px;
-          border-radius: 180px;
-          background-color: #708F87;
-        }
-      }
-
-      .wrap1_1 {
-        display: flex;
-        align-items: center;
-
-        .wrap1_1_2 {
-          box-sizing: border-box;
-          width: 642px;
-          height: 347px;
-          border: 3px solid #54796F;
-          background-color: #fff;
-          border-left: none;
-          border-bottom-right-radius: 10px;
-          border-top-right-radius: 10px;
-          display: flex;
-          flex-direction: column;
-          justify-content: start;
-          padding: 25px 43px 24px 30px;
-
-          .wrap1_1_2_2 {
-            line-height: 20px;
-            font-weight: 900;
-            margin-top: 13px;
-            font-size: 14px;
-            color: #58605E;
-          }
-
-          .wrap1_1_2_1 {
-            display: flex;
-            align-items: center;
-
-            .wrap1_1_2_1_2 {
-              display: flex;
-              flex-direction: column;
-
-              .wrap1_1_2_1_2_2 {
-                width: 178px;
-                height: 20px;
-
-                img {
-                  width: 178px;
-                  height: 20px;
-                }
-              }
-
-              .wrap1_1_2_1_2_1 {
-                width: 140px;
-                height: 28px;
-
-                img {
-                  width: 140px;
-                  height: 28px;
-                }
-              }
-            }
-
-            .wrap1_1_2_1_1 {
-              margin-right: 25px;
-
-              img {
-                width: 40.88px;
-                height: 38.44px;
-              }
-            }
-          }
-        }
-
-        .wrap1_1_1 {
-          width: 385px;
-          height: 385px;
-          border-radius: 10px;
-          background-color: #54796F;
-          position: relative;
-
-          .wrap1_1_1_1 {
-            position: absolute;
-            bottom: 16px;
-            right: 17px;
-
-            img {
-              width: 378px;
-              height: 378px;
-
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .content1 {
-    width: 100%;
-    position: relative;
-
-    .wrap2 {
-      right: 320px;
-      position: absolute;
-      display: flex;
-      bottom: -50px;
-
-      .wrap2_2 {
-        display: flex;
-
-        .wrap2_2_1 {
-          margin-left: 59px;
-          width: 91px;
-          height: 91px;
-          background-color: #54796F;
-          border-radius: 6px;
-          position: relative;
-
-          .wrap2_2_1_1 {
-
-            right: 10px;
-            bottom: 10px;
-            position: absolute;
-
-            img {
-              width: 91px;
-              height: 91px;
-            }
-          }
-        }
-
-        .wrap2_2_2 {
-          position: relative;
-          margin-left: 20px;
-          width: 91px;
-          height: 91px;
-          background-color: #5F4040;
-          border-radius: 6px;
-
-          .wrap2_2_2_1 {
-            right: 10px;
-            bottom: 10px;
-            position: absolute;
-
-            img {
-              width: 91px;
-              height: 91px;
-            }
-          }
-        }
-
-        .wrap2_2_3 {
-          position: relative;
-          margin-left: 20px;
-          width: 91px;
-          height: 91px;
-          background-color: #A46247;
-          border-radius: 6px;
-
-          .wrap2_2_3_1 {
-            right: 10px;
-            bottom: 10px;
-            position: absolute;
-
-            img {
-              width: 91px;
-              height: 91px;
-            }
-          }
-        }
-      }
-
-      .wrap2_1 {
-        position: relative;
-        display: flex;
-
-        .wrap2_1_1 {
-          right: 10px;
-          position: absolute;
-          bottom: 10px;
-          width: 25px;
-          height: 25px;
-          border-radius: 180px;
-          background-color: #708F87;
-        }
-
-        .wrap2_1_2 {
-          position: absolute;
-          bottom: 10px;
-
-          width: 25px;
-          height: 25px;
-          border-radius: 180px;
-          background-color: #A9AE8E;
-        }
-
-      }
-
-    }
-
-    .wrap1 {
-      width: 100%;
-      height: 800px;
-
-      img {
-        width: 100%;
-        height: 100%;
-
-      }
-    }
-  }
-}
 </style>
diff --git a/src/views/navigation/model-index.vue b/src/views/navigation/model-index.vue
new file mode 100644
index 0000000..d214205
--- /dev/null
+++ b/src/views/navigation/model-index.vue
@@ -0,0 +1,494 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="container">
+    <div class="content1">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">
+            <img src="@/assets/images/YW—0314-A-1@3x.png" alt="">
+          </div>
+        </div>
+        <div class="wrap1_2">
+          <div class="wrap1_2_1">
+            <img src="@/assets/images/H—128-A-0001@3x.png" alt="">
+          </div>
+        </div>
+        <div class="wrap1_3">
+          <div class="wrap1_3_1">
+            <img src="@/assets/images/L—0381-D-0001@3x.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content2">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <img src="@/assets/images/zu28@3x.png" alt="">
+        </div>
+        <div class="wrap1_2">
+          <div class="wrap1_2_1">
+            <img src="@/assets/images/yqbwgjs@3x.png" alt="">
+          </div>
+          <div class="wrap1_2_2">
+            <img src="@/assets/images/2323tys.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="wrap2">
+
+        <div class="wrap2_1">
+          <img src="@/assets/images/37d12f2eb9389b502d3fca2a863.png" alt="">
+        </div>
+        <div class="wrap2_2">延庆博物馆（Yanqing
+          Museum）是北京市延庆区一座大型综合性博物馆，属中国区县级大型综合性博物馆，位于延庆城区主干道繁华街区（妫水北街24号），其前身为延庆区文物管理所展陈库房。
+          延庆博物馆是目前北京郊区规模最大、功能最全的区级现代化综合性博物馆，2004年开始筹备，2008年9月30日正式对外开放，2016年实施升级改造工程，2018年11月1日升级改造完成正式对外开放。全馆建筑面积逾6100平方米，展厅面积2400余平方米。延庆博物馆以延庆区文物管理所历年保藏、征集和延庆地区出土文物为基本素材
+        </div>
+      </div>
+    </div>
+    <div class="content3">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <img src="@/assets/images/zi17@3x.png" alt="">
+        </div>
+        <div class="wrap1_2">
+          <img src="@/assets/images/fdfdfdf1.png" alt="">
+        </div>
+      </div>
+      <div class="wrap2">
+        <div class="wrap2_1">
+          <div class="wrap2_1_1">某某某某某-藏品</div>
+          <div class="wrap2_1_2">
+            咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩
+          </div>
+        </div>
+        <div class="wrap2_2"></div>
+      </div>
+    </div>
+    <div class="content4">
+<div class="wrap1">
+  <div class="wrap1_1"></div>
+  <div class="wrap1_2">
+    <div class="wrap1_2_1">某某某某某-藏品</div>
+    <div class="wrap1_2_2">咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩</div>
+  </div>
+</div>
+    </div>
+    <div class="content5">
+      <div class="wrap1">
+        <div class="wrap1_2">
+          <img src="@/assets/images/zu24@2x.png" alt="">
+        </div>
+        <div class="wrap1_1">
+          <img src="@/assets/images/dfdf8@2x.png" alt="">
+        </div>
+      </div>
+      <div class="wrap2">
+        <img src="@/assets/images/dfdjqqd@2x.png" alt="">
+      </div>
+    </div>
+    <div class="content6">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <img src="@/assets/images/zughjlkop.png" alt="">
+        </div>
+        <div class="wrap1_2">
+          <img src="@/assets/images/zujsf23@2x.png" alt="">
+        </div>
+      </div>
+      <div class="wrap2">
+        <img src="@/assets/images/jingqingqita1.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.container {
+  .content6 {
+    margin-top: 179px;
+    padding-left: 87px;
+    padding-right: 87px;
+    .wrap2 {
+      background-repeat: no-repeat;
+      box-sizing: border-box;
+      padding: 77px 72px 92px 82px;
+      margin-top: 51px;
+      height: 727px;
+      background-size: contain;
+      background-image: url("@/assets/images/hb123322.png");
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img{
+
+        width: 246px;
+        height: 87px;
+        color: #54796F;
+      }
+    }
+
+    .wrap1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+
+      .wrap1_2 {
+        img {
+          width: 184px;
+          height: 87px;
+        }
+      }
+
+      .wrap1_1 {
+        border-radius: 51px;
+        width: 850px;
+        height: 200px;
+        background-color: #5F4040;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 570px;
+          height: 147px;
+        }
+      }
+    }
+  }
+  .content5 {
+    margin-top: 179px;
+    padding-left: 87px;
+    padding-right: 87px;
+
+    .wrap2 {
+      box-sizing: border-box;
+      padding: 77px 72px 92px 82px;
+      margin-top: 51px;
+      height: 727px;
+      background-size: contain;
+      background-image: url("@/assets/images/sdfsfddfd.png");
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: center;
+    justify-content: center;
+     img{
+
+       width: 246px;
+       height: 87px;
+       color: #54796F;
+     }
+    }
+
+    .wrap1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+
+      .wrap1_2 {
+        img {
+          width: 184px;
+          height: 87px;
+        }
+      }
+
+      .wrap1_1 {
+        border-radius: 51px;
+        width: 850px;
+        height: 200px;
+        background-color: #54796F;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 608px;
+          height: 139px;
+        }
+      }
+    }
+  }
+  .content4 {
+    margin-top: 51px;
+    padding-left: 87px;
+    padding-right: 87px;
+    box-sizing: border-box;
+    .wrap1{
+      box-sizing: border-box;
+      height: 727px;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-image: url("@/assets/images/jx58@2x.png");
+      display: flex;
+      align-items: center;
+      padding: 87px 118px 92px 72px;
+      .wrap1_2{
+        .wrap1_2_2{
+          width: 947px;
+          height: 486px;
+            overflow-y: auto;
+          color: #8BA29C;
+          font-size: 51px;
+          line-height: 70px;
+        }
+        .wrap1_2_1{
+          margin-bottom: 20px;
+          color: #000;
+          font-size: 61px;
+          font-weight: 900;
+        }
+
+      }
+      .wrap1_1{
+        margin-right: 61px;
+        flex-shrink: 0;
+        width: 565px;
+        height: 549px;
+        background-color: #54796F;
+        border-radius: 51px;
+
+      }
+    }
+
+  }
+
+  .content3 {
+    margin-top: 179px;
+    padding-left: 87px;
+    padding-right: 87px;
+
+    .wrap2 {
+      box-sizing: border-box;
+      padding: 77px 72px 92px 82px;
+      margin-top: 51px;
+      height: 727px;
+      background-size: contain;
+      background-image: url("@/assets/images/jx1@2x.png");
+      display: flex;
+      align-items: center;
+
+      .wrap2_2 {
+        flex-shrink: 0;
+        width: 565px;
+        height: 549px;
+        background-color: #4E0A0A;
+        border-radius: 51px;
+      }
+
+      .wrap2_1 {
+        .wrap2_1_2 {
+          height: 486px;
+          overflow-y: auto;
+          color: #A26E52;
+          font-size: 51px;
+        }
+
+        .wrap2_1_1 {
+          margin-bottom: 15px;
+          color: #5F4040;
+          font-size: 61px;
+          font-weight: 900;
+        }
+
+
+      }
+    }
+
+    .wrap1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+
+      .wrap1_2 {
+        img {
+          width: 184px;
+          height: 87px;
+        }
+      }
+
+      .wrap1_1 {
+        border-radius: 51px;
+        width: 850px;
+        height: 200px;
+        background-color: #A46247;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 408px;
+          height: 133px;
+        }
+      }
+    }
+  }
+
+  .content2 {
+    margin-top: 276px;
+    padding-left: 87px;
+    padding-right: 87px;
+
+    .wrap2 {
+      padding-left: 41px;
+      padding-right: 123px;
+      border-radius: 51px;
+      width: auto;
+      border: 10px solid #547970;
+      height: 604px;
+      display: flex;
+      align-items: center;
+
+      .wrap2_2 {
+        margin-left: 70px;
+        font-weight: 700;
+        color: #58605E;
+        font-size: 51px;
+        line-height: 80px;
+        height: 492px;
+        overflow-y: auto;
+      }
+
+      .wrap2_1 {
+        flex-shrink: 0;
+        border-radius: 51px;
+        width: 492px;
+        height: 492px;
+        background-color: #54796F;
+        position: relative;
+
+        img {
+          width: 481px;
+          height: 481px;
+          bottom: 20px;
+          right: 20px;
+          position: absolute;
+
+        }
+      }
+    }
+
+    .wrap1 {
+      margin-bottom: 46px;
+      display: flex;
+      align-items: center;
+
+      .wrap1_2 {
+        margin-left: 46px;
+        display: flex;
+        flex-direction: column;
+
+        .wrap1_2_2 {
+          width: 430px;
+          height: 41px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .wrap1_2_1 {
+          width: 430px;
+          height: 87px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .wrap1_1 {
+        width: 126px;
+        height: 118px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .content1 {
+    background-size: contain;
+    width: 1920px;
+    height: 1920px;
+    background-image: url("@/assets/images/800@3x.png");
+    position: relative;
+
+    .wrap1 {
+      bottom: -77px;
+      position: absolute;
+      right: 128px;
+      display: flex;
+
+      .wrap1_3 {
+        margin-left: 31px;
+        width: 236px;
+        height: 236px;
+        border-radius: 31px;
+        background-color: #A46247;
+        position: relative;
+
+        .wrap1_3_1 {
+          top: -20px;
+          left: -20px;
+          position: absolute;
+
+          img {
+            width: 236px;
+            height: 236px;
+          }
+        }
+
+
+      }
+
+      .wrap1_2 {
+        margin-left: 31px;
+        width: 236px;
+        height: 236px;
+        border-radius: 31px;
+        background-color: #5F4040;
+        position: relative;
+
+        .wrap1_2_1 {
+          top: -20px;
+          left: -20px;
+          position: absolute;
+
+          img {
+            width: 236px;
+            height: 236px;
+          }
+        }
+
+
+      }
+
+      .wrap1_1 {
+        width: 236px;
+        height: 236px;
+        border-radius: 31px;
+        position: relative;
+        background-color: #54796F;
+
+        .wrap1_1_1 {
+          top: -20px;
+          left: -20px;
+          position: absolute;
+
+          img {
+            width: 236px;
+            height: 236px;
+          }
+        }
+
+
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/navigation/pc-index.vue b/src/views/navigation/pc-index.vue
new file mode 100644
index 0000000..2cad1a2
--- /dev/null
+++ b/src/views/navigation/pc-index.vue
@@ -0,0 +1,586 @@
+<script setup>
+import {onMounted} from "vue";
+// JavaScript示例
+
+</script>
+<template>
+  <div class="container">
+    <div class="content1">
+      <div class="wrap1">
+        <img src="@/assets/images/gb1@2x.png">
+      </div>
+      <div class="wrap2">
+        <!--        <div class="wrap2_1">
+                  <div class="wrap2_1_1"></div>
+                  <div class="wrap2_1_2"></div>
+                </div>-->
+        <div class="wrap2_2">
+          <div class="wrap2_2_1">
+            <div class="wrap2_2_1_1">
+              <img src="@/assets/images/YW—0314-A-1@2x.png" alt="">
+            </div>
+          </div>
+          <div class="wrap2_2_2">
+            <div class="wrap2_2_2_1">
+              <img src="@/assets/images/H—128-A-0001@2x.png" alt="">
+            </div>
+          </div>
+          <div class="wrap2_2_3">
+            <div class="wrap2_2_3_1">
+              <img src="@/assets/images/L—0381-D-0001@2x.png" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content2">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">
+            <div class="wrap1_1_1_1">
+              <img src="@/assets/images/116e81@2x.png" alt="">
+            </div>
+          </div>
+          <div class="wrap1_1_2">
+            <div class="wrap1_1_2_1">
+              <div class="wrap1_1_2_1_1">
+                <img src="@/assets/images/zu5@2x.png" alt="">
+              </div>
+              <div class="wrap1_1_2_1_2">
+                <div class="wrap1_1_2_1_2_1">
+                  <img src="@/assets/images/yqbwgjs@3x.png" alt="">
+                </div>
+                <div class="wrap1_1_2_1_2_2">
+                  <img src="@/assets/images/ntroduction@3x.png">
+                </div>
+              </div>
+            </div>
+            <div class="wrap1_1_2_2">延庆博物馆（Yanqing
+              Museum）是北京市延庆区一座大型综合性博物馆，属中国区县级大型综合性博物馆，位于延庆城区主干道繁华街区（妫水北街24号），其前身为延庆区文物管理所展陈库房。
+              延庆博物馆是目前北京郊区规模最大、功能最全的区级现代化综合性博物馆，2004年开始筹备，2008年9月30日正式对外开放，2016年实施升级改造工程，2018年11月1日升级改造完成正式对外开放。全馆建筑面积逾6100平方米，展厅面积2400余平方米。延庆博物馆以延庆区文物管理所历年保藏、征集和延庆地区出土文物为基本素材
+            </div>
+          </div>
+        </div>
+        <div class="wrap1_2">
+          <div class="wrap1_2_1"></div>
+          <div class="wrap1_2_2"></div>
+        </div>
+      </div>
+      <div class="wrap2">
+        <div class="wrap2_1">
+          <div class="wrap2_1_1">
+            <img src="@/assets/images/zu17@2x.png">
+          </div>
+          <div class="wrap2_1_2">
+            <img src="@/assets/images/zu27@3x.png" alt="">
+          </div>
+        </div>
+        <div class="wrap2_2">
+          <div class="wrap2_2_1">
+            <div class="wrap2_2_1_1">掐丝珐琅兽面纹冲耳鼎式炉</div>
+            <div class="wrap2_2_1_2">清乾隆,炉作鼎式，宝珠钮盖。通体天蓝地上掐丝填釉鎏金装饰，盖面、腹部、足上均饰兽面纹，炉底分布缠枝六瓣花三朵。古人抚琴讲究雅致的环境和氛围，常用炉焚香。</div>
+          </div>
+          <div class="wrap2_2_2">
+            <img src="@/assets/images/TNyFFEulxfFqX4vq2V.jpg" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="wrap3">
+        <div class="wrap3_1">
+          <img src="@/assets/images/15357[1024].jpg" alt="">
+        </div>
+        <div class="wrap3_2">掐丝珐琅卧麒麟式镇纸，清，麒麟式，俯卧状，身上采用掐丝珐琅工艺饰蓝色鳞龙纹。此镇纸形象自然生动，细节表现到位。清宫旧藏镇纸多种多样，但采用掐丝珐琅工艺且器形为麒麟式的镇纸只此一件，弥足珍贵。</div>
+      </div>
+      <div class="wrap4">
+        <div class="wrap4_1">
+          <div class="wrap4_1_2">
+            <img src="@/assets/images/zu24@2x.png" alt="">
+          </div>
+          <div class="wrap4_1_1">
+            <img src="@/assets/images/zu18@2x.png">
+          </div>
+        </div>
+        <div class="wrap4_2">
+          <img src="@/assets/images/jqqd@2x.png" alt="">
+          <!--          <div class="wrap4_2_1">
+                      <div class="wrap4_2_1_1">某某某某某-藏品</div>
+                      <div class="wrap4_2_1_2">咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩</div>
+                    </div>
+                    <div class="wrap4_2_2"></div>-->
+        </div>
+      </div>
+      <div class="wrap5">
+        <div class="wrap5_1">
+          <div class="wrap5_1_1">
+            <img src="@/assets/images/zu19@2x.png">
+          </div>
+          <div class="wrap5_1_2">
+            <img src="@/assets/images/zu23@2x.png" alt="">
+          </div>
+        </div>
+        <div class="wrap5_2">
+          <img src="@/assets/images/jqqd@2x12.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.container {
+  width: 1920px;
+  .content2 {
+    width: 100%;
+    height: 2470px;
+    background-size: contain;
+    background-image: url("@/assets/images/zu16@2x.png");
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .wrap5 {
+      margin-top: 57px;
+      .wrap5_2{
+        box-sizing: border-box;
+        margin-top: 20px;
+        height: 340px;
+        width: 1085px;
+        background-size: contain;
+        background-image: url("@/assets/images/hb1@21x.png");
+        padding: 24px 44px 24px 53px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img{
+          width: 80px;
+          height: 28px;
+        }
+        .wrap5_2_2{
+          margin-left: 42px;
+          flex-shrink: 0;
+          opacity: 1;
+          width: 300px;
+          height: 291px;
+          background-color: #4E0A0A;
+          border-radius: 10px;
+        }
+        .wrap5_2_1{
+
+          display: flex;
+          flex-direction: column;
+          justify-content: start;
+          .wrap5_2_1_2{
+            margin-top: 9px;
+            line-height: 20px;
+            color: #A26E52;
+            font-size: 16px;
+          }
+          .wrap5_2_1_1{
+            font-weight: 900;
+            color: #5F4040;
+            font-size: 20px;
+          }
+        }
+      }
+      .wrap5_1 {
+
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        .wrap5_1_2{
+          img{
+            width: 59.9px;
+            height: 28px;
+          }
+        }
+        .wrap5_1_1 {
+          margin-left: -58px;
+          border-radius: 10px;
+          background-color: #5F4040;
+          width:255px;
+          height: 60px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img{
+            width: 182.26px;
+            height: 46px;
+          }
+        }
+      }
+    }
+    .wrap4 {
+      margin-top: 57px;
+      .wrap4_2{
+        box-sizing: border-box;
+        display: flex;
+        margin-top: 20px;
+        height: 340px;
+        width: 1085px;
+        background-image: url("@/assets/images/dfhb1@2x.png");
+        padding: 24px 44px 24px 53px;
+        background-size: contain;
+        align-items: center;
+        justify-content: center;
+        img{
+          width: 80px;
+          height: 28px;
+        }
+      }
+      .wrap4_1 {
+
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        .wrap4_1_2{
+          img{
+            width: 59.9px;
+            height: 28px;
+          }
+
+        }
+        .wrap4_1_1 {
+          margin-right: -58px;
+          border-radius: 10px;
+          background-color: #54796F;
+          width: 255px;
+          height: 60px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img{
+            width: 199.3px;
+            height: 45px;
+          }
+        }
+      }
+    }
+    .wrap3{
+      box-sizing: border-box;
+      margin-top: 15px;
+      background-size: contain;
+      width: 1085px;
+      height: 340px;
+      background-image: url("@/assets/images/jx39@2x.png");
+      display: flex;
+      padding: 24px 46px 24px 49px;
+      .wrap3_2{
+        color: #3B5D54;
+        font-size: 16px;
+      }
+      .wrap3_1{
+        margin-right: 35px;
+        flex-shrink: 0;
+        width: 300px;
+        height: 291.87px;
+        background-color: #395212;
+        border-radius: 10px;
+        overflow: hidden;
+        img{
+          width: 300px;
+          height: 291.87px;
+        }
+      }
+    }
+    .wrap2 {
+      margin-top: 57px;
+      .wrap2_2{
+        box-sizing: border-box;
+        display: flex;
+        margin-top: 20px;
+        height: 340px;
+        width: 1085px;
+        background-image: url("@/assets/images/jx41@2x.png");
+        background-size: contain;
+        padding: 24px 44px 24px 53px;
+        overflow: hidden;
+
+        .wrap2_2_2{
+          margin-left: 42px;
+          flex-shrink: 0;
+          opacity: 1;
+          width: 300px;
+          height: 291px;
+          background-color: #4E0A0A;
+          border-radius: 10px;
+          overflow: hidden;
+          img{
+            width: 300px;
+            height: 291px;
+          }
+        }
+        .wrap2_2_1{
+
+          display: flex;
+          flex-direction: column;
+          justify-content: start;
+          .wrap2_2_1_2{
+            margin-top: 9px;
+            line-height: 20px;
+            color: #A26E52;
+            font-size: 16px;
+          }
+          .wrap2_2_1_1{
+            font-weight: 900;
+            color: #5F4040;
+            font-size: 20px;
+          }
+        }
+      }
+      .wrap2_1 {
+
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        .wrap2_1_2{
+          img{
+            width: 59.9px;
+            height: 28px;
+          }
+
+        }
+        .wrap2_1_1 {
+          margin-left: -58px;
+          border-radius: 10px;
+          background-color: #A46247;
+          width: 255px;
+          height: 60px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img{
+            width: 132px;
+            height: 44px;
+          }
+        }
+      }
+    }
+
+    .wrap1 {
+      margin-top: 107px;
+      display: flex;
+      flex-direction: column;
+
+      .wrap1_2 {
+        margin-top: 17px;
+        display: flex;
+
+        .wrap1_2_2 {
+          margin-left: 10px;
+          width: 25px;
+          height: 25px;
+          border-radius: 180px;
+          background-color: #A9AE8E;
+        }
+
+        .wrap1_2_1 {
+          width: 25px;
+          height: 25px;
+          border-radius: 180px;
+          background-color: #708F87;
+        }
+      }
+
+      .wrap1_1 {
+        display: flex;
+        align-items: center;
+
+        .wrap1_1_2 {
+          box-sizing: border-box;
+          width: 642px;
+          height: 347px;
+          border: 3px solid #54796F;
+          background-color: #fff;
+          border-left: none;
+          border-bottom-right-radius: 10px;
+          border-top-right-radius: 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: start;
+          padding: 25px 43px 24px 30px;
+
+          .wrap1_1_2_2 {
+            line-height: 20px;
+            font-weight: 900;
+            margin-top: 13px;
+            font-size: 14px;
+            color: #58605E;
+          }
+
+          .wrap1_1_2_1 {
+            display: flex;
+            align-items: center;
+
+            .wrap1_1_2_1_2 {
+              display: flex;
+              flex-direction: column;
+
+              .wrap1_1_2_1_2_2 {
+                width: 178px;
+                height: 20px;
+
+                img {
+                  width: 178px;
+                  height: 20px;
+                }
+              }
+
+              .wrap1_1_2_1_2_1 {
+                width: 140px;
+                height: 28px;
+
+                img {
+                  width: 140px;
+                  height: 28px;
+                }
+              }
+            }
+
+            .wrap1_1_2_1_1 {
+              margin-right: 25px;
+
+              img {
+                width: 40.88px;
+                height: 38.44px;
+              }
+            }
+          }
+        }
+
+        .wrap1_1_1 {
+          width: 385px;
+          height: 385px;
+          border-radius: 10px;
+          background-color: #54796F;
+          position: relative;
+
+          .wrap1_1_1_1 {
+            position: absolute;
+            bottom: 16px;
+            right: 17px;
+
+            img {
+              width: 378px;
+              height: 378px;
+
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .content1 {
+    width: 100%;
+    position: relative;
+
+    .wrap2 {
+      right: 320px;
+      position: absolute;
+      display: flex;
+      bottom: -50px;
+
+      .wrap2_2 {
+        display: flex;
+
+        .wrap2_2_1 {
+          margin-left: 59px;
+          width: 91px;
+          height: 91px;
+          background-color: #54796F;
+          border-radius: 6px;
+          position: relative;
+
+          .wrap2_2_1_1 {
+
+            right: 10px;
+            bottom: 10px;
+            position: absolute;
+
+            img {
+              width: 91px;
+              height: 91px;
+            }
+          }
+        }
+
+        .wrap2_2_2 {
+          position: relative;
+          margin-left: 20px;
+          width: 91px;
+          height: 91px;
+          background-color: #5F4040;
+          border-radius: 6px;
+
+          .wrap2_2_2_1 {
+            right: 10px;
+            bottom: 10px;
+            position: absolute;
+
+            img {
+              width: 91px;
+              height: 91px;
+            }
+          }
+        }
+
+        .wrap2_2_3 {
+          position: relative;
+          margin-left: 20px;
+          width: 91px;
+          height: 91px;
+          background-color: #A46247;
+          border-radius: 6px;
+
+          .wrap2_2_3_1 {
+            right: 10px;
+            bottom: 10px;
+            position: absolute;
+
+            img {
+              width: 91px;
+              height: 91px;
+            }
+          }
+        }
+      }
+
+      .wrap2_1 {
+        position: relative;
+        display: flex;
+
+        .wrap2_1_1 {
+          right: 10px;
+          position: absolute;
+          bottom: 10px;
+          width: 25px;
+          height: 25px;
+          border-radius: 180px;
+          background-color: #708F87;
+        }
+
+        .wrap2_1_2 {
+          position: absolute;
+          bottom: 10px;
+
+          width: 25px;
+          height: 25px;
+          border-radius: 180px;
+          background-color: #A9AE8E;
+        }
+
+      }
+
+    }
+
+    .wrap1 {
+      width: 100%;
+      height: 800px;
+
+      img {
+        width: 100%;
+        height: 100%;
+
+      }
+    }
+  }
+}
+</style>