Skip to content

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

中共贵州省工委斗争纪略展

上级 cdafcc68
隐藏空白字符变更
内嵌 并排
正在显示 包含 733 行增加 和 9 行删除
.eslintrc.js 0 → 100644
浏览文件 @ 9df4feb0
// .eslintrc.js
module.exports = {
rules: {
"vue/multi-word-component-names": "off",
},
};
\ No newline at end of file
src/components/LazyImg/index.vue 0 → 100644
浏览文件 @ 9df4feb0
<template>
<div class="l-img">
<line-img
:src="src"
:commonUrl="commonUrl"
v-if="type === 'line'"
></line-img>
<local-img
:src="src"
:commonUrl="commonUrl"
v-if="type === 'local'"
></local-img>
</div>
</template>
<script>
import lineImg from "./line-img.vue";
import localImg from "./local-img.vue";
export default {
props: {
src: {
type: String || Object,
require: true,
},
},
components: {
lineImg,
localImg,
},
data() {
return {
commonUrl: require("@/assets/imgs/home/mini-bg.png"),
};
},
computed: {
type() {
let { src } = this;
if (
typeof src === "string" &&
src.indexOf("http://") < 0 &&
src.indexOf("https://") < 0
) {
return "local";
} else {
return "line";
}
},
},
};
</script>
<style lang="scss" scoped>
.l-img {
width: 100%;
height: 100%;
position: relative;
::v-deep img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
src/components/LazyImg/line-img.vue 0 → 100644
浏览文件 @ 9df4feb0
<template>
<div>
<img
:src="low_url"
alt=""
@onerror="handleChangeMini($event)"
v-if="!isShow"
/>
<img :src="src" alt="" v-show="isShow" @load="handleChangeNormal" />
</div>
</template>
<script>
export default {
props: {
src: {
type: String || Object,
require: true,
},
commonUrl: {
type: String,
require: true,
},
},
data() {
return {
isShow:false
}
},
computed: {
low_url() {
let { src } = this;
if (src && typeof src === "string") {
let ix = src.lastIndexOf("/");
return src.substr(0, ix) + "/low" + src.substr(ix);
} else {
return this.commonUrl;
}
},
},
methods: {
handleChangeMini(evt) {
let img = evt.srcElement;
img.src = this.commonUrl;
img.onerror = null;
},
handleChangeNormal() {
this.isShow = true;
},
},
};
</script>
src/components/LazyImg/local-img.vue 0 → 100644
浏览文件 @ 9df4feb0
<template>
<div>
<img
:src="low_url"
alt=""
@onerror="handleChangeMini($event)"
v-show="!isShow"
/>
<img :src="url" alt="" v-show="isShow" @load="handleChangeNormal" />
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
require: true,
},
commonUrl: {
type: String,
require: true,
},
},
data() {
let low = this.src;
// debugger;
if (typeof low === "string") {
let lowUrl = this.getLowUrl(low);
low = require("@/assets/imgs" + this.getUrl(lowUrl));
} else {
low = this.commonUrl;
}
return {
isShow: false,
low_url: low,
url: require("@/assets/imgs" + this.getUrl(this.src)),
};
},
methods: {
getUrl(str) {
let len = "@/assets/imgs".length;
return str.substr(len);
},
getLowUrl(src) {
let ix = src.lastIndexOf("/");
return src.substr(0, ix) + "/low" + src.substr(ix);
},
handleChangeMini(evt) {
let img = evt.srcElement;
img.src = this.commonUrl;
img.onerror = null;
},
handleChangeNormal() {
console.log(this.src)
this.isShow = true;
},
},
};
</script>
src/main.js
浏览文件 @ 9df4feb0
......@@ -17,6 +17,9 @@ import 'vue-video-player/src/custom-theme.css'
Vue.use(VideoPlayer)
import LImg from '@/components/LazyImg'
Vue.component('LImg', LImg)
import {
getFullUrl
} from '@/utils/index'
......
src/router/index.js
浏览文件 @ 9df4feb0
......@@ -155,6 +155,11 @@ const routes = [
name: 'SDCS',
component: () => import('@/views/boutique/components/SDCS')
},
{
path: '/zggzsgwdzjlz',
name: 'zggzsgwdzjlz',
component: () => import('@/views/boutique/components/zggzsgwdzjlz/index.vue')
},
// 404
......
src/views/boutique/components/jyycc.vue → src/views/boutique/components/jyycc/index.vue
浏览文件 @ 9df4feb0
......@@ -516,7 +516,7 @@ export default {
}
.detail {
width: 100%;
background-image: url('@/assets/imgs/topic/jyycc/part1-bg.png');
background-image: url("@/assets/imgs/topic/jyycc/part1-bg.png");
background-repeat: repeat;
background-size: cover;
> div.txt {
......@@ -628,9 +628,9 @@ export default {
clear: both;
}
/* > img {
width: auto;
height: 100%;
} */
width: auto;
height: 100%;
} */
}
}
}
......@@ -721,9 +721,9 @@ export default {
justify-content: center;
.center-text {
/* font-size: 40px;
font-weight: 500;
color: #fff;
line-height: 50px; */
font-weight: 500;
color: #fff;
line-height: 50px; */
width: 330px;
height: 50px;
margin-bottom: 30px;
......
src/views/boutique/components/zggzsgwdzjlz/data.json 0 → 100644
浏览文件 @ 9df4feb0
[
{
"title": ["中共贵州省工作委员会的成立", "先进思想传贵州 红流滚滚播火种", "1919年5月 - 1935年1月"],
"txt": "五四运动前后，随着新文化运动的深入，马克思主义作为一种新思潮，在贵州知识界得以传播。1934年，外地一些共产党员先后来到贵州、转移至省城贵阳，以高家花园及其它数处为活动点，着手谋划与建立全省各地的党组织。1935年1月，中央红军长征抵达遵义，李维汉同志代表党中央批准成立中共贵州省工作委员会。",
"img": "book",
"label": ["国民党军用地图2张（复制品）"]
},
{
"title": ["党在贵州的早期斗争", "革命斗争堪险阻 血雨腥风铸英魂", "1935年1月 - 1937年7月"],
"txt": "中共贵州省工委成立后，遵照党中央的指示，在全省各地积极开展革命活动。在完成护送中央特派员杨涛(潘汉年)赴上海的任务 ;配合和支持红军在贵州的转战 ; 发展地方党组织; 建立军事领导小组，开展武装斗争等方面，建树了不可磨灭的功绩。",
"img": "paper",
"label": ["黄大陆在狱中写下的", "《移进油库 (地下室) 原因的检讨》（复制品）"]
},
{
"title": ["抗日战争时期贵州地方党组织的建立与发展", "抗日运动起高潮 党的组织蓬勃生", "1937年7月 - 1945年8月"],
"txt": "抗日战争爆发后，在中国抗日民族统一战线旗帜下，新建立的中共贵州省工委担负起领导和发动至省抗日救亡运动的重任。贵州抗日救亡运动如火如茶。",
"img": "gun",
"label": ["驳壳枪"]
},
{
"title": ["解放战争时期党组织在贵州的活动", "英勇斗争迎光明 万众欢腾庆解放", "1945年8月 - 1949年12月"],
"txt": "抗战胜利后，贵阳地区隐蔽下来的中共党员组织党小组，创办地下刊物，开展读书活动，发挥了积极的作用。1949年2月，中共中央上海局指示，建立中共贵州省工作委员会和中共贵阳特别支部，为迎接解放积极斗争。",
"img": "notice",
"label": ["《贵阳市民众临时治安委员会通告》（复制品）"]
}
]
\ No newline at end of file
src/views/boutique/components/zggzsgwdzjlz/index.vue 0 → 100644
浏览文件 @ 9df4feb0
<template>
<div class="zggzsgwdzjlz-show">
<!-- data-wow-delay="1s" -->
<!-- 第一屏 -->
<div class="banner">
<div class="first">
<l-img
src="@/assets/imgs/topic/zggzsgwdzjlz/year.png"
alt=""
class="img-year wow animate__animated animate__fadeIn"
/>
<!-- <img
src="@/assets/imgs/topic/zggzsgwdzjlz/low/year.png"
alt=""
class="img-year wow animate__animated animate__fadeIn"
/> -->
<div
class="img-title wow animate__animated animate__bounceIn"
data-wow-delay="0.3s"
>
<img src="@/assets/imgs/topic/zggzsgwdzjlz/title.png" alt="" />
<!-- <l-img src="@/assets/imgs/topic/zggzsgwdzjlz/title.png"></l-img> -->
</div>
<l-img
src="@/assets/imgs/topic/zggzsgwdzjlz/top.png"
alt=""
class="img-top wow animate__animated animate__fadeIn"
/>
<div class="summary wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
<div>
<p>
中共贵州省工委旧址，原称:高家花园。1935年1月，红军长征在遵义期间，批准成立中国共产党贵州省工作委员会。高言志为掩护中共地下党及进步人士开展革命活动，提供了高家花园作为地下党及革命人士秘密居住、工作和会议之地，成为省工委秘密集会和部署工作的秘密机关。
</p>
<p>
1949年11月贵阳解放后不久，高家花园易主。1982年贵州省人民政府列为省级文物保护单位，1995年列为责阳市爱国主义教育基地，1997年列为贵州省爱国主义教育基地，
2009年列为贵州省廉政教育基地，2012年列为贵州省党史教育基地。
</p>
</div>
</div>
</div>
<!-- 文字 -->
<div class="img-red wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
<l-img src="@/assets/imgs/topic/zggzsgwdzjlz/red.png" alt="" />
</div>
<div class="img-photo wow animate__animated animate__fadeIn" data-wow-delay="0.6s">
<l-img src="@/assets/imgs/topic/zggzsgwdzjlz/photo.png" alt="" />
</div>
</div>
<div class="outline">
<img src="@/assets/imgs/topic/zggzsgwdzjlz/bg.png" alt="" />
<div class="content">
<!-- 第二屏 -->
<div class="item" v-for="(node, i) in nodes" :key="i">
<div>
<div class="pic wow animate__animated animate__fadeInLeft" v-if="i % 2 === 0">
<div>
<l-img
:src="
`@/assets/imgs/topic/zggzsgwdzjlz/${node.img}.png`
"
alt=""
/>
</div>
<span>
<i v-for="(label, j) in node.label" :key="`label-${i}-${j}`">{{
label
}}</i>
</span>
</div>
<div class="txt wow animate__animated animate__fadeInUp">
<p>
<span
v-for="(title, k) in node.title"
:key="`title-${i}-${k}`"
>{{ title }}</span
>
</p>
<div>
{{ node.txt }}
</div>
</div>
<div class="pic wow animate__animated animate__fadeInRight" v-if="i % 2 !== 0">
<div>
<l-img
:src="
`@/assets/imgs/topic/zggzsgwdzjlz/${node.img}.png`
"
alt=""
/>
</div>
<span>
<i v-for="(label, j) in node.label" :key="`label-${i}-${j}`">{{
label
}}</i>
</span>
</div>
</div>
<p :class="{ right: i % 2 !== 0 }">
<img
src="@/assets/imgs/topic/zggzsgwdzjlz/right.png"
alt=""
v-if="i % 2 === 0"
/>
<img
src="@/assets/imgs/topic/zggzsgwdzjlz/left.png"
alt=""
v-else
/>
</p>
</div>
<!-- 第三屏 -->
<div class="gallery">
<div>
<div class="title">
<p class="wow animate__animated animate__fadeInUp">
<img
src="@/assets/imgs/topic/zggzsgwdzjlz/gallery-1.png"
alt=""
/>
</p>
<p class="wow animate__animated animate__fadeInUp">
<img
src="@/assets/imgs/topic/zggzsgwdzjlz/gallery-2.png"
alt=""
/>
</p>
</div>
<div class="swiper wow animate__animated animate__fadeInRight">
<swiper :options="swiperOption" ref="mSwiper">
<swiper-slide v-for="(img, i) in imgs" :key="i">
<div class="swiper-img">
<div>
<l-img
:src="
`@/assets/imgs/topic/zggzsgwdzjlz/${img.url}.png`
"
alt=""
:class="`num-${i}`"
/>
<!-- <img
:src="
require(`@/assets/imgs/topic/zggzsgwdzjlz/${img}-1.png`)
"
alt=""
:class="`num-${i}`"
v-show="activeIndex !== i"
/> -->
</div>
<span>{{ img.name }}</span>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
<!-- 第四屏 -->
<div class="video">
<div class="title">
<p class="wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/topic/zggzsgwdzjlz/video-1.png" alt="" />
</p>
<p class="wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/topic/zggzsgwdzjlz/video-2.png" alt="" />
</p>
</div>
<div class="player wow animate__animated animate__fadeInUp">
<div>
<img src="@/assets/imgs/topic/zggzsgwdzjlz/video.png" alt="" />
<video-player :src="src"></video-player>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import nodes from "./data.json";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import videoPlayer from "@/components/VideoPlayer";
export default {
components: {
swiper,
swiperSlide,
videoPlayer,
},
data() {
return {
nodes,
imgs: [
{
url: "t1",
name: "序厅",
},
{
url: "t2",
name: "第一展厅",
},
{
url: "t3",
name: "第二展厅",
},
],
swiperOption: {
/* autoplay: {
delay: 3000,
waitForTransition: false,
}, */
effect: "coverflow",
slidesPerView: 3,
grabCursor: true,
loop: true,
speed: 10,
initialSlide: 2,
coverflowEffect: {
rotate: 0,
depth: 200,
stretch: -300,
slideShadows: false,
},
// 显示分页
pagination: {
el: null,
clickable: true, //允许分页点击跳转
},
/* // 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}, */
on: {
slideChange: () => {
let swiper = this.$refs.mSwiper.swiper;
/* this.activeIndex = (swiper.activeIndex + 1) % 3
console.log(this.activeIndex) */
},
},
},
activeIndex: 0,
src: "",
};
},
};
</script>
<style lang="scss" scoped>
.zggzsgwdzjlz-show {
width: 100%;
overflow: hidden;
p {
margin: 0;
}
::v-deep img {
width: 100%;
height: 100%;
}
[class|="img"] {
position: absolute;
width: 100%;
}
.banner {
position: relative;
z-index: 1;
.first {
height: 1080px;
position: relative;
.summary {
position: absolute;
top: 55%;
// left: 50%;
left: 0;
font-size: 18px;
// transform: translate(-50%, -50%);
color: #f2f2f2;
line-height: 2;
// width: 65%;
width: 100%;
> div {
width: 65%;
margin: auto;
}
}
}
.img-top {
height: 180px;
}
.img-year {
height: 1080px;
}
.img-title {
// width: 1000px;
width: 100%;
height: 301px;
top: 20%;
// left: 50%;
// transform: translateX(-50%);
left: 0;
text-align: center;
> img {
width: 1000px;
}
}
.img-red {
width: 1240px;
height: 617px;
top: 730px;
right: 0;
}
.img-photo {
height: 762px;
top: 830px;
left: 0;
}
}
.outline {
width: 100%;
height: 6186px;
position: relative;
// margin-top: 140px;
> .content {
position: absolute;
width: 100%;
top: 650px;
left: 0;
z-index: 1;
.item {
position: relative;
padding-bottom: 100px;
&::after {
content: "";
display: block;
clear: both;
}
> div {
display: flex;
> div {
width: 50%;
}
.pic {
left: 0;
padding-top: 20px;
> div {
width: 920px;
height: 470px;
display: flex;
justify-content: center;
align-items: center;
> img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
}
> span {
display: block;
font-size: 24px;
text-align: center;
color: #f2f2f2;
padding-top: 20px;
}
}
.txt {
right: 0;
color: #fff;
padding: 80px 80px 0;
> p {
font-size: 38px;
line-height: 1.6;
letter-spacing: 5px;
> span {
display: block;
&:nth-child(1) {
font-size: 24px;
color: #f2f2f2;
}
&:nth-child(2) {
padding-top: 10px;
padding-bottom: 50px;
}
&:nth-child(3) {
font-size: 20px;
}
}
}
> div {
width: 80%;
line-height: 2;
font-size: 20px;
font-family: "宋体";
font-weight: 800;
}
}
}
> p {
width: 878px;
height: 34px;
padding: 30px 0;
&.right {
float: right;
}
}
}
}
.gallery {
padding-top: 100px;
width: 100%;
> div {
width: 100%;
// height: 600px;
margin: auto;
.title {
text-align: center;
padding-bottom: 80px;
> p {
padding: 16px 0;
}
> p:first-child {
> img {
width: 200px;
height: 60px;
}
}
> p:last-child {
> img {
width: 1100px;
height: 60px;
}
}
}
.swiper {
width: 100%;
}
}
.swiper-img {
width: 800px;
> div {
width: 100%;
height: 550px;
}
> span {
color: #fff;
font-size: 30px;
padding: 20px 0;
display: block;
width: 100%;
text-align: center;
}
}
}
.video {
padding-top: 200px;
.title {
text-align: center;
padding-bottom: 40px;
> p {
padding: 16px 0;
}
> p:first-child {
> img {
width: 200px;
height: 60px;
}
}
> p:last-child {
> img {
width: 1100px;
height: 60px;
}
}
}
.player {
display: flex;
justify-content: center;
> div {
width: 80%;
height: 900px;
position: relative;
padding: 10px;
> img {
position: absolute;
top: 0;
left: 0;
}
}
}
}
}
}
</style>
src/views/display/Detail.vue
浏览文件 @ 9df4feb0
......@@ -48,6 +48,7 @@ export default {
"displayType",
"displayCharacter",
]);
debugger
this.loadDetail();
},
......
src/views/display/index.vue
浏览文件 @ 9df4feb0
......@@ -179,12 +179,12 @@ export default {
handleClick(item) {
let index = this.boutiqueTitles.indexOf(item.title)
// debugger
let newPage;
if (index == -1) {
const { themeType, exhibitionId } = item;
newPage = this.$router.resolve({
path: `display/${themeType}/${exhibitionId}`,
path: `/display/${themeType}/${exhibitionId}`,
});
} else {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论