diff --git a/src/views/dashBoard/index.vue b/src/views/dashBoard/index.vue
index 96a6c4d..fa63e95 100644
--- a/src/views/dashBoard/index.vue
+++ b/src/views/dashBoard/index.vue
@@ -4,7 +4,7 @@
{{ $t(i18n.global.t('dashboard.PublicOfferAllotment')) }}
@@ -80,20 +80,20 @@
-
- {{ $t(i18n.global.t('dashboard.Public')) }}
- {{ InitialAllocationPublic }}
+
+ {{ $t(i18n.global.t('dashboard.Public')) }}
+ {{ InitialAllocationPublic }}
-
+
{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
-
- {{ $t(i18n.global.t('dashboard.Institutional')) }}
+
+ {{ $t(i18n.global.t('dashboard.Institutional')) }}
{{ InitialAllocationInstitutional }}
@@ -103,7 +103,7 @@
{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}
-
+
{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
@@ -117,10 +117,10 @@
- {{ $t(i18n.global.t('dashboard.Public')) }}
- {{ FinalAllocationPublic }}
+ {{ $t(i18n.global.t('dashboard.Public')) }}
+ {{ FinalAllocationPublic }}
-
+
{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
@@ -128,10 +128,10 @@
- {{ $t(i18n.global.t('dashboard.Institutional')) }}
- {{ FinalAllocationInstitutional }}
-
-
+
{{ $t(i18n.global.t('dashboard.Institutional')) }}
+
{{ FinalAllocationInstitutional }}
+
+
{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
@@ -167,9 +167,9 @@ import { getIpo, getHomeIpo } from '@/api/reqIpo/ipo'
import moment from 'moment';
import i18n from '@/locales'
import { ipoStore } from "@/stores/ipo"
-import { getCurrentInstance,onUnmounted} from 'vue'
+import { getCurrentInstance, onUnmounted } from 'vue'
-import {getDataFromId} from "@/api/mock/home";
+import { getDataFromId } from "@/api/mock/home";
const { proxy } = (getCurrentInstance() as any)
// console.log('getCurrentInstance()中的proxy:', proxy)
const store = ipoStore()
@@ -183,8 +183,8 @@ onMounted(
() => {
const obj = JSON.parse(localStorage.getItem('itemData') as string);
- // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
- data.value=obj;
+ // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
+ data.value = obj;
getreferencedata()
getdatatime()
},
@@ -217,55 +217,55 @@ const LineData = reactive({
lines: [] as lineObje[],
ids: [] as any
})
-const PublicOfferX1=ref
([])
-const PublicOfferY1=ref([])
-const PublicOfferZ1=ref([])
-const PublicOfferX=ref([])
-const PublicOfferY=ref([])
-const InitialAllocationPublic=ref('')
-const FinalAllocationPublic=ref('')
-const InitialAllocationInstitutional=ref('')
+const PublicOfferX1 = ref([])
+const PublicOfferY1 = ref([])
+const PublicOfferZ1 = ref([])
+const PublicOfferX = ref([])
+const PublicOfferY = ref([])
+const InitialAllocationPublic = ref('')
+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 + "%";
-
-// 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;
+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;
});
- 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 + "%";
+
+ 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;
});
-
- 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 + "%";
+
+ 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();
- }
-onMounted(()=>{
- //setBarRight();//假的bar接口
- setBar()//真的接口
+}
+onMounted(() => {
+ setBarRight();//假的bar接口
+ // setBar()//真的接口
})
const getdatatime = async () => {
const res = await getHomeIpo(1)
@@ -274,17 +274,17 @@ 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;
+ const { bookOpenDate, bookCloseDate, allotmentDate, siInputDate, listingDate } = res;
+
-
startDate.value = bookOpenDate;
endDate.value = bookCloseDate
// console.log('$$', allotmentDate, allotmentDate)
@@ -296,7 +296,7 @@ const getreferencedata = async () => {
calendarAddLine()
initialpublic.value = res.poSharesInitial
ApplicationQuantity.value = res.poApplicationQuantity
- subscriptionRatio.value= res.poApplicationQuantity/res.poSharesInitial
+ subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
initialinstituational.value = res.ioSharesInitial
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
@@ -305,8 +305,8 @@ const getreferencedata = async () => {
code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
finalpublic.value = res.poSharesFinal
code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
- FinalAllocationPublic.value=Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
- FinalAllocationInstitutional.value=Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
+ FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
+ FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
quantity.value = res.overallIpoShares
init1()
init2()
@@ -398,14 +398,14 @@ function init() {
y2: 200
},
tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- }
- },
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
xAxis: {
// data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
- data:PublicOfferX1.value
+ data: PublicOfferX1.value
},
yAxis: [
{
@@ -437,7 +437,7 @@ function init() {
type: 'line',
data: PublicOfferZ1.value,
// data:PublicOfferY.value,
-
+
// markLine:{
// symbol:['none','none'],
// label:{
@@ -457,9 +457,9 @@ function init() {
// }
},
{
- name:proxy.$t('dashboard.QuantityMillion'),
- type:'bar',
- data:PublicOfferY1.value,
+ name: proxy.$t('dashboard.QuantityMillion'),
+ type: 'bar',
+ data: PublicOfferY1.value,
barWidth: '40%',
itemStyle: {
color: '#f6caae'
@@ -469,9 +469,9 @@ function init() {
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
- window.onresize=()=>{
+ window.onresize = () => {
myChart.resize();
- }
+ }
}
function init1() {
var myChart1 = echarts.init(main1.value);
@@ -497,15 +497,15 @@ function init1() {
borderWidth: 5,
borderColor: '#fff'
},
- cursor:'default'
+ cursor: 'default'
}
]
}
myChart1.setOption(option1);
//屏幕自适应
- window.onresize=()=>{
+ window.onresize = () => {
myChart1.resize();
- }
+ }
};
function init2() {
var myChart2 = echarts.init(main2.value);
@@ -530,14 +530,14 @@ function init2() {
borderWidth: 5,
borderColor: '#fff'
},
- cursor:'default'
+ cursor: 'default'
}
]
};
myChart2.setOption(option2);
- window.onresize=()=>{
+ window.onresize = () => {
myChart2.resize();
- }
+ }
}
const data = ref({
title: "FINI TESTING COMP",
@@ -625,65 +625,80 @@ const showMounth = (date: any) => {
background-size: cover;
height: 1200px;
font-family: "Calibri";
- @media screen and (max-width: 768px){
- height: 2500px;
- }
+
+ @media screen and (max-width: 768px) {
+ height: 2500px;
+ }
}
.wrap {
display: flex;
padding-top: 30px;
+
.leftbox {
width: 22%;
height: 100%;
position: relative;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
display: none;
}
-
-
+
+
}
.rightbox {
width: 78%;
height: 100%;
- @media screen and (max-width: 768px){
- width: 100vw;
- transform: translateY(-30rem);
- }
+
+ @media screen and (max-width: 768px) {
+ width: 100vw;
+ transform: translateY(-30rem);
+ }
+
.content {
width: 100%;
// height: 100vh;
display: flex;
flex-wrap: wrap;
- .persent{
- color:#9FA0BF;
+
+ .persent {
+ color: #9FA0BF;
font-weight: 400;
font-size: 16px;
font-family: 'Calibri';
// margin-left: 14px;
}
- .desmidle{
+
+ .desmidle {
margin: 0 10px 0 10px;
}
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
flex-direction: column;
}
+
.pulic {
display: flex;
- justify-content: space-around;
+ // justify-content: space-around;
+ justify-content: space-between;
margin-left: 55px;
+ align-items: flex-end;
}
.pulic1 {
display: flex;
- justify-content: space-around;
+ // justify-content: space-around;
+ justify-content: space-between;
+ align-items: flex-end;
margin-left: 35px;
}
.pulic2 {
display: flex;
- justify-content: space-around;
+ // justify-content: space-around;
+ justify-content: space-between;
+ align-items: flex-end;
margin-left: 5px;
}
@@ -694,6 +709,8 @@ const showMounth = (date: any) => {
min-width: 80px;
justify-content: space-between;
color: #647c8b;
+
+
}
.public-left1 {
@@ -744,49 +761,55 @@ const showMounth = (date: any) => {
background-color: #2f5597;
border-radius: 50%;
}
-.yuan-title{
- font-size: 19px;
- font-family: 'Calibri';
- color: #8e9eaa;
-}
+
+ .yuan-title {
+ font-size: 19px;
+ font-family: 'Calibri';
+ color: #8e9eaa;
+ }
+
.yuan-title3 {
margin-left: 75px;
color: #5c6063;
font-size: 18px;
font-weight: 400;
display: flex;
- flex-direction: row-reverse;
- // background-color: #20b109;
+ flex-direction: row-reverse;
+ // background-color: #20b109;
}
+
.yuan-title3-1 {
margin-left: 52px;
color: #5c6063;
font-size: 18px;
font-weight: 400;
}
+
.yuan-title2 {
margin-left: 31px;
color: #5c6063;
font-size: 18px;
font-weight: 400;
display: flex;
- flex-direction: row-reverse;
- // background-color: #20b109;
+ flex-direction: row-reverse;
+ // background-color: #20b109;
}
+
.yuan-title2-1 {
margin-left: 53px;
color: #5c6063;
font-size: 18px;
font-weight: 400;
}
+
.yuan-title1 {
margin-left: 55px;
color: #516c7e;
font-weight: bold;
font-size: 25px;
display: flex;
- flex-direction: row-reverse;
- // background-color: #20b109;
+ flex-direction: row-reverse;
+ // background-color: #20b109;
}
.yuan2 {
@@ -842,8 +865,8 @@ const showMounth = (date: any) => {
.bottomleft-bouttom {
transform: translateY(-150px);
- // display: flex;
- // flex-direction: column;
+ padding-right: 40px;
+ padding-left: 30px;
}
.topright-p {
@@ -857,22 +880,26 @@ const showMounth = (date: any) => {
color: #415d6f;
justify-content: space-between;
width: 400px;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 80vw;
transform: translateX(-6vw);
font-size: 15rem;
}
}
- .p-2-2 {
- width: 28%;
- // margin-top: 20px;
- transform: translateY(5px);
- font-weight: 600;
- font-size: 23px;
- @media screen and (max-width: 768px){
+
+ .p-2-2 {
+ width: 28%;
+ // margin-top: 20px;
+ transform: translateY(5px);
+ font-weight: 600;
+ font-size: 23px;
+
+ @media screen and (max-width: 768px) {
font-size: 20rem;
}
- // }
+
+ // }
}
.p-3 {
@@ -883,7 +910,8 @@ const showMounth = (date: any) => {
margin-left: 50px;
font-size: 20px;
color: #415d6f;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 80vw;
transform: translateX(-6vw);
font-size: 16rem;
@@ -893,7 +921,8 @@ const showMounth = (date: any) => {
.p-4 {
margin-top: 3px;
margin-left: 50px;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 80vw;
transform: translateX(-6vw);
font-size: 15rem;
@@ -906,7 +935,8 @@ const showMounth = (date: any) => {
margin-right: 20px;
color: #7e929f;
font-size: 18px;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
font-size: 14rem;
transform: translateY(-2rem);
margin-right: 4rem;
@@ -933,8 +963,9 @@ const showMounth = (date: any) => {
font-size: 23px;
color: #2a4a5e;
font-family: 'Calibri';
+
@media screen and (max-width: 768px) {
- font-size: 20rem;
+ font-size: 20rem;
}
}
@@ -942,11 +973,13 @@ const showMounth = (date: any) => {
width: 490px;
height: 530px;
background-color: #fff;
+
@media screen and (max-width: 768px) {
- width: 90vw;
- margin-left: 5vw;
-
+ width: 90vw;
+ margin-left: 5vw;
+
}
+
// background-color: red;
.content-title {
font-size: 25px;
@@ -956,7 +989,8 @@ const showMounth = (date: any) => {
margin-left: 20px;
margin-top: 15px;
cursor: default;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
font-size: 21rem;
}
}
@@ -967,12 +1001,14 @@ const showMounth = (date: any) => {
height: 530px;
background-color: #fff;
margin-left: 20px;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 90vw;
height: 60vh;
margin-left: 5vw;
margin-top: 2vh;
}
+
.topright-title {
font-size: 25px;
margin: 5px;
@@ -988,10 +1024,11 @@ const showMounth = (date: any) => {
width: 490px;
height: 432px;
background-color: #fff;
- @media screen and (max-width: 768px){
- width: 90vw;
- margin-left: 5vw;
- margin-top: 2vh;
+
+ @media screen and (max-width: 768px) {
+ width: 90vw;
+ margin-left: 5vw;
+ margin-top: 2vh;
}
}
@@ -1001,10 +1038,11 @@ const showMounth = (date: any) => {
height: 432px;
background-color: #fff;
margin-left: 20px;
- @media screen and (max-width: 768px){
- width: 90vw;
- margin-left: 5vw;
- margin-top: 2vh;
+
+ @media screen and (max-width: 768px) {
+ width: 90vw;
+ margin-left: 5vw;
+ margin-top: 2vh;
}
}
@@ -1041,7 +1079,8 @@ const showMounth = (date: any) => {
font-size: 25px;
color: #fff;
font-weight: bold;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
font-size: 20rem;
font-weight: 400;
}
@@ -1051,7 +1090,8 @@ const showMounth = (date: any) => {
:deep(.el-calendar) {
--el-calendar-border: none;
cursor: default;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 80vw;
margin-left: 5vw;
}
@@ -1066,7 +1106,8 @@ const showMounth = (date: any) => {
width: 410px;
margin-left: 20px;
font-family: "Calibri";
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 71vw;
transform: translate(-4vw);
}
@@ -1078,10 +1119,11 @@ const showMounth = (date: any) => {
background-color: red !important;
padding-left: 10px 75px 27px !important;
cursor: default;
- @media screen and (max-width: 768px){
+
+ @media screen and (max-width: 768px) {
width: 80vw;
transform: translate(-4vw);
-
+
}
}
diff --git a/src/views/login/components/Select.vue b/src/views/login/components/Select.vue
new file mode 100644
index 0000000..6b4d16c
--- /dev/null
+++ b/src/views/login/components/Select.vue
@@ -0,0 +1,222 @@
+
+
+
+
+
IPO Status
+
+
+
+
+
+
+
+
{{ item.value }}
+
+
+
tradingCurrency
+
+
+
+
+
+
+
+
{{ item.value }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 7da3238..fe33d7e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,76 +1,76 @@