最终版

src/views/login/components/Select.vue

@@ -99,7 +99,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, defineExpose, reactive ,inject} from 'vue';
+import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
 import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import { getSelectList } from "@/api/reqIpo/ipo"
@@ -109,6 +109,9 @@ const { proxy } = (getCurrentInstance() as any)
 const showSelect = ref(false)
 const checkedAll = ref(0)
 const  selectCards=inject('selectCards') as Function
+onMounted(()=>{
+    console.log('select组件挂载');
+})
 const confirm = async () => {
     var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
     var reqeustObj = {
@@ -148,11 +151,11 @@ const obj = reactive({
     {
         key: "30",
         value: proxy.$t('home.PublicOfferClosed'),
-        isSelcted: true
+        isSelcted: false
     }, {
         key: "35",
         value: proxy.$t('home.ApplicationValidated'),
-        isSelcted: true
+        isSelcted: false
     }, {
         key: "45",
         value: proxy.$t('home.AllotmentConfirmed'),
@@ -195,7 +198,7 @@ const obj = reactive({
         {
             key: 'CNY',
             value: proxy.$t('home.ChineseYuan'),
-            isSelcted: true
+            isSelcted: false
         },
         {
             key: 'USD',
@@ -223,7 +226,7 @@ const obj = reactive({
     {
         key: '5',
         value: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
-        isSelcted: true
+        isSelcted: false
     }
     ],
     SecuritiestobeListed: [{
@@ -246,22 +249,22 @@ const obj = reactive({
     {
         key: '5',
         value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
-        isSelcted: true
+        isSelcted: false
     },
     {
         key: '6',
         value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
-        isSelcted: true
+        isSelcted: false
     },
     {
         key: '7',
         value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
-        isSelcted: true
+        isSelcted: false
     },
     {
         key: '8',
         value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
-        isSelcted: true
+        isSelcted: false
     },
     {
         key: '99',
@@ -298,7 +301,7 @@ const obj = reactive({
     // {
     //     key: '5',
     //     value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
-    //     isSelcted: true
+    //     isSelcted: false
     // },
     // {
     //     key: '6',
@@ -336,9 +339,7 @@ const checkAll = (number: number) => {
     } else {
         checkedAll.value = number;
         selectAll(number as 1 | 2)
-
     }
-
 }
 function selectAll(all: 1 | 2) {
     var boolean1 = all == 1 ? true : false;
@@ -356,7 +357,7 @@ defineExpose({
 <style lang="scss" scoped>
 .selectWrap {
     width: 800px;
-    height: 820px;
+    height: 620px;
     background-color: #fff;
     border-radius: 20px;
     position: fixed;
@@ -364,7 +365,14 @@ defineExpose({
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
-
+    @media screen and (max-width: 768px){
+        width: 90vw;
+         height: 93vh;
+         top: 50%;
+         left: 50%;
+        transform: translate(-50%, -50%);
+            overflow-y: scroll;
+        }
     .box {
         box-sizing: border-box;
         padding: 10px 20px 20px 20px;
@@ -380,12 +388,22 @@ defineExpose({
             font-size: 18px;
             color: #879db2;
             margin-top: 10px;
+//             @media screen and (max-width: 768px){
+   
+//    font-size: 12px;
+// }
         }
 
         li {
             display: flex;
             font-size: 18px;
             flex-wrap: wrap;
+            @media screen and (max-width: 768px){
+                flex-direction: column;
+                flex-wrap:nowrap;
+                 //font-size: 12px;
+                 width: fit-content;
+        }
 
             .word {
                 margin-right: 10px;
@@ -399,12 +417,22 @@ defineExpose({
                 display: flex;
                 justify-content: space-between;
                 cursor: pointer;
-
+                @media screen and (max-width: 768px){
+                height: fit-content;
+                width: fit-content;
+        }
+                &:hover {
+                background-color: #0F426F;
+                border-radius: 5px;
+                color: #fff;
+            
+            }
                 .check {
                     width: 30px;
 
                     span {
                         line-height: 35px;
+         
                     }
                 }
             }
@@ -426,6 +454,11 @@ defineExpose({
             background-color: #fff;
             color: #557795;
             padding: 10px 20px 10px 20px;
+            @media screen and (max-width: 768px){
+                margin:0;      
+                // font-size: 12px;
+               
+        }
 
             &:hover {
                 background-color: #0F426F;
@@ -435,4 +468,5 @@ defineExpose({
         }
     }
 }
+
 </style>