feat:文物列表和详情

env.development

 NODE_ENV = 'development'
 VUE_APP_CURRENTMODE = 'dev'
-VUE_APP_BASE_API = 'http://127.0.0.1:4523/m1/1100718-0-default/'
\ No newline at end of file
+VUE_APP_BASE_API = 'http://172.24.100.189:8080'
\ No newline at end of file

src/App.vue

 <template>
   <div id="app">
-    <!-- <NavBar /> -->
-    
-    <!-- <Footer /> -->
+    <NavBar />
     <router-view />
+    <Footer />
   </div>
 </template>
 <script>
-// import NavBar from "@/components/NavBar";
-// import Footer from "@/components/Footer";
-// export default {
-//   components: { NavBar, Footer },
-// };
+import NavBar from "@/components/NavBar";
+import Footer from "@/components/Footer";
+export default {
+  components: { NavBar, Footer },
+};
 </script>
 <style lang="scss">
 #app {
@@ -24,5 +23,12 @@ body {
   margin: 0;
   padding: 0;
   background: #f7f7f7;
+  box-sizing: border-box;
+}
+div,
+span,
+ul,
+li {
+  box-sizing: border-box;
 }
 </style>

src/api/culturalRelic.js

+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

+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

+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

+
+
+import request from '@/utils/request'
+
+export function getLiteratureList(data) {
+  return request({
+    url: 'sysLiterature/listByPage',
+    method: 'post',
+    data
+  })
+}

src/api/org.js

+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

+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

 <template>
   <div class="nav">
+    <div class="container">
       <div class="title">贵州省精品展览展示平台</div>
-    <div class="tabs" v-for="(item, index) in pages" :key="index">
-      <router-link :to="item.path">{{ item.name }}</router-link>
+      <div class="right">
+        <div class="tabs">
+          <router-link
+            :to="item.path"
+            v-for="(item, index) in pages"
+            :key="index"
+            class="tab-item"
+            >{{ item.name }}</router-link
+          >
         </div>
         <div class="operation">
           <span v-if="isLogged">欢迎你，{{ userInfo.userName }}</span>
           <router-link v-if="!isLogged" to="/login" class="operation-item"
             >登陆</router-link
           >|
-      <router-link to="/personal" class="operation-item">个人中心</router-link>|
+          <router-link to="/personal" class="operation-item"
+            >个人中心</router-link
+          >|
           <span class="logout">
             <el-popover
               placement="bottom"
@@ -34,6 +44,8 @@
           </span>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -90,25 +102,41 @@ a {
   text-decoration: none;
 }
 .nav {
-  display: flex;
   height: 120px;
+  width: 100%;
+  // background-color: #1e5fbb;
+  //  box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
+  .container {
+    width: 100%;
+    height: 100%;
+    display: flex;
     align-items: center;
     justify-content: space-between;
-  margin: auto;
-  width: 1200px;
+    padding: 0 100px;
     .title {
       font-size: 30px;
-    font-weight: bold;
+      // font-weight: bold;
+      font-family: LiSu;
+      // color: #c8945b;
     }
+    .right {
+      display: flex;
+
       .tabs {
         display: flex;
-    margin-right: 5px;
+        margin-right: 100px;
+        .tab-item{
+          margin-right: 80px;
+          // color: #fff;
+        }
       }
       .operation {
         .operation-item {
           margin-right: 8px;
           cursor: pointer;
-      color: #000;
+          // color: #fff;
+        }
+      }
     }
   }
 }

src/components/SearchBar/index.vue

 <!-- -->
 <template>
   <div class="search-bar">
-    <el-select v-model="select" placeholder="请选择">
+    <!-- <el-select v-model="select" placeholder="请选择">
       <el-option
         v-for="item in options"
         :key="item.value"
@@ -9,7 +9,7 @@
         :value="item.value"
       >
       </el-option>
-    </el-select>
+    </el-select> -->
     <el-input
       v-model="searchValue"
       placeholder="请输入关键词"

