Skip to content

E
exhibition_page
提交 039f5f8d authored 作者: longfei's avatar longfei
浏览文件
操作

布展和文物展页面内容实现

上级 756e3f8a
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 639 行增加 和 116 行删除
package.json
浏览文件 @ 039f5f8d
......@@ -40,8 +40,8 @@
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
"plugin:vue/essential"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
......
src/App.vue
浏览文件 @ 039f5f8d
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
<NavBar />
<router-view />
<Footer />
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: { NavBar, Footer },
};
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
html,
body {
margin: 0;
padding: 0;
background: #f7f7f7;
}
</style>
src/components/CustomTitle/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="custom-title">
{{ text }}
</div>
</template>
<script>
export default {
name: "CustomTitle",
props: {
text: {
type: String,
default: "标题",
},
},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.custom-title {
width: 100%;
padding: 8px;
font-size: 18px;
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
margin-bottom: 32px;
}
</style>
src/components/Footer/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="footer">
<span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span>
</div>
</template>
<script>
export default {
name: "Footer",
};
</script>
<style lang="scss" scoped>
.footer{
display: flex;
height: 100px;
padding: 0 24px;
justify-content: center;
align-items: center;
span{
margin-right: 16px;
}
}
</style>
src/components/HelloWorld.vue deleted 100644 → 0
浏览文件 @ 756e3f8a
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/NavBar/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="nav">
<div class="title">贵州省精品展览展示平台</div>
<div class="tabs" v-for="(item, index) in pages" :key="index">
<router-link :to="item.path">{{ item.name }}</router-link>
</div>
<div class="operation">
<span class="operation-item">登录</span>|
<router-link to="/personal" class="operation-item">个人中心</router-link>|
<span class="operation-item">退出</span>
</div>
</div>
</template>
<script>
export default {
name: "NavBar",
data() {
return {
pages: [
{
name: "首页",
path: "/",
},
{
name: "精品展",
path: "/boutique",
},
{
name: "虚拟展厅",
path: "/virtual",
},
{
name: "布展",
path: "/display",
},
{
name: "文物展",
path: "/culturalRelic",
},
],
};
},
};
</script>
<style lang="scss" scoped>
a{
color: #000;
text-decoration: none;
}
.nav{
display: flex;
height: 120px;
align-items: center;
justify-content: space-between;
// padding: 0 16%;
margin: auto;
width: 1200px;
.title{
font-size: 30px;
font-weight: bold;
}
.tabs{
display: flex;
margin-right: 5px;
}
.operation{
.operation-item{
margin-right: 8px;
cursor: pointer;
color: #000;
}
}
}
</style>
\ No newline at end of file
src/components/SearchBar/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="search-bar">
<el-select v-model="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
v-model="searchValue"
placeholder="请输入关键词"
class="center"
></el-input>
<el-button style="width:300px" round type="primary">检索</el-button>
</div>
</template>
<script>
export default {
name: "SearchBar",
props: {
options: {
type: Array,
default: () => [],
},
selectValue: {
type: String,
default: "",
},
keyword: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
select() {
return this.selectValue;
},
searchValue() {
return this.keyword;
},
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.search-bar {
width: 100%;
display: flex;
.center {
margin: 0 16px;
}
}
</style>
src/router/index.js
浏览文件 @ 039f5f8d
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Home from '../views/home'
Vue.use(VueRouter)
const routes = [
// 首页
{
path: '/',
name: 'home',
component: HomeView
component: Home
},
// 精品展
{
path: '/about',
path: '/boutique',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
component: () => import('@/views/boutique')
},
// 虚拟展厅
{
path: '/virtual',
name: 'virtual',
component: () => import('@/views/virtual')
},
// 布展
{
path: '/display',
name: 'display',
component: () => import('@/views/display')
},
// 布展详情页
{
path: '/display/:id',
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue')
},
// 文物展
{
path: '/culturalRelic',
name: 'culturalRelic',
component: () => import('@/views/culturalRelic')
},
// 文物详情页
{
path: '/culturalRelic/:id',
name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue')
},
// 个人中心
{
path: '/personal',
name: 'personal',
component: () => import('@/views/personal')
},
]
const router = new VueRouter({
......
src/views/AboutView.vue deleted 100644 → 0
浏览文件 @ 756e3f8a
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/HomeView.vue deleted 100644 → 0
浏览文件 @ 756e3f8a
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
src/views/boutique/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="boutique">
<h1>精品展</h1>
</div>
</template>
<script>
export default {
name:'Boutique'
}
</script>
<style>
</style>
\ No newline at end of file
src/views/culturalRelic/Detail.vue 0 → 100644
浏览文件 @ 039f5f8d
差异被折叠。
src/views/culturalRelic/components/All.vue 0 → 100644
浏览文件 @ 039f5f8d
差异被折叠。
src/views/culturalRelic/components/Area.vue 0 → 100644
浏览文件 @ 039f5f8d
差异被折叠。
src/views/culturalRelic/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="display">
<div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
<div class="types">
<el-button v-for="(item, index) in buttons" :key="index" type="text" @click.native="handleClickType(item.value)">{{
item.label
}}</el-button>
</div>
</div>
<ALL v-if="currentType === 'all'" @handleClick="handleClickCard" />
<Area v-if="currentType === 'area'" @handleClick="handleClickCard" />
<ThreeDimension
v-if="currentType === '3d'"
@handleClick="handleClickCard"
/>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import ALL from "./components/All";
import Area from "./components/Area";
import ThreeDimension from "./components/ThreeDimension";
export default {
name: "CulturalRelic",
components: { SearchBar, ALL, Area, ThreeDimension },
data() {
return {
buttons: [
{
label: "所有",
value: "all",
},
{
label: "区域",
value: "area",
},
{
label: "3D",
value: "3d",
},
],
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
size: 12,
current: 1,
total: 1000,
currentType: "all",
};
},
methods: {
handleSizeChange(value) {
console.log("handleSizeChange", value);
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
},
handleClickType(type) {
console.log("type", type);
this.currentType = type;
},
handleClickCard(value) {
console.log("接受到value", value);
this.$router.push({
path: "culturalRelic/1",
});
},
},
};
</script>
<style lang="scss" scoped>
$text-indent: 16px;
.display {
margin: auto;
width: 1200px;
.search {
// padding: 0 24%;
display: flex;
justify-content: space-between;
margin-bottom: 32px;
.types {
width: 160px;
margin-left: 16px;
}
}
.pagination {
margin-top: 24px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/display/Detail.vue 0 → 100644
浏览文件 @ 039f5f8d
差异被折叠。
src/views/display/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="display">
<div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div>
<div class="display-group">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<div class="display-item">
<img src="@/assets/imgs/display1.png" width="100%" alt="" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-content">
{{ item.content }}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
export default {
name: "Display",
components: { SearchBar },
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
exhibitions: [
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
],
size: 12,
current: 1,
total: 1000,
};
},
methods: {
handleSizeChange(value) {
console.log("handleSizeChange", value);
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
},
handleClick() {
this.$router.push({
path: "display/1",
});
},
},
};
</script>
<style lang="scss" scoped>
.display {
margin: auto;
width: 1200px;
.search {
// padding: 0 24%;
}
.display-group {
margin-top: 24px;
// padding: 0 16%;
.display-item {
width: 100%;
border-radius: 8px;
margin-bottom: 32px;
cursor: pointer;
.display-desc {
.desc-title {
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
}
.desc-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.pagination {
margin-top: 24px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/home/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
<style>
</style>
\ No newline at end of file
src/views/personal/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="personal">
<h1>个人中心</h1>
</div>
</template>
<script>
export default {
name:'Personal'
}
</script>
<style>
</style>
\ No newline at end of file
src/views/virtual/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="virtual">
<h1>虚拟展厅</h1>
</div>
</template>
<script>
export default {
name:'Virtual'
}
</script>
<style>
</style>
\ No newline at end of file
vue.config.js
浏览文件 @ 039f5f8d
......@@ -8,12 +8,12 @@ function resolve(dir) {
}
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: true,
//启动时自动打开网页
lintOnSave: false, //关闭eslint检查
devServer: {
host: 'localhost',
port: '8080',
open: true
open: true,
hot:true
},
publicPath: './',
chainWebpack: config => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论