pwlfzbeg4
/
digital_culture_heritage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

虚拟体验页面实现

Browse Source
main
HZXhuang 2 years ago
parent 2d9acd8ca5
commit b39a8b5e06
6 changed files with 224 additions and 57 deletions
Show Stats Download Patch File Download Diff File

2
code/frontend/src/components/user/HeaderBar2.vue
Unescape View File

@ -45,7 +45,7 @@ export default {
return {
items: [
{ icon: 'nav-tab-item_icon iconfont icon-home', label: '首页', path: '/home'},
{ icon: 'nav-tab-item_icon iconfont icon-send-fill', label: '虚拟体验', path: '/effect'},
{ icon: 'nav-tab-item_icon iconfont icon-send-fill', label: '虚拟体验', path: '/experience'},
{ icon: 'nav-tab-item_icon iconfont icon-shujuxianshi', label: '线下活动', path: '/big-screen'},
{ icon: 'nav-tab-item_icon iconfont icon-zhinengtuijian', label: '论坛', path: '/recommend'},
/*{ icon: 'nav-tab-item_icon iconfont icon-project_info', label: '背景介绍', path: '/background'},

3
code/frontend/src/components/user/Pagination.vue
Unescape View File

@ -1,12 +1,13 @@
/**
* 分页组件
*/
*/
<template>
<el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
</el-pagination>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Pagination',
props: ['childMsg'],
data() {

155
code/frontend/src/components/user/Search.vue
Unescape View File

@ -1,78 +1,77 @@
<template>
<div>
<el-form :inline="true" :model="search_data" class="user-search">
<el-form-item label="搜索：">
<el-select size="medium" v-model="search_data" placeholder="请选择地区" @change="updateChart">
<el-option
v-for="item in emotionOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-input size="small"
v-model="search_data.searchCountry"
placeholder="请输入评论所属的国家"
@keypress.enter.native="search"
clearable
>
<div style="margin-bottom: 20px">
<el-select style="width: 150px; margin-right: 10px" v-model="search_data.area" placeholder="请选择地区">
<el-option
v-for="item in options.area"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-select style="width: 180px; margin-right: 10px" v-model="search_data.releaseTime" placeholder="请选择公布时间">
<el-option
v-for="item in options.releaseTime"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-input
style="width: 220px; margin-right: 20px"
v-model="search_data.name"
placeholder="请输入关键词：项目名称"
clearable>
</el-input>
<el-button type="primary">搜索</el-button>
</div>
</el-input>
</el-form-item>
<el-form-item label="">
<el-input size="small"
v-model="search_data.searchPlatform"
placeholder="请输入评论所属的平台"
@keypress.enter.native="search"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="">
<el-input size="small"
v-model="search_data.searchContent"
placeholder="请输入评论的内容"
@keypress.enter.native="search"
clearable
>
</el-input>
</el-form-item>
</el-form>
<!--列表-->
<el-table size="small" :data="list_data" highlight-current-row v-loading="loading"
border element-loading-text="拼命加载中" @selection-change="handleSelectionChange" style="width: 100%;">
<el-table :data="list_data" highlight-current-row v-loading="loading"
border element-loading-text="拼命加载中"
style="width: 100%; font-size: 14px; ">
<el-table-column sortable prop="id" label="ID" width="80">
</el-table-column>
<el-table-column prop="name" label="名称" width="100">
<el-table-column prop="name" label="名称" width="150">
</el-table-column>
<el-table-column prop="category" label="类别" width="140">
<el-table-column prop="category" label="类别" width="150">
</el-table-column>
<el-table-column prop="type" label="类型" width="140">
</el-table-column>
<el-table-column prop="releaseTime" label="公布时间" width="120">
<el-table-column sortable prop="releaseTime" label="公布时间" width="100">
</el-table-column>
<el-table-column prop="applicant" label="申报地区或单位" width="100">
<el-table-column prop="applicant" label="申报地区或单位" >
</el-table-column>
<el-table-column prop="protectionUnit" label="保护单位" width="100">
<el-table-column prop="protectionUnit" label="保护单位" >
</el-table-column>
</el-table>
<!-- 分页组件 -->
<!-- <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
</div>
</template>
<script>
import Pagination from "@/components/user/Pagination";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Search",
components: {
Pagination
},
data() {
return {
loading: false, //是显示加载
// 分页参数
pageparm: {
currentPage: 1,
pageSize: 10,
total: 10
},
search_data: {
name: null,
releaseTime: null
},
list_data: [
{
@ -83,9 +82,61 @@ export default {
type: "新增项目",
applicant: "湖南省湘西土家族苗族自治州",
protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
}
]
},
{
id: 1,
name: "土家族织锦技艺",
category: "传统技艺",
releaseTime: "2006",
type: "新增项目",
applicant: "湖南省湘西土家族苗族自治州",
protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
},
{
id: 1,
name: "土家族织锦技艺",
category: "传统技艺",
releaseTime: "2006",
type: "新增项目",
applicant: "湖南省湘西土家族苗族自治州",
protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
},
{
id: 1,
name: "土家族织锦技艺",
category: "传统技艺",
releaseTime: "2006",
type: "新增项目",
applicant: "湖南省湘西土家族苗族自治州",
protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
},
{
id: 1,
name: "土家族织锦技艺",
category: "传统技艺",
releaseTime: "2006",
type: "新增项目",
applicant: "湖南省湘西土家族苗族自治州",
protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
},
],
options: {
area: [
],
releaseTime: [
],
}
}
},
methods: {
// 分页插件事件
callFather(parm) {
this.search_data.pageNum = parm.currentPage
this.search_data.pageSize = parm.pageSize
},
}
}
</script>

9
code/frontend/src/router/index.js
Unescape View File

@ -9,6 +9,7 @@ import HomePage from "@/views/user/HomePage";
import UserRegister from "@/views/user/UserRegister";
import UserLogin from "@/views/user/UserLogin";
import UserIndex from "../views/index"
import VirtualExperience from "@/views/user/VirtualExperience";
// 启用路由
Vue.use(Router);
@ -53,6 +54,14 @@ const router = new Router({
requireAuth: false
}
},
{
path: "/experience",
name: "虚拟体验",
component: VirtualExperience,
meta: {
requireAuth: false
}
},
{
path: "/personal",
name: "用户个人中心",

8
code/frontend/src/views/user/HomePage.vue
Unescape View File

@ -6,9 +6,9 @@
</el-col>
</el-row>
<el-row style="display: flex; justify-content: center">
<el-col :span="16" :xs="24" align="center">
<el-col :span="18" :xs="24" align="center">
<el-card class="box-card grid-content" shadow="always">
<Search></Search>
</el-card>
</el-col>
</el-row>
@ -66,12 +66,14 @@
<script>
import SlideShow from "@/components/user/SlideShow";
import DistributeMap from "@/components/user/DistributeMap";
import Search from "@/components/user/Search";
export default {
name: "HomePage",
components: {
SlideShow,
DistributeMap
DistributeMap,
Search
},
data() {
return {

104
code/frontend/src/views/user/VirtualExperience.vue
Unescape View File

@ -0,0 +1,104 @@
<template>
<div style="margin: 0 50px">
<el-row :gutter="20">
<el-col :span="6" :xs="24" align="center" style="margin-top: 20px" v-for="item in list_data" :key="item.id">
<el-card :body-style="{ padding: '0px' }">
<div class="bottom clearfix">
<span style="float: left; margin-left: 20px; margin-top: 10px">{{item.name}}</span>
<el-button style="float: right; margin-right: 20px; margin-top: 10px"
size="small" type="primary" class="button" @click="handleClick(item.id)">体验</el-button>
</div>
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span class="my-icon">
<i class="el-icon-thumb"></i>{{item.likes}}
</span>
<i class="el-icon-chat-round my-icon"></i>
<i class="el-icon-more-outline"></i>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "VirtualExperience",
data() {
return {
list_data: [
{
id: 1,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
{
id: 2,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
{
id: 3,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
{
id: 4,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
{
id: 5,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
{
id: 6,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
{
id: 7,
name: "铜官窑制作",
description: "",
imgUri: "",
likes: 10,
},
]
}
},
methods: {
handleClick(id) {
console.log(id)
}
}
}
</script>
<style scoped>
.bottom {
margin-bottom: 10px;
}
.image {
width: 100%;
height: 250px;
}
.my-icon {
margin-right: 80px;
}
</style>
Write Preview
Loading…
Cancel
Save