Skip to content

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

feat:修改布展详情页布局、接入虚拟展厅接口、接入个人信息

上级 2c8a1f11
显示空白字符变更
内嵌 并排
正在显示 包含 480 行增加 和 241 行删除
src/api/vitual.js 0 → 100644
浏览文件 @ 93efece7
import request from '@/utils/request'
export function getVirtualList(data) {
return request({
url: '/bizVirtual/listByPage',
method: 'post',
data
})
}
export function getVirtualListById(data) {
return request({
url: '/bizVirtual/listById',
method: 'delete',
data
})
}
src/components/MenuList/index.vue
浏览文件 @ 93efece7
...@@ -41,7 +41,6 @@ export default { ...@@ -41,7 +41,6 @@ export default {
inheritAttrs:false, inheritAttrs:false,
methods: { methods: {
handleOpen(key, keyPath) { handleOpen(key, keyPath) {
debugger
}, },
handleClose(key, keyPath) { handleClose(key, keyPath) {
......
src/components/NavBar/index.vue
浏览文件 @ 93efece7
...@@ -141,9 +141,10 @@ a { ...@@ -141,9 +141,10 @@ a {
.tabs { .tabs {
display: flex; display: flex;
margin-right: 100px; margin-right: 100px;
min-width: 512px;
.tab-item { .tab-item {
margin-right: 40px; margin-right: 40px;
min-width: 64px; // min-width: 64px;
// color: #fff; // color: #fff;
} }
.router-link-exact-active { .router-link-exact-active {
......
src/components/SearchBar/index.vue
浏览文件 @ 93efece7
...@@ -14,8 +14,11 @@ ...@@ -14,8 +14,11 @@
v-model="searchValue" v-model="searchValue"
placeholder="请输入关键词" placeholder="请输入关键词"
class="center" class="center"
@keyup.enter.native="search"
></el-input> ></el-input>
<el-button style="width:300px" round type="primary">检索</el-button> <el-button style="width: 300px" round type="primary" @click.native="search"
>检索</el-button
>
</div> </div>
</template> </template>
...@@ -37,18 +40,21 @@ export default { ...@@ -37,18 +40,21 @@ export default {
}, },
}, },
data() { data() {
return {}; return {
}, searchValue: "",
computed: { };
select() {
return this.selectValue;
}, },
searchValue() { watch: {
return this.keyword; keyword(value) {
this.searchValue = value;
}, },
}, },
mounted() {}, mounted() {},
methods: {}, methods: {
search() {
this.$emit("search", this.searchValue);
},
},
}; };
</script> </script>
......
src/views/culturalRelic/index.vue
浏览文件 @ 93efece7
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
clearable clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i ><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input> --> ></el-input> -->
<SearchBar @search="search" /> <SearchBar @search="search" :keyword="keyword"/>
<el-checkbox v-model="show3d">只看3D</el-checkbox> <el-checkbox v-model="show3d">只看3D</el-checkbox>
</div> </div>
<div class="display-group"> <div class="display-group">
...@@ -123,11 +123,11 @@ export default { ...@@ -123,11 +123,11 @@ export default {
} }
}, },
async search() { async search(keyword) {
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
name: this.keyword, name: keyword,
}; };
console.log("params", params); console.log("params", params);
let res = await getCulturalRelicList(params); let res = await getCulturalRelicList(params);
......
src/views/display/Detail.vue
浏览文件 @ 93efece7
<!-- --> <!-- -->
<template> <template>
<div class="display-detail"> <div class="display-detail">
<div class="search"> <!-- <div class="search">
<SearchBar <SearchBar
:options="options" :options="options"
:selectValue="selectValue" :selectValue="selectValue"
:keyword="keyword" :keyword="keyword"
/> />
</div> </div> -->
<div class="wrapper"> <div class="wrapper">
<div class="detail-container"> <div class="back">
<div class="title-container">
<h3 class="title">{{ displayDetail.title }}</h3>
<div class="operation">
<svg-icon icon-class="user" style="color:red"></svg-icon>
<el-button <el-button
type="text" type="text"
@click.native="handleCollect(exhibitionId)" icon="el-icon-arrow-left"
>{{ @click.native="handleBack"
displayDetail.collectCountStatus ? "收藏" : "取消收藏" >返回上页</el-button
}}</el-button
>
<el-button type="text" @click.native="handleLike(exhibitionId)">{{
displayDetail.loveCountStatus ? "点赞" : "取消点赞"
}}</el-button>
<el-button type="text" @click.native="handleShare(exhibitionId)"
>转发</el-button
> >
</div> </div>
<el-row class="detail-container" :gutter="10">
<el-col class="cr-images" :span="18">
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<el-image
style="width: 100%; height: 100%"
:src="item.url"
fit="contain"
></el-image>
</el-carousel-item>
</el-carousel>
<div class="enlarge" @click="handelPreviewImages">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> </div>
</el-col>
<div class="content"> <el-col class="relic-info" :span="8">
<div class="intro margin-bottom-32">{{ displayDetail.intro }}</div> <div class="info-title">
<div <div
class="images" style="
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" display: flex;
> align-items: center;
<el-row :gutter="20"> justify-content: space-between;
<el-col "
:span="24"
v-for="item in displayDetail.imagesVo"
:key="item.fileId"
> >
<img :src="item.url" alt="" width="100%"/> <h4>
<div class="name flex-center margin-bottom-32"> {{ displayDetail.title }}
{{ item.name }} </h4>
<span>
<svg-icon
icon-class="view"
style="color: #61666d; margin-right: 5px"
></svg-icon>
<span style="color: #61666d">{{
displayDetail.browseCount
}}</span>
</span>
</div>
<AudioPlayer
:url="displayDetail.audiosVo[0].url"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
<div class="info-body">
<div class="basic-info">
<!-- <div class="body-item">
<span class="label">年份</span>
<span class="value">{{ displayDetail.yearsLabel }}</span>
</div> </div>
<div class="body-item">
<span class="label">类别</span>
<span class="value">
{{ displayDetail.typeLabel }}
</span>
</div>-->
<div class="body-item">
<span class="label">开始日期</span>
<span class="value">{{ displayDetail.startDate }}</span>
</div>
<div class="body-item">
<span class="label">结束日期</span>
<span class="value">{{ displayDetail.endDate }}</span>
</div>
<div class="body-item">
<span class="label">关键词</span>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">展览单位</span>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
</div>
</div>
<!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
<!-- </div> -->
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="Boolean(displayDetail.collectCountStatus)"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
@reload="loadDetail"
/>
</el-col> </el-col>
</el-row> </el-row>
</div>
<div class="margin-bottom-32">
<CustomTitle text="展览介绍" />
<div class="intro text-indent">
{{ displayDetail.intro }}
</div> </div>
</div> </div>
...@@ -59,38 +127,33 @@ ...@@ -59,38 +127,33 @@
v-for="(item, index) in displayDetail.literatureVo" v-for="(item, index) in displayDetail.literatureVo"
:key="index" :key="index"
> >
<span>{{ item.name }}</span> <span class="mr-20">{{ item.name }}</span>
<span style="margin: 0 20px">{{ item.author }}</span> <span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
</div> </div>
</div> </div>
<div class="relate-cultual-relic margin-bottom-32"> <!-- <div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" /> <CustomTitle text="关联文物" />
<!-- <div class="display-group"> <div class="display-group">
<div <div
class="display-item" class="display-item"
v-for="(item, index) in relateRelics" v-for="(item, index) in relateRelics"
:key="index" :key="index"
@click="handleToDetail(item.exhibitionId)"
> >
<img <img :src="item.faceImageUrl" width="100%" :alt="item.title" />
src="@/assets/imgs/display2.png"
width="100%"
:alt="item.title"
/>
<div class="display-desc"> <div class="display-desc">
<div class="desc-title"> <div class="desc-title">
<h4>{{ item.title }}</h4> <h4>{{ item.name }}</h4>
</div> </div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div> </div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div> </div>
</div> </div>
</div> --> </div> -->
</div> <div
<div class="relate-video margin-bottom-32"> class="relate-video margin-bottom-32"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<CustomTitle text="关联视频" /> <CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px"> <el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item <el-carousel-item
...@@ -99,12 +162,6 @@ ...@@ -99,12 +162,6 @@
> >
<div class="video-container"> <div class="video-container">
<div class="video-box"> <div class="video-box">
<!-- <video
:src="item.url"
style="height: auto; width: 100%"
controls
loop
></video> -->
<Video :url="item.url" /> <Video :url="item.url" />
</div> </div>
<div class="info-box"> <div class="info-box">
...@@ -115,7 +172,7 @@ ...@@ -115,7 +172,7 @@
</el-carousel> </el-carousel>
</div> </div>
<div <div
class="relate-video margin-bottom-32" class="margin-bottom-32"
v-if=" v-if="
displayDetail.exhibitionUnits && displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0 displayDetail.exhibitionUnits.length > 0
...@@ -178,59 +235,36 @@ ...@@ -178,59 +235,36 @@
</el-row> </el-row>
</div> </div>
</div> </div>
<el-image-viewer
<el-dialog v-if="imgViewerVisible"
title="登录提示" :on-close="closeImgViewer"
:visible.sync="loginDialogVisible" :url-list="imgList"
width="30%"
:before-close="handleLoginClose"
>
<span>读者功能需登录进行使用，是否去登录？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="loginDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleToLogin">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="分享"
:visible.sync="shareDialogVisible"
width="40%"
:before-close="handleShareClose"
>
<div class="qrcode">
<div>
<img
src="@/assets/404_images/no-pic.png"
alt="二维码"
width="100px"
height="100px"
/> />
</div> </div>
<div>扫描左侧二维码，跳转到对应小程序页面后分享，或复制下方链接</div>
</div>
<div class="copy">
<div class="link">{{ curLink }}</div>
<el-button type="text">复制链接</el-button>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="loginDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleToLogin">确 定</el-button>
</span> -->
</el-dialog>
</div>
</template> </template>
<script> <script>
import SearchBar from "@/components/SearchBar"; import SearchBar from "@/components/SearchBar";
import MenuList from "@/components/MenuList"; import AudioPlayer from "@/components/AudioPlayer";
import CustomTitle from "@/components/CustomTitle"; import CustomTitle from "@/components/CustomTitle";
import { getDisplayById } from "@/api/display"; import ReaderOperations from "@/components/ReaderOperations";
// import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import Video from "@/components/Video"; import Video from "@/components/Video";
import QRCode from "qrcodejs2";
import { getDisplayById } from "@/api/display";
import MenuList from "@/components/MenuList";
import { crRecommendByPage } from "@/api/culturalRelic";
export default { export default {
components: { SearchBar, CustomTitle, MenuList, Video }, components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
MenuList,
Video,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() { data() {
return { return {
options: [ options: [
...@@ -240,31 +274,39 @@ export default { ...@@ -240,31 +274,39 @@ export default {
}, },
], ],
selectValue: "", selectValue: "",
displayDetail: {},
keyword: "", keyword: "",
exhibitionId: "", displayDetail: {},
loginDialogVisible: false, slideImageWidth: "",
shareDialogVisible: false, imgViewerVisible: false,
curLink: "", //当前地址栏的链接 relateRelics: [],
curUnit: {}, //当前点击的单元 curUnit: [],
}; };
}, },
mounted() { mounted() {
// this.creatQrCode();
this.loadDetail(); this.loadDetail();
}, },
computed: {
...mapGetters(["token"]),
},
methods: { methods: {
creatQrCode() {
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
async loadDetail() { async loadDetail() {
// debugger
console.log(this.$route.params);
let exhibitionId = this.$route.params.exhibitionId; let exhibitionId = this.$route.params.exhibitionId;
this.exhibitionId = exhibitionId;
if (exhibitionId) { if (exhibitionId) {
let res = await getDisplayById({ exhibitionId }); let res = await getDisplayById({ exhibitionId });
if (res.code == 0) { if (res.code == 0) {
this.displayDetail = res.data; this.displayDetail = res.data;
// debugger
// 处理单元数据
if ( if (
this.displayDetail.exhibitionUnits && this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0 this.displayDetail.exhibitionUnits.length > 0
...@@ -284,48 +326,45 @@ export default { ...@@ -284,48 +326,45 @@ export default {
} }
} }
} }
// 获取关联文物
// this.loadCrRecommend();
this.$nextTick(() => {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
});
} }
} }
}, },
// 收藏
async handleCollect(exhibitionId) {
if (this.token) {
const params = {
sourceId: exhibitionId,
sourceType: "biz_exhibition",
title: this.displayDetail.title,
};
await this.$store.dispatch("user/toggleCollect", params);
} else {
this.loginDialogVisible = true;
}
},
// 点赞
async handleLike(exhibitionId) {
if (this.token) {
const params = {
sourceId: exhibitionId,
sourceType: "biz_exhibition",
title: this.displayDetail.title,
};
await this.$store.dispatch("user/toggleLike", params);
} else {
this.loginDialogVisible = true;
}
},
handleShare() { // async loadCrRecommend() {
this.curLink = window.location.href.toString(); // const { exhibitionId, type } = this.displayDetail;
this.shareDialogVisible = true; // // debugger
// const params = {
// exhibitionId,
// // type,
// // years,
// page: 1,
// limit: 5,
// };
// let res = await crRecommendByPage(params);
// this.relateRelics = res.data.records;
// console.log("res", res);
// },
handleBack() {
this.$router.go(-1);
}, },
handleToLogin() {
this.$router.push(`/login?redirect=${this.$route.fullPath}`); closeImgViewer() {
this.imgViewerVisible = false;
}, },
handleLoginClose() {
this.loginDialogVisible = false; handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = this.displayDetail.imagesVo.map((item) => item.url);
}, },
handleShareClose() { handleToDetail(exhibitionId) {
this.shareDialogVisible = false; console.log(crId);
this.$router.replace({ name: "displayDetail", params: { exhibitionId } });
}, },
handleOpenUnit(item) { handleOpenUnit(item) {
this.curUnit = item; this.curUnit = item;
...@@ -335,6 +374,10 @@ export default { ...@@ -335,6 +374,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
.search { .search {
width: 1200px; width: 1200px;
margin: auto; margin: auto;
...@@ -343,8 +386,100 @@ export default { ...@@ -343,8 +386,100 @@ export default {
.wrapper { .wrapper {
width: 1200px; width: 1200px;
margin: auto; margin: auto;
background-color: #fff;
padding: 40px;
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
color: $label;
}
}
.detail-container { .detail-container {
margin-bottom: 32px; margin-bottom: 32px;
// display: flex;
img {
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px;
margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
.enlarge {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
}
.relic-info {
.info-title {
display: flex;
// align-items: center;
flex-direction: column;
margin-bottom: 40px;
.play {
margin-left: 10px;
font-size: 32px;
cursor: pointer;
}
}
.info-body {
display: flex;
justify-content: space-between;
align-items: flex-end;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
}
}
}
}
.view-3d {
margin-top: 32px;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
img {
margin-right: 10px;
}
}
}
.title-container { .title-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -377,7 +512,7 @@ export default { ...@@ -377,7 +512,7 @@ export default {
margin-bottom: 32px; margin-bottom: 32px;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 32px 0; // padding: 0 0 32px 0;
background-color: #fff; background-color: #fff;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
...@@ -419,33 +554,19 @@ export default { ...@@ -419,33 +554,19 @@ export default {
} }
} }
.info-box { .info-box {
width: 100%; width: 800px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
} }
} }
} }
.margin-bottom-32 {
margin-bottom: 32px;
}
.text-indent { .text-indent {
text-indent: 28px; text-indent: 28px;
} }
.flex-center { .margin-bottom-32 {
display: flex; margin-bottom: 32px;
justify-content: center;
align-items: center;
}
.qrcode,
.copy {
display: flex;
justify-content: space-between;
align-items: center;
} }
</style> </style>
src/views/display/index.vue
浏览文件 @ 93efece7
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div class="main"> <div class="main">
<div class="content"> <div class="content">
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -13,7 +14,7 @@ ...@@ -13,7 +14,7 @@
clearable clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i ><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input> --> ></el-input> -->
<SearchBar @search="search" /> <SearchBar @search="search" :keyword="keyword" />
</div> </div>
<div class="display-group"> <div class="display-group">
<!-- <div class="total"> <!-- <div class="total">
...@@ -87,7 +88,7 @@ export default { ...@@ -87,7 +88,7 @@ export default {
data() { data() {
return { return {
selectValue: "", selectValue: "",
keyword: "", keyword: "", //搜索关键词
currentType: "all", currentType: "all",
list: { list: {
records: [], records: [],
...@@ -95,8 +96,6 @@ export default { ...@@ -95,8 +96,6 @@ export default {
current: 1, current: 1,
total: 0, total: 0,
}, },
// years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
// types: ["青铜", "石器"],
}; };
}, },
created() { created() {
...@@ -119,13 +118,12 @@ export default { ...@@ -119,13 +118,12 @@ export default {
} }
}, },
async search() { async search(keyword) {
var params = { var params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
name: this.keyword, title: keyword,
}; };
console.log("params", params);
let res = await getList(params); let res = await getList(params);
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
......
src/views/home/index.vue
浏览文件 @ 93efece7
...@@ -5,7 +5,10 @@ ...@@ -5,7 +5,10 @@
<div class="recommend-item-container boutique"> <div class="recommend-item-container boutique">
<!-- <NavBar class="navBar" /> --> <!-- <NavBar class="navBar" /> -->
<el-carousel height="100vh" style="width: 100%"> <el-carousel height="100vh" style="width: 100%">
<el-carousel-item v-for="(item,index) in ['精品展1','精品展2','精品展3']" :key="index"> <el-carousel-item
v-for="(item, index) in ['精品展1', '精品展2', '精品展3']"
:key="index"
>
<h3 <h3
class="small" class="small"
style=" style="
...@@ -20,7 +23,18 @@ ...@@ -20,7 +23,18 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="recommend-item-container virtural">虚拟展厅</div> <div class="recommend-item-container virtural">
<div class="img" @click="handleClickVitual()">
<img src="@/assets/imgs/virtual/1.png" alt="" />
<div class="desc">
<span class="name">贵州世居民族展历史篇</span>——
<span class="deptName">贵州省民族博物馆</span>
</div>
<div class="play">
<i class="el-icon-caret-right"></i>
</div>
</div>
</div>
<div class="recommend-item-container display">每日推送-布展</div> <div class="recommend-item-container display">每日推送-布展</div>
<div class="recommend-item-container culturalRelic">每日推送-文物</div> <div class="recommend-item-container culturalRelic">每日推送-文物</div>
<div class="recommend-item-container musuem-map">文博地图</div> <div class="recommend-item-container musuem-map">文博地图</div>
...@@ -75,10 +89,71 @@ export default { ...@@ -75,10 +89,71 @@ export default {
], ],
}; };
}, },
methods: {
handleClickVitual() {
//暂时写死
window.open(
"https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980"
);
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.virtural {
.img {
width: 100%;
position: relative;
overflow: hidden;
// background-color: #fff;
cursor: pointer;
&:hover {
img {
transform: scale(1.1);
}
// .play {
// width: 56px;
// height: 56px;
// i {
// font-size: 46px;
// color: #fff;
// }
// }
}
img {
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.desc {
position: absolute;
width: 100%;
padding: 10px;
background-color: #fff;
opacity: 0.7;
bottom: 0;
left: 0;
}
.play {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 40px;
color: #fff;
}
}
}
}
.recommend-list { .recommend-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/views/personal/components/Info.vue
浏览文件 @ 93efece7
<template> <template>
<div class="personal-info"> <div class="personal-info">
<el-form ref="form" label-width="80px"> <el-form ref="form" label-width="80px">
<el-form-item label="昵称"> 游客12345 </el-form-item> <el-form-item label="账号"> {{userInfo.username}} </el-form-item>
<el-form-item label="邮箱"> 117282299@qq.com </el-form-item> <el-form-item label="手机号"> {{userInfo.phone}}</el-form-item>
<el-form-item label="手机号"> 11728229911 </el-form-item> <!-- <el-form-item>
<el-form-item>
<el-button @click="editInfo">修改个人信息</el-button> <el-button @click="editInfo">修改个人信息</el-button>
<el-button @click="editPassword">修改密码</el-button> <el-button @click="editPassword">修改密码</el-button>
</el-form-item> </el-form-item> -->
</el-form> </el-form>
<el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" width="400px"> <el-dialog
<el-form :model="infoData" v-if="isEditBasicInfo" label-position="right" label-width="80px"> title="修改个人信息"
<el-form-item label="昵称" > :visible.sync="dialogFormVisible"
width="400px"
>
<el-form
:model="infoData"
v-if="isEditBasicInfo"
label-position="right"
label-width="80px"
>
<el-form-item label="昵称">
<el-input v-model="infoData.name" autocomplete="off"></el-input> <el-input v-model="infoData.name" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮箱" > <el-form-item label="邮箱">
<el-input v-model="infoData.email" autocomplete="off"></el-input> <el-input v-model="infoData.email" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="手机号" > <el-form-item label="手机号">
<el-input v-model="infoData.phone" autocomplete="off"></el-input> <el-input v-model="infoData.phone" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form :model="pwdData" v-else label-position="right" label-width="80px"> <el-form
<el-form-item label="旧密码" > :model="pwdData"
<el-input v-else
v-model="pwdData.oldPwd" label-position="right"
type="password" label-width="80px"
></el-input> >
<el-form-item label="旧密码">
<el-input v-model="pwdData.oldPwd" type="password"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="新密码" > <el-form-item label="新密码">
<el-input <el-input v-model="pwdData.newPwd" type="password"></el-input>
v-model="pwdData.newPwd"
type="password"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="重复密码" > <el-form-item label="重复密码">
<el-input <el-input v-model="pwdData.repeatPwd" type="password"></el-input>
v-model="pwdData.repeatPwd"
type="password"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -52,6 +56,7 @@ ...@@ -52,6 +56,7 @@
</template> </template>
<script> <script>
import { mapGetters } from "vuex";
export default { export default {
name: "Info", name: "Info",
data() { data() {
...@@ -70,7 +75,9 @@ export default { ...@@ -70,7 +75,9 @@ export default {
isEditBasicInfo: true, isEditBasicInfo: true,
}; };
}, },
computed: {
...mapGetters(["userInfo"]),
},
methods: { methods: {
editInfo() { editInfo() {
this.dialogFormVisible = true; this.dialogFormVisible = true;
...@@ -84,7 +91,7 @@ export default { ...@@ -84,7 +91,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-input{ .el-input {
width: 80%; width: 80%;
} }
</style> </style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ 93efece7
...@@ -4,24 +4,13 @@ ...@@ -4,24 +4,13 @@
<!-- <h1>虚拟展厅</h1> --> <!-- <h1>虚拟展厅</h1> -->
<!-- <Footer /> --> <!-- <Footer /> -->
<el-row :gutter="40" class="list"> <el-row :gutter="40" class="list">
<el-col :span="12"> <el-col :span="8" v-for="(item, index) in list.records" :key="index">
<div class="img" @click="handleClick('1')"> <div class="img" @click="handleClick(item.url)">
<img src="@/assets/imgs/virtual/1.png" alt="" /> <img :src="item.faceImageUrl" alt="" />
<div class="desc"> <div class="desc">
<span class="name">贵州世居民族展历史篇</span>—— <span class="name">{{ item.name }}</span
<span class="deptName">贵州省民族博物馆</span> >
</div> <!-- <span class="deptName">{{ item.deptName }}</span> -->
<div class="play">
<i class="el-icon-caret-right"></i>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="img" @click="handleClick('2')">
<img src="@/assets/imgs/virtual/2.png" alt="" />
<div class="desc">
<span class="name">贵州世居民族展文化篇</span>——
<span class="deptName">贵州省民族博物馆</span>
</div> </div>
<div class="play"> <div class="play">
<i class="el-icon-caret-right"></i> <i class="el-icon-caret-right"></i>
...@@ -35,20 +24,38 @@ ...@@ -35,20 +24,38 @@
<script> <script>
import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import { getVirtualList } from "@/api/vitual";
export default { export default {
name: "Virtual", name: "Virtual",
components: { NavBar, Footer }, components: { NavBar, Footer },
data() {
return {
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
};
},
mounted() {
this.loadData();
},
methods: { methods: {
handleClick(value) { // 加载表格数据
switch (value) { async loadData() {
case "1": var params = {
window.open('https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980') page: this.list.current,
break; limit: this.list.size,
case "2": };
window.open('https://720yun.com/t/99vkbwqb02e?scene_id=91494908#scene_id=91494908') let res = await getVirtualList(params);
break; if (res.code == 0) {
this.list = res.data;
} }
}, },
handleClick(url) {
window.open(url);
},
}, },
}; };
</script> </script>
...@@ -63,6 +70,9 @@ export default { ...@@ -63,6 +70,9 @@ export default {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 200px;
// background-color: #fff;
cursor: pointer;
&:hover { &:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
...@@ -70,7 +80,9 @@ export default { ...@@ -70,7 +80,9 @@ export default {
} }
img { img {
width: 100%; width: 100%;
height: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.desc { .desc {
position: absolute; position: absolute;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论