完成登录页、产品详情、物业详情静态

digital-park-web/digital-park/src/router/hhr.js

 import login from './modules/login';
 // 产品相关
 import product from './modules/product';
-export default [{
+// 物业相关
+import property from './modules/property';
+export default [
+    {
         path: "*",
         redirect: "/index", // 重定向
     },
     ...index,
     ...login,
     ...product,
+    ...property,
 ];

digital-park-web/digital-park/src/router/modules/property.js

+/**
+ *
+ * 物业路由
+ *
+ */
+
+ export default [
+    // 物业详情
+    {
+        path: "/property-detail",
+        name: "PropertyDetail",
+        component: () =>
+            import ("../../views/property/detail/PropertyDetail.vue"),
+        meta: {
+            title: "物业详情",
+        },
+    },
+];

digital-park-web/digital-park/src/utils/common.js

         let routeData = router.resolve(routerPath);
         window.open(routeData.href, "_blank");
     },
-};
+};
+

digital-park-web/digital-park/src/views/login/Login.vue

 .login {
     // @include size(100%, 600px);
     min-height: 100vh;
-    background: url("~@/assets/images/login/loginPageBgc.png") no-repeat;
+    background: url("~@/assets/image/login/loginPageBgc.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
     .nav {

digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.vue

                         >
                             <img
                                 slot="prefix"
-                                src="~@/assets/images/login/verificationCode.png"
+                                src="~@/assets/image/login/verificationCode.png"
                                 class="img-code-icon"
                                 alt
                             />
                     >
                         <img
                             slot="prefix"
-                            src="~@/assets/images/login/numCodeIcon.png"
+                            src="~@/assets/image/login/numCodeIcon.png"
                             class="img-code-icon"
                             alt
                         />
                         >
                             <img
                                 slot="prefix"
-                                src="~@/assets/images/login/verificationCode.png"
+                                src="~@/assets/image/login/verificationCode.png"
                                 class="img-code-icon"
                                 alt
                             />
                         >
                             <img
                                 slot="prefix"
-                                src="~@/assets/images/login/numCodeIcon.png"
+                                src="~@/assets/image/login/numCodeIcon.png"
                                 class="img-code-icon-num"
                                 alt
                             />

digital-park-web/digital-park/src/views/product/detail/ProductDetail.scss

 .product-detial[data-1664250138954] {
     height: 250px;
-    background: url("~@/assets/images/product/productDetialHeaderBgc.png")
+    background: url("~@/assets/image/product/productDetialHeaderBgc.png")
         no-repeat;
     background-size: 100% 100%;
     .header-box {

digital-park-web/digital-park/src/views/product/detail/ProductDetail.vue

                     <span class="current-position">
                         <i class="el-icon-location"></i> 当前位置：
                     </span>
-                    <span class="current-position link">首页</span>
+                    <span class="current-position link" @click="toPath('/')">首页</span>
                     <span class="current-position link">
                         <i class="el-icon-arrow-right"></i>
                     </span>
                         {{ mainDetailText }}
                     </div>
                     <div class="main-btn">
-                        <img src="~@assets/images/product/consult-icon.png" class="consult-icon" alt="icon"> 立即咨询
+                        <img src="~@assets/image/product/consult-icon.png" class="consult-icon" alt="icon"> 立即咨询
                     </div>
                 </div>
             </div>
                 </div>
             </div>
         </div>
+        <Footer></Footer>
     </div>
 </template>
 
 <script>
 import Nav from "@components/Header.vue";
+import Footer from "@components/Footer.vue";
 import "./ProductDetail.scss";
 export default {
-    components: { Nav },
+    components: { Nav,Footer },
     data() {
         return {
             mainDetailText: `根据一个纳税年度内的所得、应纳税额、已缴(扣)税额、抵免(扣)税额、应补(退)税额等情况，如实填写并报送《个人所得税纳税申报表(适用于年所得12万元以上的纳税人申报)》、个人有效身份证件复印件，以及主管税务机关要求报送的其他有关资料。有效身份证件，包括纳税人的身份证、护照、回乡证、军人身份证件等。`,
         };
     },
+    methods:{
+        toPath(path){
+            this.$router.push(path)
+        }
+    }
 };
 </script>
 

digital-park-web/digital-park/src/views/property/detail/PropertyDetail.scss

+.property-detial[data-1664250138954] {
+    height: 250px;
+    background: url("~@/assets/image/product/productDetialHeaderBgc.png")
+        no-repeat;
+    background-size: 100% 100%;
+    .header-box {
+        width: 1200px;
+        margin: 0 auto;
+        height: 150px;
+        position: relative;
+        .breadcrumb-nav {
+            float: left;
+            margin-top: 32px;
+            .current-position {
+                position: relative;
+                z-index: 2;
+                color: #fff;
+                font-size: 16px;
+                &.link {
+                    margin-right: 3px;
+                    cursor: pointer;
+                }
+                &.active {
+                    font-weight: bold;
+                }
+            }
+        }
+        .content {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            color: #fff;
+
+            .title {
+                font-size: 36px;
+                font-weight: bold;
+                height: 50px;
+                line-height: 50px;
+                margin-top: 36px;
+            }
+            .sub-title {
+                margin-top: 5px;
+                font-size: 14px;
+            }
+        }
+    }
+    .detial-container {
+        width: 1200px;
+        margin: 0 auto;
+        margin-top: 30px;
+        padding-bottom: 50px;
+        border-top: 2px solid #2c94f0;
+        .ditial-banner {
+            height: 387px;
+            background: linear-gradient(to bottom, #cde8fb, #fff);
+            box-sizing: border-box;
+            padding: 27px 28px 0 30px;
+            .main-img {
+                float: left;
+                width: 530px;
+                height: 360px;
+                margin-right: 32px;
+                background: green;
+            }
+            .main-item {
+                float: left;
+                height: 360px;
+                width: calc(100% - 562px);
+                .main-title {
+                    height: 33px;
+                    line-height: 33px;
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #334a5f;
+                    @include text-ellipsis();
+                }
+            }
+            .main-price {
+                margin-top: 23px;
+                line-height: 42px;
+                font-size: 30px;
+                color: #334a5f;
+                font-weight: bold;
+                .price-value {
+                    color: #d9121a;
+                }
+            }
+            .mian-detail {
+                font-size: 16px;
+                height: 120px;
+                margin-top: 25px;
+                box-sizing: border-box;
+                line-height: 30px;
+                color: #637485;
+                @include text-ellipsis-multiple(4);
+                .mian-detail-span {
+                    font-weight: bold;
+                    color: #334a5f;
+                }
+            }
+            .listing-address {
+                margin-top: 10px;
+                height: 30px;
+                line-height: 30px;
+            }
+            .main-btn {
+                margin-top: 20px;
+                height: 56px;
+                line-height: 56px;
+                width: 190px;
+                background-image: linear-gradient(
+                    135deg,
+                    #42a6fe 0%,
+                    #0070d2 100%
+                );
+                border-radius: 28px;
+                color: #fff;
+                font-size: 24px;
+                text-align: center;
+                .consult-icon {
+                    position: relative;
+                    top: 6px;
+                    left: -3px;
+                }
+                cursor: pointer;
+            }
+        }
+        .block-title {
+            margin: 30px 0 20px 0;
+            height: 60px;
+            line-height: 60px;
+            background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+            @include font(24px, #fff);
+            padding-left: 30px;
+        }
+        .block-table {
+            width: 100%;
+            th {
+                background: #f0f9fe;
+                border-bottom: 0;
+                height: 80px;
+            }
+            td {
+                border-color: #bcd8e9;
+            }
+            &.serve {
+                td {
+                    height: 68px;
+                }
+            }
+            &::before {
+                background-color: #bcd8e9;
+            }
+            .img-icon {
+                display: inline-block;
+                width: 136px;
+                height: 92px;
+                img,
+                video {
+                    width: 100%;
+                    height: 100%;
+                    cursor: pointer;
+                }
+            }
+        }
+        .detail-container {
+            width: 1140px;
+            margin: 0 auto;
+            margin-top: 30px;
+            .housing-advantage {
+                height: 30px;
+                margin-bottom: 20px;
+                &.facilities {
+                    margin-bottom: 30px
+                }
+                .title {
+                    @include font(16px, #637485);
+                    margin-right: 23px;
+                }
+                .item-span {
+                    display: inline-block;
+                    height: 22px;
+                    line-height: 22px;
+                    @include font(14px, #fff);
+                    padding: 0 10px;
+                    margin-right: 15px;
+                }
+                .item-facilities {
+                    height: 30px;
+                    line-height: 30px;
+                    @include font(16px, #334a5f);
+                    display: inline-block;
+                    margin-right: 25px;
+                    img {
+                        // height: 100%;
+                        // display: none;
+                        position: relative;
+                        top: 6px;
+                    }
+                }
+                
+            }
+            .housing-detail {
+                .dt {
+                    height: 300px;
+                    background: green;
+                    color: #fff;
+                }
+            }
+        }
+    }
+}

digital-park-web/digital-park/src/views/property/detail/PropertyDetail.vue

+<template>
+    <div class="property-detial" data-1664250138954>
+        <div class="detial-header">
+            <Nav></Nav>
+            <div class="header-box">
+                <div class="breadcrumb-nav">
+                    <span class="current-position">
+                        <i class="el-icon-location"></i> 当前位置：
+                    </span>
+                    <span class="current-position link" @click="toPath('/')">首页</span>
+                    <span class="current-position link">
+                        <i class="el-icon-arrow-right"></i>
+                    </span>
+                    <span class="current-position link active">招商服务</span>
+                </div>
+                <div class="content">
+                    <div class="title">招商服务</div>
+                    <div class="sub-title">Investment promotion service</div>
+                </div>
+            </div>
+        </div>
+        <div class="detial-container">
+            <div class="ditial-banner">
+                <div class="main-img">123</div>
+                <div class="main-item">
+                    <div
+                        class="main-title"
+                        :title="'写字楼出租写字楼出租写字楼出租写字楼出租写字楼出租'"
+                    >写字楼出租写字楼出租写字楼出租写字楼出租写字楼出租</div>
+                    <div class="main-price">
+                        <span class="price-label">价格：</span>
+                        <span class="price-value">¥80.00元</span>
+                    </div>
+                    <div class="mian-detail" :title="mainDetailText">
+                        <span class="mian-detail-span">详情：</span>
+                        {{ mainDetailText }}
+                    </div>
+                    <div class="mian-detail listing-address" :title="listingAddress">
+                        <span class="mian-detail-span">房源地址：</span>
+                        {{ listingAddress }}
+                    </div>
+                    <div class="main-btn">
+                        <img
+                            src="~@assets/image/product/consult-icon.png"
+                            class="consult-icon"
+                            alt="icon"
+                        /> 立即咨询
+                    </div>
+                </div>
+            </div>
+            <div class="block-title">可选房源</div>
+            <el-table class="block-table" :data="listingList">
+                <el-table-column
+                    :label="item.label"
+                    :align="'center'"
+                    v-for="(item,inx) of listingColum"
+                    :key="inx"
+                >
+                    <template slot-scope="scope">
+                        <div v-if="item.prop == 'img'">
+                            <span class="img-icon">
+                                <el-image
+                                    v-if="checkFile(scope.row.img, 'image')"
+                                    :src="scope.row.img"
+                                    :preview-src-list="[scope.row.img]"
+                                ></el-image>
+                                <video
+                                    v-if="checkFile(scope.row.img, 'video')"
+                                    :src="scope.row.img"
+                                    @click="playVideo(scope.row.img)"
+                                ></video>
+                            </span>
+                        </div>
+                        <div v-else>{{ scope.row[item.prop] }}</div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="block-title">服务详情</div>
+            <el-table class="block-table serve" :data="serverDetailList">
+                <el-table-column
+                    :label="item.label"
+                    :align="'center'"
+                    v-for="(item,inx) of serverDetailColum"
+                    :key="inx"
+                >
+                    <template slot-scope="scope">
+                        <div v-if="item.prop == 'img'">
+                            <span class="img-icon"></span>
+                        </div>
+                        <div v-else>{{ scope.row[item.prop] }}</div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="detail-container">
+                <div class="housing-advantage">
+                    <span class="title">房源优势</span>
+                    <span
+                        class="item-span"
+                        v-for="(item,inx) of housingAdvantage"
+                        :key="inx"
+                        :style="item.style"
+                    >{{ item.label }}</span>
+                </div>
+                <div class="housing-advantage facilities">
+                    <span class="title">房源设施</span>
+                    <span
+                        class="item-facilities"
+                        v-for="(item,inx) of listingFacilities"
+                        :key="inx"
+                    >
+                        <img
+                            :src="require('@assets/image/propety/icon' + item.type + '.png')"
+                            alt="icon"
+                            :class="['facilities-' + item.type]"
+                        />
+                        {{ item.label }}
+                    </span>
+                </div>
+                <div class="housing-detail">
+                    <div class="dt">大图</div>
+                </div>
+            </div>
+        </div>
+        <Footer></Footer>
+        <!-- video预览 -->
+        <el-dialog :visible.sync="videoPreview.isShow">
+            <video
+                width="100%"
+                :src="videoPreview.src"
+                controls="controls"
+                webkit-playsinline="true"
+                playsinline="true"
+            ></video>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Nav from "@components/Header.vue";
+import Footer from "@components/Footer.vue";
+import "./PropertyDetail.scss";
+import ret from "bluebird/js/release/util";
+export default {
+    components: { Nav, Footer },
+    data() {
+        return {
+            // 主体详情
+            mainDetailText: `根据一个纳税年度内的所得、应纳税额、已缴(扣)税额、抵免(扣)税额、应补(退)税额等情况，如实填写并报送《个人所得税纳税申报表(适用于年所得12万元以上的纳税人申报)》、个人有效身份证件复印件，以及主管税务机关要求报送的其他有关资料。有效身份证件，包括纳税人的身份证、护照、回乡证、军人身份证件等。`,
+            // 房源地址
+            listingAddress: "上海市徐汇区吴中路金辉大厦8楼",
+            // 可选房源
+            listingColum: [
+                {
+                    prop: "img",
+                    label: "照片",
+                },
+                {
+                    prop: "v1",
+                    label: "租售类型",
+                },
+                {
+                    prop: "v2",
+                    label: "房源面积",
+                },
+                {
+                    prop: "v3",
+                    label: "最大容纳人数",
+                },
+                {
+                    prop: "v4",
+                    label: "装修状况",
+                },
+                {
+                    prop: "v5",
+                    label: "可注册",
+                },
+                {
+                    prop: "v6",
+                    label: "单价",
+                },
+            ],
+            listingList: [
+                {
+                    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+                    v1: "可租可售",
+                    v2: "5000m²",
+                    v3: "1000",
+                    v4: "毛坯",
+                    v5: "否",
+                    v6: "80.30",
+                },
+                {
+                    img: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+                    v1: "可租可售",
+                    v2: "5000m²",
+                    v3: "1000",
+                    v4: "毛坯",
+                    v5: "否",
+                    v6: "80.30",
+                },
+            ],
+            // 服务详情
+            serverDetailColum: [
+                {
+                    prop: "v1",
+                    label: "房源类型",
+                },
+                {
+                    prop: "v2",
+                    label: "最短起租",
+                },
+                {
+                    prop: "v3",
+                    label: "支付方式",
+                },
+                {
+                    prop: "v4",
+                    label: "停车费",
+                },
+                {
+                    prop: "v5",
+                    label: "物业费",
+                },
+                {
+                    prop: "v6",
+                    label: "可选房源",
+                },
+            ],
+            serverDetailList: [
+                {
+                    v1: "暂无数据",
+                    v2: "1年起租",
+                    v3: "暂无数据",
+                    v4: "--",
+                    v5: "20元/㎡/月",
+                    v6: "2",
+                },
+                {
+                    v1: "暂无数据",
+                    v2: "1年起租",
+                    v3: "暂无数据",
+                    v4: "--",
+                    v5: "20元/㎡/月",
+                    v6: "2",
+                },
+            ],
+            // 房源优势
+            housingAdvantage: [
+                {
+                    label: "精装修",
+                    style: {
+                        "background-image":
+                            "linear-gradient(135deg, #01d8ba 0%, #0086e7 100%)",
+                    },
+                },
+                {
+                    label: "面积大",
+                    style: {
+                        "background-image":
+                            "linear-gradient(135deg, #afd801 0%, #00b4e7 100%)",
+                    },
+                },
+                {
+                    label: "享受税收优惠",
+                    style: {
+                        "background-image":
+                            "linear-gradient(135deg, #8d6dff 0%, #5f24eb 100%)",
+                    },
+                },
+            ],
+            // 房源设施
+            listingFacilities: [
+                {
+                    label: "精装修",
+                    type: 1,
+                },
+                {
+                    label: "有线网络",
+                    type: 2,
+                },
+                {
+                    label: "Wi-Fi网络",
+                    type: 3,
+                },
+                {
+                    label: "饮水",
+                    type: 4,
+                },
+                {
+                    label: "空调",
+                    type: 5,
+                },
+                {
+                    label: "24小时办公",
+                    type: 6,
+                },
+                {
+                    label: "打印/复印",
+                    type: 7,
+                },
+            ],
+            // 视频预览
+            videoPreview: {
+                isShow: false,
+                src: "",
+            },
+        };
+    },
+    methods: {
+        toPath(path) {
+            this.$router.push(path);
+        },
+        // 播放video
+        playVideo(src) {
+            this.videoPreview.isShow = true;
+            this.videoPreview.src = src;
+        },
+        // 判断是图片还是视频
+        checkFile(fileValue, type) {
+            let index = fileValue.indexOf(".");
+            let fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
+            if (type == "video") {
+                if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) {
+                    //根据后缀，判断是否符合视频格式
+                    return false;
+                }
+            }
+            if (type == "image") {
+                if (
+                    !/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
+                        fileValueSuffix
+                    )
+                ) {
+                    //根据后缀，判断是否符合图片格式
+                    return false;
+                }
+            }
+            return true;
+        },
+    },
+};
+</script>
+