Skip to content

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

优化文博地图

上级 2370e050
隐藏空白字符变更
内嵌 并排
正在显示 包含 106 行增加 和 98 行删除
src/App.vue
浏览文件 @ 508cd824
...@@ -25,10 +25,10 @@ export default { ...@@ -25,10 +25,10 @@ export default {
}, },
mounted() { mounted() {
// 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据 // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
window.onbeforeunload = function (e) { // window.onbeforeunload = function (e) {
var storage = window.localStorage; // var storage = window.localStorage;
storage.clear() // storage.clear()
} // }
} }
}; };
</script> </script>
......
src/assets/imgs/home/locate.png
查看替换文件 @ 2370e050 浏览文件 @ 508cd824
src/assets/imgs/home/locate.png

889 Bytes | W: | H:

src/assets/imgs/home/locate.png

1.0 KB | W: | H:

src/assets/imgs/home/locate.png
src/assets/imgs/home/locate.png
src/assets/imgs/home/locate.png
src/assets/imgs/home/locate.png
  • 2-up
  • Swipe
  • Onion skin
src/views/boutique/components/YLGDYW.vue
浏览文件 @ 508cd824
<template> <template>
<div class="ylg"> <div class="ylg">
<div class="face-img">
</div>
<div class="intro"></div>
<div class="units"></div>
<div class="conclusion"></div>
<div class="crs"></div>
</div> </div>
</template> </template>
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 508cd824
...@@ -32,7 +32,10 @@ ...@@ -32,7 +32,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="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>
......
src/views/home/components/Display.vue
浏览文件 @ 508cd824
...@@ -9,40 +9,25 @@ ...@@ -9,40 +9,25 @@
transform: `translateX(-${currentIndex * sliderItemWidth}px)`, transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}" }"
> --> > -->
<div <div class="sliders" :style="{
class="sliders" transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
:style="{ }" v-if="list.length > 0">
transform: `translateX(-${currentIndex * sliderItemWidth}px)`, <div :class="['slide-item', currentIndex == index ? 'active' : '']" v-for="(item, index) in list" :key="index">
}"
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)" /> <EntranceIcon color="#fff" @click.native="handleClick(item)" />
</div> </div>
<div class="img" @click="handleClick(item)"> <div class="img" @click="handleClick(item)">
<img <img :src="$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)" alt="" />
: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 <li v-for="(item, index) in list" :key="index" :class="list[currentIndex] == item ? 'active' : ''"
v-for="(item, index) in list" @click="handleChangePage(item)">
:key="index"
:class="list[currentIndex] == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ index + 1 }} {{ index + 1 }}
</li> </li>
</ul> </ul>
...@@ -109,6 +94,7 @@ export default { ...@@ -109,6 +94,7 @@ export default {
align-items: center; align-items: center;
position: relative; position: relative;
padding: 0 13%; padding: 0 13%;
.title { .title {
color: #fff; color: #fff;
margin-top: 70px; margin-top: 70px;
...@@ -126,11 +112,13 @@ export default { ...@@ -126,11 +112,13 @@ export default {
position: relative; position: relative;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.sliders { .sliders {
display: flex; display: flex;
min-width: 100%; min-width: 100%;
height: 100%; height: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
.slide-item { .slide-item {
min-width: 100%; min-width: 100%;
position: relative; position: relative;
...@@ -145,18 +133,26 @@ export default { ...@@ -145,18 +133,26 @@ export default {
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
width: 600px; width: 600px;
height: 100%; height: 100%;
.content-name { .content-name {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin-bottom: 40px; margin-bottom: 40px;
} }
.content-intro { .content-intro {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 40px;
margin-bottom: 40px; margin-bottom: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
} }
} }
.img { .img {
margin-top: 240px; margin-top: 240px;
width: 380px; width: 380px;
...@@ -164,6 +160,7 @@ export default { ...@@ -164,6 +160,7 @@ export default {
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
height: 250px; height: 250px;
&:hover { &:hover {
box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.3);
} }
...@@ -173,10 +170,12 @@ export default { ...@@ -173,10 +170,12 @@ export default {
height: 100%; height: 100%;
transition: all ease 0.3s; transition: all ease 0.3s;
object-fit: cover; object-fit: cover;
&:hover { &:hover {
scale: 1.1; scale: 1.1;
} }
} }
.img-name { .img-name {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -193,8 +192,10 @@ export default { ...@@ -193,8 +192,10 @@ export default {
position: absolute; position: absolute;
bottom: 60px; bottom: 60px;
right: 0; right: 0;
ul { ul {
display: flex; display: flex;
li { li {
width: 22px; width: 22px;
height: 22px; height: 22px;
...@@ -205,11 +206,13 @@ export default { ...@@ -205,11 +206,13 @@ export default {
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.3);
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
li:hover, li:hover,
.active { .active {
background: #2069c4; background: #2069c4;
...@@ -219,17 +222,21 @@ export default { ...@@ -219,17 +222,21 @@ export default {
} }
} }
} }
::v-deep .el-carousel { ::v-deep .el-carousel {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 100%; height: 100%;
} }
::v-deep .el-carousel-item { ::v-deep .el-carousel-item {
height: 100%; height: 100%;
position: relative; position: relative;
} }
::v-deep .el-carousel--horizontal { ::v-deep .el-carousel--horizontal {
overflow: hidden; overflow: hidden;
} }
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 508cd824
...@@ -8,24 +8,18 @@ ...@@ -8,24 +8,18 @@
<div class="content wow animate__animated animate__fadeIn"> <div class="content wow animate__animated animate__fadeIn">
<div class="name">{{ curMuseum.name }}</div> <div class="name">{{ curMuseum.name }}</div>
<div class="intro" v-html="curMuseum.intro"></div> <div class="intro" v-html="curMuseum.intro"></div>
<!-- <div <EntranceIcon color="#333" @click.native="handleClick(curMuseum)" />
class="entrance" <div class="bg">
@click="handleClick(curMuseum)" <!-- <div class="modal"></div> -->
v-show="curMuseum.name" <img :src="curMuseum.faceImagePressUrl" alt="">
> </div>
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance-black.png" alt="" />
</div> -->
<EntranceIcon color="#000" @click.native="handleClick(curMuseum)" />
</div> </div>
<div class="map wow animate__animated animate__fadeInRight"> <div class="map wow animate__animated animate__fadeInRight">
<div id="map"></div> <div id="map"></div>
<transition <transition enter-active-class="animate__animated animate__fadeInLeftBig"
enter-active-class="animate__animated animate__fadeInLeftBig" leave-active-class="animate__animated animate__fadeOutLeftBig">
leave-active-class="animate__animated animate__fadeOutLeftBig"
>
<div class="chart-refresh" v-if="regionName !== 'guizhou'"> <div class="chart-refresh" v-if="regionName !== 'guizhou'">
<i class="el-icon-refresh-left" @click="initChart()"></i> <i class="el-icon-refresh-left" @click="initChart()"></i>
</div> </div>
...@@ -141,6 +135,7 @@ export default { ...@@ -141,6 +135,7 @@ export default {
v.data[params.dataIndex].value[0], v.data[params.dataIndex].value[0],
v.data[params.dataIndex].value[1], v.data[params.dataIndex].value[1],
])[1], ])[1],
width: 20
}, },
}; };
}, },
...@@ -192,66 +187,19 @@ export default { ...@@ -192,66 +187,19 @@ export default {
map: name, // 引入地图 省份或者 国家 map: name, // 引入地图 省份或者 国家
layoutCenter: ["66%", "50%"], //设置后left/right/top/bottom等属性无效 layoutCenter: ["66%", "50%"], //设置后left/right/top/bottom等属性无效
layoutSize: "45%", layoutSize: "45%",
zoom: 2, zoom: 2,
// regions:[
// //对不同的区块进行着色
// {
// name: "贵阳市",
// itemStyle: {
// normal: {
// areaColor: "#5CD89E",
// },
// emphasis: {
// areaColor: "#5CD89E",
// },
// },
// },
// ],
// label: {
// normal: {
// show: true,
// textStyle: {
// color: "#fff",
// },
// },
// emphasis: {
// textStyle: {
// color: "#fff",
// },
// },
// },
// itemStyle: {
// normal: {
// areaColor: "#013C62",
// shadowColor: "#182f68",
// shadowOffsetX: 0,
// shadowOffsetY: 25,
// borderColor: "#2ab8ff",
// borderWidth: 1.5,
// areaColor: "#12235c",
// },
// emphasis: {
// areaColor: "$themeColor",
// borderWidth: 0,
// color: "green",
// },
// },
label: { label: {
normal: { normal: {
//静态的时候展示样式 //静态的时候展示样式
show: true, //是否显示地图省份得名称 show: true, //是否显示地图省份得名称
textStyle: { textStyle: {
color: "#ddd", color: "#333",
fontSize: 10, fontSize: 10,
fontFamily: "Arial", fontFamily: "Arial",
}, },
}, },
emphasis: { emphasis: {
// 高亮状态下的样式 // 高亮状态下的样式
//动态展示的样式
color: "#fff", color: "#fff",
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
...@@ -265,7 +213,7 @@ export default { ...@@ -265,7 +213,7 @@ export default {
normal: { normal: {
borderColor: "#fff", // 边框颜色 borderColor: "#fff", // 边框颜色
// areaColor: "#2759af", // 区域颜色 // areaColor: "#2759af", // 区域颜色
areaColor: "rgba(32, 105, 196, .8)", areaColor: "rgba(32, 105, 196, .4)",
// areaColor:'#294046', // areaColor:'#294046',
color: "#ff5555", color: "#ff5555",
// shadowBlur: 10, // 图形阴影的模糊大小 // shadowBlur: 10, // 图形阴影的模糊大小
...@@ -274,6 +222,7 @@ export default { ...@@ -274,6 +222,7 @@ export default {
emphasis: { emphasis: {
// areaColor: "#7b39e2", // areaColor: "#7b39e2",
areaColor: "#2759af", areaColor: "#2759af",
// areaColor: "rgba(32, 105, 196, .4)",
// areaColor:'#5e5314', // areaColor:'#5e5314',
color: "#fff", color: "#fff",
shadowColor: "#182f68", shadowColor: "#182f68",
...@@ -294,12 +243,16 @@ export default { ...@@ -294,12 +243,16 @@ export default {
}, },
bindEvent2Chart(chart = this.myChart) { bindEvent2Chart(chart = this.myChart) {
let that = this; let that = this;
chart.on("click", (params) => { chart.on("click", (params) => {
// debugger
let type = params.componentType; let type = params.componentType;
if (type === "geo") { if (type === "geo") {
/* 加载下一级地图 */ /* 加载下一级地图 */
let regionName = params.name; let regionName = params.name;
if (!echarts.getMap(regionName)) { if (!echarts.getMap(regionName)) {
return; return;
} }
...@@ -374,57 +327,94 @@ export default { ...@@ -374,57 +327,94 @@ export default {
position: relative; position: relative;
padding: 70px 13% 114px 13%; padding: 70px 13% 114px 13%;
overflow: hidden; overflow: hidden;
.title { .title {
color: #333; color: #333;
// margin-bottom: 43px; // margin-bottom: 43px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.ch { .ch {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
margin-bottom: 12px; margin-bottom: 12px;
} }
.en { .en {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
.content { .content {
width: 500px; width: 600px;
margin-top: 100px; margin-top: 100px;
color: #333333; color: #333;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
height: 50vh;
position: relative;
padding: 40px;
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
img{
width: 100%;
height: 100%;
object-fit: cover;
filter: opacity(0.3);
}
.modal {
position: absolute;
left: 0;
width: 100%;
height: 100%;
// background-color:rgba(#2069c4,0.8);
background-color: rgba(0,0,0,0.7);
}
}
.name { .name {
font-size: 20px; font-size: 24px;
font-weight: 400; font-weight: 400;
margin-bottom: 48px; margin-bottom: 48px;
font-weight: bold; font-weight: bold;
} }
.intro { .intro {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
margin-bottom: 85px; margin-bottom: 85px;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 20;
text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
} }
.entrance { .entrance {
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-content: flex-end; align-content: flex-end;
.entrance-text { .entrance-text {
margin-right: 12px; margin-right: 12px;
} }
img { img {
transform: rotateX(180deg); transform: rotateX(180deg);
} }
...@@ -436,7 +426,7 @@ export default { ...@@ -436,7 +426,7 @@ export default {
height: calc(100vh * 2 / 3); height: calc(100vh * 2 / 3);
position: relative; position: relative;
> #map { >#map {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
...@@ -447,10 +437,12 @@ export default { ...@@ -447,10 +437,12 @@ export default {
right: 0; right: 0;
font-size: 18px; font-size: 18px;
color: #666; color: #666;
> i {
>i {
transform: rotate(0deg); transform: rotate(0deg);
transform-origin: center; transform-origin: center;
transition: transform 0.5s ease-in; transition: transform 0.5s ease-in;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
transform: rotate(-180deg); transform: rotate(-180deg);
......
src/views/virtual/index.vue
浏览文件 @ 508cd824
<template> <template>
<div class="display"> <div class="display">
<ListBanner title="虚拟展厅" /> <ListBanner title="虚拟展厅" unit="个" :num="list.total"/>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div class="search wow animate__animated animate__fadeIn"> <div class="search wow animate__animated animate__fadeIn">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论