iopProject

2023-04-12 14:40:19 +08:00
commit 54bc2204dc
133 changed files with 35706 additions and 0 deletions
@@ -0,0 +1,189 @@
+<template>
+    <div class="wrapEvent">
+        <div class="header">
+            <div class="c">
+
+            </div>
+            <div class="h">
+                <div class="font">
+                    <!-- <span :icon="Bell"></span> -->
+                    <el-icon>
+                        <Bell />
+                    </el-icon>
+                </div>
+                <div class="headertitle">
+                    <span class="new" v-if="store.$state.locale != 1">新上市</span>
+                    <span class="newEn" v-if="store.$state.locale == 1">New</span>
+                </div>
+            </div>
+
+        </div>
+        <div class="content">
+            <li v-for="(item, index) in data.data" :key="index">
+                <span>{{platformTo(item.listPlatform1) }}</span>
+                <span>{{ item.logo }}</span>
+                <span>{{ store.$state.locale == 1 ? item.name.split(";")[0] : item.name.split(";")[1] }} </span>
+                <span class="number">({{ item.number }})</span>
+            </li>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XEvent",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, defineProps, onUpdated } from "vue";
+import {
+    Bell
+} from '@element-plus/icons-vue'
+import { ipoStore } from "@/stores/ipo"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+const { proxy } = (getCurrentInstance() as any)
+interface obj {
+    logo: string,
+    listPlatform1: string,
+    name: string,
+    number: string | number
+}
+const store = ipoStore();
+const data = defineProps<{ data: obj[] }>()
+// var obj = {
+//             1: proxy.$t('home.Mainboard'),
+//             2: proxy.$t('home.GEM')
+//         }
+//         data.data.forEach(function(item){
+//             if (isValidKey(item.listPlatform1, obj)) {
+//             item.listPlatform1 = obj[item.listPlatform1]
+//         }
+//         })
+        
+//         function isValidKey(
+//             key: string | number | symbol,
+//             object: object
+//         ): key is keyof typeof object {
+//             return key in object;
+//         }
+const platformTo=(listPlatform1:string)=>{
+    var str=""
+    var obj={
+        1: proxy.$t('home.Mainboard'),
+        2: proxy.$t('home.GEM')
+    }
+    if (isValidKey(listPlatform1, obj)) {
+      const code = obj[listPlatform1]
+
+      str = code;
+    }
+    function isValidKey(
+      key: string | number | symbol,
+      object: object
+    ): key is keyof typeof object {
+      return key in object;
+    }
+    return str
+}
+
+</script>
+
+<style lang="scss" scoped>
+.wrapEvent {
+    // margin-top: 20px;
+    padding-left: 0px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    border-top: 6px solid #D3DDE4;
+    border-right: 6px solid #D3DDE4;
+    border-left: 3px solid #D3DDE4;
+    border-bottom: 2px solid #D3DDE4;
+    box-sizing: border-box;
+
+    .header {
+        margin-top: 4px;
+        position: relative;
+        // background-color: red;
+        width: 100%;
+        height: 45px;
+
+        .c {
+            width: 30px;
+            height: 35px;
+            background-color: #DA8B2B;
+            transform: rotateX(26deg) rotateY(108deg);
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+
+        .h {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            font-size: 14px;
+            // width: 80px;
+            padding-left: 10px;
+            padding-right: 10px;
+            height: 35px;
+            background-color: #F3B72B;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .font {
+                // color: #fff;
+                padding-top: 1.5px;
+                font-size: 14px;
+                // background-color: red;
+                width: 10px;
+                height: 10px;
+                transform: translateY(-3px);
+                margin-right: 5px;
+            }
+
+            .headertitle {
+                .new {
+                    font-size: 16px;
+                }
+
+                .newEn {
+                    font-size: 20px;
+                }
+            }
+        }
+
+    }
+
+    // /取消滚动条样式
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    .content {
+        margin-left: 22px;
+        border-left: 3px solid #EEEFF1;
+        height: 100%;
+        padding-left: 25px;
+        overflow: scroll;
+
+
+
+        li {
+            line-height: 50px;
+            color: #888F95;
+            border-bottom: 2px solid #EDEDED;
+            font-size: 19px;
+            .number {
+                color: #9FA4A7;
+                font-weight: 450;
+            }
+        }
+    }
+
+}
+</style>
@@ -0,0 +1,73 @@
+<template>
+    <div class="wrap1" v-if="showLang">
+        <li @click="handleLang1">English</li>
+        <li @click="handleLang2">繁體中文</li>
+        <li @click="handleLang3">简体中文</li>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XLang",
+};
+</script>
+
+<script lang="ts" setup>
+
+import { ref, defineExpose } from 'vue';
+import { getCurrentInstance } from 'vue'
+import { ipoStore } from "@/stores/ipo"
+const store = ipoStore()
+const { proxy } = (getCurrentInstance() as any)
+const showLang = ref(false)
+const handleLang1 = () => {
+    if (proxy.$i18n.locale = 'en') {
+        proxy.$i18n.locale = 'en'
+    }
+    store.setLocale(1)
+}
+const handleLang2 = () => {
+    if (proxy.$i18n.locale = 'zhCt') {
+        proxy.$i18n.locale = 'zhCt'
+
+
+    }
+    store.setLocale(2)
+}
+const handleLang3 = () => {
+    if (proxy.$i18n.locale = 'zhCn') {
+        proxy.$i18n.locale = 'zhCn'
+    }
+    store.setLocale(3)
+}
+defineExpose({
+    showLang
+})
+
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+    width: 140px;
+    // height: 150px;
+    background-color: #fff;
+    border: 1px solid #A1A1A1;
+    border-radius: 8px;
+    color: #20435B;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    position: relative;
+    z-index: 1;
+
+    li {
+        text-align: center;
+        line-height: 50px;
+    }
+
+    li:hover {
+        color: blue;
+        cursor: pointer;
+    }
+}
+</style>
@@ -0,0 +1,299 @@
+<template>
+    <div class="bigbox" @click="handleclick(props.data)">
+        <div class="title">
+            <img v-lazy="props.data.logolinks" />
+        </div>
+        <div class="list">
+            <div class="list-content">
+                <div class="top">
+                    <h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
+                    </h4>
+                    <el-icon class="icon1" @click="cardDetail">
+                        <ArrowUp v-if="expand" />
+                        <ArrowDown v-else />
+                    </el-icon>
+                </div>
+                <h4>{{ props.data.number }}</h4>
+                <div v-if="expand" class="details">
+                    <h5 v-for="(item, index) in detailsItem" :key="index">
+                        <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>
+
+                </div>
+                <h5 v-else>{{ code22 }}</h5>
+
+                <h4>HKD {{ props.data.HKD }}</h4>
+                <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
+                    $t(i18n.global.t('home.offerpricerange'))
+                }}</h6>
+                <h5>{{ props.data.time }}</h5>
+                <h6>{{ props.data.listingDate ?
+                    $t(i18n.global.t('home.CommencementofTradeDate')) :
+                    $t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
+                }}</h6>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'XMain',
+};
+</script>
+<script lang="ts" setup>
+import { size } from 'lodash';
+import { ref, onMounted, onUpdated } from 'vue'
+import { ipoStore } from "@/stores/ipo"
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import logo from '@/assets/Snipaste.png'
+import { useRouter } from 'vue-router';
+const { proxy } = (getCurrentInstance() as any)
+const store = ipoStore();
+const currentDate = ref(new Date())
+const expand = ref(false);
+
+const router = useRouter()
+const detailsItem = ref([
+    {
+        name: proxy.$t('home.DealInitiated'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.PublicOfferClosed'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.ApplicationValidated'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.AllotmentConfirmed'),
+        icon: 0
+    }
+    , {
+        name: proxy.$t('home.MoneySettlement'),
+        icon: 0
+    },
+    {
+        name: proxy.$t('home.AllocationConfirmed'),
+        icon: 0
+    }, {
+        name: proxy.$t('home.placingApproved'),
+        icon: 0
+    }, {
+        name: proxy.$t('home.AllotmentResultsApproved'),
+        icon: 0
+    }, {
+        name: proxy.$t('home.TradingStarted'),
+        icon: 0
+    }
+])
+const props = defineProps({
+    data: {
+        type: Object,
+        default: function () {
+            return {
+                HKD: "",
+                number: 0,
+                price: "",
+                time: "",
+                title: "",
+                trading: "",
+                logolinks: "",
+                status: 0,
+                listingDate: ""
+            }
+        }
+    }
+})
+
+const code22 = ref('')
+onUpdated(() => {
+    var obj = {
+        25: proxy.$t('home.DealInitiated'),
+        30: proxy.$t('home.PublicOfferClosed'),
+        35: proxy.$t('home.ApplicationValidated'),
+        45: proxy.$t('home.AllotmentConfirmed'),
+        50: proxy.$t('home.MoneySettlement'),
+        55: proxy.$t('home.AllocationConfirmed'),
+        60: proxy.$t('home.placingApproved'),
+        65: proxy.$t('home.AllotmentResultsApproved'),
+        70: proxy.$t('home.TradingStarted'),
+        80: proxy.$t('home.Suspended'),
+        90: proxy.$t('home.Cancelled'),
+    }
+    // console.log('&&&&', props.data.status)
+    const stron = props.data.status
+
+    if (isValidKey(stron, obj)) {
+        code22.value = obj[stron];
+        // console.log('kkkk',stron,obj[stron])
+    }
+    var tag = true;
+    detailsItem.value = detailsItem.value.map(item => {
+        if (code22.value == item.name && tag) {
+            tag = false;
+            return { ...item, icon: 2 }
+        } else if (tag) {
+            return { ...item, icon: 1 }
+        } else {
+            return { ...item, icon: 0 }
+        }
+    })
+    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
+    function isValidKey(
+        key: string | number | symbol,
+        object: object
+    ): key is keyof typeof object {
+        return key in object;
+    }
+
+})
+const cardDetail = (e: any) => {
+    e.stopPropagation();
+    expand.value = !expand.value;
+}
+//路由传参
+const handleclick = (item: any) => {
+    localStorage.setItem('ipoID', item.number)
+    localStorage.setItem('itemData', JSON.stringify(item))
+    router.push({
+        name: 'Xdashboard',
+        params: { data: JSON.stringify(item) }
+    },
+    )
+
+}
+</script>
+
+<style lang="scss" scoped>
+.bigbox {
+
+    width: 270px;
+    // height: 360px;
+    height: fit-content;
+    min-height: 350px;
+    margin-top: 30px;
+    margin-left: 20px;
+    background-color: #e7efec;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid #DDE2E6;
+    cursor: pointer;
+
+    // font-family: "Calibri";
+    // @media screen and (max-width: 768px){
+    //     width: 270rem;
+    // height: 360rem;
+    // }
+    .title {
+        background-color: #fff;
+        height: 120px;
+        line-height: 120px;
+        font-size: 40px;
+        color: #fff;
+        overflow: hidden;
+        position: relative;
+        font-family: "Calibri";
+
+        // @media screen and (max-width: 768px){
+        //     font-size: 80px;
+        // }
+        img {
+            max-height: 100%;
+            max-width: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .list {
+        // height: 150px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        font-family: "Calibri";
+
+        .list-content {
+            margin-top: 10px;
+            width: 230px;
+
+            // height: 100%;
+            .details {
+                .icon1 {
+                    margin-left: 3px;
+                    transform: translateY(2.5px);
+                }
+            }
+
+            h4 {
+                font-size: 20px;
+                color: #3b6181;
+                margin-bottom: 8px;
+                font-weight: 600;
+                font-family: "Calibri";
+            }
+
+            h5 {
+                font-size: 16px;
+                color: #4b6d8a;
+                margin-bottom: 8px;
+                font-weight: 400;
+                font-family: "Calibri";
+            }
+
+            h6 {
+                font-size: 12px;
+                color: #5e7e98;
+                margin-bottom: 8px;
+                // font-family: "Calibri";
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .icon {
+                @media screen and (max-width: 768px) {
+                    width: 13rem;
+                    height: 13rem;
+                }
+
+                width: 13px;
+                height: 13px;
+            }
+        }
+    }
+}
+
+.bigbox:hover {
+    //   background-color: red;
+    box-shadow: 10px 15px 10px #9A9A9A;
+}
+
+@media screen and (max-width: 768px) {
+
+    .bigbox {
+
+        width: 76vw;
+        min-height: 310rem;
+        height: fit-content;
+
+        margin-top: 14rem !important;
+        cursor: pointer;
+
+    }
+
+
+}
+</style>
@@ -0,0 +1,97 @@
+<template>
+    <div class="wrap1" v-if="showLang" @click="fn" >
+        <li >
+            <el-checkbox v-model="checked1" label="IPO Status" text-color="blue" />
+         </li>
+         <li >
+            <el-checkbox v-model="checked2" label="Trading Currency" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked3" label="Offering Type" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked4" label="Securities to be Listed" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked5" label="Relaunch" /> 
+         </li>
+         <li >
+            <el-checkbox v-model="checked6" label="Listing Platform" /> 
+         </li>
+         <li >
+
+            <el-checkbox v-model="checked7" label="Listing Type" /> 
+         </li>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XSearchCup",
+};
+</script>
+
+<script lang="ts" setup>
+
+import { ref, defineExpose } from 'vue';
+
+const showLang = ref(false)
+const checked1 = ref(false)
+const checked2 = ref(false)
+const checked3 = ref(true)
+const checked4 = ref(true)
+const checked5 = ref(false)
+const checked6 = ref(true)
+const checked7 = ref(true)
+defineExpose({
+    showLang
+})
+const fn=(e:any)=>{
+    console.log('阻止')
+    e.stopPropagation();
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap1 {
+    width: fit-content;
+    // height: 150px;
+    background-color: #fff;
+    border: 1px solid #A1A1A1;
+    border-radius: 4px;
+
+
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-right: 5px;
+    padding-bottom: 10px;
+    position: relative;
+    z-index: 1;
+    li {
+        line-height: 50px;
+        display: flex;
+        :deep(.el-checkbox__label){
+            display: block ;
+            font-family: "Calibri";
+            color: #1C3F56;
+            font-weight: 580;
+            font-size: 12px;
+            width: 90px;
+            white-space:pre-wrap;
+            overflow: hidden;
+        }
+        :deep(.el-checkbox__inner:hover){
+            border-color:#000000;
+        }
+        :deep(.el-checkbox__input.is-checked .el-checkbox__inner ){
+             background-color: #000000;
+             border-color:#000000;
+        }
+        span{
+            font-size: 12px;
+        }
+    }
+
+
+}
+</style>