src/main.js

@@ -11,6 +11,8 @@ import 'element-ui/lib/theme-chalk/index.css';
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 // Vue.prototype.$echarts = echarts
+import dict from '@/components/Dict'
+Vue.use(dict);
 
 new Vue({
   router,

src/router/index.js

@@ -43,7 +43,7 @@ const routes = [
   },
   // 文物详情页
   {
-    path: '/culturalRelic/:id',
+    path: '/culturalRelic/:crId',
     name: 'culturalRelicDetail',
     component: () => import('@/views/culturalRelic/Detail.vue')
   },

src/store/getters.js

 const getters = {
-    // 用户
   token: state => state.user.token,
-    avatar: state => state.user.userInfo.avatar,
-    name: state => state.user.userInfo.name,
   userInfo: state => state.user.userInfo,
-  }
-  export default getters
-  
\ No newline at end of file
+  avatar: state => state.user.avatar,
+  name: state => state.user.name,
+  dicts: state => state.dict.dicts,
+  museumTree: state => state.org.museumTree
+}
+export default getters

src/store/index.js

@@ -2,12 +2,16 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
 import user from './modules/user'
+import dict from './modules/dict'
+import org from './modules/org'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
     user,
+    dict,
+    org
   },
   getters
 })

src/store/modules/dict.js

+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

+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

 import {
   login,
-    // getInfo,
-    // getAsyncRouter
-  } from '@/api/user'
+  logout,
+} from '@/api/user'
 import {
   getToken,
   setToken,
   removeToken,
   getUserInfo,
   setUserInfo,
-  removeUserInfo,
+  removeUserInfo
 } from '@/utils/auth'
 
 
 const getDefaultState = () => {
   return {
     token: getToken(),
-    userInfo: getUserInfo(),
+    userInfo:getUserInfo(),
+    name: '',
+    avatar: '',
+    // deptList:{}
   }
 }
