Skip to content

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

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

上级 2a1d7ce6
隐藏空白字符变更
内嵌 并排
正在显示 包含 1434 行增加 和 480 行删除
src/components/Video/index.vue
浏览文件 @ e6382f52
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
.video-dom { .video-dom {
height: auto; height: 100%;
width: 100%; width: 100%;
} }
.modal { .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> <template>
<div class="cr-detail"> <div class="content">
<div class="wrapper"> <!-- 展览图片 -->
<div class="back" @click="handleBack"> <div
<svg-icon icon-class="mz-fh"></svg-icon> class="
<span>返回上页 </span> content-item
</div> display-detail_imgs
<el-row class="cr-detail_info" :gutter="10"> wow
<el-col class="cr-images" :span="18"> animate__animated animate__fadeInDownBig
<el-carousel "
indicator-position="outside" ref="imgs"
:autoplay="false" v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
height="400px" >
> <el-image
<el-carousel-item :src="$getFullUrl(CRDetail.faceImagePressUrl || CRDetail.faceImageUrl)"
v-for="(item, index) in CRDetail.imagesVo" fit="cover"
:key="index" ></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-image <el-carousel>
class="el-image-container" <el-carousel-item
:src="$getFullUrl(item.pressUrl || item.url)" v-for="(item, index) in CRDetail.imagesVo"
fit="contain" :key="index"
></el-image> class="imagesVo-image-container"
</el-carousel-item> >
</el-carousel> <div
<div class="enlarge" @click="handelPreviewImages"> class="img-container"
<img src="@/assets/imgs/enlarge-s.png" alt="" /> @click="handelPreviewImages(CRDetail.imagesVo)"
</div> >
</el-col> <img
<el-col class="relic-info" :span="8"> :src="$getFullUrl(item.pressUrl)"
<div class="info-title"> alt="点击查看大图"
<div class="title"> srcset=""
{{ CRDetail.name }} />
</div> </div>
<div class="view-container"> <div
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon> class="enlarge"
<span class="view-text">{{ CRDetail.browseCount }}</span> @click="handelPreviewImages(CRDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> <div
<div class="info-body"> class="
<div class="basic-info"> info-container-right
<div class="body-item"> wow
<span class="label">年份</span> animate__animated animate__fadeInRight
<span class="value">{{ CRDetail.yearsLabel }}</span> "
</div> >
<div class="body-item"> <div class="info-title">
<span class="label">类别</span> <span>{{ CRDetail.name }} </span>
<span class="value"> <div class="view-count">
{{ CRDetail.typeLabel }} <svg-icon icon-class="view"></svg-icon>
</span> <span>{{ CRDetail.browseCount }}</span>
</div> </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>
<el-row :span="20">
<el-col :span="24" class="left">
<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="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>
</el-col>
<el-col :span="16" class="right">
<div class="qrcode">
<!-- <img
src="@/assets/imgs/display/normal/test-qrcode.png"
alt=""
/> -->
</div>
<div class="tools">
<ReaderOperations
:loveCount="CRDetail.loveCount"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.exhibitionId"
:title="CRDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
@reload="loadDetail"
/>
</div>
</el-col>
</el-row>
</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> </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 <div
class="audio" class="audio wow animate__animated animate__fadeInRight"
:style="{ :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
animationPlayState: audioPlaying ? 'running' : 'paused',
}"
@click="handleClickAudio" @click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0" v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
> >
...@@ -106,20 +149,21 @@ ...@@ -106,20 +149,21 @@
ref="AudioPlayer" ref="AudioPlayer"
/> />
</div> </div>
</el-col> </div>
</el-row> <!-- 文物简介 -->
<div class="content-item display-detail_intro" v-if="CRDetail.intro">
<div class="cr-detail_intro">
<CustomTitle text="文物简介" />
<div class="intro-and-video">
<div class="intro-content wow animate__animated animate__fadeInLeft"> <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>
<div <div
class="intro-video wow animate__animated animate__fadeInRight" class="intro-video wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" 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 <el-carousel-item
v-for="item in CRDetail.videosVo" v-for="item in CRDetail.videosVo"
:key="item.fileId" :key="item.fileId"
...@@ -129,88 +173,102 @@ ...@@ -129,88 +173,102 @@
</el-carousel> </el-carousel>
</div> </div>
</div> </div>
</div>
<div class="cr-detail_relate_cr" v-if="relateRelics.length > 0"> <!--相关文物 -->
<CustomTitle text="关联文物" /> <div
<el-row :gutter="40" class="cr-list"> class="content-item display-detail_relateRc"
<el-col ref="units"
:span="8" v-if="relateRelics.length > 0"
class="cr-item" >
@click.native="handleToDetail(item.crId)" <div class="intro-title">
v-for="(item, index) in relateRelics" <svg-icon icon-class="glww"></svg-icon>
:key="index" <span>相关文物</span>
> </div>
<div class="container wow animate__animated animate__fadeInUp"> <el-row :gutter="26">
<div class="img"> <el-col
<img :span="index == 0 ? 12 : 4"
v-if=" v-for="(item, index) in relateRelics"
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) :key="index"
" >
:src=" <div
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) class="img-container wow animate__animated animate__fadeInUp"
" @click="handleToCr(item)"
width="100%" >
:alt="item.name" <img :src="item.faceImagePressUrl" alt="" />
/> <div class="cr-name-intro" v-if="index == 0">
<img <div class="cr-name">{{ item.name }}</div>
v-else <div class="cr-intro">{{ item.intro }}</div>
src="@/assets/404_images/no-pic.png" </div>
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="content-item display-detail_lts"
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>
</el-col> <div class="center">
</el-row> <svg-icon icon-class="wenxian"></svg-icon>
</div> <span class="title">相关文献</span>
<div </div>
class="cr-detail_relate_lt" <div class="desc">
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0" <img
> src="@/assets/imgs/display/normal/title-desc.png"
<CustomTitle text="相关文献" /> class="modify"
<div class="lts-content wow animate__animated animate__fadeInUp"> alt=""
<el-table />
:data="CRDetail.literatureVo" <div class="divider"></div>
:header-cell-style="{ </div>
background: '#eeeeee', </div>
color: '#333', <div class="lts-content wow animate__animated animate__fadeInUp">
}" <el-table
:row-style="tableRowStyle" :data="CRDetail.literatureVo"
> :header-cell-style="{
<el-table-column background: '#eeeeee',
prop="name" color: '#333',
label="名称" }"
align="center" :row-style="tableRowStyle"
></el-table-column> >
<el-table-column <el-table-column
prop="authors" prop="name"
label="作者" label="名称"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="date" prop="authors"
label="出版时间" label="作者"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
align="center" prop="date"
prop="source" label="出版时间"
label="出版所在刊物" align="center"
></el-table-column> ></el-table-column>
<el-table-column label="阅读" align="center"> <el-table-column
<template slot-scope="scope"> align="center"
<div class="pdf-img" @click="handleViewLt(scope.row)"> prop="source"
<img src="@/assets/imgs/display/ch/pdf-icon.png" /> label="出版所在刊物"
</div> ></el-table-column>
</template> <el-table-column label="阅读" align="center">
</el-table-column> <template slot-scope="scope">
</el-table> <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> </div>
</div> </div>
...@@ -221,62 +279,41 @@ ...@@ -221,62 +279,41 @@
/> />
</div> </div>
</template> </template>
<script> <script>
import SearchBar from "@/components/SearchBar"; // import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer"; import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video"; import Video from "@/components/Video";
import CustomTitle from "@/components/CustomTitle"; // import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
import QRCode from "qrcodejs2"; // import QRCode from "qrcodejs2";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic"; import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
export default { export default {
components: { components: {
SearchBar,
CustomTitle,
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
Video, Video,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
data() { data() {
let vm = this;
return { return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
CRDetail: {},
slideImageWidth: "",
imgViewerVisible: false, imgViewerVisible: false,
CRDetail: {},
relateRelics: [], relateRelics: [],
imgList: [],
audioPlaying: true, audioPlaying: true,
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
}; };
}, },
mounted() { async mounted() {
// this.creatQrCode();
this.loadDetail(); this.loadDetail();
}, },
methods: { 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() { async loadDetail() {
let crId = this.$route.params.crId; let crId = this.$route.params.crId;
if (crId) { if (crId) {
...@@ -367,11 +404,6 @@ export default { ...@@ -367,11 +404,6 @@ export default {
} }
}, },
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 关联文献的行样式调整 // 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) { tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) { if (rowIndex % 2 == 0) {
...@@ -384,307 +416,472 @@ export default { ...@@ -384,307 +416,472 @@ 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> </script>
<style lang="scss" scoped> <style lang="scss" >
.mr-20 { // 自定义分页器样式
margin-right: 20px; #page {
height: 30px;
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
</style>
<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%;
} }
$label: #9f9c9a;
.wrapper { .custom_title {
// width: 1200px; display: flex;
width: calc(100% - 26%); width: 100%;
margin: 60px auto; padding: 50px 0 40px 0;
background-color: #fff; align-items: center;
padding: 40px; .center {
.back { width: 180px;
font-size: 18px; margin: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
color: $label;
cursor: pointer;
.svg-icon { .svg-icon {
font-size: 28px; font-size: 50px;
color: $blue;
margin-right: 10px; margin-right: 10px;
} }
span { .title {
font-size: 16px; font-size: 26px;
font-weight: 400;
color: $blue;
line-height: 101px;
} }
} }
/**文物基本信息 */ .desc {
.cr-detail_info { flex: 1;
margin-top: 32px; display: flex;
// display: flex; align-items: center;
img { .modify {
max-width: 100%; width: 16px;
height: auto; margin: 0 6px;
} img {
.cr-images { width: 100%;
width: 700px;
margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
} }
.enlarge { }
position: absolute; .divider {
bottom: 60px; flex: 1;
right: 40px; height: 6px;
display: flex; background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
z-index: 9; repeat-x;
background-color: #c1925b; img {
width: 40px; width: 100%;
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 { }
}
.enlarge {
position: absolute;
bottom: 40px;
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: #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%;
}
}
.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; position: relative;
.info-title { margin: 36px 0 70px;
display: flex; /**基本信息 */
align-items: center; .display-detail_basic_info {
justify-content: space-between; position: relative;
margin-bottom: 40px; .info-container {
.title { display: flex;
font-size: 28px; justify-content: space-between;
font-weight: bold; padding: 60px 36px;
color: #444; height: 100%;
} background-color: #fff;
.view-container { .info-container-left {
.view-svg-icon { min-height: 200px;
color: #999; margin-right: 50px;
margin-right: 5px; flex: 1;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
width: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
} }
.info-container-right {
flex: 1;
min-height: 200px;
.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: center;
margin-bottom: 10px;
.label {
display: flex;
align-items: center;
width: 140px;
// margin-right: 26px;
// margin-bottom: 10px;
font-weight: bold;
color: #858585;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
}
}
.view-text { .right {
color: #999; 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;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: #2069c4;
}
}
}
}
} }
} }
.play { .audio {
margin-left: 10px; position: absolute;
font-size: 32px; right: -120px;
top: 34px;
cursor: pointer; cursor: pointer;
} animation: audioRotate 8s linear infinite;
} transform-origin: center center;
.info-body { border: 2px solid $blue;
display: flex; padding: 10px;
justify-content: space-between; border-radius: 50%;
align-items: flex-end; display: flex;
margin-bottom: 10px; justify-content: center;
.basic-info { align-items: center;
.body-item { background-color: #fff;
display: flex; transition: all 0.5s ease;
.label { &:hover {
display: block; box-shadow: 0 0 14px rgb(0 0 0 / 40%);
width: 80px; }
margin-right: 26px; .svg-icon {
margin-bottom: 10px; color: $blue;
font-weight: bold; font-size: 80px;
color: #9f9c9a; }
} img {
width: 60px;
height: 60px;
} }
} }
} }
.view-3d { /**简介和视频 */
margin: 32px 0; .display-detail_intro {
padding: 6px 10px; background-image: url("@/assets/imgs/display/normal/bg.png");
width: 100%; background-size: 1%;
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; display: flex;
justify-content: center; min-height: 265px;
align-items: center; .intro-content,
background-color: #fff; .intro-video {
transition: all 0.5s ease; flex: 1;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
} }
.svg-icon { .intro-content {
color: #2069c4; padding: 20px;
font-size: 80px; margin: 20px;
} line-height: 28px;
img {
width: 60px; .intro-content-container {
height: 60px; text-indent: 34px;
}
} }
} }
@keyframes audioRotate {
0% { /**展览单元 */
transform: rotateZ(0deg); .display-detail_units {
overflow-x: hidden;
.unit-container {
// height: 100%;
margin-bottom: 40px;
display: flex;
} }
100% { .unit-content-menu {
transform: rotateZ(360deg); width: 360px;
margin-right: 40px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
} }
} .unit-content {
flex: 1;
padding: 40px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
@-webkit-keyframes audioRotate { .unit-content_intro {
0% { font-size: 16px;
transform: rotateZ(0deg); font-weight: 400;
} color: #444444;
100% { line-height: 36px;
transform: rotateZ(360deg); text-indent: 32px;
margin-bottom: 20px;
}
.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;
}
}
}
} }
} }
} // 关联文物
.content { .display-detail_relateRc {
text-indent: 32px; 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;
// 文物简介 .cr-name-intro {
.cr-detail_intro { width: 100%;
margin-top: 32px; height: 100%;
.intro-and-video { position: absolute;
display: flex; left: 0;
justify-content: space-between; top: 0;
.intro-content { padding: 100px 28px 50px;
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 { background-image: linear-gradient(
margin: 100px 0; to top,
.wrapper { rgba(0, 0, 0, 0.8),
display: flex; rgba(0, 0, 0, 0.1)
background-color: #fafafa; );
border: 2px solid #cccccc; .cr-name {
border-left: none; font-size: 48px;
.lts-content { font-weight: bold;
flex: 1; color: #ffffff;
padding: 10px; text-align: center;
} margin-bottom: 40px;
} }
} .cr-intro {
/**关联文物 */ font-size: 16px;
.cr-detail_relate_cr { font-weight: 400;
margin-top: 32px; color: #ccc;
.cr-list { text-indent: 32px;
.cr-item { line-height: 40px;
margin-bottom: 40px; overflow: hidden;
.container { text-overflow: ellipsis;
border: 1px solid #f1f1f1; display: -webkit-box;
height: 300px; -webkit-line-clamp: 5;
position: relative; -webkit-box-orient: vertical;
display: flex; }
flex-direction: column; }
cursor: pointer; img {
&:hover { width: 100%;
img { height: 100%;
transform: scale(1.2); }
} }
.desc { }
background-color: #2069c4; &:not(&:first-child) {
color: #fff; margin-bottom: 30px;
.img-container {
height: 214px;
} }
} }
.img { }
background-color: #f8f8f8; .img-container {
height: 240px; width: 100%;
cursor: pointer; height: 100%;
overflow: hidden; cursor: pointer;
overflow: hidden;
&:hover {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
img { img {
height: 100%; transform: scale(1.1);
object-fit: contain;
transition: all 0.5s ease;
// width: auto;
} }
} }
.desc { img {
padding: 16px 0; width: 100%;
display: flex; height: 214px;
justify-content: center; object-fit: cover;
transition: all 0.5s ease; transition: all 0.5s ease;
flex: 1;
} }
} }
} }
}
} /**关联文献 */
/**关联视频 */ .display-detail_lts {
.cr-detail_relate_video { background-color: #fafafa;
margin: 32px 0; .lts-content {
.video-container { flex: 1;
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 { ::v-deep .el-carousel__item--card {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -697,4 +894,53 @@ $label: #9f9c9a; ...@@ -697,4 +894,53 @@ $label: #9f9c9a;
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 100%; height: 100%;
} }
</style> ::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 @@ ...@@ -12,11 +12,7 @@
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
<el-image <el-image
:src=" :src="$getFullUrl(displayDetail.faceImagePressUrl)"
$getFullUrl(
displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
)
"
fit="cover" fit="cover"
></el-image> ></el-image>
</div> </div>
...@@ -26,6 +22,7 @@ ...@@ -26,6 +22,7 @@
<div class="content-item display-detail_basic_info"> <div class="content-item display-detail_basic_info">
<div class="info-container"> <div class="info-container">
<div <div
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
class=" class="
info-container-left info-container-left
wow wow
...@@ -42,7 +39,11 @@ ...@@ -42,7 +39,11 @@
class="img-container" class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)" @click="handelPreviewImages(displayDetail.imagesVo)"
> >
<img :src="item.url" alt="点击查看大图" srcset="" /> <img
:src="$getFullUrl(item.pressUrl)"
alt="点击查看大图"
srcset=""
/>
</div> </div>
<div <div
class="enlarge" class="enlarge"
...@@ -428,7 +429,7 @@ import AudioPlayer from "@/components/AudioPlayer"; ...@@ -428,7 +429,7 @@ import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card"; import Card from "@/views/personal/components/Card";
import Video from "@/components/Video"; import Video from "@/components/Video";
import { previewFile } from "@/utils/index"; import { getFullUrl, previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue"; import ChStyleUnit from "./ChStyleUnit.vue";
import MenuList from "@/components/MenuList"; import MenuList from "@/components/MenuList";
...@@ -583,7 +584,7 @@ export default { ...@@ -583,7 +584,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$blue:#2069c4; $blue: #2069c4;
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: #d72f3f; background-color: #d72f3f;
...@@ -693,11 +694,13 @@ $blue:#2069c4; ...@@ -693,11 +694,13 @@ $blue:#2069c4;
} }
.wrapper { .wrapper {
// width: 1200px; // width: 1200px;
padding: 0 13%; // padding: 0 13%;
width: 100%; // width: 100%;
width: 78%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.inner { .inner {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -723,7 +726,7 @@ $blue:#2069c4; ...@@ -723,7 +726,7 @@ $blue:#2069c4;
.imagesVo-image-container { .imagesVo-image-container {
// position: relative; // position: relative;
.img-container { .img-container {
height: 280px; height: 100%;
width: 100%; width: 100%;
img { img {
width: 100%; width: 100%;
...@@ -1070,5 +1073,4 @@ $blue:#2069c4; ...@@ -1070,5 +1073,4 @@ $blue:#2069c4;
animation-play-state: paused; animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */ -webkit-animation-play-state: paused; /* Safari 和 Chrome */
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论