Skip to content

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

首页文物列表展示修复

上级 a55db14b
隐藏空白字符变更
内嵌 并排
正在显示 包含 164 行增加 和 68 行删除
.env.prod
浏览文件 @ 88e66175
...@@ -3,5 +3,6 @@ ...@@ -3,5 +3,6 @@
ENV = 'production' ENV = 'production'
# base api # base api
VUE_APP_BASE_API = http://222.85.214.245:9062/api #VUE_APP_BASE_API = http://222.85.214.245:9062/api
VUE_APP_BASE_API = '/api'
\ No newline at end of file
.env.staging
浏览文件 @ 88e66175
...@@ -3,5 +3,6 @@ ...@@ -3,5 +3,6 @@
ENV = 'staging' ENV = 'staging'
# base api # base api
VUE_APP_BASE_API = 'http://222.85.214.245:9062/api' # VUE_APP_BASE_API = 'http://222.85.214.245:9062/api'
VUE_APP_BASE_API = '/api'
src/router/index.js
浏览文件 @ 88e66175
...@@ -11,7 +11,7 @@ const routes = [ ...@@ -11,7 +11,7 @@ const routes = [
name: 'home', name: 'home',
component: Home, component: Home,
meta:{ meta:{
keepAlive:true keepAlive:false
} }
}, },
// 精品展 // 精品展
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 88e66175
...@@ -5,52 +5,41 @@ ...@@ -5,52 +5,41 @@
<div class="ch">每日推送</div> <div class="ch">每日推送</div>
<div class="en">Daily Exhibition Push</div> <div class="en">Daily Exhibition Push</div>
</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 wow animate__animated animate__zoomIn">
<!-- 1231 <!-- <div class="list" v-if="list.length>0"> -->
<el-carousel>
<el-carousel-item v-for="(item,index) in length" :key="index">
{{item}}
</el-carousel-item>
</el-carousel> -->
<el-carousel indicator-position="outside" :autoplay="false" arrow="never"> <el-carousel indicator-position="outside" :autoplay="false" arrow="never">
<el-carousel-item v-for="(item, index) in list" :key="index"> <el-carousel-item v-for="(item, index) in list" :key="index">
<el-row :gutter="14"> <el-row :gutter="14">
<el-col :span="6" v-for="i in item" :key="i.crId" class="container" > <el-col
<img :span="6"
v-if="i.faceImagePressUrl" v-for="i in item"
:src="i.faceImagePressUrl" :key="i.crId"
alt="" class="container"
/> @click.native="handleClick(i)"
<img v-else :src="index.faceImageUrl" alt="" /> >
<div class="info" v-show='i.faceImageUrl'> <div class="img">
<img v-if="i.faceImagePressUrl" :src="i.faceImagePressUrl" />
<img v-else-if="i.faceImageUrl" :src="i.faceImageUrl" />
<div v-else class="no-pic">暂无图片</div>
</div>
<div class="info" v-show="i.faceImagePressUrl || i.faceImageUrl">
<div class="name">{{ i.name }}</div> <div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div> <div class="sourceWay">{{ i.sourceWay }}</div>
</div> </div>
<div class="modal">{{ i.name }}</div>
</el-col> </el-col>
</el-row> </el-row>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<!-- <el-row v-if="list.length < 9 && list.length > 0" :gutter="14">
<el-col
:span="24 / list.length"
class="container"
v-for="item in list"
:key="item.crId"
>
<el-image :src="item.faceImageUrl" style="width: 100%; height: 100%" />
</el-col>
</el-row> -->
</div> </div>
</template> </template>
<script> <script>
import { getRecommendCr } from "@/api/culturalRelic"; import { getRecommendCr } from "@/api/culturalRelic";
export default { export default {
name:'CulturalRelic', name: "CulturalRelic",
data() { data() {
return { return {
list: [], list: [],
...@@ -60,16 +49,16 @@ export default { ...@@ -60,16 +49,16 @@ export default {
created() { created() {
this.loadList(); this.loadList();
}, },
// watch: { watch: {
// list: { list: {
// handler: function (value) { handler: function (value) {
// console.log(value); console.log(111, value);
// this.list = value; this.list = value;
// }, },
// immediate: true, immediate: true,
// deep: true, deep: true,
// }, },
// }, },
methods: { methods: {
async loadList() { async loadList() {
let res = await getRecommendCr(); let res = await getRecommendCr();
...@@ -85,18 +74,25 @@ export default { ...@@ -85,18 +74,25 @@ export default {
} else { } else {
data = res.data.slice(8 * i, (i + 1) * 8); data = res.data.slice(8 * i, (i + 1) * 8);
} }
this.$set(this.list, i, data); this.$set(this.list, i, data);
} }
this.$set(this, "list", this.list);
} else { } else {
this.list = res.data; this.list = [res.data];
} }
}, },
handleClick(item) {
const { crId } = item;
this.$router.push({
path: "culturalRelic/" + crId,
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4;
.home-cr { .home-cr {
background-image: url("@/assets/imgs/home/display-bg.png"); background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover; background-size: cover;
...@@ -133,21 +129,67 @@ export default { ...@@ -133,21 +129,67 @@ export default {
} }
.container { .container {
// width: 339px; // height: 20%;
height: 20%;
margin-bottom: 40px; margin-bottom: 40px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
img { height: 200px;
overflow: hidden;
&:hover {
.img {
transform: scale(1.1);
}
// .info {
// // color: #2069c4;
// // z-index: 10;
// display: none;
// }
.info {
// display: block;
transform: translateY(0);
}
}
.img {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all 0.5s ease;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.no-pic {
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.1);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
} }
.info{
// .info {
// position: absolute;
// right: 20px;
// bottom: 10px;
// font-family: Lisu;
// color: #fff;
// }
.info {
position: absolute; position: absolute;
right: 20px; left: 0;
bottom: 10px; bottom: 0;
font-family: Lisu; width: 100%;
padding: 16px;
background-color: rgba($color: #000000, $alpha: 0.1);
color: #fff; color: #fff;
transform: translateY(100px);
text-align: right;
transition: all ease 0.5s;
font-family: Lisu;
} }
} }
} }
......
src/views/home/components/Display.vue
浏览文件 @ 88e66175
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
<div class="content-intro"> <div class="content-intro">
{{ currentItem.intro ? currentItem.intro : "" }} {{ currentItem.intro ? currentItem.intro : "" }}
</div> </div>
<div class="entrance" @click="handleClick(currentItem)">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div> </div>
<div class="img wow animate__animated animate__fadeInRight"> <div class="img wow animate__animated animate__fadeInRight" @click="handleClick(currentItem)">
<img <img
v-if="currentItem.faceImagePressUrl" v-if="currentItem.faceImagePressUrl"
:src="currentItem.faceImagePressUrl" :src="currentItem.faceImagePressUrl"
...@@ -85,6 +89,13 @@ export default { ...@@ -85,6 +89,13 @@ export default {
handleChangePage(page) { handleChangePage(page) {
this.currentItem = page; this.currentItem = page;
}, },
handleClick(item) {
console.log(item);
const { exhibitionId } = item;
this.$router.push({
path: "display/" + exhibitionId,
});
},
}, },
}; };
</script> </script>
...@@ -114,21 +125,25 @@ export default { ...@@ -114,21 +125,25 @@ export default {
flex: 1; flex: 1;
.content { .content {
width: 600px; width: 600px;
color: #fff;
font-family: "Alibaba PuHuiTi";
.content-name { .content-name {
font-size: 20px; font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #ffffff;
margin-bottom: 40px; margin-bottom: 40px;
font-family: "Alibaba PuHuiTi";
} }
.content-intro { .content-intro {
font-size: 14px; font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #ffffff;
line-height: 40px; line-height: 40px;
font-family: "Alibaba PuHuiTi"; margin-bottom: 40px;
}
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text {
margin-right: 12px;
}
} }
} }
.img { .img {
...@@ -138,6 +153,7 @@ export default { ...@@ -138,6 +153,7 @@ export default {
right: 0; right: 0;
width: 380px; width: 380px;
height: 480px; height: 480px;
cursor: pointer;
img { img {
width: 100%; width: 100%;
} }
......
src/views/home/components/Virtural.vue
浏览文件 @ 88e66175
...@@ -2,13 +2,19 @@ ...@@ -2,13 +2,19 @@
<template> <template>
<div class="home-virtural"> <div class="home-virtural">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="title wow animate__animated animate__fadeInUp" data-wow-offset="200" > <div
class="title wow animate__animated animate__fadeInUp"
data-wow-offset="200"
>
<div class="ch">虚拟展厅</div> <div class="ch">虚拟展厅</div>
<div class="en">Virtual Exhibition Hall</div> <div class="en">Virtual Exhibition Hall</div>
</div> </div>
<el-row class="content" :gutter="60"> <el-row class="content" :gutter="60">
<el-col :span="6"> <el-col :span="6">
<div class="intro wow animate__animated animate__fadeInLeft" v-if="list.length > 0" > <div
class="intro wow animate__animated animate__fadeInLeft"
v-if="list.length > 0"
>
<div class="name">{{ list[0].name }}</div> <div class="name">{{ list[0].name }}</div>
<div class="deptName">{{ list[0].deptName }}</div> <div class="deptName">{{ list[0].deptName }}</div>
<div class="intro-content"> <div class="intro-content">
...@@ -27,16 +33,17 @@ ...@@ -27,16 +33,17 @@
:span="8" :span="8"
v-for="(item, index) in list" v-for="(item, index) in list"
:key="index" :key="index"
class="item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
> >
<img <div class="item">
v-if="item.faceImagePressUrl" <img
:src="item.faceImagePressUrl" v-if="item.faceImagePressUrl"
alt="" :src="item.faceImagePressUrl"
/> alt=""
<img v-else :src="item.faceImageUrl" alt="" /> />
<div class="cover"></div> <img v-else :src="item.faceImageUrl" alt="" />
<div class="name">{{ item.name }}</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -76,6 +83,7 @@ export default { ...@@ -76,6 +83,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4;
.home-virtural { .home-virtural {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -138,10 +146,36 @@ export default { ...@@ -138,10 +146,36 @@ export default {
.item { .item {
margin-bottom: 5px; margin-bottom: 5px;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden;
&:hover {
.name {
transform: translateY(0);
}
img {
transform: scale(1.1);
}
}
img { img {
width: 100%; width: 100%;
height: 25vh; height: 25vh;
max-height: 225px; max-height: 225px;
transition: all 0.5s ease;
}
.name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($color: #000000, $alpha: 0.2);
color: #fff;
// height: 80px;
padding: 16px;
transform: translateY(100px);
width: 100%;
transition:all 0.5s ease;
} }
} }
} }
......
vue.config.js
浏览文件 @ 88e66175
...@@ -48,8 +48,9 @@ module.exports = defineConfig({ ...@@ -48,8 +48,9 @@ module.exports = defineConfig({
hot: true, hot: true,
proxy: { proxy: {
'/api': { '/api': {
target: 'http://192.168.1.230:9562/api', // target: 'http://192.168.1.230:9562/api',
// target: 'http://222.85.214.245:9062/api', // target: 'http://222.85.214.245:9062/api',
target:'http://192.168.1.230:9566/api',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论