Skip to content

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

优化界面一版

上级 050a04dd
显示空白字符变更
内嵌 并排
正在显示 包含 1392 行增加 和 912 行删除
src/api/dict.js
浏览文件 @ a55db14b
...@@ -11,3 +11,16 @@ export function getDictCode(data) { ...@@ -11,3 +11,16 @@ export function getDictCode(data) {
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 = { const state = {
dicts: {}, dicts: {}, //字典
}; crList: [], //文物列表
ltList: [] //文献列表
};
const mutations = { const mutations = {
SET_DICTS(state, obj) { SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value; 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)
})
}
},
export default { /**
* 获取文物列表
* @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, namespaced: true,
state, state,
actions,
mutations, mutations,
}; };
\ No newline at end of file
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 @@ ...@@ -2,44 +2,81 @@
<div class="cultural-relic"> <div class="cultural-relic">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div> <div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="main"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="20"> <el-row :gutter="40">
<el-col :span="24" class="rclist"> <el-col :span="24">
<div class="search"> <div class="title wow animate__animated animate__fadeInLeft">
<!-- <el-input 精选藏品
</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" v-model="keyword"
class="search-bar" placeholder="关键词"
@keyup.enter.native="search" @keyup.enter.native="search"
clearable clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i >
></el-input> --> </el-input>
<SearchBar @search="search" :keyword="keyword" /> <el-select
<el-checkbox v-model="show3d">只看3D</el-checkbox> 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>
<div class="display-group"> <div class="search-button" @click="search">搜 索</div>
<!-- <div class="total">
<span>{{ list.total }}</span
>件
</div> </div>
<div class="divider"></div> --> <el-row :gutter="40" class="cr-list">
<el-row :gutter="60" >
<el-col <el-col
:span="6" :span="6"
class="display-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div class="img" v-if="item.faceImageUrl"> <div
<el-image class="container wow animate__animated animate__fadeInUp"
:src="item.faceImageUrl" v-if="item.faceImagePressUrl"
alt="" >
srcset="" <div class="img">
v-if="item.faceImageUrl" <img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
width="100%" width="100%"
@error="defImg" class="img"
class="cr-img"
lazy lazy
/> />
<img <img
...@@ -48,13 +85,17 @@ ...@@ -48,13 +85,17 @@
alt="" alt=""
width="100%" width="100%"
height="100%" height="100%"
class="img"
/> />
<div class="showIcon" v-show="item.url3d"> </div>
<img src="@/assets/imgs/cr/3d.png" class="icon" /> <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> </div>
<div class="desc"> <div class="desc">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -64,19 +105,21 @@ ...@@ -64,19 +105,21 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]" :page-sizes="[20, 40, 100]"
:page-size="Number(list.size)" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="Number(list.total)" :total="Number(list.total)"
class="pagination" class="pagination"
> >
</el-pagination> </el-pagination>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> --> <!-- <Footer /> -->
</div> </div>
</template> </template>
...@@ -86,62 +129,72 @@ import SearchBar from "@/components/SearchBar"; ...@@ -86,62 +129,72 @@ import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar"; // import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer"; // import Footer from "@/components/Footer";
import { getCulturalRelicList } from "@/api/culturalRelic"; 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 { export default {
name: "CulturalRelic", name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer }, // components: { SearchBar, NavBar, Footer },
components: { SearchBar }, components: { SearchBar },
data() { data() {
return { return {
selectValue: "",
keyword: "",
currentType: "all",
list: { list: {
records: [], records: [],
size: 40, size: 20,
current: 1, current: 1,
total: 0, 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() { mounted() {
this.loadData(); this.loadData();
}, },
watch: { watch: {
show3d(value) { onlyShow3d(value) {
let flag3d = value ? "1" : "0"; this.onlyShow3d = value;
const params = { this.search();
flag3d: flag3d, },
page: this.list.current, keyword(value) {
limit: this.list.size, debounce(this.handleKeyWordChange(value), 1000); //500ms
};
getCulturalRelicList(params).then((res) => {
if (res.code == 0) {
this.list = res.data;
}
});
}, },
}, },
methods: { methods: {
async loadData() { search() {
var params = { this.loadData();
page: this.list.current,
limit: this.list.size,
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
}, },
async search(keyword) { async loadData() {
var params = { const params = {
flag3d: this.onlyShow3d ? "1" : "0",
page: this.list.current, page: this.list.current,
limit: this.list.size, 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); let res = await getCulturalRelicList(params);
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
...@@ -166,158 +219,185 @@ export default { ...@@ -166,158 +219,185 @@ export default {
path: "culturalRelic/" + crId, path: "culturalRelic/" + crId,
}); });
}, },
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
},
defImg(e) { defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png"); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #1e5fbb; $blue: #2069c4;
$text-indent: 16px; $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: #2069c4;
// color: #fff; // color: #fff;
.main { .content-wrapper {
display: flex; padding-top: 60px;
align-items: center; background-color: #fff;
flex-direction: column; .title {
padding: 60px; font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search { .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px; margin-bottom: 40px;
// margin-top: 20px;
}
.search-bar {
width: 1200px;
margin-right: 10px;
// border-radius: 48px !important;
}
.total { .item {
margin-bottom: 40px; margin-right: 20px;
}
.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 { .threeD {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex; display: flex;
margin-bottom: 20px; width: 420px;
cursor: pointer; cursor: pointer;
margin-top: 24px; .box {
.check-box { width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17; border: 2px solid #563f17;
width: 20px; margin-right: 6px;
height: 20px;
margin-right: 15px;
i { i {
color: $blue; font-size: 28px;
width: 2px;
font-weight: bold;
}
} }
.check-value {
color: #563f17;
font-size: 14px;
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;
} }
} }
.rclist { .content {
.img {
width: 100%; width: 100%;
margin-bottom: 10px; .cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative; position: relative;
.cr-img { display: flex;
width: 100%; flex-direction: column;
height: 280px; cursor: pointer;
&:hover {
img {
transform: scale(1.2);
} }
.showIcon { .desc {
position: absolute; background-color: $blue;
opacity: 0.7; color: #fff;
top: 10px; }
right: 10px; }
width: 24px; .img {
height: 24px; background-color: #f8f8f8;
background-color: #fff; height: 240px;
opacity: 0.2; cursor: pointer;
border-radius: 4px; transition: all 0.5s ease;
padding: 2px; overflow: hidden;
.icon { &:hover {
width: 100%; img {
transform: scale(1.2);
}
}
img {
height: 100%; height: 100%;
object-fit: contain;
// width: auto;
} }
} }
.desc { .desc {
position: absolute; padding: 16px 0;
width: 100%; display: flex;
padding: 10px; justify-content: center;
background-color: #fff; transition: all 0.5s ease;
opacity: 0.7; flex: 1;
bottom: 0;
left: 0;
} }
.showIcon {
.collect {
position: absolute; position: absolute;
right: 20px; top: 10px;
bottom: 20px; right: 10px;
.collect-box { z-index: 99;
width: 40px; // background-color: rgba(0, 0, 0, 0.1);
height: 40px; height: 28px;
padding: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.15); transition: all 0.3s ease;
border-radius: 8px; width: 28px;
cursor: pointer; white-space: nowrap;
img { overflow: hidden;
width: 20px; &:hover {
height: 20px; .icon {
opacity: 0.5; display: none;
} }
.text {
display: block;
} }
width: 130px;
padding: 4px 8px;
background-color: $blue;
} }
.icon {
width: 20px;
display: inline-block;
} }
.text {
.display-item { font-size: 14px;
color: #FFF;
padding: 4px 8px;
cursor: pointer; cursor: pointer;
.img { display: none;
}
img { img {
width: 100%; width: 100%;
height: 250px; height: 100%;
}
} }
} }
} }
...@@ -326,9 +406,22 @@ $text-indent: 16px; ...@@ -326,9 +406,22 @@ $text-indent: 16px;
} }
.pagination { .pagination {
margin-top: 24px; margin: 24px;
display: flex; display: flex;
justify-content: center; 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> </style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ a55db14b
<template> <template>
<div class="display"> <div class="display">
<div class="empty-space"></div>
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div class="main"> <div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="20"> <el-row :gutter="40">
<el-col :span="24" class="rclist"> <el-col :span="24">
<div class="search"> <div class="title wow animate__animated animate__fadeInLeft">
<!-- <el-input 精选展览
</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" v-model="keyword"
class="search-bar" placeholder="关键词"
@keyup.enter.native="search" @keyup.enter.native="search"
clearable clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i >
></el-input> --> </el-input>
<SearchBar @search="search" :keyword="keyword" :options="searchOptions" /> <el-select
</div> class="type item"
<div class="display-group"> v-model="type"
<!-- <div class="total"> placeholder="所属类别"
<span>{{ list.total }}</span 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>
<div class="divider"></div> --> <el-row :gutter="40" class="cr-list">
<el-row :gutter="60">
<el-col <el-col
:span="8" :span="8"
class="display-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div class="img" v-if="item.faceImageUrl"> <div
<el-image class="container wow animate__animated animate__fadeInUp"
:src="item.faceImageUrl" v-if="item.faceImagePressUrl"
alt="" >
srcset="" <div class="img">
v-if="item.faceImageUrl" <img
:src="item.faceImagePressUrl"
v-if="item.faceImagePressUrl"
width="100%" width="100%"
@error="defImg" class="img"
lazy lazy
style=" width: 100%"
/> />
<img <img
v-else v-else
...@@ -47,10 +80,11 @@ ...@@ -47,10 +80,11 @@
alt="" alt=""
width="100%" width="100%"
height="100%" height="100%"
class="img"
/> />
</div>
<div class="desc"> <div class="desc">
<span class="name">{{ item.title }}</span> <span class="name">{{ item.title }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -60,19 +94,21 @@ ...@@ -60,19 +94,21 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]" :page-sizes="[20, 40, 100]"
:page-size="Number(list.size)" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="Number(list.total)" :total="Number(list.total)"
class="pagination" class="pagination"
> >
</el-pagination> </el-pagination>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> --> <!-- <Footer /> -->
</div> </div>
</template> </template>
...@@ -82,52 +118,65 @@ import SearchBar from "@/components/SearchBar"; ...@@ -82,52 +118,65 @@ import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar"; // import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer"; // import Footer from "@/components/Footer";
import { getList } from "@/api/display"; 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 { export default {
name: "CulturalRelic", name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer }, // components: { SearchBar, NavBar, Footer },
components: { SearchBar }, components: { SearchBar },
data() { data() {
return { return {
selectValue: "",
keyword: "", //搜索关键词
searchOptions:[
{label:'展览类型',value:''}
],
currentType: "all",
list: { list: {
records: [], records: [],
size: 40, size: 20,
current: 1, current: 1,
total: 0, total: 0,
}, },
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionTree: [],
}; };
}, },
created() { computed: {
setTimeout(() => { ...mapGetters(["dicts"]),
// console.log(this.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() { mounted() {
this.loadData(); this.loadData();
this.loadRegionTree();
},
watch: {
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
}, },
methods: { methods: {
async loadData() { search() {
var params = { this.loadData();
page: this.list.current,
limit: this.list.size,
};
let res = await getList(params);
if (res.code == 0) {
this.list = res.data;
}
}, },
async search(keyword) { async loadData() {
var params = { const params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
title: keyword, name: this.keyword,
type: this.type,
regionCode: this.regionCode[this.regionCode.length-1],
}; };
let res = await getList(params); let res = await getList(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -153,143 +202,199 @@ export default { ...@@ -153,143 +202,199 @@ export default {
path: "display/" + exhibitionId, path: "display/" + exhibitionId,
}); });
}, },
defImg(e) { defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png"); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #1e5fbb; $blue: #2069c4;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: #2069c4;
// color: #fff; // color: #fff;
.main { .content-wrapper {
display: flex; padding-top: 60px;
align-items: center; background-color: #fff;
flex-direction: column; .title {
padding: 60px; font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search { .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
// justify-content: flex-end; align-items: center;
// margin-top: 20px; background-color: rgba($blue, 0.2);
.search-bar { padding: 20px 40px;
margin-bottom: 40px; margin-bottom: 40px;
width: 1200px;
padding: 0 40px;
}
}
.total { .item {
margin-bottom: 40px; margin-right: 20px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
} }
.threeD {
.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;
}
.body {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex; display: flex;
margin-bottom: 20px; width: 420px;
cursor: pointer; cursor: pointer;
margin-top: 24px; .box {
.check-box { width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17; border: 2px solid #563f17;
width: 20px; margin-right: 6px;
height: 20px;
margin-right: 15px;
i { i {
color: $blue; font-size: 28px;
width: 2px;
font-weight: bold;
}
} }
.check-value {
color: #563f17;
font-size: 14px;
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;
} }
} }
.rclist { .content {
.img {
width: 100%; width: 100%;
margin-bottom: 10px; .cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative; position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img { img {
width: 100%; transform: scale(1.2);
} }
.desc { .desc {
position: absolute; background-color: $blue;
width: 100%; color: #fff;
padding: 10px;
background-color: #fff;
opacity: 0.7;
bottom: 0;
left: 0;
} }
}
.collect { .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; position: absolute;
right: 20px; top: 10px;
bottom: 20px; right: 10px;
.collect-box { z-index: 99;
width: 40px; background-color: rgba(0, 0, 0, 0.1);
height: 40px; border-radius: 4px;
height: 28px;
padding: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.15); transition: all 0.3s ease;
border-radius: 8px; width: 28px;
cursor: pointer; white-space: nowrap;
img { overflow: hidden;
width: 20px; &:hover {
height: 20px; .icon {
opacity: 0.5; display: none;
} }
.text {
display: block;
} }
width: 130px;
padding: 4px 8px;
} }
.icon {
width: 20px;
display: inline-block;
} }
.text {
.display-item { font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer; cursor: pointer;
margin-bottom: 20px; display: none;
.img { }
img { img {
width: 100%; width: 100%;
height: 250px; height: 100%;
}
} }
} }
} }
...@@ -298,9 +403,22 @@ $text-indent: 16px; ...@@ -298,9 +403,22 @@ $text-indent: 16px;
} }
.pagination { .pagination {
margin-top: 24px; margin: 24px;
display: flex; display: flex;
justify-content: center; 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> </style>
\ No newline at end of file
src/views/home/components/Virtural.vue
浏览文件 @ a55db14b
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</template> </template>
<script> <script>
import { getVrRecommend } from "@/api/vitual"; import { getVrRecommend } from "@/api/virtual";
export default { export default {
name: "Virtural", name: "Virtural",
data() { data() {
......
src/views/museum/index.vue
浏览文件 @ a55db14b
<template> <template>
<div class="museum"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div> <div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="main"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="20"> <el-row :gutter="40">
<el-col :span="24" class="rclist"> <el-col :span="24">
<div class="search"> <div class="title wow animate__animated animate__fadeInLeft">
<SearchBar @search="search" /> 博物馆
</div> </div>
<div class="display-group"> <div
<el-row :gutter="60"> 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 <el-col
:span="6" :span="8"
class="display-item" class="cr-item"
@click.native="handleClick(item)" @click.native="handleClick(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div class="img" v-if="item.faceImageUrl"> <div
class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
>
<div class="img">
<img <img
:src="item.faceImageUrl" :src="item.faceImagePressUrl"
alt="" v-if="item.faceImagePressUrl"
srcset=""
v-if="item.faceImageUrl"
width="100%" width="100%"
@error="defImg" class="img"
class="cr-img" lazy
/> />
<img <img
v-else v-else
...@@ -34,32 +63,35 @@ ...@@ -34,32 +63,35 @@
alt="" alt=""
width="100%" width="100%"
height="100%" height="100%"
class="img"
/> />
</div>
<div class="desc"> <div class="desc">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
</div> </div>
</el-col>
</el-row>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]" :page-sizes="[20, 40, 100]"
:page-size="Number(list.size)" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="Number(list.total)" :total="Number(list.total)"
class="pagination" class="pagination"
> >
</el-pagination> </el-pagination>
</div> </div>
</el-col>
</el-row>
</div> </div>
</div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> --> <!-- <Footer /> -->
</div> </div>
</template> </template>
...@@ -69,51 +101,66 @@ import SearchBar from "@/components/SearchBar"; ...@@ -69,51 +101,66 @@ import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar"; // import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer"; // import Footer from "@/components/Footer";
import { getMuseumListPage } from "@/api/org"; import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default { export default {
name: "Museum", name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer }, // components: { SearchBar, NavBar, Footer },
components: { SearchBar }, components: { SearchBar },
data() { data() {
return { return {
selectValue: "",
keyword: "",
currentType: "all",
list: { list: {
current: 1,
size: 10,
records: [], records: [],
size: 20,
current: 1,
total: 0, total: 0,
}, },
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionTree: [],
}; };
}, },
created() { computed: {
setTimeout(() => { ...mapGetters(["dicts"]),
// console.log(this.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() { mounted() {
this.loadData(); this.loadData();
this.loadRegionTree();
},
watch: {
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
}, },
methods: { methods: {
async loadData() { search() {
var params = { this.loadData();
// dept: "",
page: this.list.current,
limit: this.list.size,
};
let res = await getMuseumListPage(params);
if (res.code == 0) {
this.list = res.data;
}
}, },
async search(keyword) { async loadData() {
var params = { const params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, 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) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
} }
...@@ -131,162 +178,196 @@ export default { ...@@ -131,162 +178,196 @@ export default {
}, },
handleClick(item) { handleClick(item) {
const { id } = item; window.open(item.url,'_blank')
this.$router.push({
path: "museum/" + id,
});
}, },
defImg(e) { defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png"); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #1e5fbb; $blue: #2069c4;
$text-indent: 16px; $text-indent: 16px;
.museum { .display {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: #2069c4;
// color: #fff; // color: #fff;
.main { .content-wrapper {
display: flex; padding-top: 60px;
align-items: center; background-color: #fff;
flex-direction: column; .title {
padding: 60px; font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search { .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba($blue, 0.2);
padding: 20px 40px;
margin-bottom: 40px; margin-bottom: 40px;
// margin-top: 20px;
}
.search-bar {
width: 1200px;
margin-right: 10px;
// border-radius: 48px !important;
}
.total { .item {
margin-bottom: 40px; margin-right: 20px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
} }
.threeD {
.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; display: flex;
margin-bottom: 20px; width: 420px;
cursor: pointer; cursor: pointer;
margin-top: 24px; .box {
.check-box { width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #563f17; border: 2px solid #563f17;
width: 20px; margin-right: 6px;
height: 20px;
margin-right: 15px;
i { i {
color: $blue; font-size: 28px;
width: 2px;
font-weight: bold;
} }
} }
.check-value { .text {
color: #563f17; display: flex;
font-size: 14px; justify-content: center;
font-weight: bold; align-items: center;
}
} }
} }
.search-button {
cursor: pointer;
width: 420px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: $blue;
color: #fff;
} }
} }
.rclist { .content {
.img {
width: 100%; width: 100%;
margin-bottom: 10px; .cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative; position: relative;
.cr-img { display: flex;
width: 100%; flex-direction: column;
cursor: pointer;
&:hover {
img {
transform: scale(1.2);
} }
.showIcon { .desc {
position: absolute; background-color: $blue;
opacity: 0.7; color: #fff;
top: 10px; }
right: 10px; }
width: 24px; .img {
height: 24px; background-color: #f8f8f8;
background-color: #fff; height: 240px;
opacity: 0.2; cursor: pointer;
border-radius: 4px; transition: all 0.5s ease;
padding: 2px; overflow: hidden;
.icon { img {
width: 100%;
height: 100%; height: 100%;
object-fit: contain;
// width: auto;
} }
} }
.desc { .desc {
position: absolute; padding: 16px 0;
width: 100%; display: flex;
padding: 10px; justify-content: center;
background-color: #fff; transition: all 0.5s ease;
opacity: 0.7; flex: 1;
bottom: 0;
left: 0;
} }
.showIcon {
.collect {
position: absolute; position: absolute;
right: 20px; top: 10px;
bottom: 20px; right: 10px;
.collect-box { z-index: 99;
width: 40px; background-color: rgba(0, 0, 0, 0.1);
height: 40px; border-radius: 4px;
height: 28px;
padding: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.15); transition: all 0.3s ease;
border-radius: 8px; width: 28px;
cursor: pointer; white-space: nowrap;
img { overflow: hidden;
width: 20px; &:hover {
height: 20px; .icon {
opacity: 0.5; display: none;
} }
.text {
display: block;
} }
width: 130px;
padding: 4px 8px;
} }
.icon {
width: 20px;
display: inline-block;
} }
.text {
.display-item { font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer; cursor: pointer;
.img { display: none;
}
img { img {
width: 100%; width: 100%;
height: 250px; height: 100%;
}
} }
} }
} }
...@@ -295,9 +376,22 @@ $text-indent: 16px; ...@@ -295,9 +376,22 @@ $text-indent: 16px;
} }
.pagination { .pagination {
margin-top: 24px; margin: 24px;
display: flex; display: flex;
justify-content: center; 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> </style>
\ No newline at end of file
src/views/personal/components/Card/index.vue
浏览文件 @ a55db14b
<template> <template>
<div class="display-item"> <div
<el-image :src="url" width="100%" :alt="title" style="height:200px;" lazy fit="fill"/> class="container wow animate__animated animate__fadeInUp"
<div class="display-desc"> v-if="url"
<div class="desc-title"> >
<span>{{ title }}</span> <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>
<div class="desc">
<span class="name">{{ title }}</span>
</div> </div>
</div> </div>
</template> </template>
...@@ -22,50 +39,88 @@ export default { ...@@ -22,50 +39,88 @@ export default {
default: "", default: "",
}, },
}, },
methods:{ methods: {},
}
}; };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.display-item { $blue: #2069c4;
width: 100%; .container {
margin-bottom: 32px; border: 1px solid #f1f1f1;
border-radius: 16px; height: 300px;
border: 1px solid rgba(0, 0, 0, 0.1); position: relative;
display: flex;
background-color: #fff; flex-direction: column;
margin-right: 10px;
cursor: pointer; 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 { img {
border-radius: 16px 16px 0 0; height: 100%;
object-fit: contain;
// width: auto;
} }
.display-desc {
padding: 0 16px;
.desc-title{
font-size: 18px;
font-weight: bold;
padding: 10px 0 20px 0;
} }
// .desc-content { .desc {
// text-indent: 16px; padding: 16px;
// white-space: nowrap; display: flex;
// overflow: hidden; justify-content: center;
// text-overflow: ellipsis; transition: all 0.5s ease;
// display: block; 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;
} }
}
::v-deep .el-image {
height: 350px;
width: 100%;
img { img {
border-radius: 16px 16px 0 0;
height: 100%;
width: 100%; width: 100%;
height: 100%;
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/personal/components/Collection.vue
浏览文件 @ a55db14b
...@@ -7,11 +7,14 @@ ...@@ -7,11 +7,14 @@
:label="tab.title" :label="tab.title"
:name="tab.name" :name="tab.name"
> >
<el-row :gutter="20"> <el-row :gutter="20" v-if="list.records.length > 0">
<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" <Card :title="item.title" :url="item.faceImagePressUrl"
/></el-col> /></el-col>
</el-row> </el-row>
<div v-else>
<el-empty description="描述文字"></el-empty>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="pagination"> <div class="pagination">
...@@ -69,7 +72,7 @@ export default { ...@@ -69,7 +72,7 @@ export default {
], ],
activeName: "biz_cultural_relic", activeName: "biz_cultural_relic",
list: { list: {
records: {}, records: [],
size: 10, size: 10,
current: 1, current: 1,
total: 0, total: 0,
...@@ -150,4 +153,7 @@ export default { ...@@ -150,4 +153,7 @@ export default {
} }
} }
} }
.pagination {
margin: 20px;
}
</style> </style>
\ No newline at end of file
src/views/personal/components/Footprint.vue
浏览文件 @ a55db14b
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:name="tab.name" :name="tab.name"
> >
<el-row :gutter="20"> <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" <Card :title="item.title" :url="item.faceImageUrl"
/></el-col> /></el-col>
</el-row> </el-row>
...@@ -144,4 +144,7 @@ export default { ...@@ -144,4 +144,7 @@ export default {
} }
} }
} }
.pagination{
margin: 20px;
}
</style> </style>
\ No newline at end of file
src/views/personal/components/Like.vue
浏览文件 @ a55db14b
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
> >
<el-row :gutter="20"> <el-row :gutter="20">
<el-col <el-col
:span="6" :span="8"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
@click.native="handleClick(item)" @click.native="handleClick(item)"
...@@ -169,4 +169,7 @@ export default { ...@@ -169,4 +169,7 @@ export default {
} }
} }
} }
.pagination{
margin: 20px;
}
</style> </style>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ a55db14b
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
<div class="personal"> <div class="personal">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div> <div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="main">
<el-tabs :tab-position="'left'" type="card" class="wrapper"> <el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞"> <el-tab-pane label="我的点赞">
<Like /> <Like />
...@@ -14,6 +16,8 @@ ...@@ -14,6 +16,8 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane> <el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs> </el-tabs>
</div>
</div>
<!-- <Footer /> --> <!-- <Footer /> -->
</div> </div>
</template> </template>
...@@ -40,6 +44,7 @@ export default { ...@@ -40,6 +44,7 @@ export default {
return { return {
relateRelics: relateRelics, relateRelics: relateRelics,
exhibitions: exhibitions, exhibitions: exhibitions,
list: ["我的点赞", "我的收藏", "浏览记录", "个人信息"],
}; };
}, },
methods: { methods: {
...@@ -54,11 +59,54 @@ export default { ...@@ -54,11 +59,54 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
$blue: #2069c4;
.personal { .personal {
// width: 1200px; // width: 1200px;
margin: auto; margin: auto;
.wrapper{ .content-wrapper {
padding: 60px; 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> </style>
\ No newline at end of file
src/views/virtual/index.vue
浏览文件 @ a55db14b
<template> <template>
<div class="virtual"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<!-- <h1>虚拟展厅</h1> --> <div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<!-- <Footer /> -->
<div class="empty-space"></div>
<div class="main">
<div class="content-wrapper"> <div class="content-wrapper">
<el-row :gutter="20"> <div class="content">
<el-col :span="24" class="rclist"> <el-row :gutter="40">
<div class="search"> <el-col :span="24">
<SearchBar @search="search" :keyword="keyword" /> <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>
<div class="display-group"> <el-row :gutter="40" class="cr-list">
<el-row :gutter="40" class="list">
<el-col <el-col
:span="8" :span="8"
class="cr-item"
@click.native="handleClick(item)"
v-for="(item, index) in list.records" v-for="(item, index) in list.records"
:key="index" :key="index"
> >
<div class="img" @click="handleClick(item.url)"> <div
<img :src="item.faceImageUrl" alt="" /> class="container wow animate__animated animate__fadeInUp"
v-if="item.faceImagePressUrl"
>
<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>
<div class="desc"> <div class="desc">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
</div> </div>
<div class="play">
<i class="el-icon-caret-right"></i>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -34,62 +77,88 @@ ...@@ -34,62 +77,88 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]" :page-sizes="[20, 40, 100]"
:page-size="Number(list.size)" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="Number(list.total)" :total="Number(list.total)"
class="pagination" class="pagination"
> >
</el-pagination> </el-pagination>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- <el-dialog :visible="show3dDialog">
</el-dialog> -->
<!-- <Footer /> -->
</div> </div>
</template> </template>
<script> <script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import { getVirtualList } from "@/api/vitual";
import SearchBar from "@/components/SearchBar"; 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 { export default {
name: "Virtual", name: "CulturalRelic",
components: { NavBar, Footer, SearchBar }, // components: { SearchBar, NavBar, Footer },
components: { SearchBar },
data() { data() {
return { return {
list: { list: {
records: [], records: [],
size: 10, size: 20,
current: 1, current: 1,
total: 0, total: 0,
}, },
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "", 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() { mounted() {
this.loadData(); this.loadData();
this.loadRegionTree();
},
watch: {
keyword(value) {
debounce(this.handleKeyWordChange(value), 1000); //500ms
},
}, },
methods: { methods: {
// 加载表格数据 search() {
async loadData() { this.loadData();
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getVirtualList(params);
if (res.code == 0) {
this.list = res.data;
}
}, },
async search(keyword) { async loadData() {
var params = { const params = {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
name: keyword, name: this.keyword,
regionCode: this.regionCode[this.regionCode.length-1],
}; };
let res = await getVirtualList(params); let res = await getVirtualList(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -108,89 +177,226 @@ export default { ...@@ -108,89 +177,226 @@ export default {
this.loadData(); this.loadData();
}, },
handleClick(url) { handleClick(item) {
window.open(url); 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> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
$blue: #1e5fbb; $blue: #2069c4;
$text-indent: 16px; $text-indent: 16px;
.virtual { .display {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: #2069c4;
// color: #fff; // color: #fff;
.main { .content-wrapper {
display: flex; padding-top: 60px;
align-items: center; background-color: #fff;
flex-direction: column; .title {
padding: 60px; font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.search { .search {
display: flex; display: flex;
justify-content: center; justify-content: center;
// justify-content: flex-end; align-items: center;
// margin-top: 20px; background-color: rgba($blue, 0.2);
.search-bar { padding: 20px 40px;
margin-bottom: 40px; margin-bottom: 40px;
// width: 400px;
width: 1200px; .item {
// border-radius: 48px !important; 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;
} }
}
.img { .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%; width: 100%;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative; position: relative;
overflow: hidden; display: flex;
height: 350px; flex-direction: column;
margin-bottom: 20px;
// background-color: #fff;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
img { img {
transform: scale(1.1); 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 { img {
width: 100%;
height: 100%; height: 100%;
transition: all 0.5s ease; object-fit: contain;
// width: auto;
}
} }
.desc { .desc {
position: absolute; padding: 16px 0;
width: 100%; display: flex;
padding: 10px; justify-content: center;
background-color: #fff; transition: all 0.5s ease;
opacity: 0.7; flex: 1;
bottom: 0;
left: 0;
} }
.play { .showIcon {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute; position: absolute;
left: 50%; top: 10px;
top: 50%; right: 10px;
transform: translate(-50%, -50%); z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
i { transition: all 0.3s ease;
font-size: 40px; width: 28px;
color: #fff; 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 { .pagination {
margin-top: 24px; margin: 24px;
display: flex; display: flex;
justify-content: center; 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> </style>
\ No newline at end of file
vue.config.js
浏览文件 @ a55db14b
...@@ -42,7 +42,7 @@ module.exports = defineConfig({ ...@@ -42,7 +42,7 @@ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
lintOnSave: false, //关闭eslint检查 lintOnSave: false, //关闭eslint检查
devServer: { devServer: {
host: 'http://172.24.100.18', host: 'localhost',
port: '8080', port: '8080',
open: true, open: true,
hot: true, hot: true,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论