eight.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. <template>
  2. <div class="eight">
  3. <div class="comTit">{{ tit }}</div>
  4. <div class="comMani" :class="{ swShow: !conShowLoad }">
  5. <div class="row" v-for="item in data" :key="item.id">
  6. <img :src="baseURL + imgSrc(item)" alt="" />
  7. <div class="rowRight">
  8. <div class="txt">
  9. <p :title="item.name"><span>建筑名称:</span>{{ item.name }}</p>
  10. <p :title="item.txt1"><span>产权归属:</span>{{ item.txt1 }}</p>
  11. <p :title="item.txt2"><span>占地面积:</span>{{ item.txt2 }}</p>
  12. </div>
  13. <div class="txt">
  14. <p :title="item.txt3"><span>建筑面积:</span>{{ item.txt3 }}</p>
  15. <p :title="item.txt4"><span>保护级别:</span>{{ item.txt4 }}</p>
  16. </div>
  17. </div>
  18. <!-- 详情按钮 -->
  19. <div class="detailBtn" @click="lookDetail(item)"></div>
  20. </div>
  21. </div>
  22. <!-- 点击详情出来的弹窗 -->
  23. <div class="detailBox" v-if="detailShow">
  24. <div class="detailMain">
  25. <div class="detailCon">
  26. <!-- 文字 -->
  27. <div class="detailTxt">
  28. <div class="detailTxtS">
  29. <p class="detailp" :title="detailData.name">
  30. <span class="detailSpan">建筑名称:</span>{{ detailData.name }}
  31. </p>
  32. <p class="detailp" :title="detailData.txt1">
  33. <span class="detailSpan">产权归属:</span>{{ detailData.txt1 }}
  34. </p>
  35. <p class="detailp" :title="detailData.txt2">
  36. <span class="detailSpan">占地面积:</span>{{ detailData.txt2 }}
  37. </p>
  38. </div>
  39. <div class="detailTxtS">
  40. <p class="detailp" :title="detailData.txt3">
  41. <span class="detailSpan">建筑面积:</span>{{ detailData.txt3 }}
  42. </p>
  43. <p class="detailp" :title="detailData.txt4">
  44. <span class="detailSpan">保护级别:</span>{{ detailData.txt4 }}
  45. </p>
  46. </div>
  47. <div class="detailPP">
  48. <span class="detailSpan">建筑概况:</span
  49. ><i v-html="detailData.txt5"></i>
  50. </div>
  51. </div>
  52. <!-- 图片 -->
  53. <div class="detailImg">
  54. <div class="swiper-container detailImgSon">
  55. <div class="swiper-wrapper detailImgSon">
  56. <div
  57. class="swiper-slide detailImgSon"
  58. v-for="item in detailData.imgList"
  59. @click="$emit('openLook', baseURL + item.filePath, 'img')"
  60. :key="item.id"
  61. >
  62. <img
  63. class="detailImgSonImg"
  64. :src="baseURL + item.filePath"
  65. alt=""
  66. />
  67. </div>
  68. </div>
  69. <!-- Add Pagination -->
  70. <!-- <div class="swiper-pagination"></div> -->
  71. </div>
  72. </div>
  73. <!-- 关闭按钮 -->
  74. <div class="detailClose" @click="detailShow = false"></div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="comBs" @click="$emit('pageNext')"></div>
  79. <!-- 数据加载中 -->
  80. <div class="conShowLoad" v-show="conShowLoad">
  81. <img src="../assets/img/loading.gif" alt="" />
  82. </div>
  83. </div>
  84. </template>
  85. <script>
  86. import Swiper from "./data/swiper.js";
  87. // import "./data/swiper.css";
  88. import axios from "@/utils/request";
  89. export default {
  90. name: "eight",
  91. props: {
  92. tit: {
  93. type: String,
  94. },
  95. data: {
  96. type: Array,
  97. default: () => [],
  98. },
  99. },
  100. components: {},
  101. data() {
  102. //这里存放数据
  103. return {
  104. conShowLoad: true,
  105. baseURL: "",
  106. detailShow: false,
  107. detailData: {},
  108. imgInd: 0,
  109. };
  110. },
  111. //监听属性 类似于data概念
  112. computed: {},
  113. //监控data中的数据变化
  114. watch: {
  115. detailShow(val) {
  116. if (val) {
  117. this.$nextTick(() => {
  118. new Swiper(".detailImg .swiper-container", {
  119. slidesPerView: 3,
  120. spaceBetween: 0,
  121. centeredSlides: true,
  122. initialSlide: this.imgInd,
  123. // pagination: {
  124. // el: '.swiper-pagination',
  125. // clickable: true,
  126. // },
  127. });
  128. });
  129. }
  130. },
  131. },
  132. //方法集合
  133. methods: {
  134. imgSrc(item) {
  135. return item.imgList.find((v) => v.id === item.imgActive).filePath;
  136. },
  137. lookDetail(item) {
  138. this.imgInd = 0;
  139. item.imgList.forEach((v, i) => {
  140. if (v.id === item.imgActive) this.imgInd = i;
  141. });
  142. this.detailData = item;
  143. this.detailShow = true;
  144. },
  145. },
  146. //生命周期 - 创建完成(可以访问当前this实例)
  147. created() {
  148. // 获取服务器前缀地址
  149. this.baseURL = axios.defaults.baseURL;
  150. },
  151. //生命周期 - 挂载完成(可以访问DOM元素)
  152. mounted() {
  153. this.$nextTick(() => {
  154. setTimeout(() => {
  155. this.conShowLoad = false;
  156. }, 1000);
  157. });
  158. },
  159. beforeCreate() {}, //生命周期 - 创建之前
  160. beforeMount() {}, //生命周期 - 挂载之前
  161. beforeUpdate() {}, //生命周期 - 更新之前
  162. updated() {}, //生命周期 - 更新之后
  163. beforeDestroy() {}, //生命周期 - 销毁之前
  164. destroyed() {}, //生命周期 - 销毁完成
  165. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  166. };
  167. </script>
  168. <style lang='less' scoped>
  169. @import "./data/swiper.css";
  170. .swiper-container {
  171. width: 100%;
  172. height: 100%;
  173. overflow: visible !important;
  174. }
  175. .swiper-slide img {
  176. cursor: pointer;
  177. width: 100%;
  178. height: 100%;
  179. object-fit: cover;
  180. }
  181. .swiper-slide {
  182. transition: all 0.3s;
  183. opacity: 0.5;
  184. }
  185. .swiper-slide-active {
  186. transform: scale(1.3);
  187. opacity: 1;
  188. z-index: 999;
  189. }
  190. .eight {
  191. position: relative;
  192. width: 100%;
  193. height: 100%;
  194. padding-top: 50px;
  195. .comMani::-webkit-scrollbar {
  196. /*滚动条整体样式*/
  197. width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  198. height: 1px;
  199. }
  200. .comMani::-webkit-scrollbar-thumb {
  201. /*滚动条里面小方块*/
  202. border-radius: 10px;
  203. -webkit-box-shadow: inset 0 0 5px transparent;
  204. background: #8a7351;
  205. }
  206. .comMani::-webkit-scrollbar-track {
  207. /*滚动条里面轨道*/
  208. -webkit-box-shadow: inset 0 0 5px transparent;
  209. border-radius: 10px;
  210. background: transparent;
  211. }
  212. .comMani {
  213. opacity: 0;
  214. overflow-y: auto;
  215. width: 100%;
  216. height: calc(100% - 155px);
  217. padding-right: 20px;
  218. .row {
  219. display: flex;
  220. align-items: center;
  221. position: relative;
  222. width: 100%;
  223. height: 180px;
  224. margin-bottom: 20px;
  225. padding-bottom: 20px;
  226. border-bottom: 1px solid #bfb094;
  227. & > img {
  228. min-width: 220px;
  229. width: 220px;
  230. height: 157px;
  231. object-fit: cover;
  232. margin-right: 40px;
  233. }
  234. .rowRight {
  235. flex: 1;
  236. .txt {
  237. color: #8a7351;
  238. display: flex;
  239. p {
  240. margin-right: 50px;
  241. cursor: default;
  242. width: 260px;
  243. overflow: hidden;
  244. text-overflow: ellipsis;
  245. white-space: nowrap;
  246. height: 60px;
  247. line-height: 60px;
  248. font-size: 24px;
  249. & > span {
  250. font-weight: 700;
  251. font-family: "思源宋体";
  252. font-size: 24px;
  253. }
  254. }
  255. }
  256. }
  257. .detailBtn {
  258. cursor: pointer;
  259. position: absolute;
  260. top: 0;
  261. right: 0;
  262. width: 46px;
  263. height: 44px;
  264. background: url("../assets/img/btnDe.png");
  265. background-size: 100% 100%;
  266. }
  267. }
  268. }
  269. .swShow {
  270. opacity: 1;
  271. }
  272. .detailBox {
  273. position: fixed;
  274. top: 0;
  275. left: 0;
  276. width: 100%;
  277. height: 100%;
  278. z-index: 999;
  279. padding-top: 100px;
  280. &::before {
  281. content: "";
  282. position: absolute;
  283. left: 0;
  284. top: 0;
  285. width: 100%;
  286. height: 100%;
  287. backdrop-filter: blur(20px);
  288. z-index: -2;
  289. }
  290. .detailMain {
  291. position: absolute;
  292. bottom: 0;
  293. left: 0;
  294. width: 100%;
  295. height: calc(100% - 100px);
  296. .detailCon {
  297. overflow: hidden;
  298. padding: 30px 60px;
  299. position: absolute;
  300. top: 50%;
  301. left: 50%;
  302. transform: translate(-50%, -50%);
  303. background-color: rgba(0, 0, 0, 0.8);
  304. width: 1300px;
  305. height: 700px;
  306. .detailClose {
  307. cursor: pointer;
  308. top: -7px;
  309. right: 104px;
  310. position: absolute;
  311. width: 66px;
  312. height: 105px;
  313. background: url("../assets/img/close.png");
  314. background-size: 100% 100%;
  315. }
  316. .detailTxt {
  317. color: #fff;
  318. font-size: 18px;
  319. .detailTxtS {
  320. display: flex;
  321. .detailp {
  322. margin-bottom: 12px;
  323. cursor: pointer;
  324. width: 300px;
  325. overflow: hidden;
  326. text-overflow: ellipsis;
  327. white-space: nowrap;
  328. margin-right: 50px;
  329. .detailSpan {
  330. font-family: "思源宋体";
  331. font-size: 20px;
  332. }
  333. }
  334. }
  335. .detailPP::-webkit-scrollbar {
  336. /*滚动条整体样式*/
  337. width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  338. height: 1px;
  339. }
  340. .detailPP::-webkit-scrollbar-thumb {
  341. /*滚动条里面小方块*/
  342. border-radius: 10px;
  343. -webkit-box-shadow: inset 0 0 5px transparent;
  344. background: #c7b080;
  345. }
  346. .detailPP::-webkit-scrollbar-track {
  347. /*滚动条里面轨道*/
  348. -webkit-box-shadow: inset 0 0 5px transparent;
  349. border-radius: 10px;
  350. background: transparent;
  351. }
  352. .detailPP {
  353. height: 200px;
  354. overflow-y: auto;
  355. i {
  356. font-style: normal;
  357. }
  358. .detailSpan {
  359. font-family: "思源宋体";
  360. font-size: 20px;
  361. }
  362. }
  363. }
  364. .detailImg {
  365. margin-top: 50px;
  366. height: 280px;
  367. }
  368. }
  369. }
  370. }
  371. .conShowLoad {
  372. z-index: 999;
  373. position: absolute;
  374. top: 0;
  375. left: 0;
  376. width: 100%;
  377. height: 100%;
  378. display: flex;
  379. justify-content: center;
  380. align-items: center;
  381. }
  382. }
  383. </style>