fini-ui/src/views/login/components/Main.vue

<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: "",
                ipoID:0
            }
        }
    }
})


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.ipoID)
    console.log(item);
    
    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>