Skip to content

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

优化文博地图

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