+
 const state = getDefaultState()
 
 const mutations = {
@@ -27,11 +30,19 @@ const mutations = {
   },
   SET_TOKEN: (state, 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
   },
+  // SET_DEPTLIST:(state,deptList)=>{
+  //   state.deptList = deptList
+  // }
 }
 
 const actions = {
@@ -39,21 +50,26 @@ const actions = {
   login({
     commit
   }, userInfo) {
+    const {
+      username,
+      password,
+      captcha
+    } = userInfo
     return new Promise((resolve, reject) => {
-      login(userInfo).then(response => {
-        if (response.code != 0) {
-          userInfo.fail(response)
-        } else {
+      login({
+        username: username.trim(),
+        password: password,
+        captcha: captcha
+      }).then(response => {
         const {
-            data,
-            token
+          data
         } = response
-          commit('SET_TOKEN', token)
-          commit('SET_INFO', data)
-          setToken(token)
+        commit('SET_TOKEN', data.accessToken)
+        commit('SET_NAME', data.username)
+        commit('SET_USERINFO', data)
+        setToken(data.accessToken)
         setUserInfo(data)
         resolve()
-        }
       }).catch(error => {
         reject(error)
       })
@@ -61,28 +77,33 @@ const actions = {
   },
 
   // get user info
-  getInfo({
-    commit,
-    state
-  }) {
-    return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const {
-          data
-        } = response
+  // getInfo({
+  //   commit,
+  //   state
+  // }) {
+  //   return new Promise((resolve, reject) => {
+  //     getInfo(state.token).then(response => {
+  //       const {
+  //         data
+  //       } = response
 
-        if (!data) {
-          reject('Verification failed, please Login again.')
-        }
-        commit('SET_INFO', data)
-        setUserInfo(data)
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
+  //       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
   logout({
@@ -90,11 +111,15 @@ const actions = {
     state
   }) {
     return new Promise((resolve, reject) => {
-      // logout(state.token).then(() => {
+      logout(state.token).then(() => {
         removeToken() // must remove  token  first
         removeUserInfo()
         commit('RESET_STATE')
         resolve()
+      }).catch(error => {
+       console.log('err',error);
+        // reject(error)
+      })
     })
   },
 
@@ -104,12 +129,28 @@ const actions = {
   }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
-      removeUserInfo()
       commit('RESET_STATE')
       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 {

src/utils/auth.js

@@ -4,7 +4,6 @@ const TokenKey = 'bwgzl_token'
 const UserInfoKey = 'bwgzl_user_info'
 
 export function getToken() {  
-  console.log('刷新后getToken',Cookies.get(TokenKey));
   return Cookies.get(TokenKey)
 }
 
@@ -17,7 +16,6 @@ export function removeToken() {
 }
 
 export function getUserInfo() {
-  console.log('刷新后getUserInfo',JSON.parse(localStorage.getItem(UserInfoKey)));
   return JSON.parse(localStorage.getItem(UserInfoKey))
 }
 

src/utils/request.js

-// 导入axios
 import axios from 'axios'
-// 使用element-ui Message做消息提醒
 import {
+  MessageBox,
   Message
-} from 'element-ui';
+} from 'element-ui'
+import store from '@/store'
 import {
   getToken
 } from '@/utils/auth'
-//1. 创建新的axios实例，
+
+// create an axios instance
 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',
-  // 超时时间 单位是ms，这里设置了3s的超时时间
-  timeout: 3 * 1000
+  timeout: 5000,
 })
-// 2.请求拦截器
-service.interceptors.request.use(config => {
-  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
-  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
-  config.headers = {
-    'Content-Type': 'application/x-www-form-urlencoded' //配置请求头
-  }
-  const token = getToken();
-  if (token) {
-    config.params = {
-      'token': token
-    } //如果要求携带在参数中
-    config.headers.token = token; //如果要求携带在请求头中
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (getToken()) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['authorization'] = getToken()
     }
     return config
-}, error => {
-  Promise.reject(error)
-})
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
 
-// 3.响应拦截器
+  }
+)
+
+// response interceptor
 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
-    if (response.config.responseType !== 'blob') {
+    // console.log('响应拦截res--------',response);
+    if (response.config.url === '/api/sys/getVerify') {
+      // debugger
+      return res
+    }
+    // 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: 3 * 1000,
+        duration: 5 * 1000
+      })
+      // 401001l令牌过期;
+      if (res.code === 401001) {
+        MessageBox.confirm('登录令牌已过期，请重新登录', '确认退出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
         })
+      }
+      // 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) => {
-    let res = error.response
-    if (error.response) {
-      if (res.status == 401) {
-        Vue.prototype.parentFns.portal_logout()
-      }
-    }
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.msg,
+      type: 'error',
+      duration: 5 * 1000
+    })
     return Promise.reject(error)
   }
 )
 
-//4.导入文件
 export default service

src/views/boutique/index.vue

 <template>
   <div class="boutique">
-    <NavBar />
+    <!-- <NavBar /> -->
     <h1>精品展</h1>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 

src/views/culturalRelic/Detail.vue

 <!-- -->
 <template>
   <div class="display-detail">
-    <div class="search">
+    <!-- <div class="search">
       <SearchBar
         :options="options"
         :selectValue="selectValue"
         :keyword="keyword"
       />
-    </div>
+    </div> -->
     <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="slide">
-          <el-carousel indicator-position="outside">
-            <el-carousel-item v-for="item in relicInfo.imgs" :key="item">
-              <img
-                :src="require(`@/assets/imgs/${item}.png`)"
-                alt=""
-                srcset=""
-                width="100%"
-              />
+        <div class="cr-images">
+          <el-carousel
+            indicator-position="outside"
+            :autoplay="false"
+            height="600px"
+          >
+            <el-carousel-item
+              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>
+          <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 class="relic-info">
-          <div class="info-title">
-            <h4>{{ relicInfo.title }}</h4>
-            <div class="operation">
-              <el-button type="text">收藏</el-button>
+          <div class="info-title" v-if="Object.keys(dict).length > 0">
+            <h3>{{ CRDetail.name }}</h3>
+            <!-- <div class="operation">
+              <el-button type="text" icon="el-icon-star-off">收藏</el-button>
               <el-button type="text">点赞</el-button>
               <el-button type="text">转发</el-button>
