博物馆详情页

src/assets/fonts/font.css

@@ -12,3 +12,8 @@
     font-family: 'SourceHanSerifCN-Bold';
     src: url('./SourceHanSerifCN-Bold-2.otf');
 }
+
+@font-face {
+    font-family: 'PangMenZhengDaoCuShuTi';
+    src: url('./PangMenZhengDaoCuShuTi-2.ttf');
+}

src/views/museum/Detail-old.vue

+<!-- -->
+<template>
+  <div class="museum-detail">
+    <div class="wrapper">
+      <!-- <div class="back" @click="handleBack">
+        <svg-icon icon-class="mz-fh"></svg-icon>
+        <span>返回上页 </span>
+      </div> -->
+      <el-row class="detail-container" :gutter="10">
+        <el-col class="cr-images" :span="24">
+          <el-image
+            style="width: 100%; height: 400px"
+            :src="
+              $getFullUrl(
+                museumDetail.faceImagePressUrl || museumDetail.faceImageUrl
+              )
+            "
+            fit="contain"
+          ></el-image>
+          <div class="enlarge" @click="handelPreviewImages">
+            <img src="@/assets/imgs/enlarge-s.png" alt="" />
+          </div>
+        </el-col>
+        <el-col class="relic-info" :span="24">
+          <div class="info-title">
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              "
+            >
+              <h2>
+                {{ museumDetail.name }}
+              </h2>
+
+              <!-- <span>
+                <svg-icon
+                  icon-class="view"
+                  style="color: #61666d; margin-right: 5px"
+                ></svg-icon>
+                <span style="color: #61666d">{{ CRDetail.browseCount }}</span>
+              </span> -->
+            </div>
+
+            <!-- <AudioPlayer
+              :url="CRDetail.audiosVo[0].url"
+              ref="AudioPlayer"
+              v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
+            /> -->
+          </div>
+          <div class="intro" v-html="museumDetail.intro"></div>
+          <!-- <div class="info-body">
+            <div class="basic-info">
+              <div class="body-item">
+                <span class="label">经度</span>
+                <span class="value">{{ museumDetail.longitude }}</span>
+              </div>
+              <div class="body-item">
+                <span class="label">纬度</span>
+                <span class="value">
+                  {{ museumDetail.latitude }}
+                </span>
+              </div>
+            </div>>
+          </div> -->
+        </el-col>
+      </el-row>
+
+      <!-- <div class="margin-bottom-32">
+        <CustomTitle text="博物馆简介" />
+        <div class="intro text-indent">
+          {{ museumDetail.intro }}
+        </div>
+      </div> -->
+    </div>
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
+  </div>
+</template>
+
+<script>
+import SearchBar from "@/components/SearchBar";
+// import AudioPlayer from "@/components/AudioPlayer";
+import CustomTitle from "@/components/CustomTitle";
+// import ReaderOperations from "@/components/ReaderOperations";
+// import QRCode from "qrcodejs2";
+import { getMSDetailById } from "@/api/org";
+export default {
+  components: {
+    SearchBar,
+    CustomTitle,
+    // AudioPlayer,
+    // ReaderOperations,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
+
+  data() {
+    return {
+      options: [
+        {
+          value: "name",
+          label: "文物名称",
+        },
+      ],
+      selectValue: "",
+      keyword: "",
+      museumDetail: {},
+      slideImageWidth: "",
+      imgViewerVisible: false,
+      relateRelics: [],
+    };
+  },
+  mounted() {
+    // this.creatQrCode();
+    this.loadDetail();
+  },
+  methods: {
+    async loadDetail() {
+      let id = this.$route.params.id;
+      if (id) {
+        let res = await getMSDetailById(id);
+        if (res.code == 0) {
+          this.museumDetail = res.data;
+        }
+      }
+    },
+
+    handleBack() {
+      this.$router.go(-1);
+      // this.$router.push({path:'/museum'})
+    },
+
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
+
+    handelPreviewImages() {
+      this.imgViewerVisible = true;
+      this.imgList = [this.$getFullUrl(this.museumDetail.faceImageUrl)];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mr-20 {
+  margin-right: 20px;
+}
+$label: #9f9c9a;
+
+.museum-detail {
+  padding: 40px 13%;
+}
+.wrapper {
+  width: 100%;
+
+  margin: 60px auto;
+  background-color: #fff;
+  padding: 40px;
+  box-shadow: 6px 7px 6px 3px rgb(0 0 0 / 4%);
+  .back {
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    color: $label;
+    cursor: pointer;
+    .svg-icon {
+      font-size: 28px;
+      margin-right: 10px;
+    }
+    span {
+      font-size: 16px;
+    }
+  }
+  .detail-container {
+    margin: 32px 0;
+    // display: flex;
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+    .cr-images {
+      // width: 700px;
+      // margin-right: 32px;
+      position: relative;
+      margin-bottom: 20px;
+      .el-image {
+        background-color: #f5f5f9;
+      }
+      .enlarge {
+        position: absolute;
+        bottom: 60px;
+        right: 40px;
+        display: flex;
+        z-index: 9;
+        background-color: #c1925b;
+        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;
+        }
+      }
+    }
+    .relic-info {
+      .info-title {
+        display: flex;
+        justify-content: center;
+        // align-items: center;
+        // flex-direction: column;
+        margin-bottom: 10px;
+      }
+      .info-body {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .basic-info {
+          .body-item {
+            display: flex;
+            .label {
+              display: block;
+              width: 80px;
+              margin-right: 26px;
+              margin-bottom: 10px;
+              font-weight: bold;
+              color: #9f9c9a;
+            }
+          }
+        }
+      }
+
+      .intro {
+        text-indent: 32px;
+      }
+    }
+
+    .title-container {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      .operation {
+        position: absolute;
+        right: 0;
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+    .content {
+      text-indent: 32px;
+    }
+  }
+  .relate-book {
+    .book-item {
+      margin-bottom: 10px;
+    }
+  }
+  .relate-cultual-relic {
+    .display-group {
+      margin-top: 24px;
+      display: flex;
+      flex-flow: row wrap;
+
+      .display-item {
+        width: 282px;
+        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;
+        img {
+          border-radius: 16px 16px 0 0;
+        }
+        .display-desc {
+          padding: 0 16px;
+          .desc-content {
+            text-indent: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+          }
+        }
+        .display-source {
+          margin-top: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 16px;
+        }
+      }
+    }
+  }
+
+  .relate-video {
+    .video-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .video-box {
+        display: flex;
+        justify-content: center;
+        border: 1px solid #000;
+        video {
+          width: 800px;
+        }
+      }
+      .info-box {
+        width: 800px;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+
+.text-indent {
+  text-indent: 28px;
+}
+
+.margin-bottom-32 {
+  margin-bottom: 32px;
+}
+</style>