Skip to content

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

修改图片路径

上级 88e66175
显示空白字符变更
内嵌 并排
正在显示 包含 125 行增加 和 144 行删除
src/App.vue
浏览文件 @ 1b59a67f
......@@ -3,7 +3,7 @@
<NavBar />
<!-- 开发阶段暂停使用keepAlive -->
<!-- <router-view :key="$route.fullPath" v-if="isRouterAlive" /> -->
<router-view ></router-view>
<router-view></router-view>
<!-- <keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
......@@ -27,8 +27,12 @@ export default {
// this.$nextTick(() => (this.isRouterAlive = true));
// },
},
mounted() {
this.$nextTick(() => {
this.$wow.init();
});
},
};
</script>
<style lang="scss">
</style>
src/components/NavBar/index.vue
浏览文件 @ 1b59a67f
......@@ -4,8 +4,8 @@
<div class="logo-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" />
</div>
<div class="right wow animate__animated animate__fadeInUp">
<div class="tabs">
<div class="right ">
<div class="tabs wow animate__animated animate__fadeInUp">
<div
class="tab-item"
v-for="(item, index) in pages"
......@@ -74,9 +74,6 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<!--
-->
</div>
</div>
</div>
......@@ -84,7 +81,6 @@
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "NavBar",
......@@ -174,26 +170,27 @@ export default {
align-items: center;
justify-content: space-between;
padding: 0 70px 0 100px;
.logo-container{
overflow: hidden;
.logo-container {
width: 380px;
height: 74px;
}
.title {
// transform: translateX(-1000px);
// animation: fadeUp 0.5s ease;
}
.right {
display: flex;
height: 100%;
align-items: center;
.tabs {
display: flex;
margin-right: 100px;
min-width: 512px;
// height: 100%;
// transform: translateY(200px);
// animation: fadeUp ease 1s forwards;
.tab-item {
margin-right: 70px;
color: #fff;
// height: 100%;
display: flex;
align-items: center;
font-family: "Alibaba-PuHuiTi";
......@@ -209,7 +206,23 @@ export default {
}
}
}
@keyframes fadeUp {
from {
transform: translateY(200);
}
to {
transform: translateY(0);
}
}
@keyframes fadeLeft {
from {
transform: translateX(-1000);
}
to {
transform: translateX(0);
}
}
::v-deep .tools {
.el-button {
background: transparent;
......
src/main.js
浏览文件 @ 1b59a67f
......@@ -10,13 +10,12 @@ import "@/assets/styles/index.scss"; //全局样式
import './icons'
import dict from '@/components/Dict'
import VueLazyComponent from '@xunlei/vue-lazy-component'
import animated from 'animate.css';
import {
getTotalUrl
} from '@/utils/index'
// import '@/rem'
// 全局混入
// import { common } from '@/mixins'
// import '@/permission' // permission control
Vue.config.productionTip = false
......@@ -26,13 +25,8 @@ Vue.use(ElementUI);
// 全局注册字典组件
Vue.use(dict);
// 全局注册组件懒加载方案
Vue.use(VueLazyComponent)
// 全局注册动画效果
Vue.use(animated);
// // 全局混入浏览器缩放适配组件
// Vue.mixin(common)
// 滚动动画 wow.js
......@@ -42,9 +36,11 @@ import {
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 150, // default
offset: 0, // default
mobile: true, // default
live: false,
live: true,
scrollContainer: null,
resetAnimation: true,
// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
......@@ -53,7 +49,7 @@ Vue.prototype.$wow = new WOW({
}
})
Vue.prototype.$getFullUrl = getTotalUrl
new Vue({
router,
store,
......
src/utils/index.js
浏览文件 @ 1b59a67f
......@@ -4,7 +4,7 @@
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
export function debounce (func, wait, immediate = true) {
export function debounce(func, wait, immediate = true) {
let timeout
return function () {
if (timeout) clearTimeout(timeout)
......@@ -20,5 +20,22 @@
}, wait)
}
}
}
// 获取完整的url，根据环境进行配置
export function getTotalUrl(url) {
if (url) {
let fullUrl = ''
let urlArr = url.split('files')
// if (process.env.NODE_ENV == 'development') {
// fullUrl = url
// } else {
// fullUrl = '/files' + urlArr[1]
// }
fullUrl = '/files' + urlArr[1]
return fullUrl
} else {
return ''
}
}
src/views/culturalRelic/Detail.vue
浏览文件 @ 1b59a67f
......@@ -31,7 +31,7 @@
>
<el-image
class="el-image-container"
:src="item.url"
:src="$getFullUrl(item.url)"
fit="contain"
></el-image>
</el-carousel-item>
......@@ -43,7 +43,7 @@
<el-col class="relic-info" :span="8">
<div class="info-title">
<div
class="flex-center"
class="title-container"
>
<h3>
{{ CRDetail.name }}
......@@ -58,7 +58,7 @@
</div>
<AudioPlayer
:url="CRDetail.audiosVo[0].url"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
/>
......@@ -145,7 +145,7 @@
:key="index"
@click="handleToDetail(item.crId)"
>
<img :src="item.faceImageUrl" width="100%" :alt="item.title" />
<img :src="$getFullUrl(item.faceImageUrl)" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.name }}</h4>
......@@ -172,7 +172,7 @@
>
<div class="video-container">
<div class="video-box">
<Video :url="item.url" />
<Video :url="$getFullUrl(item.url)" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
......@@ -221,6 +221,7 @@ export default {
slideImageWidth: "",
imgViewerVisible: false,
relateRelics: [],
imgList:[]
};
},
mounted() {
......@@ -309,7 +310,7 @@ export default {
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = this.CRDetail.imagesVo.map((item) => item.url);
this.imgList = this.CRDetail.imagesVo.map((item) => this.$getFullUrl(item.url));
},
handleToDetail(crId) {
console.log(crId);
......@@ -383,6 +384,11 @@ $label: #9f9c9a;
// align-items: center;
flex-direction: column;
margin-bottom: 40px;
.title-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.play {
margin-left: 10px;
font-size: 32px;
......
src/views/culturalRelic/index.vue
浏览文件 @ 1b59a67f
......@@ -69,12 +69,12 @@
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
v-if="$getFullUrl(item.faceImagePressUrl)"
>
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
:src="$getFullUrl(item.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
width="100%"
class="img"
lazy
......
src/views/display/Detail.vue
浏览文件 @ 1b59a67f
......@@ -31,7 +31,7 @@
>
<el-image
style="width: 100%; height: 100%"
:src="item.url"
:src="$getFullUrl(item.url)"
fit="contain"
></el-image>
</el-carousel-item>
......@@ -59,7 +59,7 @@
</div>
<AudioPlayer
:url="displayDetail.audiosVo[0].url"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
......@@ -152,7 +152,7 @@
:key="item.euId"
class="margin-bottom-32"
>
<img :src="item.url" alt="" srcset="" width="100%" />
<img :src="$getFullUrl(item.url)" alt="" srcset="" width="100%" />
<div class="desc flex-center">
{{ item.name }}
</div>
......@@ -169,7 +169,7 @@
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="item.url" />
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
......@@ -192,7 +192,7 @@
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<Card :title="item.name" :url="item.faceImageUrl"
<Card :title="item.name" :url="$getFullUrl(item.faceImageUrl)"
/></el-col>
</el-row>
</div>
......@@ -208,7 +208,7 @@
>
<div class="video-container">
<div class="video-box">
<Video :url="item.url" />
<Video :url="$getFullUrl(item.url)" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
......@@ -360,7 +360,7 @@ export default {
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = this.displayDetail.imagesVo.map((item) => item.url);
this.imgList = this.displayDetail.imagesVo.map((item) => this.$getFullUrl(item.url));
},
handleToDetail(exhibitionId) {
console.log(crId);
......
src/views/display/index.vue
浏览文件 @ 1b59a67f
......@@ -64,12 +64,12 @@
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
v-if="$getFullUrl(item.faceImagePressUrl)"
>
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
:src="$getFullUrl(item.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
width="100%"
class="img"
lazy
......
src/views/home/components/Boutique.vue
浏览文件 @ 1b59a67f
<template>
<div class="boutique">
<el-carousel class="slider" autoplay arrow="nerver">
<el-carousel-item>
<div>
<img src="@/assets/imgs/boutique/1.jpg" width="100%" />
</div>
</el-carousel-item>
<!-- <el-carousel-item
v-for="(item, index) in ['精品展1', '精品展2', '精品展3']"
:key="index"
>
<h3
class="small"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ item }}
</h3>
</el-carousel-item> -->
</el-carousel>
</div>
</template>
<script>
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 1b59a67f
......@@ -5,7 +5,7 @@
<div class="ch">每日推送</div>
<div class="en">Daily Exhibition Push</div>
</div>
<!-- <div class="text wow animate__animated animate__fadeInUp">文物</div> -->
<div class="text wow animate__animated animate__fadeInUp">文物</div>
<div class="list wow animate__animated animate__zoomIn">
<!-- <div class="list" v-if="list.length>0"> -->
<el-carousel indicator-position="outside" :autoplay="false" arrow="never">
......@@ -19,11 +19,11 @@
@click.native="handleClick(i)"
>
<div class="img">
<img v-if="i.faceImagePressUrl" :src="i.faceImagePressUrl" />
<img v-else-if="i.faceImageUrl" :src="i.faceImageUrl" />
<img v-if="$getFullUrl(i.faceImagePressUrl)" :src="$getFullUrl(i.faceImagePressUrl)" />
<img v-else-if="$getFullUrl(i.faceImageUrl)" :src="$getFullUrl(i.faceImageUrl)" />
<div v-else class="no-pic">暂无图片</div>
</div>
<div class="info" v-show="i.faceImagePressUrl || i.faceImageUrl">
<div class="info" v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)">
<div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div>
</div>
......@@ -38,6 +38,7 @@
<script>
import { getRecommendCr } from "@/api/culturalRelic";
export default {
name: "CulturalRelic",
data() {
......@@ -52,7 +53,6 @@ export default {
watch: {
list: {
handler: function (value) {
console.log(111, value);
this.list = value;
},
immediate: true,
......
src/views/home/components/Display.vue
浏览文件 @ 1b59a67f
......@@ -15,11 +15,11 @@
</div>
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(currentItem)">
<img
v-if="currentItem.faceImagePressUrl"
:src="currentItem.faceImagePressUrl"
v-if="$getFullUrl(currentItem.faceImagePressUrl) "
:src="$getFullUrl(currentItem.faceImagePressUrl)"
alt=""
/>
<img v-else :src="currentItem.faceImageUrl" alt="" />
<img v-else :src="$getFullUrl(currentItem.faceImageUrl)" alt="" />
<div class="img-name">{{ currentItem.title }}</div>
</div>
<div class="pagination wow animate__animated animate__fadeInUp">
......
src/views/home/components/Virtural.vue
浏览文件 @ 1b59a67f
......@@ -37,11 +37,11 @@
>
<div class="item">
<img
v-if="item.faceImagePressUrl"
:src="item.faceImagePressUrl"
v-if="$getFullUrl(item.faceImagePressUrl)"
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
/>
<img v-else :src="item.faceImageUrl" alt="" />
<img v-else :src="$getFullUrl(item.faceImageUrl)" alt="" />
<div class="name">{{ item.name }}</div>
</div>
</el-col>
......@@ -63,9 +63,6 @@ export default {
};
},
mounted() {
this.$nextTick(() => {
this.$wow.init();
});
this.loadData();
},
methods: {
......
src/views/home/index.vue
浏览文件 @ 1b59a67f
<template>
<!-- <child1 slot="skeleton" /> -->
<div class="home">
<Boutique class="home-item wow animate__animated animate__fadeIn" ref="Boutique" />
<Boutique class="home-item" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" />
<CulturalRelic class="home-item" ref="CulturalRelic" />
<Display class="home-item" ref="Display" />
<MuseumMap class="home-item" ref="MuseumMap" />
<!-- <vue-lazy-component>
<Boutique class="home-item wow" ref="Boutique" />
</vue-lazy-component>
<vue-lazy-component>
<Virtural class="home-item" ref="Virtural" />
</vue-lazy-component>
<vue-lazy-component>
<CulturalRelic class="home-item" ref="CulturalRelic" />
</vue-lazy-component>
<vue-lazy-component>
<Display class="home-item" ref="Display" />
</vue-lazy-component>
<vue-lazy-component>
<MuseumMap class="home-item" ref="MuseumMap" />
</vue-lazy-component> -->
</div>
</template>
......@@ -44,43 +28,12 @@ export default {
CulturalRelic,
},
name: "Home",
data() {
return {
boutiqueShow: true,
virtualShow: true,
crShow: true,
displayShow: true,
mapShow: true,
currentScroll: "",
};
},
mounted() {
// window.addEventListener("scroll", this.handleScrollbox, true);
this.$nextTick(() => {
this.$wow.init();
});
},
methods: {
// handleScrollbox() {
// this.currentScroll = window.pageYOffset; //表示当前滚动的位置
// if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
// //当前滚动位置到达testref的时候，显示div（100作为调整用）
// this.testShow = true;
// }
// if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
// this.testShow2 = true;
// }
// if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
// this.testShow3 = true;
// }
// if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
// this.testShow4 = true;
// }
// },
// mounted() {
// this.$nextTick(() => {
// this.$wow.init();
// });
// },
// beforeDestroy() {
// window.removeEventListener("scroll", this.handleScrollbox, true);
},
};
</script>
......
src/views/museum/Detail.vue
浏览文件 @ 1b59a67f
......@@ -22,7 +22,7 @@
<el-col class="cr-images" :span="18">
<el-image
style="width: 100%; height: 600px"
:src="museumDetail.faceImageUrl"
:src="$getFullUrl(museumDetail.faceImageUrl)"
fit="contain"
></el-image>
<div class="enlarge" @click="handelPreviewImages">
......@@ -95,7 +95,7 @@ import SearchBar from "@/components/SearchBar";
import CustomTitle from "@/components/CustomTitle";
// import ReaderOperations from "@/components/ReaderOperations";
// import QRCode from "qrcodejs2";
import { getMSDetailById, } from "@/api/org";
import { getMSDetailById } from "@/api/org";
export default {
components: {
SearchBar,
......@@ -130,7 +130,7 @@ export default {
async loadDetail() {
let id = this.$route.params.id;
if (id) {
let res = await getMSDetailById( id );
let res = await getMSDetailById(id);
if (res.code == 0) {
this.museumDetail = res.data;
}
......@@ -147,7 +147,7 @@ export default {
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = [this.museumDetail.faceImageUrl];
this.imgList = [this.$getFullUrl(this.museumDetail.faceImageUrl)];
},
handleToDetail(crId) {
console.log(crId);
......
src/views/museum/index.vue
浏览文件 @ 1b59a67f
......@@ -47,12 +47,12 @@
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
v-if="$getFullUrl(item.faceImagePressUrl)"
>
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
:src="$getFullUrl(item.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
width="100%"
class="img"
lazy
......@@ -125,7 +125,7 @@ export default {
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionCode: [],
regionTree: [],
};
},
......@@ -158,7 +158,7 @@ export default {
page: this.list.current,
limit: this.list.size,
name: this.keyword,
regionCode: this.regionCode[this.regionCode.length-1],
regionCode: this.regionCode[this.regionCode.length - 1],
};
let res = await getMuseumListPage(params);
if (res.code == 0) {
......@@ -177,12 +177,14 @@ export default {
this.loadData();
},
handleClick(item) {
window.open(item.url,'_blank')
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleClick(item) {
this.$router.push({
path: "museum/" + item.id,
});
},
handleTypeChange(value) {
this.type = value;
......
src/views/virtual/index.vue
浏览文件 @ 1b59a67f
......@@ -47,12 +47,12 @@
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
v-if="$getFullUrl(item.faceImagePressUrl)"
>
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
:src="$getFullUrl(item.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
width="100%"
class="img"
lazy
......
vue.config.js
浏览文件 @ 1b59a67f
......@@ -55,6 +55,13 @@ module.exports = defineConfig({
pathRewrite: {
'^/api': ''
}
},
'/files':{
target:'http://192.168.1.230:9563/files',
changeOrigin: true,
pathRewrite: {
'^/files': ''
}
}
}
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论