iopProject
This commit is contained in:
zhuzhuxia233
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<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 />
|
||||
</el-drawer>
|
||||
<div class="left">
|
||||
<div class="left-1">
|
||||
<div class="menu">
|
||||
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
|
||||
</div>
|
||||
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="search" @click="handlesearch">
|
||||
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
|
||||
<li class="show">
|
||||
<span>Show Value</span>
|
||||
<el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "XHeader",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import Drawer from '@/views/login/modelComponents/Drawer.vue'
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const value = ref(true)
|
||||
const drawer = ref(false)
|
||||
const props = defineProps({
|
||||
time: [String, Number]
|
||||
})
|
||||
const handlesearch = ()=>{
|
||||
proxy.$router.push("/home")
|
||||
}
|
||||
const handleDrawer = (done: () => void) => {
|
||||
done();
|
||||
}
|
||||
const openDrawer = () => {
|
||||
drawer.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headerWrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 40px;
|
||||
transform: translateY(-20px);
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
flex-direction: column;
|
||||
.left-1{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
@media screen and (max-width: 768px){
|
||||
justify-content: space-between;
|
||||
width: 100vw;
|
||||
align-items:center;
|
||||
}
|
||||
.menu{
|
||||
display: none;
|
||||
@media screen and (max-width: 768px){
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #2B4A60;
|
||||
font-size: 45px;
|
||||
font-weight: 900;
|
||||
@media screen and (max-width: 768px){
|
||||
font-size: 26rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
margin-top: 6px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 20px;
|
||||
@media screen and (max-width: 768px){
|
||||
width: 100vw;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
.time {
|
||||
color: #435F70;
|
||||
@media screen and (max-width: 768px){
|
||||
float: right;
|
||||
font-size: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
margin-top: 5px;
|
||||
text-align: right;
|
||||
color: #27485E;
|
||||
font-weight: 600;
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-switch__action) {
|
||||
background-color: #E86666;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
font-size: 15rem;
|
||||
margin-top: 13rem;
|
||||
transform: translateX(200rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="bigbox" @click="handleclick(props.data)">
|
||||
<div class="title">
|
||||
<img :src="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" />
|
||||
<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=[
|
||||
{
|
||||
name:proxy.$t('home.DealInitiated'),
|
||||
icon:1
|
||||
},
|
||||
{
|
||||
name:proxy.$t('home.PublicOfferClosed'),
|
||||
icon:1
|
||||
},
|
||||
{
|
||||
name:proxy.$t('home.ApplicationValidated'),
|
||||
icon:1
|
||||
},
|
||||
{
|
||||
name:proxy.$t('home.AllotmentConfirmed'),
|
||||
icon:2
|
||||
}
|
||||
, {
|
||||
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])
|
||||
}
|
||||
// 以下函数解决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,78 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="left" :style="{width: leftWidth}" >{{ leftNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
|
||||
</div>
|
||||
<div class="right" :style="{width: rightWidth}">
|
||||
{{ rightNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'XBox',
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from '@vue/reactivity';
|
||||
|
||||
const props = defineProps({
|
||||
leftNumber: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
rightNumber:
|
||||
{
|
||||
type: Number, required: true,
|
||||
},
|
||||
|
||||
}
|
||||
)
|
||||
const leftWidth = computed(()=>{
|
||||
return (props.leftNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
|
||||
})
|
||||
const rightWidth = computed(()=>{
|
||||
return (props.rightNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 20px;
|
||||
width: 400px;
|
||||
@media screen and (max-width: 768px){
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color:#ee4040 ;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color:#98c2f2 ;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* .left {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.right {
|
||||
border-radius: 0 5px 5px 0;
|
||||
} */
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="navWrap">
|
||||
<li @click="handleHome">
|
||||
<img src="@/assets/1x/source10.png" />
|
||||
|
||||
<span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
|
||||
</li>
|
||||
<li @click="handDashBoard">
|
||||
<img src="@/assets/1x/source5.png" />
|
||||
|
||||
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
|
||||
</li>
|
||||
<li @click="handleIpo">
|
||||
<img src="@/assets/1x/source2.png" />
|
||||
|
||||
<span >{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "XNav",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import router from '@/router';
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
|
||||
// import { onMounted } from 'vue';
|
||||
// import { useRoute } from 'vue-router'
|
||||
// const route = useRoute()
|
||||
// onMounted(()=>{
|
||||
// const item = route.params.data;
|
||||
// })
|
||||
|
||||
const handleIpo = () => {
|
||||
// localStorage.setItem('ipoID',item.ipoID)
|
||||
// router.push({
|
||||
// name: 'XIPO',
|
||||
// params: { data: JSON.stringify(item) }
|
||||
// },)
|
||||
proxy.$router.push("/IPO")
|
||||
}
|
||||
const handleHome = () => {
|
||||
proxy.$router.push("/home")
|
||||
}
|
||||
const handDashBoard = () => {
|
||||
proxy.$router.push("/dashBoard")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navWrap {
|
||||
width: 270px;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
background-color: #fff;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2B4A60;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user