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

ipo页面移动端适配

Browse Source
This commit is contained in:
zhuzhuxia233
2023-04-16 20:51:53 +08:00
parent f569b35229
commit 9c231fc2c3
5 changed files with 377 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/IPO/components/IpoContent.vue
+112 -35
View File
@@ -4,43 +4,67 @@
<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 class="llrr">
<div class="left">
<div class="name">
<div v-if="item.name">{{ item.name }}</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 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>
</div>
</div>
<div class="info" v-else>-</div>
<div class="right" v-if="item.name2 || item.info2 || item.info2s">
<div class="name">
</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 v-if="item.name2" class="name2">{{ item.name2 }}</div>
</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 v-if="item.info2 || item.info2s">
<div class="info" :style="{
height: item.info2s && '30px',
}">
<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>
</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"
:label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px;"
:align="title.align" :key="index" />
</el-table>
</div>
<div class="Modeltable" 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="320 * (title.width / 100)" :align="title.align" :key="index" />
</el-table>
</div>
</li>
@@ -84,6 +108,38 @@ const data = defineProps<{ info: obj[], title: string }>()
border-left: 15px solid #98C2F2;
margin-bottom: 20px;
@media screen and (max-width: 768px) {
overflow: hidden;
}
.Modeltable {
display: none;
@media screen and (max-width: 768px) {
display: block;
margin-top: 10rem;
:deep(.el-table) {
color: #355D80;
}
:deep(.el-table thead) {
color: #355D80;
}
:deep(.cell) {
font-family: 'Calibri';
}
}
}
@media screen and (max-width: 768px) {
margin: 0 15rem 0 15rem;
// overflow: hidden;
}
// height: 600px;
.title {
font-size: 27px;
@@ -99,19 +155,40 @@ const data = defineProps<{ info: obj[], title: string }>()
// flex-direction: column;
margin-top: 15px;
li {
margin-bottom: 25px;
.llrr {
display: flex;
@media screen and (max-width: 768px) {
flex-direction: column;
}
}
.left {
width: 450px;
}
.right {
width: 200px;
@media screen and (max-width: 768px) {
margin-top: 10rem;
}
}
.name {
color: #8AA1B6;
font-size: 12px;
position: relative;
.name2 {
position: absolute;
top: 0px;
left: 450px;
}
.name2 {}
}
@@ -124,22 +201,23 @@ const data = defineProps<{ info: obj[], title: string }>()
margin-top: 8px;
position: relative;
font-family: "Calibri";
a {
color: #355D80;
}
.info2 {
position: absolute;
top: 0px;
left: 450px;
}
.info2 {}
}
.table {
width: 800px;
margin-top: 20px;
@media screen and (max-width: 768px) {
display: none;
}
:deep(.el-table) {
color: #355D80;
}
@@ -149,8 +227,7 @@ const data = defineProps<{ info: obj[], title: string }>()
}
:deep(.cell) {
// max-width: 310px;
// color: red;
font-family: 'Calibri';
}
}
src/views/IPO/components/IpoHeader.vue
+58 -42
View File
@@ -1,7 +1,7 @@
<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" >
style="background-color: #1C3F56;" :with-header="false">
<Drawer />
</el-drawer>
<div class="hleft">
@@ -9,16 +9,16 @@
<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 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 class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang"/>
</div>
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang" />
</div>
</div>
<!-- <div class="downLoad">
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@@ -35,14 +35,14 @@ export default {
<script lang="ts" setup>
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 { ref } from 'vue'
import Lang from "@/views/login/components/Lang.vue";
const lang = ref()
const drawer = ref(false)
const { proxy } = (getCurrentInstance() as any)
const handlesearch = ()=>{
const handlesearch = () => {
proxy.$router.push("/home")
}
const handleDrawer = (done: () => void) => {
@@ -51,9 +51,9 @@ const handleDrawer = (done: () => void) => {
const openDrawer = () => {
drawer.value = true;
}
const handleShowLang=(e:any)=>{
console.log(1111)
e.stopPropagation()
const handleShowLang = (e: any) => {
console.log(1111)
e.stopPropagation()
lang.value.showLang = !lang.value.showLang
}
onMounted(() => {
@@ -68,7 +68,7 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
.langWrap{
.langWrap {
// position: absolute;
// // top:-20px;
// left: 260px;
@@ -76,54 +76,68 @@ onUnmounted(() => {
// align-items: end;
position: relative;
margin-left: 15px;
.second {
width: 32px;
height: 36px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
}
@media screen and (max-width: 768px) {
display: none;
}
.second {
width: 32px;
height: 36px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
}
}
.lang{
position: absolute;
top:50px;
left: -50px;
}
}
.lang {
position: absolute;
top: 50px;
left: -50px;
}
.headerWrap {
display: flex;
justify-content: space-between;
@media screen and (max-width: 768px){
.left-1{
@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;
position: relative;
.menu{
display: none;
@media screen and (max-width: 768px){
display: block;
}
}
position: relative;
.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);
font-weight: bolder;
@media screen and (max-width: 768px) {
font-size: 26rem;
transform: translateX(-60rem);
}
}
.search {
margin-top: 5px;
background-color: #fff;
@@ -141,7 +155,8 @@ onUnmounted(() => {
width: 18px;
height: 18px;
}
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
transform: translateY(-0.5vh);
}
}
@@ -151,6 +166,7 @@ onUnmounted(() => {
display: flex;
height: 30px;
align-items: center;
.report {
font-size: 28px;
color: #1C3F56;
src/views/IPO/components/IpoNav.vue
+9 -3
View File
@@ -28,9 +28,13 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
.item {
margin-top: 18px;
display: flex;
// @media screen and (max-width: 768px){
// width: 100vw;
// }
@media screen and (max-width: 768px) {
margin-top: 0px;
width: 100vw;
overflow-x: scroll;
}
a {
// margin-left: 5px;
padding: 5px 10px;
@@ -39,6 +43,8 @@ const list = ref([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListin
font-weight: 700;
border-radius: 30px;
text-decoration: none;
width: fit-content;
white-space: nowrap;
&:hover {
background-color: #1C3F56;