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 {
inheritAttrs:false,
methods: {
handleOpen(key, keyPath) {
debugger
},
handleClose(key, keyPath) {
......
src/components/NavBar/index.vue
浏览文件 @ 93efece7
......@@ -141,9 +141,10 @@ a {
.tabs {
display: flex;
margin-right: 100px;
min-width: 512px;
.tab-item {
margin-right: 40px;
min-width: 64px;
// min-width: 64px;
// color: #fff;
}
.router-link-exact-active {
......
src/components/SearchBar/index.vue
浏览文件 @ 93efece7
......@@ -14,8 +14,11 @@
v-model="searchValue"
placeholder="请输入关键词"
class="center"
@keyup.enter.native="search"
></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>
</template>
......@@ -37,18 +40,21 @@ export default {
},
},
data() {
return {};
},
computed: {
select() {
return this.selectValue;
return {
searchValue: "",
};
},
searchValue() {
return this.keyword;
watch: {
keyword(value) {
this.searchValue = value;
},
},
mounted() {},
methods: {},
methods: {
search() {
this.$emit("search", this.searchValue);
},
},
};
</script>
......
src/views/culturalRelic/index.vue
浏览文件 @ 93efece7
......@@ -13,7 +13,7 @@
clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input> -->
<SearchBar @search="search" />
<SearchBar @search="search" :keyword="keyword"/>
<el-checkbox v-model="show3d">只看3D</el-checkbox>
</div>
<div class="display-group">
......@@ -123,11 +123,11 @@ export default {
}
},
async search() {
async search(keyword) {
var params = {
page: this.list.current,
limit: this.list.size,
name: this.keyword,
name: keyword,
};
console.log("params", params);
let res = await getCulturalRelicList(params);
......
src/views/display/Detail.vue
浏览文件 @ 93efece7
<!-- -->
<template>
<div class="display-detail">
<div class="search">
<!-- <div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div>
</div> -->
<div class="wrapper">
<div class="detail-container">
<div class="title-container">
<h3 class="title">{{ displayDetail.title }}</h3>
<div class="operation">
<svg-icon icon-class="user" style="color:red"></svg-icon>
<div class="back">
<el-button
type="text"
@click.native="handleCollect(exhibitionId)"
>{{
displayDetail.collectCountStatus ? "收藏" : "取消收藏"
}}</el-button
>
<el-button type="text" @click.native="handleLike(exhibitionId)">{{
displayDetail.loveCountStatus ? "点赞" : "取消点赞"
}}</el-button>
<el-button type="text" @click.native="handleShare(exhibitionId)"
>转发</el-button
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
</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 class="content">
<div class="intro margin-bottom-32">{{ displayDetail.intro }}</div>
</el-col>
<el-col class="relic-info" :span="8">
<div class="info-title">
<div
class="images"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24"
v-for="item in displayDetail.imagesVo"
:key="item.fileId"
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<img :src="item.url" alt="" width="100%"/>
<div class="name flex-center margin-bottom-32">
{{ item.name }}
<h4>
{{ displayDetail.title }}
</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 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-row>
</div>
<div class="margin-bottom-32">
<CustomTitle text="展览介绍" />
<div class="intro text-indent">
{{ displayDetail.intro }}
</div>
</div>
......@@ -59,38 +127,33 @@
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
>
<span>{{ item.name }}</span>
<span style="margin: 0 20px">{{ item.author }}</span>
<span class="mr-20">{{ item.name }}</span>
<span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<div class="relate-cultual-relic margin-bottom-32">
<!-- <div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" />
<!-- <div class="display-group">
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in relateRelics"
:key="index"
@click="handleToDetail(item.exhibitionId)"
>
<img
src="@/assets/imgs/display2.png"
width="100%"
:alt="item.title"
/>
<img :src="item.faceImageUrl" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
<h4>{{ item.name }}</h4>
</div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div>
</div>
</div> -->
</div>
<div class="relate-video margin-bottom-32">
<div
class="relate-video margin-bottom-32"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item
......@@ -99,12 +162,6 @@
>
<div class="video-container">
<div class="video-box">
<!-- <video
:src="item.url"
style="height: auto; width: 100%"
controls
loop
></video> -->
<Video :url="item.url" />
</div>
<div class="info-box">
......@@ -115,7 +172,7 @@
</el-carousel>
</div>
<div
class="relate-video margin-bottom-32"
class="margin-bottom-32"
v-if="
displayDetail.exhibitionUnits &&
displayDetail.exhibitionUnits.length > 0
......@@ -178,59 +235,36 @@
</el-row>
</div>
</div>
<el-dialog
title="登录提示"
:visible.sync="loginDialogVisible"
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"
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</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>
<script>
import SearchBar from "@/components/SearchBar";
import MenuList from "@/components/MenuList";
import AudioPlayer from "@/components/AudioPlayer";
import CustomTitle from "@/components/CustomTitle";
import { getDisplayById } from "@/api/display";
// import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import ReaderOperations from "@/components/ReaderOperations";
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 {
components: { SearchBar, CustomTitle, MenuList, Video },
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
MenuList,
Video,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
options: [
......@@ -240,31 +274,39 @@ export default {
},
],
selectValue: "",
displayDetail: {},
keyword: "",
exhibitionId: "",
loginDialogVisible: false,
shareDialogVisible: false,
curLink: "", //当前地址栏的链接
curUnit: {}, //当前点击的单元
displayDetail: {},
slideImageWidth: "",
imgViewerVisible: false,
relateRelics: [],
curUnit: [],
};
},
mounted() {
// this.creatQrCode();
this.loadDetail();
},
computed: {
...mapGetters(["token"]),
},
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() {
// debugger
console.log(this.$route.params);
let exhibitionId = this.$route.params.exhibitionId;
this.exhibitionId = exhibitionId;
if (exhibitionId) {
let res = await getDisplayById({ exhibitionId });
if (res.code == 0) {
this.displayDetail = res.data;
// debugger
// 处理单元数据
if (
this.displayDetail.exhibitionUnits &&
this.displayDetail.exhibitionUnits.length > 0
......@@ -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() {
this.curLink = window.location.href.toString();
this.shareDialogVisible = true;
// async loadCrRecommend() {
// const { exhibitionId, type } = this.displayDetail;
// // 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() {
this.shareDialogVisible = false;
handleToDetail(exhibitionId) {
console.log(crId);
this.$router.replace({ name: "displayDetail", params: { exhibitionId } });
},
handleOpenUnit(item) {
this.curUnit = item;
......@@ -335,6 +374,10 @@ export default {
</script>
<style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
.search {
width: 1200px;
margin: auto;
......@@ -343,8 +386,100 @@ export default {
.wrapper {
width: 1200px;
margin: auto;
background-color: #fff;
padding: 40px;
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
color: $label;
}
}
.detail-container {
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 {
display: flex;
justify-content: center;
......@@ -377,7 +512,7 @@ export default {
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 32px 0;
// padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
......@@ -419,33 +554,19 @@ export default {
}
}
.info-box {
width: 100%;
width: 800px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
}
.margin-bottom-32 {
margin-bottom: 32px;
}
.text-indent {
text-indent: 28px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.qrcode,
.copy {
display: flex;
justify-content: space-between;
align-items: center;
.margin-bottom-32 {
margin-bottom: 32px;
}
</style>
src/views/display/index.vue
浏览文件 @ 93efece7
<template>
<div class="display">
<!-- <NavBar /> -->
<div class="main">
<div class="content">
<el-row :gutter="20">
......@@ -13,7 +14,7 @@
clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input> -->
<SearchBar @search="search" />
<SearchBar @search="search" :keyword="keyword" />
</div>
<div class="display-group">
<!-- <div class="total">
......@@ -87,7 +88,7 @@ export default {
data() {
return {
selectValue: "",
keyword: "",
keyword: "", //搜索关键词
currentType: "all",
list: {
records: [],
......@@ -95,8 +96,6 @@ export default {
current: 1,
total: 0,
},
// years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
// types: ["青铜", "石器"],
};
},
created() {
......@@ -119,13 +118,12 @@ export default {
}
},
async search() {
async search(keyword) {
var params = {
page: this.list.current,
limit: this.list.size,
name: this.keyword,
title: keyword,
};
console.log("params", params);
let res = await getList(params);
if (res.code == 0) {
this.list = res.data;
......
src/views/home/index.vue
浏览文件 @ 93efece7
......@@ -5,7 +5,10 @@
<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">
<el-carousel-item
v-for="(item, index) in ['精品展1', '精品展2', '精品展3']"
:key="index"
>
<h3
class="small"
style="
......@@ -20,7 +23,18 @@
</el-carousel-item>
</el-carousel>
</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 culturalRelic">每日推送-文物</div>
<div class="recommend-item-container musuem-map">文博地图</div>
......@@ -75,10 +89,71 @@ export default {
],
};
},
methods: {
handleClickVitual() {
//暂时写死
window.open(
"https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980"
);
},
},
};
</script>
<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 {
display: flex;
flex-direction: column;
......
src/views/personal/components/Info.vue
浏览文件 @ 93efece7
<template>
<div class="personal-info">
<el-form ref="form" label-width="80px">
<el-form-item label="昵称"> 游客12345 </el-form-item>
<el-form-item label="邮箱"> 117282299@qq.com </el-form-item>
<el-form-item label="手机号"> 11728229911 </el-form-item>
<el-form-item>
<el-form-item label="账号"> {{userInfo.username}} </el-form-item>
<el-form-item label="手机号"> {{userInfo.phone}}</el-form-item>
<!-- <el-form-item>
<el-button @click="editInfo">修改个人信息</el-button>
<el-button @click="editPassword">修改密码</el-button>
</el-form-item>
</el-form-item> -->
</el-form>
<el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" width="400px">
<el-form :model="infoData" v-if="isEditBasicInfo" label-position="right" label-width="80px">
<el-form-item label="昵称" >
<el-dialog
title="修改个人信息"
: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-form-item>
<el-form-item label="邮箱" >
<el-form-item label="邮箱">
<el-input v-model="infoData.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" >
<el-form-item label="手机号">
<el-input v-model="infoData.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form :model="pwdData" v-else label-position="right" label-width="80px">
<el-form-item label="旧密码" >
<el-input
v-model="pwdData.oldPwd"
type="password"
></el-input>
<el-form
:model="pwdData"
v-else
label-position="right"
label-width="80px"
>
<el-form-item label="旧密码">
<el-input v-model="pwdData.oldPwd" type="password"></el-input>
</el-form-item>
<el-form-item label="新密码" >
<el-input
v-model="pwdData.newPwd"
type="password"
></el-input>
<el-form-item label="新密码">
<el-input v-model="pwdData.newPwd" type="password"></el-input>
</el-form-item>
<el-form-item label="重复密码" >
<el-input
v-model="pwdData.repeatPwd"
type="password"
></el-input>
<el-form-item label="重复密码">
<el-input v-model="pwdData.repeatPwd" type="password"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -52,6 +56,7 @@
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Info",
data() {
......@@ -70,7 +75,9 @@ export default {
isEditBasicInfo: true,
};
},
computed: {
...mapGetters(["userInfo"]),
},
methods: {
editInfo() {
this.dialogFormVisible = true;
......@@ -84,7 +91,7 @@ export default {
};
</script>
<style lang="scss" scoped>
.el-input{
.el-input {
width: 80%;
}
</style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ 93efece7
......@@ -4,24 +4,13 @@
<!-- <h1>虚拟展厅</h1> -->
<!-- <Footer /> -->
<el-row :gutter="40" class="list">
<el-col :span="12">
<div class="img" @click="handleClick('1')">
<img src="@/assets/imgs/virtual/1.png" alt="" />
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<div class="img" @click="handleClick(item.url)">
<img :src="item.faceImageUrl" 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>
</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>
<span class="name">{{ item.name }}</span
>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
<div class="play">
<i class="el-icon-caret-right"></i>
......@@ -35,20 +24,38 @@
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import { getVirtualList } from "@/api/vitual";
export default {
name: "Virtual",
components: { NavBar, Footer },
data() {
return {
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
};
},
mounted() {
this.loadData();
},
methods: {
handleClick(value) {
switch (value) {
case "1":
window.open('https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980')
break;
case "2":
window.open('https://720yun.com/t/99vkbwqb02e?scene_id=91494908#scene_id=91494908')
break;
// 加载表格数据
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getVirtualList(params);
if (res.code == 0) {
this.list = res.data;
}
},
handleClick(url) {
window.open(url);
},
},
};
</script>
......@@ -63,6 +70,9 @@ export default {
width: 100%;
position: relative;
overflow: hidden;
height: 200px;
// background-color: #fff;
cursor: pointer;
&:hover {
img {
transform: scale(1.1);
......@@ -70,7 +80,9 @@ export default {
}
img {
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.desc {
position: absolute;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论