FINI
/
FINI_UI
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: FINI:9c231fc2c310e2a9e0bb9b34891de4aab4b4cb7f
Branches Tags
FINI:master
FINI:main
..
compare: FINI:254c5b08c3273b7ba858f4859f1ee3e9d258d50e
Branches Tags
FINI:main
FINI:master

No commits in common. "9c231fc2c310e2a9e0bb9b34891de4aab4b4cb7f" and "254c5b08c3273b7ba858f4859f1ee3e9d258d50e" have entirely different histories.
9c231fc2c3 ... 254c5b08c3

13 changed files with 137 additions and 560 deletions
Show Stats Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

BIN
src/assets/1x/source13.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 293 B

5
src/router/routes.ts
View File

@ -48,11 +48,6 @@ 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",

3
src/stores/ipo.ts
View File

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

107
src/views/IPO/components/IpoContent.vue
View File

@ -4,14 +4,13 @@
<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>
@ -26,20 +25,6 @@
<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>
@ -49,22 +34,13 @@
</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;"
:label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red"
: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>
@ -108,38 +84,6 @@ 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;
@ -155,40 +99,19 @@ 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 {}
.name2 {
position: absolute;
top: 0px;
left: 450px;
}
}
@ -202,22 +125,21 @@ const data = defineProps<{ info: obj[], title: string }>()
position: relative;
font-family: "Calibri";
a {
color: #355D80;
}
.info2 {}
.info2 {
position: absolute;
top: 0px;
left: 450px;
}
}
.table {
width: 800px;
margin-top: 20px;
@media screen and (max-width: 768px) {
display: none;
}
:deep(.el-table) {
color: #355D80;
}
@ -227,7 +149,8 @@ const data = defineProps<{ info: obj[], title: string }>()
}
:deep(.cell) {
// max-width: 310px;
// color: red;
font-family: 'Calibri';
}
}

16
src/views/IPO/components/IpoHeader.vue
View File

@ -76,33 +76,24 @@ 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{
@ -111,27 +102,22 @@ 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);
@ -155,7 +141,6 @@ onUnmounted(() => {
width: 18px;
height: 18px;
}
@media screen and (max-width: 768px){
transform: translateY(-0.5vh);
}
@ -166,7 +151,6 @@ onUnmounted(() => {
display: flex;
height: 30px;
align-items: center;
.report {
font-size: 28px;
color: #1C3F56;

12
src/views/IPO/components/IpoNav.vue
View File

@ -28,13 +28,9 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
.item {
margin-top: 18px;
display: flex;
@media screen and (max-width: 768px) {
margin-top: 0px;
width: 100vw;
overflow-x: scroll;
}
// @media screen and (max-width: 768px){
// width: 100vw;
// }
a {
// margin-left: 5px;
padding: 5px 10px;
@ -43,8 +39,6 @@ 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;

30
src/views/IPO/index.vue
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,23 +687,11 @@ 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) {
@ -774,13 +762,6 @@ 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%;
@ -795,13 +776,6 @@ 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 {

260
src/views/IpoCalendar/index.vue
View File

@ -1,260 +0,0 @@
<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>

19
src/views/dashBoard/Header/index.vue
View File

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

81
src/views/dashBoard/index.vue
View File

@ -1,16 +1,13 @@
<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" :openDrawer="openDrawer"/>
<Header :time="datatime" />
<div class="content">
<div class="content-topleft">
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
@ -151,7 +148,6 @@
</div>
</div>
</div>
</template>
<script lang="ts">
@ -172,19 +168,11 @@ 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() // 使用ref创建虚拟DOM引用，使用时用main.value
const main1 = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
const main2 = ref();
@ -239,39 +227,36 @@ 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)
// console.log(ipoID,(result as any).data[0]);
console.log(ipoID,(result as any).data[0]);
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;
});
// 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 + "%";
@ -279,8 +264,8 @@ const setBar = async () => {
init();
}
onMounted(() => {
// setBarRight();
setBar()
setBarRight();//假的bar接口
// setBar()//真的接口
})
const getdatatime = async () => {
const res = await getHomeIpo(1)
@ -289,13 +274,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;

8
src/views/login/components/Main.vue
View File

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

30
src/views/login/modelComponents/Drawer.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="wrapddd">
<div class="imgWrap22222">
<div class="wrap">
<div class="imgWrap">
<img src="@/assets/1x/1x/source8.png" alt="menu" >
</div>
<div class="nav">
@ -62,24 +62,10 @@ 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;
@ -87,16 +73,18 @@ const setState = (number: number) => {
</script>
<style lang="scss" scoped>
.wrapddd {
.wrap {
width: 80vw;
transform: translateX(-20rem);
display: flex;
flex-direction: column;
.imgWrap22222 {
.imgWrap {
margin-top: 30rem;
width: 25rem;
height: 20rem;
// margin-left: 15rem;
margin-left: 15rem;
img {
width: 100%;
height: 100%;