Skip to content

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

修改搜索框为点击按钮后再搜索

上级 6a8b8d49
显示空白字符变更
内嵌 并排
正在显示 包含 44 行增加 和 752 行删除
src/views/culturalRelic/Detail-old.vue deleted 100644 → 0
浏览文件 @ 6a8b8d49
<!-- -->
<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
浏览文件 @ b17a76fe
<template> <template>
<div class="content"> <div class="content">
<!-- 展览图片 --> <!-- 文物图片 -->
<div <div class="content-item display-detail_imgs" ref="imgs">
class=" <img
content-item class="animate__animated animate__fadeInDownBig"
display-detail_imgs v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
id="faceImage"
animate__animated animate__fadeInDownBig :src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)"
" />
ref="imgs"
v-if="CRDetail.faceImageUrl || CRDetail.imagesVo.length > 0"
>
<img <img
id="faceImage" id="faceImage"
:src=" v-else-if="CRDetail.faceImagePressUrl"
$getFullUrl( class="animate__animated animate__fadeInDownBig"
CRDetail.faceImagePressUrl || CRDetail.imagesVo[0].pressUrl :src="CRDetail.faceImagePressUrl"
)
"
/> />
</div> </div>
<div class="wrapper wow animate__animated animate__fadeInUpBig"> <div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner"> <div class="inner">
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
...@@ -640,6 +636,7 @@ $blue: #2069c4; ...@@ -640,6 +636,7 @@ $blue: #2069c4;
background-color: #fff; background-color: #fff;
.info-container-left { .info-container-left {
min-height: 200px; min-height: 200px;
max-height: 400px;
margin-right: 50px; margin-right: 50px;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
......
src/views/culturalRelic/index.vue
浏览文件 @ b17a76fe
...@@ -238,9 +238,9 @@ export default { ...@@ -238,9 +238,9 @@ export default {
this.onlyShow3d = value; this.onlyShow3d = value;
this.search(); this.search();
}, },
keyword(value) { // keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms // debounce(this.handleKeyWordChange(value), 1000); //500ms
}, // },
}, },
methods: { methods: {
search() { search() {
......
src/views/display/components/BlueStyle.vue
浏览文件 @ b17a76fe
<template> <template>
<div class="content"> <div class="content">
<!-- 展览图片 --> <!-- 展览图片 -->
<div <div class="content-item display-detail_imgs" ref="imgs">
class=" <img
content-item class="animate__animated animate__fadeInDownBig"
display-detail_imgs
animate__animated animate__fadeInDownBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].pressUrl)"
/>
<img <img
id="faceImage" id="faceImage"
:src=" v-else-if="displayDetail.faceImagePressUrl"
$getFullUrl( class="animate__animated animate__fadeInDownBig"
displayDetail.faceImagePressUrl || :src="displayDetail.faceImagePressUrl"
displayDetail.imagesVo[0].pressUrl
)
"
/> />
</div> </div>
<div class="wrapper wow animate__animated animate__fadeInUpBig"> <div class="wrapper wow animate__animated animate__fadeInUpBig">
......
src/views/display/index.vue
浏览文件 @ b17a76fe
...@@ -206,11 +206,11 @@ export default { ...@@ -206,11 +206,11 @@ export default {
this.loadData(); this.loadData();
this.loadRegionTree(); this.loadRegionTree();
}, },
watch: { // watch: {
keyword(value) { // keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms // debounce(this.handleKeyWordChange(value), 1000); //500ms
}, // },
}, // },
methods: { methods: {
search() { search() {
this.loadData(); this.loadData();
...@@ -256,10 +256,10 @@ export default { ...@@ -256,10 +256,10 @@ export default {
this.type = value; this.type = value;
this.loadData(); this.loadData();
}, },
handleKeyWordChange(value) { // handleKeyWordChange(value) {
this.keyword = value; // this.keyword = value;
this.loadData(); // this.loadData();
}, // },
handleRegionChange(value) { handleRegionChange(value) {
this.regionCode = value; this.regionCode = value;
......
src/views/museum/index.vue
浏览文件 @ b17a76fe
...@@ -169,11 +169,11 @@ export default { ...@@ -169,11 +169,11 @@ export default {
this.loadData(); this.loadData();
this.loadRegionTree(); this.loadRegionTree();
}, },
watch: { // watch: {
keyword(value) { // keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms // debounce(this.handleKeyWordChange(value), 1000); //500ms
}, // },
}, // },
methods: { methods: {
search() { search() {
this.loadData(); this.loadData();
......
src/views/virtual/index.vue
浏览文件 @ b17a76fe
...@@ -175,11 +175,11 @@ export default { ...@@ -175,11 +175,11 @@ export default {
this.loadData(); this.loadData();
this.loadRegionTree(); this.loadRegionTree();
}, },
watch: { // watch: {
keyword(value) { // keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms // debounce(this.handleKeyWordChange(value), 1000); //500ms
}, // },
}, // },
methods: { methods: {
search() { search() {
this.loadData(); this.loadData();
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论