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

点击菜单切换语言菜单自动弹回

This commit is contained in:
zzy 2023-04-19 17:41:10 +08:00
parent 23fca53196
commit 3eb07382ae
16 changed files with 576 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

43
src/App.vue
View File

@ -7,54 +7,25 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, ref, onBeforeMount,onMounted, watch } from 'vue' import { defineComponent, ref, onBeforeMount, onMounted, watch } from 'vue'
import { ElConfigProvider } from 'element-plus' import { ElConfigProvider } from 'element-plus'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
function isMobileFn() {
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
}
const isMobile = ref(isMobileFn() ? true : false);
const store = ipoStore(); const store = ipoStore();
onBeforeMount(() => { onBeforeMount(() => {
setFontSize() setFontSize()
}) })
function isMobileFn() {
return 768 >= document.documentElement.clientWidth;
}
const isMobile = ref(isMobileFn() ? true : false);
const setFontSize = () => { const setFontSize = () => {
// 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发，把rem当作px用就行了 // 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发，把rem当作px用就行了
var font = document.documentElement.clientWidth / 375; var font = document.documentElement.clientWidth / 375;
document.documentElement.style.fontSize = font + "px"; document.documentElement.style.fontSize = font + "px";
} }
// export default defineComponent({
// components: {
// ElConfigProvider,
// },
// setup() {
// // store.setLocale(2)
// console.log(store.$state.locale, store.localeLang)
// console.log(document.documentElement.clientWidth)
// return {
// store
// }
// },
// })
// onMounted(() => {
// window.addEventListener('resize', function () {
// isMobile.value = isMobileFn();
// if (isMobile.value) {
// window.location.reload()
// }
// })
// })
// watch(isMobile, (newValue) => {
// window.location.reload()
// })
onMounted(() => {
window.addEventListener('resize', function () {
var font = document.documentElement.clientWidth / 375;
document.documentElement.style.fontSize = font + "px";
})
})
</script> </script>
<style lang="scss" > <style lang="scss" >
@ -96,7 +67,7 @@ onMounted(() => {
background-image: url("@/assets/1x/beijingtu.png"); background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
// height: 100%; // height: 100%;
width: 100%; width: 100%;
} }

1
src/main.ts
View File

@ -28,6 +28,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
app.config.warnHandler = (msg, instance, trace) => {} app.config.warnHandler = (msg, instance, trace) => {}
app.config.errorHandler = (msg, instance, trace) => {}//错误捕获，不报给浏览器
app app
// .use(pinia) // .use(pinia)
.use(router) .use(router)

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

@ -117,7 +117,7 @@ const data = defineProps<{ info: obj[], title: string }>()
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
display: block; display: block;
margin-top: 10px; margin-top: 21px;
:deep(.el-table) { :deep(.el-table) {
color: #355D80; color: #355D80;

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

@ -2,14 +2,12 @@
<div class="headerWrap"> <div class="headerWrap">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer" <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false"> style="background-color: #1C3F56;" :with-header="false">
<Drawer /> <Drawer :drawer = "drawer" @childfn="fn"/>
</el-drawer> </el-drawer>
<div class="hleft"> <div class="hleft">
<div class="left-1"> <div class="left-1">
<div class="menu"> <img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer"> <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
</div>
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
</div> </div>
<div class="search" @click="handlesearch"> <div class="search" @click="handlesearch">
@ -62,6 +60,9 @@ onMounted(() => {
lang.value.showLang = false lang.value.showLang = false
} }
}) })
function fn(data:any){
drawer.value = data
}
onUnmounted(() => { onUnmounted(() => {
document.documentElement.onclick = null document.documentElement.onclick = null
}) })
@ -128,7 +129,9 @@ onUnmounted(() => {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
display: block; display: block;
margin-top: 3px; vertical-align: middle;
width: 25px;
height: 20px;
} }
} }
@ -138,8 +141,9 @@ onUnmounted(() => {
font-weight: bolder; font-weight: bolder;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 26px; font-size: 20px;
transform: translateX(-60px); transform: translateX(-60px);
display: inline;
} }
} }

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

