Skip to content

E
exhibition_page
提交 6328d94a authored 作者: Anix's avatar Anix
浏览文件
操作

六枝精品展

上级 578acb5c
隐藏空白字符变更
内嵌 并排
正在显示 包含 617 行增加 和 18 行删除
src/router/index.js
浏览文件 @ 6328d94a
......@@ -160,6 +160,11 @@ const routes = [
name: 'zggzsgwdzjlz',
component: () => import('@/views/boutique/components/zggzsgwdzjlz/index.vue')
},
{
path: '/lzsg',
name: 'LZSG',
component: () => import('@/views/boutique/components/lzsg/index.vue')
},
// 404
......
src/views/boutique/components/lzsg/index.vue
浏览文件 @ 6328d94a
<template>
<div class="lzsg-show">
<!-- 第一部分 -->
<div>
<img src="" alt="">
<div class="img-top">
<img src="" alt="">
<div class="lzsg-show">
<!-- 第一部分 -->
<div class="part-1">
<img
src="@/assets/imgs/topic/lzsg/banner.png"
alt=""
class="wow animate__animated animate__fadeIn"
data-wow-delay="0.1s"
/>
<div class="img-top wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/topic/lzsg/top.png" alt="" />
</div>
<div
class="img-title wow animate__animated animate__fadeInUp"
data-wow-delay="0.3s"
>
<img src="@/assets/imgs/topic/lzsg/title.png" alt="" />
</div>
<p
class="wow animate__animated animate__fadeInDown"
data-wow-delay="0.5s"
>
贵州六枝梭戛生态博物馆
</p>
</div>
<!-- 中间部分 -->
<div
class="part-middle wow animate__animated animate__fadeInUp"
data-wow-delay="0.5s"
>
<div>
<img src="@/assets/imgs/topic/lzsg/txt-bg.png" alt=""/>
<div class="content">
<nav>六枝原则</nav>
<p v-for="node in principles">{{ node }}</p>
</div>
</div>
</div>
<!-- 第二部分 -->
<div class="part-2">
<img
src="@/assets/imgs/topic/lzsg/bg.png"
alt=""
class="bg wow animate__animated animate__fadeIn"
/>
<img
src="@/assets/imgs/topic/lzsg/bg-color.png"
alt=""
class="bg-color wow animate__animated animate__fadeInRight"
/>
<div class="content">
<div class="title wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
<img src="@/assets/imgs/topic/lzsg/yc.png" alt="" />
</div>
<div class="tabs wow animate__animated animate__bounceIn" data-wow-delay="0.5s">
<ul>
<li v-for="(node, i) in details" :key="i">
<div class="detail-card">
<!-- <img src="@/assets/imgs/topic/lzsg/tab.png" alt="" /> -->
<span>{{ node.title }}</span>
</div>
</li>
</ul>
</div>
<div class="detail wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
<div class="desc">
“物质生活的生产方式制约着整个社会生活、政治生活和精神生活的过程。”因此，在走进长角苗丰富多彩的文化生活之前，让我们先了解一下长角苗同胞的生产生活。长角苗社区海拔在1400-2200米之间，聚族深居山腰或山顶，以传统农业为主，旱地作物有玉米、洋芋、豆类及蔬菜等，没有水田;以家庭饲养业和经济作物种植为副业，解口养殖业主要是养鸡、养猪、养生、养羊等，经济作物种植有核桃、樱桃等·长角苗住房简陋，生产工具、生活用具较少。以玉米为主食。每家均有一座燃煤土灶
，常年不熄。
</div>
<div class="swiper">
<div class="name">
<img src="@/assets/imgs/topic/lzsg/title-bg.png" alt="" />
<p>
建<br />筑<br />|<br />木<br />结<br />构<br />草<br />顶<br />房
</p>
</div>
<div class="pic">
<div>
<img
src="@/assets/imgs/topic/lzsg/content-bg.png"
alt=""
class="pic-content-bg"
/>
<img
src="@/assets/imgs/topic/lzsg/content-1.png"
alt=""
class="pic-content"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第三部分 -->
<div class="part-3">
<img src="@/assets/imgs/topic/lzsg/community.png" alt="" class="bg wow animate__animated animate__fadeIn" />
<img
src="@/assets/imgs/topic/lzsg/community-color.png"
alt=""
class="bg-color wow animate__animated animate__fadeInRight"
/>
<div class="content">
<div class="title wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/topic/lzsg/sqfz.png" alt="" />
</div>
<p class=" wow animate__animated animate__fadeIn">
自建立生态博物馆以来，长角苗社区文化遗产和自然遗产得到了整体保护，社区经济不断发展，基础设施建设不断完善，文化教育水平不断提高，科学知识不断增强，文化交流不断扩大，社区居民生活水平不断得到完善。
</p>
<div class="swiper-area wow animate__animated animate__fadeInUp">
<div class="swiper">
<swiper :options="swiperOption" ref="mSwiper">
<swiper-slide v-for="(img, i) in imgs" :key="i">
<div class="swiper-img">
<div>
<img
:src="require(`@/assets/imgs/topic/lzsg/${img.url}.png`)"
alt=""
:class="`num-${i}`"
/>
</div>
<span>{{ img.name }}</span>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</div>
<!-- 第四部分 -->
<div class="part-4">
<img src="@/assets/imgs/topic/lzsg/bg3.png" alt="" class="wow animate__animated animate__fadeIn" />
<div class="content">
<div class="title wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/topic/lzsg/zgjs.png" alt="" />
</div>
<div class="struc-area">
<div class="normal wow animate__animated animate__bounceInLeft">
<img src="@/assets/imgs/topic/lzsg/struc.png" alt="" class="main" />
<div class="scene1">
<img src="@/assets/imgs/topic/lzsg/scene1.png" alt="" />
<span>
<img src="@/assets/imgs/topic/lzsg/pointer.png" alt="" />
</span>
</div>
<div class="scene2">
<img src="@/assets/imgs/topic/lzsg/scene2.png" alt="" />
<span>
<img src="@/assets/imgs/topic/lzsg/pointer.png" alt="" />
</span>
</div>
<div class="img-title">
<img src="" alt="">
<div class="scene3">
<img src="@/assets/imgs/topic/lzsg/scene3.png" alt="" />
<span>
<img src="@/assets/imgs/topic/lzsg/pointer.png" alt="" />
</span>
</div>
</div>
<div class="mini wow animate__animated animate__bounceInRight">
<img
src="@/assets/imgs/topic/lzsg/struc-mini.png"
alt=""
class="struc"
/>
<img src="@/assets/imgs/topic/lzsg/zlpmt.png" alt="" class="txt" />
</div>
</div>
<!-- 中间部分 -->
<div></div>
<!-- 第二部分 -->
<div></div>
<!-- 第三部分 -->
<div></div>
<div class="desc wow animate__animated animate__fadeInUp">
<p>
当人们平等地看待梭戛苗族社区，会发现这里蕴藏着人类诸多的智慧光芒。在与外面越来越多的交流中，苗族社区会发生深刻的变化，生态博物馆站在保护优秀传统文化和自然遗产的立场，记录下这些过程，让参观和研究者认识到长角苗作为独立文化群体存在的价值，使得生活在不同文化背景的人们能够相互理解和尊重。
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
data() {
return {}
}
}
components: {
swiper,
swiperSlide,
},
data() {
return {
principles: [
"村民是他们文化的真正主人。他们拥有解释和证明其文化的权利。",
"文化的含义及其价值，只能通过人的理解和建立在了解基础上的解释才能得到确认。对文化的理解必须得到加强。",
"在生态博物馆中，公众的参与至关重要。文化是一种共同的和民主的美好事物，必须通过民主的方式来进行管理。",
"当旅游和文化保护发生冲突时，后者必须具有优先权·文化造产中的真品不应当出售，但以传统工艺为基础的高质量的纪念品生产应当得到鼓励。",
"长远和至面的规划至关重要。从长远利益出发损害文化的短期经济利益必须避免。",
"文化遗产的保护必须与整体环境的保护相结合。在这方面，传统技术和材料至关重要。",
"观众在道德上有义务以尊重的态度行使自己的行为。他们必须得到规范性的指导。",
"生态博物馆没有一种通用的模式。它们应当结合自身独特的文化和社会条件而各具特色。",
"在生活社区中建立生态博物馆，促进社会发展是先决条件·在不改变传统价值观的前提下，居民的幸福安康必须得到加强。",
],
details: [
{ title: "生产生活" },
{ title: "手工技艺" },
{ title: "服饰头饰" },
{ title: "岁时节令" },
{ title: "人生礼俗" },
{ title: "民间信仰" },
{ title: "音乐舞蹈" },
{ title: "社会结构" },
],
imgs: [
{ url: "community-1" },
{ url: "community-2" },
{ url: "community-3" },
],
swiperOption: {
effect: "coverflow",
slidesPerView: 3,
grabCursor: true,
loop: true,
speed: 10,
initialSlide: 2,
coverflowEffect: {
rotate: 0,
depth: 200,
stretch: -400,
slideShadows: false,
},
// 显示分页
/* pagination: {
el: null,
clickable: true, //允许分页点击跳转
}, */
/* // 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}, */
on: {
slideChange: () => {
let swiper = this.$refs.mSwiper.swiper;
},
},
},
};
},
};
</script>
<style lang="scss" scoped>
.lzsg-show {
width: 100%;
overflow: hidden;
position: relative;
p {
margin: 0;
}
::v-deep img {
width: 100%;
height: 100%;
}
[class|="img"] {
position: absolute;
width: 100%;
}
> div {
position: relative;
}
.part-1 {
height: 1080px;
.img-top {
width: 100%;
height: 182px;
top: 0;
left: 0;
}
.img-title {
top: 35%;
width: 100%;
height: 219px;
text-align: center;
> img {
width: 1209px;
}
}
p {
position: absolute;
top: 56%;
font-size: 45px;
width: 100%;
text-align: center;
color: #f2f2f2;
letter-spacing: 3px;
font-weight: 800;
font-family: cursive;
}
}
.part-middle {
position: absolute;
width: 100%;
height: 572px;
top: 750px;
z-index: 1;
> div {
width: 1550px;
height: 100%;
margin: auto;
position: relative;
> img {
width: 100%;
height: 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
line-height: 2;
padding: 20px 40px;
color: #fff;
> nav {
font-size: 36px;
}
> p {
padding: 8px 0;
font-weight: 600;
font-size: 16px;
}
}
}
}
.part-2 {
width: 100%;
height: 2279px;
overflow: hidden;
.bg-color {
width: 1915px;
height: 2211px;
position: absolute;
top: -90px;
right: 0;
}
.bg {
position: absolute;
top: 0;
left: 0;
}
> .content {
position: relative;
z-index: 1;
padding-top: 320px;
> .title {
width: 100%;
height: 245px;
text-align: center;
> img {
width: 892px;
}
}
> .tabs {
margin-top: 70px;
ul {
width: 100%;
display: flex;
justify-content: space-around;
padding: 0 80px;
}
}
.detail-card {
width: 170px;
height: 170px;
position: relative;
background-image: url(@/assets/imgs/topic/lzsg/tab.png);
background-size: cover;
&:hover,
&.active {
cursor: pointer;
background-image: url(@/assets/imgs/topic/lzsg/tab-active.png);
}
> span {
position: absolute;
color: #fff;
font-size: 32px;
letter-spacing: 5px;
width: 80px;
top: 50%;
left: 50%;
transform: translate(-44%, -52%);
font-family: "华文行楷";
// font-weight: 800;
}
}
.detail {
width: 80%;
margin: auto;
color: #fff;
padding-top: 80px;
> .desc {
font-size: 28px;
line-height: 1.6;
text-indent: 56px;
}
> .swiper {
position: relative;
.name {
width: 116px;
height: 477px;
position: absolute;
top: 100px;
left: 140px;
> p {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 38px;
text-align: center;
padding: 40px 0;
font-family: "楷体";
font-weight: 800;
}
}
.pic {
width: 100%;
padding-top: 200px;
> div {
position: relative;
> .pic-content-bg {
width: 790px;
height: 790px;
margin: auto;
display: block;
}
> .pic-content {
width: 870px;
height: 580px;
position: absolute;
top: 50%;
left: 52%;
transform: translate(-50%, -50%);
}
}
}
}
}
}
}
.part-3 {
width: 100%;
height: 1528px;
> .bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
> .bg-color {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
height: 1410px;
}
.content {
position: relative;
padding-top: 160px;
text-align: center;
z-index: 2;
> .title {
width: 100%;
height: 245px;
> img {
width: 482px;
}
}
> p {
width: 80%;
margin: auto;
padding-top: 60px;
font-size: 28px;
text-align: left;
text-indent: 56px;
line-height: 1.6;
color: #fff;
}
> .swiper-area {
padding-top: 180px;
}
.swiper-img {
width: 900px;
> div {
width: 100%;
height: 600px;
}
> span {
color: #fff;
font-size: 30px;
padding: 20px 0;
display: block;
width: 100%;
text-align: center;
}
}
}
}
.part-4 {
width: 100%;
height: 2343px;
> img {
position: absolute;
top: 0;
left: 0;
}
> .content {
position: relative;
z-index: 1;
padding-top: 100px;
height: 100%;
> .title {
width: 100%;
height: 245px;
text-align: center;
> img {
width: 482px;
}
}
.struc-area {
position: relative;
.normal {
position: absolute;
width: 100%;
top: 50px;
> div {
position: absolute;
> span {
position: absolute;
width: 17px;
height: 142px;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
}
}
> .main {
position: absolute;
width: 1817px;
height: 817px;
top: 460px;
}
.scene1 {
width: 457px;
height: 282px;
top: 200px;
left: 400px;
> span {
left: 60%;
}
}
.scene2 {
width: 447px;
height: 270px;
top: 400px;
right: 400px;
}
.scene3 {
width: 470px;
height: 286px;
top: 1250px;
left: 500px;
> span {
transform: rotate(180deg);
bottom: auto;
top: -100px;
}
}
}
> .mini {
position: absolute;
top: 0;
right: 50px;
.struc {
width: 611px;
height: 364px;
}
.txt {
width: 178px;
height: 67px;
position: absolute;
bottom: 0;
left: 0;
}
}
}
> .desc {
position: absolute;
width: 100%;
bottom: 100px;
> p {
width: 80%;
margin: auto;
line-height: 1.6;
font-size: 28px;
color: #fff;
text-indent: 56px;
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论