优化修改

src/components/apartment/seachModule.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
-        <div class="body-maxWidth">
-            <div class="s-w-100 seach-box-bg" :style="{ boxShadow: !props.seachPage ? 'none' : '' }">
+        <div class="body-maxWidth" :class="{ 'seachPage': !props.seachPage }">
+            <div class="s-w-100 seach-box-bg">
                 <div class="seach-box">
                     <div class="top-seach dis-f al-item" v-if="props.seachPage">
                         <div style="position: absolute;left: -8px;top: 20px;">
@@ -85,8 +85,7 @@
                         <img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" />
                     </div>
 
-                    <div class="option-area flexflex" v-if="state == 'unfold'"
-                        :style="{ borderTop: !props.seachPage ? 'none' : '' }">
+                    <div class="option-area flexflex" v-if="state == 'unfold'">
                         <div class="option-left">
                             <div class="option-item flexflex">
                                 <div class="option-title">学校附近</div>
@@ -183,31 +182,6 @@ const usestore = useStore();
 const { wechat } = toRefs(usestore.state);
 const router = useRouter()
 
-const value = ref('')
-
-const options = [
-    {
-        value: 'Option1',
-        label: 'Option1',
-    },
-    {
-        value: 'Option2',
-        label: 'Option2',
-    },
-    {
-        value: 'Option3',
-        label: 'Option3',
-    },
-    {
-        value: 'Option4',
-        label: 'Option4',
-    },
-    {
-        value: 'Option5',
-        label: 'Option5',
-    },
-]
-
 const props = defineProps({
     count: {
         type: Number,
@@ -374,8 +348,25 @@ const selectOption = (type, value) => {
     justify-content: space-between;
 }
 
+.seachPage {
+    .seach-box-bg {
+        background-color: none;
+        box-shadow: none;
+
+
+        .seach-box {
+            transform: translate(0, 0);
+            box-shadow: none;
+
+            .option-area {
+                border-top: none;
+            }
+        }
+    }
+}
+
 .seach-box-bg {
-    // background: #d7d7d7;
+    background: #d7d7d7;
     border-radius: 16px;
     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
@@ -385,7 +376,7 @@ const selectOption = (type, value) => {
 
     .seach-box {
         background: #FFFFFF;
-        // transform: translate(0, 3px);
+        transform: translate(0, 3px);
         border-radius: 16px;
 
         .top-seach {