@ -121,10 +121,10 @@ const TypeOfListing = ref([
name: proxy.$t('ipo.TypeofListing.ListingType'), name: proxy.$t('ipo.TypeofListing.ListingType'),
info: "Primary" info: "Primary"
}, },
{ // {
name: proxy.$t('ipo.TypeofListing.ListingCategories'), // name: proxy.$t('ipo.TypeofListing.ListingCategories'),
info: "-" // info: "-"
} // }
]) ])
const Offerings = ref([ const Offerings = ref([
{ {
@ -344,7 +344,6 @@ onMounted(
data.value = JSON.parse(localStorage.getItem('itemData') as string) data.value = JSON.parse(localStorage.getItem('itemData') as string)
getreferencedata() getreferencedata()
setDownLoad() setDownLoad()
// text(); // text();
} }
) )
@ -421,12 +420,12 @@ function setOfferings(mockRes: any) {
var dataObj = [ var dataObj = [
{ info: has_data(tradeCurrency) }, { info: has_data(tradeCurrency) },
{ info: keepTwoDecimalStr(downwardPriceFlex) }, { info: keepTwoDecimalStr(downwardPriceFlex) },
{ info: has_data(priceMin.toFixed(3)) + "-" + has_data(priceMax.toFixed(3)), info2: has_data(priceFinal.toFixed(3)) }, { info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
{ info: has_data(boardLot) }, { info: has_data(boardLot) },
{ info: keepTwoDecimalStr(poReallocationCap) }, { 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,')), has_data(poSharesFinal?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), has_data(ioOfferSharesFinal?.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(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: has_data(upsizeOption?.toFixed(2),"%") },
{ info: "-" }, { info: "-" },
{ info: keepTwoDecimalStr(overallotOption) }, { info: keepTwoDecimalStr(overallotOption) },
{ table: denomTable } { table: denomTable }
@ -591,14 +590,14 @@ function setTypeofListing(mockRes: any) {
} }
//没找到的字段ListingType listingCategories //没找到的字段ListingType listingCategories
// const ListingType = "-"; // const ListingType = "-";
const listingCategories = "-"; // const listingCategories = "-";
const arr = [ const arr = [
{ info: offerType }, { info: offerType },
{ info: listSecurities }, { info: listSecurities },
{ info: has_data(nomValue), info2: nomCur as any }, { info: has_data(nomValue), info2: nomCur as any },
{ info: listPlatform }, { info: listPlatform },
{ info: has_data(listSecurities) }, { info: has_data(listSecurities) },]
{ info: has_data(listingCategories) }] // { info: has_data(listingCategories) }]
TypeOfListing.value = TypeOfListing.value.map((item, index) => { TypeOfListing.value = TypeOfListing.value.map((item, index) => {
if (arr[index].info2) { if (arr[index].info2) {
return { ...item, info: arr[index].info, info2: arr[index].info2 } return { ...item, info: arr[index].info, info2: arr[index].info2 }
@ -756,12 +755,8 @@ function scrollTo(stron: string) {
async function setDownLoad (){ async function setDownLoad (){
const ipoID = localStorage.getItem('ipoID'); const ipoID = localStorage.getItem('ipoID');
const res = await getIpo(ipoID as string) const res = await getIpo(ipoID as string)
console.log('@@1',(res as any).data[0].pdfLink.cLink);
const enHref = `${(res as any).data[0].pdfLink.eLink}`; const enHref = `${(res as any).data[0].pdfLink.eLink}`;
const chinaHref = `${(res as any).data[0].pdfLink.cLink}`; const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
console.log(enHref);
Documents.value= [ Documents.value= [
{ {
name: proxy.$t('ipo.Documents.ListingDocumentEnglish'), name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
@ -772,8 +767,6 @@ function scrollTo(stron: string) {
href2:chinaHref href2:chinaHref
}, },
] ]
// return store.$state.locale == 1 ? enHref : chinaHref
// return [enHref, chinaHref] as any;
} }

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

@ -2,20 +2,18 @@
<div class="headerWrap"> <div class="headerWrap">
<div class="left"> <div class="left">
<div class="left-1"> <div class="left-1">
<div class="menu"> <img src="@/assets/1x/1x/source5.png" alt="menu" @click="drawShow" class="menu">
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" > <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
</div>
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
</div> </div>
<div class="left-right"> <div class="left-right">
<div class="search" @click="handlesearch"> <div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片"> <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
</div> </div>
<div class="langWrap"> <div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second"> <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang"/> <Lang ref="lang" class="lang" />
</div> </div>
</div> </div>
@ -39,7 +37,7 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance,onMounted,onUnmounted} from 'vue' import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue' import Drawer from '@/views/login/modelComponents/Drawer.vue'
import Lang from "@/views/login/components/Lang.vue"; import Lang from "@/views/login/components/Lang.vue";
import { conforms } from 'lodash'; import { conforms } from 'lodash';
@ -47,9 +45,9 @@ const { proxy } = (getCurrentInstance() as any)
const value = ref(true) const value = ref(true)
const lang = ref() const lang = ref()
const handleShowLang=(e:any)=>{ const handleShowLang = (e: any) => {
console.log(1111) console.log(1111)
e.stopPropagation() e.stopPropagation()
lang.value.showLang = !lang.value.showLang lang.value.showLang = !lang.value.showLang
} }
onMounted(() => { onMounted(() => {
@ -63,12 +61,12 @@ onUnmounted(() => {
}) })
const props = defineProps({ const props = defineProps({
time: [String, Number], time: [String, Number],
openDrawer:{ openDrawer: {
required:true, required: true,
type:Function type: Function
} }
}) })
const handlesearch = ()=>{ const handlesearch = () => {
proxy.$router.push("/home") proxy.$router.push("/home")
} }
const handleDrawer = (done: () => void) => { const handleDrawer = (done: () => void) => {
@ -81,7 +79,7 @@ const drawShow = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.langWrap{ .langWrap {
// position: absolute; // position: absolute;
// // top:-20px; // // top:-20px;
// left: 260px; // left: 260px;
@ -89,27 +87,36 @@ const drawShow = () => {
// align-items: end; // align-items: end;
position: relative; position: relative;
margin-left: 15px; margin-left: 15px;
.second {
width: 32px; .second {
height: 36px;
margin-top: 4px; width: 32px;
&:hover { height: 36px;
transform: scale(1.2); margin-top: 4px;
}
&:hover {
transform: scale(1.2);
} }
} }
.lang{ }
position: absolute;
top:50px; .lang {
left: -50px; position: absolute;
top: 50px;
left: -50px;
@media screen and (max-width: 768px) {
left: -120px;
} }
.left-right{ }
display: flex;
justify-content: space-between; .left-right {
width: 6vw; display: flex;
margin-right: 10rem; justify-content: space-between;
} width: 6vw;
margin-right: 10rem;
}
.headerWrap { .headerWrap {
display: flex; display: flex;
@ -117,42 +124,52 @@ const drawShow = () => {
padding-top: 40px; padding-top: 40px;
transform: translateY(-20px); transform: translateY(-20px);
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
flex-direction: column; flex-direction: column;
.left-1{
.left-1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 40vw; width: 40vw;
margin-left: 15px; margin-left: 15px;
} }
.left-right{
.left-right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 25vw; width: 25vw;
margin-right: 10px; margin-right: 10px;
} }
} }
.left { .left {
display: flex; display: flex;
position: relative; position: relative;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
justify-content: space-between; justify-content: space-between;
width: 100vw; width: 100vw;
align-items:center; align-items: center;
} }
.menu{
display: none; .menu {
@media screen and (max-width: 768px){ display: none;
display: block;
margin-top: 3px; @media screen and (max-width: 768px) {
} display: block;
} // margin-top: 3px;
vertical-align: middle;
}
}
span { span {
color: #2B4A60; color: #2B4A60;
font-size: 45px; font-size: 45px;
font-weight: 900; font-weight: 900;
@media screen and (max-width: 768px){
font-size: 26px; @media screen and (max-width: 768px) {
font-size: 25px;
// margin-top: 4px;
} }
} }
@ -167,6 +184,7 @@ const drawShow = () => {
margin-left: 15px; margin-left: 15px;
margin-top: 6px; margin-top: 6px;
cursor: pointer; cursor: pointer;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -176,14 +194,19 @@ const drawShow = () => {
.right { .right {
font-size: 20px; font-size: 20px;
@media screen and (max-width: 768px){
width: 100vw; @media screen and (max-width: 768px) {
margin-top: 10px; // width: 100vw;
transform: translateX(-10px); color: red;
} margin-top: 10px;
transform: translateX(-10px);
}
.time { .time {
color: #435F70; color: #435F70;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
float: right; float: right;
font-size: 15px; font-size: 15px;
} }
@ -194,6 +217,7 @@ const drawShow = () => {
text-align: right; text-align: right;
color: #27485E; color: #27485E;
font-weight: 600; font-weight: 600;
span { span {
margin-right: 15px; margin-right: 15px;
} }
@ -201,10 +225,12 @@ const drawShow = () => {
:deep(.el-switch__action) { :deep(.el-switch__action) {
background-color: #E86666; background-color: #E86666;
} }
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
font-size: 15px; font-size: 15px;
margin-top: 13px; margin-top: 13px;
transform: translateX(200px); transform: translateX(175px);
} }
} }
} }

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

@ -1,35 +1,39 @@
<template> <template>
<div class="bigbox" @click="handleclick(props.data)"> <div class="bigbox" @click="handleclick(props.data)">
<div class="title"> <Aimage :src="props.data.logolinks" :number="props.data.number"/>
<img :src="props.data.logolinks" />
</div>
<div class="list"> <div class="list">
<div class="list-content" > <div class="list-content">
<div class="top"> <div class="top">
<h4 >{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }} <h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4> </h4>
<el-icon class="icon1" @click="cardDetail"> <el-icon class="icon1" @click="cardDetail">
<ArrowUp v-if="expand"/> <ArrowUp v-if="expand" />
<ArrowDown v-else /> <ArrowDown v-else />
</el-icon> </el-icon>
</div> </div>
<h4 >{{ props.data.number }}</h4> <h4>{{ props.data.number }}</h4>
<div v-if="expand" class="details" > <div v-if="expand" class="details">
<h5 v-for="(item,index) in detailsItem" :key="index"> <h5 v-for="(item, index) in detailsItem" :key="index">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon"> <el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon==1" /> <Check v-if="item.icon == 1" />
<img v-if="item.icon==2" src="@/assets/1x/1x/source9.png" class="icon"> <!-- <Filter v-if="item.icon==2" /> -->
</el-icon> <img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
</el-icon>
</h5> </h5>
</div> </div>
<h5 v-else>{{ code22 }}</h5> <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h4>HKD {{ props.data.HKD }}</h4> <h4 >HKD {{ props.data.HKD }}</h4>
<h6>{{props.data.price? $t(i18n.global.t('home.finalofferprice')):$t(i18n.global.t('home.offerpricerange')) }}</h6> <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
<h5>{{ props.data.time }}</h5> <h5>{{ props.data.time }}</h5>
<h6>{{props.data.listingDate? $t(i18n.global.t('home.CommencementofTradeDate')):$t(i18n.global.t('home.ExpectedPriceDeterminationDate')) }}</h6> <h6>{{ props.data.listingDate ?
$t(i18n.global.t('home.CommencementofTradeDate')) :
$t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
}}</h6>
</div> </div>
</div> </div>
</div> </div>
@ -47,47 +51,49 @@ import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png' import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { computed } from '@vue/reactivity';
import Aimage from "./image1/index.vue";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const store = ipoStore(); const store = ipoStore();
const currentDate = ref(new Date()) const currentDate = ref(new Date())
const expand=ref(false); const expand = ref(false);
const fontstyle = ref()
const router = useRouter() const router = useRouter()
const detailsItem=[ const detailsItem = ref([
{ {
name:proxy.$t('home.DealInitiated'), name: proxy.$t('home.DealInitiated'),
icon:1 icon: 0
}, },
{ {
name:proxy.$t('home.PublicOfferClosed'), name: proxy.$t('home.PublicOfferClosed'),
icon:1 icon: 0
}, },
{ {
name:proxy.$t('home.ApplicationValidated'), name: proxy.$t('home.ApplicationValidated'),
icon:1 icon: 0
}, },
{ {
name:proxy.$t('home.AllotmentConfirmed'), name: proxy.$t('home.AllotmentConfirmed'),
icon:2 icon: 0
} }
, { , {
name:proxy.$t('home.MoneySettlement'), name: proxy.$t('home.MoneySettlement'),
icon:0 icon: 0
}, },
{ {
name:proxy.$t('home.AllocationConfirmed'), name: proxy.$t('home.AllocationConfirmed'),
icon:0 icon: 0
},{ }, {
name: proxy.$t('home.placingApproved'), name: proxy.$t('home.placingApproved'),
icon:0 icon: 0
},{ }, {
name:proxy.$t('home.AllotmentResultsApproved'), name: proxy.$t('home.AllotmentResultsApproved'),
icon:0 icon: 0
},{ }, {
name:proxy.$t('home.TradingStarted'), name: proxy.$t('home.TradingStarted'),
icon:0 icon: 0
} }
] ])
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
@ -101,13 +107,20 @@ const props = defineProps({
trading: "", trading: "",
logolinks: "", logolinks: "",
status: 0, status: 0,
listingDate:"" listingDate: "",
ipoID:0
} }
} }
} }
}) })
const code22 = ref('') const code22 = ref('')
// onMounted(()=>{
// if(props.data.status == 80){
// }
// })
onUpdated(() => { onUpdated(() => {
var obj = { var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
@ -122,12 +135,25 @@ onUpdated(() => {
80: proxy.$t('home.Suspended'), 80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'), 90: proxy.$t('home.Cancelled'),
} }
// console.log('&&&&', props.data.status) console.log('&&&&', props.data.status)
const stron = props.data.status const stron = props.data.status
if (isValidKey(stron, obj)) { if (isValidKey(stron, obj)) {
code22.value = obj[stron]; code22.value = obj[stron];
// console.log('kkkk',stron,obj[stron]) // console.log('kkkk',stron,obj[stron])
} }
var tag = true;
detailsItem.value = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错 // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
function isValidKey( function isValidKey(
key: string | number | symbol, key: string | number | symbol,
@ -137,13 +163,15 @@ onUpdated(() => {
} }
}) })
const cardDetail=(e:any)=>{ const cardDetail = (e: any) => {
e.stopPropagation(); e.stopPropagation();
expand.value=!expand.value; expand.value = !expand.value;
} }
//路由传参 //路由传参
const handleclick = (item: any) => { const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.number) localStorage.setItem('ipoID', item.ipoID)
console.log(item);
localStorage.setItem('itemData', JSON.stringify(item)) localStorage.setItem('itemData', JSON.stringify(item))
router.push({ router.push({
name: 'Xdashboard', name: 'Xdashboard',
@ -159,8 +187,8 @@ const handleclick = (item: any) => {
width: 270px; width: 270px;
// height: 360px; // height: 360px;
height:fit-content; // height: fit-content;
min-height: 350px; // min-height: 350px;
margin-top: 30px; margin-top: 30px;
margin-left: 20px; margin-left: 20px;
background-color: #e7efec; background-color: #e7efec;
@ -168,11 +196,23 @@ const handleclick = (item: any) => {
overflow: hidden; overflow: hidden;
border: 1px solid #DDE2E6; border: 1px solid #DDE2E6;
cursor: pointer; cursor: pointer;
// font-family: "Calibri"; // font-family: "Calibri";
// @media screen and (max-width: 768px){ // @media screen and (max-width: 768px){
// width: 270rem; // width: 270rem;
// height: 360rem; // height: 360rem;
// } // }
.imglogo{
background-color: #23445a;
height: 15vh;
line-height: 15vh;
text-align: center;
overflow: hidden;
font-size: 38px;
font-weight: bold;
font-family: "Calibri";
color: #fff;
}
.title { .title {
background-color: #fff; background-color: #fff;
height: 120px; height: 120px;
@ -182,6 +222,7 @@ const handleclick = (item: any) => {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
font-family: "Calibri"; font-family: "Calibri";
// @media screen and (max-width: 768px){ // @media screen and (max-width: 768px){
// font-size: 80px; // font-size: 80px;
// } // }
@ -202,16 +243,19 @@ const handleclick = (item: any) => {
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;
font-family: "Calibri"; font-family: "Calibri";
.list-content { .list-content {
margin-top: 10px; margin-top: 10px;
width: 230px; width: 230px;
// height: 100%; // height: 100%;
.details{ .details {
.icon1{ .icon1 {
margin-left: 3px; margin-left: 3px;
transform: translateY(2.5px); transform: translateY(2.5px);
}
} }
}
h4 { h4 {
font-size: 20px; font-size: 20px;
color: #3b6181; color: #3b6181;
@ -230,7 +274,7 @@ const handleclick = (item: any) => {
h6 { h6 {
font-size: 12px; font-size: 12px;
color:#5e7e98; color: #5e7e98;
margin-bottom: 8px; margin-bottom: 8px;
// font-family: "Calibri"; // font-family: "Calibri";
} }
@ -238,14 +282,14 @@ const handleclick = (item: any) => {
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.icon{
@media screen and (max-width: 768px){ .icon {
@media screen and (max-width: 768px) {
width: 13rem; width: 13rem;
height: 13rem; height: 13rem;
} }
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
@ -257,18 +301,19 @@ const handleclick = (item: any) => {
// background-color: red; // background-color: red;
box-shadow: 10px 15px 10px #9A9A9A; box-shadow: 10px 15px 10px #9A9A9A;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bigbox { .bigbox {
width: 76vw; width: 76vw;
min-height: 310px; // min-height: 310rem;
height:fit-content; // height: fit-content;
margin-top: 14px !important; margin-top: 14px !important;
cursor: pointer; cursor: pointer;
} }
} }

79
src/views/dashBoard/image1/index.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div>
<div class="title" v-if="isImage">
<img v-lazy="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}
</div>
</div>
</template>
<script lang="ts">
export default {
name: "XEvent",
};
</script>
<script lang="ts" setup>
import {ref,onMounted,watch} from 'vue'
const props = defineProps({
src: {
type: String,
required:true
},
number: {
type: String,
required:true
}
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
isImage.value= false;
};
}catch(error){
console.log('error')
}
}
setTimeout(()=>{
checkImgExists(props.src)
},100)
</script>
<style lang="scss" scoped>
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.title2{
background-color: #23445a;
color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
text-align: center;
}
</style>

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

@ -1,16 +1,16 @@
<template> <template>
<div class="login1"> <div class="login1">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer" <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false" > style="background-color: #1C3F56;" :with-header="false">
<Drawer /> <Drawer :drawer = "drawer" @childfn="fn"/>
</el-drawer> </el-drawer>
<div class="wrap w"> <div class="wrap w">
<div class="leftbox"> <div class="leftbox">
<Item :data="data" /> <Item :data="data" />
<Nav /> <Nav />
</div> </div>
<div class="rightbox"> <div class="rightbox">
<Header :time="datatime" :openDrawer="openDrawer"/> <Header :time="datatime" :openDrawer="openDrawer" />
<div class="content"> <div class="content">
<div class="content-topleft"> <div class="content-topleft">
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p> <p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
@ -176,10 +176,10 @@ import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { getDataFromId } from "@/api/mock/home"; import { getDataFromId } from "@/api/mock/home";
const drawer = ref(false) const drawer = ref(false)
const handleDrawer = (done: () => void) => { const handleDrawer = (done: () => void) => {
done(); done();
} }
const openDrawer = () => { const openDrawer = () => {
drawer.value = true; drawer.value = true;
} }
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
// console.log('getCurrentInstance()中的proxy:', proxy) // console.log('getCurrentInstance()中的proxy:', proxy)
@ -259,7 +259,7 @@ const setBar = async () => {
const ipoID = localStorage.getItem('ipoID') const ipoID = localStorage.getItem('ipoID')
const result = await getIpo(ipoID as string) const result = await getIpo(ipoID as string)
// console.log(ipoID,(result as any).data[0]); // console.log(ipoID,(result as any).data[0]);
console.log(ipoID,(result as any).data[0]); console.log(ipoID, (result as any).data[0]);
// if((result as any).data[0].graph!=null){ // if((result as any).data[0].graph!=null){
// PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => { // PublicOfferX1.value = (result as any).data[0].graph.map((item: any) => {
@ -312,7 +312,7 @@ const getreferencedata = async () => {
initialpublic.value = res.poSharesInitial initialpublic.value = res.poSharesInitial
ApplicationQuantity.value = res.poApplicationQuantity ApplicationQuantity.value = res.poApplicationQuantity
subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial subscriptionRatio.value = res.poApplicationQuantity / res.poSharesInitial
subscriptionRatio.value = subscriptionRatio.value.toFixed(1) subscriptionRatio.value = subscriptionRatio?.value.toFixed(1)
initialinstituational.value = res.ioSharesInitial initialinstituational.value = res.ioSharesInitial
// console.log('initialinstituational', (res as any).data[0].poSharesInitial); // console.log('initialinstituational', (res as any).data[0].poSharesInitial);
code44.value = res.poSharesFinal code44.value = res.poSharesFinal
@ -628,7 +628,9 @@ const showMounth = (date: any) => {
// } // }
return date return date
} }
function fn(data:any){
drawer.value = data
}
@ -642,7 +644,9 @@ const showMounth = (date: any) => {
font-family: "Calibri"; font-family: "Calibri";
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
height: 2500px; height: fit-content;
width: 100vw;
overflow-x: hidden;
} }
} }
@ -650,6 +654,12 @@ const showMounth = (date: any) => {
display: flex; display: flex;
padding-top: 30px; padding-top: 30px;
@media screen and (max-width: 768px) {
width: fit-content;
height: fit-content;
overflow-x: hidden;
}
.leftbox { .leftbox {
width: 22%; width: 22%;
height: 100%; height: 100%;
@ -1124,20 +1134,20 @@ const showMounth = (date: any) => {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
width: 71vw; width: 71vw;
transform: translate(-4vw); margin-left: -4px;
} }
} }
:deep(.el-calendar-table) { :deep(.el-calendar-table) {
width: 450px; width: 450px;
// background-color: red !important;
padding-left: 10px 75px 27px !important; padding-left: 10px 75px 27px !important;
cursor: default; cursor: default;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
width: 80vw; width: 80vw;
transform: translate(-4vw); // transform: translate(-4vw);
margin-left: -10px;
} }
} }

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

@ -58,7 +58,13 @@ defineExpose({
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
position: relative; position: relative;
z-index: 1; z-index: 99;
@media screen and (max-width: 768px) {
display: flex;
flex-direction: column;
z-index: 9999;
}
li { li {
text-align: center; text-align: center;

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

@ -1,8 +1,7 @@
<template> <template>
<div class="bigbox" @click="handleclick(props.data)"> <div class="bigbox" @click="handleclick(props.data)">
<div class="title"> <Aimage :src="props.data.logolinks" :number="props.data.number"/>
<img v-lazy="props.data.logolinks" />
</div>
<div class="list"> <div class="list">
<div class="list-content"> <div class="list-content">
<div class="top"> <div class="top">
@ -25,9 +24,9 @@
</h5> </h5>
</div> </div>
<h5 v-else>{{ code22 }}</h5> <h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h4>HKD {{ props.data.HKD }}</h4> <h4 >HKD {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) : <h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange')) $t(i18n.global.t('home.offerpricerange'))
}}</h6> }}</h6>
@ -53,11 +52,13 @@ import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png' import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { computed } from '@vue/reactivity';
import Aimage from "./a-image/index.vue";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const store = ipoStore(); const store = ipoStore();
const currentDate = ref(new Date()) const currentDate = ref(new Date())
const expand = ref(false); const expand = ref(false);
const fontstyle = ref()
const router = useRouter() const router = useRouter()
const detailsItem = ref([ const detailsItem = ref([
{ {
@ -116,6 +117,11 @@ const props = defineProps({
const code22 = ref('') const code22 = ref('')
// onMounted(()=>{
// if(props.data.status == 80){
// }
// })
onUpdated(() => { onUpdated(() => {
var obj = { var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
@ -130,9 +136,10 @@ onUpdated(() => {
80: proxy.$t('home.Suspended'), 80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'), 90: proxy.$t('home.Cancelled'),
} }
// console.log('&&&&', props.data.status) console.log('&&&&', props.data.status)
const stron = props.data.status const stron = props.data.status
if (isValidKey(stron, obj)) { if (isValidKey(stron, obj)) {
code22.value = obj[stron]; code22.value = obj[stron];
// console.log('kkkk',stron,obj[stron]) // console.log('kkkk',stron,obj[stron])
@ -161,6 +168,24 @@ const cardDetail = (e: any) => {
e.stopPropagation(); e.stopPropagation();
expand.value = !expand.value; 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) => { const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.ipoID) localStorage.setItem('ipoID', item.ipoID)
@ -196,6 +221,17 @@ const handleclick = (item: any) => {
// width: 270rem; // width: 270rem;
// height: 360rem; // height: 360rem;
// } // }
.imglogo{
background-color: #23445a;
height: 15vh;
line-height: 15vh;
text-align: center;
overflow: hidden;
font-size: 38px;
font-weight: bold;
font-family: "Calibri";
color: #fff;
}
.title { .title {
background-color: #fff; background-color: #fff;
height: 120px; height: 120px;

79
src/views/login/components/a-image/index.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div>
<div class="title" v-if="isImage">
<img v-lazy="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}
</div>
</div>
</template>
<script lang="ts">
export default {
name: "XEvent",
};
</script>
<script lang="ts" setup>
import {ref,onMounted,watch} from 'vue'
const props = defineProps({
src: {
type: String,
required:true
},
number: {
type: String,
required:true
}
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
isImage.value= false;
};
}catch(error){
console.log('error')
}
}
setTimeout(()=>{
checkImgExists(props.src)
},1000)
</script>
<style lang="scss" scoped>
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.title2{
background-color: #23445a;
color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
text-align: center;
}
</style>

141
src/views/login/index.vue
View File

@ -3,7 +3,7 @@
<div class="box w"> <div class="box w">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer" <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false"> style="background-color: #1C3F56;" :with-header="false">
<Drawer /> <Drawer :drawer = "drawer" @childfn="fn"/>
</el-drawer> </el-drawer>
<div class="left"> <div class="left">
<div class="header"> <div class="header">
@ -11,12 +11,16 @@
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer"> <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
</div> </div>
<!-- <input class="search" /> --> <!-- <input class="search" /> -->
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable <div class="searchWrap">
class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect"> <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false"
<template #prefix> clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect"> <template #prefix>
</template> <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片"
</el-autocomplete> @click="handleSelect">
</template>
</el-autocomplete>
</div>
<div class="dropdown"> <div class="dropdown">
<img src="@/assets/1x/source4.png" class="first " @click="handleShowCup"> <img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
@ -205,7 +209,7 @@ const getHomeIpoList = async () => {
title: companyEngFull + ";" + companyChiFull, title: companyEngFull + ";" + companyChiFull,
status: status, status: status,
number: stkCode, number: stkCode,
HKD: priceFinal.toFixed(3) ? priceFinal.toFixed(3) : priceMinMax(), HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
time: listingDate ? listingDate : pricingDate, time: listingDate ? listingDate : pricingDate,
ipoID: ipoID, ipoID: ipoID,
price: priceFinal, price: priceFinal,
@ -213,11 +217,11 @@ const getHomeIpoList = async () => {
} }
function priceMinMax() { function priceMinMax() {
if (priceMin && priceMax) { if (priceMin && priceMax) {
return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}` return `${priceMin?.toFixed(3)} - ${priceMax.toFixed(3)}`
} else if (priceMin) { } else if (priceMin) {
return `${priceMin.toFixed(3)} - ` return `${priceMin?.toFixed(3)} - `
} else if (priceMax) { } else if (priceMax) {
return ` -${priceMax.toFixed(3)}` return ` -${priceMax?.toFixed(3)}`
} else { } else {
return " - " return " - "
} }
@ -482,7 +486,9 @@ const showMounth = (date: any) => {
return arr[2] + " " + arr[3] return arr[2] + " " + arr[3]
} }
} }
function fn(data:any){
drawer.value = data
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// @import '../../styles'; // @import '../../styles';
@ -513,6 +519,10 @@ const showMounth = (date: any) => {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@media screen and (max-width: 768px) {
width: 100vw;
overflow-x: hidden;
}
} }
.box { .box {
@ -521,6 +531,11 @@ const showMounth = (date: any) => {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
position: relative; position: relative;
@media screen and (max-width: 768px) {
width: 100vw;
overflow-x: hidden;
}
} }
.left { .left {
@ -763,11 +778,13 @@ const showMounth = (date: any) => {
} }
} }
:deep(.el-calendar-table){
:deep(.el-calendar-table) {
width: 420px; width: 420px;
transform: translateX(-20px); transform: translateX(-20px);
margin-top: 20px; margin-top: 20px;
} }
:deep(.el-button--small) { :deep(.el-button--small) {
border: none border: none
} }
@ -811,10 +828,12 @@ const showMounth = (date: any) => {
text-align: center; text-align: center;
font-weight: 800; font-weight: 800;
} }
:deep(.el-calendar-table thead th ){
padding:2px; :deep(.el-calendar-table thead th) {
padding: 2px;
font-weight: 550px; font-weight: 550px;
} }
:deep(.el-calendar .el-calendar-table .el-calendar-day) { :deep(.el-calendar .el-calendar-table .el-calendar-day) {
padding: 0px; padding: 0px;
text-align: center; text-align: center;
@ -862,23 +881,27 @@ const showMounth = (date: any) => {
:deep(.is-selected) { :deep(.is-selected) {
color: red; color: red;
} }
@media screen and (max-width: 768px){
.left{ @media screen and (max-width: 768px) {
.left {
width: 100vw; width: 100vw;
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.header{
height: 60px; .header {
.menuicon{ height: 60px;
display: block ;
.menuicon {
display: block;
margin-left: 5px; margin-left: 5px;
width: 25px; width: 25px;
height: 20px; height: 20px;
} }
.menu{
.menu {
img { img {
width: 25px; width: 25px;
@ -887,19 +910,22 @@ const showMounth = (date: any) => {
} }
} }
.dropdown1{
display: none; .dropdown1 {
} display: none;
.first{ }
.first {
width: 24px; width: 24px;
height: 28px; height: 28px;
margin-top: 6px; margin-top: 6px;
margin-left: 10px; margin-left: 1px;
} }
} }
} }
// :deep(.el-drawer__body){ // :deep(.el-drawer__body){
// background-color: red; // background-color: red;
// width: 80vw; // width: 80vw;
@ -911,27 +937,42 @@ const showMounth = (date: any) => {
} }
</style> </style>
<style> <style>
.header .el-input__wrapper { @media (min-width: 992px) {
margin-top: 20px; .header .el-input__wrapper {
margin-left: 20px; margin-top: 20px;
padding-left: 50px; margin-left: 20px;
width: 50vw; padding-left: 50px;
height: 50px; width: 50vw;
border-radius: 25px; height: 50px;
font-size: 25px; border-radius: 25px;
border: none; font-size: 25px;
outline: none; border: none;
outline: none;
}
.el-input__prefix-inner {
transform: translateX(-35px);
}
} }
.el-input__prefix-inner {
transform: translateX(-35px);
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.el-input {
margin: 10px !important;
}
.el-input__prefix-inner {
transform: translateX(-35px);
}
.header .el-input__wrapper { .header .el-input__wrapper {
margin-top: 0; margin-top: 0 !important;
margin-left: 0; margin-left: 0 !important;
padding-left: 50px; padding-left: 50px;
width: 61vw; width: 61vw;
height: 30px; height: 30px;

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

@ -66,6 +66,15 @@ import { getCurrentInstance, onUnmounted } from 'vue'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
const store = ipoStore() const store = ipoStore()
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])
const props = defineProps({
drawer:Boolean
})
let drawer = props.drawer
console.log(props);
const state = ref(1) const state = ref(1)
// const drawer = ref(true) // const drawer = ref(true)
@ -85,10 +94,12 @@ const setState = (number: number) => {
} }
} }
const handleLang1 = () => { const handleLang1 = () => {
if (proxy.$i18n.locale = 'en') { if (proxy.$i18n.locale = 'en') {
proxy.$i18n.locale = 'en' proxy.$i18n.locale = 'en'
} }
store.setLocale(1) store.setLocale(1)
emit('childfn',!drawer)
} }
const handleLang2 = () => { const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') { if (proxy.$i18n.locale = 'zhCt') {
@ -97,16 +108,16 @@ const handleLang2 = () => {
} }
store.setLocale(2) store.setLocale(2)
emit('childfn',!drawer)
} }
const handleLang3 = () => { const handleLang3 = () => {
if (proxy.$i18n.locale = 'zhCn') { if (proxy.$i18n.locale = 'zhCn') {
proxy.$i18n.locale = 'zhCn' proxy.$i18n.locale = 'zhCn'
} }
store.setLocale(3) store.setLocale(3)
emit('childfn',!drawer)
} }
// const openDrawer = () => {
// drawer.value = false;
// }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

4
vite.config.ts
View File

@ -55,17 +55,17 @@ export default defineConfig((mode: ConfigEnv) => {
}, },
}, },
server: { server: {
host:"0.0.0.0",
port: +env.VITE_PORT, port: +env.VITE_PORT,
open: env.VITE_OPEN === "true", open: env.VITE_OPEN === "true",
// 配置代理服务器 // 配置代理服务器
proxy: { proxy: {
"/api": { "/api": {
target: "http://192.168.2.6:8080", target: "http://192.168.2.10:8080",
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""), rewrite: (path) => path.replace(/^\/api/, ""),
}, },
}, },
host: '0.0.0.0'
}, },
// pages:{ // pages:{
// move: { // move: {