FINI
/
fini-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移动端dashbord调整

This commit is contained in:
zzy 2023-04-21 16:54:59 +08:00
parent 3eb07382ae
commit cd4544afb8
20 changed files with 499 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

14
src/App.vue
View File

@ -1,15 +1,23 @@
<template >
<el-config-provider :locale="store.localeLang">
<div class="login">
<router-view />
<router-view v-if="showRouter"/>
</div>
</el-config-provider>
</template>
<script lang="ts" setup>
import { defineComponent, ref, onBeforeMount, onMounted, watch } from 'vue'
import { defineComponent, ref, onBeforeMount, onMounted, watch ,provide} from 'vue'
import { ElConfigProvider } from 'element-plus'
import { ipoStore } from "@/stores/ipo"
const showRouter=ref(true)
const reflashRouter=()=>{
showRouter.value=false;
setTimeout(()=>{
showRouter.value=true
},1)
}
provide('reflashRouter',reflashRouter);
function isMobileFn() {
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
}
@ -24,8 +32,6 @@ const setFontSize = () => {
document.documentElement.style.fontSize = font + "px";
}
</script>
<style lang="scss" >

13
src/locales/en.ts
View File

@ -19,7 +19,18 @@ export default {
Mainboard:'Main board',
GEM:'GEM',
new:'New',
title:{
All:'All',
None:'None',
IPOStatus:'IPO Status',
TradingCurrency:'Trading Currency',
OfferingType:'Offering Type',
SecuritiestobeListed:'Securities to be Listed',
ListingPlatform:'Listing Platform',
ListingType:'Listing Type',
APPLY:'Apply',
Cancel:'Cancel'
}
},
dashboard:{
Home:'Home',

14
src/locales/zh-cn.ts
View File

@ -18,7 +18,19 @@ export default {
Cancelled:'取消',
Mainboard:'主板上市',
GEM:'创业板',
new:'新上市'
new:'新上市',
title:{
All:'全选',
None:'全不选',
IPOStatus:'首次公开招股状况',
TradingCurrency:'交易货币',
OfferingType:'招股类型',
SecuritiestobeListed:'拟上市证券',
ListingPlatform:'上市平台',
ListingType:'上市类型',
APPLY:'提交',
Cancel:'取消'
}
},
dashboard:{
Home:'主页',

14
src/locales/zh-ct.ts
View File

@ -18,7 +18,19 @@ export default {
Cancelled:'取消',
Mainboard:'主板上市',
GEM:'創業板',
new:'新上市'
new:'新上市',
title:{
All:'全選',
None:'全不選',
IPOStatus:'首次公開招股狀況',
TradingCurrency:'交易貨幣',
OfferingType:'招股類型',
SecuritiestobeListed:'擬上市證券',
ListingPlatform:'上市平台',
ListingType:'上市類型',
APPLY:'提交',
Cancel:'取消'
}
},
dashboard:{
Home:'主頁',

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

@ -187,7 +187,7 @@ const data = defineProps<{ info: obj[], title: string }>()
font-size: 12px;
position: relative;
.name2 {}
// .name2 {}
@ -207,7 +207,7 @@ const data = defineProps<{ info: obj[], title: string }>()
color: #355D80;
}
.info2 {}
// .info2 {}
}
.table {

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

@ -2,12 +2,12 @@
<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 :drawer = "drawer" @childfn="fn"/>
<Drawer :drawer="drawer" @childfn="fn" />
</el-drawer>
<div class="hleft">
<div class="left-1">
<img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
<img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
</div>
<div class="search" @click="handlesearch">
@ -50,7 +50,6 @@ const openDrawer = () => {
drawer.value = true;
}
const handleShowLang = (e: any) => {
console.log(1111)
e.stopPropagation()
lang.value.showLang = !lang.value.showLang
}
@ -60,8 +59,8 @@ onMounted(() => {
lang.value.showLang = false
}
})
function fn(data:any){
drawer.value = data
function fn(data: any) {
drawer.value = data
}
onUnmounted(() => {
document.documentElement.onclick = null
@ -69,11 +68,12 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
@media screen and (max-width: 768px){
.headerWrap{
@media screen and (max-width: 768px) {
.headerWrap {
margin-left: 18px;
}
}
.langWrap {
// position: absolute;
// // top:-20px;
@ -84,7 +84,7 @@ onUnmounted(() => {
margin-left: 15px;
@media screen and (max-width: 768px) {
display: none;
// display: none;
}
.second {
@ -103,6 +103,10 @@ onUnmounted(() => {
position: absolute;
top: 50px;
left: -50px;
@media screen and (max-width: 768px) {
left: -110px;
}
}
.headerWrap {
@ -124,6 +128,10 @@ onUnmounted(() => {
width: fit-content;
position: relative;
@media screen and (max-width: 768px) {
justify-content: flex-start;
}
.menu {
display: none;
@ -132,6 +140,7 @@ onUnmounted(() => {
vertical-align: middle;
width: 25px;
height: 20px;
}
}
@ -167,6 +176,8 @@ onUnmounted(() => {
@media screen and (max-width: 768px) {
transform: translateY(-0.5vh);
position: absolute;
right: 50px;
}
}
}

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

@ -11,7 +11,7 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineProps } from "vue"
import { ref, defineProps ,computed} from "vue"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
const { proxy } = (getCurrentInstance() as any)
@ -21,7 +21,7 @@ const scrollto = (index: number) => {
console.log(ref11)
props.scroll(ref11)
}
const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')])
const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')]))
</script>
<style lang="scss" scoped>

99
src/views/IPO/index.vue
View File

@ -6,7 +6,7 @@
<Nav :scroll="scrollTo" />
</div>
<div class="rightbox">
<IpoHeader />
<IpoHeader />
<IpoNav :scroll="scrollTo" />
<div class="content" ref="content">
<IpoContent ref="i0" :info="information" :title="$t('ipo.CompanyInformation')" />
@ -150,13 +150,15 @@ const Offerings = ref([
info: "100"
},
{
name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
info: "100,000",
// name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
// info: "100,000", 暂时不暂时的字段----
name: "",
info: "",
name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
info2: "10,000,000",
table: {
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel()?33:50, align: "right" },
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel()?38:50, align: "right" }],
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
lists: [
{
number: '1',
@ -184,18 +186,18 @@ const Offerings = ref([
name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
info: "5.00%"
},
{
name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
info: "inclusive"
},
{
name: proxy.$t('ipo.Offering.OverallotmentOption'),
info: "5.00%"
},
// {暂时不暂时的字段--------
// name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
// info: "inclusive"
// },
// {暂时不暂时的字段-------------
// name: proxy.$t('ipo.Offering.OverallotmentOption'),
// info: "5.00%"
// },
{
name: proxy.$t('ipo.Offering.DenominationTable'),
table: {
title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel()?35:50, align: "right" },
title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel() ? 35 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
lists: [
{
@ -274,10 +276,10 @@ const Timetable = ref([
info2: "09:00",
table: {
title: [
{ header: " ", content: "des",width: isMobel()?50: 43, align: "left" },
{ header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
{ width: 12 }, //通过加一段空结构来调整表头的位置
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel()?30: 20, align: "left" },
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel()?22: 20, align: "left" }],
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
lists: [
{
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
@ -342,9 +344,9 @@ const content = ref()
onMounted(
() => {
data.value = JSON.parse(localStorage.getItem('itemData') as string)
getreferencedata()
setDownLoad()
// text();
getreferencedata()
setDownLoad()
// text();
}
)
async function text() {
@ -366,7 +368,7 @@ const getreferencedata = async () => {
setTransaction((res as any).data[0])
setTimeTable((res as any).data[0])
}
function isMobel(){
function isMobel() {
return 768 >= document.documentElement.clientWidth;
}
function setInformation(mockRes: any) {
@ -423,11 +425,11 @@ function setOfferings(mockRes: any) {
{ info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
{ info: has_data(boardLot) },
{ info: keepTwoDecimalStr(poReallocationCap) },
{ info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(poSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(ioOfferSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
{ info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
{ info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
{ info: has_data(upsizeOption?.toFixed(2),"%") },
{ info: "-" },
{ info: keepTwoDecimalStr(overallotOption) },
{ info: has_data(upsizeOption?.toFixed(2), "%") },
// { info: "-" },
// { info: "-" },
{ table: denomTable }
]
// info2s: [has_data(ipoShares) , has_data(poSharesFinal) , has_data(ioOfferSharesFinal)],
@ -445,7 +447,7 @@ function setOfferings(mockRes: any) {
if (dataObj[index].table) {
filterObj.table = { title: item.table?.title, lists: [] }
filterObj.table.lists = dataObj[index].table.map((element: any) => {
if (index == 10) {
if (index == 8) {
function formatNumber(num: number | string) {
return num.toString().replace(/\d+/, function (n: string) {
return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
@ -597,7 +599,7 @@ function setTypeofListing(mockRes: any) {
{ info: has_data(nomValue), info2: nomCur as any },
{ info: listPlatform },
{ info: has_data(listSecurities) },]
// { info: has_data(listingCategories) }]
// { info: has_data(listingCategories) }]
TypeOfListing.value = TypeOfListing.value.map((item, index) => {
if (arr[index].info2) {
return { ...item, info: arr[index].info, info2: arr[index].info2 }
@ -615,7 +617,7 @@ function setAdvisers(mockRes: any) {
{ infos: filter(sponsors) },
{ infos: filter(legalSponsor) },
{ info: has_data(legalIssuer) },
{ infos: underwriters },
{ infos: filter(underwriters) },
{ infos: filter(advisers) },
{ infos: filter(overallCoordinators) },
{ infos: filter(distributors) },
@ -712,10 +714,18 @@ function setTimeTable(mockRes: any) {
})
function timeTo(time: string | null | undefined) {
if (time) {
return [moment(time).format("YYYY-MM-DD"), moment(time).format("HH:mm")]
return [moment(time).format("YYYY-MM-DD"), toEmpty(moment(time).format("HH:mm"))]
} else {
return ["-", "-"]
}
function toEmpty(time: string) {
//如果时间戳转换出来是00:00 就返回空
if (time == "00:00") {
return ""
} else {
return time
}
}
}
}
@ -752,24 +762,27 @@ function scrollTo(stron: string) {
}
}
async function setDownLoad (){
async function setDownLoad() {
const ipoID = localStorage.getItem('ipoID');
const res = await getIpo(ipoID as string)
const enHref = `${(res as any).data[0].pdfLink.eLink}`;
const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
Documents.value= [
{
name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
info: "ipo.pdf",
name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
info2: "ipo.pdf",
href: enHref,
href2:chinaHref
},
]
const enHref = `${(res as any).data[0].pdfLink.eLink}`;
const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
// if((res as any).data[0].pdfLink.eLink.length === 0){
// alert("该文件为空")
// }
Documents.value = [
{
name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
info: "ipo.pdf",
name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
info2: "ipo.pdf",
href: enHref,
href2: chinaHref
},
]
}
</script>
<style lang="scss" scoped>
// .login2 {

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

@ -203,7 +203,7 @@ const backRouter = () => {
}
:deep(.el-calendar-table){
margin-top: 20px;
width: 375px;
width: 100vw;
transform: translateX(-19px);
}
:deep(.el-calendar) {

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

@ -87,7 +87,6 @@ const drawShow = () => {
// align-items: end;
position: relative;
margin-left: 15px;
.second {
width: 32px;
@ -123,10 +122,10 @@ const drawShow = () => {
justify-content: space-between;
padding-top: 40px;
transform: translateY(-20px);
height: 50px;
@media screen and (max-width: 768px) {
flex-direction: column;
.left-1 {
display: flex;
justify-content: space-between;

2
src/views/dashBoard/Main.vue
View File

@ -187,7 +187,7 @@ const handleclick = (item: any) => {
width: 270px;
// height: 360px;
// height: fit-content;
height: fit-content;
// min-height: 350px;
margin-top: 30px;
margin-left: 20px;

6
src/views/dashBoard/box/index.vue
View File

@ -41,7 +41,7 @@ const rightWidth = computed(()=>{
display: flex;
align-items: center;
justify-content: space-between;
height: 20px;
height: 28px;
width: 400px;
@media screen and (max-width: 768px){
width: 80vw;
@ -51,7 +51,7 @@ const rightWidth = computed(()=>{
.left{
display: flex;
align-items: center;
justify-content: center;
justify-content: start;
height: 100%;
background-color:#ee4040 ;
font-weight: bold;
@ -61,7 +61,7 @@ const rightWidth = computed(()=>{
.right {
display: flex;
align-items: center;
justify-content: center;
justify-content: end;
height: 100%;
background-color:#98c2f2 ;
font-weight: bold;

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

@ -230,8 +230,8 @@ const LineData = reactive({
ids: [] as any
})
const PublicOfferX1 = ref<string[]>([])
const PublicOfferY1 = ref<string[]>([])
const PublicOfferZ1 = ref<string[]>([])
const PublicOfferY1 = ref<any[]>([])
const PublicOfferZ1 = ref<any[]>([])
const PublicOfferX = ref<string[]>([])
const PublicOfferY = ref<string[]>([])
const InitialAllocationPublic = ref('')
@ -259,19 +259,19 @@ 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]);
// 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;
// });
// }
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) => {
const number=(item.poApplicationQuantity) / item.poSharesInitial
return number.toFixed(2);
});
}
const amount = Number(initialpublic.value) + Number(initialinstituational.value);
InitialAllocationPublic.value = Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
@ -280,7 +280,7 @@ const setBar = async () => {
}
onMounted(() => {
// setBarRight();
setBar()
setBar()//real
})
const getdatatime = async () => {
const res = await getHomeIpo(1)
@ -377,6 +377,11 @@ function calendarAddLine() {
span.style.backgroundColor = line.color
item.dom.appendChild(span)
Arr[index].push({ dom: item.dom })
if(768 >= document.documentElement.clientWidth){
span.style.width = '48px'
span.style.height = '8px'
span.style.borderRadius = "0px 10px 10px 0px"
}
}
return {}
})
@ -384,23 +389,34 @@ function calendarAddLine() {
console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
Arr.forEach((item: any) => {
if (item.length) {
console.log(item[0].dom.children[1], item.length)
item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
item[0].dom.children[1].style.width = "42px"
item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
item[item.length - 1].dom.children[1].style.width = "42px"//结束时间添加样式
item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
if(768 >= document.documentElement.clientWidth){
item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
item[0].dom.children[1].style.width = "19px"
item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
item[item.length - 1].dom.children[1].style.width = "23px"//结束时间添加样式
item[item.length - 1].dom.children[1].style.borderRadius = "0px 10px 10px 0px";
}
}
if (item.length == 1) {//如果长度为1，单独设置样式
// console.log('item',item)
item[0].dom.children[1].style.marginLeft = "11px"
item[0].dom.children[1].style.width = "42px"
item[0].dom.children[1].style.borderRadius = "10px";
if(768 >= document.documentElement.clientWidth){
item[0].dom.children[1].style.marginLeft = "7px"
item[0].dom.children[1].style.width = "30px"
item[0].dom.children[1].style.borderRadius = "10px";
}
}
})
}
function init() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(main.value);
@ -425,7 +441,7 @@ function init() {
yAxis: [
{
type: 'value',
max: 9,
max: Math.floor(PublicOfferY1.value.sort().reverse()[0]*2),
min: 0,
splitNumber: 9,
boundaryGap: [0.2, 0.2],
@ -439,9 +455,10 @@ function init() {
type: 'value',
name: proxy.$t('dashboard.Ratio'),
min: 0,
max: 1.8,
max: Math.floor(PublicOfferZ1.value.sort().reverse()[0]*1.5),
splitNumber: 9,
alignTicks: true,
scale:true
}
],
@ -451,6 +468,8 @@ function init() {
name: proxy.$t('dashboard.Ratio'),
type: 'line',
data: PublicOfferZ1.value,
yAxisIndex: 1,
// data:PublicOfferY.value,
// markLine:{
@ -636,6 +655,12 @@ drawer.value = data
</script>
<style lang="scss" scoped>
// @media screen and (max-width: 768px){
// .desmidle{
// font-size: 15px;
// }
// }
.login1 {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
@ -682,7 +707,7 @@ drawer.value = data
}
.content {
width: 100%;
width: 120%;
// height: 100vh;
display: flex;
flex-wrap: wrap;
@ -701,6 +726,7 @@ drawer.value = data
@media screen and (max-width: 768px) {
flex-direction: column;
margin-top: 30px;
}
.pulic {
@ -709,6 +735,9 @@ drawer.value = data
justify-content: space-between;
margin-left: 55px;
align-items: flex-end;
@media screen and (max-width: 768px){
margin-left: 21px;
}
}
.pulic1 {
@ -717,6 +746,9 @@ drawer.value = data
justify-content: space-between;
align-items: flex-end;
margin-left: 35px;
@media screen and (max-width: 768px){
margin-left: 0px;
}
}
.pulic2 {
@ -725,23 +757,26 @@ drawer.value = data
justify-content: space-between;
align-items: flex-end;
margin-left: 5px;
@media screen and (max-width: 768px){
margin-left: -25px;
width: 85vw;
}
}
.public-left {
display: flex;
margin-top: 10px;
// width:80px;
min-width: 80px;
//min-width: 80px;
justify-content: space-between;
color: #647c8b;
}
.public-left1 {
display: flex;
margin-top: 10px;
min-width: 120px;
//min-width: 120px;
justify-content: space-between;
color: #647c8b;
}
@ -835,6 +870,9 @@ drawer.value = data
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
@media screen and (max-width: 768px){
font-size: 20px;
}
}
.yuan2 {
@ -884,7 +922,7 @@ drawer.value = data
}
.topleft-bottom {
transform: translateY(-40px);
transform: translateY(-10px);
}
@ -895,7 +933,7 @@ drawer.value = data
}
.topright-p {
transform: translateY(-170%);
transform: translateY(-165%);
}
.p-1 {
@ -946,7 +984,7 @@ drawer.value = data
.p-4 {
margin-top: 3px;
margin-left: 50px;
font-size: 19px;
@media screen and (max-width: 768px) {
width: 80vw;
transform: translateX(-6vw);
@ -996,13 +1034,13 @@ drawer.value = data
.content-topleft {
width: 490px;
height: 530px;
height: 560px;
background-color: #fff;
@media screen and (max-width: 768px) {
width: 92vw;
width: 90vw;
margin-left: 5vw;
height: 500px;
}
// background-color: red;
@ -1023,7 +1061,7 @@ drawer.value = data
.content-topright {
width: 490px;
height: 530px;
height: 560px;
background-color: #fff;
margin-left: 20px;
@ -1133,7 +1171,7 @@ drawer.value = data
font-family: "Calibri";
@media screen and (max-width: 768px) {
width: 71vw;
width: 75vw;
margin-left: -4px;
}
}

2
src/views/dashBoard/nav/index.vue
View File

@ -71,7 +71,7 @@ const handDashBoard = () => {
margin-top: 10px;
margin-left: 20px;
background-color: #fff;
font-size: 24px;
font-size: 21px;
display: flex;
align-items: center;
color: #2B4A60;

16
src/views/login/components/Lang.vue
View File

@ -14,18 +14,30 @@ export default {
<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { ref, defineExpose ,inject} from 'vue';
import { getCurrentInstance } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
const store = ipoStore()
const route=useRouter()
const { proxy } = (getCurrentInstance() as any)
const showLang = ref(false)
const reflashRouter=inject('reflashRouter') as Function
const IpoReflash=()=>{
if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
reflashRouter()
}
}
const handleLang1 = () => {
if (proxy.$i18n.locale = 'en') {
proxy.$i18n.locale = 'en'
}
store.setLocale(1)
IpoReflash()
}
const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt'
@ -33,12 +45,14 @@ const handleLang2 = () => {
}
store.setLocale(2)
IpoReflash()
}
const handleLang3 = () => {
if (proxy.$i18n.locale = 'zhCn') {
proxy.$i18n.locale = 'zhCn'
}
store.setLocale(3)
IpoReflash()
}
defineExpose({
showLang

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

@ -1,7 +1,6 @@
<template>
<div class="bigbox" @click="handleclick(props.data)">
<Aimage :src="props.data.logolinks" :number="props.data.number"/>
<div class="list">
<div class="list-content">
<div class="top">
@ -18,7 +17,6 @@
<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>
@ -122,7 +120,7 @@ const code22 = ref('')
// }
// })
onUpdated(() => {
onMounted(() => {
var obj = {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
@ -136,10 +134,8 @@ onUpdated(() => {
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}
console.log('&&&&', props.data.status)
// console.log('&&&&', props.data.status)
const stron = props.data.status
if (isValidKey(stron, obj)) {
code22.value = obj[stron];
// console.log('kkkk',stron,obj[stron])
@ -155,6 +151,7 @@ onUpdated(() => {
return { ...item, icon: 0 }
}
})
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
function isValidKey(
key: string | number | symbol,
@ -164,28 +161,12 @@ onUpdated(() => {
}
})
const cardDetail = (e: any) => {
e.stopPropagation();
expand.value = !expand.value;
}
// const fontstyle = computed((status)=>{
// if(status == 80 ){
// return {'color':'red'}
// }
// if(status == 90){
// return {'color':'red'}
// }
// })
// function fontstyle(status:any){
// console.log(status);
// if(status == 80 ){
// return {'color':'red'}
// }
// if(status == 90){
// return {'color':'red'}
// }
// }
//路由传参
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.ipoID)
@ -206,7 +187,7 @@ const handleclick = (item: any) => {
width: 270px;
// height: 360px;
// height: fit-content;
height: fit-content;
// min-height: 350px;
margin-top: 30px;
margin-left: 20px;

281
src/views/login/components/Select.vue
View File

@ -2,7 +2,25 @@
<div class="selectWrap" v-if="showSelect" @click="preVant">
<div class="box">
<div class="content">
<div class="title">IPO Status</div>
<li>
<div class="word" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }}
<div class="check">
<el-icon v-if="checkedAll==1">
<Check></Check>
</el-icon>
</div>
</div>
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
<div class="check">
<el-icon v-if="checkedAll==2">
<Check></Check>
</el-icon>
</div>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
<li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" @click="ipoStatusSlect(item.key)">
<div class="check">
@ -13,7 +31,7 @@
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">tradingCurrency</div>
<div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
<li>
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
@click="tradingCurrencySlect(item.key)">
@ -25,10 +43,54 @@
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
<li>
<div class="word" v-for="item in obj.offeringType" :key = "item.key" @click="offeringType(item.key)">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
<li>
<div class="word" v-for="item in obj.SecuritiestobeListed" :key = "item.key" @click="SecuritiestobeListed(item.key)">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
<li>
<div class="word" v-for="item in obj.ListingPlatform" :key = "item.key" @click="ListingPlatform(item.key)">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.ListingType')) }}</div>
<li>
<div class="word" v-for="item in obj.ListingType" :key = "item.key" @click="ListingType(item.key)">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
</div>
<div class="footer">
<button @click="confirm">Apply</button>
<button @click="confirm">Cancel</button>
<button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
<button @click="confirm">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>
</div>
</div>
@ -44,7 +106,12 @@ export default {
<script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
type keyType='ipoStatus'|'tradingCurrency'|'offeringType'|'SecuritiestobeListed'|'ListingPlatform'|'ListingType'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll=ref(0)
const confirm = () => {
showSelect.value = false;
}
@ -54,48 +121,48 @@ const preVant = (e: any) => {
const obj = reactive({
ipoStatus: [{
key: 25,
value: 'Deal Initiated',
value: proxy.$t('home.DealInitiated'),
isSelcted: false
},
{
key: 30,
value: 'Public Offer Closed',
value: proxy.$t('home.PublicOfferClosed'),
isSelcted: true
}, {
key: 35,
value: 'Application Validated',
value: proxy.$t('home.ApplicationValidated'),
isSelcted: true
}, {
key: 45,
value: 'Allotment Confirmed',
value: proxy.$t('home.AllotmentConfirmed'),
isSelcted: false
}, {
key: 50,
value: 'Money Settlement',
value: proxy.$t('home.MoneySettlement'),
isSelcted: false
}, {
key: 55,
value: 'Allocation Confirmed',
value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false
}, {
key: 60,
value: 'Placing Approved',
value: proxy.$t('home.placingApproved'),
isSelcted: false
}, {
key: 65,
value: 'Allotment Results Approved',
value: proxy.$t('home.AllotmentResultsApproved'),
isSelcted: false
}, {
key: 70,
value: 'Trading Started',
value: proxy.$t('home.TradingStarted'),
isSelcted: false
}, {
key: 80,
value: 'Suspended',
value: proxy.$t('home.Suspended'),
isSelcted: false
}, {
key: 90,
value: 'Cancelled',
value: proxy.$t('home.Cancelled'),
isSelcted: false
}],
tradingCurrency: [
@ -114,7 +181,125 @@ const obj = reactive({
value: 'United States Dollar',
isSelcted: false
}
]
],
offeringType:[{
key:'1',
value:proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.Byplacingonly'),
isSelcted: false
},{
key:'3',
value:proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
isSelcted: false
},{
key:'4',
value:proxy.$t('ipo.TypeofListing.Byintroduction'),
isSelcted: false
},
{
key:'5',
value:proxy.$t('ipo.TypeofListing.TransferfromGEM'),
isSelcted: true
}
],
SecuritiestobeListed:[{
key:'1',
value:proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: false
},{
key:'3',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
isSelcted: false
},{
key:'4',
value:proxy.$t('ipo.TypeofListing.Preferenceshares'),
isSelcted: false
},
{
key:'5',
value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: true
},
{
key:'6',
value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: true
},
{
key:'7',
value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: true
},
{
key:'8',
value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: true
},
{
key:'99',
value:proxy.$t('ipo.TypeofListing.Other'),
isSelcted: false
}
],
ListingPlatform:[{
key:'1',
value:proxy.$t('home.Mainboard'),
isSelcted: false
},{
key:'2',
value:proxy.$t('home.GEM'),
isSelcted: false
}],
ListingType:[{
key:'1',
value:proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: false
},{
key:'3',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
isSelcted: false
},{
key:'4',
value:proxy.$t('ipo.TypeofListing.Preferenceshares'),
isSelcted: false
},
{
key:'5',
value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: true
},
{
key:'6',
value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: true
},
{
key:'7',
value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: true
},
{
key:'8',
value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: true
},
{
key:'99',
value:proxy.$t('ipo.TypeofListing.Other'),
isSelcted: false
}
]
})
const ipoStatusSlect = (key: number) => {
obj.ipoStatus = obj.ipoStatus.map((item: any) => {
@ -132,6 +317,56 @@ const tradingCurrencySlect = (key: string) => {
return item
})
}
const offeringType = (key: string) => {
obj.offeringType = obj.offeringType.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const SecuritiestobeListed = (key: string) => {
obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const ListingPlatform = (key: string) => {
obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const ListingType = (key: string) => {
obj.ListingType = obj.ListingType.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const checkAll = (number:number)=>{
if(checkedAll.value&&checkedAll.value==number){
checkedAll.value=0;
}else{
checkedAll.value=number;
selectAll(number as 1|2)
}
}
function selectAll(all:1|2){
// obj['ipoStatus']
var boolean=all==1?true:false;
Object.keys(obj).forEach((item:string)=>{
obj[item as keyType]=obj[item as keyType].map(element=>{
return {...element,isSelcted:boolean} as any;
})
})
}
defineExpose({
showSelect
})
@ -140,7 +375,7 @@ defineExpose({
<style lang="scss" scoped>
.selectWrap {
width: 800px;
height: 800px;
height: 820px;
background-color: #fff;
border-radius: 20px;
position: fixed;
@ -148,7 +383,7 @@ defineExpose({
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
.box {
box-sizing: border-box;
padding: 10px 20px 20px 20px;
@ -161,8 +396,8 @@ defineExpose({
.content {
.title {
font-size: 16px;
color: #8C979B;
font-size: 18px;
color: #879db2;
margin-top: 10px;
}
@ -177,9 +412,9 @@ defineExpose({
border-radius: 20px;
// width: 50px;
height: 20px;
background-color: #F2F0F5;
background-color: #eff1f4;
padding: 5px 15px 5px 10px;
color: #6A7686;
color: #879db2;
display: flex;
justify-content: space-between;
cursor: pointer;
@ -208,7 +443,7 @@ defineExpose({
border: none;
font-weight: 600;
background-color: #fff;
color: #334B57;
color: #557795;
padding: 10px 20px 10px 20px;
&:hover {

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

@ -62,12 +62,19 @@ export default {
<script lang="ts" setup>
import { ref } from "vue"
import { getCurrentInstance, onUnmounted } from 'vue'
import { getCurrentInstance, onUnmounted,inject } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
const route=useRouter()
const store = ipoStore()
const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])
const reflashRouter=inject('reflashRouter') as Function
const IpoReflash=()=>{
if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
reflashRouter()
}
}
const props = defineProps({
drawer:Boolean
})
@ -100,15 +107,17 @@ const handleLang1 = () => {
}
store.setLocale(1)
emit('childfn',!drawer)
IpoReflash()
}
const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt'
IpoReflash()
}
store.setLocale(2)
emit('childfn',!drawer)
IpoReflash()
}
const handleLang3 = () => {
if (proxy.$i18n.locale = 'zhCn') {
@ -116,6 +125,7 @@ const handleLang3 = () => {
}
store.setLocale(3)
emit('childfn',!drawer)
IpoReflash()
}
</script>

2
tsconfig.json
View File

@ -1,6 +1,6 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*.vue", "shims.d.ts"],
"include": ["env.d.ts", "src/**/*.vue", "shims.d.ts",],
"compilerOptions": {
"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,