展览增加关联文物显示

src/components/NavBar/index.vue

@@ -191,7 +191,7 @@ export default {
         // height: 100%;
 
         .tab-item {
-          margin-right: 90px;
+          margin-right: 70px;
           color: #fff;
           // height: 100%;
           display: flex;

src/components/SearchBar/index.vue

 <!-- -->
 <template>
   <div class="search-bar">
-    <!-- <el-select v-model="select" placeholder="请选择">
+    
+    <el-input
+      v-model="searchValue"
+      placeholder="请输入关键词"
+      class="center"
+      @keyup.enter.native="search"
+    >
+    <el-select v-model="select" placeholder="请选择" slot="prepend" v-if="options.length>0">
       <el-option
         v-for="item in options"
         :key="item.value"
@@ -9,16 +16,11 @@
         :value="item.value"
       >
       </el-option>
-    </el-select> -->
-    <el-input
-      v-model="searchValue"
-      placeholder="请输入关键词"
-      class="center"
-      @keyup.enter.native="search"
-    ></el-input>
-    <el-button  round type="primary" @click.native="search" class="searchButton"
+    </el-select>
+    <el-button  round type="primary" @click.native="search" class="searchButton" slot="append"
       >检索</el-button
     >
+    </el-input>
   </div>
 </template>
 
@@ -60,7 +62,7 @@ export default {
 
 <style lang="scss" scoped>
 .search-bar {
-  width: 100%;
+  width: 60%;
   display: flex;
   .center {
     margin: 0 16px;

src/views/display/Detail.vue

@@ -18,8 +18,8 @@
           >返回上页</el-button
         >
       </div>
-      <el-row class="detail-container" :gutter="10">
-        <el-col class="cr-images" :span="18">
+      <el-row class="detail-container" :gutter="30">
+        <el-col class="cr-images" :span="16">
           <el-carousel
             indicator-position="outside"
             :autoplay="false"
@@ -178,7 +178,24 @@
           </el-col>
         </el-row>
       </div>
-
+      <div
+        class="margin-bottom-32"
+        v-if="
+          displayDetail.culturalRelicVo &&
+          displayDetail.culturalRelicVo.length > 0
+        "
+      >
+        <CustomTitle text="关联文物" />
+        <el-row :gutter="20">
+          <el-col
+            :span="6"
+            v-for="(item, index) in displayDetail.culturalRelicVo"
+            :key="index"
+          >
+            <Card :title="item.name" :url="item.faceImageUrl"
+          /></el-col>
+        </el-row>
+      </div>
       <div
         class="relate-video margin-bottom-32"
         v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
@@ -244,11 +261,11 @@ import SearchBar from "@/components/SearchBar";
 import AudioPlayer from "@/components/AudioPlayer";
 import CustomTitle from "@/components/CustomTitle";
 import ReaderOperations from "@/components/ReaderOperations";
+import Card from "@/views/personal/components/Card";
 import Video from "@/components/Video";
 import QRCode from "qrcodejs2";
 import { getDisplayById } from "@/api/display";
 import MenuList from "@/components/MenuList";
-import { crRecommendByPage } from "@/api/culturalRelic";
 export default {
   components: {
     SearchBar,
@@ -257,6 +274,7 @@ export default {
     ReaderOperations,
     MenuList,
     Video,
+    Card,
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
   },
@@ -332,20 +350,6 @@ export default {
       }
     },
 
-    // async loadCrRecommend() {
-    //   const { exhibitionId, type } = this.displayDetail;
-    //   // debugger
-    //   const params = {
-    //     exhibitionId,
-    //     // type,
-    //     // years,
-    //     page: 1,
-    //     limit: 5,
-    //   };
-    //   let res = await crRecommendByPage(params);
-    //   this.relateRelics = res.data.records;
-    //   console.log("res", res);
-    // },
     handleBack() {
       this.$router.go(-1);
     },
@@ -401,7 +405,7 @@ $label: #9f9c9a;
     }
     .cr-images {
       width: 700px;
-      margin-right: 32px;
+      // margin-right: 32px;
       position: relative;
       .el-image {
         background-color: #f5f5f9;

src/views/display/index.vue

@@ -14,7 +14,7 @@
                 clearable
                 ><i slot="suffix" class="el-input__icon el-icon-search"></i
               ></el-input> -->
-              <SearchBar @search="search" :keyword="keyword" />
+              <SearchBar @search="search" :keyword="keyword" :options="searchOptions" />
             </div>
             <div class="display-group">
               <!-- <div class="total">
@@ -24,7 +24,7 @@
               <div class="divider"></div> -->
               <el-row :gutter="60">
                 <el-col
-                  :span="6"
+                  :span="8"
                   class="display-item"
                   @click.native="handleClick(item)"
                   v-for="(item, index) in list.records"
@@ -39,7 +39,7 @@
                       width="100%"
                       @error="defImg"
                       lazy
-                      style="height: 280px;width: 100%;"
+                      style=" width: 100%"
                     />
                     <img
                       v-else
@@ -91,6 +91,9 @@ export default {
     return {
       selectValue: "",
       keyword: "", //搜索关键词
+      searchOptions:[
+        {label:'展览类型',value:''}
+      ],
       currentType: "all",
       list: {
         records: [],
@@ -177,9 +180,8 @@ $text-indent: 16px;
       // margin-top: 20px;
       .search-bar {
         margin-bottom: 40px;
-        // width: 400px;
         width: 1200px;
-        // border-radius: 48px !important;
+        padding: 0 40px;
       }
     }
 
@@ -194,7 +196,9 @@ $text-indent: 16px;
     }
 
     .content {
-      width: 100%;
+      width: 1200px;
+      // background-color: #fff;
+      // padding: 60px;
       .selectors {
         margin-top: 80px;
 
@@ -281,6 +285,7 @@ $text-indent: 16px;
 
         .display-item {
           cursor: pointer;
+          margin-bottom: 20px;
           .img {
             img {
               width: 100%;

src/views/personal/components/Card/index.vue

 <template>
   <div class="display-item">
-    <el-image :src="url" width="100%" :alt="title" height="200px" lazy />
+    <el-image :src="url" width="100%" :alt="title" style="height:200px;" lazy fit="fill"/>
     <div class="display-desc">
       <div class="desc-title">
-        <h4>{{ title }}</h4>
+        <span>{{ title }}</span>
       </div>
     </div>
   </div>
@@ -34,7 +34,7 @@ export default {
   margin-bottom: 32px;
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 0 0 32px 0;
+
   background-color: #fff;
   margin-right: 10px;
   cursor: pointer;
@@ -44,13 +44,18 @@ export default {
   }
   .display-desc {
     padding: 0 16px;
-    .desc-content {
-      text-indent: 16px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: block;
+    .desc-title{
+      font-size: 18px;
+      font-weight: bold;
+        padding: 10px 0 20px 0; 
     }
+    // .desc-content {
+    //   text-indent: 16px;
+    //   white-space: nowrap;
+    //   overflow: hidden;
+    //   text-overflow: ellipsis;
+    //   display: block;
+    // }
   }
 }