-            </div>
+            </div> -->
           </div>
           <div class="info-body">
             <div class="basic-info">
               <div class="body-item">
                 <span class="label">年份</span>
-                <span class="value">{{ relicInfo.year }}</span>
+                <span class="value">{{ CRDetail.years }}</span>
               </div>
               <div class="body-item">
                 <span class="label">类别</span>
-                <span class="value">{{ relicInfo.type }}</span>
+                <span class="value">{{
+                  dict.culturalRelicType[CRDetail.type]
+                }}</span>
               </div>
               <div class="body-item">
                 <span class="label">级别</span>
-                <span class="value">{{ relicInfo.level }}</span>
+                <span class="value">{{
+                  dict.culturalRelicLevel[CRDetail.level]
+                }}</span>
               </div>
               <div class="body-item">
                 <span class="label">质地</span>
-                <span class="value">{{ relicInfo.texture }}</span>
+                <span class="value">{{
+                  dict.cultural_relic_texture[CRDetail.textureType]
+                }}</span>
               </div>
               <div class="body-item">
                 <span class="label">尺寸</span>
-                <span class="value">{{ relicInfo.size }}</span>
+                <span class="value">{{ CRDetail.detailSize }}</span>
               </div>
               <div class="body-item">
                 <span class="label">馆藏单位</span>
-                <span class="value">{{ relicInfo.unit }}</span>
+                <span class="value">{{ CRDetail.deptName }}</span>
               </div>
             </div>
             <div class="qrcode" ref="qrCodeUrl"></div>
@@ -67,15 +93,15 @@
         <CustomTitle text="相关文献" />
         <div
           class="book-item"
-          v-for="(item, index) in relateBooks"
+          v-for="(item, index) in CRDetail.literatureVo"
           :key="index"
         >
-          <span>{{ item.name }}</span>
-          <span>{{ item.author }}</span>
+          <span class="mr-20">{{ item.name }}</span>
+          <span class="mr-20">{{ item.author }}</span>
           <span>{{ item.source }}</span>
         </div>
       </div>
-      <div class="relate-cultual-relic marginBottom32">
+      <!-- <div class="relate-cultual-relic marginBottom32">
         <CustomTitle text="关联文物" />
         <div class="display-group">
           <div
@@ -99,10 +125,6 @@
                 {{ item.content }}
               </a>
             </div>
-            <!-- <div class="display-source">
-              <span>遵义文物局</span>
-              <el-button size="mini">进 入</el-button>
-            </div> -->
           </div>
         </div>
       </div>
@@ -117,7 +139,7 @@
             <div class="source">明（1368-1644）</div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -126,6 +148,7 @@
 import SearchBar from "@/components/SearchBar";
 import CustomTitle from "@/components/CustomTitle";
 import QRCode from "qrcodejs2";
+import { getRCDetailById } from "@/api/culturalRelic";
 export default {
   components: { SearchBar, CustomTitle },
   data() {
@@ -138,64 +161,19 @@ export default {
       ],
       selectValue: "",
       keyword: "",
-      relicInfo: {
-        imgs: ["display1", "display2", "relic"],
-        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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
-        },
-      ],
+      CRDetail: {},
+      slideImageWidth: "",
     };
   },
