123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386 |
- <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
- ><i v-html="detailData.txt5"></i>
- </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"
- @click="$emit('openLook', baseURL + item.filePath, 'img')"
- :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: {},
- imgInd: 0,
- };
- },
- //监听属性 类似于data概念
- computed: {},
- //监控data中的数据变化
- watch: {
- detailShow(val) {
- if (val) {
- this.$nextTick(() => {
- new Swiper(".detailImg .swiper-container", {
- slidesPerView: 3,
- spaceBetween: 0,
- centeredSlides: true,
- initialSlide: this.imgInd,
- // pagination: {
- // el: '.swiper-pagination',
- // clickable: true,
- // },
- });
- });
- }
- },
- },
- //方法集合
- methods: {
- imgSrc(item) {
- return item.imgList.find((v) => v.id === item.imgActive).filePath;
- },
- lookDetail(item) {
- this.imgInd = 0;
- item.imgList.forEach((v, i) => {
- if (v.id === item.imgActive) this.imgInd = i;
- });
- 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 {
- cursor: pointer;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .swiper-slide {
- transition: all 0.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 {
- min-width: 220px;
- width: 220px;
- height: 157px;
- object-fit: cover;
- margin-right: 40px;
- }
- .rowRight {
- flex: 1;
- .txt {
- color: #8a7351;
- display: flex;
- p {
- margin-right: 50px;
- cursor: default;
- 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;
- i {
- font-style: normal;
- }
- .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>
|