feat: house

JX3BOX · Jun 19, 2024 · b864a24 · b864a24
1 parent 2d33cd4
commit b864a24
Show file tree

Hide file tree

Showing 15 changed files with 620 additions and 101 deletions.
diff --git 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;
                     }
                 }
             }