Compare commits

...

5 Commits

Author SHA1 Message Date
zhuzhuxia233 9c231fc2c3 ipo页面移动端适配 2023-04-16 20:51:53 +08:00
zzy f569b35229 移动端日历页 2023-04-14 18:24:44 +08:00
zzy a68f3c92b9 移动端日历页 2023-04-14 18:15:01 +08:00
zhuzhuxia233 62d03da068 移动端dashboard弹窗处 2023-04-14 14:52:32 +08:00
zhuzhuxia233 19e0970bb3 ipostatus弹窗2 2023-04-13 23:34:27 +08:00
13 changed files with 560 additions and 137 deletions

BIN
dist.zip

Binary file not shown.

BIN
src/assets/1x/source13.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 293 B

View File

@ -48,6 +48,11 @@ export const staticRoutes: Array<RouteRecordRaw> = [
name: "Xsearchipo",
component: () => import("@/views/searchipo/index.vue")
},
{
path: "/IPOcalendar",
name: "Xsearchipo",
component: () => import("@/views/IpoCalendar/index.vue")
},
{
path: "/404",
name: "404",

View File

@ -7,7 +7,8 @@ export const ipoStore = defineStore({
id: 'app',
state: () => ({
//1代表英文 2代表繁体中文 3代表简体中文
locale:1
locale:1,
}),
getters: {
localeLang(state) {

View File

@ -4,13 +4,14 @@
<div class="title">{{ title }}</div>
<ul>
<li v-for="(item, index) in data.info" :key="index">
<div class="llrr">
<div class="left">
<div class="name">
<div v-if="item.name">{{ item.name }}</div>
<div v-if="item.name2" class="name2">{{ item.name2 }}</div>
</div>
<div v-if="item.infos">
<div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }}
</div>
<div class="info" v-else>-</div>
@ -25,6 +26,20 @@
<span v-else>{{ item.info }}</span>
</div>
</div>
</div>
</div>
<div class="right" v-if="item.name2 || item.info2 || item.info2s">
<div class="name">
<div v-if="item.name2" class="name2">{{ item.name2 }}</div>
</div>
<div v-if="item.info2 || item.info2s">
<div class="info" :style="{
height: item.info2s && '30px',
}">
<div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
<a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
<span v-else>{{ item.info2 }}</span>
@ -34,13 +49,22 @@
</div>
</div>
</div>
</div>
</div>
<div class="table" v-if="item.table">
<el-table :data="item.table.lists" stripe style="width: 100%;">
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
:label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red"
:label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px;"
:align="title.align" :key="index" />
</el-table>
</div>
<div class="Modeltable" v-if="item.table">
<el-table :data="item.table.lists" stripe style="width: 100%;">
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
:label="title.header" :width="320 * (title.width / 100)" :align="title.align" :key="index" />
</el-table>
</div>
</li>
@ -84,6 +108,38 @@ const data = defineProps<{ info: obj[], title: string }>()
border-left: 15px solid #98C2F2;
margin-bottom: 20px;
@media screen and (max-width: 768px) {
overflow: hidden;
}
.Modeltable {
display: none;
@media screen and (max-width: 768px) {
display: block;
margin-top: 10rem;
:deep(.el-table) {
color: #355D80;
}
:deep(.el-table thead) {
color: #355D80;
}
:deep(.cell) {
font-family: 'Calibri';
}
}
}
@media screen and (max-width: 768px) {
margin: 0 15rem 0 15rem;
// overflow: hidden;
}
// height: 600px;
.title {
font-size: 27px;
@ -99,19 +155,40 @@ const data = defineProps<{ info: obj[], title: string }>()
// flex-direction: column;
margin-top: 15px;
li {
margin-bottom: 25px;
.llrr {
display: flex;
@media screen and (max-width: 768px) {
flex-direction: column;
}
}
.left {
width: 450px;
}
.right {
width: 200px;
@media screen and (max-width: 768px) {
margin-top: 10rem;
}
}
.name {
color: #8AA1B6;
font-size: 12px;
position: relative;
.name2 {
position: absolute;
top: 0px;
left: 450px;
}
.name2 {}
}
@ -125,21 +202,22 @@ const data = defineProps<{ info: obj[], title: string }>()
position: relative;
font-family: "Calibri";
a {
color: #355D80;
}
.info2 {
position: absolute;
top: 0px;
left: 450px;
}
.info2 {}
}
.table {
width: 800px;
margin-top: 20px;
@media screen and (max-width: 768px) {
display: none;
}
:deep(.el-table) {
color: #355D80;
}
@ -149,8 +227,7 @@ const data = defineProps<{ info: obj[], title: string }>()
}
:deep(.cell) {
// max-width: 310px;
// color: red;
font-family: 'Calibri';
}
}

View File

@ -76,24 +76,33 @@ onUnmounted(() => {
// align-items: end;
position: relative;
margin-left: 15px;
@media screen and (max-width: 768px) {
display: none;
}
.second {
width: 32px;
height: 36px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
}
}
}
.lang {
position: absolute;
top: 50px;
left: -50px;
}
.headerWrap {
display: flex;
justify-content: space-between;
@media screen and (max-width: 768px) {
.left-1 {
@ -102,22 +111,27 @@ onUnmounted(() => {
width: 80vw;
}
}
.hleft {
display: flex;
justify-content: space-between;
width: fit-content;
position: relative;
.menu {
display: none;
@media screen and (max-width: 768px) {
display: block;
}
}
.title {
color: #2B4A60;
font-size: 45px;
font-weight: bolder;
@media screen and (max-width: 768px) {
font-size: 26rem;
transform: translateX(-60rem);
@ -141,6 +155,7 @@ onUnmounted(() => {
width: 18px;
height: 18px;
}
@media screen and (max-width: 768px) {
transform: translateY(-0.5vh);
}
@ -151,6 +166,7 @@ onUnmounted(() => {
display: flex;
height: 30px;
align-items: center;
.report {
font-size: 28px;
color: #1C3F56;

View File

@ -28,9 +28,13 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
.item {
margin-top: 18px;
display: flex;
// @media screen and (max-width: 768px){
// width: 100vw;
// }
@media screen and (max-width: 768px) {
margin-top: 0px;
width: 100vw;
overflow-x: scroll;
}
a {
// margin-left: 5px;
padding: 5px 10px;
@ -39,6 +43,8 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
font-weight: 700;
border-radius: 30px;
text-decoration: none;
width: fit-content;
white-space: nowrap;
&:hover {
background-color: #1C3F56;

View File

@ -341,8 +341,8 @@ const content = ref()
onMounted(
() => {
data.value = JSON.parse(localStorage.getItem('itemData') as string)
getreferencedata()
// text();
// getreferencedata()
text();
}
)
async function text() {
@ -687,11 +687,23 @@ function setTimeTable(mockRes: any) {
}
]
Timetable.value = Timetable.value.map(item => {
const isMobel = 768 >= document.documentElement.clientWidth;
item.table.lists = item.table.lists.map((item, index) => {
const { number, persent } = arr[0].table.lists[index]
return { ...item, number, persent }
})
if (isMobel) {
item.table.title = item.table.title.filter((element: any) => element.header)
item.table.title = item.table.title.map((element: any, index: number) => {
if (index == 0) {
element.width = 55;
}
return element
})
}
return { ...item, info: arr[0].info, info2: arr[0].info2 }
})
function timeTo(time: string | null | undefined) {
if (time) {
@ -762,6 +774,13 @@ function setDownLoad() {
padding-top: 30px;
height: 100%;
@media screen and (max-width: 768px) {
padding-top: 10rem;
width: 100vw;
overflow: hidden;
}
.leftbox {
width: 22%;
height: 100%;
@ -776,6 +795,13 @@ function setDownLoad() {
width: 78%;
height: 100%;
padding-left: 20px;
@media screen and (max-width: 768px) {
padding-top: 0px;
padding-left: 0px;
width: 100vw;
overflow: hidden;
}
}
.content {

View File

@ -0,0 +1,260 @@
<template>
<div class="right">
<div class="right-top">
<img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
<img src="@/assets/1x/1x/source1.png" class="icon2" />
<h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
</div>
<div class="right-bottom">
<el-calendar ref="calendar" v-model="dayValue">
<template #header="{ date }">
<el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png">
</el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span>
<el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png">
</el-button>
</template>
<!-- <template #date-cell="{ data }">
</template> -->
</el-calendar>
</div>
<div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "ipocalendar",
};
</script>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date())
const calendar = ref()
const Eventdata = ref([])
const selectDate = (val: string) => {
calendar.value.selectDate(val)
}
const showMounth = (date: any) => {
const arr = date.split(" ")
if (arr.length == 3) {
return arr[2]
} else if (arr.length == 4) {
return arr[2] + " " + arr[3]
}
}
onMounted(async () => {
var day = moment(Date.now()).format("YYYY-MM-DD")
const result = await getEventData(day);
setEventdata((result as any).data)
})
const setEventdata = (EventD: any) => {
Eventdata.value = EventD.map((item: any) => {
const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
return {
logo: '-',
listPlatform1: listPlatform,
name: companyEngFull + ";" + companyChiFull,
number: stkCode
}
})
}
const backRouter = () => {
proxy.$router.go(-1)
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
.right {
width: 100vw;
box-sizing: border-box;
height: 100%;
padding-bottom: 80px;
background-color: #1f4055;
z-index: 1;
border: #1f4055 1px solid;
.right-top {
display: flex;
// margin-left: 40px;
margin-top: 20rem;
.top-title {
text-align: center;
display: inline-block;
font-size: 25rem;
color: #ffffff;
margin-left: 10px;
}
.icon1 {
width: 25rem;
height: 25rem;
margin-left: 30rem;
}
.icon2 {
width: 25rem;
height: 25rem;
margin-left: 10rem;
}
}
.right-bottom {
width: 100vw;
background-color: #ffffff;
height: 400px;
margin-top: 25px;
// margin-left: 20px;
// transform: translateX(-50rem);
.month {
font-size: 25rem;
color: #000000;
font-weight: bold;
}
}
.right-bottom1 {
margin-left: 5vw;
width: 90vw;
background-color: #ffffff;
height: 40vh;
margin-top: 150px;
// margin-left: 20px;
// text-align: center;
// line-height: 500px;
display: flex;
justify-content: center;
align-items: center;
.right-bottom-title1 {
color: #1f4055;
font-size: 20px;
align-items: center;
}
li {
color: #000000
}
}
}
.right-bottom1 {
width: 420px;
background-color: #ffffff;
height: 50vh;
margin-top: 150px;
// margin-left: 20px;
// text-align: center;
// line-height: 500px;
display: flex;
justify-content: center;
align-items: center;
.right-bottom-title1 {
color: #1f4055;
font-size: 20px;
align-items: center;
}
li {
color: #000000
}
}
:deep(.el-button--small) {
border: none
}
:deep(.el-calendar__body) {
background-color: #e8ebee;
}
:deep(.el-calendar) {
width: 100vw;
font-family: "Calibri";
}
:deep(.el-calendar-table td) {
border: none;
text-align: center;
}
:deep(.el-calendar .el-calendar-table .el-calendar-day) {
padding: 0px;
text-align: center;
line-height: 33px;
font: 13px 'Poppins-Regular';
background-color: rgb(255, 255, 255);
height: 33px;
border: none;
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
// font-family: "Calibri"
}
:deep(.el-calendar-table thead) {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
background-color: rgb(255, 255, 255);
border: none;
font-family: "Calibri"
}
:deep(.el-calendar-table td.is-selected) {
background-color: #e8ebee;
}
:deep(.el-calendar-table td.is-today .el-calendar-day) {
color: black;
background-color: #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
// background-color: #e36466;
border: 5px solid #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
color: black;
}
:deep(.is-selected) {
color: red;
}
}
</style>

View File

@ -1,13 +1,9 @@
<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">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" >
</div>
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
</div>
@ -47,7 +43,7 @@ import Lang from "@/views/login/components/Lang.vue";
import { conforms } from 'lodash';
const { proxy } = (getCurrentInstance() as any)
const value = ref(true)
const drawer = ref(false)
const lang = ref()
const handleShowLang=(e:any)=>{
console.log(1111)
@ -64,7 +60,11 @@ onUnmounted(() => {
document.documentElement.onclick = null
})
const props = defineProps({
time: [String, Number]
time: [String, Number],
openDrawer:{
required:true,
type:Function
}
})
const handlesearch = ()=>{
proxy.$router.push("/home")
@ -72,8 +72,9 @@ const handlesearch = ()=>{
const handleDrawer = (done: () => void) => {
done();
}
const openDrawer = () => {
drawer.value = true;
const drawShow = () => {
console.log(1111);
props.openDrawer();
}
</script>

View File

@ -1,13 +1,16 @@
<template>
<div class="login1">
<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="wrap w">
<div class="leftbox">
<Item :data="data" />
<Nav />
</div>
<div class="rightbox">
<Header :time="datatime" />
<Header :time="datatime" :openDrawer="openDrawer"/>
<div class="content">
<div class="content-topleft">
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
@ -148,6 +151,7 @@
</div>
</div>
</div>
</template>
<script lang="ts">
@ -168,11 +172,19 @@ import moment from 'moment';
import i18n from '@/locales'
import { ipoStore } from "@/stores/ipo"
import { getCurrentInstance, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { getDataFromId } from "@/api/mock/home";
const drawer = ref(false)
const handleDrawer = (done: () => void) => {
done();
}
const openDrawer = () => {
drawer.value = true;
}
const { proxy } = (getCurrentInstance() as any)
// console.log('getCurrentInstance()proxy:', proxy)
const store = ipoStore()
const main = ref() // 使refDOM使main.value
const main1 = ref(); // 使refDOM使main.value
const main2 = ref();
@ -227,36 +239,39 @@ const FinalAllocationPublic = ref('')
const InitialAllocationInstitutional = ref('')
const FinalAllocationInstitutional = ref('')
const setBarRight = async () => {
const result = await getDataFromId('bar')
const ipoID = '00314';
const index = result.findIndex((item: any) => item.ipoID == ipoID);
const graph = result[index].graph;
PublicOfferX.value = graph.map((item: any) => {
return moment(item.dateTime).format('MM-DD')
})
PublicOfferY.value = graph.map((item: any) => {
return item.poApplicationQuantity;
});
const amount = Number(initialpublic.value) + Number(initialinstituational.value);
InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
// const result = await getDataFromId('bar')
// const ipoID = '00314';
// const index = result.findIndex((item: any) => item.ipoID == ipoID);
// const graph = result[index].graph;
// PublicOfferX.value = graph.map((item: any) => {
// return moment(item.dateTime).format('MM-DD')
// })
// PublicOfferY.value = graph.map((item: any) => {
// return item.poApplicationQuantity;
// });
// const amount = Number(initialpublic.value) + Number(initialinstituational.value);
// InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
init();
// InitialAllocationInstitutional.value = Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
// init();
}
const setBar = async () => {
const ipoID = localStorage.getItem('ipoID')
const result = await getIpo(ipoID as string)
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;
});
// 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) => {
// return (item.poApplicationQuantity) / item.poSharesInitial;
// });
// }
const amount = Number(initialpublic.value) + Number(initialinstituational.value);
InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
@ -264,8 +279,8 @@ const setBar = async () => {
init();
}
onMounted(() => {
setBarRight();//bar
// setBar()//
// setBarRight();
setBar()
})
const getdatatime = async () => {
const res = await getHomeIpo(1)
@ -274,13 +289,13 @@ const getdatatime = async () => {
}
const getreferencedata = async () => {
//---mock
const result1 = await getDataFromId('bar');
const res = result1[0];
// const result1 = await getDataFromId('bar');
// const res = result1[0];
//---mock
const ipoID = localStorage.getItem('ipoID')
// const result = await getIpo(ipoID as string)
// const res=(result as any).data[0];
const result = await getIpo(ipoID as string)
const res = (result as any).data[0];
// console.log(res);
const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;

View File

@ -107,12 +107,14 @@ const props = defineProps({
trading: "",
logolinks: "",
status: 0,
listingDate: ""
listingDate: "",
ipoID:0
}
}
}
})
const code22 = ref('')
onUpdated(() => {
var obj = {
@ -161,7 +163,9 @@ const cardDetail = (e: any) => {
}
//
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.number)
localStorage.setItem('ipoID', item.ipoID)
console.log(item);
localStorage.setItem('itemData', JSON.stringify(item))
router.push({
name: 'Xdashboard',

View File

@ -1,6 +1,6 @@
<template>
<div class="wrap">
<div class="imgWrap">
<div class="wrapddd">
<div class="imgWrap22222">
<img src="@/assets/1x/1x/source8.png" alt="menu" >
</div>
<div class="nav">
@ -62,10 +62,24 @@ export default {
<script lang="ts" setup>
import { ref } from "vue"
import { getCurrentInstance, onUnmounted } from 'vue'
const { proxy } = (getCurrentInstance() as any)
const state = ref(1)
// const drawer = ref(true)
const setState = (number: number) => {
state.value = number;
if(number == 1){
proxy.$router.push("/home")
}
if(number == 2){
proxy.$router.push("/dashboard")
}
if(number == 3){
proxy.$router.push("/IPO")
}
if(number == 4){
proxy.$router.push("/IPOcalendar")
}
}
// const openDrawer = () => {
// drawer.value = false;
@ -73,18 +87,16 @@ const setState = (number: number) => {
</script>
<style lang="scss" scoped>
.wrap {
.wrapddd {
width: 80vw;
transform: translateX(-20rem);
.imgWrap {
display: flex;
flex-direction: column;
.imgWrap22222 {
margin-top: 30rem;
width: 25rem;
height: 20rem;
margin-left: 15rem;
// margin-left: 15rem;
img {
width: 100%;
height: 100%;