Skip to content

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

feat:文物列表和详情

上级 3debb48b
隐藏空白字符变更
内嵌 并排
正在显示 包含 1358 行增加 和 552 行删除
env.development
浏览文件 @ 7d9472ee
NODE_ENV = 'development' NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev' VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASE_API = 'http://127.0.0.1:4523/m1/1100718-0-default/' VUE_APP_BASE_API = 'http://172.24.100.189:8080'
\ No newline at end of file \ No newline at end of file
src/App.vue
浏览文件 @ 7d9472ee
<template> <template>
<div id="app"> <div id="app">
<!-- <NavBar /> --> <NavBar />
<!-- <Footer /> -->
<router-view /> <router-view />
<Footer />
</div> </div>
</template> </template>
<script> <script>
// import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
// export default { export default {
// components: { NavBar, Footer }, components: { NavBar, Footer },
// }; };
</script> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
...@@ -24,5 +23,12 @@ body { ...@@ -24,5 +23,12 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f7f7f7; background: #f7f7f7;
box-sizing: border-box;
}
div,
span,
ul,
li {
box-sizing: border-box;
} }
</style> </style>
src/api/culturalRelic.js 0 → 100644
浏览文件 @ 7d9472ee
import request from '@/utils/request'
export function getCulturalRelicList(data) {
return request({
url: '/bizCulturalRelic/listByPage',
method: 'post',
data
})
}
// 根据文物id查询详情
export function getRCDetailById(params) {
return request({
url: '/bizCulturalRelic/listById',
method: 'get',
params
})
}
src/api/dict.js 0 → 100644
浏览文件 @ 7d9472ee
import request from '@/utils/request'
/**
*
* @param {*} data 查询参数 data{limit:100,page:1,dictId:xxx}
*
*/
export function getDictCode(data) {
return request({
url: '/sysDictDetail/getDictDetailsByTypes',
method: 'post',
data
})
}
src/api/display.js 0 → 100644
浏览文件 @ 7d9472ee
import request from '@/utils/request'
// 获取布展列表
export function getList(data) {
return request({
url: '/bizExhibition/listByPage',
method: 'post',
data
})
}
export function getDisplayById(params) {
return request({
url: '/bizExhibition/listById',
method: 'get',
params
})
}
src/api/literature.js 0 → 100644
浏览文件 @ 7d9472ee
import request from '@/utils/request'
export function getLiteratureList(data) {
return request({
url: 'sysLiterature/listByPage',
method: 'post',
data
})
}
src/api/org.js 0 → 100644
浏览文件 @ 7d9472ee
import request from '@/utils/request'
export function getMuseumTree(params) {
return request({
url: '/sys/dept/tree',
method: 'get',
params
})
}
export function getMuseumTreeV1(params) {
return request({
url: '/sys/dept/v1/tree',
method: 'get',
params
})
}
export function addMuseum(data) {
return request({
url: '/sys/dept',
method: 'post',
data
})
}
export function editMuseum(data) {
return request({
url: '/sys/dept',
method: 'put',
data
})
}
// 获取博物馆列表
export function getMuseumList(params) {
return request({
url: '/sys/depts',
method: 'get',
params
})
}
// 根据博物馆id查询详情
export function getMSDetailById(id) {
return request({
url: `/sys/dept/${id}`,
method: 'get',
})
}
// 删除博物馆
export function deleteMuseum(id) {
return request({
url: `/sys/dept/${id}`,
method: 'delete',
})
}
// 查询行政区划树
export function getSysRegionTree(params) {
return request({
url: `/sysRegion/tree`,
method: 'get',
params
})
}
src/components/Dict/index.js 0 → 100644
浏览文件 @ 7d9472ee
import {
getDictCode
} from "@/api/dict";
import {
getLiteratureList
} from '@/api/literature'
import store from "@/store";
import Vue from "vue";
class Dict {
constructor(dict) {
this.dict = dict;
}
async init(names) {
// 先判断list中的name是否存在，如果不存在，把不存在的放置在一个list中，再对list进行获取
var nonExistentNames = []
// debugger
names.forEach(name => {
if (store.getters.dicts[name]) {
Vue.set(this.dict, name, store.getters.dicts[name]);
} else {
nonExistentNames.push(name) //存入list中，单独进行处理调用
}
});
var index = nonExistentNames.indexOf('literature')
if (index != -1) {
// debugger
Vue.set(this.dict, 'literature', []);
nonExistentNames.splice(index, 1)
var params = {
limit: 100,
page: 1
}
var res = await getLiteratureList(params)
if (res.code == 0) {
var literatureList = res.data.records
Vue.set(this.dict, 'literature', literatureList);
this.dict['literature'] = Object.freeze(literatureList)
store.commit("dict/SET_DICTS", {
label: 'literature',
value: Object.freeze(literatureList),
});
}
}
if (nonExistentNames.length > 0) {
// debugger
var res = await getDictCode(nonExistentNames)
nonExistentNames.forEach(n => {
Vue.set(this.dict, n, []);
// var arr = []
var obj = {}
if (res.code == 0) {
res.data.map(item => {
if (item.dictType === n) {
obj[item.value]=item.label
}
})
this.dict[n] = Object.freeze(obj)
store.commit("dict/SET_DICTS", {
label: n,
value: Object.freeze(obj),
});
}
})
}
}
}
const install = function (Vue) {
Vue.mixin({
data() {
// 如果在调用组件处data中有定义dicts，再进行初始化dict
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
return {
dict: {}
};
} else {
return {};
}
},
created() {
// 如果在调用组件处data中有定义dicts，再进行获取dicts中定义的字典
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
new Dict(this.dict).init(this.$options.dicts);
}
},
});
};
export default {
install
};
src/components/NavBar/index.vue
浏览文件 @ 7d9472ee
<template> <template>
<div class="nav"> <div class="nav">
<div class="title">贵州省精品展览展示平台</div> <div class="container">
<div class="tabs" v-for="(item, index) in pages" :key="index"> <div class="title">贵州省精品展览展示平台</div>
<router-link :to="item.path">{{ item.name }}</router-link> <div class="right">
</div> <div class="tabs">
<div class="operation"> <router-link
<span v-if="isLogged">欢迎你，{{ userInfo.userName }}</span> :to="item.path"
<router-link v-if="!isLogged" to="/login" class="operation-item" v-for="(item, index) in pages"
>登陆</router-link :key="index"
>| class="tab-item"
<router-link to="/personal" class="operation-item">个人中心</router-link>| >{{ item.name }}</router-link
<span class="logout"> >
<el-popover </div>
placement="bottom" <div class="operation">
width="200" <span v-if="isLogged">欢迎你，{{ userInfo.userName }}</span>
trigger="click" <router-link v-if="!isLogged" to="/login" class="operation-item"
v-model="logoutDialogVisible" >登陆</router-link
> >|
<p>确定退出吗？</p> <router-link to="/personal" class="operation-item"
<div style="text-align: right; margin: 0"> >个人中心</router-link
<el-button >|
size="mini" <span class="logout">
type="text" <el-popover
@click="logoutDialogVisible = false" placement="bottom"
>取消</el-button width="200"
> trigger="click"
<el-button type="primary" size="mini" @click="handleLogOut" v-model="logoutDialogVisible"
>确定</el-button
> >
</div> <p>确定退出吗？</p>
<span class="operation-item" slot="reference">退出</span> <div style="text-align: right; margin: 0">
</el-popover> <el-button
</span> size="mini"
type="text"
@click="logoutDialogVisible = false"
>取消</el-button
>
<el-button type="primary" size="mini" @click="handleLogOut"
>确定</el-button
>
</div>
<span class="operation-item" slot="reference">退出</span>
</el-popover>
</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -90,25 +102,41 @@ a { ...@@ -90,25 +102,41 @@ a {
text-decoration: none; text-decoration: none;
} }
.nav { .nav {
display: flex;
height: 120px; height: 120px;
align-items: center; width: 100%;
justify-content: space-between; // background-color: #1e5fbb;
margin: auto; // box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
width: 1200px; .container {
.title { width: 100%;
font-size: 30px; height: 100%;
font-weight: bold;
}
.tabs {
display: flex; display: flex;
margin-right: 5px; align-items: center;
} justify-content: space-between;
.operation { padding: 0 100px;
.operation-item { .title {
margin-right: 8px; font-size: 30px;
cursor: pointer; // font-weight: bold;
color: #000; font-family: LiSu;
// color: #c8945b;
}
.right {
display: flex;
.tabs {
display: flex;
margin-right: 100px;
.tab-item{
margin-right: 80px;
// color: #fff;
}
}
.operation {
.operation-item {
margin-right: 8px;
cursor: pointer;
// color: #fff;
}
}
} }
} }
} }
......
src/components/SearchBar/index.vue
浏览文件 @ 7d9472ee
<!-- --> <!-- -->
<template> <template>
<div class="search-bar"> <div class="search-bar">
<el-select v-model="select" placeholder="请选择"> <!-- <el-select v-model="select" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
:value="item.value" :value="item.value"
> >
</el-option> </el-option>
</el-select> </el-select> -->
<el-input <el-input
v-model="searchValue" v-model="searchValue"
placeholder="请输入关键词" placeholder="请输入关键词"
......
src/main.js
浏览文件 @ 7d9472ee
...@@ -11,6 +11,8 @@ import 'element-ui/lib/theme-chalk/index.css'; ...@@ -11,6 +11,8 @@ import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
// Vue.prototype.$echarts = echarts // Vue.prototype.$echarts = echarts
import dict from '@/components/Dict'
Vue.use(dict);
new Vue({ new Vue({
router, router,
......
src/router/index.js
浏览文件 @ 7d9472ee
...@@ -43,7 +43,7 @@ const routes = [ ...@@ -43,7 +43,7 @@ const routes = [
}, },
// 文物详情页 // 文物详情页
{ {
path: '/culturalRelic/:id', path: '/culturalRelic/:crId',
name: 'culturalRelicDetail', name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue') component: () => import('@/views/culturalRelic/Detail.vue')
}, },
......
src/store/getters.js
浏览文件 @ 7d9472ee
const getters = { const getters = {
// 用户 token: state => state.user.token,
token: state => state.user.token, userInfo: state => state.user.userInfo,
avatar: state => state.user.userInfo.avatar, avatar: state => state.user.avatar,
name: state => state.user.userInfo.name, name: state => state.user.name,
userInfo: state => state.user.userInfo, dicts: state => state.dict.dicts,
} museumTree: state => state.org.museumTree
export default getters }
export default getters
\ No newline at end of file
src/store/index.js
浏览文件 @ 7d9472ee
...@@ -2,12 +2,16 @@ import Vue from 'vue' ...@@ -2,12 +2,16 @@ import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import getters from './getters' import getters from './getters'
import user from './modules/user' import user from './modules/user'
import dict from './modules/dict'
import org from './modules/org'
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
modules: { modules: {
user, user,
dict,
org
}, },
getters getters
}) })
......
src/store/modules/dict.js 0 → 100644
浏览文件 @ 7d9472ee
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
src/store/modules/org.js 0 → 100644
浏览文件 @ 7d9472ee
import {
getMuseumTreeV1,
getSysRegionTree
} from '@/api/org'
const getDefaultState = () => {
return {
museumTree: [], //博物馆树
regionTree: [], //行政区划树
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_MUSEUM_TREE: (state, museumTree) => {
state.museumTree = museumTree
},
SET_REGION_TREE: (state, regionTree) => {
state.regionTree = regionTree
}
}
const actions = {
getMuseumTreeData({
commit
}, isReload) {
// 如果是空或者需要重新加载则重新调取接口获取，否则直接获取状态管理中的
if (state.museumTree || state.museumTree.length < 0 || isReload) {
return new Promise((resolve, reject) => {
getMuseumTreeV1({
deptId: ''
}).then(response => {
const {
data
} = response
commit('SET_MUSEUM_TREE', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
} else {
return new Promise((resolve, reject) => {
resolve(state.museumTree)
})
}
},
getSysRegionTreeData({
commit
}, parentId) {
if (state.regionTree && state.regionTree.length > 0) {
return new Promise((resolve, reject) => {
resolve(state.regionTree)
})
} else {
return new Promise((resolve, reject) => {
getSysRegionTree({
parentId
}).then(response => {
const {
data
} = response
commit('SET_REGION_TREE', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
src/store/modules/user.js
浏览文件 @ 7d9472ee
import { import {
login, login,
// getInfo, logout,
// getAsyncRouter } from '@/api/user'
} from '@/api/user'
import { import {
getToken, getToken,
setToken, setToken,
removeToken, removeToken,
getUserInfo, getUserInfo,
setUserInfo, setUserInfo,
removeUserInfo, removeUserInfo
} from '@/utils/auth' } from '@/utils/auth'
const getDefaultState = () => { const getDefaultState = () => {
return { return {
token: getToken(), token: getToken(),
userInfo: getUserInfo(), userInfo:getUserInfo(),
name: '',
avatar: '',
// deptList:{}
} }
} }
const state = getDefaultState() const state = getDefaultState()
const mutations = { const mutations = {
...@@ -27,11 +30,19 @@ const mutations = { ...@@ -27,11 +30,19 @@ const mutations = {
}, },
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token state.token = token
console.log('登录后存在vuex中token',token);
}, },
SET_INFO: (state, userInfo) => { SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo state.userInfo = userInfo
}, },
// SET_DEPTLIST:(state,deptList)=>{
// state.deptList = deptList
// }
} }
const actions = { const actions = {
...@@ -39,50 +50,60 @@ const actions = { ...@@ -39,50 +50,60 @@ const actions = {
login({ login({
commit commit
}, userInfo) { }, userInfo) {
const {
username,
password,
captcha
} = userInfo
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(userInfo).then(response => { login({
if (response.code != 0) { username: username.trim(),
userInfo.fail(response) password: password,
} else { captcha: captcha
const { }).then(response => {
data,
token
} = response
commit('SET_TOKEN', token)
commit('SET_INFO', data)
setToken(token)
setUserInfo(data)
resolve()
}
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({
commit,
state
}) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { const {
data data
} = response } = response
commit('SET_TOKEN', data.accessToken)
if (!data) { commit('SET_NAME', data.username)
reject('Verification failed, please Login again.') commit('SET_USERINFO', data)
} setToken(data.accessToken)
commit('SET_INFO', data)
setUserInfo(data) setUserInfo(data)
resolve(data) resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
}) })
}, },
// get user info
// getInfo({
// commit,
// state
// }) {
// return new Promise((resolve, reject) => {
// getInfo(state.token).then(response => {
// const {
// data
// } = response
// if (!data) {
// return reject('Verification failed, please Login again.')
// }
// const {
// name,
// avatar
// } = data
// commit('SET_NAME', name)
// commit('SET_AVATAR', avatar)
// resolve(data)
// }).catch(error => {
// reject(error)
// })
// })
// },
// user logout // user logout
logout({ logout({
...@@ -90,11 +111,15 @@ const actions = { ...@@ -90,11 +111,15 @@ const actions = {
state state
}) { }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// logout(state.token).then(() => { logout(state.token).then(() => {
removeToken() // must remove token first removeToken() // must remove token first
removeUserInfo() removeUserInfo()
commit('RESET_STATE') commit('RESET_STATE')
resolve() resolve()
}).catch(error => {
console.log('err',error);
// reject(error)
})
}) })
}, },
...@@ -104,12 +129,28 @@ const actions = { ...@@ -104,12 +129,28 @@ const actions = {
}) { }) {
return new Promise(resolve => { return new Promise(resolve => {
removeToken() // must remove token first removeToken() // must remove token first
removeUserInfo()
commit('RESET_STATE') commit('RESET_STATE')
resolve() resolve()
}) })
}, },
// getDeptList({
// commit,
// state
// }) {
// return new Promise((resolve, reject) => {
// let deptRes = await getDepList();
// let deptList = {};
// deptRes.data.map((dept) => {
// deptList[dept[id]] = {
// name: dept.name,
// regionCode: dept.regionCode,
// };
// });
// this.$store.commit('SET_DEPTLIST',deptList)
// })
// },
} }
export default { export default {
......
src/utils/auth.js
浏览文件 @ 7d9472ee
...@@ -4,7 +4,6 @@ const TokenKey = 'bwgzl_token' ...@@ -4,7 +4,6 @@ const TokenKey = 'bwgzl_token'
const UserInfoKey = 'bwgzl_user_info' const UserInfoKey = 'bwgzl_user_info'
export function getToken() { export function getToken() {
console.log('刷新后getToken',Cookies.get(TokenKey));
return Cookies.get(TokenKey) return Cookies.get(TokenKey)
} }
...@@ -17,7 +16,6 @@ export function removeToken() { ...@@ -17,7 +16,6 @@ export function removeToken() {
} }
export function getUserInfo() { export function getUserInfo() {
console.log('刷新后getUserInfo',JSON.parse(localStorage.getItem(UserInfoKey)));
return JSON.parse(localStorage.getItem(UserInfoKey)) return JSON.parse(localStorage.getItem(UserInfoKey))
} }
......
src/utils/request.js
浏览文件 @ 7d9472ee
// 导入axios
import axios from 'axios' import axios from 'axios'
// 使用element-ui Message做消息提醒
import { import {
MessageBox,
Message Message
} from 'element-ui'; } from 'element-ui'
import store from '@/store'
import { import {
getToken getToken
} from '@/utils/auth' } from '@/utils/auth'
//1. 创建新的axios实例，
// create an axios instance
const service = axios.create({ const service = axios.create({
// baseURL: process.env.BASE_API, // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
baseURL: '/api', baseURL: '/api',
// 超时时间 单位是ms，这里设置了3s的超时时间 timeout: 5000,
timeout: 3 * 1000
}) })
// 2.请求拦截器 // request interceptor
service.interceptors.request.use(config => { service.interceptors.request.use(
//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加 config => {
config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 // do something before request is sent
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded' //配置请求头 if (getToken()) {
} // let each request carry token
const token = getToken(); // ['X-Token'] is a custom headers key
if (token) { // please modify it according to the actual situation
config.params = { config.headers['authorization'] = getToken()
'token': token }
} //如果要求携带在参数中 return config
config.headers.token = token; //如果要求携带在请求头中 },
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
} }
return config )
}, error => {
Promise.reject(error)
})
// 3.响应拦截器 // response interceptor
service.interceptors.response.use( service.interceptors.response.use(
(response) => { /**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data const res = response.data
if (response.config.responseType !== 'blob') { // console.log('响应拦截res--------',response);
if (res.code !== 0) { if (response.config.url === '/api/sys/getVerify') {
Message({ // debugger
message: res.msg || 'Error', return res
type: 'error', }
duration: 3 * 1000, // debugger
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 0) {
Message({
message: res.msg || 'Error',
type: 'error',
duration: 5 * 1000
})
// 401001l令牌过期;
if (res.code === 401001) {
MessageBox.confirm('登录令牌已过期，请重新登录', '确认退出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
}) })
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
} }
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014 || res.code ===401001) {
// // to re-login
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
} }
return res
}, },
(error) => { error => {
let res = error.response console.log('err' + error) // for debug
if (error.response) { Message({
if (res.status == 401) { message: error.msg,
Vue.prototype.parentFns.portal_logout() type: 'error',
} duration: 5 * 1000
} })
return Promise.reject(error) return Promise.reject(error)
} }
) )
//4.导入文件
export default service export default service
src/views/boutique/index.vue
浏览文件 @ 7d9472ee
<template> <template>
<div class="boutique"> <div class="boutique">
<NavBar /> <!-- <NavBar /> -->
<h1>精品展</h1> <h1>精品展</h1>
<Footer /> <!-- <Footer /> -->
</div> </div>
</template> </template>
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 7d9472ee
<!-- --> <!-- -->
<template> <template>
<div class="display-detail"> <div class="display-detail">
<div class="search"> <!-- <div class="search">
<SearchBar <SearchBar
:options="options" :options="options"
:selectValue="selectValue" :selectValue="selectValue"
:keyword="keyword" :keyword="keyword"
/> />
</div> </div> -->
<div class="wrapper"> <div class="wrapper">
<div class="back">
<el-button type="text" icon="el-icon-arrow-left" @click.native="handleBack">返回上页</el-button>
</div>
<div class="detail-container"> <div class="detail-container">
<div class="slide"> <div class="cr-images">
<el-carousel indicator-position="outside"> <el-carousel
<el-carousel-item v-for="item in relicInfo.imgs" :key="item"> indicator-position="outside"
<img :autoplay="false"
:src="require(`@/assets/imgs/${item}.png`)" height="600px"
alt="" >
srcset="" <el-carousel-item
width="100%" v-for="(item, index) in CRDetail.imagesVo"
/> :key="index"
>
<el-image
style="width: 100%; height: 100%"
:src="item.url"
fit="contain"
></el-image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="opration">
<div class="like opration-item">
<img src="@/assets/imgs/like-s.png" alt="" />
</div>
<div class="collect opration-item">
<img src="@/assets/imgs/collect-s.png" alt="" />
</div>
<div class="enlarge opration-item">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</div>
</div> </div>
<div class="relic-info"> <div class="relic-info">
<div class="info-title"> <div class="info-title" v-if="Object.keys(dict).length > 0">
<h4>{{ relicInfo.title }}</h4> <h3>{{ CRDetail.name }}</h3>
<div class="operation"> <!-- <div class="operation">
<el-button type="text">收藏</el-button> <el-button type="text" icon="el-icon-star-off">收藏</el-button>
<el-button type="text">点赞</el-button> <el-button type="text">点赞</el-button>
<el-button type="text">转发</el-button> <el-button type="text">转发</el-button>
</div> </div> -->
</div> </div>
<div class="info-body"> <div class="info-body">
<div class="basic-info"> <div class="basic-info">
<div class="body-item"> <div class="body-item">
<span class="label">年份</span> <span class="label">年份</span>
<span class="value">{{ relicInfo.year }}</span> <span class="value">{{ CRDetail.years }}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label">类别</span> <span class="label">类别</span>
<span class="value">{{ relicInfo.type }}</span> <span class="value">{{
dict.culturalRelicType[CRDetail.type]
}}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label">级别</span> <span class="label">级别</span>
<span class="value">{{ relicInfo.level }}</span> <span class="value">{{
dict.culturalRelicLevel[CRDetail.level]
}}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label">质地</span> <span class="label">质地</span>
<span class="value">{{ relicInfo.texture }}</span> <span class="value">{{
dict.cultural_relic_texture[CRDetail.textureType]
}}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label">尺寸</span> <span class="label">尺寸</span>
<span class="value">{{ relicInfo.size }}</span> <span class="value">{{ CRDetail.detailSize }}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label">馆藏单位</span> <span class="label">馆藏单位</span>
<span class="value">{{ relicInfo.unit }}</span> <span class="value">{{ CRDetail.deptName }}</span>
</div> </div>
</div> </div>
<div class="qrcode" ref="qrCodeUrl"></div> <div class="qrcode" ref="qrCodeUrl"></div>
...@@ -67,15 +93,15 @@ ...@@ -67,15 +93,15 @@
<CustomTitle text="相关文献" /> <CustomTitle text="相关文献" />
<div <div
class="book-item" class="book-item"
v-for="(item, index) in relateBooks" v-for="(item, index) in CRDetail.literatureVo"
:key="index" :key="index"
> >
<span>{{ item.name }}</span> <span class="mr-20">{{ item.name }}</span>
<span>{{ item.author }}</span> <span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span> <span>{{ item.source }}</span>
</div> </div>
</div> </div>
<div class="relate-cultual-relic marginBottom32"> <!-- <div class="relate-cultual-relic marginBottom32">
<CustomTitle text="关联文物" /> <CustomTitle text="关联文物" />
<div class="display-group"> <div class="display-group">
<div <div
...@@ -99,10 +125,6 @@ ...@@ -99,10 +125,6 @@
{{ item.content }} {{ item.content }}
</a> </a>
</div> </div>
<!-- <div class="display-source">
<span>遵义文物局</span>
<el-button size="mini">进 入</el-button>
</div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -117,7 +139,7 @@ ...@@ -117,7 +139,7 @@
<div class="source">明（1368-1644）</div> <div class="source">明（1368-1644）</div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -126,6 +148,7 @@ ...@@ -126,6 +148,7 @@
import SearchBar from "@/components/SearchBar"; import SearchBar from "@/components/SearchBar";
import CustomTitle from "@/components/CustomTitle"; import CustomTitle from "@/components/CustomTitle";
import QRCode from "qrcodejs2"; import QRCode from "qrcodejs2";
import { getRCDetailById } from "@/api/culturalRelic";
export default { export default {
components: { SearchBar, CustomTitle }, components: { SearchBar, CustomTitle },
data() { data() {
...@@ -138,64 +161,19 @@ export default { ...@@ -138,64 +161,19 @@ export default {
], ],
selectValue: "", selectValue: "",
keyword: "", keyword: "",
relicInfo: { CRDetail: {},
imgs: ["display1", "display2", "relic"], slideImageWidth: "",
title: "明龙首镶宝石金带钩",
year: "明(1368~1644)",
type: "金银器",
level: "一级",
texture: "金;宝石",
size: "通长14.5厘米，通宽3厘米，边厚0.7厘米",
unit: "赫章县博物馆",
},
relateBooks: [
{ name: "带钩及其演变", author: "王莉", source: "文博.1996(01)" },
{ name: "古代带钩用途考实", author: "王仁湘", source: "文物.1982(10)" },
{
name: "金蝴蝶与金臂钏",
author: "陈娟;闫新法; 牛爱红",
source: "文明.2007(05)",
},
{
name: "带钩起源的服饰背景",
author: "马振凯;",
source: "齐鲁艺苑.2010(03)",
},
],
relateRelics: [
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
],
}; };
}, },
dicts: [
"culturalRelicYears",
"cultural_relic_texture",
"culturalRelicType",
"culturalRelicLevel",
],
mounted() { mounted() {
this.creatQrCode(); this.creatQrCode();
this.loadDetail();
}, },
methods: { methods: {
creatQrCode() { creatQrCode() {
...@@ -208,11 +186,27 @@ export default { ...@@ -208,11 +186,27 @@ export default {
correctLevel: QRCode.CorrectLevel.H, correctLevel: QRCode.CorrectLevel.H,
}); });
}, },
async loadDetail() {
let crId = this.$route.params.crId;
if (crId) {
let res = await getRCDetailById({ crId });
if (res.code == 0) {
this.CRDetail = res.data;
}
}
},
handleBack(){
this.$router.go(-1)
}
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mr-20 {
margin-right: 20px;
}
$label: #9f9c9a;
.search { .search {
width: 1200px; width: 1200px;
margin: auto; margin: auto;
...@@ -221,18 +215,69 @@ export default { ...@@ -221,18 +215,69 @@ export default {
.wrapper { .wrapper {
width: 1200px; width: 1200px;
margin: auto; margin: auto;
background-color: #fff;
padding: 40px;
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
color: $label;
}
}
.detail-container { .detail-container {
margin-bottom: 32px; margin-bottom: 32px;
display: flex; display: flex;
.slide { img {
max-width: 100%;
height: auto;
}
.cr-images {
width: 700px; width: 700px;
margin-right: 32px; margin-right: 32px;
position: relative;
.el-image {
background-color: #f5f5f9;
}
.opration {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
.opration-item {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
.like {
background-color: #668b78;
}
.collect {
background-color: #2069c4;
}
.enlarge {
background-color: #c1925b;
}
}
} }
.relic-info { .relic-info {
.info-title { .info-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 40px;
} }
.info-body { .info-body {
display: flex; display: flex;
...@@ -245,7 +290,10 @@ export default { ...@@ -245,7 +290,10 @@ export default {
.label { .label {
display: block; display: block;
width: 80px; width: 80px;
margin-right: 16px; margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
} }
} }
} }
......
src/views/culturalRelic/components/All.vue
浏览文件 @ 7d9472ee
<!-- --> <!-- -->
<template> <template>
<div class="display-group"> <div class="display-group">
<div class="display-item" v-for="(item, index) in dataList" :key="index" @click="handleClick(item)"> <div
class="display-item"
v-for="(item, index) in CRList.records"
:key="index"
@click="handleClick(item)"
>
<img src="@/assets/imgs/relic.png" width="100%" :alt="item.title" /> <img src="@/assets/imgs/relic.png" width="100%" :alt="item.title" />
<div class="display-desc"> <div class="display-desc">
<div class="desc-title"> <div class="desc-title">
...@@ -19,94 +24,128 @@ ...@@ -19,94 +24,128 @@
<el-button size="mini">进 入</el-button> <el-button size="mini">进 入</el-button>
</div> </div>
</div> </div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "All", name: "All",
props: {
CRList: {
type: Object,
default: () => ({}),
},
},
data() { data() {
return { return {
dataList: [ // dataList: [
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
{ // {
imgUrl: "", // imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙", // title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)", // time: "宋(960~1279)",
content: // content:
"1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。", // "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
}, // },
], // ],
}; };
}, },
mounted() {}, mounted() {},
methods: { methods: {
handleClick(item){ handleClick(item) {
console.log(12); console.log(12);
this.$emit('handleClick',item) this.$emit("handleClick", item);
} },
handleSizeChange(value) {
console.log("handleSizeChange", value);
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
},
handleClickType(type) {
console.log("type", type);
this.currentType = type;
},
handleClickCard(value) {
console.log("接受到value", value);
this.$router.push({
path: "culturalRelic/1",
});
},
}, },
}; };
</script> </script>
...@@ -132,7 +171,7 @@ export default { ...@@ -132,7 +171,7 @@ export default {
.display-desc { .display-desc {
padding: 0 16px; padding: 0 16px;
.desc-content { .desc-content {
text-indent:16px; text-indent: 16px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
......
src/views/culturalRelic/components/Area.vue → src/views/culturalRelic/components/Region.vue
浏览文件 @ 7d9472ee
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<script> <script>
export default { export default {
name: "Area", name: "Region",
data() { data() {
return { return {
area: [ area: [
......
src/views/culturalRelic/index.vue
浏览文件 @ 7d9472ee
<template> <template>
<div class="display"> <div class="display">
<NavBar /> <!-- <NavBar /> -->
<div class="search"> <div class="main">
<SearchBar <div class="content">
:options="options" <el-row :gutter="20">
:selectValue="selectValue" <el-col :span="4" class="selectors">
:keyword="keyword" <!-- <el-row class="select-card">
/> <div class="title">
<div class="types"> <span>年代</span>
<el-button v-for="(item, index) in buttons" :key="index" type="text" @click.native="handleClickType(item.value)">{{ </div>
item.label <div class="body">
}}</el-button> <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">
<!-- <i class="el-icon-check" v-if="item.show"></i> -->
</div>
<div class="check-value">{{ item }}</div>
</div>
</div>
</div>
</el-row>
</el-col>
<el-col :span="20" 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>
</div> </div>
<ALL v-if="currentType === 'all'" @handleClick="handleClickCard" /> <!-- <Footer /> -->
<Area v-if="currentType === 'area'" @handleClick="handleClickCard" />
<ThreeDimension
v-if="currentType === '3d'"
@handleClick="handleClickCard"
/>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
<Footer />
</div> </div>
</template> </template>
<script> <script>
import SearchBar from "@/components/SearchBar"; // import SearchBar from "@/components/SearchBar";
import ALL from "./components/All"; // import NavBar from "@/components/NavBar";
import Area from "./components/Area"; // import Footer from "@/components/Footer";
import ThreeDimension from "./components/ThreeDimension"; import { getCulturalRelicList } from "@/api/culturalRelic";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default { export default {
name: "CulturalRelic", name: "CulturalRelic",
components: { SearchBar, ALL, Area, ThreeDimension,NavBar,Footer }, // components: { SearchBar, NavBar, Footer },
// components: { SearchBar },
data() { data() {
return { return {
buttons: [
{
label: "所有",
value: "all",
},
{
label: "区域",
value: "area",
},
{
label: "3D",
value: "3d",
},
],
options: [ options: [
{ {
value: "name", value: "name",
...@@ -69,28 +117,67 @@ export default { ...@@ -69,28 +117,67 @@ export default {
], ],
selectValue: "", selectValue: "",
keyword: "", keyword: "",
size: 12,
current: 1,
total: 1000,
currentType: "all", 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: { 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) { handleSizeChange(value) {
console.log("handleSizeChange", value); this.list.size = value;
this.loadData();
}, },
// 改变当前显示页
handleCurrentChange(value) { handleCurrentChange(value) {
console.log("handleCurrentChange", value); this.list.current = value;
this.loadData();
}, },
handleClickType(type) {
console.log("type", type); handleClick(item) {
this.currentType = type; console.log(item);
}, const { crId } = item;
handleClickCard(value) {
console.log("接受到value", value);
this.$router.push({ this.$router.push({
path: "culturalRelic/1", path: "culturalRelic/" + crId,
}); });
}, },
}, },
...@@ -98,18 +185,114 @@ export default { ...@@ -98,18 +185,114 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #1e5fbb;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
margin: auto; width: 100%;
width: 1200px; // background-color: #2069c4;
.search { // color: #fff;
// padding: 0 24%; .main {
display: flex; display: flex;
justify-content: space-between; align-items: center;
margin-bottom: 32px; flex-direction: column;
.types { padding: 0 60px;
width: 160px; .search {
margin-left: 16px; 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;
}
}
}
}
}
} }
} }
......
src/views/display/index.vue
浏览文件 @ 7d9472ee
<template> <template>
<div class="display"> <div class="display">
<NavBar /> <!-- <NavBar /> -->
<div class="search"> <div class="main">
<SearchBar <div class="content">
:options="options" <el-row :gutter="20">
:selectValue="selectValue" <el-col :span="24" class="rclist">
:keyword="keyword" <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> </div>
<div class="display-group"> <!-- <Footer /> -->
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col>
</el-row>
</div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
<Footer />
</div> </div>
</template> </template>
<script> <script>
import SearchBar from "@/components/SearchBar"; // import SearchBar from "@/components/SearchBar";
import DisplayCard from "@/components/DisplayCard"; // 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";
export default { export default {
name: "Display", name: "CulturalRelic",
components: { SearchBar, DisplayCard,NavBar,Footer }, // components: { SearchBar, NavBar, Footer },
// components: { SearchBar },
data() { data() {
return { return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "", selectValue: "",
keyword: "", keyword: "",
exhibitions: [ currentType: "all",
{ list: {
imgUrl: "", records: [],
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展", size: 40,
content: current: 1,
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅", total: 0,
}, },
{ years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
imgUrl: "", types: ["青铜", "石器"],
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content:
" 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
},
],
size: 12,
current: 1,
total: 1000,
}; };
}, },
dicts: ["culturalRelicYears", "cultural_relic_texture", "culturalRelicType"],
created() {
setTimeout(() => {
// console.log(this.dicts);
});
},
mounted() {
this.loadData();
},
methods: { methods: {
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getList(params);
if (res.code == 0) {
this.list = res.data;
}
},
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) { handleSizeChange(value) {
console.log("handleSizeChange", value); this.list.size = value;
this.loadData();
}, },
// 改变当前显示页
handleCurrentChange(value) { handleCurrentChange(value) {
console.log("handleCurrentChange", value); this.list.current = value;
this.loadData();
}, },
handleClick() {
handleClick(item) {
console.log(item);
const { crId } = item;
this.$router.push({ this.$router.push({
path: "display/1", path: "culturalRelic/" + crId,
}); });
}, },
}, },
...@@ -151,16 +141,117 @@ export default { ...@@ -151,16 +141,117 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #1e5fbb;
$text-indent: 16px;
.display { .display {
margin: auto; width: 100%;
width: 1200px; // background-color: #2069c4;
.search { // color: #fff;
// padding: 0 24%; .main {
} display: flex;
.display-group { align-items: center;
margin-top: 24px; flex-direction: column;
// padding: 0 16%; 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 { .pagination {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
......
src/views/home/index.vue
浏览文件 @ 7d9472ee
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="recommend-list"> <div class="recommend-list">
<div class="recommend-item"> <div class="recommend-item">
<div class="recommend-item-container boutique"> <div class="recommend-item-container boutique">
<NavBar class="navBar" /> <!-- <NavBar class="navBar" /> -->
<el-carousel height="100vh" style="width: 100%"> <el-carousel height="100vh" style="width: 100%">
<el-carousel-item v-for="(item,index) in [1,2,3]" :key="index"> <el-carousel-item v-for="(item,index) in [1,2,3]" :key="index">
<h3 <h3
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<!-- <MuseumMap /> --> <!-- <MuseumMap /> -->
</div> </div>
</div> </div>
<Footer /> <!-- <Footer /> -->
</div> </div>
</template> </template>
......
src/views/virtual/index.vue
浏览文件 @ 7d9472ee
<template> <template>
<div class="virtual"> <div class="virtual">
<NavBar /> <!-- <NavBar /> -->
<h1>虚拟展厅</h1> <h1>虚拟展厅</h1>
<Footer /> <!-- <Footer /> -->
</div> </div>
</template> </template>
......
vue.config.js
浏览文件 @ 7d9472ee
...@@ -16,7 +16,7 @@ module.exports = defineConfig({ ...@@ -16,7 +16,7 @@ module.exports = defineConfig({
hot: true, hot: true,
proxy: { proxy: {
'/api': { '/api': {
target: 'http://127.0.0.1:4523/m1/1100718-0-default', target: 'http://172.24.100.189:8080',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''
...@@ -33,18 +33,15 @@ module.exports = defineConfig({ ...@@ -33,18 +33,15 @@ module.exports = defineConfig({
return args return args
}) })
}, },
configureWebpack: config => { configureWebpack: {
const configuration = { // provide the app's title in webpack's name field, so that
// provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title.
// it can be accessed in index.html to inject the correct title. resolve: {
// name: name, alias: {
resolve: { '@': resolve('src')
alias: {
'@': resolve('src')
}
} }
} }
return configuration
}, },
}) })
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论