Skip to content

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

feat:基本页面框架搭建

上级 f0a66746
隐藏空白字符变更
内嵌 并排
正在显示 包含 549 行增加 和 31 行删除
package-lock.json
浏览文件 @ 3debb48b
......@@ -8,6 +8,7 @@
"name": "exhibition_page",
"version": "0.1.0",
"dependencies": {
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
......@@ -27,6 +28,7 @@
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"echarts": "^5.3.3",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
......@@ -3140,6 +3142,11 @@
"ajv": "^6.9.1"
}
},
"node_modules/animejs": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz",
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
},
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
......@@ -4836,6 +4843,22 @@
"node": ">=6.0.0"
}
},
"node_modules/echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dev": true,
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.3.2"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
......@@ -11566,6 +11589,21 @@
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
"dev": true
},
"node_modules/zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dev": true,
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
}
},
"dependencies": {
......@@ -13935,6 +13973,11 @@
"dev": true,
"requires": {}
},
"animejs": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz",
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
},
"ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
......@@ -15298,6 +15341,24 @@
"integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
"dev": true
},
"echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dev": true,
"requires": {
"tslib": "2.3.0",
"zrender": "5.3.2"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
......@@ -20602,6 +20663,23 @@
"dev": true
}
}
},
"zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dev": true,
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true
}
}
}
}
}
package.json
浏览文件 @ 3debb48b
......@@ -10,6 +10,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
......@@ -29,6 +30,7 @@
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"echarts": "^5.3.3",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
......
src/App.vue
浏览文件 @ 3debb48b
<template>
<div id="app">
<NavBar />
<!-- <NavBar /> -->
<!-- <Footer /> -->
<router-view />
<Footer />
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: { NavBar, Footer },
};
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
// export default {
// components: { NavBar, Footer },
// };
</script>
<style lang="scss">
#app {
......
src/main.js
浏览文件 @ 3debb48b
......@@ -5,9 +5,12 @@ import store from './store/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import * as echarts from 'echarts'
Vue.config.productionTip = false
Vue.use(ElementUI);
// Vue.prototype.$echarts = echarts
new Vue({
router,
......
src/utils/common-data/guizhou.json 0 → 100644
浏览文件 @ 3debb48b
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/boutique/index.vue
浏览文件 @ 3debb48b
<template>
<div class="boutique">
<h1>精品展</h1>
</div>
<div class="boutique">
<NavBar />
<h1>精品展</h1>
<Footer />
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
name:'Boutique'
}
name: "Boutique",
components: { NavBar, Footer },
};
</script>
<style>
</style>
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ 3debb48b
<template>
<div class="display">
<NavBar />
<div class="search">
<SearchBar
:options="options"
......@@ -30,6 +31,7 @@
>
</el-pagination>
</div>
<Footer />
</div>
</template>
......@@ -38,9 +40,11 @@ import SearchBar from "@/components/SearchBar";
import ALL from "./components/All";
import Area from "./components/Area";
import ThreeDimension from "./components/ThreeDimension";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
name: "CulturalRelic",
components: { SearchBar, ALL, Area, ThreeDimension },
components: { SearchBar, ALL, Area, ThreeDimension,NavBar,Footer },
data() {
return {
buttons: [
......
src/views/display/index.vue
浏览文件 @ 3debb48b
<template>
<div class="display">
<NavBar />
<div class="search">
<SearchBar
:options="options"
......@@ -15,7 +16,7 @@
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content"/>
<DisplayCard :title="item.title" :content="item.content" />
</el-col>
</el-row>
</div>
......@@ -32,15 +33,18 @@
>
</el-pagination>
</div>
<Footer />
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import DisplayCard from "@/components/DisplayCard";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
name: "Display",
components: { SearchBar, DisplayCard },
components: { SearchBar, DisplayCard,NavBar,Footer },
data() {
return {
options: [
......
src/views/home/components/MuseumMap.vue 0 → 100644
浏览文件 @ 3debb48b
<template>
<div class="museum-map">
<div class="list">
<ul class="vertical-text">
<li v-for="(item, index) in test" :key="index" class="blue">
{{ item }}
</li>
</ul>
</div>
<div class="map" ref="map"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import guizhou from "@/utils/common-data/guizhou.json";
export default {
name: "MuseumMap",
data() {
return {
test: ["测试测试测试", "测试测试测试", "测试测试测试"],
};
},
mounted() {
this.init();
this.initAnimate();
},
methods: {
init() {
echarts.registerMap("guizhou", guizhou);
let myChart = echarts.init(this.$refs.map);
let option = {
visualMap: {
show: false,
left: "right",
min: 500000,
max: 38000000,
inRange: {
color: ["#E3F1FC", "#B4E3FA", "#62C5F6", "#2998E8"],
},
text: ["High", "Low"],
calculable: true,
},
series: [
{
name: "guizhou",
type: "map",
roam: true,
map: "guizhou", //这里是你导入echarts的json文件
layoutCenter: ["50%", "70%"],
layoutSize: "100%",
label: {
//地图默认的文本属性
show: false,
color: "#2998E8",
},
select: {
//选中的区域文本属性
label: {
color: "#2998E8",
},
itemStyle: {
color: "#3066ba",
},
},
emphasis: {
//高亮的区域文本属性
itemStyle: {
areaColor: "#3066ba",
},
label: {
show: true,
textStyle: {
color: "#2998E8",
},
},
},
zoom: 1.2,
textFixed: {
Alaska: [20, -20],
},
data: guizhou.features.map((e) => {
let num = Math.round(Math.random() * Math.random() * 100000000);
return { name: e.properties.name, value: num };
}),
},
],
};
myChart.setOption(option);
myChart.on("click", function (params) {
console.log("点击位置", params.data);
});
},
initAnimate() {
var anime = require("animejs/lib/anime");
anime({
targets: ".blue",
translateX: 270,
delay: anime.stagger(100), // 每个元素的延迟增加100毫秒。
});
},
},
};
</script>
<style lang="scss" scoped>
.museum-map {
height: 100%;
width: 100%;
display: flex;
.map {
width: 100%;
height: 100%;
}
}
.vertical-text {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
</style>
\ No newline at end of file
src/views/home/index-new.vue 0 → 100644
浏览文件 @ 3debb48b
<template>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }">
<ul id="pageUl" type="circle">
<li id="pageUlLi1" class="pageUlLi" :class="{ active: curIndex == 1 }">
&nbsp;
</li>
<li id="pageUlLi2" class="pageUlLi" :class="{ active: curIndex == 2 }">
&nbsp;
</li>
<li id="pageUlLi3" class="pageUlLi" :class="{ active: curIndex == 3 }">
&nbsp;
</li>
<li id="pageUlLi4" class="pageUlLi" :class="{ active: curIndex == 4 }">
&nbsp;
</li>
<li id="pageUlLi5" class="pageUlLi" :class="{ active: curIndex == 5 }">
&nbsp;
</li>
</ul>
<div style="background-color: #1b6d85" id="page1" class="page">
<NavBar class="navBar" />
<el-carousel height="100vh" style="width: 100%">
<el-carousel-item v-for="(img, index) in boutiqueImgs" :key="index">
<h3
class="small"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ img }}
</h3>
</el-carousel-item>
</el-carousel>
</div>
<div style="background-color: #869b94" id="page2" class="page">
<h1
style="
height: 100%;
display: flex;
justify-self: center;
align-items: center;
"
>
虚拟展厅推荐
</h1>
</div>
<div style="background-color: #f3ecef" id="page3" class="page">
布展推荐
</div>
<div style="background-color: #607271" id="page4" class="page">
文物推荐
</div>
<div style="background-color: #f3ecef" id="page5" class="page">
文博地图
</div>
<Footer />
</div>
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: { NavBar, Footer },
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,
boutiqueImgs: ["精品展图片1", "精品展图片2"],
};
},
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 > 1500) {
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;
// left: 0;
}
}
</style>
\ No newline at end of file
src/views/home/index.vue
浏览文件 @ 3debb48b
<template>
<div class="home">
<h1>首页</h1>
<div class="home">
<div class="recommend-list">
<div class="recommend-item">
<div class="recommend-item-container boutique">
<NavBar class="navBar" />
<el-carousel height="100vh" style="width: 100%">
<el-carousel-item v-for="(item,index) in [1,2,3]" :key="index">
<h3
class="small"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ item }}
</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="recommend-item-container virtural">虚拟展厅</div>
<div class="recommend-item-container display">每日推送-布展</div>
<div class="recommend-item-container culturalRelic">每日推送-文物</div>
<div class="recommend-item-container musuem-map">文博地图</div>
<!-- <MuseumMap /> -->
</div>
</div>
<Footer />
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import MuseumMap from "./components/MuseumMap.vue";
export default {
name:'Home'
}
components: { NavBar, Footer, MuseumMap },
name: "Home",
data() {
return {
dataList: [
{
id: 0,
key: "boutique",
label: "精品展推荐",
imgs: ["精品展1图片", "精品展2图片"],
color: "#869b94",
},
{
id: 2,
key: "virtual",
label: "虚拟展厅推荐",
color: "#f3ecef",
},
{
id: 3,
key: "display",
label: "布展推荐",
color: "#607271",
},
{
id: 4,
key: "culturalRelic",
label: "文物推荐",
color: "#f3ecef",
},
{
id: 5,
key: "文博地图",
label: "museum",
color: "#7c918a",
},
],
};
},
};
</script>
<style>
<style lang="scss" scoped>
.recommend-list {
display: flex;
flex-direction: column;
.recommend-item {
.recommend-item-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.boutique {
position: relative;
flex-direction: column;
.navBar {
position: absolute;
top: 0;
z-index: 999;
// left: 0;
}
}
}
}
</style>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ 3debb48b
<template>
<div class="personal">
<NavBar />
<el-tabs :tab-position="'left'" type="card">
<el-tab-pane label="我的点赞">
<Like
......@@ -27,6 +28,7 @@
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
<Footer />
</div>
</template>
......@@ -36,13 +38,16 @@ import Like from "./components/Like.vue";
import Collection from "./components/Collection.vue";
import Footprint from "./components/Collection.vue";
import Info from "./components/Info.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: {
Like,
Collection,
Footprint,
Info,
NavBar,
Footer,
},
name: "Personal",
data() {
......
src/views/virtual/index.vue
浏览文件 @ 3debb48b
<template>
<div class="virtual">
<h1>虚拟展厅</h1>
</div>
<div class="virtual">
<NavBar />
<h1>虚拟展厅</h1>
<Footer />
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
name:'Virtual'
}
name: "Virtual",
components: { NavBar, Footer },
};
</script>
<style>
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论