diff --git a/src/assets/images/116e81@2x.png b/src/assets/images/116e81@2x.png new file mode 100644 index 0000000..851b428 Binary files /dev/null and b/src/assets/images/116e81@2x.png differ diff --git a/src/assets/images/H—128-A-0001@2x.png b/src/assets/images/H—128-A-0001@2x.png new file mode 100644 index 0000000..3645d12 Binary files /dev/null and b/src/assets/images/H—128-A-0001@2x.png differ diff --git a/src/assets/images/L—0381-D-0001@2x.png b/src/assets/images/L—0381-D-0001@2x.png new file mode 100644 index 0000000..ebd8778 Binary files /dev/null and b/src/assets/images/L—0381-D-0001@2x.png differ diff --git a/src/assets/images/YW—0314-A-1@2x.png b/src/assets/images/YW—0314-A-1@2x.png new file mode 100644 index 0000000..637db32 Binary files /dev/null and b/src/assets/images/YW—0314-A-1@2x.png differ diff --git a/src/assets/images/ntroduction@3x.png b/src/assets/images/ntroduction@3x.png new file mode 100644 index 0000000..a74c2c2 Binary files /dev/null and b/src/assets/images/ntroduction@3x.png differ diff --git a/src/assets/images/yqbwgjs@3x.png b/src/assets/images/yqbwgjs@3x.png new file mode 100644 index 0000000..f9ec03d Binary files /dev/null and b/src/assets/images/yqbwgjs@3x.png differ diff --git a/src/assets/images/zu5@2x.png b/src/assets/images/zu5@2x.png new file mode 100644 index 0000000..9045eb4 Binary files /dev/null and b/src/assets/images/zu5@2x.png differ diff --git a/src/views/navigation/index.vue b/src/views/navigation/index.vue index 6a1be04..8718e0a 100644 --- a/src/views/navigation/index.vue +++ b/src/views/navigation/index.vue @@ -13,10 +13,53 @@
-
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
延庆博物馆（Yanqing Museum）是北京市延庆区一座大型综合性博物馆，属中国区县级大型综合性博物馆，位于延庆城区主干道繁华街区（妫水北街24号），其前身为延庆区文物管理所展陈库房。 + 延庆博物馆是目前北京郊区规模最大、功能最全的区级现代化综合性博物馆，2004年开始筹备，2008年9月30日正式对外开放，2016年实施升级改造工程，2018年11月1日升级改造完成正式对外开放。全馆建筑面积逾6100平方米，展厅面积2400余平方米。延庆博物馆以延庆区文物管理所历年保藏、征集和延庆地区出土文物为基本素材
+
+
+
+
@@ -30,6 +73,96 @@ height: 2470px; background-size: contain; background-image: url("@/assets/images/zu16@2x.png"); + display: flex; + flex-direction: column; + align-items: center; + + .wrap1 { + margin-top: 107px; + display: flex; + flex-direction: column; + + .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 { @@ -37,21 +170,93 @@ position: relative; .wrap2 { + right: 320px; position: absolute; display: flex; + bottom: -50px; - .wrap2_2{ - - } - .wrap2_1 { + .wrap2_2 { display: flex; - .wrap2_1_1{ + + .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{ + + .wrap2_1_2 { + position: absolute; + bottom: 10px; + width: 25px; height: 25px; border-radius: 180px;