Skip to content

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

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

上级 77b2b159
隐藏空白字符变更
内嵌 并排
正在显示 包含 2062 行增加 和 863 行删除
src/components/ReaderOperations/like.vue
浏览文件 @ 500f4865
......@@ -2,13 +2,21 @@
<span>
<span class="operations">
<span class="operation-item">
<svg-icon
<!-- <svg-icon
@click="handleLike"
:icon-class="loveCountStatus ? 'like-s' : 'like'"
:style="{
fontSize: iconSize + 'px',
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>
<span>{{
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 @@
</li>
</ul>
</div> -->
<ul class="fixed-tabs">
<!-- <ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container">
<img
......@@ -22,7 +22,10 @@
<span class="name">{{ node.name }}</span>
</div>
</li>
</ul>
</ul> -->
<div class="boutique-tabs">
<m-tabs></m-tabs>
</div>
<div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab">
......@@ -48,6 +51,7 @@
</template>
<script>
import mTabs from '@/views/home/components/Boutique.vue'
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import SMGZ from "./components/SMGZ";
......@@ -55,7 +59,7 @@ import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { NavBar, Footer, SMGZ },
components: { NavBar, Footer, SMGZ, mTabs },
data() {
return {
tabs: [
......@@ -141,6 +145,10 @@ export default {
// object-fit: cover;
// }
// }
.boutique-tabs {
width: 100%;
height: 100vh;
}
.fixed-tabs {
position: fixed;
left: 0;
......@@ -149,6 +157,7 @@ export default {
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
display: none;
li {
flex: 1;
position: relative;
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 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="bg">
<img src="@/assets/imgs/gray.jpg" alt="" />
<div class="mask"></div>
</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="inner-left wow animate__animated animate__fadeInLeft">
<div>
<SlideImage
:imgList="CRDetail.imagesVo"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
/>
<SlideImage
:imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-else-if="CRDetail.faceImagePressUrl"
/>
</div>
<!-- <div>
<img :src="CRDetail.faceImagePressUrl" alt="" />
</div> -->
</div>
<div
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
<div class="inner-right">
<!-- tabs -->
<ul>
<li
: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">
<span>{{ CRDetail.name }} </span>
<div class="view-count">
......@@ -53,59 +65,66 @@
</div>
</div>
<div class="basic-info">
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="keyword"></svg-icon> -->
年代</span
>
<div class="body-item" v-if="CRDetail.yearsLabel">
<!-- <span class="label">
年代</span
> -->
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="glww"></svg-icon> -->
来源</span
>
<div class="body-item" v-if="CRDetail.sourceWay">
<!-- <span class="label">
来源</span
> -->
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zllx"></svg-icon> -->
类别</span
>
<div class="body-item" v-if="CRDetail.typeLabel">
<!-- <span class="label">
类别</span
> -->
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zlxz"></svg-icon> -->
级别</span
>
<div class="body-item" v-if="CRDetail.levelLabel">
<!-- <span class="label">
级别</span
> -->
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwzd"></svg-icon> -->
质地</span
>
<div class="body-item" v-if="CRDetail.textureTypeLabel">
<!-- <span class="label">
质地</span
> -->
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwcc"></svg-icon> -->
尺寸
</span>
<div class="body-item" v-if="CRDetail.detailSize">
<!-- <span class="label">
尺寸
</span> -->
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
<div class="body-item" v-if="CRDetail.deptName">
<!-- <span class="label">
馆藏单位</span
>
馆藏单位</span
> -->
<span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</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="tools">
<ReaderOperations
......@@ -126,212 +145,167 @@
</div>
</div>
</div>
<div
<!-- 音频 -->
<!-- <div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
: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> -->
<!-- 文物视频 -->
<div
class="content-item display-detail_videos"
v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
"
id="videosVo"
>
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
相关视频
</div>
<div class="video-names">
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
{{ item.name.split(".")[0] }}
<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>
<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"
v-if="nodeActive === 'relateRelics'"
>
<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>
<div class="recommend-obj">
<div class="recommend-obj-node" v-if="relateRelics.length > 0">
<div 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>
</div>
</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>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div>
</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
class="content-item display-detail_lts"
id="literatureVo"
v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
"
>
<!-- <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 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 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 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>
......@@ -342,8 +316,8 @@
/>
</div>
</template>
<script>
<script>
// import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2";
......@@ -353,7 +327,7 @@ 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 SlideImage from "@/components/SlideImage/slider.vue";
import { isElementInViewport2 } from "@/utils/index";
export default {
components: {
......@@ -399,6 +373,7 @@ export default {
},
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
nodeActive: "intro",
};
},
watch: {
......@@ -412,7 +387,7 @@ export default {
async mounted() {
let crId = this.$route.params.crId;
this.loadDetail(crId);
setTimeout(() => {
/* setTimeout(() => {
window.addEventListener("scroll", this.initHeight);
this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
this.tabbarData.map((item) => {
......@@ -421,7 +396,7 @@ export default {
item.position = dom.offsetTop - 320; //100navbar 55tabbar
}
});
}, 500);
}, 500); */
},
beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件
......@@ -582,11 +557,15 @@ export default {
}
});
},
handleTabClick(type) {
this.nodeActive = type;
},
},
};
</script>
<style lang="scss" >
<style lang="scss">
// 自定义分页器样式
#page {
height: 30px;
......@@ -597,530 +576,209 @@ export default {
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;
<style lang="scss" scoped>
$node-w: 700px;
.content {
position: relative;
.bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
> img {
width: 100%;
overflow: h;
filter: opacity(0.2) brightness(0.6);
}
.title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
line-height: 101px;
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(32 44 48 / 80%);
}
}
.desc {
flex: 1;
.inner {
width: 100%;
display: flex;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
width: 100%;
.inner-left {
width: 50%;
height: 100vh;
position: relative;
> div {
width: 90%;
height: 60vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);
display: flex;
justify-content: center;
align-items: center;
> img {
max-width: 100%;
max-height: 100%;
}
}
}
.divider {
flex: 1;
height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%;
.inner-left {
padding: 0 60px;
::v-deep .firstDiv {
position: unset;
transform: none;
}
}
}
}
.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;
.inner-right {
width: 50%;
height: 100vh;
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;
}
}
ul {
line-height: 50px;
position: absolute;
right: 60px;
top: 30px;
width: 30px;
> li {
border: 1px solid #ddd;
writing-mode: vertical-lr;
width: 100%;
padding-top: 25px;
height: 140px;
margin: -1px 0;
> span {
color: #fff;
padding: 11px 2px;
border-radius: 8px 0 8px 0;
background: $themeColor;
}
.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;
}
}
}
&:hover,
&.active {
cursor: pointer;
background-color: $themeColor;
> span {
background: #b5800a;
}
}
}
.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;
}
.info-container-right {
width: $node-w;
padding-bottom: 40px;
.info-title {
display: flex;
justify-content: space-between;
padding-top: 60px;
padding-bottom: 10px;
> span {
font-size: 48px;
font-family: "华文行楷";
font-weight: 600;
color: #fff;
}
&::after {
display: none;
.view-count {
> span {
margin-left: 10px;
color: #ddd;
}
> svg {
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;
}
}
/**简介和视频 */
.display-detail_intro {
padding: 40px;
#intro {
min-height: 300px;
.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;
color: #ffb836;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($themeColor, 10%);
width: $node-w;
font-size: 16px;
line-height: 2;
// text-indent: 32px;
}
}
.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 {
#relateRelics {
padding-top: 60px;
width: 800px;
.recommend-type {
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: "";
margin-bottom: 40px;
}
.recommend-obj {
width: 100%;
overflow: hidden;
.recommend-obj-node {
display: flex;
flex-wrap: wrap;
> div {
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
padding: 20px;
}
.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;
.img-container {
width: 100%;
height: 260px;
display: flex;
justify-content: center;
&:hover {
cursor: pointer;
background-color: #939393;
img {
width: 100%;
height: 100%;
object-fit: contain;
> img {
transform: scale(1.2);
}
}
.cr-name {
font-size: 18px;
// font-weight: bold;
color: #666;
text-align: left;
margin: 20px 0;
text-indent: 2px;
> img {
max-width: 100%;
max-height: 100%;
transition: all 0.3s ease;
transform: scale(1);
}
}
}
}
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
.cr-name {
line-height: 32px;
text-align: center;
font-weight: 600;
font-family: "楷体";
}
}
}
}
}
::v-deep .reader-operations {
color: #b2b2b2;
font-weight: 600;
font-family: "幼圆";
svg {
color: #b2b2b2;
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
......@@ -1154,7 +812,10 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: SourceHanSerifCN-Bold;
}
::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{
// border-radius: 0;
......@@ -1201,4 +862,4 @@ $titleFontFamily: SourceHanSerifCN-Bold;
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
\ No newline at end of file
</style>
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 @@
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{currentType}}</span>
<span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div class="search-item" @click="handleClickSearchBar('years')">
<span>{{currentYears}}</span>
<span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
......@@ -87,88 +87,102 @@
<span>共{{list.total}}件文物</span>
</div> -->
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 6 : 0"
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="shade">
<div class="jxl">
<img src="@/assets/imgs/shade/jxl.png" alt="" />
</div>
</div>
<div>
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 6 : 0"
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="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-left-bottom">
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
alt=""
width="100%"
class="face-image"
lazy
/>
<!-- <div class="deco-left-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-left-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-right-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-right-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div> -->
</div>
<div class="deco-right-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="deco-right-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
<div class="hover-bg">
<div>
<div>
<div class="name">{{ item.name }}</div>
<div class="depart">{{ item.deptName }}</div>
</div>
</div>
</div>
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<span>关键词：</span>
<span>{{ item.keyword }}</span>
</div> -->
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
</div>
<!-- <div class="right">
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -180,27 +194,28 @@
<span>{{ item.browseCount }}</span>
</span>
</div> -->
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
......@@ -250,13 +265,13 @@ export default {
{
label: "全部年代",
value: "",
}
},
];
let typeList = [
{
label: "全部类别",
value: "",
}
},
];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) {
......@@ -599,12 +614,12 @@ $text-indent: 16px;
}
}
.total{
.total {
padding: 0 13%;
display: flex;
justify-content: flex-end;
background-color: #fff;
&>span{
& > span {
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
......@@ -615,7 +630,33 @@ $text-indent: 16px;
}
.content-wrapper {
background-color: #fff;
padding: 0;
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 {
padding: 16px 0 60px;
......@@ -628,17 +669,26 @@ $text-indent: 16px;
.cr-item {
margin-bottom: 40px;
.container {
border: 2px solid #f1f1f1;
// border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
width: 350px;
height: 350px;
// overflow: hidden;
justify-content: center;
text-align: center;
text-align: center;
&:hover {
border: 2px solid $themeColor;
.face-image {
// border: 2px solid $themeColor;
// border-radius: 100%;
/* .face-image {
transform: scale(1.2);
}
} */
.img-container {
.deco-left-top,
.deco-left-bottom,
......@@ -646,20 +696,75 @@ $text-indent: 16px;
.deco-right-bottom {
display: block;
}
> img {
transform: scale(1.2);
filter: grayscale(0.7) blur(1px);
}
}
.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 {
// background-color:#939393;
background-color: #42555c;
// background-color: #42555c;
// #42555c
height: 268px;
// height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
width: 350px;
height: 250px;
padding: 30px;
.face-image {
height: 100%;
object-fit: contain;
......@@ -701,10 +806,12 @@ $text-indent: 16px;
}
}
.desc {
height: 120px;
padding: 36px 30px 20px;
transition: all 0.5s ease;
// height: 120px;
height: 36px;
// padding: 36px 30px 20px;
// transition: all 0.5s ease;
background: #fff;
// display: none;
.name {
font-size: 18px;
font-weight: bold;
......@@ -719,6 +826,7 @@ $text-indent: 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
display: none;
.left {
.deptName {
font-size: 14px;
......@@ -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-select .el-input .el-select__caret {
font-weight: bold;
......@@ -842,4 +1017,4 @@ $text-indent: 16px;
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
}
</style>
\ No newline at end of file
</style>
src/views/home/components/Boutique.vue
浏览文件 @ 500f4865
......@@ -42,7 +42,7 @@
</template>
<script>
import mSmgz from "./topic/smgz.vue"
import mSmgz from "./topic/smgz2.vue"
import mJyycc from './topic/jyycc.vue'
import mYlgdyw from './topic/ylgdyw.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 @@
</template>
<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 pic2 from "@/assets/imgs/topic/ylgdyw/ylgdyw.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 @@
</template>
<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 Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论