356 lines
9.3 KiB
Vue
356 lines
9.3 KiB
Vue
<template>
|
|
|
|
<div class="wrapddd">
|
|
<div class="imgWrap22222">
|
|
<img src="@/assets/1x/1x/source8.png" alt="menu">
|
|
<h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ store.$state.locale == 1 ?
|
|
data.title.split(";")[0] : data.title.split(";")[1] }}
|
|
</h4>
|
|
</div>
|
|
<div class="nav">
|
|
<li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
|
|
<img src="@/assets/1x/source10.png" alt="menu">
|
|
<span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
|
|
</li>
|
|
<li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
|
|
<img src="@/assets/1x/source5.png" alt="menu">
|
|
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
|
|
</li>
|
|
<li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
|
|
<!-- <div class="ipoWrap">
|
|
<div>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
<img src="@/assets/1x/source2.png" alt="menu">
|
|
<span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
|
|
|
|
|
|
</li>
|
|
<li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
|
|
<img src="@/assets/1x/source6.png" alt="menu">
|
|
<span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
|
|
|
|
</li>
|
|
|
|
<li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
|
|
<div class="ipoWrap">
|
|
<div class="icon">
|
|
<img src="@/assets/1x/1x/source6.png" alt="menu">
|
|
<span>{{ $t(i18n.global.t('home.Languages')) }}</span>
|
|
</div>
|
|
<div class="arrow" :style="{
|
|
transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
|
|
}
|
|
">
|
|
<img src="@/assets/1x/source14.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
|
|
<li @click="handleLang1">English</li>
|
|
<li @click="handleLang2">繁體中文</li>
|
|
<li @click="handleLang3">简体中文</li>
|
|
</div>
|
|
</li>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: "drawer",
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
import { inject } from 'vue'
|
|
import { ipoStore } from "@/stores/ipo"
|
|
import { useRouter } from "vue-router";
|
|
//import calendar from '@/views/IpoCalendar/index.vue'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
|
import moment from "moment"
|
|
import i18n from '@/locales'
|
|
import { getCurrentInstance } from 'vue'
|
|
import Event from '@/views/login/components/Event.vue';
|
|
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
|
|
import { getDataFromId } from "@/api/mock/home"
|
|
const { proxy } = (getCurrentInstance() as any)
|
|
const dayValue = ref(new Date())
|
|
const calendar = ref()
|
|
const handleDrawer = (done: () => void) => {
|
|
done();
|
|
}
|
|
//const Eventdata = ref([])
|
|
const selectDate = (val: string) => {
|
|
calendar.value.selectDate(val)
|
|
}
|
|
|
|
const dayTime = ref()
|
|
const getcalendar = async () => {
|
|
const res = await getDate()
|
|
dayTime.value = (res as any).data
|
|
console.log(dayTime.value);
|
|
}
|
|
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]
|
|
}
|
|
}
|
|
|
|
const drawer2 = ref(false)
|
|
const radio1 = ref('Option 1')
|
|
const handleClose = (done: () => void) => {
|
|
done()
|
|
}
|
|
//const drawer1 = ref(false)
|
|
const setState = (number: number) => {
|
|
store.setMobileActiveShow(number)
|
|
if (number == 1) {
|
|
proxy.$router.push("/home")
|
|
|
|
}
|
|
if (number == 2) {
|
|
proxy.$router.push("/dashboard")
|
|
}
|
|
if (number == 3) {
|
|
proxy.$router.push("/IPO")
|
|
|
|
}
|
|
if (number == 4) {
|
|
proxy.$router.push("/IPOcalendar")
|
|
store.setMobileActiveShow(1)
|
|
// emit('childfn', !drawer1)
|
|
// emit('childfn', !drawer)
|
|
// drawer1.value = true
|
|
|
|
// console.log(drawer1.value);
|
|
|
|
}
|
|
setTimeout(() => {
|
|
handleOnDrwaer(false)
|
|
})
|
|
}
|
|
//console.log(drawer1.value);
|
|
|
|
const dialogVisible = ref(true)
|
|
const route = useRouter()
|
|
const store = ipoStore()
|
|
const showalanguge = ref(false)
|
|
//const { proxy } = (getCurrentInstance() as any)
|
|
let emit = defineEmits(['childfn'])
|
|
//let emit1 = defineEmits(['childfn1'])
|
|
const reflashRouter = inject('reflashRouter') as Function
|
|
const handleOnDrwaer = inject('handleOnDrwaer') as Function
|
|
|
|
const props = defineProps({
|
|
drawer: Boolean,
|
|
drawer1:Boolean
|
|
})
|
|
const data = ref()
|
|
onMounted(
|
|
() => {
|
|
// data.value = JSON.parse(localStorage.getItem('itemData') as string)
|
|
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
|
|
data.value = obj
|
|
// console.log(data.value);
|
|
// text();
|
|
}
|
|
)
|
|
let drawer = props.drawer
|
|
|
|
let drawer1 = props.drawer1
|
|
//console.log(props);
|
|
|
|
const state = ref(1)
|
|
// const drawer = ref(true)
|
|
|
|
const setState2 = (number: number) => {
|
|
store.setMobileActiveShow(number)
|
|
showalanguge.value = !showalanguge.value
|
|
}
|
|
const handleLang1 = () => {
|
|
|
|
if (proxy.$i18n.locale = 'en') {
|
|
proxy.$i18n.locale = 'en'
|
|
}
|
|
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') {
|
|
proxy.$i18n.locale = 'zhCn'
|
|
}
|
|
store.setLocale(3)
|
|
emit('childfn', !drawer)
|
|
// IpoReflash()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapddd {
|
|
width: 80vw;
|
|
transform: translateX(-20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.imgWrap22222 {
|
|
margin-top: 20px;
|
|
width: fit-content;
|
|
height: 20px;
|
|
margin-left: 15px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
// background-color: black;
|
|
img {
|
|
width: 25px;
|
|
height: 20px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 18px;
|
|
margin-left: 10px;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
height: fit-content;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
|
|
>li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-self: center;
|
|
min-height: 50px;
|
|
padding-left: 15px;
|
|
margin-top: 10px;
|
|
background-color: #B4C0C7;
|
|
|
|
&.active {
|
|
background-color: #fff
|
|
}
|
|
|
|
img {
|
|
width: 22px;
|
|
height: 22px;
|
|
// background-color: red;
|
|
}
|
|
|
|
span {
|
|
margin-left: 25px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1C3F56;
|
|
display: block;
|
|
line-height: 50px;
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
|
|
.IPO {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: fit-content;
|
|
|
|
.lang {
|
|
margin-left: -90px;
|
|
color: #1C3F56;
|
|
font-size: 18px;
|
|
|
|
>li {
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
.report {
|
|
margin-left: -120px;
|
|
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.ipoWrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
|
|
.icon {
|
|
min-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-self: center;
|
|
|
|
img {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
span {
|
|
margin-left: 25px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1C3F56;
|
|
display: block;
|
|
line-height: 50px;
|
|
padding: 0;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
.arrow {
|
|
width: 12px;
|
|
height: 19px;
|
|
margin-right: 14px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
span {
|
|
display: inline-block;
|
|
// transform: translateY(-3px);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
/* .el-drawer__body{
|
|
padding: 0
|
|
} */
|
|
</style> |