Skip to content

E
exhibition_page
提交 a297f03a authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

新增教育史馆静态

上级 c7c929fa
隐藏空白字符变更
内嵌 并排
正在显示 包含 561 行增加 和 4 行删除
src/router/index.js
浏览文件 @ a297f03a
......@@ -155,6 +155,11 @@ const routes = [
name: 'SDCS',
component: () => import('@/views/boutique/components/SDCS')
},
{
path: '/jysg',
name: 'JYSG',
component: () => import('@/views/boutique/components/JYSG')
},
// 404
......
src/views/boutique/components/JYSG.vue 0 → 100644
浏览文件 @ a297f03a
<template>
<div class="gysg">
<div class="part1">
<div class="title-box">
<div class="left">
<img src="@/assets/imgs/boutique/jysg/part1/left.png" alt="" />
</div>
<div class="title">
<img src="@/assets/imgs/boutique/jysg/part1/title.png" alt="" />
</div>
<div class="right">
<img src="@/assets/imgs/boutique/jysg/part1/right.png" alt="" />
</div>
</div>
<div class="top">
<img src="@/assets/imgs/boutique/jysg/part1/top.png" alt="" />
</div>
</div>
<div class="part2">
<div class="hall1">
<div class="img-1">
<img src="@/assets/imgs/boutique/jysg/part2/1.png" alt="" />
</div>
<div class="img-1-title">
<img src="@/assets/imgs/boutique/jysg/part2/t-1.png" alt="" />
</div>
</div>
<div class="hall2">
<div class="img-2-intro">
<div class="content">
左边为贵州教育史发展“大事记”时间轴，右边为“前言”，正前方为“育人兴邦”主题浮雕
</div>
<div class="qt">
<img src="@/assets/imgs/boutique/jysg/part2/qianting.png" alt="" />
</div>
</div>
<div class="img-2-title">
<img src="@/assets/imgs/boutique/jysg/part2/t-2.png" alt="" />
</div>
<div class="img-2">
<img src="@/assets/imgs/boutique/jysg/part2/2.png" alt="" />
</div>
</div>
<div class="hall3">
<div class="img-3-intro">
<div class="wt">
<img src="@/assets/imgs/boutique/jysg/part2/weiting.png" alt="" />
</div>
<div class="content">
尾厅左墙展示了新中国成立以来主要领导人关于教育的重要论述，
右墙展示了走向未来的贵州教育规划和正在迈向现代化的教育视频。
</div>
</div>
<div class="img-3-title">
<img src="@/assets/imgs/boutique/jysg/part2/t-3.png" alt="" />
</div>
<div class="img-3">
<img src="@/assets/imgs/boutique/jysg/part2/3.png" alt="" />
</div>
</div>
<div class="part3">
<div class="tab-line">
<div class="zt">
<img src="@/assets/imgs/boutique/jysg/part3/zhengting.png" alt="" />
</div>
<div class="part3-content">
<div class="line"></div>
<div class="unit-group">
<div
class="unit-item"
v-for="(item, index) in unitsData"
@mouseenter="handleEnterUnit(item)"
@mouseleave="handleLeaveUnit"
@click="handleClickUnit(item)"
:key="index"
:style="{ left: index * 200 + 'px' }"
>
<div
class="circle"
:style="{
backgroundImage: `url(${
curUnitItem == item ? circleS : circle
})`,
}"
></div>
<div
:class="{
name: true,
active: curUnitItem.name == item.name,
}"
>
{{ item.name }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="unit-content">
<div class="title-container">
<div class="unit-title">
{{ curUnitItem.name }}
</div>
<div class="unit-intro">
{{ curUnitItem.intro }}
</div>
</div>
<div class="cr">
<div class="cr-1">
<img src="@/assets/imgs/boutique/jysg/part3/cr-1.png" alt="" />
</div>
<div class="cr-2">
<img src="@/assets/imgs/boutique/jysg/part3/cr-2.png" alt="" />
</div>
<div class="cr-3">
<img src="@/assets/imgs/boutique/jysg/part3/cr-3.png" alt="" />
</div>
</div>
</div>
<div class="part4">
<div class="title">
<img src="@/assets/imgs/boutique/jysg/part4/title.png" alt="" />
</div>
<div class="imgs-group">
<div class="item" v-for="(item, index) in imgs" :key="index">
<div class="img">
<img
:src="require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)"
alt=""
/>
</div>
<div class="name">
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="part5">
<div class="title">
<img src="@/assets/imgs/boutique/jysg/part5/title.png" alt="" />
</div>
<div class="video-box">
<div class="container"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import units from "./jysg.json";
export default {
data() {
return {
prefix: "@/assets/imgs/boutique/jysg",
unitsData: units,
circle: require("@/assets/imgs/boutique/jysg/part3/circle.png"),
circleS: require("@/assets/imgs/boutique/jysg/part3/circle-s.png"),
curUnitItem: {},
imgs: [
{
name: "贵州教育史馆古代部分",
img: "1.png",
},
{
name: "贵州教育史馆模拟场景“龙岗书院”",
img: "2.png",
},
{
name: "贵州教育史馆沙滩影山文化部分",
img: "3.png",
},
],
};
},
mounted() {
this.curUnitItem = this.unitsData[0];
},
methods: {
handleEnterUnit(item) {
this.curUnitItem = item;
},
handleClickUnit(item) {
this.curUnitItem = item;
},
handleLeaveUnit() {
// this.curUnitItem = {};
},
},
};
</script>
<style lang="scss" scoped>
// common start
img {
width: 100%;
height: 100%;
}
//common end
.gysg {
background-image: url("@/assets/imgs/boutique/jysg/bg.png");
background-size: 100% 100%;
height: 7720px;
.part1 {
height: 1569px;
width: 100%;
background-image: url("@/assets/imgs/boutique/jysg/part1/bg.png");
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
.title-box {
background-image: url("@/assets/imgs/boutique/jysg/part1/title-box.png");
background-size: 100% 100%;
width: 1547px;
height: 777px;
display: flex;
justify-content: center;
align-items: center;
.left {
flex: 1;
height: 100%;
}
.right {
flex: 1;
height: 100%;
}
.title {
width: 660px;
height: 493px;
}
}
.top {
position: absolute;
width: 100%;
height: 180px;
top: 0;
}
}
.part2 {
height: 3297px;
width: 100%;
background-image: url("@/assets/imgs/boutique/jysg/part2/bg.png");
background-size: 100% 100%;
.hall1 {
width: 100%;
display: flex;
justify-content: center;
padding-top: 230px;
.img-1 {
width: 646px;
height: 429px;
}
.img-1-title {
width: 34px;
height: 345px;
margin-left: 48px;
}
}
.hall2 {
width: 100%;
display: flex;
justify-content: center;
margin-top: 100px;
align-items: flex-start;
.img-2-intro {
background-color: rgb(#666633, 0.6);
padding: 24px;
color: #fff;
display: flex;
margin-right: 48px;
.content {
height: 280px;
writing-mode: vertical-rl;
margin-right: 16px;
font-size: 18px;
letter-spacing: 2px;
}
.qt {
width: 52px;
height: 122px;
}
}
.img-2 {
width: 646px;
height: 429px;
}
.img-2-title {
width: 34px;
height: 345px;
margin-right: 48px;
}
}
.hall3 {
width: 100%;
display: flex;
justify-content: center;
margin-top: 100px;
align-items: center;
.img-3-intro {
background-color: rgb(#666633, 0.6);
padding: 24px;
color: #fff;
// display: flex;
margin-right: 48px;
width: 400px;
.wt {
width: 122px;
height: 52px;
margin-bottom: 24px;
}
.content {
margin-right: 16px;
font-size: 18px;
letter-spacing: 2px;
}
}
.img-3 {
width: 646px;
height: 429px;
}
.img-3-title {
width: 34px;
height: 345px;
margin-right: 48px;
}
}
}
.part3 {
margin-top: 100px;
.tab-line {
width: 100%;
padding: 0 100px;
display: flex;
.zt {
width: 70px;
height: 152px;
margin-right: 56px;
}
.part3-content {
position: relative;
flex: 1;
.line {
width: 100%;
height: 3px;
background-image: url("@/assets/imgs/boutique/jysg/part3/line.png");
background-size: 100% 100%;
display: flex;
}
.unit-group {
display: flex;
position: absolute;
top: -24px;
.unit-item {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0;
.circle {
width: 55px;
height: 55px;
background-size: 100% 100%;
margin-bottom: 16px;
cursor: pointer;
transition: all ease 0.3s;
}
.name {
color: #fff;
writing-mode: vertical-lr;
font-size: 22px;
letter-spacing: 8px;
cursor: pointer;
}
.active {
color: #1a645b;
}
}
}
}
}
}
.unit-content {
padding: 200px 100px;
color: #fff;
display: flex;
width: 100%;
height: 2200px;
.title-container {
width: 20%;
height: 400px;
display: flex;
.unit-title {
writing-mode: vertical-lr;
font-size: 32px;
font-weight: bold;
margin-right: 16px;
letter-spacing: 2px;
}
.unit-intro {
writing-mode: vertical-lr;
}
}
.cr {
flex: 1;
position: relative;
.cr-1 {
position: absolute;
width: 546px;
height: 882px;
left: 25%;
top: 0;
}
.cr-2 {
position: absolute;
width: 595px;
height: 596px;
right: 0;
top: 882px;
}
.cr-3 {
position: absolute;
width: 546px;
height: 566px;
left: 12%;
top: 1200px;
}
}
}
.part4 {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.title {
width: 300px;
height: 64px;
margin-bottom: 48px;
}
.imgs-group {
display: flex;
align-items: center;
& > .item {
height: 100%;
flex: 1;
margin-right: 32px;
display: flex;
flex-direction: column;
& > .img {
height: 518px;
}
& > .name {
color: #fff;
font-size: 24px;
display: flex;
justify-content: center;
margin-top: 10px;
}
}
}
}
.part5 {
height: 1700px;
background-image: url("@/assets/imgs/boutique/jysg/part5/bg.png");
background-size: 100% 100%;
margin-top: 140px;
display: flex;
flex-direction: column;
align-items: center;
.title {
height: 55px;
width: 595px;
margin-bottom: 32px;
}
.video-box {
display: flex;
justify-content: center;
width: 100%;
.container {
width: 80%;
height: 800px;
border: 14px solid #aa9d5e;
}
}
}
}
</style>
\ No newline at end of file
src/views/boutique/components/SDCS.vue
浏览文件 @ a297f03a
......@@ -365,7 +365,6 @@ export default {
},
methods: {
handleClickUnit1(item) {
this.part1CurUnit = item;
},
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ a297f03a
......@@ -2,7 +2,11 @@
<div class="smgz">
<div class="face-img smgz-item">
<div class="back-img img wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png" alt="" />
<img
src="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png"
id="@/assets/imgs/boutique/smgz-5/1_faceImage/bg.png"
alt=""
/>
</div>
<div class="left-title img wow animate__animated animate__fadeInLeft">
<img
......@@ -23,7 +27,11 @@
class="ms img wow animate__animated animate__fadeInRight"
data-wow-duration="2s"
>
<img src="@/assets/imgs/boutique/smgz-5/1_faceImage/ms.png" alt="" />
<img
src="@/assets/imgs/boutique/smgz-5/1_faceImage/ms.png"
id="@/assets/imgs/boutique/smgz-5/1_faceImage/ms.png"
alt=""
/>
</div>
<div
class="more img wow animate__animated animate__fadeInUp"
......@@ -442,12 +450,34 @@ export default {
this.$nextTick(() => {
// this.scroll();
window.addEventListener("scroll", this.scroll);
this.replaceImg();
});
},
destroyed() {
window.removeEventListener("scroll", this.scroll, false);
},
methods: {
//替换从低清到高清
replaceImg() {
let imgs = document.getElementsByTagName("img");
let imgsArr = [...imgs];
imgsArr.forEach((i) => {
// url中包含了data-url压缩图的才进行替换
if (i.id && i.id.indexOf("smgz-5")) {
var imgObj = new Image(); //新建一个图片对象
let lowImgSrc = i.id;
let highImgSrc = lowImgSrc.replace("smgz-5", "smgz"); //最终显示的大图
let lowImg = document.getElementById(i.id);
imgObj.src = highImgSrc;
imgObj.onload = function () {
debugger;
lowImg.src = highImgSrc;
lowImg.classList.add('high')
};
}
});
},
handleChangeUnit(index) {
this.currentUnitPicIndex = index;
this.$refs.unitSwiper.swiper.slideTo(index, 500, true);
......
src/views/boutique/components/jysg.json 0 → 100644
浏览文件 @ a297f03a
[
{
"name": "贵州古代教育史馆",
"intro": "第一部分为贵州古代教育史馆，即“参差交错的贵州古代教育”，展示了原始形态教育社会(先秦到宋元)——明清时期的贵州教育(约19世纪中叶前)——地域文化馆（沙滩文化与影山文化）。尹真讲学的“务本堂”复制品及视频介绍。"
},
{
"name": "贵州近代教育史馆",
"intro": "第二部分为贵州近代教育史馆，即“除旧布新的贵州近代教育”，展示了鸦片战争后贵州近代先贤促进贵州教育近代化的历程——近代学堂体系的建立——民国初期贵州教育——抗战时期教育文化内迁贵州及贵州近代教育体系建立。"
},
{
"name": "贵州现代教育史馆",
"intro": "第三部分为贵州现代教育史馆，即（曲折发展的新中国初期贵州教育与快速发展的改革开放以来的贵州教育），展示了新中国初期贵州现代教育体系的建立——文革时期贵州曲折发展——改革开放后贵州教育的快速发展——十八大以来贵州教育取得的辉煌成就。"
},
{
"name": "贵州民族教育史馆",
"intro": "第四部分为贵州现代教育史馆，即“多元教育模式的贵州少数民族教育概况”，展示了传统形态、封建形态、近代形态、现代形态的贵州民族教育发展概况。"
},
{
"name": "贵州名师馆",
"intro": "第五部分为贵州历史上的名师，即“薪火相传的贵州近现代著名教师”，展示了明清以来贵州名师、先贤及其献身教育的精神。"
}
]
src/views/display/components/RedStyle.vue
浏览文件 @ a297f03a
......@@ -545,7 +545,7 @@ export default {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
// }
this.replaceFaceImage();
// this.replaceFaceImage();
});
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论