s
This commit is contained in:
Phoenix
parent
3109518425
commit
6ebad1eefd
BIN
src/assets/images/2323tys.png
Normal file
BIN
src/assets/images/2323tys.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/images/37d12f2eb9389b502d3fca2a863.png
Normal file
BIN
src/assets/images/37d12f2eb9389b502d3fca2a863.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
src/assets/images/800@3x.png
Normal file
BIN
src/assets/images/800@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/H—128-A-0001@3x.png
Normal file
BIN
src/assets/images/H—128-A-0001@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/L—0381-D-0001@3x.png
Normal file
BIN
src/assets/images/L—0381-D-0001@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/YW—0314-A-1@3x.png
Normal file
BIN
src/assets/images/YW—0314-A-1@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/images/dfdf8@2x.png
Normal file
BIN
src/assets/images/dfdf8@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/images/dfdjqqd@2x.png
Normal file
BIN
src/assets/images/dfdjqqd@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/fdfdfdf1.png
Normal file
BIN
src/assets/images/fdfdfdf1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/assets/images/hb123322.png
Normal file
BIN
src/assets/images/hb123322.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/jingqingqita1.png
Normal file
BIN
src/assets/images/jingqingqita1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/images/jx1@2x.png
Normal file
BIN
src/assets/images/jx1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/images/jx58@2x.png
Normal file
BIN
src/assets/images/jx58@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/assets/images/sdfsfddfd.png
Normal file
BIN
src/assets/images/sdfsfddfd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/zi17@3x.png
Normal file
BIN
src/assets/images/zi17@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/images/zu28@3x.png
Normal file
BIN
src/assets/images/zu28@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/zughjlkop.png
Normal file
BIN
src/assets/images/zughjlkop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
src/assets/images/zujsf23@2x.png
Normal file
BIN
src/assets/images/zujsf23@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
@ -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>
|
||||
|
||||
494
src/views/navigation/model-index.vue
Normal file
494
src/views/navigation/model-index.vue
Normal file
@ -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>
|
||||
586
src/views/navigation/pc-index.vue
Normal file
586
src/views/navigation/pc-index.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user