Skip to content

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

布展默认主题、中国风主题的适配调整

上级 98812ff0
显示空白字符变更
内嵌 并排
正在显示 包含 81 行增加 和 397 行删除
src/components/EntranceIcon/index.vue
浏览文件 @ 8e562ed8
......@@ -51,8 +51,8 @@ export default {
height: 2px;
transform: rotate(45deg);
position: absolute;
right: -3px;
top: -5px;
right: -2px;
top: -3px;
}
}
</style>
src/views/culturalRelic/index.vue
浏览文件 @ 8e562ed8
......@@ -12,7 +12,7 @@
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......@@ -23,7 +23,7 @@
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
placeholder="请选择所属类别"
filterable
@change="handleTypeChange"
clearable
......@@ -67,7 +67,7 @@
<svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon>
<div class="text">3D</div>
<div class="text">3D文物</div>
</el-col>
<!-- </el-row> -->
</div>
......@@ -148,7 +148,7 @@
<span>{{ item.deptName }}</span>
</div>
</div>
<div class="right">
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -159,7 +159,7 @@
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div>
</div> -->
</div>
</div>
</div>
......@@ -337,6 +337,10 @@ $text-indent: 16px;
height: 214px;
.item {
margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
......@@ -349,23 +353,18 @@ $text-indent: 16px;
.threeD {
display: flex;
cursor: pointer;
font-size: 18px;
font-size: 20px;
color: #666;
margin-left: 20px;
transition: all ease .5s;
.svg-icon{
transition: all ease 0.3s;
// -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
.svg-icon {
margin-right: 4px;
font-size: 20px;
font-size: 24px;
}
&:hover{
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #2069c4,
0 0 35px #2069c4,
0 0 40px #2069c4,
0 0 50px #2069c4,
0 0 75px #2069c4;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
// .box {
// width: 28px;
......@@ -393,10 +392,16 @@ $text-indent: 16px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png");
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 8e562ed8
......@@ -21,6 +21,7 @@
></el-image>
</div>
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
......@@ -31,22 +32,6 @@
animate__animated animate__fadeInLeft
"
>
<!-- <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="" srcset="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper> -->
<el-carousel>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
......@@ -219,7 +204,11 @@
</div>
<div class="unit-container">
<div
class="unit-content-menu wow animate__animated animate__fadeInLeft"
class="
unit-content-menu
wow
animate__animated animate__fadeInLeft
"
>
<!-- 只能单开 unique-opened -->
<menu-list
......@@ -229,7 +218,9 @@
style="height: 100%"
></menu-list>
</div>
<div class="unit-content wow animate__animated animate__fadeInRight">
<div
class="unit-content wow animate__animated animate__fadeInRight"
>
<div
class="text-indent unit-content_intro"
v-if="curUnit.intro"
......@@ -326,7 +317,10 @@
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
>
<img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
<img
:src="item.faceImagePressUrl || item.faceImageUrl"
alt=""
/>
<div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div>
<div class="cr-intro">{{ item.intro }}</div>
......@@ -405,6 +399,7 @@
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
......@@ -523,7 +518,7 @@ export default {
this.displayDetail.audiosVo &&
this.displayDetail.audiosVo.length > 0
) {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
......@@ -721,7 +716,12 @@ export default {
}
}
.wrapper {
width: 1200px;
// width: 1200px;
padding: 0 13%;
width: 100%;
display: flex;
justify-content: center;
.inner {
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
......@@ -784,7 +784,7 @@ export default {
.label {
display: flex;
align-items: center;
width: 120px;
width: 140px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
......@@ -838,7 +838,7 @@ export default {
}
.audio {
position: absolute;
right: -100px;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
......@@ -899,7 +899,7 @@ export default {
overflow-x: hidden;
.unit-container {
height: 100%;
// height: 100%;
margin-bottom: 40px;
display: flex;
}
......@@ -1027,6 +1027,7 @@ export default {
}
}
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
......
src/views/display/components/ChStyle-unit.vue
浏览文件 @ 8e562ed8
......@@ -163,6 +163,7 @@ export default {
}
.unit-node {
width: 1200px;
// width: calc(100vw - 26%);
height: 550px;
display: flex;
overflow: hidden;
......@@ -196,7 +197,7 @@ export default {
position: absolute;
top: 200px;
height: 70%;
padding: 0 20px;
padding: 0 80px;
}
}
}
......
src/views/display/components/ChStyle.vue
浏览文件 @ 8e562ed8
......@@ -463,7 +463,8 @@ export default {
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1200px;
// width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
}
.custom-title {
display: flex;
......@@ -546,6 +547,7 @@ export default {
filter: drop-shadow(2px 4px 6px #f8f8f8);
img {
transform: translateX(-10px);
width: 1230px;
}
}
.left-layer,
......@@ -609,7 +611,7 @@ export default {
}
}
.tools {
width: 230px;
width: 280px;
}
}
......@@ -661,7 +663,7 @@ export default {
.audio {
position: absolute;
right: -100px;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
......
src/views/display/index.vue
浏览文件 @ 8e562ed8
......@@ -8,7 +8,7 @@
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......@@ -19,7 +19,7 @@
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
placeholder="请选择所属类别"
filterable
@change="handleTypeChange"
clearable
......@@ -124,7 +124,7 @@
<span>{{ item.deptName }}</span>
</div>
</div>
<div class="right">
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -135,7 +135,7 @@
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div>
</div> -->
</div>
</div>
</div>
......@@ -320,6 +320,10 @@ $text-indent: 16px;
padding: 90px 70px 80px;
.item {
margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
......@@ -342,6 +346,10 @@ $text-indent: 16px;
font-size: 14px;
width: 156px;
height: 40px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
// height: 100%;
.svg-icon {
margin-right: 4px;
......
src/views/home/components/Virtural.vue
浏览文件 @ 8e562ed8
......@@ -109,7 +109,7 @@ $blue: #2069c4;
.intro {
font-family: "Alibaba PuHuiTi";
color: #ffffff;
margin-top: 74px;
margin-top: 110px;
.name {
margin-bottom: 27px;
font-size: 20px;
......
src/views/home/index-manual.vue deleted 100644 → 0
浏览文件 @ 98812ff0
<template>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }">
<ul
id="pageUl"
type="circle"
v-for="(item, index) in buttons"
:key="index"
>
<li :id="item" :class="{ item, active: curIndex == index + 1 }">
&nbsp;
</li>
</ul>
<div id="page1" class="page">
<!-- <NavBar :class="[curIndex != 1 ? 'navBarFixed' : 'navBar']" /> -->
<NavBar class='navBar'/>
<Boutique class="home-item" ref="Boutique" />
</div>
<div id="page2" class="page">
<Virtural class="home-item" ref="Virtural" />
</div>
<div id="page3" class="page">
<CulturalRelic class="home-item" ref="CulturalRelic" />
</div>
<div id="page4" class="page">
<Display class="home-item" ref="Display" />
</div>
<div id="page5" class="page">
<MuseumMap class="home-item" ref="MuseumMap" />
</div>
<!-- <div id="page6" class="page">
<Footer />
</div> -->
<div class="down-arrow">
<img src="@/assets/imgs/home/down.png" alt="" />
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
components: {
NavBar,
Footer,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home",
data() {
return {
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
buttons: [
"pageUlLi1",
"pageUlLi2",
"pageUlLi3",
"pageUlLi4",
"pageUlLi5",
],
navBarFixed: false,
};
},
mounted() {
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className == "page") {
this.obj[i].style.height = this.screenHeight + "px";
}
}
this.pageNum = document.querySelectorAll(".page").length;
// 浏览器兼容
if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
document.addEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
methods: {
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 1000) {
if (
delta > 0 &&
parseInt(this.main.offsetTop) >=
-(this.screenHeight * (this.pageNum - 2))
) {
// 向下滚动
this.index++;
this.toPage(this.index);
} else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
// 向上滚动
this.index--;
this.toPage(this.index);
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
}
},
// 翻页
toPage(index) {
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
}
},
},
};
</script>
<style lang="scss" scoped>
html,
body {
height: 100%;
}
body,
ul,
li,
a,
p,
div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
}
#main {
position: relative;
transition: top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
#pageUl {
position: fixed;
right: 10px;
bottom: 50%;
}
.active {
color: red;
}
#page1 {
position: relative;
flex-direction: column;
.navBar {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.25); // left: 0;
transition: all 1s ease;
}
.navBarFixed {
position: fixed;
top: 0;
z-index: 999;
background: #2069c4;
transition: all 1s ease;
}
}
.home-item {
height: 100%;
}
.down-arrow {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
animation: arrowBounce 2s infinite;
z-index: 999;
}
@keyframes arrowBounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
</style>
\ No newline at end of file
src/views/home/index-swiper.vue deleted 100644 → 0
浏览文件 @ 98812ff0
<template>
<div>
<swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-slide">
<NavBar class="NavBar"/>
<Boutique class="home-item" ref="Boutique" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<Virtural class="home-item" ref="Virtural" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<CulturalRelic class="home-item" ref="CulturalRelic" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<Display class="home-item" ref="Display" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<MuseumMap class="home-item" ref="MuseumMap" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<Footer/>
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
NavBar,
Footer,
swiper,
swiperSlide,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home",
data() {
return {
list: [1, 2, 3, 4],
swiperOption: {
notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
direction: "vertical", //垂直方向移动
grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
mousewheelControl: true, //同上
height: window.innerHeight, // 高度设置，占满设备高度
resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
// 分页器
pagination: {
el: ".swiper-pagination",
bulletClass: "my-bullet", //自定义分页器样式
bulletActiveClass: "my-bullet-active", //自定义当前选中样式
clickable: true, //点击切换轮播
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
};
</script>
<style lang="scss" scoped>
.my-bullet {
display: block;
width: 11px;
height: 11px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
margin: 10px 0;
}
.my-bullet-active {
width: 11px;
height: 25px;
background: #fff;
border-radius: 20px;
margin: 10px 0;
}
.home-item {
height: 100vh;
width: 100%;
}
.navBar {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.25); // left: 0;
transition: all 1s ease;
}
</style>
\ No newline at end of file
src/views/museum/index.vue
浏览文件 @ 8e562ed8
......@@ -9,7 +9,7 @@
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......
src/views/virtual/index.vue
浏览文件 @ 8e562ed8
......@@ -7,7 +7,7 @@
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......@@ -286,6 +286,10 @@ $text-indent: 16px;
margin-bottom: 63px;
.item {
margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
......@@ -307,6 +311,10 @@ $text-indent: 16px;
background-size: 100% 100%;
color: #444;
font-size: 14px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论