Skip to content

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

优化界面一版

上级 050a04dd
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 351 行增加 和 386 行删除
src/api/dict.js
浏览文件 @ a55db14b
......@@ -11,3 +11,16 @@ export function getDictCode(data) {
data
})
}
/**
* 获取树结构的字典
* @param {*} data 查询参数 data ['culturalRelicYears','culturalRelicTexture']
*
*/
export function getDictTree(data) {
return request({
url: '/sysDictTree/listByType',
method: 'post',
data
})
}
\ No newline at end of file
src/store/modules/dict.js
浏览文件 @ a55db14b
import {
getDictCode,
getDictTree
} from '@/api/dict'
import {
getCulturalRelicList
} from '@/api/culturalRelic'
const state = {
dicts: {},
};
const mutations = {
SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value;
},
};
export default {
namespaced: true,
state,
mutations,
};
\ No newline at end of file
dicts: {}, //字典
crList: [], //文物列表
ltList: [] //文献列表
};
const mutations = {
SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value;
},
SET_CR_LIST(state, crList) {
state.crList = crList
}
};
const actions = {
/**
* 获取普通list结构(非树结构)的字典
* @param {Array} data 字典的key集合
* @returns {Promise}
*/
getDictList({
commit
}, data) {
let dicts = {}
let requestDicts = []
data.forEach(i => {
if (!state.dicts[i]) {
requestDicts.push(i)
} else {
dicts[i] = state.dicts[i]
}
});
if (requestDicts.length > 0) {
return new Promise((resolve, reject) => {
getDictCode(requestDicts).then(res => {
requestDicts.forEach(reqDict => {
var obj = {}
if (res.code == 0) {
res.data.map(item => {
if (item.dictType == reqDict) {
obj[item.value] = item.label
}
})
dicts[reqDict] = Object.freeze(obj)
commit('SET_DICTS', {
label: reqDict,
value: Object.freeze(obj)
})
}
})
resolve(dicts)
}).catch(error => {
reject(error)
})
});
} else {
return new Promise((resolve, reject) => {
resolve(dicts)
})
}
},
/**
* 获取树形结构的字典树，如文物年代、文物质地
* @param {Array} data 字典的key集合
* @returns {Promise}
*/
getDictTree({
commit
}, data) {
let dicts = {}
let requestDicts = []
data.forEach(i => {
if (!state.dicts[i]) {
requestDicts.push(i)
} else {
dicts[i] = state.dicts[i]
}
});
if (requestDicts.length > 0) {
return new Promise((resolve, reject) => {
getDictTree(requestDicts).then(res => {
let dictsObj = {}
requestDicts.forEach(reqDict => {
dictsObj[reqDict] = []
res.data.map(item => {
if (item.dictType == reqDict) {
dictsObj[reqDict].push(item)
}
})
commit("SET_DICTS", {
label: reqDict,
value: Object.freeze(dictsObj[reqDict]),
});
})
resolve(dictsObj)
}).catch(error => {
reject(error)
})
});
} else {
return new Promise((resolve, reject) => {
resolve(dicts)
})
}
},
/**
* 获取文物列表
* @param {Boolean} isReload 是否要重新加载
* @param {params} params 分页或一些查询参数
* @returns {Promise}
*/
getCrList({
commit
}, {
isReload,
params
}) {
if (!state.crList || state.crList.length == 0 || isReload) {
return new Promise((resolve, reject) => {
getCulturalRelicList(params).then(response => {
const {
data
} = response
commit('SET_CR_LIST', data.records)
resolve(response)
}).catch(error => {
reject(error)
})
})
} else {
return new Promise((resolve, reject) => {
resolve(state.crList)
})
}
},
}
export default {
namespaced: true,
state,
actions,
mutations,
};
src/views/culturalRelic/index-old.vue deleted 100644 → 0
浏览文件 @ 050a04dd
<template>
<div class="display">
<!-- <NavBar /> -->
<div class="main">
<div class="content">
<el-row :gutter="20">
<el-col :span="4" class="selectors">
<!-- <el-row class="select-card">
<div class="title">
<span>年代</span>
</div>
<div class="body">
<div class="select-group">
<div
class="select-items"
v-for="(item, index) in years"
:key="index"
>
<div class="check-box"></div>
<div class="check-value">{{ item }}</div>
</div>
</div>
</div>
</el-row> -->
<!-- <el-row class="select-card">
<div class="title">
<span>分类</span>
</div>
<div class="body">
<div class="select-group">
<div
class="select-items"
v-for="(item, index) in dict.culturalRelicType"
:key="index"
>
<div class="check-box">
</div>
<div class="check-value">{{ item }}</div>
</div>
</div>
</div>
</el-row> -->
</el-col>
<el-col :span="24" class="rclist">
<div class="search">
<el-input
v-model="keyword"
class="search-bar"
@keyup.enter.native="search" clearable
><i slot="suffix" class="el-input__icon el-icon-search"></i
></el-input>
</div>
<div class="display-group">
<div class="total">
<span>{{ list.total }}</span
>件
</div>
<!-- <div class="divider"></div> -->
<el-row :gutter="10">
<el-col
:span="6"
class="cr-box"
display-item
@click.native="handleClick(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div class="img">
<img :src="item.faceImageUrl" alt="" srcset="" />
<!-- <div class="collect">
<div class="collect-box">
<img src="@/assets/imgs/like.png" alt="" srcset="" />
</div>
</div> -->
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <Footer /> -->
</div>
</template>
<script>
// import SearchBar from "@/components/SearchBar";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import { getCulturalRelicList } from "@/api/culturalRelic";
export default {
name: "CulturalRelic",
// components: { SearchBar, NavBar, Footer },
// components: { SearchBar },
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
currentType: "all",
list: {
records: [],
size: 40,
current: 1,
total: 0,
},
// years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
// types: ["青铜", "石器"],
};
},
// dicts: ["culturalRelicYears", "cultural_relic_texture", "culturalRelicType"],
created() {
setTimeout(() => {
// console.log(this.dicts);
});
},
mounted() {
this.loadData();
},
methods: {
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
async search() {
var params = {
page: this.list.current,
limit: this.list.size,
name: this.keyword,
};
console.log("params", params);
let res = await getCulturalRelicList(params);
if (res.code == 0) {
this.list = res.data;
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
handleClick(item) {
console.log(item);
const { crId } = item;
this.$router.push({
path: "culturalRelic/" + crId,
});
},
},
};
</script>
<style lang="scss" scoped>
$blue: #1e5fbb;
$text-indent: 16px;
.display {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.main {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 60px;
.search {
display: flex;
justify-content: flex-end;
margin-top: 20px;
.search-bar {
margin-bottom: 20px;
width: 400px;
border-radius: 48px !important;
}
}
.total {
margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background-color: $blue;
margin-bottom: 20px;
}
.content {
width: 100%;
.selectors {
margin-top: 80px;
.select-card {
width: 100%;
box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
border-radius: 8px;
margin-bottom: 16px;
.title {
padding: 10px 20px;
background-color: #1e5fbb;
border-radius: 8px 8px 0 0;
color: #fff;
font-weight: bold;
}
.body {
padding: 10px 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
.select-items {
display: flex;
margin-bottom: 20px;
cursor: pointer;
margin-top: 24px;
.check-box {
border: 2px solid #563f17;
width: 20px;
height: 20px;
margin-right: 15px;
i {
color: $blue;
width: 2px;
font-weight: bold;
}
}
.check-value {
color: #563f17;
font-size: 14px;
font-weight: bold;
}
}
}
}
}
.rclist {
.img {
width: 100%;
margin-bottom: 10px;
position: relative;
img {
width: 100%;
}
.collect {
position: absolute;
right: 20px;
bottom: 20px;
.collect-box {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
cursor: pointer;
img {
width: 20px;
height: 20px;
opacity: 0.5;
}
}
}
}
}
}
}
.pagination {
margin-top: 24px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/home/components/Virtural.vue
浏览文件 @ a55db14b
......@@ -47,7 +47,7 @@
</template>
<script>
import { getVrRecommend } from "@/api/vitual";
import { getVrRecommend } from "@/api/virtual";
export default {
name: "Virtural",
data() {
......
src/views/museum/index.vue
浏览文件 @ a55db14b
差异被折叠。
src/views/personal/components/Card/index.vue
浏览文件 @ a55db14b
<template>
<div class="display-item">
<el-image :src="url" width="100%" :alt="title" style="height:200px;" lazy fit="fill"/>
<div class="display-desc">
<div class="desc-title">
<span>{{ title }}</span>
</div>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="url"
>
<div class="img">
<img
:src="url"
v-if="url"
width="100%"
class="img"
lazy
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div>
<div class="desc">
<span class="name">{{ title }}</span>
</div>
</div>
</template>
......@@ -22,50 +39,88 @@ export default {
default: "",
},
},
methods:{
}
methods: {},
};
</script>
<style lang='scss' scoped>
.display-item {
width: 100%;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #fff;
margin-right: 10px;
$blue: #2069c4;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
&:hover {
// img {
// transform: scale(1.2);
// }
.desc {
background-color: $blue;
color: #fff;
}
}
.display-desc {
padding: 0 16px;
.desc-title{
font-size: 18px;
font-weight: bold;
padding: 10px 0 20px 0;
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
img {
height: 100%;
object-fit: contain;
// width: auto;
}
// .desc-content {
// text-indent: 16px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// display: block;
// }
}
}
::v-deep .el-image {
height: 350px;
width: 100%;
img {
border-radius: 16px 16px 0 0;
height: 100%;
width: 100%;
.desc {
padding: 16px;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/views/personal/components/Collection.vue
浏览文件 @ a55db14b
......@@ -7,11 +7,14 @@
:label="tab.title"
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
<el-row :gutter="20" v-if="list.records.length > 0">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImagePressUrl"
/></el-col>
</el-row>
<div v-else>
<el-empty description="描述文字"></el-empty>
</div>
</el-tab-pane>
</el-tabs>
<div class="pagination">
......@@ -69,7 +72,7 @@ export default {
],
activeName: "biz_cultural_relic",
list: {
records: {},
records: [],
size: 10,
current: 1,
total: 0,
......@@ -150,4 +153,7 @@ export default {
}
}
}
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/components/Footprint.vue
浏览文件 @ a55db14b
......@@ -8,7 +8,7 @@
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
/></el-col>
</el-row>
......@@ -144,4 +144,7 @@ export default {
}
}
}
.pagination{
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/components/Like.vue
浏览文件 @ a55db14b
......@@ -9,7 +9,7 @@
>
<el-row :gutter="20">
<el-col
:span="6"
:span="8"
v-for="(item, index) in list.records"
:key="index"
@click.native="handleClick(item)"
......@@ -169,4 +169,7 @@ export default {
}
}
}
.pagination{
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ a55db14b
......@@ -2,18 +2,22 @@
<div class="personal">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞">
<Like />
</el-tab-pane>
<el-tab-pane label="我的收藏">
<Collection />
</el-tab-pane>
<el-tab-pane label="浏览记录">
<Footprint />
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
<div class="content-wrapper">
<div class="main">
<el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞">
<Like />
</el-tab-pane>
<el-tab-pane label="我的收藏">
<Collection />
</el-tab-pane>
<el-tab-pane label="浏览记录">
<Footprint />
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
</div>
</div>
<!-- <Footer /> -->
</div>
</template>
......@@ -40,6 +44,7 @@ export default {
return {
relateRelics: relateRelics,
exhibitions: exhibitions,
list: ["我的点赞", "我的收藏", "浏览记录", "个人信息"],
};
},
methods: {
......@@ -54,11 +59,54 @@ export default {
</script>
<style lang='scss' scoped>
$blue: #2069c4;
.personal {
// width: 1200px;
margin: auto;
.wrapper{
padding: 60px;
.content-wrapper {
background-color: #fff;
align-items: flex-start;
.main {
padding: 40px;
}
}
}
::v-deep {
.el-tabs__header .is-left {
width: 200px;
border: none;
}
}
::v-deep {
.el-tabs--left.el-tabs--card .el-tabs__item.is-left {
color: #333;
background: #f7f7f7;
display: flex;
justify-content: center;
border: none;
}
}
::v-deep {
.el-tabs--left.el-tabs--card .el-tabs__item.is-active {
background-color: #eeeeee;
color: $blue;
font-weight: bold;
}
}
::v-deep{
.el-tabs__nav.is-top{
display: flex;
}
}
::v-deep{
.el-tabs__item.is-top.is-active{
width: 100px;
display: flex;
justify-content: center;
}
.el-tabs__active-bar.is-top{
width: 100px !important;
}
}
</style>
\ No newline at end of file
vue.config.js
浏览文件 @ a55db14b
......@@ -42,7 +42,7 @@ module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //关闭eslint检查
devServer: {
host: 'http://172.24.100.18',
host: 'localhost',
port: '8080',
open: true,
hot: true,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论