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) { ...@@ -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 = { };
SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value; const mutations = {
}, SET_DICTS(state, obj) {
}; state.dicts[obj.label] = obj.value;
},
export default { SET_CR_LIST(state, crList) {
namespaced: true, state.crList = crList
state, }
mutations, };
};
const actions = {
/**
\ No newline at end of file * 获取普通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 @@ ...@@ -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"
</div> v-model="type"
<div class="display-group"> placeholder="所属类别"
<!-- <div class="total"> style="width: 100%"
<span>{{ list.total }}</span 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="divider"></div> --> <div class="search-button" @click="search">搜 索</div>
<el-row :gutter="60" > </div>
<el-col <el-row :gutter="40" class="cr-list">
:span="6" <el-col
class="display-item" :span="6"
@click.native="handleClick(item)" class="cr-item"
v-for="(item, index) in list.records" @click.native="handleClick(item)"
:key="index" 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">
<el-image <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 lazy
/> />
<img <img
...@@ -48,35 +85,41 @@ ...@@ -48,35 +85,41 @@
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">
</div> <img src="@/assets/imgs/cr/3D.png" class="icon" />
<div class="desc"> <div class="text" @click.stop="handleTo3D(item.url3d)">
<span class="name">{{ item.name }}</span> 点击查看3D链接
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div> </div>
</div> </div>
</el-col> <div class="desc">
</el-row> <span class="name">{{ item.name }}</span>
<div class="pagination"> </div>
<el-pagination </div>
@size-change="handleSizeChange" </el-col>
@current-change="handleCurrentChange" </el-row>
:current-page="Number(list.current)" <div class="pagination">
:page-sizes="[10, 20, 40, 50]" <el-pagination
:page-size="Number(list.size)" @size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
:total="Number(list.total)" :current-page="Number(list.current)"
class="pagination" :page-sizes="[20, 40, 100]"
> :page-size="Number(list.size)"
</el-pagination> layout="total, prev, pager, next, jumper"
</div> :total="Number(list.total)"
class="pagination"
>
</el-pagination>
</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 { .threeD {
width: 100%; display: flex;
height: 1px; width: 420px;
background-color: $blue; cursor: pointer;
margin-bottom: 20px; .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 { .content {
width: 100%; width: 100%;
.selectors { .cr-list {
margin-top: 80px; .cr-item {
margin-bottom: 40px;
.select-card { .container {
width: 100%; border: 1px solid #f1f1f1;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12); height: 300px;
border-radius: 8px; position: relative;
margin-bottom: 16px; display: flex;
.title { flex-direction: column;
padding: 10px 20px; cursor: pointer;
background-color: #1e5fbb; &:hover {
border-radius: 8px 8px 0 0; img {
color: #fff; transform: scale(1.2);
font-weight: bold; }
} .desc {
.body { background-color: $blue;
padding: 10px 20px; color: #fff;
background-color: #fff; }
border-radius: 0 0 8px 8px; }
.select-items { .img {
display: flex; background-color: #f8f8f8;
margin-bottom: 20px; height: 240px;
cursor: pointer; cursor: pointer;
margin-top: 24px; transition: all 0.5s ease;
.check-box { overflow: hidden;
border: 2px solid #563f17; &:hover {
width: 20px; img {
height: 20px; transform: scale(1.2);
margin-right: 15px;
i {
color: $blue;
width: 2px;
font-weight: bold;
} }
} }
.check-value { img {
color: #563f17; height: 100%;
font-size: 14px; object-fit: contain;
font-weight: bold; // width: auto;
} }
} }
} .desc {
} padding: 16px 0;
} display: flex;
.rclist { justify-content: center;
.img { transition: all 0.5s ease;
width: 100%; flex: 1;
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%;
} }
} .showIcon {
.desc { position: absolute;
position: absolute; top: 10px;
width: 100%; right: 10px;
padding: 10px; z-index: 99;
background-color: #fff; // background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7; height: 28px;
bottom: 0; padding: 4px;
left: 0;
}
.collect {
position: absolute;
right: 20px;
bottom: 20px;
.collect-box {
width: 40px;
height: 40px;
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;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
background-color: $blue;
}
.icon {
width: 20px; width: 20px;
height: 20px; display: inline-block;
opacity: 0.5; }
.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; ...@@ -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
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>
<div class="display-group"> <el-row :gutter="40" class="cr-list">
<!-- <div class="total"> <el-col
<span>{{ list.total }}</span :span="8"
>件 class="cr-item"
</div> @click.native="handleClick(item)"
<div class="divider"></div> --> v-for="(item, index) in list.records"
<el-row :gutter="60"> :key="index"
<el-col >
:span="8" <div
class="display-item" class="container wow animate__animated animate__fadeInUp"
@click.native="handleClick(item)" v-if="item.faceImagePressUrl"
v-for="(item, index) in list.records"
:key="index"
> >
<div class="img" v-if="item.faceImageUrl"> <div class="img">
<el-image <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"
lazy lazy
style=" width: 100%"
/> />
<img <img
v-else v-else
...@@ -47,32 +80,35 @@ ...@@ -47,32 +80,35 @@
alt="" alt=""
width="100%" width="100%"
height="100%" height="100%"
class="img"
/> />
<div class="desc">
<span class="name">{{ item.title }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
</div> </div>
</el-col> <div class="desc">
</el-row> <span class="name">{{ item.title }}</span>
<div class="pagination"> </div>
<el-pagination </div>
@size-change="handleSizeChange" </el-col>
@current-change="handleCurrentChange" </el-row>
:current-page="Number(list.current)" <div class="pagination">
:page-sizes="[10, 20, 40, 50]" <el-pagination
:page-size="Number(list.size)" @size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
:total="Number(list.total)" :current-page="Number(list.current)"
class="pagination" :page-sizes="[20, 40, 100]"
> :page-size="Number(list.size)"
</el-pagination> layout="total, prev, pager, next, jumper"
</div> :total="Number(list.total)"
class="pagination"
>
</el-pagination>
</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;
width: 1200px;
padding: 0 40px;
}
}
.total {
margin-bottom: 40px; margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
}
.content { .item {
width: 1200px; margin-right: 20px;
// background-color: #fff; }
// padding: 60px; .threeD {
.selectors { display: flex;
margin-top: 80px; width: 420px;
cursor: pointer;
.select-card { .box {
width: 100%; width: 36px;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12); height: 36px;
border-radius: 8px; display: flex;
margin-bottom: 16px; justify-content: center;
.title { align-items: center;
padding: 10px 20px; border: 2px solid #563f17;
background-color: #1e5fbb; margin-right: 6px;
border-radius: 8px 8px 0 0; i {
color: #fff; font-size: 28px;
font-weight: bold;
} }
.body { }
padding: 10px 20px; .text {
background-color: #fff; display: flex;
border-radius: 0 0 8px 8px; justify-content: center;
.select-items { align-items: center;
display: flex; }
margin-bottom: 20px; }
cursor: pointer; .search-button {
margin-top: 24px; cursor: pointer;
.check-box { width: 420px;
border: 2px solid #563f17; height: 48px;
width: 20px; display: flex;
height: 20px; justify-content: center;
margin-right: 15px; align-items: center;
i { background-color: $blue;
color: $blue; color: #fff;
width: 2px; }
font-weight: bold; }
} .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 { .desc {
color: #563f17; background-color: $blue;
font-size: 14px; color: #fff;
font-weight: bold;
} }
} }
} .img {
} background-color: #f8f8f8;
} height: 240px;
.rclist { cursor: pointer;
.img { transition: all 0.5s ease;
width: 100%; overflow: hidden;
margin-bottom: 10px; img {
position: relative; height: 100%;
img { object-fit: contain;
width: 100%; // width: auto;
} }
.desc { }
position: absolute; .desc {
width: 100%; padding: 16px 0;
padding: 10px; display: flex;
background-color: #fff; justify-content: center;
opacity: 0.7; transition: all 0.5s ease;
bottom: 0; flex: 1;
left: 0; }
} .showIcon {
position: absolute;
.collect { top: 10px;
position: absolute; right: 10px;
right: 20px; z-index: 99;
bottom: 20px; background-color: rgba(0, 0, 0, 0.1);
.collect-box { border-radius: 4px;
width: 40px; height: 28px;
height: 40px; 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;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px; width: 20px;
height: 20px; display: inline-block;
opacity: 0.5; }
.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; ...@@ -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"
<el-col ></div>
:span="6" <div class="search wow animate__animated animate__fadeIn">
class="display-item" <el-input
@click.native="handleClick(item)" class="input item"
v-for="(item, index) in list.records" suffix-icon="el-icon-search"
:key="index" 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 <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 class="desc">
<span class="name">{{ item.name }}</span>
<!-- <span class="deptName">{{ item.deptName }}</span> -->
</div>
</div> </div>
</el-col> <div class="desc">
</el-row> <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> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </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> </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 { .threeD {
width: 100%; display: flex;
height: 1px; width: 420px;
background-color: $blue; cursor: pointer;
margin-bottom: 20px; .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 { .content {
width: 100%; width: 100%;
.selectors { .cr-list {
margin-top: 80px; .cr-item {
margin-bottom: 40px;
.select-card { .container {
width: 100%; border: 1px solid #f1f1f1;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12); height: 300px;
border-radius: 8px; position: relative;
margin-bottom: 16px; display: flex;
.title { flex-direction: column;
padding: 10px 20px; cursor: pointer;
background-color: #1e5fbb; &:hover {
border-radius: 8px 8px 0 0; img {
color: #fff; transform: scale(1.2);
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 { .desc {
color: #563f17; background-color: $blue;
font-size: 14px; color: #fff;
font-weight: bold;
} }
} }
} .img {
} background-color: #f8f8f8;
} height: 240px;
.rclist { cursor: pointer;
.img { transition: all 0.5s ease;
width: 100%; overflow: hidden;
margin-bottom: 10px; img {
position: relative; height: 100%;
.cr-img { object-fit: contain;
width: 100%; // width: auto;
} }
.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 {
.desc { padding: 16px 0;
position: absolute; display: flex;
width: 100%; justify-content: center;
padding: 10px; transition: all 0.5s ease;
background-color: #fff; flex: 1;
opacity: 0.7; }
bottom: 0; .showIcon {
left: 0; position: absolute;
} top: 10px;
right: 10px;
.collect { z-index: 99;
position: absolute; background-color: rgba(0, 0, 0, 0.1);
right: 20px; border-radius: 4px;
bottom: 20px; height: 28px;
.collect-box { padding: 4px;
width: 40px;
height: 40px;
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;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px; width: 20px;
height: 20px; display: inline-block;
opacity: 0.5; }
.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; ...@@ -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">
</div> <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>
</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 { // img {
border-radius: 16px 16px 0 0; // transform: scale(1.2);
// }
.desc {
background-color: $blue;
color: #fff;
}
} }
.display-desc { .img {
padding: 0 16px; background-color: #f8f8f8;
.desc-title{ height: 240px;
font-size: 18px; cursor: pointer;
font-weight: bold; transition: all 0.5s ease;
padding: 10px 0 20px 0; 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;
// }
} }
} .desc {
padding: 16px;
::v-deep .el-image { display: flex;
height: 350px; justify-content: center;
width: 100%; transition: all 0.5s ease;
img { flex: 1;
border-radius: 16px 16px 0 0; }
height: 100%; .showIcon {
width: 100%; 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> </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,18 +2,22 @@ ...@@ -2,18 +2,22 @@
<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>
<el-tabs :tab-position="'left'" type="card" class="wrapper"> <div class="content-wrapper">
<el-tab-pane label="我的点赞"> <div class="main">
<Like /> <el-tabs :tab-position="'left'" type="card" class="wrapper">
</el-tab-pane> <el-tab-pane label="我的点赞">
<el-tab-pane label="我的收藏"> <Like />
<Collection /> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="我的收藏">
<el-tab-pane label="浏览记录"> <Collection />
<Footprint /> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="浏览记录">
<el-tab-pane label="个人信息"><Info /></el-tab-pane> <Footprint />
</el-tabs> </el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</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="content-wrapper">
<div class="empty-space"></div> <div class="content">
<div class="main"> <el-row :gutter="40">
<div class="content-wrapper"> <el-col :span="24">
<el-row :gutter="20"> <div class="title wow animate__animated animate__fadeInLeft">
<el-col :span="24" class="rclist"> 虚拟展厅
<div class="search"> </div>
<SearchBar @search="search" :keyword="keyword" /> <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"
v-for="(item, index) in list.records" @click.native="handleClick(item)"
:key="index" 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)"> <div class="img">
<img :src="item.faceImageUrl" alt="" /> <img
<div class="desc"> :src="item.faceImagePressUrl"
<span class="name">{{ item.name }}</span> v-if="item.faceImagePressUrl"
</div> width="100%"
<div class="play"> class="img"
<i class="el-icon-caret-right"></i> lazy
</div> />
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div> </div>
</el-col> <div class="desc">
</el-row> <span class="name">{{ item.name }}</span>
<div class="pagination"> </div>
<el-pagination </div>
@size-change="handleSizeChange" </el-col>
@current-change="handleCurrentChange" </el-row>
:current-page="Number(list.current)" <div class="pagination">
:page-sizes="[10, 20, 40, 50]" <el-pagination
:page-size="Number(list.size)" @size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
:total="Number(list.total)" :current-page="Number(list.current)"
class="pagination" :page-sizes="[20, 40, 100]"
> :page-size="Number(list.size)"
</el-pagination> layout="total, prev, pager, next, jumper"
</div> :total="Number(list.total)"
class="pagination"
>
</el-pagination>
</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;
// border-radius: 48px !important;
}
}
.img { .item {
width: 100%; margin-right: 20px;
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;
} }
.desc { .threeD {
position: absolute; display: flex;
width: 100%; width: 420px;
padding: 10px; cursor: pointer;
background-color: #fff; .box {
opacity: 0.7; width: 36px;
bottom: 0; height: 36px;
left: 0; 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 { .search-button {
width: 50px; cursor: pointer;
height: 50px; width: 420px;
border-radius: 50%; height: 48px;
border: 2px solid #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
i { background-color: $blue;
font-size: 40px; color: #fff;
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 { .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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论