Skip to content

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

优化界面一版

上级 050a04dd
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 327 行增加 和 362 行删除
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/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
差异被折叠。
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
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论