|
|
@@ -0,0 +1,365 @@
|
|
|
+<template>
|
|
|
+ <div class="home-detail">
|
|
|
+ <div class="container" v-loading="loading">
|
|
|
+ <div class="container-box" v-if="detail.id">
|
|
|
+ <div class="title">{{detail.name}}</div>
|
|
|
+ <div class="home-detail-content">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="skeleton-box" v-else>
|
|
|
+ <el-empty description="暂未找到服务"></el-empty>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getServeById
|
|
|
+ } from '@/api/serve'
|
|
|
+ import Crypto from '@/uitls/crypto'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ detailId: '',
|
|
|
+ detail: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.loading = true;
|
|
|
+ this.detailId = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.id), 'bosshand');
|
|
|
+ if (!this.detailId) return this.loading = false;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ getDetail() {
|
|
|
+ getServeById(this.detailId).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.detail = res.data;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .home-detail {
|
|
|
+ padding-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bolder;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bolder;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-container {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ #map {
|
|
|
+ width: 670px;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-device {
|
|
|
+ width: 470px;
|
|
|
+ height: 400px;
|
|
|
+ margin-left: 60px;
|
|
|
+
|
|
|
+ .chat {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: $--color-primary;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-tell {
|
|
|
+ border-bottom: 1px solid #e7ebee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .people-avatar {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-text {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-name {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-organization {
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-item {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .device-label {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ font-weight: 200;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ min-height: calc(100vh - 107px);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .skeleton-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-detail-content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-detail-swiper {
|
|
|
+ width: 670px;
|
|
|
+ height: 480px;
|
|
|
+
|
|
|
+ .swiper-container,
|
|
|
+ .swiper-wrapper,
|
|
|
+ .swiper-slide {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide {
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .open-video-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 40px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: -20px;
|
|
|
+ margin-top: -20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .huifont-bofang {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-button-next:after,
|
|
|
+ .swiper-button-prev:after {
|
|
|
+ color: #eee;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-button-prev,
|
|
|
+ .swiper-container-rtl .swiper-button-next {
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ height: 70px;
|
|
|
+ margin-top: -35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-button-next,
|
|
|
+ .swiper-container-rtl .swiper-button-prev {
|
|
|
+ right: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ height: 70px;
|
|
|
+ margin-top: -35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-detail-information {
|
|
|
+ width: 470px;
|
|
|
+ height: 480px;
|
|
|
+ margin-left: 60px;
|
|
|
+
|
|
|
+ .house-name {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ background: #eee;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 5px 5px 5px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #7b7979;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .house-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #e7ebee;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+
|
|
|
+ .hui-button {
|
|
|
+ color: #fff;
|
|
|
+ background: $--color-primary;
|
|
|
+ width: 100px;
|
|
|
+ height: 34px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .average {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 900;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc-text {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .information-box {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ padding: 7px 20px 7px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-title {
|
|
|
+ color: #979b9e;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-div {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ background: #212631;
|
|
|
+ min-width: 1200px;
|
|
|
+
|
|
|
+ .footer-box {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-information {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #98999d;
|
|
|
+ line-height: 17px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ justify-content: center
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-information a {
|
|
|
+ color: #98999d;
|
|
|
+ margin-right: 30px
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-information img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 30px;
|
|
|
+ margin-right: 10px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