+  dicts: [
+    "culturalRelicYears",
+    "cultural_relic_texture",
+    "culturalRelicType",
+    "culturalRelicLevel",
+  ],
   mounted() {
     this.creatQrCode();
+    this.loadDetail();
   },
   methods: {
     creatQrCode() {
@@ -208,11 +186,27 @@ export default {
         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>
 
 <style lang="scss" scoped>
+.mr-20 {
+  margin-right: 20px;
+}
+$label: #9f9c9a;
 .search {
   width: 1200px;
   margin: auto;
@@ -221,18 +215,69 @@ export default {
 .wrapper {
   width: 1200px;
   margin: auto;
+  background-color: #fff;
+  padding: 40px;
+  .back {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 40px;
+    .el-button {
+      color: $label;
+    }
+  }
   .detail-container {
     margin-bottom: 32px;
     display: flex;
-    .slide {
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+    .cr-images {
       width: 700px;
       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 {
       .info-title {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-bottom: 40px;
       }
       .info-body {
         display: flex;
@@ -245,7 +290,10 @@ export default {
             .label {
               display: block;
               width: 80px;
-              margin-right: 16px;
+              margin-right: 26px;
+              margin-bottom: 10px;
+              font-weight: bold;
+              color: #9f9c9a;
             }
           }
         }

src/views/culturalRelic/components/All.vue

 <!-- -->
 <template>
   <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" />
       <div class="display-desc">
         <div class="desc-title">
@@ -19,94 +24,128 @@
         <el-button size="mini">进 入</el-button>
       </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>
 </template>
 
 <script>
 export default {
   name: "All",
-  data() {
-    return {
-      dataList: [
-        {
-          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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+  props: {
+    CRList: {
+      type: Object,
+      default: () => ({}),
     },
-        {
-          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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+  data() {
+    return {
+      // dataList: [
+      //   {
+      //     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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+      //   },
+      //   {
+      //     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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+      //   },
+      //   {
+      //     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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+  mounted() {},
+  methods: {
+    handleClick(item) {
+      console.log(12);
+      this.$emit("handleClick", item);
     },
-        {
-          imgUrl: "",
-          title: "宋代鹭鸟纹彩色蜡染褶裙",
-          time: "宋(960~1279)",
-          content:
-            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+    handleSizeChange(value) {
+      console.log("handleSizeChange", value);
     },
-        {
-          imgUrl: "",
-          title: "宋代鹭鸟纹彩色蜡染褶裙",
-          time: "宋(960~1279)",
-          content:
-            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+    handleCurrentChange(value) {
+      console.log("handleCurrentChange", value);
     },
-        {
-          imgUrl: "",
-          title: "宋代鹭鸟纹彩色蜡染褶裙",
-          time: "宋(960~1279)",
-          content:
-            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
+    handleClickType(type) {
+      console.log("type", type);
+      this.currentType = type;
     },
-      ],
-    };
+    handleClickCard(value) {
+      console.log("接受到value", value);
+      this.$router.push({
+        path: "culturalRelic/1",
+      });
     },
-  mounted() {},
-  methods: {
-    handleClick(item){
-      console.log(12);
-      this.$emit('handleClick',item)
-    }
   },
 };
 </script>
@@ -132,7 +171,7 @@ export default {
     .display-desc {
       padding: 0 16px;
       .desc-content {
-        text-indent:16px;
+        text-indent: 16px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

src/views/culturalRelic/components/Area.vue → src/views/culturalRelic/components/Region.vue

@@ -38,7 +38,7 @@
 
 <script>
 export default {
-  name: "Area",
+  name: "Region",
   data() {
     return {
       area: [

src/views/culturalRelic/index.vue

 <template>
   <div class="display">
-     <NavBar />
+    <!-- <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">
+                      <!-- <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">
-      <SearchBar
-        :options="options"
-        :selectValue="selectValue"
-        :keyword="keyword"
-      />
-      <div class="types">
-        <el-button  v-for="(item, index) in buttons" :key="index" type="text" @click.native="handleClickType(item.value)">{{
-          item.label
-        }}</el-button>
-      </div>
-    </div>
-    <ALL v-if="currentType === 'all'" @handleClick="handleClickCard" />
-    <Area v-if="currentType === 'area'" @handleClick="handleClickCard" />
-    <ThreeDimension
-      v-if="currentType === '3d'"
-      @handleClick="handleClickCard"
-    />
+              <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="current"
-        :page-sizes="[12, 28, 40]"
-        :page-size="size"
+                  :current-page="Number(list.current)"
+                  :page-sizes="[10, 20, 40, 50]"
+                  :page-size="Number(list.size)"
                   layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
+                  :total="Number(list.total)"
+                  class="pagination"
                 >
                 </el-pagination>
               </div>
-      <Footer />
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!-- <Footer /> -->
   </div>
 </template>
 
 <script>
-import SearchBar from "@/components/SearchBar";
-import ALL from "./components/All";
-import Area from "./components/Area";
-import ThreeDimension from "./components/ThreeDimension";
-import NavBar from "@/components/NavBar";
-import Footer from "@/components/Footer";
+// 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, ALL, Area, ThreeDimension,NavBar,Footer },
+  // components: { SearchBar, NavBar, Footer },
+  // components: { SearchBar },
   data() {
     return {
-      buttons: [
-        {
-          label: "所有",
-          value: "all",
-        },
-        {
-          label: "区域",
-          value: "area",
-        },
-        {
-          label: "3D",
-          value: "3d",
-        },
-      ],
       options: [
         {
           value: "name",
@@ -69,28 +117,67 @@ export default {
       ],
       selectValue: "",
       keyword: "",
-
-      size: 12,
-      current: 1,
-      total: 1000,
       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) {
-      console.log("handleSizeChange", value);
+      this.list.size = value;
+      this.loadData();
     },
+
+    // 改变当前显示页
     handleCurrentChange(value) {
-      console.log("handleCurrentChange", value);
+      this.list.current = value;
+      this.loadData();
     },
-    handleClickType(type) {
-      console.log("type", type);
-      this.currentType = type;
-    },
-    handleClickCard(value) {
-      console.log("接受到value", value);
+
+    handleClick(item) {
+      console.log(item);
+      const { crId } = item;
       this.$router.push({
-        path: "culturalRelic/1",
+        path: "culturalRelic/" + crId,
       });
     },
   },
@@ -98,18 +185,114 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$blue: #1e5fbb;
 $text-indent: 16px;
 .display {
-  margin: auto;
-  width: 1200px;
+  width: 100%;
+  // background-color: #2069c4;
+  // color: #fff;
+  .main {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 60px;
     .search {
-    // padding: 0 24%;
       display: flex;
-    justify-content: space-between;
-    margin-bottom: 32px;
-    .types {
-      width: 160px;
-      margin-left: 16px;
+      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

 <template>
   <div class="display">
-    <NavBar />
+    <!-- <NavBar /> -->
+    <div class="main">
+      <div class="content">
+        <el-row :gutter="20">
+          <el-col :span="24" class="rclist">
             <div class="search">
-      <SearchBar
-        :options="options"
-        :selectValue="selectValue"
-        :keyword="keyword"
-      />
+              <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">
-      <el-row :gutter="16">
+              <!-- <div class="total">
+                <span>{{ list.total }}</span
+                >件
+              </div>
+              <div class="divider"></div> -->
+              <el-row :gutter="10">
                 <el-col
                   :span="6"
-          v-for="(item, index) in exhibitions"
+                  class="cr-box"
+                  display-item
+                  @click.native="handleClick(item)"
+                  v-for="(item, index) in list.records"
                   :key="index"
-          @click.native="handleClick"
                 >
-          <DisplayCard :title="item.title" :content="item.content" />
+                  <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>
-
               <div class="pagination">
                 <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
-        :current-page="current"
-        :page-sizes="[12, 28, 40]"
-        :page-size="size"
+                  :current-page="Number(list.current)"
+                  :page-sizes="[10, 20, 40, 50]"
+                  :page-size="Number(list.size)"
                   layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
+                  :total="Number(list.total)"
+                  class="pagination"
                 >
                 </el-pagination>
               </div>
-    <Footer />
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!-- <Footer /> -->
   </div>
 </template>
 
 <script>
-import SearchBar from "@/components/SearchBar";
-import DisplayCard from "@/components/DisplayCard";
-import NavBar from "@/components/NavBar";
-import Footer from "@/components/Footer";
+// import SearchBar from "@/components/SearchBar";
+// import NavBar from "@/components/NavBar";
+// import Footer from "@/components/Footer";
+import { getList } from "@/api/display";
 export default {
-  name: "Display",
-  components: { SearchBar, DisplayCard,NavBar,Footer },
+  name: "CulturalRelic",
+  // components: { SearchBar, NavBar, Footer },
+  // components: { SearchBar },
   data() {
     return {
-      options: [
-        {
-          value: "name",
-          label: "文物名称",
-        },
-      ],
       selectValue: "",
       keyword: "",
-      exhibitions: [
-        {
-          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号展厅",
+      currentType: "all",
+      list: {
+        records: [],
+        size: 40,
+        current: 1,
+        total: 0,
       },
-        {
-          imgUrl: "",
-          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
-          content:
-            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
+      years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
+      types: ["青铜", "石器"],
+    };
   },
-        {
-          imgUrl: "",
-          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
-          content:
-            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
+  dicts: ["culturalRelicYears", "cultural_relic_texture", "culturalRelicType"],
+  created() {
+    setTimeout(() => {
+      // console.log(this.dicts);
+    });
   },
-        {
-          imgUrl: "",
-          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
-          content:
-            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
+  mounted() {
+    this.loadData();
   },
-        {
-          imgUrl: "",
-          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
-          content:
-            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
+  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;
+      }
     },
-      ],
-      size: 12,
-      current: 1,
-      total: 1000,
+
+    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;
+      }
     },
-  methods: {
+    // 改变页容量
     handleSizeChange(value) {
-      console.log("handleSizeChange", value);
+      this.list.size = value;
+      this.loadData();
     },
+
+    // 改变当前显示页
     handleCurrentChange(value) {
-      console.log("handleCurrentChange", value);
+      this.list.current = value;
+      this.loadData();
     },
-    handleClick() {
+
+    handleClick(item) {
+      console.log(item);
+      const { crId } = item;
       this.$router.push({
-        path: "display/1",
+        path: "culturalRelic/" + crId,
       });
     },
   },
@@ -151,16 +141,117 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$blue: #1e5fbb;
+$text-indent: 16px;
 .display {
-  margin: auto;
-  width: 1200px;
+  width: 100%;
+  // background-color: #2069c4;
+  // color: #fff;
+  .main {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 60px;
     .search {
-    // padding: 0 24%;
+      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;
     }
-  .display-group {
+
+    .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;
-    // padding: 0 16%;
+              .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;

src/views/home/index.vue

@@ -3,7 +3,7 @@
     <div class="recommend-list">
       <div class="recommend-item">
         <div class="recommend-item-container boutique">
-          <NavBar class="navBar" />
+          <!-- <NavBar class="navBar" /> -->
           <el-carousel height="100vh" style="width: 100%">
             <el-carousel-item v-for="(item,index) in [1,2,3]" :key="index">
               <h3
@@ -27,7 +27,7 @@
         <!-- <MuseumMap /> -->
       </div>
     </div>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 

src/views/virtual/index.vue

 <template>
   <div class="virtual">
-    <NavBar />
+    <!-- <NavBar /> -->
     <h1>虚拟展厅</h1>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 

vue.config.js

@@ -16,7 +16,7 @@ module.exports = defineConfig({
     hot: true,
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:4523/m1/1100718-0-default',
+        target: 'http://172.24.100.189:8080',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
@@ -33,18 +33,15 @@ module.exports = defineConfig({
         return args
       })
   },
-  configureWebpack: config => {
-    const configuration = {
+  configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
-      // name: name,
     resolve: {
       alias: {
         '@': resolve('src')
       }
     }
-    }
-    return configuration
   },
 
+
 })