iopProject
This commit is contained in:
zhuzhuxia233
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="wrap22">
|
||||
|
||||
<div class="title">{{ title }}</div>
|
||||
<ul>
|
||||
<li v-for="(item, index) in data.info" :key="index">
|
||||
<div class="name">
|
||||
<div v-if="item.name">{{ item.name }}</div>
|
||||
<div v-if="item.name2" class="name2">{{ item.name2 }}</div>
|
||||
|
||||
</div>
|
||||
<div v-if="item.infos">
|
||||
|
||||
<div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }}
|
||||
</div>
|
||||
<div class="info" v-else>-</div>
|
||||
|
||||
</div>
|
||||
<div v-if="item.info || item.info2 || item.info2s">
|
||||
<div class="info" :style="{
|
||||
height: item.info2s && '30px',
|
||||
}">
|
||||
<div v-if="item.info">
|
||||
<a :href="item.href" v-if="item.href">{{ item.info }}</a>
|
||||
<span v-else>{{ item.info }}</span>
|
||||
|
||||
</div>
|
||||
<div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
|
||||
<a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
|
||||
<span v-else>{{ item.info2 }}</span>
|
||||
</div>
|
||||
<div v-if="item.info2s" class="info2">
|
||||
<div v-for="(t, index) in item.info2s" :key="index">{{ t }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table" v-if="item.table">
|
||||
<el-table :data="item.table.lists" stripe style="width: 100%;">
|
||||
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
|
||||
:label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red"
|
||||
:align="title.align" :key="index" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Ipocontent",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
interface obj {
|
||||
name: string
|
||||
info?: string | null | undefined
|
||||
href?: string;
|
||||
href2?: string;
|
||||
infos?: Array<string>
|
||||
name2?: string
|
||||
info2?: string | null | undefined
|
||||
info2s?: Array<string>
|
||||
info2Top?: string
|
||||
table?: {
|
||||
title: { header?: string, content?: string, width: number, align?: string }[],
|
||||
lists: { des?: string, number?: string, persent?: string }[]
|
||||
}
|
||||
}
|
||||
// width值传1-100 代表的是表头宽度的百分比
|
||||
const data = defineProps<{ info: obj[], title: string }>()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap22 {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-left: 15px solid #98C2F2;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// height: 600px;
|
||||
.title {
|
||||
font-size: 27px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: #1C3F56;
|
||||
font-family: "Calibri";
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
margin-top: 15px;
|
||||
|
||||
li {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.name {
|
||||
color: #8AA1B6;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
||||
.name2 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 450px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 18px;
|
||||
line-height: 16px;
|
||||
color: #355D80;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
font-family: "Calibri";
|
||||
|
||||
a {
|
||||
color: #355D80;
|
||||
}
|
||||
|
||||
.info2 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 800px;
|
||||
margin-top: 20px;
|
||||
|
||||
:deep(.el-table) {
|
||||
color: #355D80;
|
||||
}
|
||||
|
||||
:deep(.el-table thead) {
|
||||
color: #355D80;
|
||||
}
|
||||
|
||||
:deep(.cell) {
|
||||
// max-width: 310px;
|
||||
// color: red;
|
||||
font-family: 'Calibri';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<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 />
|
||||
</el-drawer>
|
||||
<div class="hleft">
|
||||
<div class="left-1">
|
||||
<div class="menu">
|
||||
<img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
|
||||
</div>
|
||||
<div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="search" @click="handlesearch">
|
||||
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="downLoad">
|
||||
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
|
||||
<img src="@/assets/1x/source3.png" alt="找不到图片">
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "IPOHeader",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import Drawer from '@/views/login/modelComponents/Drawer.vue'
|
||||
import { ref } from 'vue'
|
||||
const drawer = ref(false)
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const handlesearch = ()=>{
|
||||
proxy.$router.push("/home")
|
||||
}
|
||||
const handleDrawer = (done: () => void) => {
|
||||
done();
|
||||
}
|
||||
const openDrawer = () => {
|
||||
drawer.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headerWrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@media screen and (max-width: 768px){
|
||||
|
||||
.left-1{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
.hleft {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: fit-content;
|
||||
.menu{
|
||||
display: none;
|
||||
@media screen and (max-width: 768px){
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: #2B4A60;
|
||||
font-size: 45px;
|
||||
font-weight:bolder;
|
||||
@media screen and (max-width: 768px){
|
||||
font-size: 26rem;
|
||||
transform: translateX(-60rem);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin-top: 5px;
|
||||
background-color: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
transform: translateY(5px);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
transform: translateY(-0.5vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downLoad {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
.report {
|
||||
font-size: 28px;
|
||||
color: #1C3F56;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
margin-top: 2px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<a @click="scrollto(index)" v-for="(item, index) in list" :key="index">{{ item }}</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "IpoNav",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineProps } from "vue"
|
||||
import i18n from '@/locales'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
const { proxy } = (getCurrentInstance() as any)
|
||||
const props = defineProps<{ scroll: Function }>()
|
||||
const scrollto = (index: number) => {
|
||||
const ref11 = "i" + index + "TOP"
|
||||
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')])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
// @media screen and (max-width: 768px){
|
||||
// width: 100vw;
|
||||
// }
|
||||
a {
|
||||
// margin-left: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 20px;
|
||||
color: #738B9B;
|
||||
font-weight: 700;
|
||||
border-radius: 30px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #1C3F56;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user