Skip to content

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

修改文物详情为默认布展的主题

上级 2a1d7ce6
显示空白字符变更
内嵌 并排
正在显示 包含 1279 行增加 和 325 行删除
src/components/Video/index.vue
浏览文件 @ e6382f52
......@@ -58,7 +58,7 @@ export default {
position: relative;
height: 100%;
.video-dom {
height: auto;
height: 100%;
width: 100%;
}
.modal {
......
src/icons/svg/glww.svg 0 → 100644
浏览文件 @ e6382f52
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663729465172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3193" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M825.15621 294.082465h-0.72249v-103.605113a27.208986 27.208986 0 1 0-54.417972 0v103.612338h-486.308244V190.477352a27.208986 27.208986 0 1 0-54.417972 0v103.605113h-2.405892a24.788643 24.788643 0 1 0 0 49.577287h6.813083c9.825869 3.930347 26.450371 13.366071 22.80902 31.587278 0 0-34.00762 188.028109 69.713093 237.280275v238.826405l-42.511332 39.108402s-10.201564 23.806057 29.752152 27.208986h44.209184s28.906838-9.349025 39.108402-47.612113l19.955183-217.635764h80.088053v236.341038a28.899613 28.899613 0 1 0 57.806452 0V652.415996h79.943555l19.955183 217.635764c10.201564 38.263088 39.108402 47.612113 39.108402 47.612113h44.209183c39.953715-3.402929 29.752152-27.208986 29.752152-27.208986l-42.511331-39.108402V612.52008c103.720712-49.230491 69.713092-237.280275 69.713092-237.280275-3.648576-18.221206 12.975926-27.64248 22.80902-31.587278h7.535575a24.781418 24.781418 0 0 0 24.788643-24.788643 24.759744 24.759744 0 0 0-24.774194-24.781419z" p-id="3194"></path></svg>
\ No newline at end of file
src/icons/svg/wwcc.svg 0 → 100644
浏览文件 @ e6382f52
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663729459277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M941.700129 256.066065a99.096774 99.096774 0 0 1 0 140.15587L392.786581 945.118968a99.096774 99.096774 0 0 1-140.139355 0L77.477161 769.932387a99.096774 99.096774 0 0 1 0-140.139355L626.374194 80.896a99.096774 99.096774 0 0 1 140.139354 0l175.186581 175.170065z m-46.724129 46.724129L719.789419 127.603613a33.032258 33.032258 0 0 0-46.707613 0l-58.384516 58.401032 58.384516 58.384516a33.032258 33.032258 0 0 1 1.684646 44.923871l-1.684646 1.800258a33.032258 33.032258 0 0 1-46.707612 0l-58.401033-58.401032-81.738322 81.754839 105.092129 105.108645a33.032258 33.032258 0 0 1 1.684645 44.907355l-1.684645 1.816774a33.032258 33.032258 0 0 1-46.707613 0l-105.092129-105.125161-81.754839 81.754838 58.384516 58.401033a33.032258 33.032258 0 0 1 1.668129 44.907354l-1.668129 1.800259a33.032258 33.032258 0 0 1-46.724129 0l-58.384516-58.401033-81.754839 81.754839 58.401033 58.401032a33.032258 33.032258 0 0 1 1.668129 44.907355l-1.668129 1.816774a33.032258 33.032258 0 0 1-46.724129 0l-58.384517-58.417548L124.20129 676.500645a33.032258 33.032258 0 0 0 0 46.724129l175.186581 175.170065a33.032258 33.032258 0 0 0 46.707613 0l548.897032-548.897033a33.032258 33.032258 0 0 0 0-46.707612z" p-id="3055"></path></svg>
\ No newline at end of file
src/icons/svg/wwzd.svg 0 → 100644
浏览文件 @ e6382f52
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663729615235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3114" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M955.751784 0H68.248216A68.248216 68.248216 0 0 0 0 68.248216v887.503568A68.248216 68.248216 0 0 0 68.248216 1024h887.503568A68.248216 68.248216 0 0 0 1024 955.751784V68.248216A68.248216 68.248216 0 0 0 955.751784 0z m3.653189 927.411892a31.93773 31.93773 0 0 1-31.93773 31.93773H96.588108a31.93773 31.93773 0 0 1-31.93773-31.93773V96.588108a31.93773 31.93773 0 0 1 31.93773-31.93773h830.823784a31.93773 31.93773 0 0 1 31.93773 31.93773z" p-id="3115"></path><path d="M119.448216 809.79027l15.110919-58.672432c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.531676 51.587459c-142.031568-199.264865-322.421622-176.515459-493.734054-23.136865-83.414486 74.724324-169.651892 74.724324-256.83027 0z" p-id="3116"></path><path d="M119.448216 569.620757l15.110919-58.672433c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.476324 51.421405c-142.031568-199.264865-322.421622-176.515459-493.734055-23.136864-83.414486 74.724324-169.651892 74.724324-256.83027 0z" p-id="3117"></path><path d="M119.448216 329.451243l15.110919-58.672432c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.531676 51.587459c-142.031568-199.264865-322.421622-176.515459-493.734054-23.136865C292.864 404.064865 206.626595 404.064865 119.448216 329.451243z" p-id="3118"></path></svg>
\ No newline at end of file
src/views/culturalRelic/Detail-old.vue 0 → 100644
浏览文件 @ e6382f52
<!-- -->
<template>
<div class="cr-detail">
<div class="wrapper">
<div class="back" @click="handleBack">
<svg-icon icon-class="mz-fh"></svg-icon>
<span>返回上页 </span>
</div>
<el-row class="cr-detail_info" :gutter="10">
<el-col class="cr-images" :span="18">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="400px"
>
<el-carousel-item
v-for="(item, index) in CRDetail.imagesVo"
:key="index"
>
<el-image
class="el-image-container"
:src="$getFullUrl(item.pressUrl || item.url)"
fit="contain"
></el-image>
</el-carousel-item>
</el-carousel>
<div class="enlarge" @click="handelPreviewImages">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-col>
<el-col class="relic-info" :span="8">
<div class="info-title">
<div class="title">
{{ CRDetail.name }}
</div>
<div class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ CRDetail.browseCount }}</span>
</div>
</div>
<div class="info-body">
<div class="basic-info">
<div class="body-item">
<span class="label">年份</span>
<span class="value">{{ CRDetail.yearsLabel }}</span>
</div>
<div class="body-item">
<span class="label">类别</span>
<span class="value">
{{ CRDetail.typeLabel }}
</span>
</div>
<div class="body-item">
<span class="label">级别</span>
<span class="value">{{ CRDetail.levelLabel }}</span>
</div>
<div class="body-item">
<span class="label">质地</span>
<span class="value">{{ CRDetail.textureTypeLabel }}</span>
</div>
<div class="body-item">
<span class="label">尺寸</span>
<span class="value">{{ CRDetail.detailSize }}</span>
</div>
<div class="body-item">
<span class="label">馆藏单位</span>
<span class="value">{{ CRDetail.deptName }}</span>
</div>
</div>
<!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
</div>
<div class="view-3d" @click="handleTo3D" v-if="CRDetail.url3d">
<img
src="@/assets/imgs/cr/3d-black.png"
alt=""
srcset=""
width="24px"
height="24px"
/>
<span>查看3D模型</span>
</div>
<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
class="audio"
: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>
</el-col>
</el-row>
<div class="cr-detail_intro">
<CustomTitle text="文物简介" />
<div class="intro-and-video">
<div class="intro-content wow animate__animated animate__fadeInLeft">
{{ CRDetail.intro }}
</div>
<div
class="intro-video wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
>
<el-carousel trigger="click" height="320px">
<el-carousel-item
v-for="item in CRDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<div class="cr-detail_relate_cr" v-if="relateRelics.relateRelics > 0">
<CustomTitle text="关联文物" />
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleToDetail(item.crId)"
v-for="(item, index) in relateRelics"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img">
<img
v-if="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
:alt="item.name"
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
</div>
</el-col>
</el-row>
</div>
<div
class="cr-detail_relate_lt"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
>
<CustomTitle text="相关文献" />
<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>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import QRCode from "qrcodejs2";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";
export default {
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
Video,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
CRDetail: {},
slideImageWidth: "",
imgViewerVisible: false,
relateRelics: [],
imgList: [],
audioPlaying: true,
};
},
mounted() {
// this.creatQrCode();
this.loadDetail();
},
methods: {
creatQrCode() {
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
async loadDetail() {
let crId = this.$route.params.crId;
if (crId) {
let res = await getRCDetailByIdV2({ crId });
if (res.code == 0) {
this.CRDetail = res.data.culturalRelicVo;
this.relateRelics = res.data.recommendList.records;
// 获取关联文物
// this.loadCrRecommend();
this.$nextTick(() => {
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
}
}
},
async loadCrRecommend() {
const {
crId,
deptId,
directory,
level,
name,
regionCode,
remark,
sourceWay,
status,
textureType,
themeWord,
type,
years,
} = this.CRDetail;
// debugger
const params = {
crId,
// deptId,
// directory,
// level,
// name,
// regionCode,
// remark,
// sourceWay,
// status,
// textureType,
// themeWord,
type,
// years,
page: 1,
limit: 5,
};
let res = await crRecommendByPage(params);
this.relateRelics = res.data.records;
console.log("res", res);
},
handleBack() {
this.$router.go(-1);
},
handleTo3D() {
window.open(this.CRDetail.url3d, "_blank");
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = this.CRDetail.imagesVo.map((item) =>
this.$getFullUrl(item.url)
);
},
handleToDetail(crId) {
console.log(crId);
this.$router.replace({ name: "culturalRelicDetail", params: { crId } });
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
},
};
</script>
<style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
.wrapper {
// width: 1200px;
width: calc(100% - 26%);
margin: 60px auto;
background-color: #fff;
padding: 40px;
.back {
font-size: 18px;
display: flex;
align-items: center;
color: $label;
cursor: pointer;
.svg-icon {
font-size: 28px;
margin-right: 10px;
}
span {
font-size: 16px;
}
}
/**文物基本信息 */
.cr-detail_info {
margin-top: 32px;
// display: flex;
img {
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px;
margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
.enlarge {
position: absolute;
bottom: 60px;
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;
}
}
}
.relic-info {
position: relative;
.info-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
.title {
font-size: 28px;
font-weight: bold;
color: #444;
}
.view-container {
.view-svg-icon {
color: #999;
margin-right: 5px;
}
.view-text {
color: #999;
}
}
.play {
margin-left: 10px;
font-size: 32px;
cursor: pointer;
}
}
.info-body {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 10px;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
.view-3d {
margin: 32px 0;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
// border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
img {
margin-right: 10px;
}
}
.audio {
position: absolute;
right: -180px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid #2069c4;
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: #2069c4;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
}
.content {
text-indent: 32px;
}
}
// 文物简介
.cr-detail_intro {
margin-top: 32px;
.intro-and-video {
display: flex;
justify-content: space-between;
.intro-content {
flex: 1;
line-height: 1.5;
text-indent: 32px;
padding: 0 30px 0 20px;
}
.intro-video {
min-height: 320px;
flex: 1;
}
}
}
/**文物相关文献 */
// .cr-detail_relate_lt {
// margin-top: 32px;
// .book-item {
// margin-bottom: 10px;
// }
// }
.cr-detail_relate_lt {
margin: 100px 0;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.lts-content {
flex: 1;
padding: 10px;
}
}
}
/**关联文物 */
.cr-detail_relate_cr {
margin-top: 32px;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
}
.desc {
background-color: #2069c4;
color: #fff;
}
}
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
overflow: hidden;
img {
height: 100%;
object-fit: contain;
transition: all 0.5s ease;
// width: auto;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
}
}
}
}
/**关联视频 */
.cr-detail_relate_video {
margin: 32px 0;
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box {
width: 800px;
display: flex;
justify-content: space-between;
}
}
}
}
.text-indent {
text-indent: 28px;
}
.el-image-container {
width: 100%;
height: 100%;
}
::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%;
}
</style>
src/views/culturalRelic/Detail.vue
浏览文件 @ e6382f52
<!-- -->
<template>
<div class="cr-detail">
<div class="wrapper">
<div class="back" @click="handleBack">
<svg-icon icon-class="mz-fh"></svg-icon>
<span>返回上页 </span>
</div>
<el-row class="cr-detail_info" :gutter="10">
<el-col class="cr-images" :span="18">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="400px"
<div class="content">
<!-- 展览图片 -->
<div
class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
"
ref="imgs"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
>
<el-image
:src="$getFullUrl(CRDetail.faceImagePressUrl || CRDetail.faceImageUrl)"
fit="cover"
></el-image>
</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
"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
>
<el-carousel>
<el-carousel-item
v-for="(item, index) in CRDetail.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<el-image
class="el-image-container"
:src="$getFullUrl(item.pressUrl || item.url)"
fit="contain"
></el-image>
<div
class="img-container"
@click="handelPreviewImages(CRDetail.imagesVo)"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt="点击查看大图"
srcset=""
/>
</div>
<div
class="enlarge"
@click="handelPreviewImages(CRDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
<div class="enlarge" @click="handelPreviewImages">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-col>
<el-col class="relic-info" :span="8">
<div
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
>
<div class="info-title">
<div class="title">
{{ CRDetail.name }}
</div>
<div class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ CRDetail.browseCount }}</span>
<span>{{ CRDetail.name }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
</div>
<div class="info-body">
<el-row :span="20">
<el-col :span="24" class="left">
<div class="basic-info">
<div class="body-item">
<span class="label">年份</span>
<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">类别</span>
<span class="value">
{{ CRDetail.typeLabel }}
</span>
<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">级别</span>
<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">质地</span>
<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">尺寸</span>
<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">馆藏单位</span>
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>馆藏单位：</span
>
<span class="value">{{ CRDetail.deptName }}</span>
</div>
</div>
<!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
</div>
<div class="view-3d" @click="handleTo3D" v-if="CRDetail.url3d">
<img
src="@/assets/imgs/cr/3d-black.png"
</el-col>
<el-col :span="16" class="right">
<div class="qrcode">
<!-- <img
src="@/assets/imgs/display/normal/test-qrcode.png"
alt=""
srcset=""
width="24px"
height="24px"
/>
<span>查看3D模型</span>
/> -->
</div>
<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'"
:sourceId="CRDetail.exhibitionId"
:title="CRDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
@reload="loadDetail"
/>
</div>
</el-col>
</el-row>
</div>
</div>
<div
class="audio"
:style="{
animationPlayState: audioPlaying ? 'running' : 'paused',
}"
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
......@@ -106,20 +149,21 @@
ref="AudioPlayer"
/>
</div>
</el-col>
</el-row>
<div class="cr-detail_intro">
<CustomTitle text="文物简介" />
<div class="intro-and-video">
</div>
<!-- 文物简介 -->
<div class="content-item display-detail_intro" v-if="CRDetail.intro">
<div class="intro-content wow animate__animated animate__fadeInLeft">
{{ CRDetail.intro }}
<div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon>
<span>文物简介</span>
</div>
<div class="intro-content-container" v-html="CRDetail.intro"></div>
</div>
<div
class="intro-video wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
>
<el-carousel trigger="click" height="320px">
<el-carousel :interval="4000" type="card" indicator-position="none">
<el-carousel-item
v-for="item in CRDetail.videosVo"
:key="item.fileId"
......@@ -129,51 +173,64 @@
</el-carousel>
</div>
</div>
</div>
<div class="cr-detail_relate_cr" v-if="relateRelics.length > 0">
<CustomTitle text="关联文物" />
<el-row :gutter="40" class="cr-list">
<!--相关文物 -->
<div
class="content-item display-detail_relateRc"
ref="units"
v-if="relateRelics.length > 0"
>
<div class="intro-title">
<svg-icon icon-class="glww"></svg-icon>
<span>相关文物</span>
</div>
<el-row :gutter="26">
<el-col
:span="8"
class="cr-item"
@click.native="handleToDetail(item.crId)"
:span="index == 0 ? 12 : 4"
v-for="(item, index) in relateRelics"
:key="index"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img">
<img
v-if="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
:alt="item.name"
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
<div
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
>
<img :src="item.faceImagePressUrl" alt="" />
<div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div>
<div class="cr-intro">{{ item.intro }}</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 相关文献 -->
<div
class="cr-detail_relate_lt"
class="content-item display-detail_lts"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
>
<CustomTitle text="相关文献" />
<!-- <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"
......@@ -214,6 +271,7 @@
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
......@@ -222,61 +280,40 @@
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
<script>
// import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import CustomTitle from "@/components/CustomTitle";
// import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import QRCode from "qrcodejs2";
// import QRCode from "qrcodejs2";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";
export default {
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
Video,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
let vm = this;
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
CRDetail: {},
slideImageWidth: "",
imgViewerVisible: false,
CRDetail: {},
relateRelics: [],
imgList: [],
audioPlaying: true,
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
};
},
mounted() {
// this.creatQrCode();
async mounted() {
this.loadDetail();
},
methods: {
creatQrCode() {
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
async loadDetail() {
let crId = this.$route.params.crId;
if (crId) {
......@@ -367,11 +404,6 @@ export default {
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
......@@ -384,54 +416,111 @@ export default {
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
handelPreviewImages(images) {
this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url));
},
closeImgViewer() {
this.imgViewerVisible = false;
},
},
};
</script>
<style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
<style lang="scss" >
// 自定义分页器样式
#page {
height: 30px;
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
$label: #9f9c9a;
</style>
.wrapper {
// width: 1200px;
width: calc(100% - 26%);
margin: 60px auto;
background-color: #fff;
padding: 40px;
.back {
font-size: 18px;
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$blue: #2069c4;
.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");
}
.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;
color: $label;
cursor: pointer;
.svg-icon {
font-size: 28px;
font-size: 50px;
color: $blue;
margin-right: 10px;
}
span {
font-size: 16px;
.title {
font-size: 26px;
font-weight: 400;
color: $blue;
line-height: 101px;
}
}
/**文物基本信息 */
.cr-detail_info {
margin-top: 32px;
// display: flex;
.desc {
flex: 1;
display: flex;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
max-width: 100%;
height: auto;
width: 100%;
}
.cr-images {
width: 700px;
margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
.enlarge {
.divider {
flex: 1;
height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%;
}
}
}
}
.enlarge {
position: absolute;
bottom: 60px;
bottom: 40px;
right: 40px;
display: flex;
z-index: 9;
......@@ -448,84 +537,169 @@ $label: #9f9c9a;
width: 24px;
height: 24px;
}
}
.intro-title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
line-height: 90px;
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
.el-image {
width: 100%;
height: 100%;
}
.relic-info {
position: relative;
.info-title {
}
.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;
margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
.title {
font-size: 28px;
font-weight: bold;
color: #444;
padding: 60px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
margin-right: 50px;
flex: 1;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
width: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.view-container {
.view-svg-icon {
color: #999;
margin-right: 5px;
}
}
.info-container-right {
flex: 1;
min-height: 200px;
.view-text {
.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;
}
}
.play {
margin-left: 10px;
font-size: 32px;
cursor: pointer;
}
}
.info-body {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 10px;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
align-items: center;
margin-bottom: 10px;
.label {
display: flex;
align-items: center;
width: 140px;
// margin-right: 26px;
// margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
color: #858585;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
}
}
.view-3d {
margin: 32px 0;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
// border-radius: 48px;
.right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.qrcode {
margin-bottom: 28px;
display: flex;
justify-content: center;
img {
width: 50%;
height: 100%;
}
}
.tools {
width: 100%;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: #2069c4;
}
}
}
}
img {
margin-right: 10px;
}
}
.audio {
position: absolute;
right: -180px;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid #2069c4;
border: 2px solid $blue;
padding: 10px;
border-radius: 50%;
display: flex;
......@@ -537,7 +711,7 @@ $label: #9f9c9a;
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: #2069c4;
color: $blue;
font-size: 80px;
}
img {
......@@ -545,146 +719,169 @@ $label: #9f9c9a;
height: 60px;
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
/**简介和视频 */
.display-detail_intro {
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
display: flex;
min-height: 265px;
.intro-content,
.intro-video {
flex: 1;
}
.intro-content {
padding: 20px;
margin: 20px;
line-height: 28px;
.intro-content-container {
text-indent: 34px;
}
.content {
text-indent: 32px;
}
}
// 文物简介
.cr-detail_intro {
margin-top: 32px;
.intro-and-video {
/**展览单元 */
.display-detail_units {
overflow-x: hidden;
.unit-container {
// height: 100%;
margin-bottom: 40px;
display: flex;
justify-content: space-between;
.intro-content {
}
.unit-content-menu {
width: 360px;
margin-right: 40px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
}
.unit-content {
flex: 1;
line-height: 1.5;
padding: 40px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
padding: 0 30px 0 20px;
margin-bottom: 20px;
}
.intro-video {
min-height: 320px;
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
/**文物相关文献 */
// .cr-detail_relate_lt {
// margin-top: 32px;
// .book-item {
// margin-bottom: 10px;
// }
// }
.cr-detail_relate_lt {
margin: 100px 0;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.lts-content {
flex: 1;
padding: 10px;
}
}
}
/**关联文物 */
.cr-detail_relate_cr {
margin-top: 32px;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
// 关联文物
.display-detail_relateRc {
min-height: 560px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
padding: 50px 0;
.intro-title{
text-indent: 40px;
}
.el-col {
&:first-child {
.img-container {
width: 100%;
height: 460px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
.cr-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
.cr-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.desc {
background-color: #2069c4;
color: #fff;
.cr-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: contain;
transition: all 0.5s ease;
// width: auto;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
}
&:not(&:first-child) {
margin-bottom: 30px;
.img-container {
height: 214px;
}
}
}
/**关联视频 */
.cr-detail_relate_video {
margin: 32px 0;
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
.img-container {
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
&:hover {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
img {
transform: scale(1.1);
}
}
.info-box {
width: 800px;
display: flex;
justify-content: space-between;
img {
width: 100%;
height: 214px;
object-fit: cover;
transition: all 0.5s ease;
}
}
}
}
.text-indent {
text-indent: 28px;
}
.el-image-container {
width: 100%;
height: 100%;
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
......@@ -697,4 +894,53 @@ $label: #9f9c9a;
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-tree {
background: transparent;
.el-tree-node__content {
height: 50px;
:hover {
background: #fff;
color: $blue;
}
}
}
@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/display/components/BlueStyle.vue
浏览文件 @ e6382f52
......@@ -12,11 +12,7 @@
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<el-image
:src="
$getFullUrl(
displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
)
"
:src="$getFullUrl(displayDetail.faceImagePressUrl)"
fit="cover"
></el-image>
</div>
......@@ -26,6 +22,7 @@
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
class="
info-container-left
wow
......@@ -42,7 +39,11 @@
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="点击查看大图" srcset="" />
<img
:src="$getFullUrl(item.pressUrl)"
alt="点击查看大图"
srcset=""
/>
</div>
<div
class="enlarge"
......@@ -428,7 +429,7 @@ import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import { previewFile } from "@/utils/index";
import { getFullUrl, previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import MenuList from "@/components/MenuList";
......@@ -583,7 +584,7 @@ export default {
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$blue:#2069c4;
$blue: #2069c4;
.custom-title {
width: 50px;
background-color: #d72f3f;
......@@ -693,11 +694,13 @@ $blue:#2069c4;
}
.wrapper {
// width: 1200px;
padding: 0 13%;
width: 100%;
// 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;
......@@ -723,7 +726,7 @@ $blue:#2069c4;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 280px;
height: 100%;
width: 100%;
img {
width: 100%;
......@@ -1070,5 +1073,4 @@ $blue:#2069c4;
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论