Skip to content

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

首页优化

上级 8ea6130f
隐藏空白字符变更
内嵌 并排
正在显示 包含 482 行增加 和 154 行删除
src/assets/imgs/home-new/bg2.png 0 → 100644
浏览文件 @ 87408b4e
差异被折叠。
src/assets/imgs/home-new/map-bg.png 0 → 100644
浏览文件 @ 87408b4e
差异被折叠。
src/components/EntranceIcon/index.vue
浏览文件 @ 87408b4e
<!-- --> <!-- -->
<template> <template>
<div class="entrance"> <div class="entrance">
<div class="entrance-text" :style="{ color }">点击进入</div> <div class="entrance-text" :style="{ color }">{{text}}</div>
<div class="entrance-icon" :style="{ background: color }"> <div class="entrance-icon" :style="{ background: color }">
<span class="entrance-arrow" :style="{ background: color }"></span> <span class="entrance-arrow" :style="{ background: color }"></span>
</div> </div>
...@@ -13,6 +13,10 @@ export default { ...@@ -13,6 +13,10 @@ export default {
name: "EntranceIcon", name: "EntranceIcon",
props: { props: {
color: String, color: String,
text:{
default:'点击进入',
type:String
}
}, },
data() { data() {
return {}; return {};
......
src/icons/svg/mouse.svg 0 → 100644
浏览文件 @ 87408b4e
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671423654219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8456" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M864 352h-64a288 288 0 0 0-576 0H160a352 352 0 0 1 704 0zM512 1024A352 352 0 0 1 160 672v-256h64v256a288 288 0 0 0 576 0v-256h64v256a352 352 0 0 1-352 352z" fill="#ffffff" p-id="8457"></path><path d="M480 192h64v256h-64z" fill="#ffffff" p-id="8458"></path></svg>
\ No newline at end of file
src/views/home/components/CulturalRelic.vue
浏览文件 @ 87408b4e
...@@ -2,13 +2,32 @@ ...@@ -2,13 +2,32 @@
<template> <template>
<div class="home-cr"> <div class="home-cr">
<div class="title wow animate__animated animate__fadeInUp"> <div class="title wow animate__animated animate__fadeInUp">
<div class="ch">每日推送</div> <!-- <div class="ch">每日推送</div>
<div class="en">Daily Exhibition Push</div> <div class="en">Daily Exhibition Push</div> -->
<div class="title-img">
<img src="@/assets/imgs/home-new/daily.png" alt="" />
</div>
<div class="all" @click="handleToAll">
<img src="@/assets/imgs/home-new/all.png" alt="" />
</div>
</div> </div>
<div class="text wow animate__animated animate__fadeInUp">文物</div> <div class="text wow animate__animated animate__fadeIn">文物</div>
<div class="list wow animate__animated animate__zoomIn"> <div class="list wow animate__animated animate__zoomIn">
<div
class="list-item"
v-for="(v, index) in list"
:key="index"
@click="handleClick(v)"
>
<div class="img">
<img :src="$getFullUrl(v.faceImageMiddleUrl || v.faceImageUrl)" />
<div class="title">
{{ v.name }}
</div>
</div>
</div>
<!-- <div class="list" v-if="list.length>0"> --> <!-- <div class="list" v-if="list.length>0"> -->
<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 <el-col
...@@ -32,14 +51,10 @@ ...@@ -32,14 +51,10 @@
<div class="sourceWay">{{ i.sourceWayLabel }}</div> <div class="sourceWay">{{ i.sourceWayLabel }}</div>
</div> </div>
</div> </div>
<!-- <div class="modal">{{ i.name }}</div> -->
<!-- <div class="pattern">
<img src="@/assets/imgs/home/pattern.png" alt="">
</div> -->
</el-col> </el-col>
</el-row> </el-row>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -70,32 +85,40 @@ export default { ...@@ -70,32 +85,40 @@ export default {
methods: { methods: {
async loadList() { async loadList() {
let res = await getRecommendCr(); let res = await getRecommendCr();
if (res.data.length > 8) { this.list = res.data.splice(0, 6); //
this.length = console.log(this.list);
res.data.length % 8 == 0 // if (res.data.length > 8) {
? res.data.length / 8 // this.length =
: Math.floor(res.data.length / 8) + 1; // res.data.length % 8 == 0
for (let i = 0; i < this.length; i++) { // ? res.data.length / 8
let data = []; // : Math.floor(res.data.length / 8) + 1;
if (i == length - 1) { // for (let i = 0; i < this.length; i++) {
data = res.data.slice(8 * i, res.data.length); // let data = [];
} else { // if (i == length - 1) {
data = res.data.slice(8 * i, (i + 1) * 8); // data = res.data.slice(8 * i, res.data.length);
} // } else {
// data = res.data.slice(8 * i, (i + 1) * 8);
// }
this.$set(this.list, i, data); // this.$set(this.list, i, data);
} // }
} else { // } else {
this.list = [res.data]; // this.list = [res.data];
} // }
}, },
handleClick(item) { handleClick(item) {
const { crId } = item; const { crId } = item;
// const newPage = this.$router.resolve({ const newPage = this.$router.resolve({
// path: `culturalRelic/${crId}`, path: `culturalRelic/${crId}`,
// }); });
// window.open(newPage.href, "_blank"); window.open(newPage.href, "_blank");
this.$router.push(`culturalRelic/${crId}`) // this.$router.push(`culturalRelic/${crId}`);
},
handleToAll() {
const newPage = this.$router.resolve({
path: `culturalRelic`,
});
window.open(newPage.href, "_blank");
}, },
}, },
}; };
...@@ -104,97 +127,199 @@ export default { ...@@ -104,97 +127,199 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $themeColor;
.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;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.title { height: 1100px;
overflow-x: hidden;
& > .title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 60px 0 0 0; padding: 60px 0 0 0;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
.ch { .ch {
font-size: 30px; color: #2d4bb5;
font-weight: bold;
color: #fff;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 32px;
font-weight: bold;
} }
.en { .en {
font-size: 14px; width: 393px;
color: #fff; height: 35px;
margin-bottom: 80px; font-size: 36px;
font-family: PingFang SC;
font-weight: bold;
color: #2d4ab5;
line-height: 34px;
margin-bottom: 40px;
}
.title-img {
height: 100px;
margin-bottom: 40px;
img {
width: 100%;
height: 100%;
}
}
.all {
// margin-top: 65px;
height: 29px;
cursor: pointer;
img {
height: 100%;
}
} }
} }
.text { .text {
color: #fff; color: #2d4ab5;
margin-bottom: 36px; margin-bottom: 36px;
margin-top: 40px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
font-size: 26px; font-size: 32px;
font-weight: bold;
} }
.list { .list {
width: 100%; width: 100%;
padding: 0 13%; // padding: 0 6%;
height: 492px; height: 492px;
} display: flex;
.container {
// height: 20%;
margin-bottom: 40px;
cursor: pointer;
position: relative; position: relative;
height: 200px; .list-item {
overflow: hidden; .img {
width: 280px;
height: 280px;
background-color: #a5b8d4;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all ease 0.5s;
position: relative;
cursor: pointer;
img {
// width: 100%;
height: 100%;
object-fit: contain;
}
&:hover {
background-color: transparent;
}
& > .title {
background-image: url("@/assets/imgs/home-new/title-bg.png");
width: 56px;
color: #fff;
font-size: 18px;
writing-mode: vertical-lr;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
position: absolute;
}
}
&:hover { &:nth-child(1),
img { &:nth-child(2),
transform: scale(1.1); &:nth-child(3) {
position: absolute;
left: 0;
.title {
right: -80px;
}
} }
.info { &:nth-child(1) {
transform: translateY(0); top: 0;
} }
} &:nth-child(2) {
.img { top: calc(200px);
width: 100%; left: 450px;
height: 100%;
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain;
transition: all 0.5s ease;
} }
.no-pic { &:nth-child(3) {
width: 100%; top: calc(200px * 2 - 50px);
height: 100%; }
background-color: rgba($color: #000000, $alpha: 0.1); &:nth-child(4),
display: flex; &:nth-child(5),
justify-content: center; &:nth-child(6) {
align-items: center; position: absolute;
color: #fff; right: 0;
.title {
left: -80px;
}
}
&:nth-child(4) {
top: 0;
}
&:nth-child(5) {
top: calc(240px);
right: 450px;
}
&:nth-child(6) {
top: calc(240px * 2 - 50px);
} }
}
.info {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 16px;
// background-color: rgba($color: #000000, $alpha: 0.2);
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.2)
);
color: #fff;
transform: translateY(100px);
text-align: right;
transition: all ease 0.5s;
font-family: Lisu;
} }
} }
// .container {
// // height: 20%;
// margin-bottom: 40px;
// cursor: pointer;
// position: relative;
// height: 200px;
// overflow: hidden;
// &:hover {
// img {
// transform: scale(1.1);
// }
// .info {
// transform: translateY(0);
// }
// }
// .img {
// width: 100%;
// height: 100%;
// overflow: hidden;
// position: relative;
// img {
// width: 100%;
// height: 100%;
// object-fit: contain;
// transition: all 0.5s ease;
// }
// .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 {
// position: absolute;
// left: 0;
// bottom: 0;
// width: 100%;
// padding: 16px;
// // background-color: rgba($color: #000000, $alpha: 0.2);
// background-image: linear-gradient(
// to top,
// rgba(0, 0, 0, 0.5),
// rgba(0, 0, 0, 0.2)
// );
// color: #fff;
// transform: translateY(100px);
// text-align: right;
// transition: all ease 0.5s;
// font-family: Lisu;
// }
// }
} }
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 492px; height: 492px;
......
src/views/home/components/Display.vue
浏览文件 @ 87408b4e
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
<template> <template>
<div class="home-display"> <div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div> <div class="title wow animate__animated animate__fadeInUp">展览</div>
<EntranceIcon
color="#fff"
text="查看更多"
@click.native="handleClickAll"
class="dianji wow animate__animated animate__fadeInUp"
/>
<div class="wrapper wow animate__animated animate__fadeInUp"> <div class="wrapper wow animate__animated animate__fadeInUp">
<!-- <div <!-- <div
class="sliders" class="sliders"
...@@ -9,29 +15,44 @@ ...@@ -9,29 +15,44 @@
transform: `translateX(-${currentIndex * sliderItemWidth}px)`, transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}" }"
> --> > -->
<div class="sliders" :style="{ <div
transform: `translateX(-${currentIndex * sliderItemWidth}px)`, class="sliders"
}" v-if="list.length > 0"> :style="{
<div :class="['slide-item', currentIndex == index ? 'active' : '']" v-for="(item, index) in list" :key="index"> transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
v-if="list.length > 0"
>
<div
:class="['slide-item', currentIndex == index ? 'active' : '']"
v-for="(item, index) in list"
:key="index"
>
<div class="content"> <div class="content">
<div class="content-name">{{ item.title }}</div> <div class="content-name">{{ item.title }}</div>
<div class="content-intro" v-html="item.intro || ''"></div> <div class="content-intro" v-html="item.intro || ''"></div>
<EntranceIcon color="#fff" @click.native="handleClick(item)" /> <div class="dianji" @click="handleClick(item)">
<span class="txt">点击体验</span>
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
<!-- <EntranceIcon color="#fff" @click.native="handleClick(item)" /> -->
</div> </div>
<div class="img" @click="handleClick(item)"> <div class="img" @click="handleClick(item)">
<img :src="$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)" alt="" /> <img
:src="$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)"
alt=""
/>
<div class="img-name">{{ item.title }}</div> <div class="img-name">{{ item.title }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="pagination wow animate__animated animate__fadeInUp"> <!-- <div class="pagination wow animate__animated animate__fadeInUp">
<ul> <ul>
<li v-for="(item, index) in list" :key="index" :class="list[currentIndex] == item ? 'active' : ''" <li v-for="(item, index) in list" :key="index" :class="list[currentIndex] == item ? 'active' : ''"
@click="handleChangePage(item)"> @click="handleChangePage(item)">
{{ index + 1 }} {{ index + 1 }}
</li> </li>
</ul> </ul>
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -67,11 +88,11 @@ export default { ...@@ -67,11 +88,11 @@ export default {
}, },
handleClick(item) { handleClick(item) {
const { exhibitionId, themeType } = item; const { exhibitionId, themeType } = item;
// const newPage = this.$router.resolve({ const newPage = this.$router.resolve({
// path: `display/${themeType}/${exhibitionId}`, path: `display/${themeType}/${exhibitionId}`,
// }); });
// window.open(newPage.href, "_blank"); window.open(newPage.href, "_blank");
this.$router.push(`display/${themeType}/${exhibitionId}`); // this.$router.push(`display/${themeType}/${exhibitionId}`);
}, },
getSlideItemWidth() { getSlideItemWidth() {
setTimeout(() => { setTimeout(() => {
...@@ -81,13 +102,20 @@ export default { ...@@ -81,13 +102,20 @@ export default {
} }
}, 500); }, 500);
}, },
handleClickAll() {
const newPage = this.$router.resolve({
path: `display`,
});
window.open(newPage.href, "_blank");
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home-display { .home-display {
background-image: url("@/assets/imgs/home/cr-bg.png"); // background-image: url("@/assets/imgs/home/cr-bg.png");
background-size: cover; background-size: cover;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -98,10 +126,15 @@ export default { ...@@ -98,10 +126,15 @@ export default {
.title { .title {
color: #fff; color: #fff;
margin-top: 70px; margin-top: 70px;
margin-bottom: 90px; // margin-bottom: 90px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
flex-basis: auto; flex-basis: auto;
font-size: 26px; font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
}
.dianji {
margin-bottom: 50px;
} }
.wrapper { .wrapper {
...@@ -135,28 +168,44 @@ export default { ...@@ -135,28 +168,44 @@ export default {
height: 100%; height: 100%;
.content-name { .content-name {
font-size: 20px; font-size: 24px;
font-weight: bold; font-weight: bold;
margin-bottom: 40px; margin-bottom: 40px;
} }
.content-intro { .content-intro {
font-size: 14px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 1.5;
margin-bottom: 40px; margin-bottom: 40px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
overflow: hidden; overflow: hidden;
// font-size: 28px;
// font-family: PingFang SC;
// font-weight: bold;
// color: #ffffff;
// line-height: 48px;
}
.dianji {
font-size: 32px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
cursor: pointer;
.txt {
margin-right: 10px;
}
} }
} }
.img { .img {
margin-top: 240px; // margin-top: 240px;
width: 380px; width: 580px;
height: 480px; height: 640px;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
height: 250px; height: 250px;
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 87408b4e
<template> <template>
<div class="home-museum-map"> <div class="home-museum-map">
<div class="title wow animate__animated animate__fadeInUp"> <div class="title wow animate__animated animate__fadeInUp">
<div class="ch">文博地图</div> <!-- <div class="ch">文博地图</div>
<div class="en">Museum Map</div> <div class="en">Museum Map</div> -->
<div class="title-img">
<img src="@/assets/imgs/home-new/map-title.png" alt="" />
</div>
<div class="all" @click="handleToAll">
<img src="@/assets/imgs/home-new/all.png" alt="" />
</div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div class="content wow animate__animated animate__fadeIn"> <div class="content wow animate__animated animate__fadeIn">
...@@ -12,17 +18,20 @@ ...@@ -12,17 +18,20 @@
<!-- <div class="bg"> <!-- <div class="bg">
<img :src="curMuseum.faceImagePressUrl" alt="" /> <img :src="curMuseum.faceImagePressUrl" alt="" />
</div> --> </div> -->
<div class="intro"> <div class="intro wow animate__animated animate__fadeInLeft">
时代变迁，沧海桑田。 <p>
悠久历史、民族风情、红色文化、古生物化石…一座座博物馆记录了贵州的历史、 时代变迁，沧海桑田。
文化、 悠久历史、民族风情、红色文化、古生物化石…一座座博物馆记录了贵州的历史、
习俗，也为山地公园省增添了更多的韵味。让我们以博物馆的视角走近贵州，带大家享受一场多彩的博物盛筵。 文化、
各个历史阶段鲜活的文化遗存和原生文化形态，把贵州点缀成了“文化千岛”，多彩的文化造就了多彩的贵州。六十余家博物馆记载的历史故事和黔山秀水相互交融，让你在凝视和聆听之间，走进多彩贵州！ 习俗，也为山地公园省增添了更多的韵味。让我们以博物馆的视角走近贵州，带大家享受一场多彩的博物盛筵。
</p>
<p>
各个历史阶段鲜活的文化遗存和原生文化形态，把贵州点缀成了“文化千岛”，多彩的文化造就了多彩的贵州。六十余家博物馆记载的历史故事和黔山秀水相互交融，让你在凝视和聆听之间，走进多彩贵州！
</p>
</div> </div>
</div> </div>
<div class="map wow animate__animated animate__fadeInRight"> <div class="map wow animate__animated animate__fadeIn">
<div id="map"></div> <div id="map"></div>
<transition <transition
...@@ -34,9 +43,23 @@ ...@@ -34,9 +43,23 @@
</div> </div>
</transition> </transition>
</div> </div>
<div class="total"> <div class="total wow animate__animated animate__fadeInRight">
目前平台已收录贵州省内博物馆60家、展览15个、文物600件、文创产品20套。 <div class="title">
<img src="@/assets/imgs/home-new/map-right-title.png" alt="" />
</div> </div>
<p>
<span class="label"> 博物馆<span class="num">61</span>家</span>
</p>
<p>
<span class="label"> 展览<span class="num">14</span>个</span>
</p>
<p>
<span class="label"> 文物<span class="num">738</span>件</span>
</p>
<p>
<span class="label"> 文创产品<span class="num">16</span>套</span>
</p>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -138,7 +161,7 @@ export default { ...@@ -138,7 +161,7 @@ export default {
return { return {
type: "image", type: "image",
style: { style: {
image: require("@/assets/imgs/home/locate.png"), image: require("@/assets/imgs/home-new/ms-icon.png"),
x: api.coord([ x: api.coord([
v.data[params.dataIndex].value[0], v.data[params.dataIndex].value[0],
v.data[params.dataIndex].value[1], v.data[params.dataIndex].value[1],
...@@ -310,9 +333,16 @@ export default { ...@@ -310,9 +333,16 @@ export default {
// path: `museum/${id}`, // path: `museum/${id}`,
// }); // });
// window.open(newPage.href, "_blank"); // window.open(newPage.href, "_blank");
this.$router.push({ // this.$router.push({
path: `museum/${id}`, // path: `museum/${id}`,
// });
},
handleToAll() {
const newPage = this.$router.resolve({
path: `museum`,
}); });
window.open(newPage.href, "_blank");
}, },
/* init() { /* init() {
echarts.registerMap("guizhou", guizhou); echarts.registerMap("guizhou", guizhou);
...@@ -355,11 +385,14 @@ export default { ...@@ -355,11 +385,14 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
padding: 70px 13% 114px 13%; padding: 144px 6% 114px 6%;
overflow: hidden; overflow: hidden;
height: 1296px;
background-image: url("@/assets/imgs/home-new/map-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.title { .title {
color: #333; color: #fff;
// margin-bottom: 43px; // margin-bottom: 43px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -368,13 +401,30 @@ export default { ...@@ -368,13 +401,30 @@ export default {
.ch { .ch {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
color: #333333; color: #fff;
margin-bottom: 12px; margin-bottom: 12px;
} }
.en { .en {
font-size: 14px; font-size: 36px;
color: #333333; color: #fff;
}
.title-img {
height: 100px;
// height: 136px;
img {
width: 100%;
height: 100%;
}
}
.all {
margin-top: 65px;
height: 29px;
cursor: pointer;
img {
height: 100%;
}
} }
} }
...@@ -383,7 +433,7 @@ export default { ...@@ -383,7 +433,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
// padding-top: 100px;
.content { .content {
width: 600px; width: 600px;
margin-top: 100px; margin-top: 100px;
...@@ -424,14 +474,16 @@ export default { ...@@ -424,14 +474,16 @@ export default {
} }
.intro { .intro {
font-size: 14px; font-size: 20px;
font-weight: 300; font-weight: 300;
margin-bottom: 85px; margin-bottom: 85px;
overflow: hidden; overflow: hidden;
display: -webkit-box; color: #255780;
-webkit-box-orient: vertical; width: 400px;
-webkit-line-clamp: 6; // display: -webkit-box;
overflow: hidden; // -webkit-box-orient: vertical;
// -webkit-line-clamp: 6;
// overflow: hidden;
} }
.entrance { .entrance {
...@@ -479,6 +531,23 @@ export default { ...@@ -479,6 +531,23 @@ export default {
} }
} }
} }
.total {
margin-top: 400px;
.title {
height: 43px;
}
& > p {
color: #fff;
.label {
font-size: 32px;
}
.num {
font-weight: bold;
font-size: 60px;
}
}
}
} }
} }
</style> </style>
src/views/home/components/banner.vue
浏览文件 @ 87408b4e
<template> <template>
<div class="boutique"> <div class="boutique">
<div class="banner"> <div class="banner">
<img src="@/assets/imgs/banner.jpg" alt="" /> <div class="title wow animate__animated animate__fadeInDown">
<img src="@/assets/imgs/home-new/title.png" alt="" />
</div>
<div class="xiala">
<svg-icon icon-class="mouse"></svg-icon>
下拉查看更多
<!-- <img src="@/assets/imgs/home-new/xiala.png" alt=""> -->
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -11,13 +18,54 @@ ...@@ -11,13 +18,54 @@
.banner { .banner {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: absolute; position: relative;
top: -$nav-height; top: -$nav-height;
left: 0; left: 0;
> img { background-image: url("@/assets/imgs/home-new/banner-bg.png");
width: 100%; background-size: 100% 100%;
height: 100%; display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.title {
height: 253px;
img {
height: 100%;
// width: 100%;
}
}
.xiala {
// justify-self: flex-end;
// padding-top: 50%;
align-self: flex-end;
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
animation: arrowTop 0.5s ease-out 0.5s infinite alternate;
font-size: 28px;
color: #fff;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
.svg-icon{
margin-bottom: 16px;
font-size: 48px;
}
} }
} }
} }
@keyframes arrowTop {
from {
transform: translate(-50%, -8px);
opacity: 1;
}
to {
transform: translateY(-50%, 0px);
opacity: 0.8;
}
}
</style> </style>
src/views/home/index.vue
浏览文件 @ 87408b4e
...@@ -3,17 +3,25 @@ ...@@ -3,17 +3,25 @@
<!-- <div class="home-item"> <!-- <div class="home-item">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" /> <img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
</div> --> </div> -->
<Banner class="home-item"/> <Banner class="home-item" />
<MuseumMap class="home-item" ref="MuseumMap" /> <div class="part2">
<MuseumMap ref="MuseumMap" />
<div class="push">
<CulturalRelic ref="CulturalRelic" />
<Display ref="Display" />
</div>
<!-- <div class="bg2">
<img src="@/assets/imgs/home-new/bg2.png" alt="">
</div> -->
</div>
<!-- <Boutique class="home-item" ref="Boutique" /> --> <!-- <Boutique class="home-item" ref="Boutique" /> -->
<!-- <Virtural class="home-item" ref="Virtural" /> --> <!-- <Virtural class="home-item" ref="Virtural" /> -->
<CulturalRelic class="home-item" ref="CulturalRelic" />
<Display class="home-item" ref="Display" />
</div> </div>
</template> </template>
<script> <script>
import Banner from './components/banner.vue' import Banner from "./components/banner.vue";
import Boutique from "./components/Boutique.vue"; import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue"; import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue"; import Virtural from "./components/Virtural.vue";
...@@ -27,7 +35,7 @@ export default { ...@@ -27,7 +35,7 @@ export default {
Virtural, Virtural,
Display, Display,
CulturalRelic, CulturalRelic,
Banner Banner,
}, },
}; };
</script> </script>
...@@ -39,9 +47,31 @@ export default { ...@@ -39,9 +47,31 @@ export default {
background-color: #fff; background-color: #fff;
.home-item { .home-item {
height: calc(100vh - 100px); height: calc(100vh - 120px);
width: 100%;
position: relative;
}
.part2 {
width: 100%; width: 100%;
height: 3000px;
background-image: url("@/assets/imgs/home-new/all-bg.png");
background-size: 100% 100%;
position: relative; position: relative;
.push {
width: 100%;
height: 1881px;
background-size: 100% 100%;
background-image: url("@/assets/imgs/home-new/bg2.png");
}
// .bg2{
// position: absolute;
// bottom: 0;
// height: 1881px;
// img{
// width: 100%;
// height: 100%;
// }
// }
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论