Skip to content

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

文物页、首页、精品展首屏布局修改

上级 77b2b159
显示空白字符变更
内嵌 并排
正在显示 包含 1820 行增加 和 619 行删除
src/components/ReaderOperations/like.vue
浏览文件 @ 500f4865
...@@ -2,13 +2,21 @@ ...@@ -2,13 +2,21 @@
<span> <span>
<span class="operations"> <span class="operations">
<span class="operation-item"> <span class="operation-item">
<svg-icon <!-- <svg-icon
@click="handleLike" @click="handleLike"
:icon-class="loveCountStatus ? 'like-s' : 'like'" :icon-class="loveCountStatus ? 'like-s' : 'like'"
:style="{ :style="{
fontSize: iconSize + 'px', fontSize: iconSize + 'px',
color: loveCountStatus ? selectColor : '#61666d', color: loveCountStatus ? selectColor : '#61666d',
}" }"
></svg-icon> -->
<svg-icon
@click="handleLike"
:icon-class="loveCountStatus ? 'like-s' : 'like'"
:style="{
fontSize: iconSize + 'px',
color: loveCountStatus ? selectColor : '#ddd',
}"
></svg-icon> ></svg-icon>
<span>{{ <span>{{
formatNum(loveCount) == 0 ? "点赞" : formatNum(loveCount) formatNum(loveCount) == 0 ? "点赞" : formatNum(loveCount)
......
src/components/SlideImage/slider.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="card-slider">
<div class="swiper">
<swiper
class="swiper gallery-top"
:options="swiperOptionTop"
ref="swiperTop"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in imgList"
:key="index"
>
<img :src="item.pressUrl" alt="" />
<!-- <div class="enlarge" @click="handelPreviewImages(imgList)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> -->
</swiper-slide>
</swiper>
</div>
<!-- <el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="previewList"
/> -->
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
name: "SlideImage",
components: {
swiper,
swiperSlide,
/* "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), */
},
props: {
imgKey: {
type: String,
default: "pressUrl",
},
imgList: {
type: Array,
default: () => [],
},
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
imgViewerVisible: false,
};
},
/* mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
}, */
methods: {
handelPreviewImages(items) {
this.imgViewerVisible = true;
this.previewList = items.map((item) => this.$getFullUrl(item.url));
},
closeImgViewer() {
this.imgViewerVisible = false;
},
},
};
</script>
<style lang="scss" scoped>
.card-slider {
width: 100%;
height: 100%;
.slide-item {
background: transparent;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
</style>
src/views/boutique/index.vue
浏览文件 @ 500f4865
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</li> </li>
</ul> </ul>
</div> --> </div> -->
<ul class="fixed-tabs"> <!-- <ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)"> <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container"> <div class="tab-container">
<img <img
...@@ -22,7 +22,10 @@ ...@@ -22,7 +22,10 @@
<span class="name">{{ node.name }}</span> <span class="name">{{ node.name }}</span>
</div> </div>
</li> </li>
</ul> </ul> -->
<div class="boutique-tabs">
<m-tabs></m-tabs>
</div>
<div class="boutique-content" ref="boutiqueContent"> <div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab"> <div class="focus-content" v-if="activeTab">
...@@ -48,6 +51,7 @@ ...@@ -48,6 +51,7 @@
</template> </template>
<script> <script>
import mTabs from '@/views/home/components/Boutique.vue'
import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import SMGZ from "./components/SMGZ"; import SMGZ from "./components/SMGZ";
...@@ -55,7 +59,7 @@ import SMGZ from "./components/SMGZ"; ...@@ -55,7 +59,7 @@ import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
name: "Boutique", name: "Boutique",
components: { NavBar, Footer, SMGZ }, components: { NavBar, Footer, SMGZ, mTabs },
data() { data() {
return { return {
tabs: [ tabs: [
...@@ -141,6 +145,10 @@ export default { ...@@ -141,6 +145,10 @@ export default {
// object-fit: cover; // object-fit: cover;
// } // }
// } // }
.boutique-tabs {
width: 100%;
height: 100vh;
}
.fixed-tabs { .fixed-tabs {
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -149,6 +157,7 @@ export default { ...@@ -149,6 +157,7 @@ export default {
height: calc(100vh - 100px); height: calc(100vh - 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
display: none;
li { li {
flex: 1; flex: 1;
position: relative; position: relative;
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 500f4865
<template> <template>
<div class="content"> <div class="content">
<!-- 文物图片 --> <div class="bg">
<!-- <div class="content-item display-detail_imgs" ref="imgs"> <img src="@/assets/imgs/gray.jpg" alt="" />
<img <div class="mask"></div>
class="animate__animated animate__fadeInDownBig" </div>
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
id="faceImage"
:src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)"
/>
<img
id="faceImage"
v-else-if="CRDetail.faceImagePressUrl"
class="animate__animated animate__fadeInDownBig"
:src="CRDetail.faceImagePressUrl"
/>
</div> -->
<div class="wrapper wow animate__animated animate__fadeInUpBig"> <div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner"> <div class="inner">
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info"> <div class="inner-left wow animate__animated animate__fadeInLeft">
<div class="info-container"> <div>
<div
class="
info-container-left
wow
animate__animated animate__fadeInLeft
"
>
<SlideImage <SlideImage
:imgList="CRDetail.imagesVo" :imgList="CRDetail.imagesVo"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0" v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
...@@ -37,14 +19,44 @@ ...@@ -37,14 +19,44 @@
v-else-if="CRDetail.faceImagePressUrl" v-else-if="CRDetail.faceImagePressUrl"
/> />
</div> </div>
<!-- <div>
<img :src="CRDetail.faceImagePressUrl" alt="" />
</div> -->
</div>
<div <div class="inner-right">
class=" <!-- tabs -->
info-container-right <ul>
wow <li
animate__animated animate__fadeInRight :class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
" "
> >
<span>{{ node.name }}</span>
</li>
</template>
<li
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文献</span>
</li>
</ul>
<!-- 基本信息 -->
<div class="info-container-right" v-if="nodeActive === 'intro'">
<div class="wow animate__animated animate__fadeInRight">
<div class="info-title"> <div class="info-title">
<span>{{ CRDetail.name }} </span> <span>{{ CRDetail.name }} </span>
<div class="view-count"> <div class="view-count">
...@@ -53,59 +65,66 @@ ...@@ -53,59 +65,66 @@
</div> </div>
</div> </div>
<div class="basic-info"> <div class="basic-info">
<div class="body-item"> <div class="body-item" v-if="CRDetail.yearsLabel">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="keyword"></svg-icon> -->
年代</span 年代</span
> > -->
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span> <span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div> </div>
<div class="body-item"> <div class="body-item" v-if="CRDetail.sourceWay">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="glww"></svg-icon> -->
来源</span 来源</span
> > -->
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span> <span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div> </div>
<div class="body-item"> <div class="body-item" v-if="CRDetail.typeLabel">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="zllx"></svg-icon> -->
类别</span 类别</span
> > -->
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span> <span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div> </div>
<div class="body-item"> <div class="body-item" v-if="CRDetail.levelLabel">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="zlxz"></svg-icon> -->
级别</span 级别</span
> > -->
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span> <span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div> </div>
<div class="body-item"> <div class="body-item" v-if="CRDetail.textureTypeLabel">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="wwzd"></svg-icon> -->
质地</span 质地</span
> > -->
<span class="value">{{ <span class="value">{{
CRDetail.textureTypeLabel || "暂无" CRDetail.textureTypeLabel || "暂无"
}}</span> }}</span>
</div> </div>
<div class="body-item"> <div class="body-item" v-if="CRDetail.detailSize">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="wwcc"></svg-icon> -->
尺寸 尺寸
</span> </span> -->
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span> <span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div> </div>
<div class="body-item"> <div class="body-item" v-if="CRDetail.deptName">
<span class="label"> <!-- <span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
馆藏单位</span 馆藏单位</span
> > -->
<span class="value">{{ CRDetail.deptName || "暂无" }}</span> <span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div> </div>
</div> </div>
<!-- 文物简介 -->
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-content">
<div
class="intro-content-container"
v-html="CRDetail.intro"
></div>
</div>
</div>
<div class="bottom"> <div class="bottom">
<div class="tools"> <div class="tools">
<ReaderOperations <ReaderOperations
...@@ -126,77 +145,30 @@ ...@@ -126,77 +145,30 @@
</div> </div>
</div> </div>
</div> </div>
<div <!-- 音频 -->
<!-- <div
class="audio wow animate__animated animate__fadeInRight" class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" :style="{
animationPlayState: audioPlaying ? 'running' : 'paused',
}"
@click="handleClickAudio" @click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0" v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
> >
<!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
<svg-icon icon-class="music"></svg-icon> <svg-icon icon-class="music"></svg-icon>
<AudioPlayer <AudioPlayer
style="display: none" style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)" :url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer" ref="AudioPlayer"
/> />
</div> </div> -->
</div>
<div
class="content-item display-detail_tabbar"
id="tabbar"
:class="{ isFixed: isFixed }"
>
<span v-for="(item, index) in tabbarData" :key="index">
<span
@click="handleClickTabItem(item)"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
v-html="item.name"
v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
>
</span>
<span
@click="handleClickTabItem(item)"
v-else-if="
item.domId == 'relateRelics' &&
relateRelics &&
relateRelics.length > 0
"
v-html="item.name"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
>
</span>
</span>
</div>
<!-- 文物简介 -->
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
<span>文物简介</span>
</div>
<div class="intro-content">
<div class="left-box">简介</div>
<div class="intro-content-container" v-html="CRDetail.intro"></div>
</div>
</div>
<!-- 文物视频 --> <!-- 文物视频 -->
<div <div
class="content-item display-detail_videos" class="content-item display-detail_videos"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
"
id="videosVo" id="videosVo"
> >
<div class="video-title"> <div class="video-title">
...@@ -228,48 +200,49 @@ ...@@ -228,48 +200,49 @@
class="video-box" class="video-box"
></video-player> ></video-player>
</div> </div>
<!--相关文物 --> <!--相关文物 -->
<div <div
class="content-item display-detail_relate_rc" class="content-item display-detail_relate_rc"
ref="units" ref="units"
id="relateRelics" id="relateRelics"
v-if="nodeActive === 'relateRelics'"
> >
<div class="intro-title">
<!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
<span>相关文物推荐</span>
</div>
<div class="recommend-type"> <div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small"> <el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio> <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio> <el-radio :label="'years'" v-if="CRDetail.years"
>同年代</el-radio
>
<el-radio :label="'deptId'" v-if="CRDetail.deptId" <el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio >同馆藏</el-radio
> >
</el-radio-group> </el-radio-group>
</div> </div>
<el-row :gutter="8" v-if="relateRelics.length > 0"> <div class="recommend-obj">
<el-col <div class="recommend-obj-node" v-if="relateRelics.length > 0">
:span="6" <div v-for="(item, index) in relateRelics" :key="index">
v-for="(item, index) in relateRelics"
:key="index"
>
<div class="img-container" @click="handleToCr(item)"> <div class="img-container" @click="handleToCr(item)">
<img :src="item.faceImagePressUrl" alt="" /> <img :src="item.faceImagePressUrl" alt="" />
</div> </div>
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
</el-col> </div>
</el-row> </div>
<el-empty <el-empty
v-else v-else
description="暂无相关推荐，去看看其他的吧~" description="暂无相关推荐，去看看其他的吧~"
></el-empty> ></el-empty>
</div> </div>
</div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div
class="content-item display-detail_lts" class="content-item display-detail_lts"
id="literatureVo" id="literatureVo"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0" v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
"
> >
<!-- <div class="wrapper"> --> <!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp"> <div class="custom_title wow animate__animated animate__fadeInUp">
...@@ -335,6 +308,7 @@ ...@@ -335,6 +308,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<el-image-viewer <el-image-viewer
v-if="imgViewerVisible" v-if="imgViewerVisible"
:on-close="closeImgViewer" :on-close="closeImgViewer"
...@@ -343,7 +317,7 @@ ...@@ -343,7 +317,7 @@
</div> </div>
</template> </template>
<script> <script>
// import SearchBar from "@/components/SearchBar"; // import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle"; // import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2"; // import QRCode from "qrcodejs2";
...@@ -353,7 +327,7 @@ import ReaderOperations from "@/components/ReaderOperations"; ...@@ -353,7 +327,7 @@ import ReaderOperations from "@/components/ReaderOperations";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic"; import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage"; import SlideImage from "@/components/SlideImage/slider.vue";
import { isElementInViewport2 } from "@/utils/index"; import { isElementInViewport2 } from "@/utils/index";
export default { export default {
components: { components: {
...@@ -399,6 +373,7 @@ export default { ...@@ -399,6 +373,7 @@ export default {
}, },
], ],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"], // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
nodeActive: "intro",
}; };
}, },
watch: { watch: {
...@@ -412,7 +387,7 @@ export default { ...@@ -412,7 +387,7 @@ export default {
async mounted() { async mounted() {
let crId = this.$route.params.crId; let crId = this.$route.params.crId;
this.loadDetail(crId); this.loadDetail(crId);
setTimeout(() => { /* setTimeout(() => {
window.addEventListener("scroll", this.initHeight); window.addEventListener("scroll", this.initHeight);
this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度 this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
this.tabbarData.map((item) => { this.tabbarData.map((item) => {
...@@ -421,7 +396,7 @@ export default { ...@@ -421,7 +396,7 @@ export default {
item.position = dom.offsetTop - 320; //100navbar 55tabbar item.position = dom.offsetTop - 320; //100navbar 55tabbar
} }
}); });
}, 500); }, 500); */
}, },
beforeRouteLeave(to, form, next) { beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件 // 离开路由移除滚动事件
...@@ -582,11 +557,15 @@ export default { ...@@ -582,11 +557,15 @@ export default {
} }
}); });
}, },
handleTabClick(type) {
this.nodeActive = type;
},
}, },
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
// 自定义分页器样式 // 自定义分页器样式
#page { #page {
height: 30px; height: 30px;
...@@ -598,528 +577,207 @@ export default { ...@@ -598,528 +577,207 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 $node-w: 700px;
/**公共样式开始 */
$titleFontFamily: SourceHanSerifCN-Bold;
.custom-title {
width: 50px;
background-color: #d72f3f;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content { .content {
// background: url("@/assets/imgs/display/normal/bg1.png"); position: relative;
background-color: #f3f3f3; .bg {
min-height: 100px; position: absolute;
} top: 0;
.content-item { left: 0;
width: 100%; z-index: 0;
}
.custom_title {
display: flex;
width: 100%;
padding: 50px 0 40px 0;
align-items: center;
.center {
width: 180px;
margin: 0 10px;
display: flex;
align-items: center;
.svg-icon {
font-size: 50px;
color: $themeColor;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
line-height: 101px;
}
}
.desc {
flex: 1;
display: flex;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
width: 100%; width: 100%;
} height: 100%;
} overflow: hidden;
.divider { > img {
flex: 1;
height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%; width: 100%;
overflow: h;
filter: opacity(0.2) brightness(0.6);
} }
} .mask {
}
}
.enlarge {
position: absolute; position: absolute;
bottom: 20px; top: 0;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
.intro-title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
margin-bottom: 32px;
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
}
.isFixed {
position: fixed;
left: 0; left: 0;
top: 100px;
z-index: 99;
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; background: rgb(32 44 48 / 80%);
} }
} }
.wrapper {
width: 1200px;
// padding: 0 13%;
// width: 100%;
// width: 78%;
display: flex;
justify-content: center;
.inner { .inner {
width: 100%; width: 100%;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
background-color: #fff;
// margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 40px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
max-height: 460px;
margin-right: 50px;
flex: 1;
overflow: hidden;
position: relative;
// .imagesVo-image-container {
// // position: relative;
// } .inner-left {
.img-container { width: 50%;
height: 100%; height: 100vh;
width: 100%; position: relative;
background: #f5f5f9; > div {
img { width: 90%;
width: 100%; height: 60vh;
height: 100%; position: absolute;
object-fit: contain; top: 50%;
} left: 50%;
} transform: translate(-50%, -70%);
}
.info-container-right {
flex: 1;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
font-size: 18px;
.label {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
width: 120px; > img {
// margin-right: 26px; max-width: 100%;
// margin-bottom: 10px; max-height: 100%;
font-weight: bold;
color: #999;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
} }
} }
.value {
color: #666;
// font-weight: bold;
} }
.inner-left {
padding: 0 60px;
::v-deep .firstDiv {
position: unset;
transform: none;
} }
} }
.inner-right {
.bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
.qrcode {
display: flex;
justify-content: center;
img {
width: 50%; width: 50%;
height: 100%; height: 100vh;
} position: relative;
}
.showIcon { ul {
height: 40px; line-height: 50px;
position: absolute;
right: 60px;
top: 30px;
width: 30px;
> li {
border: 1px solid #ddd;
writing-mode: vertical-lr;
width: 100%; width: 100%;
display: flex; padding-top: 25px;
justify-content: center; height: 140px;
align-items: center; margin: -1px 0;
background-color: $themeColor; > span {
margin: 20px 0;
color: #fff; color: #fff;
cursor: pointer; padding: 11px 2px;
transition: all 0.3s ease; border-radius: 8px 0 8px 0;
&:hover { background: $themeColor;
// box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
opacity: 0.8;
} }
.svg-icon {
margin-right: 8px; &:hover,
} &.active {
}
.tools {
width: 100%;
margin-top: 10px;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: $themeColor;
}
}
}
}
}
}
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; background-color: $themeColor;
transform-origin: center center; > span {
border: 2px solid $themeColor; background: #b5800a;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: $themeColor;
font-size: 80px;
} }
img {
width: 60px;
height: 60px;
} }
} }
} }
.display-detail_tabbar { .info-container-right {
background-color: #fff; width: $node-w;
padding-bottom: 40px;
.info-title {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
padding: 10px; padding-top: 60px;
border-bottom: 1px solid #f2f2f2; padding-bottom: 10px;
.tab-item { > span {
height: 100%; font-size: 48px;
margin-right: 20px; font-family: "华文行楷";
color: #666; font-weight: 600;
font-size: 24px; color: #fff;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
} }
.view-count {
> span {
margin-left: 10px;
color: #ddd;
} }
&::after { > svg {
display: none; color: #ddd;
} }
} }
.active {
color: $themeColor;
&::after {
display: inline-block;
} }
.basic-info {
display: flex;
flex-wrap: wrap;
padding-bottom: 60px;
color: #c2cbd3;
> div {
flex-shrink: 0;
line-height: 24px;
padding: 0px 10px;
border: 1px solid #c2cbd3;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
} }
.tab-item::after,
.active::after {
position: absolute;
content: "";
height: 4px;
width: 100%;
bottom: -10px;
left: 0;
background-color: $themeColor;
} }
} }
/**简介和视频 */ #intro {
.display-detail_intro { min-height: 300px;
padding: 40px;
.intro-content { .intro-content {
line-height: 28px; color: #ffb836;
display: flex;
}
.left-box {
width: 60px;
background-color: $themeColor;
min-height: 200px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
} }
.intro-content-container { .intro-content-container {
flex: 1; width: $node-w;
text-indent: 34px; font-size: 16px;
padding: 16px 32px; line-height: 2;
background-color: rgba($themeColor, 10%); // text-indent: 32px;
} }
} }
.display-detail_videos { #relateRelics {
display: flex; padding-top: 60px;
flex-direction: column; width: 800px;
background-color: #fff; .recommend-type {
.video-title {
display: flex;
// justify-content: center;
align-items: center;
font-size: 26px;
color: $themeColor;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
padding-left: 46px;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-bottom: 1px solid #f2f0f0; margin-bottom: 40px;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
} }
} .recommend-obj {
.video-box { width: 100%;
height: 600px; overflow: hidden;
.video-player { .recommend-obj-node {
height: 100%;
}
}
}
// 关联文物
.display-detail_relate_rc {
min-height: 560px;
// background-image: url("@/assets/imgs/display/normal/bg.png");
background-color: #fff;
background-size: 1%;
padding: 50px 46px;
.intro-title {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
font-family: SourceHanSerifCN-Bold; > div {
width: 50%;
padding: 20px;
} }
.recommend-type {
margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 8px;
} }
.el-row {
.el-col {
.img-container { .img-container {
width: 100%; width: 100%;
height: 214px; height: 260px;
position: relative; display: flex;
justify-content: center;
&:hover {
cursor: pointer; cursor: pointer;
background-color: #939393; > img {
img { transform: scale(1.2);
width: 100%;
height: 100%;
object-fit: contain;
} }
} }
.cr-name { > img {
font-size: 18px; max-width: 100%;
// font-weight: bold; max-height: 100%;
color: #666; transition: all 0.3s ease;
text-align: left; transform: scale(1);
margin: 20px 0;
text-indent: 2px;
} }
} }
.cr-name {
line-height: 32px;
text-align: center;
font-weight: 600;
font-family: "楷体";
} }
} }
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
} }
} }
} }
::v-deep .reader-operations {
color: #b2b2b2;
font-weight: 600;
font-family: "幼圆";
svg {
color: #b2b2b2;
}
} }
} }
::v-deep .el-carousel__item--card { ::v-deep .el-carousel__item--card {
...@@ -1154,7 +812,10 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1154,7 +812,10 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
} }
::v-deep .el-radio__input.is-checked + .el-radio__label { ::v-deep .el-radio__input.is-checked + .el-radio__label {
color: $themeColor; color: #ffb836;
}
::v-deep .el-radio__input+.el-radio__label {
color: #fff;
} }
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{ // ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0; // border-radius: 0;
......
src/views/culturalRelic/detail-bp.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="content">
<!-- 文物图片 -->
<!-- <div class="content-item display-detail_imgs" ref="imgs">
<img
class="animate__animated animate__fadeInDownBig"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
id="faceImage"
:src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)"
/>
<img
id="faceImage"
v-else-if="CRDetail.faceImagePressUrl"
class="animate__animated animate__fadeInDownBig"
:src="CRDetail.faceImagePressUrl"
/>
</div> -->
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
class="
info-container-left
wow
animate__animated animate__fadeInLeft
"
>
<SlideImage
:imgList="CRDetail.imagesVo"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
/>
<SlideImage
:imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-else-if="CRDetail.faceImagePressUrl"
/>
</div>
<div
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
>
<div class="info-title">
<span>{{ CRDetail.name }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
</div>
<div class="basic-info">
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="keyword"></svg-icon> -->
年代</span
>
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="glww"></svg-icon> -->
来源</span
>
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zllx"></svg-icon> -->
类别</span
>
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zlxz"></svg-icon> -->
级别</span
>
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwzd"></svg-icon> -->
质地</span
>
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwcc"></svg-icon> -->
尺寸
</span>
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
馆藏单位</span
>
<span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div>
</div>
<div class="bottom">
<div class="tools">
<ReaderOperations
:loveCount="CRDetail.loveCount"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
</div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon
>查看文物3D模型
</div>
</div>
</div>
</div>
<div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
<div
class="content-item display-detail_tabbar"
id="tabbar"
:class="{ isFixed: isFixed }"
>
<span v-for="(item, index) in tabbarData" :key="index">
<span
@click="handleClickTabItem(item)"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
v-html="item.name"
v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
>
</span>
<span
@click="handleClickTabItem(item)"
v-else-if="
item.domId == 'relateRelics' &&
relateRelics &&
relateRelics.length > 0
"
v-html="item.name"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
>
</span>
</span>
</div>
<!-- 文物简介 -->
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
<span>文物简介</span>
</div>
<div class="intro-content">
<div class="left-box">简介</div>
<div class="intro-content-container" v-html="CRDetail.intro"></div>
</div>
</div>
<!-- 文物视频 -->
<div
class="content-item display-detail_videos"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
id="videosVo"
>
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
相关视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
<!--相关文物 -->
<div
class="content-item display-detail_relate_rc"
ref="units"
id="relateRelics"
>
<div class="intro-title">
<!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
<span>相关文物推荐</span>
</div>
<div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
</el-radio-group>
</div>
<el-row :gutter="8" v-if="relateRelics.length > 0">
<el-col
:span="6"
v-for="(item, index) in relateRelics"
:key="index"
>
<div class="img-container" @click="handleToCr(item)">
<img :src="item.faceImagePressUrl" alt="" />
</div>
<div class="cr-name">{{ item.name }}</div>
</el-col>
</el-row>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
id="literatureVo"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="CRDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
// import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import { isElementInViewport2 } from "@/utils/index";
export default {
components: {
AudioPlayer,
ReaderOperations,
Video,
videoPlayer,
SlideImage,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
let vm = this;
return {
imgViewerVisible: false,
CRDetail: {},
relateRelics: [],
audioPlaying: true,
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
currentRcKey: "type",
currentVideo: null,
currentTab: null,
isFixed: false,
tabbarData: [
{
name: "文物简介",
domId: "intro",
},
{
name: "相关视频",
domId: "videosVo",
},
{
name: "相关文物",
domId: "relateRelics",
},
{
name: "相关文献",
domId: "literatureVo",
},
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
};
},
watch: {
"$route.params.crId"(value) {
this.loadDetail(value);
},
currentRcKey(key) {
this.loadCrRecommend();
},
},
async mounted() {
let crId = this.$route.params.crId;
this.loadDetail(crId);
setTimeout(() => {
window.addEventListener("scroll", this.initHeight);
this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
this.tabbarData.map((item) => {
let dom = document.getElementById(item.domId);
if (dom) {
item.position = dom.offsetTop - 320; //100navbar 55tabbar
}
});
}, 500);
},
beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件
window.removeEventListener("scroll", this.initHeight);
next();
},
methods: {
async loadDetail(crId) {
if (crId) {
let res = await getRCDetailByIdV2({ crId });
if (res.code == 0) {
this.CRDetail = res.data.culturalRelicVo;
// this.relateRelics = res.data.recommendList.records;
if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
this.currentVideo = this.CRDetail.videosVo[0];
}
// 获取关联文物
this.loadCrRecommend();
this.$nextTick(() => {
// this.replaceFaceImage();
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
}
}
},
async loadCrRecommend() {
const { crId } = this.CRDetail;
const params = {
crId,
page: 1,
limit: 4,
};
if (this.currentRcKey == "type") {
params.type = this.CRDetail.type;
}
if (this.currentRcKey == "years") {
params.years = this.CRDetail.years;
}
if (this.currentRcKey == "deptId") {
params.deptId = this.CRDetail.deptId;
}
let res = await crRecommendByPage(params);
this.relateRelics = res.data.records;
// console.log("res", res);
},
replaceFaceImage() {
var img = new Image(); //新建一个图片对象
let url; //最终显示的大图
// debugger
if (this.CRDetail.faceImagePressUrl) {
url = this.$getFullUrl(this.CRDetail.faceImageUrl);
} else if (this.CRDetail.imagesVo.length > 0) {
url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
}
let faceImage = document.getElementById("faceImage");
img.src = url;
img.onload = function () {
faceImage.src = url;
};
},
handleBack() {
this.$router.go(-1);
},
handleTo3D() {
this.$message.info("即将打开3D模型...");
setTimeout(() => {
window.open(this.CRDetail.url3d, "_blank");
}, 1000);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages(items, hasImages) {
this.imgViewerVisible = true;
if (hasImages) {
this.imgList = items.map((item) => this.$getFullUrl(item.url));
} else {
this.imgList = items.map((item) => this.$getFullUrl(item));
}
},
handleToDetail(crId) {
// const newPage = this.$router.resolve({
// path: `culturalReli/${crId}`,
// });
// window.open(newPage.href, "_blank");
this.$router.push(`culturalRelic/${crId}`);
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "/culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`/culturalRelic/${crId}`);
},
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
handleClickTabItem(item) {
this.currentTab = item;
if (item.position) {
document.documentElement.scrollTop = item.position;
}
},
initHeight() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
this.tabbarData.map((item) => {
let content = document.getElementById(item.domId);
if (content && isElementInViewport2(content)) {
this.currentTab = item;
}
});
},
},
};
</script>
<style lang="scss" >
// 自定义分页器样式
#page {
height: 30px;
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
</style>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$titleFontFamily: SourceHanSerifCN-Bold;
.custom-title {
width: 50px;
background-color: #d72f3f;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content {
// background: url("@/assets/imgs/display/normal/bg1.png");
background-color: #f3f3f3;
min-height: 100px;
}
.content-item {
width: 100%;
}
.custom_title {
display: flex;
width: 100%;
padding: 50px 0 40px 0;
align-items: center;
.center {
width: 180px;
margin: 0 10px;
display: flex;
align-items: center;
.svg-icon {
font-size: 50px;
color: $themeColor;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
line-height: 101px;
}
}
.desc {
flex: 1;
display: flex;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
width: 100%;
}
}
.divider {
flex: 1;
height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%;
}
}
}
}
.enlarge {
position: absolute;
bottom: 20px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
.intro-title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
margin-bottom: 32px;
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
}
.isFixed {
position: fixed;
left: 0;
top: 100px;
z-index: 99;
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.wrapper {
width: 1200px;
// padding: 0 13%;
// width: 100%;
// width: 78%;
display: flex;
justify-content: center;
.inner {
width: 100%;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
background-color: #fff;
// margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 40px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
max-height: 460px;
margin-right: 50px;
flex: 1;
overflow: hidden;
position: relative;
// .imagesVo-image-container {
// // position: relative;
// }
.img-container {
height: 100%;
width: 100%;
background: #f5f5f9;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.info-container-right {
flex: 1;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
font-size: 18px;
.label {
display: flex;
align-items: center;
width: 120px;
// margin-right: 26px;
// margin-bottom: 10px;
font-weight: bold;
color: #999;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
.value {
color: #666;
// font-weight: bold;
}
}
}
.bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
.qrcode {
display: flex;
justify-content: center;
img {
width: 50%;
height: 100%;
}
}
.showIcon {
height: 40px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: $themeColor;
margin: 20px 0;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
// box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
opacity: 0.8;
}
.svg-icon {
margin-right: 8px;
}
}
.tools {
width: 100%;
margin-top: 10px;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: $themeColor;
}
}
}
}
}
}
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $themeColor;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: $themeColor;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
}
.display-detail_tabbar {
background-color: #fff;
display: flex;
justify-content: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2;
.tab-item {
height: 100%;
margin-right: 20px;
color: #666;
font-size: 24px;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
}
&::after {
display: none;
}
}
.active {
color: $themeColor;
&::after {
display: inline-block;
}
}
.tab-item::after,
.active::after {
position: absolute;
content: "";
height: 4px;
width: 100%;
bottom: -10px;
left: 0;
background-color: $themeColor;
}
}
/**简介和视频 */
.display-detail_intro {
padding: 40px;
.intro-content {
line-height: 28px;
display: flex;
}
.left-box {
width: 60px;
background-color: $themeColor;
min-height: 200px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($themeColor, 10%);
}
}
.display-detail_videos {
display: flex;
flex-direction: column;
background-color: #fff;
.video-title {
display: flex;
// justify-content: center;
align-items: center;
font-size: 26px;
color: $themeColor;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
padding-left: 46px;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
// 关联文物
.display-detail_relate_rc {
min-height: 560px;
// background-image: url("@/assets/imgs/display/normal/bg.png");
background-color: #fff;
background-size: 1%;
padding: 50px 46px;
.intro-title {
display: flex;
align-items: center;
font-family: SourceHanSerifCN-Bold;
}
.recommend-type {
margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 8px;
}
.el-row {
.el-col {
.img-container {
width: 100%;
height: 214px;
position: relative;
cursor: pointer;
background-color: #939393;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.cr-name {
font-size: 18px;
// font-weight: bold;
color: #666;
text-align: left;
margin: 20px 0;
text-indent: 2px;
}
}
}
}
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-tree {
background: transparent;
.el-tree-node__content {
height: 50px;
:hover {
background: #fff;
color: $themeColor;
}
}
}
::v-deep .el-radio__input {
display: none;
}
::v-deep .el-radio__label {
font-size: 18px;
padding-left: 0;
font-family: SourceHanSerifCN-Bold;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
color: $themeColor;
}
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0;
// }
// ::v-deep .el-radio-button:last-child .el-radio-button__inner{
// border-radius: 0;
// }
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1200px);
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ 500f4865
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
<div class="search-bar wow animate__animated animate__fadeIn"> <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')"> <div class="search-item" @click="handleClickSearchBar('type')">
<span>{{currentType}}</span> <span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
<div class="search-item" @click="handleClickSearchBar('years')"> <div class="search-item" @click="handleClickSearchBar('years')">
<span>{{currentYears}}</span> <span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
...@@ -87,6 +87,12 @@ ...@@ -87,6 +87,12 @@
<span>共{{list.total}}件文物</span> <span>共{{list.total}}件文物</span>
</div> --> </div> -->
<div class="content-wrapper"> <div class="content-wrapper">
<div class="shade">
<div class="jxl">
<img src="@/assets/imgs/shade/jxl.png" alt="" />
</div>
</div>
<div>
<div class="content"> <div class="content">
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col <el-col
...@@ -111,7 +117,7 @@ ...@@ -111,7 +117,7 @@
class="face-image" class="face-image"
lazy lazy
/> />
<div class="deco-left-top"> <!-- <div class="deco-left-top">
<img <img
:src=" :src="
require(`@/assets/imgs/list/img-deco${ require(`@/assets/imgs/list/img-deco${
...@@ -150,11 +156,19 @@ ...@@ -150,11 +156,19 @@
" "
alt="" alt=""
/> />
</div> </div> -->
</div> </div>
<div class="showIcon" v-if="item && item.url3d"> <div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon> <svg-icon icon-class="3d" class="icon"></svg-icon>
</div> </div>
<div class="hover-bg">
<div>
<div>
<div class="name">{{ item.name }}</div>
<div class="depart">{{ item.deptName }}</div>
</div>
</div>
</div>
<div class="desc"> <div class="desc">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="desc-container"> <div class="desc-container">
...@@ -205,6 +219,7 @@ ...@@ -205,6 +219,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -250,13 +265,13 @@ export default { ...@@ -250,13 +265,13 @@ export default {
{ {
label: "全部年代", label: "全部年代",
value: "", value: "",
} },
]; ];
let typeList = [ let typeList = [
{ {
label: "全部类别", label: "全部类别",
value: "", value: "",
} },
]; ];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]); await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) { for (const key in this.dicts.culturalRelicType) {
...@@ -599,12 +614,12 @@ $text-indent: 16px; ...@@ -599,12 +614,12 @@ $text-indent: 16px;
} }
} }
.total{ .total {
padding: 0 13%; padding: 0 13%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
background-color: #fff; background-color: #fff;
&>span{ & > span {
display: inline-block; display: inline-block;
padding: 4px 8px; padding: 4px 8px;
background-color: #dfab46; background-color: #dfab46;
...@@ -615,7 +630,33 @@ $text-indent: 16px; ...@@ -615,7 +630,33 @@ $text-indent: 16px;
} }
.content-wrapper { .content-wrapper {
background-color: #fff; background-color: #fff;
padding: 0;
padding-bottom: 126px; padding-bottom: 126px;
> div {
padding: 0 13%;
}
.shade {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding: 0;
z-index: 0;
pointer-events: none;
> div.jxl {
height: 70vh;
filter: brightness(0.1);
opacity: 0.1;
position: absolute;
bottom: -80px;
right: -50px;
> img {
height: 100%;
}
}
}
.content { .content {
padding: 16px 0 60px; padding: 16px 0 60px;
...@@ -628,17 +669,26 @@ $text-indent: 16px; ...@@ -628,17 +669,26 @@ $text-indent: 16px;
.cr-item { .cr-item {
margin-bottom: 40px; margin-bottom: 40px;
.container { .container {
border: 2px solid #f1f1f1; // border: 2px solid #f1f1f1;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
width: 350px;
height: 350px;
// overflow: hidden;
justify-content: center;
text-align: center;
text-align: center;
&:hover { &:hover {
border: 2px solid $themeColor; // border: 2px solid $themeColor;
.face-image {
// border-radius: 100%;
/* .face-image {
transform: scale(1.2); transform: scale(1.2);
} } */
.img-container { .img-container {
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
...@@ -646,20 +696,75 @@ $text-indent: 16px; ...@@ -646,20 +696,75 @@ $text-indent: 16px;
.deco-right-bottom { .deco-right-bottom {
display: block; display: block;
} }
> img {
transform: scale(1.2);
filter: grayscale(0.7) blur(1px);
}
} }
.desc { .desc {
background: url("@/assets/imgs/list/card-title-bg.png"); // background: url("@/assets/imgs/list/card-title-bg.png");
// display: none;
opacity: 0;
}
.hover-bg {
> div {
opacity: 1;
width: 100%;
height: 100%;
}
}
}
.hover-bg {
width: 100%;
height: 100%;
// padding: 20px;
position: absolute;
left: 0;
top: 0;
> div {
opacity: 0;
width: 120%;
height: 120%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(66 85 92 / 80%);
color: #fff;
text-align: center;
border-radius: 100%;
transition: all 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
> div {
.name {
font-weight: 600;
font-family: "楷体";
font-size: 26px;
padding: 20px;
}
.depart {
color: #84b3cf;
font-family: "黑体";
}
}
} }
} }
.img-container { .img-container {
// background-color:#939393; // background-color:#939393;
background-color: #42555c; // background-color: #42555c;
// #42555c // #42555c
height: 268px; // height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 350px;
height: 250px;
padding: 30px;
.face-image { .face-image {
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
...@@ -701,10 +806,12 @@ $text-indent: 16px; ...@@ -701,10 +806,12 @@ $text-indent: 16px;
} }
} }
.desc { .desc {
height: 120px; // height: 120px;
padding: 36px 30px 20px; height: 36px;
transition: all 0.5s ease; // padding: 36px 30px 20px;
// transition: all 0.5s ease;
background: #fff; background: #fff;
// display: none;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
...@@ -719,6 +826,7 @@ $text-indent: 16px; ...@@ -719,6 +826,7 @@ $text-indent: 16px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
display: none;
.left { .left {
.deptName { .deptName {
font-size: 14px; font-size: 14px;
...@@ -790,6 +898,73 @@ $text-indent: 16px; ...@@ -790,6 +898,73 @@ $text-indent: 16px;
} }
} }
.cultural-relic {
.content {
.cr-list {
.cr-item {
.container {
.info {
position: relative;
border-radius: 10px;
overflow: hidden;
padding: 50px 10px;
.name {
text-align: center;
padding-bottom: 50px;
}
.depart {
position: absolute;
bottom: 30px;
right: 10px;
}
.corner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
}
}
}
}
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down, ::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret { ::v-deep .el-select .el-input .el-select__caret {
font-weight: bold; font-weight: bold;
......
src/views/home/components/Boutique.vue
浏览文件 @ 500f4865
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</template> </template>
<script> <script>
import mSmgz from "./topic/smgz.vue" import mSmgz from "./topic/smgz2.vue"
import mJyycc from './topic/jyycc.vue' import mJyycc from './topic/jyycc.vue'
import mYlgdyw from './topic/ylgdyw.vue' import mYlgdyw from './topic/ylgdyw.vue'
import mSdcs from './topic/sdcs.vue' import mSdcs from './topic/sdcs.vue'
......
src/views/home/components/banner.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="boutique">
<div class="banner">
<img src="@/assets/imgs/banner.png" alt="" />
</div>
</div>
</template>
<style lang="scss" scoped>
.boutique {
.banner {
width: 100%;
height: 100%;
> img {
width: 100%;
}
}
}
</style>
src/views/home/components/swiper.vue
浏览文件 @ 500f4865
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</template> </template>
<script> <script>
import pic0 from "@/assets/imgs/boutique/1.jpg"; import pic0 from "@/assets/imgs/topic/smgz/dzbwg.png";
import pic1 from "@/assets/imgs/topic/jyycc/jyycc.jpg"; import pic1 from "@/assets/imgs/topic/jyycc/jyycc.jpg";
import pic2 from "@/assets/imgs/topic/ylgdyw/ylgdyw.png"; import pic2 from "@/assets/imgs/topic/ylgdyw/ylgdyw.png";
import pic3 from "@/assets/imgs/topic/sdcs/sdcs.png"; import pic3 from "@/assets/imgs/topic/sdcs/sdcs.png";
......
src/views/home/components/topic/smgz2.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="m-smgz">
<div class="banner">
<img src="@/assets/imgs/topic/smgz/dzbwg.png" alt="" />
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.m-smgz {
.banner {
width: 100%;
height: 100%;
> img {
width: 100%;
height: 100%;
}
}
}
</style>
src/views/home/index.vue
浏览文件 @ 500f4865
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
</template> </template>
<script> <script>
import Boutique from "./components/Boutique.vue"; // import Boutique from "./components/Boutique.vue";
import Boutique from './components/banner.vue'
import MuseumMap from "./components/MuseumMap.vue"; import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue"; import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue"; import Display from "./components/Display.vue";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论