JiangMenCun/web/src/components/eight.vue

<template>
  <div class="eight">
    <div class="comTit">{{ tit }}</div>
    <div class="comMani" :class="{swShow:!conShowLoad}">
      <div class="row" v-for="item in data" :key="item.id">
        <img :src="baseURL + imgSrc(item)" alt="" />
        <div class="rowRight">
          <div class="txt">
            <p :title="item.name"><span>建筑名称：</span>{{ item.name }}</p>
            <p :title="item.txt1"><span>产权归属：</span>{{ item.txt1 }}</p>
            <p :title="item.txt2"><span>占地面积：</span>{{ item.txt2 }}</p>
          </div>
          <div class="txt">
            <p :title="item.txt3"><span>建筑面积：</span>{{ item.txt3 }}</p>
            <p :title="item.txt4"><span>保护级别：</span>{{ item.txt4 }}</p>
          </div>
        </div>

        <!-- 详情按钮 -->
        <div class="detailBtn" @click="lookDetail(item)"></div>
      </div>
    </div>
    <!-- 点击详情出来的弹窗 -->
    <div class="detailBox" v-if="detailShow">
      <div class="detailMain">
        <div class="detailCon">
          <!-- 文字 -->
          <div class="detailTxt">
            <div class="detailTxtS">
              <p class="detailp" :title="detailData.name">
                <span class="detailSpan">建筑名称：</span>{{ detailData.name }}
              </p>
              <p class="detailp" :title="detailData.txt1">
                <span class="detailSpan">产权归属：</span>{{ detailData.txt1 }}
              </p>
              <p class="detailp" :title="detailData.txt2">
                <span class="detailSpan">占地面积：</span>{{ detailData.txt2 }}
              </p>
            </div>
            <div class="detailTxtS">
              <p class="detailp" :title="detailData.txt3">
                <span class="detailSpan">建筑面积：</span>{{ detailData.txt3 }}
              </p>
              <p class="detailp" :title="detailData.txt4">
                <span class="detailSpan">保护级别：</span>{{ detailData.txt4 }}
              </p>
            </div>
            <div class="detailPP">
              <span class="detailSpan">建筑概况：</span>{{ detailData.txt5 }}
            </div>
          </div>
          <!-- 图片 -->
          <div class="detailImg">
            <div class="swiper-container detailImgSon">
              <div class="swiper-wrapper detailImgSon">
                <div
                  class="swiper-slide detailImgSon"
                  v-for="item in detailData.imgList"
                  :key="item.id"
                >
                  <img
                    class="detailImgSonImg"
                    :src="baseURL + item.filePath"
                    alt=""
                  />
                </div>
              </div>
              <!-- Add Pagination -->
              <!-- <div class="swiper-pagination"></div> -->
            </div>
          </div>
          <!-- 关闭按钮 -->
          <div class="detailClose" @click="detailShow = false"></div>
        </div>
      </div>
    </div>
    <div class="comBs" @click="$emit('pageNext')"></div>
    <!-- 数据加载中 -->
    <div class="conShowLoad" v-show="conShowLoad">
      <img src="../assets/img/loading.gif" alt="" />
    </div>
  </div>
</template>

<script>
import Swiper from "./data/swiper.js";
// import "./data/swiper.css";
import axios from "@/utils/request";
export default {
  name: "eight",
  props: {
    tit: {
      type: String,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  components: {},
  data() {
    //这里存放数据
    return {
      conShowLoad: true,
      baseURL: "",
      detailShow: false,
      detailData: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    detailShow(val) {
      if (val) {
        this.$nextTick(() => {
          new Swiper(".detailImg .swiper-container", {
            slidesPerView: 3,
            spaceBetween: 0,
            centeredSlides: true,
            initialSlide: 1,
            // pagination: {
            //   el: '.swiper-pagination',
            //   clickable: true,
            // },
          });
        });
      }
    },
  },
  //方法集合
  methods: {
    imgSrc(item) {
      return item.imgList.find((v) => v.id === item.imgActive).filePath;
    },
    lookDetail(item) {
      this.detailData = item;
      this.detailShow = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.conShowLoad = false;
      }, 1000);
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import "./data/swiper.css";
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: visible !important;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide {
  transition: all .3s;
  opacity: 0.5;
}
.swiper-slide-active {
  transform: scale(1.3);
  opacity: 1;
  z-index: 999;
}
.eight {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  .comMani::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .comMani::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px transparent;
    background: #8a7351;
  }
  .comMani::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px transparent;
    border-radius: 10px;
    background: transparent;
  }
  .comMani {
    opacity: 0;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 155px);
    padding-right: 20px;
    .row {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      height: 180px;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #bfb094;
      & > img {
        width: 220px;
        height: 157px;
        object-fit: cover;
        margin-right: 40px;
      }
      .rowRight {
        flex: 1;
        .txt {
          color: #8a7351;
          display: flex;
          p {
            margin-right: 50px;
            cursor: pointer;
            width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 60px;
            line-height: 60px;
            font-size: 24px;
            & > span {
              font-weight: 700;
              font-family: "思源宋体";
              font-size: 24px;
            }
          }
        }
      }
      .detailBtn {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 44px;
        background: url("../assets/img/btnDe.png");
        background-size: 100% 100%;
      }
    }
  }
  .swShow{
    opacity: 1;
  }
  .detailBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    padding-top: 100px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(20px);
      z-index: -2;
    }
    .detailMain {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(100% - 100px);
      .detailCon {
        overflow: hidden;
        padding: 30px 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.8);
        width: 1300px;
        height: 700px;
        .detailClose {
          cursor: pointer;
          top: -7px;
          right: 104px;
          position: absolute;
          width: 66px;
          height: 105px;
          background: url("../assets/img/close.png");
          background-size: 100% 100%;
        }
        .detailTxt {
          color: #fff;
          font-size: 18px;
          .detailTxtS {
            display: flex;
            .detailp {
              margin-bottom: 12px;
              cursor: pointer;
              width: 300px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: 50px;
              .detailSpan {
                font-family: "思源宋体";
                font-size: 20px;
              }
            }
          }
          .detailPP::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
          }
          .detailPP::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px transparent;
            background: #c7b080;
          }
          .detailPP::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px transparent;
            border-radius: 10px;
            background: transparent;
          }
          .detailPP {
            height: 200px;
            overflow-y: auto;
            .detailSpan {
              font-family: "思源宋体";
              font-size: 20px;
            }
          }
        }
        .detailImg {
          margin-top: 50px;
          height: 280px;
        }
      }
    }
  }
  .conShowLoad {
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>