Skip to content

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

jyycc精品展更新

上级 1e199fa2
隐藏空白字符变更
内嵌 并排
正在显示 包含 1114 行增加 和 0 行删除
src/router/index.js
浏览文件 @ e7c25657
......@@ -145,6 +145,11 @@ const routes = [
keepAlive: false
}
},
{
path: '/jyycc',
name: 'JYYCC',
component: () => import('@/views/boutique/components/jyycc')
},
// 404
{
......
src/views/boutique/components/jyycc-dmby.json 0 → 100644
浏览文件 @ e7c25657
[
{
"title": "寻耕牧人家",
"data": [
{
"title": "黔山躬耕",
"txt": "贵州村落的总体特点是：依山傍水而居，聚落小而分散。每个聚落如散珠般点缀在崇山峻岭之中，形成了每个聚落相对独立的文化生态。不同的民族文化形态之间，互不干扰，互相欣赏，共生共荣。这些村落各具特色，生产生活与周围环境协调，拥有着天人合一、因地制宜之美。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "印象村落",
"txt": "传统民族建筑，特别是公共建筑，是贵州世居民族标志性的建筑文化名片。它们是贵州各族人民，以就地取材、因地制宜的原生态观念，通过千百年传承的中华民族传统建筑结构技艺，结合自身民族特色审美，通过日积月累、代代相传逐渐创造出来的，具有浓郁的山地特色和民族风情。同时，建筑的类型、样式、风格及构造方法，也反映了不同地域、不同民族的独特传统社会结构、价值观念、审美情趣等文化传承。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
},
{
"title": "宜居之家",
"txt": "饮食是人类生存的根本，作为一种文化现象，它不但是人类生物属性的行为反映，而且蕴涵有人们从蛮荒走向文明，从山林走向平地的进化信息。它不仅映照一个民族的饮食变迁，同时还具有深刻的民族心态以及厚重的民族文化内涵。贵州世居民族独特的饮食文化，主要表现在丰富的主、副食和口味偏酸辣的名特菜，多姿多彩的酒文化、茶文化上。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "黔味飘香",
"txt": "饮食是人类生存的根本，作为一种文化现象，它不但是人类生物属性的行为反映，而且蕴涵有人们从蛮荒走向文明，从山林走向平地的进化信息。它不仅映照一个民族的饮食变迁，同时还具有深刻的民族心态以及厚重的民族文化内涵。贵州世居民族独特的饮食文化，主要表现在丰富的主、副食和口味偏酸辣的名特菜，多姿多彩的酒文化、茶文化上。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
}
]
},
{
"title": "看百彩千辉",
"data": [
{
"title": "霓裳世界",
"txt": "贵州民族服饰一直以绚丽的色彩、精美的样式，繁多的种类以及丰富的文化内涵而著称，在中华民族服饰大观园中居于重要地位，被誉为“穿在身上的史书”。不同地域、不同款式、不同色彩、不同图纹的组合与搭配，构成了贵州丰富多彩的传统民族服饰霓裳世界。贯首衣是人类服装最初的型式之一，以“穿中而贯首”得名,早在新石器时期就已出现。历经数千年，这一古老的服装款式在贵州苗瑶等民族中仍然可见。对襟衣，顾名思义，上衣两边衣襟呈对称造型，或交叉于前胸，沿袭了中国古代上衣下裳的型制，是中国传统服装的基本类型。大襟衣，可追溯至战国时期的楚袍，在秦汉时期得以推崇，成为一种流行的服装款式且为官服采用。大襟衣开口在左右腋下，各民族根据各自的信仰、审美，选择他们所喜闻乐见的图案样式来装饰衣襟，从而达到美化服装的目的。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "锦织岁月",
"txt": "古代丝织物中“锦”是代表中华民族传统文化中最高技术水平的织物。早在殷商时代已有雏形，到了周代已出现成熟的织锦。从此，自汉朝至明清，织锦从古代皇家专用，走向“丝绸之路”、最后步入民间，装点着中华民族的美好生活。贵州的苗锦、侗锦、土家锦、布依锦等各族的织锦大多以纱线为经、彩丝为纬，按传承于心的特色图案细细穿梭，与其他省份的云锦、蜀锦、宋锦、壮锦等一样，以色彩丰富的丝线通过一定规律的经纬交织对美的精心表达。贵州各族同胞日复一日创造着流光溢彩的织锦，也将贵州人民的审美传承与中华民族的传统智慧紧密编织在一起，泛出多彩耀目的光泽。 ",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
},
{
"title": "绣中乾坤",
"txt": "刺绣是贵州民族传统手工艺中最绚丽的篇章。心灵手巧的各民族妇女用刺绣记载历史、传承文化、憧憬美好生活。刺绣在她们世代的传承与创造中，形成了色彩丰富、造型多样、工艺精美、赏心悦目的装饰艺术。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "印染生花",
"txt": "贵州气候湿润，盛产蜂蜡等防染材料和蓝靛等染料，为缬染制作提供了极大的便利。缬染工艺盛行于唐代，贵州境内发现得最早的蜡染制品是平坝县下坝棺材洞出土的宋代点蜡幔和鹭鸟纹彩色蜡染衣。缬染工艺在贵州各民族中世代相传，流行至今。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "似雪银花",
"txt": "贵州各民族多有以银为饰的习俗，从千百年跋涉迁徙的实用目的，到寻找家园装点自身的审美表达，他们天才的运用中华民族历史上最通用的银光灿灿，通过铸模、簪刻、掐丝、烧蓝等一系列传统精湛的中华民族传统技艺描绘原始图腾、传承美好神话、记录精神信仰、表达感情意识。银饰对他们而言不仅可以带来吉祥和幸福，也是魅力与财富的象征，是贵州各民族最喜爱的装饰品。贵州各民族的银饰种类繁多，大体可分为头饰、胸颈饰、手饰和衣饰。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
}
]
},
{
"title": "探礼俗民风",
"data": [
{
"title": "敬礼重仪",
"txt": "从出生到成人，从恋爱到结婚，从年迈到死亡，贵州不同的民族，在人生的每个重要环节，都有着特定的民族礼俗。民族社会成员自觉遵循着本民族的各种礼俗，其思想、态度、情感、行为都强烈体现着民族礼俗文化的印记。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "逢年过节",
"txt": "节日是认识一个民族、了解他们文化的最好机会，每一个节日都有特定的意义。在那些芦笙芒筒齐奏的神韵里，在那些银潮滚滚、歌舞翩翩的身影中，贵州各民族通过节日，或是追寻历史的记忆；或是感恩自然对人类的给予；或是虔诚的缅怀先祖；或是增进彼此的交往。这是人与四季的狂欢，也是历史与现实的对话。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
}
]
},
{
"title": "赏歌舞曲艺",
"data": [
{
"title": "以歌言情",
"txt": "贵州少数民族民间音乐文化可追溯到远古时期。至唐宋，已发展得相当成熟。明清以来，关于贵州各民族民间音乐歌舞的记载，更是屡见不鲜。时至今日，歌唱依然伴随着少数民族同胞们生活的方方面面，“饭养身、歌养心”的观念深入骨髓。贵州少数民族民歌种类繁多、曲调优美、内容丰富，具有浓郁的生活气息和独特的民族色彩。口传心授，世代传承，体现了生活如歌，歌如生活的和谐之美。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/1.png"
},
{
"title": "载舞升平",
"txt": "《诗经.大序》日:“咏歌之不足，不知手之舞之足之蹈之也”。舞蹈是人类最早产生的艺术形式，具有多元的社会意义和作用，包括祭祀、礼仪、生产、庆典、娱乐、社交及求偶等。它以有节奏的肢体动作或借助道具为表现语言，表达人类的情感和诉求。贵州民族舞蹈历史悠久、种类繁多、内容丰富、形式多样，且象征寓意明显，其特点主要表现在积淀远古遗存、传承原始文化、在民族交融中发展，以及歌、舞、乐三者结合的传承方式等方面。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
},
{
"title": "百戏千面",
"txt": "戏剧在中国最早可以追溯到汉代，在贵州的山林水石间，各族人民一样有着对自然、对历史、对艺术、对生活以及对人情世故的感悟、熔炼与升华，这些总结在各民族你中有我的交汇中，在歌与舞的交流中，最终交融凝结成了他们自己独特的戏剧表演形式，在唱念坐打中祭祀祈福、在嬉笑怒骂中释放欢乐。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
},
{
"title": "能说会唱（曲艺）",
"txt": "贵州作为少数民族聚居区，历史文化深厚，民族风情浓郁，长期以来，有大量跟生活紧密相连的艺术作品纷纷涌现。其中，贵州各民族用曲艺的形式，唱出生活的百感千味。通俗的歌词，质朴的说唱，简单的装扮，恰是贵州曲艺贴近自然，源于其心的可贵之处。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
},
{
"title": "吹拉弹打（乐器）",
"txt": "贵州少数民族乐器斑斓绚丽，多达百种以上，按照演奏方式的不同，主要分为：吹吸乐器、拉弦乐器、弹拔乐器、打击乐器四大类。这些古老的民族乐器在漫长的历史长河中，有的被作为图腾顶礼膜拜，有的被作为灵物可通达阴阳两界，还有的被作为财富的代表或者权利的象征……时至今日，在贵州少数民族的生产生活中，乐器发挥着越来越重要的作用，它既是人们娱乐的器物，更是人们交往的工具；它既是渊源流传的语言，倾诉着演奏者的心声与情感；更是创造者与工匠们世代相传的技艺与智慧。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
},
{
"title": "博技展艺",
"txt": "贵州是一个多民族地区，少数民族传统体育历史悠久，丰富多彩，源远流长。它是少数民族世世代代在长期的生产、生活和社会实践中所形成的。在特殊的地域环境、生活方式和宗教信仰中，形成了风格各异，形式多样，各具民族文化特色的体育活动。",
"img": "@/assets/imgs/topic/jyycc/zt2/1/2.png"
}
]
}
]
\ No newline at end of file
src/views/boutique/components/jyycc-nation.json 0 → 100644
浏览文件 @ e7c25657
[
[
{
"title": "汉族厅",
"txt": [
"汉族与“炎黄”“华夏”渊源深厚。自汉朝建立后始称汉，汉人、汉族的称呼自此流传下来。汉族使用汉语、汉文，属汉藏语系。", "汉族在贵州省分布广泛，分别于不同的历史时期陆续进入贵州，汉代、明代、清代、抗日战争和三线建设等时期的规模较大，尤其是明王朝在贵州屯兵设堡以后，汉族人民大量进入贵州，给贵州带来了先进的生产技术和汉族文化，对贵州经济文化的繁荣与发展做出了卓越的贡献。汉族在贵州的分布由最初的交通主干道，逐渐辐射到各个乡村。"
]
},
{
"title": "苗族厅",
"txt": [
"贵州是苗族人口最多的省份，苗族又是贵州人口最多的少数民族。人口遍布全省，以黔东南、黔南、黔西南、毕节、安顺等州、市最多。苗族语言属汉藏语系苗瑶语族苗语支。贵州苗族集合中国苗族主要文化特征，如众多的方言、次方言和土语，主要的服饰类型，重要的工艺美术，基本的风俗习惯等，是中国苗族文化的代表，堪称“苗族的大本营”。"
]
},
{
"title": "布依族厅",
"txt": [
"布依族源于我国古代南方四大族系的百越族系，为骆越支（族）系中的一支。布依族是贵州的土著民族之一，元代始，称为“仲家”，明、清亦有“仲苗”“仲蛮”“青仲”等称谓。贵州布依族人口现有二百五十余万人，主要聚居在黔南布依族苗族自治州、黔西南布依族苗族自治州、安顺市、贵阳市等地区。其村寨依山傍水，寨前田畴纵横，河溪环绕，水土肥沃。其语言属汉藏语系壮侗语族壮傣语支，分为黔南、黔中和黔西三个土语区。"
]
},
{
"title": "侗族厅",
"txt": [
"侗族源于百越族系。宋代称其为“仡伶”，明清称“峒蛮”“峒苗”“峒人”“峒家”。贵州侗族现有人口约140余万人，主要聚居在黔东南地区和铜仁市等地区。其语言属汉藏语系壮侗语族侗水语支，分为南北两种方言。侗族民间艺术丰富多彩，素有“诗的家乡，歌的海洋”之称。侗族的鼓楼、风雨桥建筑，名满神州。节日主要有侗年、萨玛节、牛王节"
]
},
{
"title": "土家族厅",
"txt": [
"土家族历史悠久，是贵州最古老的民族之一，贵州土家族主要集中在贵州东北部的铜仁市，与春秋战国时期的巴人有渊源关系，是古代巴人的后裔。贵州土家族原有自己的民族语言，属汉藏语系藏缅语族，在明代时仍广泛使用土家语，现已基本消失，普遍说汉语，用汉文。"
]
},
{
"title": "彝族厅",
"txt": [
"贵州彝族自称“诺苏”，是贵州最古老的民族之一，主要分布在贵州西北部的毕节市和六盘水市。贵州境内的彝族与古代的氐羌有密切的族属渊源关系。彝族有自己的语言，彝语属汉藏语系藏缅语族彝语支，贵州彝语属彝语东部方言中黔西北次方言和盘县次方言。不同的历史时期，彝族族称的称谓有所不同，秦汉时期，被称为“昆明”“叟”“嶲”，唐宋时期，被称为“爨（音cuan）蛮”“乌蛮”，元明清被称为“倮”“罗罗”“夷人”，中华人民共和国成立后，毛泽东主席征求彝族代表的意见，提议将礼器之“彝”作为其民族的族称，彝族代表一致赞成，从此“彝族”就被正式定为彝族各支系的统一族称。"
]
},
{
"title": "仡佬族厅",
"txt": [
"仡佬族历史悠久，是贵州最为古老的民族，被贵州各族共认为“地盘业主，古老前人”。先秦至秦汉时期的部分濮人和汉至南北朝时期的部分僚人，曾相继是仡佬族的先民，唐代称为“葛僚”“仡僚”，宋代称为“犵狫”，元、明、清时称为“仡佬”，中华人民共和国成立后，根据本民族的意愿，统一称为仡佬族。仡佬语属汉藏语系，壮侗语族仡佬语支，贵州仡佬语分稿（黔中）、阿欧（黔西）、哈给（黔中北）、多罗（黔西南）四种方言。现在汉语是仡佬族进行交流的主要工具，仡佬族普遍使用汉语、汉文。"
]
},
{
"title": "水族厅",
"txt": [
"贵州是水族的大本营，占全国水族人口的90%以上。水族主要聚居在贵州三都、荔波、都匀、独山、福泉以及榕江、丹寨、雷山、从江等县市。其中全国近半数水族人口聚居在贵州三都水族自治县，三都是全国唯一的水族自治县。水族的语言是水语，属汉藏语系壮侗语族侗水语支。水族有自己的文字，称为“水书”。 水族还有本民族的历法、节日、乐舞，是贵州独具特色的一个世居民族。主要分布在黔南自治州三都水族自治县、荔波县、都匀市、独山县，黔东南自治州榕江县、丹寨县、雷山县、从江县。"
]
},
{
"title": "回族厅",
"txt": [
"回族是回回民族的简称，主要是由元朝东来的中亚各族人和波斯人、大食人以及汉人、蒙人、回鹘人等组成。贵州境内的回族多是在宋元时期随蒙古军征战进入的。现今主要居住在毕节地区、黔西南州、安顺市、六盘水市、贵阳市等地，主要从事农业生产，全民信仰伊斯兰教，传统节日有开斋节、古尔邦节和圣纪节，都来源于伊斯兰教。回族一般使用汉语汉字，但在宗教活动中使用阿拉伯文和波斯文经典，民族内部交往中，也保留着一些阿拉伯语和波斯语。"
]
},
{
"title": "白族厅",
"txt": [
"白族由古至今，称“僰人”“白尼”“罗举”“白人”“白儿子”“民家”等，自称他称早已难辨。贵州的白族，大致由古“僰人”“西爨白蛮”的遗裔，“爨僰军”“龙家”“南京人”的后代组成。现主要分布于毕节市威宁、赫章、大方、黔西、金沙、织金、纳雍，六盘水市水城、盘县，以及安顺市、贵阳市等地，世代以农耕为主业。白族人民喜欢以歌表达思想，以舞抒发意愿，民歌、古歌、传说、谜语、神话广为流传。白语属于汉藏语系藏缅语族白语支（一说为彝语支），其大部分说本族语言，通晓汉语，其文字不少借用汉字。"
]
}
],
[
{
"title": "瑶族厅",
"txt": [
"贵州瑶族人口有4万余人，但支系多，居住分散。按支系呈小聚居、大杂居，点状形式分布于黔湘、黔桂边境一线。以荔波、从江、黎平为多，荔波的瑶山乡和瑶麓乡较为集中。瑶族崇尚自然、精于舞蹈，猴鼓舞是其一绝，山地经济特点突出，工于纺织和竹编藤编。多居于干栏式房屋，其服饰、习俗、语言及自称差异较大，瑶语属汉藏语系苗瑶语族，分苗语支和瑶语支，无文字。盘瑶有用汉文记录瑶族语言的《盘王大歌》等唱本。节日主要有盘王节、陀螺节、六月卯节、糯考节。"
]
},
{
"title": "壮族厅",
"txt": [
"贵州的壮族人口主要分布在黎平、从江、荔波、独山、兴义、都匀等县（市）以及贵阳市等地。其中从江壮族主要分布在该县西部的刚边壮族乡、秀塘壮族乡及宰便、高武、翠里、加榜等乡镇，是贵州壮族分布最集中、人口最多的地区。壮族居地自然资源丰富，以粮食生产为基础，喜食糯稻，多楼居，对内说壮语，对外说汉语，男女服饰衣着尚青黑，俗称“黑壮”。"
]
},
{
"title": "畲族厅",
"txt": [
"畲族分布在黔东南自治州的麻江县、凯里市以及黔南自治州的福泉市和都匀市。畲族先祖入黔前居住在江西赣江流域及赣东、赣东北一带，多是元末和明洪武年间或奉旨征讨、迁徒或避祸而迁入贵州。1996年6月贵州省人民政府同意认定前，称为“东家”，意为“东边”来的，自称“哈萌”（意思是客人）。明清时的一些贵州地方史志又称之为“东苗”“佟苗”。畲族与其他民族以大杂居、小聚居形式居住在高山、半山、山谷、河谷等地。聚居区说畲语，散居区说汉语，属汉藏语系苗瑶语族苗语支。"
]
},
{
"title": "仫佬族厅",
"txt": [
"仫佬族由古僚族群发展而来。贵州仫佬族自称“嘎窝”或“类窝”。在汉文历史文献中多以“木佬人”见称于世。据第六次人口普查统计贵州仫佬族有2.49万人，主要分布在黔东南自治州麻江县、凯里市、黄平县，黔南自治州福泉市、都匀市、瓮安县。仫佬族村寨多是由同姓父系血缘关系组成，一姓一寨、一姓数寨或数姓一寨小聚居。贵州仫佬族有本民族语言。"
]
},
{
"title": "满族厅",
"txt": [
"满族，起源于肃慎-女真系，直系先人是明代女真。后金天聪九年十月庚寅（1963年11月22日），后金国汗皇太极，公布 “我国建号‘满洲’，统绪绵远，相传奕世。”“满洲”出现。辛亥革命后简称为满族。贵州省世居的满族，大多在清朝的军事调动下进入贵州，之后留在了黔西、金沙、大方三县，以上三个县的结合部也就是现今贵州世居满族的主要聚居地。满族有自己的语言和文字，满语属阿尔泰语语系——通古斯语族满语支。"
]
},
{
"title": "蒙古族厅",
"txt": [
"“蒙古”史称“蒙兀室韦”，发源于今额尔古纳河流域。其于明末清初进入贵州，以余姓为主，其人数占全省蒙古族的80％以上。蒙古族有自己的语言文字,蒙古语属阿尔泰语系蒙古语族。迁入蒙古族适应贵州独特环境，形成了独特的蒙古族文化。据第六次人口普查数据显示，贵州省蒙古族41561人，主要散居在毕节市大方县，铜仁市思南县，石阡县、遵义市遵义县、凤冈县等地。"
]
},
{
"title": "羌族厅",
"txt": [
"贵州羌族自明清时期从川西北迁来，已有300多年的历史，是目前贵州18个世居民族中人数最少的民族，仅1 6 05人，主要聚居在铜仁市石阡县、江口县，其余的散居全省各地。因为特殊的居住环境和各民族间的交流融合，其语言、民风民俗、服饰等大都不同于祖居地的羌族，羌语已经消失，使用汉语，通用汉文，平常生活中不再着民族服装。但强烈的民族意识依然代代相传；羌族的一些习俗也保留了下来。"
]
}
]
]
\ No newline at end of file
src/views/boutique/components/jyycc.vue 0 → 100644
浏览文件 @ e7c25657
<template>
<div class="quality-jyycc">
<div class="top wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/topic/jyycc/top.png" alt="" />
</div>
<div class="content-one">
<img
src="@/assets/imgs/topic/jyycc/second.png"
class="wow animate__animated animate__fadeInUp"
alt=""
/>
<div class="desc">
<div class="topic wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/topic/jyycc/qnzx.png" alt="" />
</div>
<div
class="txt wow animate__animated animate__fadeInUp"
data-wow-delay="1s"
>
民族交汇的大走廊和集结地，濮人与华夏族系、氐羌族系、苗瑶族系、百越族系在这里交流融合，蒙古、回、自、老、满等民族于不同时期、不同方向进入贵州，在长期大杂居、小聚居的相处中，逐渐形成贵州的汉、苗、布依、侗、土家、彝、仡佬、水、回、白、瑶、壮、畲、仫佬、毛南、满、蒙古、羌等18个世居民族在此地世代繁衍的局面。
</div>
<div class="nations">
<div class="nations-select">
<div v-for="(item, i) in lines" :key="`nation_${i}`">
<div
class="line wow animate__animated"
:class="
i % 2 === 0
? 'animate__bounceInLeft'
: 'animate__bounceInRight'
"
data-wow-delay="1s"
>
<img src="@/assets/imgs/topic/jyycc/line1.png" alt="" />
</div>
<div
v-for="(node, j) in item"
:key="`${i}-${j}`"
class="nations-node wow animate__animated animate__bounceIn"
data-wow-delay="2s"
:class="{ active: curNation && curNation.title === node.title }"
@click="changeNation(node)"
>
<span>{{ node.title }}</span>
<div class="rope">
<div :class="`type${(j + 1) % 4 === 0 ? 4 : (j + 1) % 4}`">
<img
src="@/assets/imgs/topic/jyycc/type1.png"
alt=""
v-if="j % 4 === 0"
/>
<img
src="@/assets/imgs/topic/jyycc/type2.png"
alt=""
v-if="j % 4 === 1"
/>
<img
src="@/assets/imgs/topic/jyycc/type3.png"
alt=""
v-if="j % 4 === 2"
/>
<img
src="@/assets/imgs/topic/jyycc/type4.png"
alt=""
v-if="j % 4 === 3"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail" v-if="Object.keys(curNation).length > 0">
<div class="pic">
<div class="pic-img">
<img
class="wow animate__animated animate__fadeInLeft"
data-wow-delay="2s"
:src="
require(`@/assets/imgs/topic/jyycc/zt1/${curNation.title}.png`)
"
alt=""
/>
</div>
<div class="mask">
<img src="@/assets/imgs/topic/jyycc/mask.png" alt="" />
</div>
</div>
<div class="txt">
<div
class="title wow animate__animated animate__fadeInDown"
data-wow-delay="1.5s"
>
<img src="@/assets/imgs/topic/jyycc/title.png" alt="" />
<span>{{ curNation.title }}</span>
</div>
<div
class="desc wow animate__animated animate__fadeIn"
data-wow-delay="2s"
>
<p v-for="(txt, i) in curNation.txt" :key="`pic_${i}`">
{{ txt }}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="content-two">
<div class="first wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/topic/jyycc/third.png" alt="" />
</div>
<div class="cotent">
<div
class="title wow animate__animated animate__fadeIn"
data-wow-delay="0.5s"
>
<img src="@/assets/imgs/topic/jyycc/dmby.png" alt="" />
</div>
<div
class="abstract wow animate__animated animate__fadeInUp"
data-wow-delay="1s"
>
“美美与共”的贵州民族文化异彩纷呈。走进山水相连，林矿相生的黔地深处，“寻耕牧人家”，总遇见村寨乡邻，或耕作，或渔牧，与自然生态轮回共生、相辅相成；“看百彩千辉”，满眼的华服彩衣，饰斑斓织绣、坠银璨叮当，穿戴出对美最真挚的追求；“探礼俗民风”，体验独特的人生喜乐，在歌中相恋、在舞中相别、不分彼此在年节中欢庆与纪念；“赏歌舞曲艺”，沉浸在眼花缭乱的视听盛宴，观歌舞讲故事，听戏曲唱人生，铜鼓声声中回溯祖先的相携奋斗与坚守祈望。走进贵州民族文化之美，便是走进一扇缓缓开启的时空之门，穿越贵州的历史与现代，无需多言便领略了多彩贵州的精神家园。
</div>
<div
class="tabs wow animate__animated animate__fadeIn"
data-wow-delay="0.8s"
>
<div class="line"></div>
<div class="nodes">
<div
v-for="(node, i) in details"
:key="i"
:class="{ active: activeDetail.title === node.title }"
@click="changeDetail(node)"
>
<div class="pic">
<i></i>
</div>
<span>{{ node.title }}</span>
</div>
</div>
</div>
<div class="detail" v-if="Object.keys(activeDetail).length > 0">
<template v-for="(item, i) in activeDetail.data">
<div :key="`div_${i}`" class="txt">
<div class="info">
<div class="title wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/topic/jyycc/title.png" alt="" />
<span>{{ item.title }}</span>
</div>
<div
class="desc wow animate__animated animate__fadeInUp"
data-wow-delay="0.5s"
>
<p>{{ item.txt }}</p>
</div>
</div>
<div class="pic wow animate__animated animate__fadeInRight">
<img
:src="
require(`@/assets/imgs/topic/jyycc/zt2/${
activeDetail.title
}/${i + 1}.png`)
"
alt=""
/>
</div>
</div>
<div
class="dashed-line"
:key="i"
v-if="i < activeDetail.data.length - 1"
:class="i % 2 === 0 ? 'right' : 'left'"
>
<div>
<img
src="@/assets/imgs/topic/jyycc/circle-dashed-left.png"
alt=""
v-if="i % 2 === 0"
/>
<img
src="@/assets/imgs/topic/jyycc/circle-dashed-right.png"
alt=""
v-else
/>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="bottom">
<div class="first wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/topic/jyycc/forth.png" alt="" />
</div>
<div class="content wow animate__animated animate__fadeIn">
<div class="title">
<img src="@/assets/imgs/topic/jyycc/ztdh.png" alt="" />
</div>
<div class="video wow animate__animated animate__fadeInUp">
<video-player :src="src"></video-player>
</div>
<div class="other">
<div class="vr-content">
<div class="left wow animate__animated animate__fadeInLeft">
<div class="img-container">
<img src="@/assets/imgs/topic/jyycc/vr_left.png" alt="" />
</div>
<div class="text">详细介绍贵州各民族的记忆与传承</div>
<div class="video-button">观看视频</div>
</div>
<div class="center wow animate__animated animate__fadeIn">
<div class="img-container">
<img src="@/assets/imgs/topic/jyycc/vr_circle.png" alt="" />
</div>
<div class="text-content">
<div class="center-text">
<img src="@/assets/imgs/topic/jyycc/360.png" alt="" />
</div>
<div class="text">足不出户，体验展管一切</div>
<div class="button">
<div class="outter">
<div class="inner">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="right wow animate__animated animate__fadeInRight">
<div class="img-container">
<img src="@/assets/imgs/topic/jyycc/vr_right.png" alt="" />
</div>
<div class="text">民族馆诉说贵州故事</div>
<div class="video-button">观看视频</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import part1 from "./jyycc-nation.json";
import part2 from "./jyycc-dmby.json";
import videoPlayer from "@/components/VideoPlayer";
export default {
components: {
videoPlayer,
},
data() {
return {
src: "",
lines: part1,
nodes: [
{
title: "巡耕牧人生",
id: 1,
},
{
title: "探礼俗民风",
id: 2,
},
{
title: "看百彩千辉",
id: 3,
},
{
title: "赏歌舞曲艺",
id: 4,
},
],
details: part2,
activeDetail: {},
curNation: {},
};
},
methods: {
changeNation(node) {
this.curNation = node;
},
changeDetail(node) {
this.activeDetail = node;
},
},
mounted() {
debugger;
this.changeNation(this.lines[0][0]);
this.changeDetail(this.details[0]);
},
};
</script>
<style lang="scss" scoped>
.quality-jyycc {
position: relative;
color: #fff;
img {
width: 100%;
}
> div {
position: relative;
width: 100%;
}
.first {
position: absolute;
top: -10px;
}
.top {
width: 100%;
height: 1112px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.content-one {
padding-top: 816px;
width: 100%;
height: 3829px;
> div {
position: absolute;
top: 1494px;
.topic {
width: 100%;
height: 101px;
text-align: center;
> img {
width: auto !important;
height: 100%;
}
}
.txt {
text-align: center;
padding: 50px 150px;
font-size: 36px;
line-height: 60px;
text-shadow: 0px 8px 3px #0c182c;
}
}
.detail {
position: relative;
margin-top: 20px;
.pic {
width: 1140px;
height: 1140px;
position: absolute;
top: 0;
left: 0;
.pic-img {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
> img {
width: auto;
height: 100%;
// transform: translateX(-550px);
margin-left: -550px;
}
}
> .mask {
position: absolute;
right: 0;
top: -22px;
}
}
.txt {
width: 100%;
position: absolute;
top: 160px;
text-align: right;
.title {
position: absolute;
width: 123px;
height: 310px;
right: 60px;
top: 0;
> img {
width: 100%;
}
> span {
width: 100%;
height: 100%;
position: absolute;
top: 36px;
right: 14px;
writing-mode: vertical-rl;
font-size: 54px;
line-height: 100px;
text-shadow: 0px 8px 4px #74562f;
text-align: left;
letter-spacing: 6px;
font-family: "华文行楷", "楷体";
}
}
.desc {
font-family: "宋体";
position: absolute;
right: 240px;
top: 0;
height: 900px;
max-width: 1000px;
writing-mode: vertical-rl;
text-align: left;
> p {
margin: 0;
}
}
}
}
}
.content-two {
min-height: 4463px;
padding-top: 166px;
position: relative;
.first {
height: 4818px;
top: -400px;
}
.cotent {
// position: absolute;
// top: 100px;
position: relative;
padding-top: 100px;
width: 100%;
text-align: center;
> .title {
width: 100%;
height: 110px;
margin-bottom: 80px;
text-align: center;
> img {
width: auto;
height: 100%;
}
}
> .abstract {
width: 1700px;
margin: auto;
font-size: 36px;
font-weight: 600;
line-height: 60px;
text-shadow: 0px 4px 5px #0d3033;
}
.tabs {
width: 1016px;
margin: auto;
margin-top: 190px;
position: relative;
.nodes {
position: relative;
display: flex;
justify-content: space-between;
> div {
width: 60px;
font-family: "华文行楷", "楷体";
display: flex;
flex-wrap: wrap;
justify-content: center;
&:hover,
&.active {
cursor: pointer;
color: #6de6f1;
.pic {
> i {
background-image: url("@/assets/imgs/topic/jyycc/circle-active.png");
}
}
}
.pic {
width: 35px;
height: 35px;
background: #244a4b;
border-radius: 35px;
> i {
width: 100%;
height: 100%;
display: block;
background-image: url("@/assets/imgs/topic/jyycc/circle.png");
background-repeat: no-repeat;
background-size: contain;
}
}
> span {
flex: 1%;
font-size: 46px;
line-height: 70px;
writing-mode: vertical-lr;
margin-top: 20px;
}
}
}
.line {
width: calc(100% - 40px);
height: 2px;
position: absolute;
background-image: url("@/assets/imgs/topic/jyycc/dashed.png");
background-repeat: repeat;
top: 16px;
left: 20px;
}
}
.detail {
width: 100%;
background-image: url('@/assets/imgs/topic/jyycc/part1-bg.png');
background-repeat: repeat;
background-size: cover;
> div.txt {
position: relative;
display: flex;
margin: 110px 50px;
&:nth-child(4n + 1) {
.info {
.title {
right: 60px;
top: 0;
> span {
right: 0px;
writing-mode: vertical-rl;
}
}
.desc {
right: 240px;
writing-mode: vertical-rl;
}
}
.pic {
left: 0;
}
}
&:nth-child(4n + 3) {
.info {
.desc {
left: 180px;
writing-mode: vertical-lr;
}
}
}
&:last-child {
padding-bottom: 250px;
}
.info {
width: calc(100% - 780px);
height: 450px;
.title {
position: absolute;
width: 123px;
height: 310px;
> img {
width: 100%;
}
> span {
width: 100%;
height: 100%;
position: absolute;
top: 50px;
left: 0;
font-size: 48px;
line-height: 125px;
text-shadow: 0px 8px 4px #74562f;
text-align: left;
letter-spacing: 6px;
font-weight: 600;
writing-mode: vertical-rl;
}
}
.desc {
position: absolute;
top: 0;
height: 450px;
max-width: 720px;
text-align: left;
font-size: 36px;
line-height: 60px;
font-family: "宋体";
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 12;
> p {
margin: 0;
}
}
}
.pic {
width: 680px;
height: 450px;
position: absolute;
top: 0;
right: 0;
}
}
> div.dashed-line {
width: 100%;
height: 24px;
> div {
width: 940px;
}
&.left {
> div {
float: left;
margin-left: 80px;
}
}
&.right {
> div {
float: right;
margin-right: 80px;
}
}
&::after {
content: "";
clear: both;
}
/* > img {
width: auto;
height: 100%;
} */
}
}
}
}
.bottom {
padding-top: 61px;
height: 2120px;
position: relative;
.first {
height: 2500px;
top: -416px;
}
.content {
width: 100%;
position: absolute;
top: 0;
> .title {
width: 100%;
height: 122px;
text-align: center;
> img {
width: auto;
height: 100%;
}
}
> .video {
width: 1500px;
height: 750px;
margin: 120px auto 0;
}
> .other {
padding: 300px 0;
.vr-content {
display: flex;
align-items: center;
justify-content: space-around;
.text {
font-size: 20px;
font-family: PingFang SC;
font-weight: 800;
color: #fff;
line-height: 65px;
}
.video-button {
color: #fff;
font-size: 22px;
width: 180px;
height: 54px;
background: #379195;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
letter-spacing: 2px;
cursor: pointer;
}
.left,
.right {
width: 20%;
.img-container {
width: 100%;
img {
width: 100%;
// height: 100%;
}
}
}
.center {
position: relative;
.img-container {
animation: changeright 4s linear infinite;
}
.text-content {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.center-text {
/* font-size: 40px;
font-weight: 500;
color: #fff;
line-height: 50px; */
width: 330px;
height: 50px;
margin-bottom: 30px;
}
.text {
font-size: 36px;
}
}
.button {
margin-top: 30px;
cursor: pointer;
.outter {
width: 90px;
height: 90px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed#379195;
animation: likes 2.5s ease-in infinite;
transition: all ease-in 0.5s;
.inner {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #379195;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
font-size: 30px;
}
}
}
}
}
}
}
}
.nations {
padding-top: 80px;
.nations-select {
> div {
position: relative;
display: flex;
justify-content: space-around;
+ div {
margin-top: 70px;
}
> div {
flex-shrink: 0;
// margin: 0 40px;
}
}
}
.line {
width: 100%;
height: 6px;
position: absolute;
top: 45px;
left: 0;
> img {
width: 100%;
}
}
.nations-node {
text-align: center;
&:hover,
&.active {
cursor: pointer;
> span {
color: #ffcd83;
}
.rope {
> div {
transform-origin: top;
animation: swing 0.5s ease-in-out;
}
}
}
> span {
font-family: "华文行楷", "楷体";
font-size: 32px;
line-height: 48px;
}
}
.rope {
display: flex;
justify-content: center;
img {
width: 100%;
}
.type1 {
width: 45px;
height: 107px;
}
.type2 {
width: 32px;
height: 108px;
}
.type3 {
width: 34px;
height: 103px;
}
.type4 {
width: 20px;
height: 106px;
}
}
}
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(15deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-8deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes likes {
0% {
transform: scale(1);
}
25% {
transform: scale(0.9);
}
50% {
transform: scale(0.85);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
@keyframes changeright {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论