Skip to content

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

对接以图搜图接口；优化页面布局

上级 0fee72fa
显示空白字符变更
内嵌 并排
正在显示 包含 156 行增加 和 2241 行删除
src/api/culturalRelic.js
浏览文件 @ ba1b6613
......@@ -51,3 +51,22 @@ export function getCrExistDict(params) {
})
}
// 以图搜图-上传图片文件搜索文物图片
export function searchImageByUpload(data) {
return request({
url: '/bizSearchImage/v1/searchImage',
method: 'post',
data
})
}
// 以图搜图-已经存在的图片文件搜索文物图片
export function searchImageByImg(data) {
return request({
url: '/bizSearchImage/v2/searchImage',
method: 'post',
data
})
}
src/views/culturalRelic/detail-bp.vue deleted 100644 → 0
浏览文件 @ 0fee72fa
<template>
<div class="content">
<!-- 文物图片 -->
<!-- <div class="content-item display-detail_imgs" ref="imgs">
<img
class="animate__animated animate__fadeInDownBig"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
id="faceImage"
:src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)"
/>
<img
id="faceImage"
v-else-if="CRDetail.faceImagePressUrl"
class="animate__animated animate__fadeInDownBig"
:src="CRDetail.faceImagePressUrl"
/>
</div> -->
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
class="info-container-left wow animate__animated animate__fadeInLeft"
>
<SlideImage
:imgList="CRDetail.imagesVo"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
/>
<SlideImage
:imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-else-if="CRDetail.faceImagePressUrl"
/>
</div>
<div
class="info-container-right wow animate__animated animate__fadeInRight"
>
<div class="info-title">
<span>{{ CRDetail.name }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
</div>
<div class="basic-info">
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="keyword"></svg-icon> -->
年代</span
>
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="glww"></svg-icon> -->
来源</span
>
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zllx"></svg-icon> -->
类别</span
>
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zlxz"></svg-icon> -->
级别</span
>
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwzd"></svg-icon> -->
质地</span
>
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwcc"></svg-icon> -->
尺寸
</span>
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
馆藏单位</span
>
<span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div>
</div>
<div class="bottom">
<div class="tools">
<ReaderOperations
:loveCount="CRDetail.loveCount"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
</div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon
>查看文物3D模型
</div>
</div>
</div>
</div>
<div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
<div
class="content-item display-detail_tabbar"
id="tabbar"
:class="{ isFixed: isFixed }"
>
<span v-for="(item, index) in tabbarData" :key="index">
<span
@click="handleClickTabItem(item)"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
v-html="item.name"
v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
>
</span>
<span
@click="handleClickTabItem(item)"
v-else-if="
item.domId == 'relateRelics' &&
relateRelics &&
relateRelics.length > 0
"
v-html="item.name"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
>
</span>
</span>
</div>
<!-- 文物简介 -->
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
<span>文物简介</span>
</div>
<div class="intro-content">
<div class="left-box">简介</div>
<div class="intro-content-container" v-html="CRDetail.intro"></div>
</div>
</div>
<!-- 文物视频 -->
<div
class="content-item display-detail_videos"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
id="videosVo"
>
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
相关视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div>
<!--相关文物 -->
<div
class="content-item display-detail_relate_rc"
ref="units"
id="relateRelics"
>
<div class="intro-title">
<!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
<span>相关文物推荐</span>
</div>
<div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
</el-radio-group>
</div>
<el-row :gutter="8" v-if="relateRelics.length > 0">
<el-col
:span="6"
v-for="(item, index) in relateRelics"
:key="index"
>
<div class="img-container" @click="handleToCr(item)">
<img :src="item.faceImagePressUrl" alt="" />
</div>
<div class="cr-name">{{ item.name }}</div>
</el-col>
</el-row>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
id="literatureVo"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="CRDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
// import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import { isElementInViewport2 } from "@/utils/index";
export default {
components: {
AudioPlayer,
ReaderOperations,
Video,
videoPlayer,
SlideImage,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
let vm = this;
return {
imgViewerVisible: false,
CRDetail: {},
relateRelics: [],
audioPlaying: true,
page: null,
currentRcKey: "type",
currentVideo: null,
currentTab: null,
isFixed: false,
tabbarData: [
{
name: "文物简介",
domId: "intro",
},
{
name: "相关视频",
domId: "videosVo",
},
{
name: "相关文物",
domId: "relateRelics",
},
{
name: "相关文献",
domId: "literatureVo",
},
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
};
},
watch: {
"$route.params.crId"(value) {
this.loadDetail(value);
},
currentRcKey(key) {
this.loadCrRecommend();
},
},
async mounted() {
let crId = this.$route.params.crId;
this.loadDetail(crId);
setTimeout(() => {
window.addEventListener("scroll", this.initHeight);
this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
this.tabbarData.map((item) => {
let dom = document.getElementById(item.domId);
if (dom) {
item.position = dom.offsetTop - 320; //100navbar 55tabbar
}
});
}, 500);
},
beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件
window.removeEventListener("scroll", this.initHeight);
next();
},
methods: {
async loadDetail(crId) {
if (crId) {
let res = await getRCDetailByIdV2({ crId });
if (res.code == 0) {
this.CRDetail = res.data.culturalRelicVo;
// this.relateRelics = res.data.recommendList.records;
if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
this.currentVideo = this.CRDetail.videosVo[0];
}
// 获取关联文物
this.loadCrRecommend();
this.$nextTick(() => {
// this.replaceFaceImage();
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
}
}
},
async loadCrRecommend() {
const { crId } = this.CRDetail;
const params = {
crId,
page: 1,
limit: 4,
};
if (this.currentRcKey == "type") {
params.type = this.CRDetail.type;
}
if (this.currentRcKey == "years") {
params.years = this.CRDetail.years;
}
if (this.currentRcKey == "deptId") {
params.deptId = this.CRDetail.deptId;
}
let res = await crRecommendByPage(params);
this.relateRelics = res.data.records;
// console.log("res", res);
},
replaceFaceImage() {
var img = new Image(); //新建一个图片对象
let url; //最终显示的大图
// debugger
if (this.CRDetail.faceImagePressUrl) {
url = this.$getFullUrl(this.CRDetail.faceImageUrl);
} else if (this.CRDetail.imagesVo.length > 0) {
url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
}
let faceImage = document.getElementById("faceImage");
img.src = url;
img.onload = function () {
faceImage.src = url;
};
},
handleBack() {
this.$router.go(-1);
},
handleTo3D() {
this.$message.info("即将打开3D模型...");
setTimeout(() => {
window.open(this.CRDetail.url3d, "_blank");
}, 1000);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages(items, hasImages) {
this.imgViewerVisible = true;
if (hasImages) {
this.imgList = items.map((item) => this.$getFullUrl(item.url));
} else {
this.imgList = items.map((item) => this.$getFullUrl(item));
}
},
handleToDetail(crId) {
// const newPage = this.$router.resolve({
// path: `culturalReli/${crId}`,
// });
// window.open(newPage.href, "_blank");
this.$router.push(`culturalRelic/${crId}`);
},
// 点击音频
handleClickAudio() {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "/culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`/culturalRelic/${crId}`);
},
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
handleClickTabItem(item) {
this.currentTab = item;
if (item.position) {
document.documentElement.scrollTop = item.position;
}
},
initHeight() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
this.tabbarData.map((item) => {
let content = document.getElementById(item.domId);
if (content && isElementInViewport2(content)) {
this.currentTab = item;
}
});
},
},
};
</script>
<style lang="scss">
// 自定义分页器样式
#page {
height: 30px;
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
</style>
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$titleFontFamily: SourceHanSerifCN-Bold;
.custom-title {
width: 50px;
background-color: #d72f3f;
min-height: 300px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content {
// background: url("@/assets/imgs/display/normal/bg1.png");
background-color: #f3f3f3;
min-height: 100px;
}
.content-item {
width: 100%;
}
.custom_title {
display: flex;
width: 100%;
padding: 50px 0 40px 0;
align-items: center;
.center {
width: 180px;
margin: 0 10px;
display: flex;
align-items: center;
.svg-icon {
font-size: 50px;
color: $deep-blue;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $deep-blue;
line-height: 101px;
}
}
.desc {
flex: 1;
display: flex;
align-items: center;
.modify {
width: 16px;
margin: 0 6px;
img {
width: 100%;
}
}
.divider {
flex: 1;
height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%;
}
}
}
}
.enlarge {
position: absolute;
bottom: 20px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
.intro-title {
font-size: 26px;
font-weight: 400;
color: $deep-blue;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
margin-bottom: 32px;
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
}
.isFixed {
position: fixed;
left: 0;
top: $nav-height;
z-index: 99;
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.wrapper {
width: 1200px;
// padding: 0 13%;
// width: 100%;
// width: 78%;
display: flex;
justify-content: center;
.inner {
width: 100%;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
background-color: #fff;
// margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 40px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
max-height: 460px;
margin-right: 50px;
flex: 1;
overflow: hidden;
position: relative;
// .imagesVo-image-container {
// // position: relative;
// }
.img-container {
height: 100%;
width: 100%;
background: #f5f5f9;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.info-container-right {
flex: 1;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
.basic-info {
.body-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
font-size: 18px;
.label {
display: flex;
align-items: center;
width: 120px;
// margin-right: 26px;
// margin-bottom: 10px;
font-weight: bold;
color: #999;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
.value {
color: #666;
// font-weight: bold;
}
}
}
.bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
.qrcode {
display: flex;
justify-content: center;
img {
width: 50%;
height: 100%;
}
}
.showIcon {
height: 40px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: $deep-blue;
margin: 20px 0;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
// box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
opacity: 0.8;
}
.svg-icon {
margin-right: 8px;
}
}
.tools {
width: 100%;
margin-top: 10px;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: $deep-blue;
}
}
}
}
}
}
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $deep-blue;
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: $deep-blue;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
}
.display-detail_tabbar {
background-color: #fff;
display: flex;
justify-content: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2;
.tab-item {
height: 100%;
margin-right: 20px;
color: #666;
font-size: 24px;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $deep-blue;
&::after {
display: inline-block;
}
}
&::after {
display: none;
}
}
.active {
color: $deep-blue;
&::after {
display: inline-block;
}
}
.tab-item::after,
.active::after {
position: absolute;
content: "";
height: 4px;
width: 100%;
bottom: -10px;
left: 0;
background-color: $deep-blue;
}
}
/**简介和视频 */
.display-detail_intro {
padding: 40px;
.intro-content {
line-height: 28px;
display: flex;
}
.left-box {
width: 60px;
background-color: $deep-blue;
min-height: 200px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($deep-blue, 10%);
}
}
.display-detail_videos {
display: flex;
flex-direction: column;
background-color: #fff;
.video-title {
display: flex;
// justify-content: center;
align-items: center;
font-size: 26px;
color: $deep-blue;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
padding-left: 46px;
i {
font-size: 28px;
margin-right: 10px;
}
}
.video-names {
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $deep-blue;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
}
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $deep-blue;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $deep-blue;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
}
}
}
.video-box {
height: 600px;
.video-player {
height: 100%;
}
}
}
// 关联文物
.display-detail_relate_rc {
min-height: 560px;
// background-image: url("@/assets/imgs/display/normal/bg.png");
background-color: #fff;
background-size: 1%;
padding: 50px 46px;
.intro-title {
display: flex;
align-items: center;
font-family: SourceHanSerifCN-Bold;
}
.recommend-type {
margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 8px;
}
.el-row {
.el-col {
.img-container {
width: 100%;
height: 214px;
position: relative;
cursor: pointer;
background-color: #939393;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.cr-name {
font-size: 18px;
// font-weight: bold;
color: #666;
text-align: left;
margin: 20px 0;
text-indent: 2px;
}
}
}
}
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-tree {
background: transparent;
.el-tree-node__content {
height: 50px;
:hover {
background: #fff;
color: $deep-blue;
}
}
}
::v-deep .el-radio__input {
display: none;
}
::v-deep .el-radio__label {
font-size: 18px;
padding-left: 0;
font-family: SourceHanSerifCN-Bold;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
color: $deep-blue;
}
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0;
// }
// ::v-deep .el-radio-button:last-child .el-radio-button__inner{
// border-radius: 0;
// }
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1200px);
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
src/views/culturalRelic/index-hasbg.vue deleted 100644 → 0
浏览文件 @ 0fee72fa
<template>
<div class="cultural-relic">
<ListBanner
title="共计已上线文物"
:num="list.total"
unit="件/套"
:info="['文物', '展示']"
/>
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div class="search-item" @click="handleClickSearchBar('years')">
<span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div :span="4" class="search-item" @click="handleClickThreeD">
<div class="text">3D文物</div>
<svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
</div>
<div class="search-item">
<input
type="text"
v-model="keyword"
placeholder="文物名称"
@keyup.enter="search"
/>
<i class="el-icon-search"></i>
</div>
</div>
</div>
<transition name="el-zoom-in-top">
<div class="search-panel" v-show="showSearchPanel">
<el-scrollbar>
<div class="search-panel-wrapper">
<div
class="type-item"
v-for="(item, index) in currentPanelData"
:key="index"
>
<span class="text" @click="handleClickSearchItem(item)">
{{ item.label }}
</span>
<span class="divider">/</span>
</div>
</div>
</el-scrollbar>
</div>
</transition>
<!-- <div class="total">
<span>共{{list.total}}件文物</span>
</div> -->
<div class="content-wrapper">
<div class="shade">
<div class="jxl">
<img src="@/assets/imgs/shade/jxl.png" alt="" />
</div>
</div>
<div>
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 6 : 0"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
class="face-image"
lazy
/>
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="hover-bg">
<div>
<div>
<div class="name">{{ item.name }}</div>
<div class="depart">{{ item.deptName }}</div>
</div>
</div>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
<div class="left">
<!-- <div class="deptName">
<span>关键词：</span>
<span>{{ item.keyword }}</span>
</div> -->
<div class="deptName">
<span>展览单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
item.collectCount ? item.collectCount : "收藏"
}}</span>
</span>
<span class="view">
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div> -->
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ListBanner from "@/components/ListBanner";
import { getCulturalRelicList } from "@/api/culturalRelic";
import { mapGetters } from "vuex";
export default {
name: "CulturalRelic",
components: { ListBanner },
data() {
return {
list: {
records: [],
size: 16,
current: 1,
total: 0,
},
culturalRelicYearsProps: {
value: "value",
label: "label",
children: "children",
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
years: "",
currentImg: null,
showSearchPanel: false,
currentPanelData: [],
currentPanel: "type",
currentType: "文物类别",
currentYears: "文物年代",
yearList: [],
typeList: [],
};
},
computed: {
...mapGetters(["dicts"]),
},
async created() {
let yearList = [
{
label: "全部年代",
value: "",
},
];
let typeList = [
{
label: "全部类别",
value: "",
},
];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) {
typeList.push({
label: this.dicts.culturalRelicType[key],
value: key,
});
}
this.typeList = typeList;
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
traveseYears(this.culturalRelicYears);
this.yearList = yearList;
// 获取叶子节点
function traveseYears(arr) {
if (arr && arr.length > 0) {
arr.map((item) => {
if (item.children && item.children.length > 0) {
traveseYears(item.children);
} else {
yearList.push({
value: item.value,
label: item.label,
});
}
});
}
}
// 删除无children的节点
// function traveseYears(arr) {
// if (arr && arr.length > 0) {
// arr.map((item) => {
// if (item.children && item.children.length == 0) {
// delete item.children;
// } else {
// traveseYears(item.children);
// }
// });
// }
// }
},
mounted() {
this.loadData();
},
watch: {
onlyShow3d(value) {
this.onlyShow3d = value;
this.search();
},
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
},
methods: {
search() {
this.loadData();
},
async loadData() {
const params = {
flag3d: this.onlyShow3d ? "1" : "0",
page: this.list.current,
limit: this.list.size,
name: this.keyword,
type: this.type,
years: this.years,
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
handleClick(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
// handleTypeChange(value) {
// this.type = value;
// this.list.current = 1;
// this.loadData();
// },
// handleYearsChange(value) {
// if (value && value instanceof Array) {
// this.years = value[value.length - 1];
// } else {
// this.years = value;
// }
// this.list.current = 1;
// this.loadData();
// this.$refs.years.dropDownVisible = false;
// },
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleClickSearchBar(type) {
this.showSearchPanel = true;
this.currentPanel = type;
switch (type) {
case "type":
this.currentPanelData = this.typeList;
break;
case "years":
this.currentPanelData = this.yearList;
break;
}
},
handleClickSearchItem(item) {
switch (this.currentPanel) {
case "type":
this.type = item.value;
this.currentType = item.label;
break;
case "years":
this.years = item.value;
this.currentYears = item.label;
break;
}
this.list.current = 1;
this.loadData();
this.showSearchPanel = false;
},
},
};
</script>
<style lang="scss" scoped>
$text-indent: 16px;
.cultural-relic {
width: 100%;
.search-bar {
display: flex;
align-items: center;
flex-direction: column;
padding: 24px 20%;
.search-wrapper {
display: flex;
width: 100%;
justify-content: center;
.search-item {
// width: 215px;
width: 25%;
height: 32px;
color: #999;
padding: 0 20px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
background-color: #fff;
margin-right: 20px;
cursor: pointer;
input {
outline: none;
border: none;
height: 50%;
background: transparent;
width: 80%;
}
::-webkit-input-placeholder {
/*Webkit browsers*/
color: #999;
}
:-moz-placeholder {
/*Mozilla Firefox 4 to 8*/
color: #999;
}
::moz-placeholder {
/*Mozilla Firefox 19+*/
color: #999;
}
:-ms-input-placeholder {
/*Internet Explorer 10+*/
color: #999;
}
}
}
.item {
margin-right: 20px;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
display: flex;
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
}
.threeD {
display: flex;
cursor: pointer;
font-size: 16px;
color: #666;
margin-left: 20px;
transition: all ease 0.3s;
.svg-icon {
margin-right: 4px;
font-size: 22px;
}
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
}
}
.search-panel {
min-height: 100px;
max-height: 138px;
width: 100%;
display: flex;
justify-content: center;
::v-deep .el-scrollbar__view {
display: flex;
justify-content: center;
}
/*隐藏浏览器自带的水平滚动条*/
::v-deep .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.search-panel-wrapper {
width: 60%;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 10px 0;
.type-item {
width: 25%;
display: flex;
justify-content: center;
color: #fff;
font-size: 14px;
margin-bottom: 24px;
position: relative;
.text {
cursor: pointer;
}
.divider {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
}
}
}
.total {
padding: 0 13%;
display: flex;
justify-content: flex-end;
background-color: #fff;
& > span {
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
border-radius: 4px;
color: #fff;
margin-top: 32px;
}
}
.content-wrapper {
background-color: #fff;
padding: 0;
padding-bottom: 126px;
> div {
padding: 0 13%;
}
.shade {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding: 0;
z-index: 0;
pointer-events: none;
> div.jxl {
height: 70vh;
filter: brightness(0.1);
opacity: 0.1;
position: absolute;
bottom: -80px;
right: -50px;
> img {
height: 100%;
}
}
}
.content {
padding: 16px 0 60px;
// width: 100%;
// margin-top: 32px;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
// padding: 0 74px;
min-height: 500px;
.cr-item {
margin-bottom: 40px;
.container {
// border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
width: 350px;
height: 350px;
// overflow: hidden;
justify-content: center;
text-align: center;
text-align: center;
&:hover {
// border: 2px solid $deep-blue;
// border-radius: 100%;
/* .face-image {
transform: scale(1.2);
} */
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
> img {
transform: scale(1.2);
filter: grayscale(0.7) blur(1px);
}
}
.hover-bg {
> div {
opacity: 1;
width: 100%;
height: 100%;
}
}
}
.hover-bg {
width: 100%;
height: 100%;
// padding: 20px;
position: absolute;
left: 0;
top: 0;
> div {
opacity: 0;
width: 120%;
height: 120%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(66 85 92 / 80%);
color: #fff;
text-align: center;
border-radius: 100%;
transition: all 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
> div {
.name {
font-weight: 600;
font-family: "楷体";
font-size: 26px;
padding: 20px;
}
.depart {
color: #ffb836;
font-family: "黑体";
}
}
}
}
.img-container {
// background-color:#939393;
// background-color: #42555c;
// #42555c
// height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
width: 350px;
height: 250px;
padding: 30px;
.face-image {
height: 100%;
object-fit: contain;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
// height: 120px;
height: 36px;
// padding: 36px 30px 20px;
// transition: all 0.5s ease;
background: #fff;
// display: none;
.name {
font-size: 18px;
font-weight: bold;
color: $deep-blue;
margin-bottom: 18px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.desc-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
display: none;
.left {
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
// background-color: rgba(0, 0, 0, 0.1);
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 8px;
font-size: 16px;
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #fff;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
background-size: 22%;
height: 116px;
}
}
.cultural-relic {
.content {
.cr-list {
.cr-item {
.container {
.info {
position: relative;
border-radius: 10px;
overflow: hidden;
padding: 50px 10px;
.name {
text-align: center;
padding-bottom: 50px;
}
.depart {
position: absolute;
bottom: 30px;
right: 10px;
}
.corner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
}
}
}
}
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
font-weight: bold;
}
::v-deep .el-input,
.el-cascader {
// width: 368px !important;
.el-input__inner {
// width: 100%;
border: none;
border-radius: 0;
background-size: 100% 100%;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 14px;
}
}
}
::v-deep .el-input {
width: auto !important;
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: $deep-blue;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
}
.active {
color: #fff;
}
}
::v-deep .el-scrollbar__thumb {
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
}
</style>
src/views/searchPic/components/imgList/index.vue
浏览文件 @ ba1b6613
<template>
<div class="img-list">
<vue-waterfall-easy
v-if="imgList.length > 0 && contentWidth"
ref="waterfall"
:width="contentWidth"
:maxCols="7"
v-if="imgsArr.length > 0"
:imgsArr="imgsArr"
@scrollReachBottom="loadImgList"
:imgsArr="imgList"
:src-key="getSrcKey"
:gap="30"
ref="waterfall"
@click="handleClickImg"
:src-key="getSrcKey"
>
<div slot="waterfall-over" class="load-over">已加载完全部</div>
</vue-waterfall-easy>
......@@ -17,52 +17,58 @@
</template>
<script>
import { imgList } from "../../mock";
import vueWaterfallEasy from "vue-waterfall-easy";
// import { imgList } from "../../mock";
export default {
components: {
vueWaterfallEasy,
},
props: {
imgList: {
type: Array,
default: () => [],
},
},
computed: {
getSrcKey() {
return "pressUrl";
},
screenWidth() {
// 获取屏幕宽度的计算属性
return window.innerWidth;
},
},
watch: {
screenWidth(newWidth) {
// 监听屏幕宽度的变化，并更新盒子的宽度
this.contentWidth = newWidth * 0.76;
},
},
data() {
return {
current: 0,
size: 20,
total: 20,
hasMore: true,
imgsArr: imgList, //图片数组
// imgList,
contentWidth: 0,
};
},
computed: {
getSrcKey() {
return "filePath";
},
},
mounted() {
this.loadImgList();
this.getContentWidth();
window.addEventListener("resize", () => {
this.getContentWidth();
console.log(123, this.contentWidth);
});
},
methods: {
async loadImgList() {
if (this.total === this.imgsArr.length) {
this.hasMore = false;
this.$refs.waterfall && this.$refs.waterfall.waterfallOver();
}
// const params = {
// };
// let res = await getListFileByPage(params);
// if (res && res.data) {
// const { records, size, current, total } = res.data;
// this.size = size;
// this.current = current;
// this.total = total;
// let list = JSON.parse(JSON.stringify(records));
// this.imgsArr = this.imgsArr.concat(list);
// this.current++;
// }
getContentWidth() {
this.contentWidth = this.screenWidth * 0.76;
},
handleClickImg(e){
handleClickImg(e) {
console.log(e);
}
},
},
};
</script>
......@@ -72,7 +78,16 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
0 16px 48px 8px rgba(28, 31, 35, 0.08);
.img-list {
height: calc(100vh);
display: flex;
justify-content: center;
// width: 80vw;
// ::v-deep .vue-waterfall-easy-container {
// width: 100%;
// }
// ::v-deep .vue-waterfall-easy {
// width: 100% !important;
// }
::v-deep .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
border-radius: none;
box-shadow: none;
......@@ -84,6 +99,10 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
}
}
::v-deep .vue-waterfall-easy-scroll {
overflow: auto !important;
}
::v-deep .img-wraper {
img {
border-radius: 14px;
......
src/views/searchPic/index.vue
浏览文件 @ ba1b6613
<template>
<div class="app-container show-result">
<div
:class="['app-container', 'search-pic', showResult ? 'show-result' : '']"
>
<div class="banner">
<div class="text">
<div class="title">以图搜图</div>
<div class="subtitle">
<div class="subtitle" v-if="!showResult">
以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。
<br />
通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。
......@@ -14,10 +16,10 @@
</div>
<div class="upload-wrapper">
<div class="upload-bar" @click="handleClickUpload" v-loading="loading">
<div class="left-area">
<div class="text">点击这里 上传图片</div>
<div class="left-area" title="点击此处上传图片">
<div class="text">点击此处上传图片</div>
<div class="camera">
<i class="el-icon-camera"></i>
<i class="el-icon-picture-outline" title="点击此处上传图片"></i>
</div>
</div>
<div class="right-button">以图搜图</div>
......@@ -35,20 +37,20 @@
<el-button ref="uploadButton" class="upload-button">上传</el-button>
</el-upload>
</div>
<div class="current-pic">
<div class="img-container" v-if="currentImg">
<div class="close" @click="handleCloseImg">
<i class="el-icon-close"></i>
</div>
<div class="current-pic" v-if="currentImg">
<div class="img-container">
<img :src="currentImg" alt="" />
</div>
共计搜索结果{{ imgList.length }}条
</div>
<ImgList v-if="showResult" />
<ImgList v-if="showResult" :imgList="imgList" />
<!-- <ImgList :imgList="imgList" /> -->
</div>
</template>
<script>
import ImgList from "./components/imgList";
import { searchImageByUpload } from "@/api/culturalRelic";
export default {
components: {
ImgList,
......@@ -58,6 +60,8 @@ export default {
showResult: false, //是否展示图片结果
currentImg: "", //当前搜索的图片
loading: false, //是否正在上传
imgList: [],
size: 20,
};
},
methods: {
......@@ -74,15 +78,26 @@ export default {
this.loading = true;
let formData = new FormData();
formData.append("file", file);
this.$message.warning("上传名称：" + file.name);
// // TODO:上传接口调用
setTimeout(() => {
this.currentImg =
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png";
this.$message.success("已查询出10条件结果");
formData.append("size", this.size);
const start = this.$message.warning("正在上传...");
const res = await searchImageByUpload(formData);
if (res.code == 0) {
const length = res.data.length;
this.$message.success(`上传成功并获得${length}条结果`);
this.imgList = res.data;
this.showResult = true;
this.loading = false;
}, 3000);
this.showCurrentImg(file);
}
},
showCurrentImg(file) {
const that = this;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
that.currentImg = this.result; //显示缩略图
console.log(this.result);
};
},
// 上传成功之后的钩子
handleSuccess(res) {
......@@ -95,8 +110,8 @@ export default {
// 点击上传
handleClickUpload() {
if (this.loading) {
this.$message.warning('当前有图片正在上传，请稍等~')
return
this.$message.warning("当前有图片正在上传，请稍等~");
return;
}
this.$refs.uploader.$el.querySelector(".upload-button").click();
},
......@@ -112,16 +127,25 @@ $transition-ease-03s: all ease 0.3s;
width: 100%;
background-image: url("@/assets/imgs/home-new/all-bg.png");
}
.search-pic {
min-height: 70vh !important;
}
.show-result {
.banner {
height: 200px;
.text {
padding: 80px 12%;
}
}
}
.banner {
height: 400px;
// background: $deep-blue;
width: 100%;
position: relative;
// overflow: hidden;
.left-pic {
transition: all ease 0.5s;
position: absolute;
left: -100px;
left: -300px;
top: 100px;
height: 150%;
width: 700px;
......@@ -135,21 +159,18 @@ $transition-ease-03s: all ease 0.3s;
right: 0;
bottom: 0;
height: 80%;
width: 400px;
width: 300px;
background-size: contain;
background-image: url("@/assets/imgs/line-draft/3.png");
background-repeat: no-repeat;
z-index: 0;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
color: #fff;
padding: 100px 12%;
padding: 200px 12%;
opacity: 1;
transition: $transition-ease-03s;
color: $deep-blue;
......@@ -169,14 +190,14 @@ $transition-ease-03s: all ease 0.3s;
.upload-wrapper {
display: flex;
justify-content: center;
padding: 0 13%;
padding: 0 16%;
position: relative;
margin-bottom: 16px;
font-size: 18px;
.upload-bar {
box-shadow: $box-shadow;
background: #fff;
border-radius: 8px;
border-radius: 12px;
width: 100%;
display: flex;
justify-content: space-between;
......@@ -193,7 +214,11 @@ $transition-ease-03s: all ease 0.3s;
justify-content: space-between;
padding-right: 16px;
width: 80%;
color: #ccc;
color: #999;
.text {
display: flex;
align-items: center;
}
i {
font-size: 30px;
color: $deep-blue;
......@@ -210,96 +235,24 @@ $transition-ease-03s: all ease 0.3s;
position: absolute;
right: 0;
top: 0;
border-radius: 0 8px 8px 0;
border-radius: 0 12px 12px 0;
}
}
}
// .upload-wrapper {
// height: 300px;
// width: 100%;
// display: flex;
// justify-content: center;
// position: relative;
// transition: all ease 0.5s;
// .upload-panel {
// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
// height: 320px;
// width: 60%;
// background-color: #fff;
// border-radius: 16px;
// display: flex;
// justify-content: center;
// align-items: center;
// position: absolute;
// transform: translateY(-100px);
// z-index: 10;
// transition: all ease 0.5s;
// .upload-area {
// width: calc(100% - 40px);
// height: calc(100% - 40px);
// border-radius: 16px;
// transition: all ease 0.5s;
// ::v-deep .el-upload {
// width: 100%;
// height: 100%;
// .el-upload-dragger {
// display: flex;
// justify-content: center;
// align-items: center;
// flex-direction: column;
// width: 100%;
// height: 100%;
// .icon {
// border-radius: 50%;
// background-color: rgba($color: $deep-blue, $alpha: 0.2);
// height: 100px;
// width: 100px;
// display: flex;
// justify-content: center;
// align-items: center;
// margin-bottom: 10px;
// .svg-icon {
// font-size: 48px;
// color: rgba($color: $deep-blue, $alpha: 0.8);
// }
// }
// .camera {
// opacity: 0;
// }
// }
// }
// }
// }
// }
.current-pic {
display: flex;
justify-content: center;
padding: 0 13%;
justify-content: space-between;
align-items: center;
padding: 0 16%;
position: relative;
z-index: 2;
margin-bottom: 50px;
.img-container {
background: #fff;
border-radius: 8px;
width: 100%;
display: flex;
justify-content: center;
justify-content: flex-start;
padding: 20px 0;
position: relative;
box-shadow: $box-shadow;
transition: all ease 0.3s;
&:hover {
box-shadow: $box-shadow-hover;
}
.close {
font-size: 30px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
img {
width: 110px;
height: 110px;
......
src/views/searchPic/mock.js
浏览文件 @ ba1b6613
export const imgList = [
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/62%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0/low/62.%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/42%E8%88%9E%E8%B9%88%E4%BF%91/low/42.%E8%88%9E%E8%B9%88%E4%BF%91.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
}, {
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/31%E9%93%9C%E8%BD%A6%E9%A9%AC/low/31.%E9%93%9C%E8%BD%A6%E9%A9%AC.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
];
\ No newline at end of file
vue.config.js
浏览文件 @ ba1b6613
......@@ -23,21 +23,23 @@ module.exports = defineConfig({
lintOnSave: false, //关闭eslint检查
devServer: {
host: "localhost",
host: "0.0.0.0",
port: "8081",
open: true,// 自动开启浏览器
hot: true,
compress: false, // 开启压缩
proxy: {
"/api": {
target: "https://www.gzswbsy.com/api",
// target: "https://www.gzswbsy.com/api",
target: "http://222.85.214.245:9602/api",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
"/files": {
target: "https://www.gzswbsy.com/files",
// target: "https://www.gzswbsy.com/files",
target: "http://222.85.214.245:9602/files",
changeOrigin: true,
pathRewrite: {
"^/files": "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论