iopProject
This commit is contained in:
zhuzhuxia233
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="wrapEvent">
|
||||
<div class="header">
|
||||
<div class="c">
|
||||
|
||||
</div>
|
||||
<div class="h">
|
||||
<div class="font">
|
||||
<span :icon="Bell"></span>
|
||||
</div>
|
||||
<div class="headertitle">
|
||||
新上市
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
<li v-for="(item, index) in data.data" :key="index">
|
||||
<span>{{ item.listPlatform1 }}</span>
|
||||
<span>{{ item.logo }}</span>
|
||||
<span>{{ store.$state.locale == 1 ? item.name.split(";")[0] : item.name.split(";")[1] }} </span>
|
||||
<span class="number">({{ item.number }})</span>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "XEvent",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineProps, onUpdated } from "vue";
|
||||
import {
|
||||
Bell
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
interface obj {
|
||||
logo:string,
|
||||
listPlatform1:string,
|
||||
name: string,
|
||||
number: string | number
|
||||
}
|
||||
const store = ipoStore();
|
||||
const data = defineProps<{ data: obj[] }>()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapEvent {
|
||||
// margin-top: 20px;
|
||||
padding-left: 0px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top: 6px solid #D3DDE4;
|
||||
border-right: 6px solid #D3DDE4;
|
||||
border-left: 3px solid #D3DDE4;
|
||||
border-bottom: 2px solid #D3DDE4;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
// background-color: red;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
|
||||
.c {
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
background-color: #DA8B2B;
|
||||
transform: rotateX(26deg) rotateY(108deg);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.h {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-size: 16px;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
background-color: #F3B72B;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.font {
|
||||
color: #fff;
|
||||
padding-top: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// /取消滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 22px;
|
||||
border-left: 3px solid #EEEFF1;
|
||||
height: 100%;
|
||||
padding-left: 25px;
|
||||
overflow: scroll;
|
||||
|
||||
|
||||
|
||||
li {
|
||||
line-height: 50px;
|
||||
color: #888F95;
|
||||
border-bottom: 2px solid #EDEDED;
|
||||
|
||||
.number {
|
||||
color: #9FA4A7;
|
||||
font-weight: 450;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="wrap1" v-if="showLang">
|
||||
<li @click="handleLang1">English</li>
|
||||
<li @click="handleLang2">繁體中文</li>
|
||||
<li @click="handleLang3">简体中文</li>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "XLang",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref, defineExpose } from 'vue';
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
const store = ipoStore()
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const showLang = ref(false)
|
||||
const handleLang1 = () => {
|
||||
if (proxy.$i18n.locale = 'en') {
|
||||
proxy.$i18n.locale = 'en'
|
||||
}
|
||||
store.setLocale(1)
|
||||
}
|
||||
const handleLang2 = () => {
|
||||
if (proxy.$i18n.locale = 'zhCt') {
|
||||
proxy.$i18n.locale = 'zhCt'
|
||||
|
||||
|
||||
}
|
||||
store.setLocale(2)
|
||||
}
|
||||
const handleLang3 = () => {
|
||||
if (proxy.$i18n.locale = 'zhCn') {
|
||||
proxy.$i18n.locale = 'zhCn'
|
||||
}
|
||||
store.setLocale(3)
|
||||
}
|
||||
defineExpose({
|
||||
showLang
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap1 {
|
||||
width: 140px;
|
||||
// height: 150px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #A1A1A1;
|
||||
border-radius: 8px;
|
||||
color: #20435B;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="bigbox">
|
||||
<div class="title">
|
||||
<img :src="props.data.logolinks" />
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-content">
|
||||
<div class="top">
|
||||
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
|
||||
</h4>
|
||||
<el-icon class="icon1">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h4>{{ props.data.number }}</h4>
|
||||
<h5>{{ code22 }}</h5>
|
||||
<h4>HKD {{ props.data.HKD }}</h4>
|
||||
<h6>{{ $t(i18n.global.t('home.finalofferprice')) }}</h6>
|
||||
<h5>{{ props.data.time }}</h5>
|
||||
<h6>{{ $t(i18n.global.t('home.CommencementofTradeDate')) }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'XMain',
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { size } from 'lodash';
|
||||
import { ref, onMounted, onUpdated } from 'vue'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const store = ipoStore();
|
||||
const currentDate = ref(new Date())
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
HKD: "",
|
||||
number: 0,
|
||||
price: "",
|
||||
time: "",
|
||||
title: "",
|
||||
trading: "",
|
||||
logolinks: "",
|
||||
status: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const code22 = ref('')
|
||||
onUpdated(() => {
|
||||
var obj = {
|
||||
25: proxy.$t('home.DealInitiated'),
|
||||
30: proxy.$t('home.PublicOfferClosed'),
|
||||
35: proxy.$t('home.ApplicationValidated'),
|
||||
45: proxy.$t('home.AllotmentConfirmed'),
|
||||
50: proxy.$t('home.MoneySettlement'),
|
||||
55: proxy.$t('home.AllocationConfirmed'),
|
||||
60: proxy.$t('home.placingApproved'),
|
||||
65: proxy.$t('home.AllotmentResultsApproved'),
|
||||
70: proxy.$t('home.TradingStarted'),
|
||||
80: proxy.$t('home.Suspended'),
|
||||
90: proxy.$t('home.Cancelled'),
|
||||
}
|
||||
// console.log('&&&&', props.data.status)
|
||||
const stron = props.data.status
|
||||
if (isValidKey(stron, obj)) {
|
||||
code22.value = obj[stron];
|
||||
// console.log('kkkk',stron,obj[stron])
|
||||
}
|
||||
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
|
||||
function isValidKey(
|
||||
key: string | number | symbol,
|
||||
object: object
|
||||
): key is keyof typeof object {
|
||||
return key in object;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bigbox {
|
||||
|
||||
width: 270px;
|
||||
height: 360px;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
background-color: #e7efec;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #DDE2E6;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.list-content {
|
||||
margin-top: 10px;
|
||||
width: 230px;
|
||||
height: 100%;
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
color: #2a5579;
|
||||
margin-bottom: 8px;
|
||||
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
color: #2a5579;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
color: #2a5579;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bigbox:hover {
|
||||
// background-color: red;
|
||||
box-shadow: 10px 15px 10px #9A9A9A;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,811 @@
|
||||
<template>
|
||||
<div class="box w">
|
||||
<div class="left">
|
||||
<div class="header">
|
||||
<!-- <input class="search" /> -->
|
||||
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
|
||||
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect" placeholder="Please Input">
|
||||
<template #prefix>
|
||||
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
|
||||
<div class="dropdown">
|
||||
<img src="@/assets/1x/source4.png" class="first ">
|
||||
</div>
|
||||
<div class="dropdown1">
|
||||
|
||||
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
|
||||
<Lang class="alert" ref="lang" />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bigger">
|
||||
<Main v-for="(item, index) in logos" :data="item" :key="index" @click="handleclick(item)"></Main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-top">
|
||||
<img src="@/assets/1x/1x/source1.png" />
|
||||
<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">
|
||||
<!-- <div class="right-bottom-title1">No event</div> -->
|
||||
<Event :data="Eventdata" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "mobilehome",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import Lang from "./components/Lang.vue";
|
||||
import Main from './components/Main.vue';
|
||||
import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
|
||||
import moment from "moment"
|
||||
import { useRouter } from 'vue-router';
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import Event from './components/Event.vue';
|
||||
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
|
||||
import { getDataFromId } from "@/api/mock/home"
|
||||
import { ElMessage } from 'element-plus'
|
||||
const dayValue = ref(new Date())
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const handleSelect = () => {
|
||||
console.log('@@@', state.value)
|
||||
getSearchIpoList(state.value)
|
||||
}
|
||||
const router = useRouter()
|
||||
watch(dayValue, async (ne, ol) => {
|
||||
const day = moment(ne).format("YYYY-MM-DD")
|
||||
const result =await getEventData(day);
|
||||
console.log(result);
|
||||
setEventdata((result as any).data)
|
||||
})
|
||||
const Eventdata = ref([
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2370
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2370
|
||||
}, {
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2372
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
name: "力高健康生活有限公司",
|
||||
logo:"-",
|
||||
number: 2373
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
name: "力高健康生活有限公司",
|
||||
logo:"-",
|
||||
number: 2374
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
name: "力高健康生活有限公司",
|
||||
logo:"-",
|
||||
number: 2375
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2378
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2374
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2378
|
||||
},
|
||||
{
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2380
|
||||
}, {
|
||||
listPlatform1:"主板",
|
||||
logo:"-",
|
||||
name: "力高健康生活有限公司",
|
||||
number: 2381
|
||||
}
|
||||
])
|
||||
const setEventdata = (EventD: any) => {
|
||||
Eventdata.value = EventD.map((item: any) => {
|
||||
const { stkCode,listPlatform,companyEngFull,companyChiFull } = item;
|
||||
const listPlatform1 = ref('')
|
||||
var obj={
|
||||
1:proxy.$t('home.Mainboard'),
|
||||
2:"GEM"
|
||||
}
|
||||
if (isValidKey(listPlatform, obj)) {
|
||||
listPlatform1.value = obj[listPlatform]
|
||||
}
|
||||
function isValidKey(
|
||||
key: string | number | symbol,
|
||||
object: object
|
||||
): key is keyof typeof object {
|
||||
return key in object;
|
||||
}
|
||||
return{
|
||||
logo:'-',
|
||||
listPlatform1:listPlatform1,
|
||||
name:companyEngFull+";"+companyChiFull,
|
||||
number:stkCode
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
const getHomeIpoList = async () => {
|
||||
async function demo() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const res = await getHomeIpo(1)
|
||||
const data = (res as any).data.map((item: any) => {
|
||||
let { stkCode, dateTime, status, ipoID } = item;
|
||||
return {
|
||||
logolinks: "logoLink",
|
||||
title: "bestCompany",
|
||||
status: status,
|
||||
number: stkCode,
|
||||
HKD: stkCode,
|
||||
price: proxy.$t('home.finalofferprice'),
|
||||
time: moment(dateTime).format("YYYY-MM-DD HH:mm:ss"),
|
||||
trading: proxy.$t('home.CommencementofTradeDate'),
|
||||
ipoID: ipoID
|
||||
}
|
||||
|
||||
})
|
||||
// console.log(data);
|
||||
var stateNumber = 0;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
let ipoId = data[i].number;
|
||||
//通过匿名函数自调用产生闭包 保存i
|
||||
((i: number) => {
|
||||
//根据ipoId请求companyEngFull
|
||||
getIpo(ipoId).then(res => {
|
||||
data[i].title = (res as any).data[0].companyEngShort + ";" + (res as any).data[0].companyChiShort;
|
||||
|
||||
data[i].HKD = (res as any).data[0].priceFinal
|
||||
data[i].logolinks = (res as any).data[0].logoLink
|
||||
if ((res as any).data[0].priceFinal == null) {
|
||||
data[i].price = proxy.$t('home.offerpricerange')
|
||||
|
||||
data[i].HKD = `${(res as any).data[0].priceMin}-${(res as any).data[0].priceMax}`
|
||||
}
|
||||
if ((res as any).data[0].listingDate !== null) {
|
||||
data[i].time = (res as any).data[0].listingDate
|
||||
data[i].trading = proxy.$t('home.CommencementofTradeDate')
|
||||
|
||||
} else {
|
||||
data[i].time = (res as any).data[0].pricingDate
|
||||
data[i].trading = proxy.$t('home.ExpectedPriceDeterminationDate')
|
||||
|
||||
}
|
||||
stateNumber++
|
||||
if (stateNumber == data.length) {
|
||||
resolve(data)
|
||||
}
|
||||
}).catch(error => {
|
||||
|
||||
});
|
||||
})(i)
|
||||
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
const result = await demo();
|
||||
(result as objType[]).sort((a: any, b: any) => {
|
||||
const preTime = new Date(a.number).getTime();
|
||||
const nextTime = new Date(b.number).getTime();
|
||||
if (preTime == nextTime) {
|
||||
return Number(a.number) - Number(b.number);
|
||||
} else {
|
||||
return preTime - nextTime;
|
||||
}
|
||||
})
|
||||
|
||||
logos.value = result as objType[]
|
||||
|
||||
}
|
||||
onMounted(getHomeIpoList)
|
||||
const getSearchIpoList = async (keyword: string) => {
|
||||
async function demo() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
|
||||
const res = await getSearchListing(keyword)
|
||||
if (!(res as any).data.length) {
|
||||
ElMessage.warning('No relevant search data')
|
||||
throw ("222")
|
||||
}
|
||||
const data = (res as any).data.map((item: any) => {
|
||||
let { stkCode, dateTime, status, ipoID } = item;
|
||||
return {
|
||||
logolinks: "logoLink",
|
||||
title: "bestCompany",
|
||||
status: status,
|
||||
number: stkCode,
|
||||
HKD: stkCode,
|
||||
price: proxy.$t('home.finalofferprice'),
|
||||
time: moment(dateTime).format("YYYY-MM-DD HH:mm:ss"),
|
||||
trading: proxy.$t('home.CommencementofTradeDate'),
|
||||
ipoID: ipoID
|
||||
}
|
||||
|
||||
})
|
||||
var stateNumber = 0;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
let ipoId = data[i].number;
|
||||
//通过匿名函数自调用产生闭包 保存i
|
||||
((i: number) => {
|
||||
//根据ipoId请求companyEngFull
|
||||
getIpo(ipoId).then(res => {
|
||||
data[i].title = (res as any).data[0].companyEngShort + ";" + (res as any).data[0].companyChiShort;
|
||||
|
||||
data[i].HKD = (res as any).data[0].priceFinal
|
||||
data[i].logolinks = (res as any).data[0].logoLink
|
||||
if ((res as any).data[0].priceFinal == null) {
|
||||
data[i].price = proxy.$t('home.offerpricerange')
|
||||
|
||||
data[i].HKD = `${(res as any).data[0].priceMin}-${(res as any).data[0].priceMax}`
|
||||
}
|
||||
if ((res as any).data[0].listingDate !== null) {
|
||||
data[i].time = (res as any).data[0].listingDate
|
||||
data[i].trading = proxy.$t('home.CommencementofTradeDate')
|
||||
|
||||
} else {
|
||||
data[i].time = (res as any).data[0].pricingDate
|
||||
data[i].trading = proxy.$t('home.ExpectedPriceDeterminationDate')
|
||||
|
||||
}
|
||||
stateNumber++
|
||||
if (stateNumber == data.length) {
|
||||
resolve(data)
|
||||
}
|
||||
}).catch(error => {
|
||||
|
||||
});
|
||||
})(i)
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
reject()
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
const result = await demo();
|
||||
(result as objType[]).sort((a: any, b: any) => {
|
||||
const preTime = new Date(a.number).getTime();
|
||||
const nextTime = new Date(b.number).getTime();
|
||||
if (preTime == nextTime) {
|
||||
return Number(a.number) - Number(b.number);
|
||||
} else {
|
||||
return preTime - nextTime;
|
||||
}
|
||||
})
|
||||
|
||||
logos.value = result as objType[]
|
||||
|
||||
}
|
||||
//测试功能----------------------------------------------------------
|
||||
onMounted(async () => {
|
||||
// const result=await getDataFromId("home");
|
||||
// console.log('@@',result);
|
||||
// 测试event
|
||||
// const result = await getDataFromId(101);
|
||||
// setEventdata(result);
|
||||
})
|
||||
interface objType {
|
||||
title: string,
|
||||
number: string,
|
||||
HKD: string,
|
||||
price: string,
|
||||
time: string,
|
||||
trading: string
|
||||
|
||||
}
|
||||
const logos = ref<objType[]>([
|
||||
{
|
||||
title: "bestCompany",
|
||||
number: "09985",
|
||||
HKD: "HKD 148.000",
|
||||
price: "final offer Price",
|
||||
time: "2023-03-31 09:00",
|
||||
trading: "Commencement of trading date"
|
||||
},
|
||||
{
|
||||
title: "bestCompany",
|
||||
number: "09985",
|
||||
HKD: "HKD 30.000-40.000",
|
||||
price: "offer Price Range",
|
||||
time: "2022-12-01 12:00:00",
|
||||
trading: "Expected Price Determination Date"
|
||||
},
|
||||
{
|
||||
title: "bestCompany",
|
||||
number: "09985",
|
||||
HKD: "HKD 30.000-40.000",
|
||||
price: "offer Price Range",
|
||||
time: "2022-12-01 12:00:00",
|
||||
trading: "Expected Price Determination Date"
|
||||
},
|
||||
{
|
||||
title: "bestCompany",
|
||||
number: "09985",
|
||||
HKD: "HKD 30.000-40.000",
|
||||
price: "offer Price Range",
|
||||
time: "2022-12-01 12:00:00",
|
||||
trading: "Expected Price Determination Date"
|
||||
},
|
||||
{
|
||||
title: "bestCompany",
|
||||
number: "09985",
|
||||
HKD: "HKD 30.000-40.000",
|
||||
price: "offer Price Range",
|
||||
time: "2022-12-01 12:00:00",
|
||||
trading: "Expected Price Determination Date"
|
||||
}
|
||||
])
|
||||
|
||||
const jsonData = {
|
||||
"code": null,
|
||||
"msg": null,
|
||||
"data": {
|
||||
"exception": null,
|
||||
"nextCursor": "11",
|
||||
"exceptionStr": "[]",
|
||||
"dataStr": "[IPOList.DataIn(ipoID=1234, stkCode=9988, isin=KYG017191142, status=25), IPOList.DataIn(ipoID=1235, stkCode=9633, isin=CNE100004272, status=30), IPOList.DataIn(ipoID=1236, stkCode=9618, isin=KYG8208B1014, status=45), IPOList.DataIn(ipoID=1237, stkCode=6618, isin=KYG5074A1004, status=60), IPOList.DataIn(ipoID=1238, stkCode=1024, isin=KYG532631028, status=70)]",
|
||||
"code": "0",
|
||||
"totalSize": 5,
|
||||
"data": null,
|
||||
"id": 1635457757501956097,
|
||||
"message": "",
|
||||
"timestamp": null
|
||||
}
|
||||
}
|
||||
// console.log(jsonData);
|
||||
// console.log(jsonData.data.dataStr.);
|
||||
|
||||
interface LinkItem {
|
||||
value: string
|
||||
link: string
|
||||
}
|
||||
|
||||
const state = ref('')//搜索框数据
|
||||
const links = ref<LinkItem[]>([])
|
||||
//搜索框组件自带js
|
||||
const querySearch = (queryString: string, cb: (arg0: { value: string; link: string; }[]) => void) => {
|
||||
// console.log('search', queryString, value, link, cb)
|
||||
const results = queryString
|
||||
? links.value.filter(createFilter(queryString))
|
||||
: links.value
|
||||
// call callback function to return suggestion objects
|
||||
const result11 = cb(results)
|
||||
}
|
||||
const createFilter = (queryString: string) => {
|
||||
return (restaurant: { value: string; }) => {
|
||||
return (
|
||||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
)
|
||||
}
|
||||
}
|
||||
//搜索提示框信息
|
||||
const loadAll = () => {
|
||||
return [
|
||||
{ value: 'vue', link: 'https://github.com/vuejs/vue' },
|
||||
{ value: 'element', link: 'https://github.com/ElemeFE/element' },
|
||||
{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
|
||||
{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
|
||||
{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
|
||||
{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
|
||||
{ value: 'babel', link: 'https://github.com/babel/babel' },
|
||||
{ value: '北京', link: 'https://github.com/babel/babel' },
|
||||
{ value: '淮北', link: 'https://github.com/babel/babel' },
|
||||
]
|
||||
}
|
||||
// const handleSelect = (item: LinkItem) => {
|
||||
// console.log(item)
|
||||
// }
|
||||
|
||||
const handleIconClick = (ev: Event) => {
|
||||
// console.log(ev)
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
links.value = loadAll()
|
||||
|
||||
})//自动搜索框自带js结束
|
||||
|
||||
const calendar = ref()
|
||||
const selectDate = (val: string) => {
|
||||
console.log(val)
|
||||
calendar.value.selectDate(val)
|
||||
}//日历自带js结束
|
||||
|
||||
//通过ref获取子组件实例，语言转换功能js
|
||||
const lang = ref()
|
||||
const handleShowLang = (e: any) => {
|
||||
console.log(e)
|
||||
e.stopPropagation()
|
||||
lang.value.showLang = !lang.value.showLang
|
||||
}
|
||||
// const Arr = ref<string[]>([])
|
||||
// logos.value.forEach((item) => {
|
||||
// Arr.value.push(item.number)
|
||||
// })
|
||||
// console.log(Arr.value);
|
||||
|
||||
// const ipoId = Arr.value
|
||||
// console.log(ipoId);
|
||||
|
||||
// console.log(logos.value);
|
||||
// const ipoId =logos.value.number
|
||||
//路由传参
|
||||
const handleclick = (item: any) => {
|
||||
localStorage.setItem('ipoID', item.number)
|
||||
localStorage.setItem('itemData', JSON.stringify(item))
|
||||
router.push({
|
||||
name: 'Xdashboard',
|
||||
params: { data: JSON.stringify(item) }
|
||||
},
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.onclick = function () {
|
||||
if (!lang.value.showLang) return
|
||||
lang.value.showLang = false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
document.documentElement.onclick = null
|
||||
})
|
||||
|
||||
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]
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @import '../../styles';
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// background-image: url("@/assets/1x/beijingtu.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
// background-color: gray;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 70vw;
|
||||
// width: 70%;
|
||||
// height: 100vh;
|
||||
// float: left;
|
||||
// background-color: red;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding-left: 35px;
|
||||
height: 80px;
|
||||
|
||||
// .search {
|
||||
// margin-top: 20px;
|
||||
// margin-left: 20px;
|
||||
// padding-left: 50px;
|
||||
// width: 800px;
|
||||
// height: 50px;
|
||||
// border-radius: 25px;
|
||||
// font-size: 25px;
|
||||
// border: none;
|
||||
// outline: none;
|
||||
// background: url(@/assets/Search.png) #fff no-repeat 10px center/40px
|
||||
// }
|
||||
.inline-input w-50 {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.my-autocomplete li .highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
// .example-showcase .el-dropdown-link {
|
||||
// cursor: pointer;
|
||||
// color: var(--el-color-primary);
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
.dropdown-menu {
|
||||
width: 80px;
|
||||
height: 700px;
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid black;
|
||||
z-index: 1;
|
||||
max-height: 200px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown1 {
|
||||
position: relative;
|
||||
|
||||
|
||||
.alert {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: -60px;
|
||||
}
|
||||
}
|
||||
|
||||
.first {
|
||||
width: 32px;
|
||||
height: 35px;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.second {
|
||||
width: 32px;
|
||||
height: 36px;
|
||||
margin-top: 25px;
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bigger {
|
||||
// margin-top: 40px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// margin-left: 120px;
|
||||
// width: 1250px;
|
||||
// background-color: pink;
|
||||
@media screen and (max-width: 768px) {}
|
||||
transform: translateX(60rem);
|
||||
}
|
||||
|
||||
.right {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
// width: 900px;
|
||||
// height: 100vh;
|
||||
height: 100%;
|
||||
padding-bottom: 80px;
|
||||
background-color: #1f4055;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
z-index: 1;
|
||||
// float: right;
|
||||
|
||||
.right-top {
|
||||
display: flex;
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
|
||||
.top-title {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
color: #ffffff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
width: 420px;
|
||||
background-color: #ffffff;
|
||||
height: 400px;
|
||||
margin-top: 40px;
|
||||
// margin-left: 20px;
|
||||
|
||||
.month {
|
||||
font-size: 25px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right-bottom1 {
|
||||
width: 420px;
|
||||
background-color: #ffffff;
|
||||
height: 500px;
|
||||
margin-top: 150px;
|
||||
// margin-left: 20px;
|
||||
// text-align: center;
|
||||
// line-height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.right-bottom-title1 {
|
||||
|
||||
color: #1f4055;
|
||||
font-size: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-button--small) {
|
||||
border: none
|
||||
}
|
||||
|
||||
:deep(.el-calendar__body) {
|
||||
background-color: #e8ebee;
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-calendar) {
|
||||
width: 420px;
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
width: 750px;
|
||||
}
|
||||
|
||||
: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;
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table thead) {
|
||||
margin-top: 20px;
|
||||
font-size: 13px;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table td.is-selected) {
|
||||
background-color: #e8ebee;
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table td.is-selected .el-calendar-day) {
|
||||
background-color: #e36466;
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
:deep(.el-calendar-table td.is-today .el-calendar-day) {
|
||||
color: black;
|
||||
background-color: #e36466;
|
||||
}
|
||||
|
||||
:deep(.is-selected) {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.header .el-input__wrapper {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
padding-left: 50px;
|
||||
width: 50vw;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
font-size: 25px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
}
|
||||
|
||||
.el-input__prefix-inner {
|
||||
transform: translateX(-35px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user