fix:house

JX3BOX · Jul 3, 2024 · bbbecf7 · bbbecf7
1 parent 040439f
commit bbbecf7
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 4 deletions.
diff --git a/src/assets/css/exterior/item.less b/src/assets/css/exterior/item.less
@@ -248,4 +248,67 @@
             opacity: 1 !important;
         }
     }
+
+    .m-mask_layout {
+        .el-dialog {
+            background: none;
+            .w(max-content);
+            .el-dialog__header {
+                .none();
+            }
+            .el-dialog__body {
+                padding: 0;
+            }
+        }
+        .m-info {
+            .r(30px);
+            background: #f9e4cf;
+            box-shadow: 0px 0px 10px 0px #ffe3d7;
+            padding: 30px;
+            .flex();
+            .m-body {
+                .x();
+                .w(22px);
+                .mr(2px);
+                .u-item {
+                    .dbi();
+                    .color(#958b71);
+                    .fz(12px);
+                    .mt(4px);
+                    .pr();
+                    .z(1);
+                    .pointer();
+                    padding: 4px 2px;
+                    border: 1px solid #afa089;
+                    &.act {
+                        .color(white);
+                        &::before {
+                            content: "";
+                            .db();
+                            .pa();
+                            .lt(2px);
+                            .rb(2px);
+                            .z(-1);
+                            background: #958b71;
+                        }
+                    }
+                }
+            }
+            .m-preview {
+                .w(158px);
+                .h(248px);
+                padding: 5px;
+                box-sizing: border-box;
+                background-image: url(../../img/exterior/exterior_border.svg);
+                background-size: 100% 100%;
+                .u-img {
+                    .h(100%);
+                    background-size: cover;
+                }
+            }
+            .m-detail {
+                .ml(18px);
+            }
+        }
+    }
 }
diff --git a/src/components/market/item.vue b/src/components/market/item.vue
@@ -72,12 +72,11 @@
                     />
                 </div>
                 <div class="m-btn__box">
-                    <div class="u-btn__detail" @click="dialogVisibleType = 'detail'">查看详情</div>
+                    <div class="u-btn__detail" @click="detailVisible = true">查看详情</div>
                     <img
                         v-if="type == 'shop'"
                         class="u-btn__put"
                         svg-inline
-                        @click="dialogVisibleType = 'putIn'"
                         src="@/assets/img/exterior/house/solar_inbox-in-bold.svg"
                     />
                 </div>
@@ -100,7 +99,43 @@
             </div>
         </div>
 
-        <el-dialog :visible.sync="dialogVisibleType"> 123123 </el-dialog>
+        <el-dialog class="m-mask_layout" :visible.sync="detailVisible">
+            <div>
+                <div class="m-info">
+                    <div class="m-body">
+                        <span class="u-item act">成男</span>
+                        <span class="u-item act">成女</span>
+                        <span class="u-item act">正太</span>
+                        <span class="u-item act">萝莉</span>
+                    </div>
+                    <div class="m-preview">
+                        <div class="u-img"></div>
+                    </div>
+                    <div class="m-detail">
+                        <div class="u-title">花醉良辰·凤卜礼盒</div>
+                        <div class="m-brief">
+                            <span class="u-item">类型：包身礼盒</span>
+                            <span class="u-item">原价：880</span>
+                            <span class="u-item">发行时间：2020-02-03</span>
+                        </div>
+                        <div class="m-input">
+                            <div class="m-item">
+                                <span>购入时间</span>
+                                <span>2020-02-03</span>
+                            </div>
+                            <div class="m-select">
+                                <span>今天</span>
+                                <img src="" alt="" />
+                            </div>
+                            <div class="m-select">
+                                <span></span>
+                                <img src="" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -111,7 +146,7 @@ export default {
     data: function () {
         return {
             hoverStatus: false,
-            dialogVisibleType: false,
+            detailVisible: false,
         };
     },
     computed: {},