Skip to content

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

布展详情中国风主题布局

上级 1b59a67f
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 127 行增加 和 229 行删除
src/App.vue
浏览文件 @ b2d3588e
......@@ -29,7 +29,8 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.$wow.init();
let wow = this.$wow;
wow.init();
});
},
};
......
src/components/Dict/index.js deleted 100644 → 0
浏览文件 @ 1b59a67f
import {
getDictCode
} from "@/api/dict";
import {
getLiteratureList
} from '@/api/literature'
import store from "@/store";
import Vue from "vue";
class Dict {
constructor(dict) {
this.dict = dict;
}
async init(names) {
// 先判断list中的name是否存在，如果不存在，把不存在的放置在一个list中，再对list进行获取
var nonExistentNames = []
// debugger
names.forEach(name => {
if (store.getters.dicts[name]) {
Vue.set(this.dict, name, store.getters.dicts[name]);
} else {
nonExistentNames.push(name) //存入list中，单独进行处理调用
}
});
var index = nonExistentNames.indexOf('literature')
if (index != -1) {
// debugger
Vue.set(this.dict, 'literature', []);
nonExistentNames.splice(index, 1)
var params = {
limit: 100,
page: 1
}
var res = await getLiteratureList(params)
if (res.code == 0) {
var literatureList = res.data.records
Vue.set(this.dict, 'literature', literatureList);
this.dict['literature'] = Object.freeze(literatureList)
store.commit("dict/SET_DICTS", {
label: 'literature',
value: Object.freeze(literatureList),
});
}
}
if (nonExistentNames.length > 0) {
// debugger
var res = await getDictCode(nonExistentNames)
nonExistentNames.forEach(n => {
Vue.set(this.dict, n, []);
// var arr = []
var obj = {}
if (res.code == 0) {
res.data.map(item => {
if (item.dictType === n) {
obj[item.value]=item.label
}
})
this.dict[n] = Object.freeze(obj)
store.commit("dict/SET_DICTS", {
label: n,
value: Object.freeze(obj),
});
}
})
}
}
}
const install = function (Vue) {
Vue.mixin({
data() {
// 如果在调用组件处data中有定义dicts，再进行初始化dict
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
return {
dict: {}
};
} else {
return {};
}
},
created() {
// 如果在调用组件处data中有定义dicts，再进行获取dicts中定义的字典
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
new Dict(this.dict).init(this.$options.dicts);
}
},
});
};
export default {
install
};
src/main.js
浏览文件 @ b2d3588e
......@@ -9,30 +9,21 @@ import "@/assets/styles/index.scss"; //全局样式
// import * as echarts from 'echarts'
import './icons'
import dict from '@/components/Dict'
import animated from 'animate.css';
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
import {
getTotalUrl
} from '@/utils/index'
// import '@/rem'
// import '@/permission' // permission control
Vue.config.productionTip = false
Vue.use(ElementUI);
// Vue.prototype.$echarts = echarts
// 全局注册字典组件
Vue.use(dict);
// 全局注册动画效果
Vue.use(animated);
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
......@@ -41,9 +32,7 @@ Vue.prototype.$wow = new WOW({
live: true,
scrollContainer: null,
resetAnimation: true,
// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
callback: function (box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
......
src/permission.js
浏览文件 @ b2d3588e
import router from './router'
import store from './store'
import {
Message
} from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
import {
getToken
} from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'
// NProgress.configure({
// showSpinner: false
// }) // NProgress Configuration
// const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
// debugger
console.log('to',to);
console.log('from',from);
console.log(from,to);
const hasToken = getToken()
console.log('hasToken',hasToken);
if (!hasToken) {
if (to.path === '/personal') {
next({
......@@ -34,8 +19,3 @@ router.beforeEach(async (to, from, next) => {
next()
}
})
// router.afterEach(() => {
// // finish progress bar
// NProgress.done()
// })
src/views/display/Detail-old.vue 0 → 100644
浏览文件 @ b2d3588e
差异被折叠。
src/views/home/components/CulturalRelic.vue
浏览文件 @ b2d3588e
......@@ -19,14 +19,23 @@
@click.native="handleClick(i)"
>
<div class="img">
<img v-if="$getFullUrl(i.faceImagePressUrl)" :src="$getFullUrl(i.faceImagePressUrl)" />
<img v-else-if="$getFullUrl(i.faceImageUrl)" :src="$getFullUrl(i.faceImageUrl)" />
<img
v-if="$getFullUrl(i.faceImagePressUrl)"
:src="$getFullUrl(i.faceImagePressUrl)"
/>
<img
v-else-if="$getFullUrl(i.faceImageUrl)"
:src="$getFullUrl(i.faceImageUrl)"
/>
<div v-else class="no-pic">暂无图片</div>
</div>
<div class="info" v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)">
<div
class="info"
v-show="$getFullUrl(i.faceImagePressUrl || i.faceImageUrl)"
>
<div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div>
</div>
</div>
<div class="modal">{{ i.name }}</div>
</el-col>
</el-row>
......@@ -137,28 +146,23 @@ $blue: #2069c4;
overflow: hidden;
&:hover {
.img {
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;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.no-pic {
width: 100%;
......@@ -170,14 +174,6 @@ $blue: #2069c4;
color: #fff;
}
}
// .info {
// position: absolute;
// right: 20px;
// bottom: 10px;
// font-family: Lisu;
// color: #fff;
// }
.info {
position: absolute;
left: 0;
......
src/views/home/components/Display.vue
浏览文件 @ b2d3588e
......@@ -2,32 +2,52 @@
<template>
<div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div>
<div class="wrapper" v-show="currentItem">
<div class="wrapper">
<!-- <div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
> -->
<div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
>
<div
:class="['slide-item', currentIndex == index ? 'active' : '']"
v-for="(item, index) in list"
:key="index"
>
<div class="content wow animate__animated animate__fadeInLeft">
<div class="content-name">{{ currentItem.title }}</div>
<div class="content-name">{{ item.title }}</div>
<div class="content-intro">
{{ currentItem.intro ? currentItem.intro : "" }}
{{ item.intro ? item.intro : "" }}
</div>
<div class="entrance" @click="handleClick(currentItem)">
<div class="entrance" @click="handleClick(item)">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div>
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(currentItem)">
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(item)">
<img
v-if="$getFullUrl(currentItem.faceImagePressUrl) "
:src="$getFullUrl(currentItem.faceImagePressUrl)"
v-if="$getFullUrl(item.faceImagePressUrl)"
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
/>
<img v-else :src="$getFullUrl(currentItem.faceImageUrl)" alt="" />
<div class="img-name">{{ currentItem.title }}</div>
<img v-else :src="$getFullUrl(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="currentItem == item ? 'active' : ''"
:class="list[currentIndex] == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ index + 1 }}
......@@ -35,34 +55,6 @@
</ul>
</div>
</div>
<!-- <el-carousel indicator-position="none" :autoplay="false" arrow="never">
<el-carousel-item v-for="item in list" :key="item.exhibitionId">
<div class="wrapper">
<div class="content">
<div class="content-name">{{ item.title }}</div>
<div class="content-intro">
{{ item.intro ? item.intro : "" }}
</div>
</div>
<div class="img">
<img :src="item.faceImageUrl" />
<div class="img-name">{{ item.title }}</div>
</div>
<div class="pagination">
<ul>
<li
v-for="(item, index) in [1, 2, 3, 4]"
:key="index"
:class="currentPage == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ item }}
</li>
</ul>
</div>
</div>
</el-carousel-item>
</el-carousel> -->
</div>
</template>
......@@ -73,21 +65,29 @@ export default {
data() {
return {
list: [],
// currentPage: 1,
currentItem: {},
currentIndex: 0,
sliderItemWidth: 0,
};
},
mounted() {
this.loadList();
this.getSlideItemWidth();
},
methods: {
async loadList() {
let res = await getRecommendDisplay();
this.list = res.data;
this.currentItem = this.list[0];
// this.currentItem = this.list[0];
},
handleChangePage(page) {
this.currentItem = page;
let index = this.list.indexOf(page);
this.currentIndex = index;
// this.currentItem = page;
console.log(
"currentIndex * sliderItemWidth",
this.currentIndex * this.sliderItemWidth
);
},
handleClick(item) {
console.log(item);
......@@ -96,6 +96,13 @@ export default {
path: "display/" + exhibitionId,
});
},
getSlideItemWidth() {
setTimeout(() => {
let slideItem = document.getElementsByClassName("slide-item");
this.sliderItemWidth = slideItem[0].offsetWidth;
console.log(" this.sliderItemWidth", this.sliderItemWidth);
}, 500);
},
},
};
</script>
......@@ -119,14 +126,33 @@ export default {
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
flex: 1;
overflow: hidden;
.sliders {
display: flex;
min-width: 100%;
height: 100%;
// transition: all 0.5s ease-in-out;
.slide-item {
min-width: 100%;
position: relative;
display: flex;
justify-content: space-between;
height: 100%;
padding: 0 10px;
opacity: 0;
transition: all 1s ease;
.content {
width: 600px;
color: #fff;
font-family: "Alibaba PuHuiTi";
width: 600px;
height: 100%;
.content-name {
font-size: 20px;
font-weight: bold;
......@@ -147,10 +173,7 @@ export default {
}
}
.img {
position: absolute;
top: 20%;
// transform: translateY(-50%);
right: 0;
margin-top: 100px;
width: 380px;
height: 480px;
cursor: pointer;
......@@ -166,10 +189,15 @@ export default {
color: #88754d;
}
}
}
.active {
opacity: 1;
}
}
.pagination {
position: absolute;
bottom: 80px;
bottom: 60px;
right: 0;
ul {
display: flex;
......@@ -182,7 +210,9 @@ export default {
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.5s ease;
}
li:hover,
.active {
background: #2069c4;
color: #fff;
......
src/views/home/index.vue
浏览文件 @ b2d3588e
<template>
<!-- <child1 slot="skeleton" /> -->
<div class="home">
<Boutique class="home-item" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" />
......@@ -18,6 +17,7 @@ import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
name: "Home",
components: {
// NavBar,
// Footer,
......@@ -27,13 +27,6 @@ export default {
Display,
CulturalRelic,
},
name: "Home",
// mounted() {
// this.$nextTick(() => {
// this.$wow.init();
// });
// },
};
</script>
......
src/views/personal/index.vue
浏览文件 @ b2d3588e
......@@ -87,26 +87,37 @@ $blue: #2069c4;
}
}
::v-deep {
.el-tabs--left.el-tabs--card .el-tabs__item.is-active {
.el-tabs--left.el-tabs--card .el-tabs__item.is-active:not(.is-top) {
background-color: #eeeeee;
color: $blue;
font-weight: bold;
}
}
::v-deep{
.el-tabs__nav.is-top{
display: flex;
}
::v-deep .el-tabs__active-bar {
background-color: #2069c4;
}
::v-deep{
.el-tabs__item.is-top.is-active{
width: 100px;
display: flex;
justify-content: center;
}
.el-tabs__active-bar.is-top{
width: 100px !important;
::v-deep {
.el-tabs__item:hover,
.el-tabs__item.is-active {
color: #2069c4;
}
}
// ::v-deep{
// .el-tabs__nav.is-top{
// display: flex;
// }
// }
// ::v-deep{
// .el-tabs__item.is-top.is-active{
// width: 100px;
// display: flex;
// justify-content: center;
// }
// .el-tabs__active-bar.is-top{
// width: 100px !important;
// }
// }
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论