perf:furniture

JX3BOX · Jan 29, 2024 · 965fc79 · 965fc79
1 parent 9104407
commit 965fc79
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/src/assets/css/furniture/index.less b/src/assets/css/furniture/index.less
@@ -33,6 +33,7 @@
         border-radius: 10px;
         box-shadow: 0px 0px 10px 0px #00000033;
         .flex;
+        flex-wrap: wrap;
         gap: 10px;
         .u-item {
             background: #F3F4F5;
@@ -72,7 +73,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background-color: #fff;
+        background-color: #f3f4f5;
         border-radius: 20px;
         height: 40px;
         margin-right: 20px;
@@ -91,6 +92,7 @@
             }
             .el-input__inner {
                 border: none;
+                background-color: #f3f4f5;
             }
         }
         &.is-selected {

diff --git a/src/components/PvxSearch.vue b/src/components/PvxSearch.vue
@@ -15,7 +15,7 @@
                 :key="item.key"
             >
                 <template v-if="item.type === 'radio'">
-                    <el-radio-group v-model="formData[item.key]">
+                    <el-radio-group v-if="selectType === 'radio'" v-model="formData[item.key]">
                         <el-radio-button
                             class="type-item"
                             :class="{ active: typeItem.type === formData[item.type] }"
@@ -25,6 +25,16 @@
                             >{{ typeItem.name }}</el-radio-button
                         >
                     </el-radio-group>
+                    <div v-else class="u-furniture-type-select" :class="formData[item.key] &&  'is-selected'">
+                        <el-select v-model="formData[item.key]" placeholder="分类" class="select-wrapper">
+                            <el-option
+                                v-for="typeItem in item.options.filter((rItem) => !rItem.link)"
+                                :key="typeItem.type"
+                                :value="typeItem.type"
+                                :label="typeItem.name"
+                            ></el-option>
+                        </el-select>
+                    </div>
                     <template v-if="item.options.filter((rItem) => rItem.link).length">
                         <a
                             :href="typeItem.link"
@@ -183,6 +193,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        selectType: {
+            type: String,
+            default: 'radio',
+        }
     },
     data() {
         return {
@@ -276,4 +290,49 @@ export default {
 
 <style lang="less">
 @import "~@/assets/css/search.less";
+.u-furniture-type-select{
+    label {
+        padding-left: 20px;
+        font-size: 16px;
+        font-weight: 700;
+        color: #949494;
+        flex: none;
+    }
+    .el-select {
+        .el-input {
+            width: 90%;
+
+        }
+        .el-input__inner {
+            border: none;
+            .r(20px);
+            background-color: #f3f4f5;
+            font-size: 16px;
+            font-weight: 700;
+            color: #8D8D8D;
+            &::placeholder{
+                font-size: 16px;
+                background-color: #f3f4f5;
+                font-weight: 700;
+                color: #8D8D8D;
+            }
+        }
+    }
+    &.is-selected {
+        label {
+            color: @furnitureColor;
+        }
+        .el-select {
+            .el-input__inner {
+                background-color: @furnitureColor;
+                color: #fff;
+                font-weight: bold;
+                .r(20px);
+            }
+            i {
+                color: #fff !important;
+            }
+        }
+    }
+}
 </style>
diff --git a/src/views/furniture/Index.vue b/src/views/furniture/Index.vue
@@ -5,6 +5,7 @@
             :items="searchProps"
             :initValue="initValue"
             :active="isActive"
+            :select-type="selectType"
             class="m-furniture-search"
             @search="searchEvent($event)"
         >
@@ -117,6 +118,7 @@ export default {
             categoryObj: {},
             category: [],
             childCategory: [],
+            selectType:window.innerWidth > 1680 ? 'radio' : 'select',
             // initValue: { nCatag1Index: "1" },
             initValue: {},
             append: false,