Skip to content

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

优化界面一版

上级 050a04dd
隐藏空白字符变更
内嵌 并排
正在显示 包含 1559 行增加 和 1079 行删除
src/api/dict.js
浏览文件 @ a55db14b
......@@ -11,3 +11,16 @@ export function getDictCode(data) {
data
})
}
/**
* 获取树结构的字典
* @param {*} data 查询参数 data ['culturalRelicYears','culturalRelicTexture']
*
*/
export function getDictTree(data) {
return request({
url: '/sysDictTree/listByType',
method: 'post',
data
})
}
\ No newline at end of file
src/store/modules/dict.js
浏览文件 @ a55db14b
import {
getDictCode,
getDictTree
} from '@/api/dict'
import {
getCulturalRelicList
} from '@/api/culturalRelic'
const state = {
dicts: {},
};
const mutations = {
SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value;
},
};
export default {
namespaced: true,
state,
mutations,
};
\ No newline at end of file
dicts: {}, //字典
crList: [], //文物列表
ltList: [] //文献列表
};
const mutations = {
SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value;
},
SET_CR_LIST(state, crList) {
state.crList = crList
}
};
const actions = {
/**
* 获取普通list结构(非树结构)的字典
* @param {Array} data 字典的key集合
* @returns {Promise}
*/
getDictList({
commit
}, data) {
let dicts = {}
let requestDicts = []
data.forEach(i => {
if (!state.dicts[i]) {
requestDicts.push(i)
} else {
dicts[i] = state.dicts[i]
}
});
if (requestDicts.length > 0) {
return new Promise((resolve, reject) => {
getDictCode(requestDicts).then(res => {
requestDicts.forEach(reqDict => {
var obj = {}
if (res.code == 0) {
res.data.map(item => {
if (item.dictType == reqDict) {
obj[item.value] = item.label
}
})
dicts[reqDict] = Object.freeze(obj)
commit('SET_DICTS', {
label: reqDict,
value: Object.freeze(obj)
})
}
})
resolve(dicts)
}).catch(error => {
reject(error)
})
});
} else {
return new Promise((resolve, reject) => {
resolve(dicts)
})
}
},
/**
* 获取树形结构的字典树，如文物年代、文物质地
* @param {Array} data 字典的key集合
* @returns {Promise}
*/
getDictTree({
commit
}, data) {
let dicts = {}
let requestDicts = []
data.forEach(i => {
if (!state.dicts[i]) {
requestDicts.push(i)
} else {
dicts[i] = state.dicts[i]
}
});
if (requestDicts.length > 0) {
return new Promise((resolve, reject) => {
getDictTree(requestDicts).then(res => {
let dictsObj = {}
requestDicts.forEach(reqDict => {
dictsObj[reqDict] = []
res.data.map(item => {
if (item.dictType == reqDict) {
dictsObj[reqDict].push(item)
}
})
commit("SET_DICTS", {
label: reqDict,
value: Object.freeze(dictsObj[reqDict]),
});
})
resolve(dictsObj)
}).catch(error => {
reject(error)
})
});
} else {
return new Promise((resolve, reject) => {
resolve(dicts)
})
}
},
/**
* 获取文物列表
* @param {Boolean} isReload 是否要重新加载
* @param {params} params 分页或一些查询参数
* @returns {Promise}
*/
getCrList({
commit
}, {
isReload,
params
}) {
if (!state.crList || state.crList.length == 0 || isReload) {
return new Promise((resolve, reject) => {
getCulturalRelicList(params).then(response => {
const {
data
} = response
commit('SET_CR_LIST', data.records)
resolve(response)
}).catch(error => {
reject(error)
})
})
} else {
return new Promise((resolve, reject) => {
resolve(state.crList)
})
}
},
}
export default {
namespaced: true,
state,
actions,
mutations,
};
src/views/culturalRelic/index-old.vue deleted 100644 → 0
浏览文件 @ 050a04dd
<template>
<div class="display">
<!-- <NavBar /> -->
<div class="main">
<div class="content">
<el-row :gutter="20">
<el-col :span="4" class="selectors">
<!-- <el-row class="select-card">
<div class="title">
<span>年代</span>
</div>
<div class="body">
<div class="select-group">
<div
class="select-items"
v-for="(item, index) in years"
:key="index"
>
<div class="check-box"></div>
<div class="check-value">{{ item }}</div>
</div>
</div>
</div>
</el-row> -->
<!-- <el-row class="select-card">
<div class="title">
<span>分类</span>
</div>
<div class="body">
<div class="select-group">
<div
class="select-items"
v-for="(item, index) in dict.culturalRelicType"
:key="index"
>
<div class="check-box">
</div>
<div class="check-value">{{ item }}</div>
</div>
</div>
</div>
</el-row> -->
</el-col>
<el-col :span="24" class="rclist">
<div class="search">
<el-input
v-model="keyword"
class="search-bar"
@keyup.enter.native="search" clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input>
</div>
<div class="display-group">
<div class="total">
<span>{{ list.total }}</span
>件
</div>
<!-- <div class="divider"></div> -->
<el-row :gutter="10">
<el-col
:span="6"
class="cr-box"
display-item
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="img">
<img :src="item.faceImageUrl" alt="" srcset="" />
<!-- <div class="collect">
<div class="collect-box">
<img src="@/assets/imgs/like.png" alt="" srcset="" />
</div>
</div> -->
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <Footer /> -->
</div>
</template>
<script>
// import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getCulturalRelicList } from "@/api/culturalRelic";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
// components: { SearchBar },
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
currentType: "all",
list: {
records: [],
size: 40,
current: 1,
total: 0,
},
// years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
// types: ["青铜", "石器"],
};
},
// dicts: ["culturalRelicYears", "cultural_relic_texture", "culturalRelicType"],
created() {
setTimeout(() => {
// console.log(this.dicts);
});
},
mounted() {
this.loadData();
},
methods: {
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
async search() {
var params = {
page: this.list.current,
limit: this.list.size,
name: this.keyword,
};
console.log("params", params);
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
handleClick(item) {
console.log(item);
const { crId } = item;
this.$router.push({
path: "culturalRelic/" + crId,
});
},
},
};
</script>
<style lang="scss" scoped>
$blue: #1e5fbb;
$text-indent: 16px;
.display {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.main {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 60px;
.search {
display: flex;
justify-content: flex-end;
margin-top: 20px;
.search-bar {
margin-bottom: 20px;
width: 400px;
border-radius: 48px !important;
}
}
.total {
margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
}
.content {
width: 100%;
.selectors {
margin-top: 80px;
.select-card {
width: 100%;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
border-radius: 8px;
margin-bottom: 16px;
.title {
padding: 10px 20px;
background-color: #1e5fbb;
border-radius: 8px 8px 0 0;
color: #fff;
font-weight: bold;
}
.body {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex;
margin-bottom: 20px;
cursor: pointer;
margin-top: 24px;
.check-box {
border: 2px solid #563f17;
width: 20px;
height: 20px;
margin-right: 15px;
i {
color: $blue;
width: 2px;
font-weight: bold;
}
}
.check-value {
color: #563f17;
font-size: 14px;
font-weight: bold;
}
}
}
}
}
.rclist {
.img {
width: 100%;
margin-bottom: 10px;
position: relative;
img {
width: 100%;
}
.collect {
position: absolute;
right: 20px;
bottom: 20px;
.collect-box {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
cursor: pointer;
img {
width: 20px;
height: 20px;
opacity: 0.5;
}
}
}
}
}
}
}
.pagination {
margin-top: 24px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ a55db14b
......@@ -2,44 +2,81 @@
<div class="cultural-relic">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="main">
<div class="content-wrapper">
<div class="content">
<el-row :gutter="20">
<el-col :span="24" class="rclist">
<div class="search">
<!-- <el-input
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
精选藏品
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
class="search-bar"
placeholder="关键词"
@keyup.enter.native="search"
clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input> -->
<SearchBar @search="search" :keyword="keyword" />
<el-checkbox v-model="show3d">只看3D</el-checkbox>
</div>
<div class="display-group">
<!-- <div class="total">
<span>{{ list.total }}</span
>件
>
</el-input>
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
style="width: 100%"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.culturalRelicType"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
<el-cascader
class="years item"
style="width: 100%"
v-model="years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
placeholder="请选择文物年代"
filterable
@change="handleYearsChange"
clearable
>
</el-cascader>
<div class="threeD item" @click="handleClickThreeD">
<div class="box">
<i class="el-icon-check" v-show="onlyShow3d"></i>
</div>
<div class="text">只看3D</div>
</div>
<div class="divider"></div> -->
<el-row :gutter="60" >
<el-col
:span="6"
class="display-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
<div class="search-button" @click="search">搜 索</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="6"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
>
<div class="img" v-if="item.faceImageUrl">
<el-image
:src="item.faceImageUrl"
alt=""
srcset=""
v-if="item.faceImageUrl"
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
width="100%"
@error="defImg"
class="cr-img"
class="img"
lazy
/>
<img
......@@ -48,35 +85,41 @@
alt=""
width="100%"
height="100%"
class="img"
/>
<div class="showIcon" v-show="item.url3d">
<img src="@/assets/imgs/cr/3d.png" class="icon" />
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
<div class="showIcon" v-if="item && item.url3d">
<img src="@/assets/imgs/cr/3D.png" class="icon" />
<div class="text" @click.stop="handleTo3D(item.url3d)">
点击查看3D链接
</div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div>
</template>
......@@ -86,62 +129,72 @@ import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getCulturalRelicList } from "@/api/culturalRelic";
// import defaultImg from "@/assets/404_images/no-pic.png";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
data() {
return {
selectValue: "",
keyword: "",
currentType: "all",
list: {
records: [],
size: 40,
size: 20,
current: 1,
total: 0,
},
show3d: false,
culturalRelicYearsProps: {
value: "value",
label: "label",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
years: "",
};
},
computed: {
...mapGetters(["dicts"]),
},
async created() {
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
},
watch: {
show3d(value) {
let flag3d = value ? "1" : "0";
const params = {
flag3d: flag3d,
page: this.list.current,
limit: this.list.size,
};
getCulturalRelicList(params).then((res) => {
if (res.code == 0) {
this.list = res.data;
}
});
onlyShow3d(value) {
this.onlyShow3d = value;
this.search();
},
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
},
methods: {
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
search() {
this.loadData();
},
async search(keyword) {
var params = {
async loadData() {
const params = {
flag3d: this.onlyShow3d ? "1" : "0",
page: this.list.current,
limit: this.list.size,
name: keyword,
name: this.keyword,
type: this.type,
years: this.years,
};
console.log("params", params);
if (params.years.length == 0) {
delete params.years;
}
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
......@@ -166,158 +219,185 @@ export default {
path: "culturalRelic/" + crId,
});
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleTypeChange(value) {
this.type = value;
this.loadData();
},
handleYearsChange(value) {
this.years = value;
this.loadData();
},
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
},
};
</script>
<style lang="scss" scoped>
$blue: #1e5fbb;
$blue: #2069c4;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.main {
display: flex;
align-items: center;
flex-direction: column;
padding: 60px;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px;
// margin-top: 20px;
}
.search-bar {
width: 1200px;
margin-right: 10px;
// border-radius: 48px !important;
}
.total {
margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
.item {
margin-right: 20px;
}
.threeD {
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
}
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
}
}
.content {
width: 100%;
.selectors {
margin-top: 80px;
.select-card {
width: 100%;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
border-radius: 8px;
margin-bottom: 16px;
.title {
padding: 10px 20px;
background-color: #1e5fbb;
border-radius: 8px 8px 0 0;
color: #fff;
font-weight: bold;
}
.body {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex;
margin-bottom: 20px;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
}
.desc {
background-color: $blue;
color: #fff;
}
}
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
margin-top: 24px;
.check-box {
border: 2px solid #563f17;
width: 20px;
height: 20px;
margin-right: 15px;
i {
color: $blue;
width: 2px;
font-weight: bold;
transition: all 0.5s ease;
overflow: hidden;
&:hover {
img {
transform: scale(1.2);
}
}
.check-value {
color: #563f17;
font-size: 14px;
font-weight: bold;
img {
height: 100%;
object-fit: contain;
// width: auto;
}
}
}
}
}
.rclist {
.img {
width: 100%;
margin-bottom: 10px;
position: relative;
.cr-img {
width: 100%;
height: 280px;
}
.showIcon {
position: absolute;
opacity: 0.7;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background-color: #fff;
opacity: 0.2;
border-radius: 4px;
padding: 2px;
.icon {
width: 100%;
height: 100%;
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
}
.desc {
position: absolute;
width: 100%;
padding: 10px;
background-color: #fff;
opacity: 0.7;
bottom: 0;
left: 0;
}
.collect {
position: absolute;
right: 20px;
bottom: 20px;
.collect-box {
width: 40px;
height: 40px;
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
// background-color: rgba(0, 0, 0, 0.1);
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
cursor: pointer;
img {
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
background-color: $blue;
}
.icon {
width: 20px;
height: 20px;
opacity: 0.5;
display: inline-block;
}
.text {
font-size: 14px;
color: #FFF;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
.display-item {
cursor: pointer;
.img {
img {
width: 100%;
height: 250px;
}
}
}
......@@ -326,9 +406,22 @@ $text-indent: 16px;
}
.pagination {
margin-top: 24px;
margin: 24px;
display: flex;
justify-content: center;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
.el-input__inner {
border: none;
border-radius: 0;
}
}
</style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ a55db14b
<template>
<div class="display">
<div class="empty-space"></div>
<!-- <NavBar /> -->
<div class="main">
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="20">
<el-col :span="24" class="rclist">
<div class="search">
<!-- <el-input
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
精选展览
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
class="search-bar"
placeholder="关键词"
@keyup.enter.native="search"
clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input> -->
<SearchBar @search="search" :keyword="keyword" :options="searchOptions" />
>
</el-input>
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
style="width: 100%"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.display_type"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<div class="search-button" @click="search">搜 索</div>
</div>
<div class="display-group">
<!-- <div class="total">
<span>{{ list.total }}</span
>件
</div>
<div class="divider"></div> -->
<el-row :gutter="60">
<el-col
:span="8"
class="display-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
>
<div class="img" v-if="item.faceImageUrl">
<el-image
:src="item.faceImageUrl"
alt=""
srcset=""
v-if="item.faceImageUrl"
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
width="100%"
@error="defImg"
class="img"
lazy
style=" width: 100%"
/>
<img
v-else
......@@ -47,32 +80,35 @@
alt=""
width="100%"
height="100%"
class="img"
/>
<div class="desc">
<span class="name">{{ item.title }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
<div class="desc">
<span class="name">{{ item.title }}</span>
</div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div>
</template>
......@@ -82,52 +118,65 @@ import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getList } from "@/api/display";
// import defaultImg from "@/assets/404_images/no-pic.png";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
data() {
return {
selectValue: "",
keyword: "", //搜索关键词
searchOptions:[
{label:'展览类型',value:''}
],
currentType: "all",
list: {
records: [],
size: 40,
size: 20,
current: 1,
total: 0,
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionTree: [],
};
},
created() {
setTimeout(() => {
// console.log(this.dicts);
});
computed: {
...mapGetters(["dicts"]),
},
async created() {
await this.$store.dispatch("dict/getDictList", ["display_type"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
this.loadRegionTree();
},
watch: {
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
},
methods: {
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getList(params);
if (res.code == 0) {
this.list = res.data;
}
search() {
this.loadData();
},
async search(keyword) {
var params = {
async loadData() {
const params = {
page: this.list.current,
limit: this.list.size,
title: keyword,
name: this.keyword,
type: this.type,
regionCode: this.regionCode[this.regionCode.length-1],
};
let res = await getList(params);
if (res.code == 0) {
......@@ -153,143 +202,199 @@ export default {
path: "display/" + exhibitionId,
});
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleTypeChange(value) {
this.type = value;
this.loadData();
},
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value;
this.loadData();
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
// loadRegionData() {
// this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
// this.museumTree = res[0].children;
// });
// },
},
};
</script>
<style lang="scss" scoped>
$blue: #1e5fbb;
$blue: #2069c4;
$text-indent: 16px;
.display {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.main {
display: flex;
align-items: center;
flex-direction: column;
padding: 60px;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
// justify-content: flex-end;
// margin-top: 20px;
.search-bar {
margin-bottom: 40px;
width: 1200px;
padding: 0 40px;
}
}
.total {
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
}
.content {
width: 1200px;
// background-color: #fff;
// padding: 60px;
.selectors {
margin-top: 80px;
.select-card {
width: 100%;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
border-radius: 8px;
margin-bottom: 16px;
.title {
padding: 10px 20px;
background-color: #1e5fbb;
border-radius: 8px 8px 0 0;
color: #fff;
font-weight: bold;
.item {
margin-right: 20px;
}
.threeD {
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
.body {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex;
margin-bottom: 20px;
cursor: pointer;
margin-top: 24px;
.check-box {
border: 2px solid #563f17;
width: 20px;
height: 20px;
margin-right: 15px;
i {
color: $blue;
width: 2px;
font-weight: bold;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
}
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
}
}
.content {
width: 100%;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
}
.check-value {
color: #563f17;
font-size: 14px;
font-weight: bold;
.desc {
background-color: $blue;
color: #fff;
}
}
}
}
}
.rclist {
.img {
width: 100%;
margin-bottom: 10px;
position: relative;
img {
width: 100%;
}
.desc {
position: absolute;
width: 100%;
padding: 10px;
background-color: #fff;
opacity: 0.7;
bottom: 0;
left: 0;
}
.collect {
position: absolute;
right: 20px;
bottom: 20px;
.collect-box {
width: 40px;
height: 40px;
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
height: 100%;
object-fit: contain;
// width: auto;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
cursor: pointer;
img {
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
height: 20px;
opacity: 0.5;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
.display-item {
cursor: pointer;
margin-bottom: 20px;
.img {
img {
width: 100%;
height: 250px;
}
}
}
......@@ -298,9 +403,22 @@ $text-indent: 16px;
}
.pagination {
margin-top: 24px;
margin: 24px;
display: flex;
justify-content: center;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
.el-input__inner {
border: none;
border-radius: 0;
}
}
</style>
\ No newline at end of file
src/views/home/components/Virtural.vue
浏览文件 @ a55db14b
......@@ -47,7 +47,7 @@
</template>
<script>
import { getVrRecommend } from "@/api/vitual";
import { getVrRecommend } from "@/api/virtual";
export default {
name: "Virtural",
data() {
......
src/views/museum/index.vue
浏览文件 @ a55db14b
<template>
<div class="museum">
<div class="display">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="main">
<div class="content-wrapper">
<div class="content">
<el-row :gutter="20">
<el-col :span="24" class="rclist">
<div class="search">
<SearchBar @search="search" />
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
博物馆
</div>
<div class="display-group">
<el-row :gutter="60">
<el-col
:span="6"
class="display-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<div class="search-button" @click="search">搜 索</div>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
>
<div class="img" v-if="item.faceImageUrl">
<div class="img">
<img
:src="item.faceImageUrl"
alt=""
srcset=""
v-if="item.faceImageUrl"
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
width="100%"
@error="defImg"
class="cr-img"
class="img"
lazy
/>
<img
v-else
......@@ -34,32 +63,35 @@
alt=""
width="100%"
height="100%"
class="img"
/>
<div class="desc">
<span class="name">{{ item.name }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
</div>
</el-col>
</el-row>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div>
</template>
......@@ -69,51 +101,66 @@ import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "Museum",
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
data() {
return {
selectValue: "",
keyword: "",
currentType: "all",
list: {
current: 1,
size: 10,
records: [],
size: 20,
current: 1,
total: 0,
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionTree: [],
};
},
created() {
setTimeout(() => {
// console.log(this.dicts);
});
computed: {
...mapGetters(["dicts"]),
},
async created() {
await this.$store.dispatch("dict/getDictList", ["display_type"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
this.loadRegionTree();
},
watch: {
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
},
methods: {
async loadData() {
var params = {
// dept: "",
page: this.list.current,
limit: this.list.size,
};
let res = await getMuseumListPage(params);
if (res.code == 0) {
this.list = res.data;
}
search() {
this.loadData();
},
async search(keyword) {
var params = {
async loadData() {
const params = {
page: this.list.current,
limit: this.list.size,
title: keyword,
name: this.keyword,
regionCode: this.regionCode[this.regionCode.length-1],
};
let res = await getList(params);
let res = await getMuseumListPage(params);
if (res.code == 0) {
this.list = res.data;
}
......@@ -131,162 +178,196 @@ export default {
},
handleClick(item) {
const { id } = item;
this.$router.push({
path: "museum/" + id,
});
window.open(item.url,'_blank')
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleTypeChange(value) {
this.type = value;
this.loadData();
},
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value;
this.loadData();
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
$blue: #1e5fbb;
$blue: #2069c4;
$text-indent: 16px;
.museum {
.display {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.main {
display: flex;
align-items: center;
flex-direction: column;
padding: 60px;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px;
// margin-top: 20px;
}
.search-bar {
width: 1200px;
margin-right: 10px;
// border-radius: 48px !important;
}
.total {
margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
.item {
margin-right: 20px;
}
.threeD {
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
}
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
}
}
.content {
width: 100%;
.selectors {
margin-top: 80px;
.select-card {
width: 100%;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
border-radius: 8px;
margin-bottom: 16px;
.title {
padding: 10px 20px;
background-color: #1e5fbb;
border-radius: 8px 8px 0 0;
color: #fff;
font-weight: bold;
}
.body {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex;
margin-bottom: 20px;
cursor: pointer;
margin-top: 24px;
.check-box {
border: 2px solid #563f17;
width: 20px;
height: 20px;
margin-right: 15px;
i {
color: $blue;
width: 2px;
font-weight: bold;
}
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
}
.check-value {
color: #563f17;
font-size: 14px;
font-weight: bold;
.desc {
background-color: $blue;
color: #fff;
}
}
}
}
}
.rclist {
.img {
width: 100%;
margin-bottom: 10px;
position: relative;
.cr-img {
width: 100%;
}
.showIcon {
position: absolute;
opacity: 0.7;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background-color: #fff;
opacity: 0.2;
border-radius: 4px;
padding: 2px;
.icon {
width: 100%;
height: 100%;
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
height: 100%;
object-fit: contain;
// width: auto;
}
}
}
.desc {
position: absolute;
width: 100%;
padding: 10px;
background-color: #fff;
opacity: 0.7;
bottom: 0;
left: 0;
}
.collect {
position: absolute;
right: 20px;
bottom: 20px;
.collect-box {
width: 40px;
height: 40px;
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
cursor: pointer;
img {
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
height: 20px;
opacity: 0.5;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
.display-item {
cursor: pointer;
.img {
img {
width: 100%;
height: 250px;
}
}
}
......@@ -295,9 +376,22 @@ $text-indent: 16px;
}
.pagination {
margin-top: 24px;
margin: 24px;
display: flex;
justify-content: center;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
.el-input__inner {
border: none;
border-radius: 0;
}
}
</style>
\ No newline at end of file
src/views/personal/components/Card/index.vue
浏览文件 @ a55db14b
<template>
<div class="display-item">
<el-image :src="url" width="100%" :alt="title" style="height:200px;" lazy fit="fill"/>
<div class="display-desc">
<div class="desc-title">
<span>{{ title }}</span>
</div>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="url"
>
<div class="img">
<img
:src="url"
v-if="url"
width="100%"
class="img"
lazy
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
<div class="desc">
<span class="name">{{ title }}</span>
</div>
</div>
</template>
......@@ -22,50 +39,88 @@ export default {
default: "",
},
},
methods:{
}
methods: {},
};
</script>
<style lang='scss' scoped>
.display-item {
width: 100%;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #fff;
margin-right: 10px;
$blue: #2069c4;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
&:hover {
// img {
// transform: scale(1.2);
// }
.desc {
background-color: $blue;
color: #fff;
}
}
.display-desc {
padding: 0 16px;
.desc-title{
font-size: 18px;
font-weight: bold;
padding: 10px 0 20px 0;
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
height: 100%;
object-fit: contain;
// width: auto;
}
// .desc-content {
// text-indent: 16px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// display: block;
// }
}
}
::v-deep .el-image {
height: 350px;
width: 100%;
img {
border-radius: 16px 16px 0 0;
height: 100%;
width: 100%;
.desc {
padding: 16px;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/views/personal/components/Collection.vue
浏览文件 @ a55db14b
......@@ -7,11 +7,14 @@
:label="tab.title"
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
<el-row :gutter="20" v-if="list.records.length > 0">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImagePressUrl"
/></el-col>
</el-row>
<div v-else>
<el-empty description="描述文字"></el-empty>
</div>
</el-tab-pane>
</el-tabs>
<div class="pagination">
......@@ -69,7 +72,7 @@ export default {
],
activeName: "biz_cultural_relic",
list: {
records: {},
records: [],
size: 10,
current: 1,
total: 0,
......@@ -150,4 +153,7 @@ export default {
}
}
}
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/components/Footprint.vue
浏览文件 @ a55db14b
......@@ -8,7 +8,7 @@
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
/></el-col>
</el-row>
......@@ -144,4 +144,7 @@ export default {
}
}
}
.pagination{
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/components/Like.vue
浏览文件 @ a55db14b
......@@ -9,7 +9,7 @@
>
<el-row :gutter="20">
<el-col
:span="6"
:span="8"
v-for="(item, index) in list.records"
:key="index"
@click.native="handleClick(item)"
......@@ -169,4 +169,7 @@ export default {
}
}
}
.pagination{
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ a55db14b
......@@ -2,18 +2,22 @@
<div class="personal">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞">
<Like />
</el-tab-pane>
<el-tab-pane label="我的收藏">
<Collection />
</el-tab-pane>
<el-tab-pane label="浏览记录">
<Footprint />
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
<div class="content-wrapper">
<div class="main">
<el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞">
<Like />
</el-tab-pane>
<el-tab-pane label="我的收藏">
<Collection />
</el-tab-pane>
<el-tab-pane label="浏览记录">
<Footprint />
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
</div>
</div>
<!-- <Footer /> -->
</div>
</template>
......@@ -40,6 +44,7 @@ export default {
return {
relateRelics: relateRelics,
exhibitions: exhibitions,
list: ["我的点赞", "我的收藏", "浏览记录", "个人信息"],
};
},
methods: {
......@@ -54,11 +59,54 @@ export default {
</script>
<style lang='scss' scoped>
$blue: #2069c4;
.personal {
// width: 1200px;
margin: auto;
.wrapper{
padding: 60px;
.content-wrapper {
background-color: #fff;
align-items: flex-start;
.main {
padding: 40px;
}
}
}
::v-deep {
.el-tabs__header .is-left {
width: 200px;
border: none;
}
}
::v-deep {
.el-tabs--left.el-tabs--card .el-tabs__item.is-left {
color: #333;
background: #f7f7f7;
display: flex;
justify-content: center;
border: none;
}
}
::v-deep {
.el-tabs--left.el-tabs--card .el-tabs__item.is-active {
background-color: #eeeeee;
color: $blue;
font-weight: bold;
}
}
::v-deep{
.el-tabs__nav.is-top{
display: flex;
}
}
::v-deep{
.el-tabs__item.is-top.is-active{
width: 100px;
display: flex;
justify-content: center;
}
.el-tabs__active-bar.is-top{
width: 100px !important;
}
}
</style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ a55db14b
<template>
<div class="virtual">
<div class="display">
<!-- <NavBar /> -->
<!-- <h1>虚拟展厅</h1> -->
<!-- <Footer /> -->
<div class="empty-space"></div>
<div class="main">
<div class="content-wrapper">
<el-row :gutter="20">
<el-col :span="24" class="rclist">
<div class="search">
<SearchBar @search="search" :keyword="keyword" />
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
<el-col :span="24">
<div class="title wow animate__animated animate__fadeInLeft">
虚拟展厅
</div>
<div
class="bottom-line wow animate__animated animate__fadeInLeft"
></div>
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
style="width: 100%"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<div class="search-button" @click="search">搜 索</div>
</div>
<div class="display-group">
<el-row :gutter="40" class="list">
<el-col
:span="8"
v-for="(item, index) in list.records"
:key="index"
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
>
<div class="img" @click="handleClick(item.url)">
<img :src="item.faceImageUrl" alt="" />
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
<div class="play">
<i class="el-icon-caret-right"></i>
</div>
<div class="img">
<img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
width="100%"
class="img"
lazy
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import { getVirtualList } from "@/api/vitual";
import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getVirtualList } from "@/api/virtual";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "Virtual",
components: { NavBar, Footer, SearchBar },
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
components: { SearchBar },
data() {
return {
list: {
records: [],
size: 10,
size: 20,
current: 1,
total: 0,
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionTree: [],
};
},
computed: {
...mapGetters(["dicts"]),
},
async created() {
await this.$store.dispatch("dict/getDictList", ["display_type"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
this.loadRegionTree();
},
watch: {
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
},
methods: {
// 加载表格数据
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;
}
search() {
this.loadData();
},
async search(keyword) {
var params = {
async loadData() {
const params = {
page: this.list.current,
limit: this.list.size,
name: keyword,
name: this.keyword,
regionCode: this.regionCode[this.regionCode.length-1],
};
let res = await getVirtualList(params);
if (res.code == 0) {
......@@ -108,89 +177,226 @@ export default {
this.loadData();
},
handleClick(url) {
window.open(url);
handleClick(item) {
window.open(item.url,'_blank')
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleTypeChange(value) {
this.type = value;
this.loadData();
},
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value;
this.loadData();
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
// loadRegionData() {
// this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
// this.museumTree = res[0].children;
// });
// },
},
};
</script>
<style lang='scss' scoped>
$blue: #1e5fbb;
<style lang="scss" scoped>
$blue: #2069c4;
$text-indent: 16px;
.virtual {
.display {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.main {
display: flex;
align-items: center;
flex-direction: column;
padding: 60px;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search {
display: flex;
justify-content: center;
// justify-content: flex-end;
// margin-top: 20px;
.search-bar {
margin-bottom: 40px;
// width: 400px;
width: 1200px;
// border-radius: 48px !important;
}
}
align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px;
.img {
width: 100%;
position: relative;
overflow: hidden;
height: 350px;
margin-bottom: 20px;
// background-color: #fff;
cursor: pointer;
&:hover {
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 100%;
transition: all 0.5s ease;
.item {
margin-right: 20px;
}
.desc {
position: absolute;
width: 100%;
padding: 10px;
background-color: #fff;
opacity: 0.7;
bottom: 0;
left: 0;
.threeD {
display: flex;
width: 420px;
cursor: pointer;
.box {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17;
margin-right: 6px;
i {
font-size: 28px;
}
}
.text {
display: flex;
justify-content: center;
align-items: center;
}
}
.play {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 40px;
color: #fff;
background-color: $blue;
color: #fff;
}
}
.content {
width: 100%;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
}
.desc {
background-color: $blue;
color: #fff;
}
}
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
height: 100%;
object-fit: contain;
// width: auto;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
.pagination {
margin-top: 24px;
margin: 24px;
display: flex;
justify-content: center;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
color: $blue;
font-weight: bold;
}
::v-deep .el-input {
.el-input__inner {
border: none;
border-radius: 0;
}
}
</style>
\ No newline at end of file
vue.config.js
浏览文件 @ a55db14b
......@@ -42,7 +42,7 @@ module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //关闭eslint检查
devServer: {
host: 'http://172.24.100.18',
host: 'localhost',
port: '8080',
open: true,
hot: true,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论