diff --git a/src/assets/css/exterior/house.less b/src/assets/css/exterior/house.less
index 83633ada1..dc521b967 100644
--- a/src/assets/css/exterior/house.less
+++ b/src/assets/css/exterior/house.less
@@ -1,10 +1,13 @@
 .p-exterior {
     .pt(40px);
+    .flex();
+    gap: 30px;
     .comLayout {
         .r(20px);
         box-shadow: 0px 0px 10px 0px rgba(243, 202, 162, 0.9);
     }
     .comTrTime {
+        .pointer();
         transition: 0.2s all;
     }
     .m-left {
@@ -67,7 +70,6 @@
                         width: 18px;
                         stroke: #da8029;
                         .comTrTime();
-                        .pointer();
                         &:last-child {
                             .ml(10px);
                         }
@@ -122,87 +124,211 @@
                 .flex();
                 justify-content: space-between;
                 .u-item {
-                    .color(#da8029);
                     .x();
                     .fz(14px,18px);
                     .bold();
+                    .pointer();
+                    .color(#808080);
                     font-family: Outfit;
+                    &.act {
+                        .color(#da8029);
+                    }
                 }
             }
             .m-goods {
                 .mt(10px);
-                .m-item {
+                .flex();
+                flex-direction: column;
+                gap: 10px;
+            }
+        }
+    }
+    .m-center {
+        flex: 1;
+        .m-layout {
+            .r(100px);
+            background-color: #ffffff;
+            box-shadow: 0px 0px 14px 0px rgba(243, 202, 162, 0.9);
+        }
+        .m-search {
+            .flex();
+            .m-layout();
+            .u-search__input {
+                flex: 1;
+                border: none;
+                background-color: transparent;
+                .fz(14px);
+                .color(#000000);
+                padding: 0 20px;
+            }
+            .m-search__icon {
+                padding: 5px 0;
+                background-color: #da8029;
+                .w(85px);
+                .r(100px);
+                .flex();
+                justify-content: center;
+                .u-icon {
+                    .size(30px);
+                }
+            }
+        }
+        .m-index {
+            .mt(30px);
+            .m-layout();
+            .r(20px);
+            padding: 20px;
+            .pt(0);
+            .m-box {
+                .m-title {
+                    .color(#000000);
+                    .fz(20px,30px);
+                    .bold();
+                    .flex();
+                    gap: 10px;
+                    padding: 20px 0;
+                    .u-icon {
+                        .size(30px);
+                    }
+                }
+                .m-list {
+                    .flex();
+                    gap: 20px;
+                    flex-wrap: wrap;
+                }
+            }
+        }
+    }
+    .m-right {
+        .w(280px);
+        .flex();
+        flex-direction: column;
+        gap: 30px;
+        .m-top {
+            .flex();
+            justify-content: space-between;
+            .m-fold {
+                .size(60px);
+                .flex();
+                .flex(y);
+                justify-content: center;
+                .r(100px);
+                box-shadow: 0px 0px 10px 0px rgba(42, 167, 175, 0.4);
+                background-color: #2aa7af;
+                .comTrTime();
+                .u-icon {
+                    .size(30px);
+                    fill: #ffffff;
+                }
+                &:hover {
+                    box-shadow: 0px 0px 10px 0px #2aa7af;
+                    .u-icon {
+                        fill: #ffdb5a;
+                    }
+                }
+            }
+            .m-wbl {
+                .w(200px);
+                .flex();
+                .flex(y);
+                justify-content: center;
+                .r(100px);
+                background-color: #ffdb5a;
+                box-shadow: 0px 0px 10px 0px rgba(255, 219, 90, 0.4);
+                .comTrTime();
+                &:hover {
+                    box-shadow: 0px 0px 10px 0px #ffdb5a;
+                }
+                .u-wbl {
+                    .w(161px);
+                }
+            }
+        }
+        .m-box {
+            .r(20px);
+            background-color: #2aa7af;
+            box-shadow: 0px 0px 10px 0px rgba(42, 167, 175, 0.25);
+            padding: 14px;
+            .m-title {
+                .flex();
+                gap: 4px;
+                font-family: Outfit;
+                .color(#ffffff);
+                .fz(14px,18px);
+                .bold();
+                .u-icon {
+                    .size(18px);
+                }
+            }
+            .m-list {
+                .mt(10px);
+                .flex();
+                flex-direction: column;
+                gap: 10px;
+                .m-rank {
                     .r(10px);
-                    padding: 12px 10px;
-                    background-color: #f9e4cf;
-                    .m-item__top {
-                        .pr();
+                    background-color: #fff;
+                    padding: 10px;
+                    .flex();
+                    .flex(y);
+                    justify-content: space-between;
+                    .comTrTime();
+                    .m-img {
                         .flex();
                         .flex(y);
-                        .u-logo {
-                            .size(36px);
-                            .r(4px);
-                            background-color: white;
+                        gap: 10px;
+                        .color(#000000);
+                        .fz(14px,18px);
+                        overflow: hidden; /* 确保超出容器的内容被裁剪 */
+                        white-space: nowrap; /* 确保文本在一行内显示 */
+                        text-overflow: ellipsis; /* 超出部分显示省略号 */
+                        .u-img {
+                            .size(14px);
+                            background-color: #000000;
                         }
-                        .m-info {
-                            .ml(10px);
-                            .u-title {
-                                .color(#da8029);
-                                .fz(14px,18px);
-                                .bold();
-                            }
-                            .u-type {
-                                .mt(5px);
-                                .color(#000000);
-                                .fz(10px,13px);
-                            }
+                    }
+                    .m-info {
+                        .flex();
+                        gap: 2px;
+                        .fz(12px,15px);
+                        .u-price {
+                            color: #000000;
                         }
-                        .u-number {
-                            .pa();
-                            .rb(0);
-                            .color(#000000);
+                        .u-line {
+                            .size(15px);
+                        }
+                        .u-range {
                             font-family: Outfit;
-                            .fz(14px);
                             .bold();
-                        }
-                    }
-                    .m-item__bottom {
-                        .mt(10px);
-                        .m-detail {
-                            .flex();
-                            justify-content: space-between;
-                            .fz(12px,16px);
-                            gap: 12px;
-                            .m-detail__box {
-                                .flex();
-                                .r(4px);
-                                flex: 1;
-                                overflow: hidden;
-                                .u-title {
-                                    background-color: #da8029;
-                                    color: #ffffff;
-                                    padding: 4px;
-                                }
-                                .u-value {
-                                    background-color: white;
-                                    flex: 1;
-                                    padding: 4px;
-                                    .pr(0);
-                                    color: #000;
-                                    font-family: Outfit;
-                                }
+                            &.u-rise {
+                                .color(#FF0000);
                             }
-                            &:last-child {
-                                .mt(10px);
-                                .u-value {
-                                    .flex();
-                                    justify-content: space-between;
-                                }
+                            &.u-fall {
+                                .color(#07c046);
                             }
                         }
                     }
-                    &:not(:first-child) {
-                        .mt(10px);
+                    &:hover {
+                        box-shadow: 0px 0px 6px 0px #fff;
+                    }
+                }
+                .m-news {
+                    .r(10px);
+                    overflow: hidden;
+                    background-color: #ffffff;
+                    .comTrTime();
+                    .u-img {
+                        background-color: #dfdfdf;
+                        .h(112px);
+                    }
+                    .u-title {
+                        padding: 10px;
+                        .color(#000000);
+                        .fz(14px,18px);
+                        .bold();
+                    }
+                    &:hover {
+                        box-shadow: 0px 0px 10px 0px #fff;
                     }
                 }
             }
diff --git a/src/assets/css/exterior/item.less b/src/assets/css/exterior/item.less
new file mode 100644
index 000000000..847ef2438
--- /dev/null
+++ b/src/assets/css/exterior/item.less
@@ -0,0 +1,207 @@
+.m-house-item {
+    .r(10px);
+    .pointer();
+    .pr();
+    background-color: #f9e4cf;
+    &.warehouse {
+        padding: 12px 10px;
+        .m-item__top {
+            .pr();
+            .flex();
+            .flex(y);
+            .u-logo {
+                .size(36px);
+                .r(4px);
+                background-color: white;
+            }
+            .m-info {
+                .ml(10px);
+                .u-title {
+                    .color(#da8029);
+                    .fz(14px,18px);
+                    .bold();
+                }
+                .u-type {
+                    .mt(5px);
+                    .color(#000000);
+                    .fz(10px,13px);
+                }
+            }
+            .u-number {
+                .pa();
+                .rb(0);
+                .color(#000000);
+                font-family: Outfit;
+                .fz(14px);
+                .bold();
+            }
+        }
+        .m-item__bottom {
+            .mt(10px);
+            .m-detail {
+                .flex();
+                justify-content: space-between;
+                .fz(12px,16px);
+                gap: 12px;
+                .m-detail__box {
+                    .flex();
+                    .r(4px);
+                    flex: 1;
+                    overflow: hidden;
+                    .u-title {
+                        background-color: #da8029;
+                        color: #ffffff;
+                        padding: 4px;
+                    }
+                    .u-value {
+                        background-color: white;
+                        flex: 1;
+                        padding: 4px;
+                        .pr(0);
+                        color: #000;
+                        font-family: Outfit;
+                    }
+                }
+                &:last-child {
+                    .mt(10px);
+                    .u-value {
+                        .flex();
+                        justify-content: space-between;
+                    }
+                }
+            }
+        }
+    }
+    &.shop {
+        padding: 10px;
+        .w(280px);
+        .flex();
+        gap: 10px;
+        flex-direction: column;
+        .m-item__top {
+            .flex();
+            gap: 10px;
+            .u-img {
+                .size(48px);
+                .r(5px);
+                background-color: #ffffff;
+            }
+            .m-info {
+                flex: 1;
+                .u-title {
+                    .fz(16px,21px);
+                    .color(#DA8029);
+                    .bold();
+                }
+                .m-label {
+                    .mt(6px);
+                    .flex();
+                    gap: 4px;
+                    .u-item {
+                        padding: 4px;
+                        .r(4px);
+                        background: rgba(0, 0, 0, 0.6);
+                        .color(#ffffff);
+                        .fz(10px,13px);
+                        .bold();
+                        &.u-color {
+                            background-color: #da8029;
+                        }
+                    }
+                }
+            }
+        }
+        .m-item__center {
+            background-color: #ffffff;
+            .r(10px);
+            .h(88px);
+        }
+        .m-item__bottom {
+            .flex();
+            .u-item {
+                flex: 1;
+                padding: 4px;
+                .fz(12px,16px);
+                .color( rgba(0, 0, 0, 0.6));
+            }
+        }
+    }
+    .m-hover {
+        .pa();
+        .lt(0);
+        .rb(0);
+        .r(10px);
+        .flex();
+        .flex(y);
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.9);
+        border: 2px solid #ff4365;
+        opacity: 0;
+        transition: 0.2s all;
+        .m-icon {
+            .pa();
+            .rt(10px);
+            .u-icon {
+                .db();
+                .size(15px);
+            }
+        }
+        .u-detail {
+            .w(102px);
+            .fz(18px,34px);
+            .x();
+            .r(4px);
+            .color(#ffffff);
+            .bold();
+            background: #ff4365;
+        }
+        .m-modal {
+            .x();
+            .flex();
+            .color(#000000);
+            justify-content: center;
+            gap: 4px;
+            flex-direction: column;
+            background-color: #ffffff;
+            box-shadow: 0px 0px 10px 0px rgba(255, 12, 12, 0.2) inset;
+            .size(100%,100%);
+            .r(10px);
+            .u-title {
+                .fz(16px,21px);
+                .bold();
+            }
+            .u-content {
+                .fz(12px,16px);
+            }
+            .m-btn {
+                .flex();
+                justify-content: center;
+                gap: 10px;
+                .u-btn {
+                    .w(82px);
+                    .fz(18px,34px);
+                    .color(#ffffff);
+                    .r(4px);
+                    transition: 0.2s all;
+                    &:first-child {
+                        background-color: #8d8d8d;
+                        &:hover {
+                            background-color: #000000;
+                        }
+                    }
+                    &:last-child {
+                        background-color: #ff4365;
+                        &:hover {
+                            box-shadow: 0px 0px 10px 0px rgba(255, 67, 101, 0.8);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &:hover {
+        .m-hover {
+            opacity: 1 !important;
+        }
+    }
+}
diff --git a/src/assets/css/exterior/list.less b/src/assets/css/exterior/list.less
index c5fcd85df..621c35b91 100644
--- a/src/assets/css/exterior/list.less
+++ b/src/assets/css/exterior/list.less
@@ -133,7 +133,7 @@
                         .pointer();
                         .m-item__img {
                             .h(242px);
-                            padding: 4px;
+                            padding: 4px 2px 2px 4px;
                             box-sizing: border-box;
                             background-image: url(../../img/exterior/exterior_border.svg);
                             background-size: 100% 100%;
diff --git a/src/assets/img/exterior/house/cib_marketo.svg b/src/assets/img/exterior/house/cib_marketo.svg
new file mode 100644
index 000000000..49c9638b6
--- /dev/null
+++ b/src/assets/img/exterior/house/cib_marketo.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="cib:marketo">
+<path id="Vector" d="M12.1089 0V18L16.7107 14.3347V2.502L12.1089 0ZM9.96974 14.0687L6.26624 15.6859V1.56488L9.96974 2.66062V14.0687ZM1.29205 13.6524L4.1248 12.9054V3.89138L1.3033 3.43688L1.29205 13.6524Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/delete.svg b/src/assets/img/exterior/house/delete.svg
new file mode 100644
index 000000000..519ad3212
--- /dev/null
+++ b/src/assets/img/exterior/house/delete.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="material-symbols:delete">
+<path id="Vector" d="M4.66669 14C4.30002 14 3.98624 13.8696 3.72535 13.6087C3.46446 13.3478 3.3338 13.0338 3.33335 12.6667V4H2.66669V2.66667H6.00002V2H10V2.66667H13.3334V4H12.6667V12.6667C12.6667 13.0333 12.5362 13.3473 12.2754 13.6087C12.0145 13.87 11.7005 14.0004 11.3334 14H4.66669ZM6.00002 11.3333H7.33335V5.33333H6.00002V11.3333ZM8.66669 11.3333H10V5.33333H8.66669V11.3333Z" fill="black"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/mdi_heart.svg b/src/assets/img/exterior/house/mdi_heart.svg
new file mode 100644
index 000000000..2d6515b72
--- /dev/null
+++ b/src/assets/img/exterior/house/mdi_heart.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mdi:heart">
+<path id="Vector" d="M15 26.6875L13.1875 25.0375C6.75 19.2 2.5 15.3375 2.5 10.625C2.5 6.7625 5.525 3.75 9.375 3.75C11.55 3.75 13.6375 4.7625 15 6.35C16.3625 4.7625 18.45 3.75 20.625 3.75C24.475 3.75 27.5 6.7625 27.5 10.625C27.5 15.3375 23.25 19.2 16.8125 25.0375L15 26.6875Z" fill="#FF0C63"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/mdi_hot.svg b/src/assets/img/exterior/house/mdi_hot.svg
new file mode 100644
index 000000000..9683a462c
--- /dev/null
+++ b/src/assets/img/exterior/house/mdi_hot.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mdi:hot">
+<path id="Vector" d="M24.7199 13.6671C24.3257 13.167 23.8458 12.7337 23.4001 12.3004C22.2518 11.3003 20.9492 10.5836 19.8522 9.53361C17.2984 7.1002 16.7328 3.08342 18.3611 0C16.7328 0.383344 15.3102 1.25004 14.0933 2.20006C9.65408 5.66683 7.90583 11.7837 9.99687 17.0338C10.0654 17.2005 10.134 17.3672 10.134 17.5838C10.134 17.9505 9.8769 18.2839 9.5341 18.4172C9.13989 18.5839 8.72853 18.4839 8.40288 18.2172C8.3056 18.1379 8.22425 18.0419 8.16292 17.9338C6.22613 15.5504 5.91762 12.1337 7.22024 9.40027C4.35791 11.667 2.79819 15.5004 3.02101 19.1172C3.12385 19.9506 3.22668 20.7839 3.51806 21.6173C3.75802 22.6173 4.22079 23.6173 4.73498 24.5007C6.58607 27.3841 9.7912 29.4508 13.2363 29.8675C16.9042 30.3175 20.8292 29.6675 23.6401 27.2008C26.7767 24.434 27.8736 20.0006 26.2625 16.2005L26.0396 15.7671C25.6797 15.0004 24.7199 13.6671 24.7199 13.6671ZM19.3037 24.1674C18.8238 24.5674 18.0354 25.0007 17.4184 25.1674C15.4987 25.8341 13.5791 24.9007 12.4479 23.8007C14.4875 23.334 15.7044 21.8673 16.0643 20.3839C16.3557 19.0505 15.8072 17.9505 15.5844 16.6671C15.3787 15.4338 15.413 14.3837 15.8758 13.2337C16.2015 13.8671 16.5442 14.5004 16.9556 15.0004C18.2754 16.6671 20.3493 17.4005 20.7949 19.6672C20.8635 19.9006 20.8977 20.1339 20.8977 20.3839C20.9492 21.7506 20.3321 23.2507 19.3037 24.1674Z" fill="#FF0000"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/mid_fall.svg b/src/assets/img/exterior/house/mid_fall.svg
new file mode 100644
index 000000000..b6d3830a1
--- /dev/null
+++ b/src/assets/img/exterior/house/mid_fall.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fluent-mdl2:market">
+<path id="Vector" d="M14 12V8.2462H13.2489V10.7155L8.7423 6.21094L6.489 8.46322L2.52812 4.51L2 5.03788L6.489 9.5307L8.7423 7.27843L12.7149 11.2492H10.2445V12H14Z" fill="#07C046"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/mid_rise.svg b/src/assets/img/exterior/house/mid_rise.svg
new file mode 100644
index 000000000..32b3edcfc
--- /dev/null
+++ b/src/assets/img/exterior/house/mid_rise.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fluent-mdl2:market">
+<path id="Vector" d="M14 4V7.7555H13.2489V5.28509L8.7423 9.79169L6.489 7.53839L2.52812 11.4934L2 10.9653L6.489 6.47042L8.7423 8.72372L12.7149 4.7511H10.2445V4H14Z" fill="#FF0000"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/read-filled.svg b/src/assets/img/exterior/house/read-filled.svg
new file mode 100644
index 000000000..aef23ac94
--- /dev/null
+++ b/src/assets/img/exterior/house/read-filled.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ant-design:read-filled">
+<path id="Vector" d="M16.3125 2.83008H12.2906C11.4275 2.83008 10.5838 3.07793 9.85781 3.54551L9 4.0957L8.14219 3.54551C7.41693 3.07802 6.57224 2.82962 5.70937 2.83008H1.6875C1.37637 2.83008 1.125 3.08145 1.125 3.39258V13.377C1.125 13.6881 1.37637 13.9395 1.6875 13.9395H5.70937C6.57246 13.9395 7.41621 14.1873 8.14219 14.6549L8.92266 15.1576C8.94551 15.1717 8.97187 15.1805 8.99824 15.1805C9.02461 15.1805 9.05098 15.1734 9.07383 15.1576L9.8543 14.6549C10.582 14.1873 11.4275 13.9395 12.2906 13.9395H16.3125C16.6236 13.9395 16.875 13.6881 16.875 13.377V3.39258C16.875 3.08145 16.6236 2.83008 16.3125 2.83008ZM7.10156 9.72949C7.10156 9.80156 7.04531 9.86133 6.97676 9.86133H3.71074C3.64219 9.86133 3.58594 9.80156 3.58594 9.72949V8.93848C3.58594 8.86641 3.64219 8.80664 3.71074 8.80664H6.975C7.04355 8.80664 7.0998 8.86641 7.0998 8.93848V9.72949H7.10156ZM7.10156 7.26856C7.10156 7.34063 7.04531 7.40039 6.97676 7.40039H3.71074C3.64219 7.40039 3.58594 7.34063 3.58594 7.26856V6.47754C3.58594 6.40547 3.64219 6.3457 3.71074 6.3457H6.975C7.04355 6.3457 7.0998 6.40547 7.0998 6.47754V7.26856H7.10156ZM14.4141 9.72949C14.4141 9.80156 14.3578 9.86133 14.2893 9.86133H11.0232C10.9547 9.86133 10.8984 9.80156 10.8984 9.72949V8.93848C10.8984 8.86641 10.9547 8.80664 11.0232 8.80664H14.2875C14.3561 8.80664 14.4123 8.86641 14.4123 8.93848V9.72949H14.4141ZM14.4141 7.26856C14.4141 7.34063 14.3578 7.40039 14.2893 7.40039H11.0232C10.9547 7.40039 10.8984 7.34063 10.8984 7.26856V6.47754C10.8984 6.40547 10.9547 6.3457 11.0232 6.3457H14.2875C14.3561 6.3457 14.4123 6.40547 14.4123 6.47754V7.26856H14.4141Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/ri_skip-left-line.svg b/src/assets/img/exterior/house/ri_skip-left-line.svg
new file mode 100644
index 000000000..b1dd7f425
--- /dev/null
+++ b/src/assets/img/exterior/house/ri_skip-left-line.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ri:skip-left-line">
+<path id="Vector" d="M17.3925 15L23.3838 9.00874L21.6162 7.24124L13.8575 15L21.6162 22.7587L23.3838 20.9912L17.3925 15ZM8.75 22.5V7.49999H11.25V22.5H8.75Z" />
+</g>
+</svg>
diff --git a/src/assets/img/exterior/house/search.svg b/src/assets/img/exterior/house/search.svg
new file mode 100644
index 000000000..6a9a83468
--- /dev/null
+++ b/src/assets/img/exterior/house/search.svg
@@ -0,0 +1,12 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mingcute:search-fill" clip-path="url(#clip0_323_11092)">
+<g id="Group">
+<path id="Vector" d="M13.125 2.5C15.12 2.49987 17.0747 3.06138 18.7654 4.12029C20.4561 5.1792 21.8146 6.69271 22.6853 8.48762C23.556 10.2825 23.9038 12.2863 23.6889 14.2697C23.474 16.253 22.705 18.1358 21.47 19.7025L26.035 24.2675C26.2627 24.5033 26.3887 24.819 26.3859 25.1468C26.383 25.4745 26.2515 25.788 26.0198 26.0198C25.788 26.2515 25.4745 26.383 25.1468 26.3858C24.819 26.3887 24.5033 26.2627 24.2675 26.035L19.7025 21.47C18.3718 22.5187 16.8096 23.234 15.1463 23.5561C13.4829 23.8783 11.7667 23.798 10.1407 23.322C8.51464 22.846 7.02605 21.988 5.79906 20.8197C4.57207 19.6513 3.64227 18.2065 3.08723 16.6057C2.5322 15.005 2.36802 13.2947 2.6084 11.6176C2.84877 9.94043 3.48674 8.34511 4.46906 6.96469C5.45138 5.58427 6.74957 4.45878 8.25533 3.68212C9.76109 2.90546 11.4308 2.50014 13.125 2.5ZM13.125 5C10.9701 5 8.9035 5.85602 7.37977 7.37976C5.85604 8.90349 5.00001 10.9701 5.00001 13.125C5.00001 15.2799 5.85604 17.3465 7.37977 18.8702C8.9035 20.394 10.9701 21.25 13.125 21.25C15.2799 21.25 17.3465 20.394 18.8703 18.8702C20.394 17.3465 21.25 15.2799 21.25 13.125C21.25 10.9701 20.394 8.90349 18.8703 7.37976C17.3465 5.85602 15.2799 5 13.125 5ZM13.125 6.25C14.9484 6.25 16.6971 6.97433 17.9864 8.26364C19.2757 9.55295 20 11.3016 20 13.125C20 14.9484 19.2757 16.697 17.9864 17.9864C16.6971 19.2757 14.9484 20 13.125 20C11.3017 20 9.55297 19.2757 8.26365 17.9864C6.97434 16.697 6.25001 14.9484 6.25001 13.125C6.25001 11.3016 6.97434 9.55295 8.26365 8.26364C9.55297 6.97433 11.3017 6.25 13.125 6.25Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_323_11092">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/img/exterior/house/wbl_logo.png b/src/assets/img/exterior/house/wbl_logo.png
new file mode 100644
index 000000000..efc14892d
Binary files /dev/null and b/src/assets/img/exterior/house/wbl_logo.png differ
diff --git a/src/components/market/item.vue b/src/components/market/item.vue
new file mode 100644
index 000000000..2c8bfaf49
--- /dev/null
+++ b/src/components/market/item.vue
@@ -0,0 +1,96 @@
+<template>
+    <div class="m-house-item" :class="type">
+        <template v-if="type == 'warehouse'">
+            <div class="m-item__top">
+                <div class="u-logo"></div>
+                <div class="m-info">
+                    <div class="u-title">春山鸟归 · 鹤 · 豪华</div>
+                    <div class="u-type">盒子</div>
+                </div>
+                <div class="u-number">x 2</div>
+            </div>
+            <div class="m-item__bottom">
+                <div class="m-detail">
+                    <div class="m-detail__box">
+                        <div class="u-title">成本</div>
+                        <div class="u-value">422.76</div>
+                    </div>
+                    <div class="m-detail__box">
+                        <div class="u-title">近期价</div>
+                        <div class="u-value">10422.77</div>
+                    </div>
+                </div>
+                <div class="m-detail">
+                    <div class="m-detail__box">
+                        <div class="u-title">预计收益</div>
+                        <div class="u-value">
+                            <span>+ 10000.01</span>
+                            <span>( 20000.2 )</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-if="type == 'shop'">
+            <div class="m-item__top">
+                <img class="u-img" src="" alt="" />
+                <div class="m-info">
+                    <div class="u-title">春山鸟归 · 鹤 · 豪华</div>
+                    <div class="m-label">
+                        <div class="u-item">盒子</div>
+                        <div class="u-item u-color">￥880</div>
+                    </div>
+                </div>
+            </div>
+            <div class="m-item__center"></div>
+            <div class="m-item__bottom">
+                <div class="u-item">历史最高：￥1200</div>
+                <div class="u-item">交易热度：646</div>
+            </div>
+        </template>
+        <div
+            class="m-hover"
+            :style="{
+                opacity: hoverStatus ? 1 : 0,
+            }"
+        >
+            <template v-if="!hoverStatus">
+                <div class="m-icon">
+                    <img
+                        class="u-icon"
+                        @click="hoverStatus = 'delete'"
+                        svg-inline
+                        src="@/assets/img/exterior/house/delete.svg"
+                    />
+                </div>
+                <div class="u-detail">查看详情</div>
+            </template>
+            <div class="m-modal" v-if="hoverStatus == 'delete'">
+                <div class="u-title">确认移除</div>
+                <div class="u-content">春山鸟归 · 鹤 · 豪华</div>
+                <div class="m-btn">
+                    <div class="u-btn">是</div>
+                    <div class="u-btn" @click="hoverStatus = false">否</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "item",
+    props: ["item", "type"],
+    data: function () {
+        return {
+            hoverStatus: false,
+        };
+    },
+    computed: {},
+    methods: {},
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/exterior/item.less";
+</style>
diff --git a/src/views/exterior/house.vue b/src/views/exterior/house.vue
index d5ab559f4..8f73d816e 100644
--- a/src/views/exterior/house.vue
+++ b/src/views/exterior/house.vue
@@ -3,17 +3,17 @@
         <div class="m-left">
             <div class="m-author">
                 <img class="u-avatar" src="" />
-                <img class="u-icon" svg-inline src="../../assets/img/exterior/house/user.svg" alt="" />
+                <img class="u-icon" svg-inline src="@/assets/img/exterior/house/user.svg" alt="" />
             </div>
             <div class="m-sidebar_warehouse">
                 <div class="m-top">
                     <div class="m-top_left">
-                        <img class="u-icon" src="../../assets/img/exterior/house/bxs_package.svg" alt="" />
+                        <img class="u-icon" src="@/assets/img/exterior/house/bxs_package.svg" alt="" />
                         <span class="u-title">我的仓库</span>
                     </div>
                     <div class="m-top_right">
-                        <img class="u-icon" svg-inline src="../../assets/img/exterior/house/refresh.svg" alt="" />
-                        <img class="u-icon" svg-inline src="../../assets/img/exterior/house/launch.svg" alt="" />
+                        <img class="u-icon" svg-inline src="@/assets/img/exterior/house/refresh.svg" alt="" />
+                        <img class="u-icon" svg-inline src="@/assets/img/exterior/house/launch.svg" alt="" />
                     </div>
                 </div>
                 <div class="u-update">Updata time 2024-4-13 14:47:31</div>
@@ -36,50 +36,88 @@
                         <div class="u-item" v-for="index in 8" :key="index">{{ index }}</div>
                     </div>
                     <div class="m-goods">
-                        <div class="m-item" v-for="index in 8" :key="index">
-                            <div class="m-item__top">
-                                <div class="u-logo"></div>
-                                <div class="m-info">
-                                    <div class="u-title">春山鸟归 · 鹤 · 豪华</div>
-                                    <div class="u-type">盒子</div>
-                                </div>
-                                <div class="u-number">x 2</div>
-                            </div>
-                            <div class="m-item__bottom">
-                                <div class="m-detail">
-                                    <div class="m-detail__box">
-                                        <div class="u-title">成本</div>
-                                        <div class="u-value">422.76</div>
-                                    </div>
-                                    <div class="m-detail__box">
-                                        <div class="u-title">近期价</div>
-                                        <div class="u-value">10422.77</div>
-                                    </div>
-                                </div>
-                                <div class="m-detail">
-                                    <div class="m-detail__box">
-                                        <div class="u-title">预计收益</div>
-                                        <div class="u-value">
-                                            <span>+ 10000.01</span>
-                                            <span>( 20000.2 )</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                        <marketItem type="warehouse" v-for="index in 8" :key="index" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="m-center">
+            <div class="m-search">
+                <input class="u-search__input" type="text" />
+                <div class="m-search__icon">
+                    <img class="u-icon" src="@/assets/img/exterior/house/search.svg" alt="" />
+                </div>
+            </div>
+            <div class="m-index">
+                <div class="m-box">
+                    <div class="m-title">
+                        <img class="u-icon" src="@/assets/img/exterior/house/mdi_heart.svg" alt="" />
+                        <span>我的收藏</span>
+                    </div>
+                    <div class="m-list">
+                        <marketItem type="shop" v-for="index in 8" :key="index" />
+                    </div>
+                </div>
+                <div class="m-box">
+                    <div class="m-title">
+                        <img class="u-icon" src="@/assets/img/exterior/house/mdi_hot.svg" alt="" />
+                        <span>近期热门</span>
+                    </div>
+                    <div class="m-list">
+                        <marketItem type="shop" v-for="index in 8" :key="index" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="m-right">
+            <div class="m-top">
+                <div class="m-fold">
+                    <img class="u-icon" svg-inline src="@/assets/img/exterior/house/ri_skip-left-line.svg" alt="" />
+                </div>
+                <div class="m-wbl">
+                    <img class="u-wbl" src="@/assets/img/exterior/house/wbl_logo.png" alt="" />
+                </div>
+            </div>
+            <div class="m-box">
+                <div class="m-title">
+                    <img class="u-icon" src="@/assets/img/exterior/house/cib_marketo.svg" alt="" />
+                    <span>今日涨跌</span>
+                </div>
+                <div class="m-list">
+                    <div class="m-rank" v-for="index in 8" :key="index">
+                        <div class="m-img">
+                            <img class="u-img" src="" alt="" />
+                            <span>春山鸟归 · 鹤 · 豪华</span>
                         </div>
+                        <div class="m-info">
+                            <span class="u-price">￥432 </span>
+                            <img class="u-line" src="@/assets/img/exterior/house/mid_rise.svg" alt="" />
+                            <span class="u-range u-rise">2%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="m-box">
+                <div class="m-title">
+                    <img class="u-icon" src="@/assets/img/exterior/house/read-filled.svg" alt="" />
+                    <span>拓展阅读</span>
+                </div>
+                <div class="m-list">
+                    <div class="m-news" v-for="index in 8" :key="index">
+                        <div class="u-img"></div>
+                        <div class="u-title">标题</div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="m-center"></div>
-        <div class="m-right"></div>
     </div>
 </template>
 <script>
 import { getMyInfo } from "@/service/exterior";
+import marketItem from "@/components/market/item";
 export default {
     name: "House",
-    components: {},
+    components: { marketItem },
     inject: ["__imgPath"],
     data() {
         return {