Skip to content

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

更新精品展展现形式

上级 7c0f15b0
显示空白字符变更
内嵌 并排
正在显示 包含 399 行增加 和 335 行删除
src/router/index.js
浏览文件 @ d228ffc0
......@@ -29,7 +29,7 @@ const routes = [
},
// 精品展
{
path: '/boutique',
path: '/boutique/:title',
name: 'boutique',
component: () => import('@/views/boutique'),
meta: {
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ d228ffc0
......@@ -590,7 +590,7 @@ export default {
width: 100%;
.face-img {
height: calc(100vh - 100px);
height: 100vh;
.back-img {
width: 100%;
height: 100%;
......
src/views/boutique/components/jyycc.vue
浏览文件 @ d228ffc0
......@@ -295,7 +295,6 @@ export default {
},
},
mounted() {
debugger;
this.changeNation(this.lines[0][0]);
this.changeDetail(this.details[0]);
},
......
src/views/boutique/index-old.vue 0 → 100644
浏览文件 @ d228ffc0
<template>
<div class="boutique">
<div class="boutique-header">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
<ul class="tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div :class="{ active: activeTab === node.tab }">
<span>{{ node.name }}</span>
</div>
</li>
</ul>
</div>
<!-- <ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container">
<img :src="
require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
" alt="" />
<span class="name">{{ node.name }}</span>
</div>
</li>
</ul> -->
<!-- <div class="boutique-tabs">
<m-tabs @handleClickItem="handleClickItem"></m-tabs>
</div> -->
<div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab">
<!-- <p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
长角苗民俗及文化遗产
</p> -->
<SMGZ v-if="activeTab == 'smgz'" />
<YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<JYYCC v-else-if="activeTab == 'jyycc'" />
<div v-else class="img-container">
<img :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)
" alt="" />
</div>
</div>
</div>
</div>
</template>
<script>
import mTabs from '@/views/home/components/Boutique.vue'
import SMGZ from "./components/SMGZ";
import YLGDYW from "./components/YLGDYW";
import JYYCC from "./components/jyycc";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { mTabs, SMGZ, YLGDYW,JYYCC },
data() {
return {
tabs: [
{ tab: "smgz", name: "神秘贵州" },
{ tab: "jyycc", name: "记忆与传承" },
{ tab: "ylgdyw", name: "夜郎国的疑问" },
{ tab: "sdcs", name: "四渡赤水出奇兵" },
{ tab: "lzsg", name: "六枝梭戛" },
{ tab: "zggz", name: "中共贵州省工委斗争纪略展" },
{ tab: "gzjy", name: "贵州教育史馆" },
],
activeTab: "",
// content: { title: "四渡赤水" }
};
},
computed: {
...mapGetters(["navbarHeight"]),
content() {
let obj = Object.create(null);
const { tabs, activeTab } = this;
let node = tabs.find((n) => n.tab === activeTab);
node && (obj.title = node.name);
return obj;
},
},
watch: {
activeTab: {
handler: function (value) {
let color = "";
if (!value) {
return;
}
switch (value) {
case "sdcs":
color = "4";
break;
case "smgz":
color = "5";
break;
case "jyycc":
color = "6";
break;
case "ylgdyw":
color = "7";
break;
case "cjm":
color = "1";
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
},
mounted() {
this.activeTab = "smgz";
},
methods: {
handleTabClick(data) {
this.activeTab = data.tab;
let el = document.getElementsByClassName("boutique-header")[0];
let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
document.documentElement.scroll({
top: height,
behavior: "smooth", // 平滑移动
});
},
// handleClickItem(key) {
// this.activeTab = key
// let el = document.getElementsByClassName("boutique-tabs")[0];
// let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
// document.documentElement.scroll({
// top: height,
// behavior: "smooth", // 平滑移动
// });
// }
},
};
</script>
<style lang="scss" scoped>
.boutique {
min-height: calc(100% - 300px);
.boutique-header {
position: relative;
overflow: hidden;
>img {
height: 500px;
object-fit: cover;
}
}
.boutique-tabs {
width: 100%;
height: 100vh;
cursor: pointer;
}
.fixed-tabs {
position: fixed;
left: 0;
top: 100px;
z-index: 9999;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
display: none;
li {
flex: 1;
position: relative;
.tab-container {
width: 100px;
height: 100%;
position: absolute;
left: -70px;
transition: all ease 0.5s;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
left: 0;
.name {
opacity: 1;
}
}
img {
width: 100%;
height: 100%;
}
.name {
position: absolute;
left: 2px;
opacity: 0;
color: #fff;
font-family: "SourceHanSerifCN-Bold";
width: 80%;
margin: 4px;
}
}
}
// li {
// margin-bottom: 32px;
// & > span {
// color: #fff;
// cursor: pointer;
// }
// }
}
.boutique-title {
height: 500px;
position: relative;
overflow: hidden;
z-index: 1;
>p {
margin: 0;
font-size: 46px;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 12px;
background-image: -webkit-linear-gradient(45deg, #98bcff, #814b02);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: hue 6s infinite linear;
}
>span {
font-weight: 600;
font-family: "宋体";
font-size: 24px;
position: absolute;
top: 65%;
left: 60%;
color: #666;
}
}
ul.tabs {
display: flex;
justify-content: space-between;
position: absolute;
z-index: 1;
padding: 10px 0;
width: 100%;
bottom: 0;
>li {
flex: 1;
>div {
text-align: center;
>span {
font-size: 20px;
color: #333;
font-weight: 600;
font-family: "楷体";
&:hover {
cursor: pointer;
position: relative;
color: #003fa7;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $themeColor;
border-radius: 30px;
}
}
}
&.active {
>span {
position: relative;
color: #003fa7;
text-shadow: 6px 2px 2px #999;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $themeColor;
border-radius: 30px;
}
}
}
}
}
}
.boutique-content {
.focus-content {
// padding: 20px 0;
// margin: 20px;
box-shadow: 1px 12px 10px 1px #ddd;
margin-top: 0;
min-height: 600px;
// display: flex;
// justify-content: center;
// align-items: center;
font-size: 30px;
// font-weight: 600;
// background: rgb(239 247 255);
>p {
margin: 0;
}
.img-container {
width: 100%;
img {
width: 100%;
}
}
}
}
}
@keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
</style>
src/views/boutique/index.vue
浏览文件 @ d228ffc0
<template>
<div class="boutique">
<div class="boutique-header">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
<ul class="tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div :class="{ active: activeTab === node.tab }">
<span>{{ node.name }}</span>
</div>
</li>
</ul>
</div>
<!-- <ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container">
<img :src="
require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
" alt="" />
<span class="name">{{ node.name }}</span>
</div>
</li>
</ul> -->
<!-- <div class="boutique-tabs">
<m-tabs @handleClickItem="handleClickItem"></m-tabs>
</div> -->
<div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab">
<!-- <p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
长角苗民俗及文化遗产
</p> -->
<SMGZ v-if="activeTab == 'smgz'" />
<YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<JYYCC v-else-if="activeTab == 'jyycc'" />
<div class="botique">
<SMGZ v-if="currentTitle == '神秘贵州'" />
<YLGDYW v-else-if="currentTitle == '夜郎国的疑问'" />
<JYYCC v-else-if="currentTitle == '记忆与传承'" />
<div v-else class="img-container">
<img :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)
" alt="" />
</div>
</div>
<!-- <img :src="require(`@/assets/imgs/boutique/${currentTitle}.jpg`)
" alt="" /> -->
<el-empty description="暂无数据"></el-empty>
</div>
</div>
</template>
<script>
import mTabs from '@/views/home/components/Boutique.vue'
// import mTabs from '@/views/home/components/Boutique.vue'
import SMGZ from "./components/SMGZ";
import YLGDYW from "./components/YLGDYW";
import JYYCC from "./components/jyycc";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { mTabs, SMGZ, YLGDYW,JYYCC },
components: { SMGZ, YLGDYW, JYYCC },
data() {
return {
tabs: [
{ tab: "smgz", name: "神秘贵州" },
{ tab: "jyycc", name: "记忆与传承" },
{ tab: "ylgdyw", name: "夜郎国的疑问" },
{ tab: "sdcs", name: "四渡赤水出奇兵" },
{ tab: "lzsg", name: "六枝梭戛" },
{ tab: "zggz", name: "中共贵州省工委斗争纪略展" },
{ tab: "gzjy", name: "贵州教育史馆" },
],
activeTab: "",
// content: { title: "四渡赤水" }
};
},
computed: {
...mapGetters(["navbarHeight"]),
content() {
let obj = Object.create(null);
const { tabs, activeTab } = this;
let node = tabs.find((n) => n.tab === activeTab);
node && (obj.title = node.name);
return obj;
},
},
watch: {
activeTab: {
handler: function (value) {
let color = "";
if (!value) {
return;
currentTitle: ''
}
switch (value) {
case "sdcs":
color = "4";
break;
case "smgz":
color = "5";
break;
case "jyycc":
color = "6";
break;
case "ylgdyw":
color = "7";
break;
case "cjm":
color = "1";
}
this.$store.commit("app/CHANGE_NAV_COLOR", color);
},
immediate: true,
},
},
mounted() {
this.activeTab = "smgz";
},
methods: {
handleTabClick(data) {
this.activeTab = data.tab;
let el = document.getElementsByClassName("boutique-header")[0];
let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
document.documentElement.scroll({
top: height,
behavior: "smooth", // 平滑移动
});
},
// handleClickItem(key) {
// this.activeTab = key
// let el = document.getElementsByClassName("boutique-tabs")[0];
// let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
// document.documentElement.scroll({
// top: height,
// behavior: "smooth", // 平滑移动
// });
// }
},
};
</script>
<style lang="scss" scoped>
.boutique {
min-height: calc(100% - 300px);
.boutique-header {
position: relative;
overflow: hidden;
>img {
height: 500px;
object-fit: cover;
}
}
.boutique-tabs {
width: 100%;
height: 100vh;
cursor: pointer;
}
.fixed-tabs {
position: fixed;
left: 0;
top: 100px;
z-index: 9999;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
display: none;
li {
flex: 1;
position: relative;
.tab-container {
width: 100px;
height: 100%;
position: absolute;
left: -70px;
transition: all ease 0.5s;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
left: 0;
.name {
opacity: 1;
}
}
img {
width: 100%;
height: 100%;
}
.name {
position: absolute;
left: 2px;
opacity: 0;
color: #fff;
font-family: "SourceHanSerifCN-Bold";
width: 80%;
margin: 4px;
}
}
}
// li {
// margin-bottom: 32px;
// & > span {
// color: #fff;
// cursor: pointer;
// }
// }
}
.boutique-title {
height: 500px;
position: relative;
overflow: hidden;
z-index: 1;
>p {
margin: 0;
font-size: 46px;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 12px;
background-image: -webkit-linear-gradient(45deg, #98bcff, #814b02);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: hue 6s infinite linear;
}
>span {
font-weight: 600;
font-family: "宋体";
font-size: 24px;
position: absolute;
top: 65%;
left: 60%;
color: #666;
}
}
ul.tabs {
display: flex;
justify-content: space-between;
position: absolute;
z-index: 1;
padding: 10px 0;
width: 100%;
bottom: 0;
>li {
flex: 1;
>div {
text-align: center;
>span {
font-size: 20px;
color: #333;
font-weight: 600;
font-family: "楷体";
&:hover {
cursor: pointer;
position: relative;
color: #003fa7;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $themeColor;
border-radius: 30px;
}
}
}
&.active {
>span {
position: relative;
color: #003fa7;
text-shadow: 6px 2px 2px #999;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $themeColor;
border-radius: 30px;
}
}
}
}
}
}
.boutique-content {
.focus-content {
// padding: 20px 0;
// margin: 20px;
box-shadow: 1px 12px 10px 1px #ddd;
margin-top: 0;
min-height: 600px;
// display: flex;
// justify-content: center;
// align-items: center;
font-size: 30px;
// font-weight: 600;
// background: rgb(239 247 255);
>p {
margin: 0;
}
.img-container {
width: 100%;
img {
width: 100%;
}
}
}
this.currentTitle = this.$route.params.title
}
}
</script>
@keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
<style>
to {
-webkit-filter: hue-rotate(-360deg);
}
}
</style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ d228ffc0
......@@ -36,7 +36,9 @@
<el-row :gutter="40" class="cr-list">
<el-col :span="8" class="cr-item" @click.native="handleClick(item)" @mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)" v-for="(item, index) in list.records" :key="index">
<div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
<div class="boutique-tag" v-if="isBoutique(item)">精</div>
<div class="img-container">
<img :src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
......@@ -104,11 +106,17 @@ export default {
label: '全部',
value: ''
}],
currentType: ''
currentType: '',
boutiqueTitles: ['神秘贵州', '四渡赤水', '记忆与传承', '夜郎国的疑问']
};
},
computed: {
...mapGetters(["dicts"]),
isBoutique(item) {
return (item) => {
return this.boutiqueTitles.indexOf(item.title) != -1
}
}
},
async created() {
// await this.$store.dispatch("dict/getDictList", ["displayType"]);
......@@ -119,7 +127,7 @@ export default {
mounted() {
let paramsType = this.$route.query.type
if (paramsType) {
this.currentType =paramsType
this.currentType = paramsType
}
this.loadData();
this.loadRegionTree();
......@@ -170,13 +178,22 @@ export default {
},
handleClick(item) {
let index = this.boutiqueTitles.indexOf(item.title)
// debugger
let newPage;
if (index == -1) {
const { themeType, exhibitionId } = item;
const newPage = this.$router.resolve({
newPage = this.$router.resolve({
path: `display/${themeType}/${exhibitionId}`,
});
} else {
newPage = this.$router.resolve({
path: `/boutique/${item.title}`,
});
}
window.open(newPage.href, "_blank");
// this.$router.push(`display/${themeType}/${exhibitionId}`);
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
......@@ -369,7 +386,8 @@ $text-indent: 16px;
cursor: pointer;
// border: 1px solid $themeSecondaryColor;
color: #999;
&:hover{
&:hover {
color: $themeColor;
}
}
......@@ -404,6 +422,20 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
.boutique-tag {
width: 40px;
height: 40px;
background: $themeSecondaryColor;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
right: 0;
top: 0;
position: absolute;
z-index: 9;
}
&:hover {
border: 2px solid $themeColor;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论