移动端dashbord调整

src/App.vue

@@ -1,15 +1,23 @@
 <template >
   <el-config-provider :locale="store.localeLang">
     <div class="login">
-      <router-view />
+      <router-view v-if="showRouter"/>
     </div>
   </el-config-provider>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, onBeforeMount, onMounted, watch } from 'vue'
+import { defineComponent, ref, onBeforeMount, onMounted, watch ,provide} from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import { ipoStore } from "@/stores/ipo"
+const showRouter=ref(true)
+const reflashRouter=()=>{
+  showRouter.value=false;
+  setTimeout(()=>{
+    showRouter.value=true
+  },1)
+}
+provide('reflashRouter',reflashRouter);
 function isMobileFn() {
   return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
 }
@@ -24,8 +32,6 @@ const setFontSize = () => {
   document.documentElement.style.fontSize = font + "px";
 }
 
-
-
 </script>
 
 <style lang="scss" >

src/locales/en.ts

@@ -19,7 +19,18 @@ export default {
         Mainboard:'Main board',
         GEM:'GEM',
         new:'New',
-        
+        title:{
+            All:'All',
+            None:'None',
+            IPOStatus:'IPO Status',
+            TradingCurrency:'Trading Currency',
+            OfferingType:'Offering Type',
+            SecuritiestobeListed:'Securities to be Listed',
+            ListingPlatform:'Listing Platform',
+            ListingType:'Listing Type',
+            APPLY:'Apply',
+            Cancel:'Cancel'
+        }
     },
     dashboard:{
         Home:'Home',

src/locales/zh-cn.ts

@@ -18,7 +18,19 @@ export default {
         Cancelled:'取消',
         Mainboard:'主板上市',
         GEM:'创业板',
-        new:'新上市'
+        new:'新上市',
+        title:{
+            All:'全选',
+            None:'全不选',
+            IPOStatus:'首次公开招股状况',
+            TradingCurrency:'交易货币',
+            OfferingType:'招股类型',
+            SecuritiestobeListed:'拟上市证券',
+            ListingPlatform:'上市平台',
+            ListingType:'上市类型',
+            APPLY:'提交',
+            Cancel:'取消'
+        }
     },
     dashboard:{
         Home:'主页',

src/locales/zh-ct.ts

@@ -18,7 +18,19 @@ export default {
         Cancelled:'取消',
         Mainboard:'主板上市',
         GEM:'創業板',
-        new:'新上市'                    
+        new:'新上市',
+        title:{
+            All:'全選',
+            None:'全不選',
+            IPOStatus:'首次公開招股狀況',
+            TradingCurrency:'交易貨幣',
+            OfferingType:'招股類型',
+            SecuritiestobeListed:'擬上市證券',
+            ListingPlatform:'上市平台',
+            ListingType:'上市類型',
+            APPLY:'提交',
+            Cancel:'取消'
+        }
     },
     dashboard:{
         Home:'主頁',

src/views/IPO/components/IpoContent.vue

@@ -187,7 +187,7 @@ const data = defineProps<{ info: obj[], title: string }>()
                 font-size: 12px;
                 position: relative;
 
-                .name2 {}
+                // .name2 {}
 
 
 
@@ -207,7 +207,7 @@ const data = defineProps<{ info: obj[], title: string }>()
                     color: #355D80;
                 }
 
-                .info2 {}
+                // .info2 {}
             }
 
             .table {

src/views/IPO/components/IpoHeader.vue

@@ -2,12 +2,12 @@
     <div class="headerWrap">
         <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
             style="background-color: #1C3F56;" :with-header="false">
-            <Drawer :drawer = "drawer" @childfn="fn"/>
+            <Drawer :drawer="drawer" @childfn="fn" />
         </el-drawer>
         <div class="hleft">
             <div class="left-1">
-                    <img src="@/assets/1x/1x/source5.png" alt="menu"  @click="openDrawer" class="menu">
+                <img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
-                    <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
+                <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
             </div>
 
             <div class="search" @click="handlesearch">
@@ -50,7 +50,6 @@ const openDrawer = () => {
     drawer.value = true;
 }
 const handleShowLang = (e: any) => {
-    console.log(1111)
     e.stopPropagation()
     lang.value.showLang = !lang.value.showLang
 }
@@ -60,8 +59,8 @@ onMounted(() => {
         lang.value.showLang = false
     }
 })
-function fn(data:any){
+function fn(data: any) {
-drawer.value = data
+    drawer.value = data
 }
 onUnmounted(() => {
     document.documentElement.onclick = null
@@ -69,11 +68,12 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@media screen and (max-width: 768px){
+@media screen and (max-width: 768px) {
-    .headerWrap{
+    .headerWrap {
         margin-left: 18px;
     }
 }
+
 .langWrap {
     //   position: absolute;
     // //   top:-20px;
@@ -84,7 +84,7 @@ onUnmounted(() => {
     margin-left: 15px;
 
     @media screen and (max-width: 768px) {
-        display: none;
+        // display: none;
     }
 
     .second {
@@ -103,6 +103,10 @@ onUnmounted(() => {
     position: absolute;
     top: 50px;
     left: -50px;
+
+    @media screen and (max-width: 768px) {
+        left: -110px;
+    }
 }
 
 .headerWrap {
@@ -124,6 +128,10 @@ onUnmounted(() => {
         width: fit-content;
         position: relative;
 
+        @media screen and (max-width: 768px) {
+            justify-content: flex-start;
+        }
+
         .menu {
             display: none;
 
@@ -132,6 +140,7 @@ onUnmounted(() => {
                 vertical-align: middle;
                 width: 25px;
                 height: 20px;
+
             }
         }
 
@@ -167,6 +176,8 @@ onUnmounted(() => {
 
             @media screen and (max-width: 768px) {
                 transform: translateY(-0.5vh);
+                position: absolute;
+                right: 50px;
             }
         }
     }

src/views/IPO/components/IpoNav.vue

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, defineProps } from "vue"
+import { ref, defineProps ,computed} from "vue"
 import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 const { proxy } = (getCurrentInstance() as any)
@@ -21,7 +21,7 @@ const scrollto = (index: number) => {
     console.log(ref11)
     props.scroll(ref11)
 }
-const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')])
+const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')]))
 </script>
 
 <style lang="scss" scoped>

src/views/IPO/index.vue

@@ -150,13 +150,15 @@ const Offerings = ref([
         info: "100"
     },
     {
-        name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
+        // name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
-        info: "100,000",
+        // info: "100,000", 暂时不暂时的字段----
+        name: "",
+        info: "",
         name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
         info2: "10,000,000",
         table: {
-            title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel()?33:50, align: "right" },
+            title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
-            { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel()?38:50, align: "right" }],
+            { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
             lists: [
                 {
                     number: '1',
@@ -184,18 +186,18 @@ const Offerings = ref([
         name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
         info: "5.00%"
     },
-    {
+    // {暂时不暂时的字段--------
-        name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
+    //     name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
-        info: "inclusive"
+    //     info: "inclusive"
-    },
+    // },
-    {
+    // {暂时不暂时的字段-------------
-        name: proxy.$t('ipo.Offering.OverallotmentOption'),
+    //     name: proxy.$t('ipo.Offering.OverallotmentOption'),
-        info: "5.00%"
+    //     info: "5.00%"
-    },
+    // },
     {
         name: proxy.$t('ipo.Offering.DenominationTable'),
         table: {
-            title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel()?35:50, align: "right" },
+            title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel() ? 35 : 50, align: "right" },
             { header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
             lists: [
                 {
@@ -274,10 +276,10 @@ const Timetable = ref([
         info2: "09:00",
         table: {
             title: [
-                { header: " ", content: "des",width: isMobel()?50: 43, align: "left" },
+                { header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
                 { width: 12 },  //通过加一段空结构来调整表头的位置
-                { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel()?30: 20, align: "left" },
+                { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
-                { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel()?22: 20, align: "left" }],
+                { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
             lists: [
                 {
                     des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
@@ -342,9 +344,9 @@ const content = ref()
 onMounted(
     () => {
         data.value = JSON.parse(localStorage.getItem('itemData') as string)
-         getreferencedata()
+        getreferencedata()
-         setDownLoad()
+        setDownLoad()
-       // text();
+        // text();
     }
 )
 async function text() {
@@ -366,7 +368,7 @@ const getreferencedata = async () => {
     setTransaction((res as any).data[0])
     setTimeTable((res as any).data[0])
 }
-function isMobel(){
+function isMobel() {
     return 768 >= document.documentElement.clientWidth;
 }
 function setInformation(mockRes: any) {
@@ -423,11 +425,11 @@ function setOfferings(mockRes: any) {
         { info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
         { info: has_data(boardLot) },
         { info: keepTwoDecimalStr(poReallocationCap) },
-        { info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(poSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(ioOfferSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
+        { info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
         { info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
-        { info: has_data(upsizeOption?.toFixed(2),"%") },
+        { info: has_data(upsizeOption?.toFixed(2), "%") },
-        { info: "-" },
+        // { info: "-" },
-        { info: keepTwoDecimalStr(overallotOption) },
+        // { info: "-" },
         { table: denomTable }
     ]
     // info2s: [has_data(ipoShares) , has_data(poSharesFinal) , has_data(ioOfferSharesFinal)],
@@ -445,7 +447,7 @@ function setOfferings(mockRes: any) {
         if (dataObj[index].table) {
             filterObj.table = { title: item.table?.title, lists: [] }
             filterObj.table.lists = dataObj[index].table.map((element: any) => {
-                if (index == 10) {
+                if (index == 8) {
                     function formatNumber(num: number | string) {
                         return num.toString().replace(/\d+/, function (n: string) {
                             return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
@@ -597,7 +599,7 @@ function setTypeofListing(mockRes: any) {
         { info: has_data(nomValue), info2: nomCur as any },
         { info: listPlatform },
         { info: has_data(listSecurities) },]
-        // { info: has_data(listingCategories) }]
+    // { info: has_data(listingCategories) }]
     TypeOfListing.value = TypeOfListing.value.map((item, index) => {
         if (arr[index].info2) {
             return { ...item, info: arr[index].info, info2: arr[index].info2 }
@@ -615,7 +617,7 @@ function setAdvisers(mockRes: any) {
         { infos: filter(sponsors) },
         { infos: filter(legalSponsor) },
         { info: has_data(legalIssuer) },
-        { infos: underwriters },
+        { infos: filter(underwriters) },
         { infos: filter(advisers) },
         { infos: filter(overallCoordinators) },
         { infos: filter(distributors) },
@@ -712,10 +714,18 @@ function setTimeTable(mockRes: any) {
     })
     function timeTo(time: string | null | undefined) {
         if (time) {
-            return [moment(time).format("YYYY-MM-DD"), moment(time).format("HH:mm")]
+            return [moment(time).format("YYYY-MM-DD"), toEmpty(moment(time).format("HH:mm"))]
         } else {
             return ["-", "-"]
         }
+        function toEmpty(time: string) {
+            //如果时间戳转换出来是00:00 就返回空
+            if (time == "00:00") {
+                return ""
+            } else {
+                return time
+            }
+        }
     }
 }
 
@@ -752,21 +762,24 @@ function scrollTo(stron: string) {
     }
 
 }
- async function setDownLoad (){
+async function setDownLoad() {
     const ipoID = localStorage.getItem('ipoID');
     const res = await getIpo(ipoID as string)
-     const enHref = `${(res as any).data[0].pdfLink.eLink}`;
+    const enHref = `${(res as any).data[0].pdfLink.eLink}`;
-     const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
+    const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
-   Documents.value= [
+    //  if((res as any).data[0].pdfLink.eLink.length === 0){
-    {
+    //     alert("该文件为空")
-        name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
+    //  }
-        info: "ipo.pdf",
+    Documents.value = [
-        name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
+        {
-        info2: "ipo.pdf",
+            name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
-        href: enHref,
+            info: "ipo.pdf",
-        href2:chinaHref
+            name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
-    },
+            info2: "ipo.pdf",
-]
+            href: enHref,
+            href2: chinaHref
+        },
+    ]
 }
 
 

src/views/IpoCalendar/index.vue

@@ -203,7 +203,7 @@ const backRouter = () => {
 }
 :deep(.el-calendar-table){
     margin-top: 20px;
-    width: 375px;
+    width: 100vw;
     transform: translateX(-19px);
 }
     :deep(.el-calendar) {

src/views/dashBoard/Header/index.vue

@@ -87,7 +87,6 @@ const drawShow = () => {
     //   align-items: end;
     position: relative;
     margin-left: 15px;
-
     .second {
 
         width: 32px;
@@ -123,7 +122,7 @@ const drawShow = () => {
     justify-content: space-between;
     padding-top: 40px;
     transform: translateY(-20px);
-
+    height: 50px;
     @media screen and (max-width: 768px) {
         flex-direction: column;
        

src/views/dashBoard/Main.vue

@@ -187,7 +187,7 @@ const handleclick = (item: any) => {
 
     width: 270px;
     // height: 360px;
-    // height: fit-content;
+     height: fit-content;
     // min-height: 350px;
     margin-top: 30px;
     margin-left: 20px;

src/views/dashBoard/box/index.vue

@@ -41,7 +41,7 @@ const rightWidth = computed(()=>{
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 20px;
+    height: 28px;
     width: 400px;
     @media screen and (max-width: 768px){
         width: 80vw;
@@ -51,7 +51,7 @@ const rightWidth = computed(()=>{
 .left{
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
     height: 100%;
     background-color:#ee4040 ;
     font-weight: bold; 
@@ -61,7 +61,7 @@ const rightWidth = computed(()=>{
 .right {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: end;
     height: 100%;
     background-color:#98c2f2 ;
     font-weight: bold;

src/views/dashBoard/index.vue

@@ -230,8 +230,8 @@ const LineData = reactive({
   ids: [] as any
 })
 const PublicOfferX1 = ref<string[]>([])
-const PublicOfferY1 = ref<string[]>([])
+const PublicOfferY1 = ref<any[]>([])
-const PublicOfferZ1 = ref<string[]>([])
+const PublicOfferZ1 = ref<any[]>([])
 const PublicOfferX = ref<string[]>([])
 const PublicOfferY = ref<string[]>([])
 const InitialAllocationPublic = ref('')
@@ -259,19 +259,19 @@ const setBar = async () => {
   const ipoID = localStorage.getItem('ipoID')
   const result = await getIpo(ipoID as string)
   // console.log(ipoID,(result as any).data[0]);
-  console.log(ipoID, (result as any).data[0]);
+   if((result as any).data[0].graph!=null){
+    PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
+    return moment(item.dateTime).format('MM/DD')
+  })
+  PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
+    return item.poApplicationQuantity / 1000000;
+  });
+  PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
+    const number=(item.poApplicationQuantity) / item.poSharesInitial
+    return number.toFixed(2);
+  });
   
-  //  if((result as any).data[0].graph!=null){
+  }
-  //   PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
-  //   return moment(item.dateTime).format('MM/DD')
-  // })
-  // PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
-  //   return item.poApplicationQuantity / 1000000;
-  // });
-  // PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
-  //   return (item.poApplicationQuantity) / item.poSharesInitial;
-  // });
-  // }
   const amount = Number(initialpublic.value) + Number(initialinstituational.value);
   InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
 
@@ -280,7 +280,7 @@ const setBar = async () => {
 }
 onMounted(() => {
   // setBarRight();
-  setBar()
+  setBar()//real
 })
 const getdatatime = async () => {
   const res = await getHomeIpo(1)
@@ -377,6 +377,11 @@ function calendarAddLine() {
         span.style.backgroundColor = line.color
         item.dom.appendChild(span)
         Arr[index].push({ dom: item.dom })
+        if(768 >= document.documentElement.clientWidth){
+          span.style.width = '48px'
+        span.style.height = '8px'
+        span.style.borderRadius = "0px 10px 10px 0px"
+}
       }
       return {}
     })
@@ -384,23 +389,34 @@ function calendarAddLine() {
   console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
   Arr.forEach((item: any) => {
     if (item.length) {
-      console.log(item[0].dom.children[1], item.length)
       item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
       item[0].dom.children[1].style.width = "42px"
       item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
       item[item.length - 1].dom.children[1].style.width = "42px"//结束时间添加样式
       item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
+      if(768 >= document.documentElement.clientWidth){
+        item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
+      item[0].dom.children[1].style.width = "19px"
+      item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
+      item[item.length - 1].dom.children[1].style.width = "23px"//结束时间添加样式
+      item[item.length - 1].dom.children[1].style.borderRadius = "0px 10px 10px 0px";
+      }
     }
+    
     if (item.length == 1) {//如果长度为1，单独设置样式
       // console.log('item',item)
       item[0].dom.children[1].style.marginLeft = "11px"
       item[0].dom.children[1].style.width = "42px"
       item[0].dom.children[1].style.borderRadius = "10px";
+      if(768 >= document.documentElement.clientWidth){
+        item[0].dom.children[1].style.marginLeft = "7px"
+      item[0].dom.children[1].style.width = "30px"
+      item[0].dom.children[1].style.borderRadius = "10px";
+      }
     }
   })
 
 }
-
 function init() {
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(main.value);
@@ -425,7 +441,7 @@ function init() {
     yAxis: [
       {
         type: 'value',
-        max: 9,
+        max: Math.floor(PublicOfferY1.value.sort().reverse()[0]*2),
         min: 0,
         splitNumber: 9,
         boundaryGap: [0.2, 0.2],
@@ -439,9 +455,10 @@ function init() {
         type: 'value',
         name: proxy.$t('dashboard.Ratio'),
         min: 0,
-        max: 1.8,
+        max: Math.floor(PublicOfferZ1.value.sort().reverse()[0]*1.5),
         splitNumber: 9,
         alignTicks: true,
+        scale:true
       }
     ],
 
@@ -451,6 +468,8 @@ function init() {
         name: proxy.$t('dashboard.Ratio'),
         type: 'line',
         data: PublicOfferZ1.value,
+        yAxisIndex: 1,
+        
         // data:PublicOfferY.value,
 
         // markLine:{
@@ -636,6 +655,12 @@ drawer.value = data
 
 </script>
 <style lang="scss" scoped>
+// @media screen and (max-width: 768px){
+//   .desmidle{
+//     font-size: 15px;
+//   }
+  
+// }
 .login1 {
   background-image: url("@/assets/1x/beijingtu.png");
   background-repeat: no-repeat;
@@ -682,7 +707,7 @@ drawer.value = data
     }
 
     .content {
-      width: 100%;
+      width: 120%;
       // height: 100vh;
       display: flex;
       flex-wrap: wrap;
@@ -701,6 +726,7 @@ drawer.value = data
 
       @media screen and (max-width: 768px) {
         flex-direction: column;
+        margin-top: 30px;
       }
 
       .pulic {
@@ -709,6 +735,9 @@ drawer.value = data
         justify-content: space-between;
         margin-left: 55px;
         align-items: flex-end;
+        @media screen and (max-width: 768px){
+          margin-left: 21px;
+        }
       }
 
       .pulic1 {
@@ -717,6 +746,9 @@ drawer.value = data
         justify-content: space-between;
         align-items: flex-end;
         margin-left: 35px;
+        @media screen and (max-width: 768px){
+          margin-left: 0px;
+        }
       }
 
       .pulic2 {
@@ -725,23 +757,26 @@ drawer.value = data
         justify-content: space-between;
         align-items: flex-end;
         margin-left: 5px;
+        @media screen and (max-width: 768px){
+          margin-left: -25px;
+          width: 85vw;
+        }
       }
 
       .public-left {
         display: flex;
         margin-top: 10px;
         // width:80px;
-        min-width: 80px;
+        //min-width: 80px;
         justify-content: space-between;
         color: #647c8b;
 
-
       }
 
       .public-left1 {
         display: flex;
         margin-top: 10px;
-        min-width: 120px;
+        //min-width: 120px;
         justify-content: space-between;
         color: #647c8b;
       }
@@ -835,6 +870,9 @@ drawer.value = data
         display: flex;
         flex-direction: row-reverse;
         // background-color: #20b109;
+        @media screen and (max-width: 768px){
+          font-size: 20px;
+        }
       }
 
       .yuan2 {
@@ -884,7 +922,7 @@ drawer.value = data
       }
 
       .topleft-bottom {
-        transform: translateY(-40px);
+        transform: translateY(-10px);
 
       }
 
@@ -895,7 +933,7 @@ drawer.value = data
       }
 
       .topright-p {
-        transform: translateY(-170%);
+        transform: translateY(-165%);
       }
 
       .p-1 {
@@ -946,7 +984,7 @@ drawer.value = data
       .p-4 {
         margin-top: 3px;
         margin-left: 50px;
-
+        font-size: 19px;
         @media screen and (max-width: 768px) {
           width: 80vw;
           transform: translateX(-6vw);
@@ -996,13 +1034,13 @@ drawer.value = data
 
       .content-topleft {
         width: 490px;
-        height: 530px;
+        height: 560px;
         background-color: #fff;
 
         @media screen and (max-width: 768px) {
-          width: 92vw;
+          width: 90vw;
           margin-left: 5vw;
-
+          height: 500px;
         }
 
         // background-color: red;
@@ -1023,7 +1061,7 @@ drawer.value = data
 
       .content-topright {
         width: 490px;
-        height: 530px;
+        height: 560px;
         background-color: #fff;
         margin-left: 20px;
 
@@ -1133,7 +1171,7 @@ drawer.value = data
   font-family: "Calibri";
 
   @media screen and (max-width: 768px) {
-    width: 71vw;
+    width: 75vw;
     margin-left: -4px;
   }
 }

src/views/dashBoard/nav/index.vue

@@ -71,7 +71,7 @@ const handDashBoard = () => {
         margin-top: 10px;
         margin-left: 20px;
         background-color: #fff;
-        font-size: 24px;
+        font-size: 21px;
         display: flex;
         align-items: center;
         color: #2B4A60;

src/views/login/components/Lang.vue

@@ -14,18 +14,30 @@ export default {
 
 <script lang="ts" setup>
 
-import { ref, defineExpose } from 'vue';
+import { ref, defineExpose ,inject} from 'vue';
 import { getCurrentInstance } from 'vue'
 import { ipoStore } from "@/stores/ipo"
+import { useRouter } from "vue-router";
 const store = ipoStore()
+const route=useRouter()
 const { proxy } = (getCurrentInstance() as any)
+
 const showLang = ref(false)
+const reflashRouter=inject('reflashRouter') as Function
+const IpoReflash=()=>{
+    if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
+        reflashRouter()
+    }
+}
 const handleLang1 = () => {
     if (proxy.$i18n.locale = 'en') {
         proxy.$i18n.locale = 'en'
     }
     store.setLocale(1)
+    IpoReflash()
+
 }
+
 const handleLang2 = () => {
     if (proxy.$i18n.locale = 'zhCt') {
         proxy.$i18n.locale = 'zhCt'
@@ -33,12 +45,14 @@ const handleLang2 = () => {
 
     }
     store.setLocale(2)
+    IpoReflash()
 }
 const handleLang3 = () => {
     if (proxy.$i18n.locale = 'zhCn') {
         proxy.$i18n.locale = 'zhCn'
     }
     store.setLocale(3)
+    IpoReflash()
 }
 defineExpose({
     showLang

src/views/login/components/Main.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="bigbox" @click="handleclick(props.data)">
         <Aimage :src="props.data.logolinks" :number="props.data.number"/>
-        
         <div class="list">
             <div class="list-content">
                 <div class="top">
@@ -18,7 +17,6 @@
                         <span>{{ item.name }}</span>
                         <el-icon class="icon1" v-if="item.icon">
                             <Check v-if="item.icon == 1" />
-                            <!-- <Filter v-if="item.icon==2" /> -->
                             <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
                         </el-icon>
                     </h5>
@@ -122,7 +120,7 @@ const code22 = ref('')
 
 //     }
 // })
-onUpdated(() => {
+onMounted(() => {
     var obj = {
         25: proxy.$t('home.DealInitiated'),
         30: proxy.$t('home.PublicOfferClosed'),
@@ -136,10 +134,8 @@ onUpdated(() => {
         80: proxy.$t('home.Suspended'),
         90: proxy.$t('home.Cancelled'),
     }
-     console.log('&&&&', props.data.status)
+    // console.log('&&&&', props.data.status)
     const stron = props.data.status
-
-
     if (isValidKey(stron, obj)) {
         code22.value = obj[stron];
         // console.log('kkkk',stron,obj[stron])
@@ -155,6 +151,7 @@ onUpdated(() => {
             return { ...item, icon: 0 }
         }
     })
+
     // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
     function isValidKey(
         key: string | number | symbol,
@@ -164,28 +161,12 @@ onUpdated(() => {
     }
 
 })
+
 const cardDetail = (e: any) => {
     e.stopPropagation();
     expand.value = !expand.value;
 }
-// const fontstyle = computed((status)=>{
-//     if(status == 80 ){
-//         return {'color':'red'}
-//     }
-//     if(status == 90){
-//         return {'color':'red'}
-//     }
-// })
-// function fontstyle(status:any){
-//     console.log(status);
 
-//     if(status == 80 ){
-//         return {'color':'red'}
-//     }
-//     if(status == 90){
-//         return {'color':'red'}
-// }
-// }
 //路由传参
 const handleclick = (item: any) => {
     localStorage.setItem('ipoID', item.ipoID)
@@ -206,7 +187,7 @@ const handleclick = (item: any) => {
 
     width: 270px;
     // height: 360px;
-    // height: fit-content;
+    height: fit-content;
     // min-height: 350px;
     margin-top: 30px;
     margin-left: 20px;

src/views/login/components/Select.vue

@@ -2,7 +2,25 @@
     <div class="selectWrap" v-if="showSelect" @click="preVant">
         <div class="box">
             <div class="content">
-                <div class="title">IPO Status</div>
+                <li>
+                    <div class="word" @click="checkAll(1)">
+                        {{ $t(i18n.global.t('home.title.All')) }}
+                        <div class="check">
+                            <el-icon   v-if="checkedAll==1">
+                            <Check></Check>
+                        </el-icon>
+                        </div>
+                    </div>
+                    <div class="word"  @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
+                        <div class="check">
+                            <el-icon   v-if="checkedAll==2">
+                            <Check></Check>
+                        </el-icon>
+                        </div>
+                        
+                    </div>
+                </li>
+                <div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
                 <li>
                     <div class="word" v-for="item in obj.ipoStatus" :key="item.key" @click="ipoStatusSlect(item.key)">
                         <div class="check">
@@ -13,7 +31,7 @@
                         <span>{{ item.value }}</span>
                     </div>
                 </li>
-                <div class="title">tradingCurrency</div>
+                <div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
                 <li>
                     <div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
                         @click="tradingCurrencySlect(item.key)">
@@ -25,10 +43,54 @@
                         <span>{{ item.value }}</span>
                     </div>
                 </li>
+                <div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
+                <li>
+                    <div class="word" v-for="item in obj.offeringType" :key = "item.key" @click="offeringType(item.key)">
+                        <div class="check">
+                            <el-icon v-if="item.isSelcted">
+                                <Check />
+                            </el-icon>
+                        </div>
+                        <span>{{ item.value }}</span>
+                    </div>
+                </li>
+                <div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
+                <li>
+                    <div class="word" v-for="item in obj.SecuritiestobeListed" :key = "item.key" @click="SecuritiestobeListed(item.key)">
+                        <div class="check">
+                            <el-icon v-if="item.isSelcted">
+                                <Check />
+                            </el-icon>
+                        </div>
+                        <span>{{ item.value }}</span>
+                    </div>
+                </li>
+                <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
+                <li>
+                    <div class="word" v-for="item in obj.ListingPlatform" :key = "item.key" @click="ListingPlatform(item.key)">
+                        <div class="check">
+                            <el-icon v-if="item.isSelcted">
+                                <Check />
+                            </el-icon>
+                        </div>
+                        <span>{{ item.value }}</span>
+                    </div>
+                </li>
+                <div class="title">{{ $t(i18n.global.t('home.title.ListingType')) }}</div>
+                <li>
+                    <div class="word" v-for="item in obj.ListingType" :key = "item.key" @click="ListingType(item.key)">
+                        <div class="check">
+                            <el-icon v-if="item.isSelcted">
+                                <Check />
+                            </el-icon>
+                        </div>
+                        <span>{{ item.value }}</span>
+                    </div>
+                </li>
             </div>
             <div class="footer">
-                <button @click="confirm">Apply</button>
+                <button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
-                <button @click="confirm">Cancel</button>
+                <button @click="confirm">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>
 
             </div>
         </div>
@@ -44,7 +106,12 @@ export default {
 
 <script lang="ts" setup>
 import { ref, defineExpose, reactive } from 'vue';
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+type keyType='ipoStatus'|'tradingCurrency'|'offeringType'|'SecuritiestobeListed'|'ListingPlatform'|'ListingType'
+const { proxy } = (getCurrentInstance() as any)
 const showSelect = ref(false)
+const checkedAll=ref(0)
 const confirm = () => {
     showSelect.value = false;
 }
@@ -54,48 +121,48 @@ const preVant = (e: any) => {
 const obj = reactive({
     ipoStatus: [{
         key: 25,
-        value: 'Deal Initiated',
+        value: proxy.$t('home.DealInitiated'),
         isSelcted: false
     },
     {
         key: 30,
-        value: 'Public Offer Closed',
+        value: proxy.$t('home.PublicOfferClosed'),
         isSelcted: true
     }, {
         key: 35,
-        value: 'Application Validated',
+        value: proxy.$t('home.ApplicationValidated'),
         isSelcted: true
     }, {
         key: 45,
-        value: 'Allotment Confirmed',
+        value: proxy.$t('home.AllotmentConfirmed'),
         isSelcted: false
     }, {
         key: 50,
-        value: 'Money Settlement',
+        value: proxy.$t('home.MoneySettlement'),
         isSelcted: false
     }, {
         key: 55,
-        value: 'Allocation Confirmed',
+        value: proxy.$t('home.AllocationConfirmed'),
         isSelcted: false
     }, {
         key: 60,
-        value: 'Placing Approved',
+        value: proxy.$t('home.placingApproved'),
         isSelcted: false
     }, {
         key: 65,
-        value: 'Allotment Results Approved',
+        value: proxy.$t('home.AllotmentResultsApproved'),
         isSelcted: false
     }, {
         key: 70,
-        value: 'Trading Started',
+        value: proxy.$t('home.TradingStarted'),
         isSelcted: false
     }, {
         key: 80,
-        value: 'Suspended',
+        value: proxy.$t('home.Suspended'),
         isSelcted: false
     }, {
         key: 90,
-        value: 'Cancelled',
+        value: proxy.$t('home.Cancelled'),
         isSelcted: false
     }],
     tradingCurrency: [
@@ -114,7 +181,125 @@ const obj = reactive({
             value: 'United States Dollar',
             isSelcted: false
         }
-    ]
+    ],
+    offeringType:[{
+        key:'1',
+        value:proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
+        isSelcted: false
+    },{
+        key:'2',
+        value:proxy.$t('ipo.TypeofListing.Byplacingonly'),
+        isSelcted: false
+    },{
+        key:'3',
+        value:proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
+        isSelcted: false
+    },{
+        key:'4',
+        value:proxy.$t('ipo.TypeofListing.Byintroduction'),
+        isSelcted: false
+    },
+    {
+        key:'5',
+        value:proxy.$t('ipo.TypeofListing.TransferfromGEM'),
+        isSelcted: true
+    }
+],
+SecuritiestobeListed:[{
+    key:'1',
+    value:proxy.$t('ipo.TypeofListing.Ordinaryshares'),
+    isSelcted: false
+},{
+        key:'2',
+        value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
+        isSelcted: false
+    },{
+        key:'3',
+        value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
+        isSelcted: false
+    },{
+        key:'4',
+        value:proxy.$t('ipo.TypeofListing.Preferenceshares'),
+        isSelcted: false
+    },
+    {
+        key:'5',
+        value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
+        isSelcted: true
+    },
+    {
+        key:'6',
+        value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
+        isSelcted: true
+    },
+    {
+        key:'7',
+        value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
+        isSelcted: true
+    },
+    {
+        key:'8',
+        value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
+        isSelcted: true
+    },
+    {
+        key:'99',
+        value:proxy.$t('ipo.TypeofListing.Other'),
+        isSelcted: false
+    }
+],
+ListingPlatform:[{
+    key:'1',
+    value:proxy.$t('home.Mainboard'),
+    isSelcted: false
+},{
+    key:'2',
+    value:proxy.$t('home.GEM'),
+    isSelcted: false
+}],
+ListingType:[{
+    key:'1',
+    value:proxy.$t('ipo.TypeofListing.Ordinaryshares'),
+    isSelcted: false
+},{
+        key:'2',
+        value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
+        isSelcted: false
+    },{
+        key:'3',
+        value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
+        isSelcted: false
+    },{
+        key:'4',
+        value:proxy.$t('ipo.TypeofListing.Preferenceshares'),
+        isSelcted: false
+    },
+    {
+        key:'5',
+        value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
+        isSelcted: true
+    },
+    {
+        key:'6',
+        value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
+        isSelcted: true
+    },
+    {
+        key:'7',
+        value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
+        isSelcted: true
+    },
+    {
+        key:'8',
+        value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
+        isSelcted: true
+    },
+    {
+        key:'99',
+        value:proxy.$t('ipo.TypeofListing.Other'),
+        isSelcted: false
+    }
+]
 })
 const ipoStatusSlect = (key: number) => {
     obj.ipoStatus = obj.ipoStatus.map((item: any) => {
@@ -132,6 +317,56 @@ const tradingCurrencySlect = (key: string) => {
         return item
     })
 }
+const offeringType = (key: string) => {
+    obj.offeringType = obj.offeringType.map((item: any) => {
+        if (item.key == key) {
+            return { ...item, isSelcted: !item.isSelcted }
+        }
+        return item
+    })
+}
+const SecuritiestobeListed = (key: string) => {
+    obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
+        if (item.key == key) {
+            return { ...item, isSelcted: !item.isSelcted }
+        }
+        return item
+    })
+}
+const ListingPlatform = (key: string) => {
+    obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
+        if (item.key == key) {
+            return { ...item, isSelcted: !item.isSelcted }
+        }
+        return item
+    })
+}
+const ListingType = (key: string) => {
+    obj.ListingType = obj.ListingType.map((item: any) => {
+        if (item.key == key) {
+            return { ...item, isSelcted: !item.isSelcted }
+        }
+        return item
+    })
+}
+const checkAll = (number:number)=>{
+    if(checkedAll.value&&checkedAll.value==number){
+        checkedAll.value=0;
+    }else{
+        checkedAll.value=number;
+        selectAll(number as 1|2)
+    }
+  
+}
+function selectAll(all:1|2){
+    // obj['ipoStatus']
+    var boolean=all==1?true:false;
+    Object.keys(obj).forEach((item:string)=>{
+        obj[item as keyType]=obj[item as keyType].map(element=>{
+            return {...element,isSelcted:boolean} as any;
+        })
+    })
+}
 defineExpose({
     showSelect
 })
@@ -140,7 +375,7 @@ defineExpose({
 <style lang="scss" scoped>
 .selectWrap {
     width: 800px;
-    height: 800px;
+    height: 820px;
     background-color: #fff;
     border-radius: 20px;
     position: fixed;
@@ -161,8 +396,8 @@ defineExpose({
 
     .content {
         .title {
-            font-size: 16px;
+            font-size: 18px;
-            color: #8C979B;
+            color: #879db2;
             margin-top: 10px;
         }
 
@@ -177,9 +412,9 @@ defineExpose({
                 border-radius: 20px;
                 // width: 50px;
                 height: 20px;
-                background-color: #F2F0F5;
+                background-color: #eff1f4;
                 padding: 5px 15px 5px 10px;
-                color: #6A7686;
+                color: #879db2;
                 display: flex;
                 justify-content: space-between;
                 cursor: pointer;
@@ -208,7 +443,7 @@ defineExpose({
             border: none;
             font-weight: 600;
             background-color: #fff;
-            color: #334B57;
+            color: #557795;
             padding: 10px 20px 10px 20px;
 
             &:hover {

src/views/login/modelComponents/Drawer.vue

@@ -62,12 +62,19 @@ export default {
 
 <script lang="ts" setup>
 import { ref } from "vue"
-import { getCurrentInstance, onUnmounted } from 'vue'
+import { getCurrentInstance, onUnmounted,inject } from 'vue'
 import { ipoStore } from "@/stores/ipo"
+import { useRouter } from "vue-router";
+const route=useRouter()
 const store = ipoStore()
 const { proxy } = (getCurrentInstance() as any)
 let emit = defineEmits(['childfn'])
-
+const reflashRouter=inject('reflashRouter') as Function
+const IpoReflash=()=>{
+    if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
+        reflashRouter()
+    }
+}
 const props = defineProps({
     drawer:Boolean
 })
@@ -100,15 +107,17 @@ const handleLang1 = () => {
     }
     store.setLocale(1)
      emit('childfn',!drawer)
+     IpoReflash()
 }
 const handleLang2 = () => {
     if (proxy.$i18n.locale = 'zhCt') {
         proxy.$i18n.locale = 'zhCt'
-
+        IpoReflash()
 
     }
     store.setLocale(2)
     emit('childfn',!drawer)
+    IpoReflash()
 }
 const handleLang3 = () => {
     if (proxy.$i18n.locale = 'zhCn') {
@@ -116,6 +125,7 @@ const handleLang3 = () => {
     }
     store.setLocale(3)
     emit('childfn',!drawer)
+    IpoReflash()
 }
 
 </script>

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*.vue", "shims.d.ts"],
+  "include": ["env.d.ts", "src/**/*.vue", "shims.d.ts",],
   "compilerOptions": {
     "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
 		"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,