Skip to content

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

首页文物列表展示修复

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