This commit is contained in:
parent
21c1ea7551
commit
f5a85c78bd
18
src/App.vue
18
src/App.vue
|
@ -7,13 +7,17 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, ref, onBeforeMount } from 'vue'
|
||||
import { defineComponent, ref, onBeforeMount,onMounted, watch } from 'vue'
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import { ipoStore } from "@/stores/ipo"
|
||||
const store = ipoStore();
|
||||
onBeforeMount(() => {
|
||||
setFontSize()
|
||||
})
|
||||
function isMobileFn() {
|
||||
return 768 >= document.documentElement.clientWidth;
|
||||
}
|
||||
const isMobile = ref(isMobileFn() ? true : false);
|
||||
const setFontSize = () => {
|
||||
// 以ipone6手机为例,1rem=1px; 以后就在ipone6手机模拟器开发,把rem当作px用就行了
|
||||
var font = document.documentElement.clientWidth / 375;
|
||||
|
@ -34,7 +38,17 @@ const setFontSize = () => {
|
|||
// },
|
||||
|
||||
// })
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', function () {
|
||||
isMobile.value = isMobileFn();
|
||||
if (isMobile.value) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
})
|
||||
watch(isMobile, (newValue) => {
|
||||
window.location.reload()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
|
|
@ -1,29 +1,31 @@
|
|||
import { createRouter, createWebHistory ,createWebHashHistory} from "vue-router";
|
||||
import { staticRoutes } from "@/router/routes";
|
||||
import {modelRoutes} from "./routesModel"
|
||||
let shouRoute=[] as any;
|
||||
function setRoutes(){
|
||||
IsMobile();
|
||||
window.addEventListener('resize', function() {
|
||||
IsMobile2()
|
||||
})
|
||||
}
|
||||
function IsMobile(){
|
||||
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
|
||||
shouRoute=modelRoutes;
|
||||
}else{
|
||||
shouRoute=staticRoutes;
|
||||
}
|
||||
}
|
||||
function IsMobile2(){
|
||||
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
|
||||
window.location.reload()
|
||||
}else{
|
||||
}
|
||||
}
|
||||
// import {modelRoutes} from "./routesModel"
|
||||
// let shouRoute=[] as any;
|
||||
// function setRoutes(){
|
||||
// window.addEventListener('resize', function() {
|
||||
// // IsMobile3()
|
||||
// })
|
||||
// }
|
||||
// function IsMobile(){
|
||||
// if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
|
||||
// shouRoute=modelRoutes;
|
||||
// }else{
|
||||
// shouRoute=staticRoutes;
|
||||
// }
|
||||
// }
|
||||
// function IsMobile2(){
|
||||
// if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
|
||||
// window.location.reload()
|
||||
// }else{
|
||||
// }
|
||||
// }
|
||||
// function IsMobile3(){
|
||||
|
||||
// }
|
||||
|
||||
|
||||
setRoutes();
|
||||
// setRoutes();
|
||||
|
||||
|
||||
var router = createRouter({
|
||||
|
|
|
@ -154,8 +154,8 @@ const Offerings = ref([
|
|||
name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
|
||||
info2: "10,000,000",
|
||||
table: {
|
||||
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: 50, align: "right" },
|
||||
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: 50, align: "right" }],
|
||||
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel()?33:50, align: "right" },
|
||||
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel()?38:50, align: "right" }],
|
||||
lists: [
|
||||
{
|
||||
number: '1',
|
||||
|
@ -194,7 +194,7 @@ const Offerings = ref([
|
|||
{
|
||||
name: proxy.$t('ipo.Offering.DenominationTable'),
|
||||
table: {
|
||||
title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: 50, align: "right" },
|
||||
title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel()?35:50, align: "right" },
|
||||
{ header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
|
||||
lists: [
|
||||
{
|
||||
|
@ -273,10 +273,10 @@ const Timetable = ref([
|
|||
info2: "09:00",
|
||||
table: {
|
||||
title: [
|
||||
{ header: " ", content: "des", width: 43, align: "left" },
|
||||
{ header: " ", content: "des",width: isMobel()?49: 43, align: "left" },
|
||||
{ width: 12 }, //通过加一段空结构来调整表头的位置
|
||||
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: 25, align: "left" },
|
||||
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: 20, align: "left" }],
|
||||
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel()?49: 43, align: "left" },
|
||||
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel()?49: 43, align: "left" }],
|
||||
lists: [
|
||||
{
|
||||
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
|
||||
|
@ -364,6 +364,9 @@ const getreferencedata = async () => {
|
|||
setTransaction((res as any).data[0])
|
||||
setTimeTable((res as any).data[0])
|
||||
}
|
||||
function isMobel(){
|
||||
return 768 >= document.documentElement.clientWidth;
|
||||
}
|
||||
function setInformation(mockRes: any) {
|
||||
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
|
||||
const placeOfincorporation = ref('')
|
||||
|
|
|
@ -181,8 +181,8 @@ const handleclick = (item: any) => {
|
|||
|
||||
width: 270px;
|
||||
// height: 360px;
|
||||
height: fit-content;
|
||||
min-height: 350px;
|
||||
// height: fit-content;
|
||||
// min-height: 350px;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
background-color: #e7efec;
|
||||
|
@ -290,8 +290,8 @@ const handleclick = (item: any) => {
|
|||
.bigbox {
|
||||
|
||||
width: 76vw;
|
||||
min-height: 310rem;
|
||||
height: fit-content;
|
||||
// min-height: 310rem;
|
||||
// height: fit-content;
|
||||
|
||||
margin-top: 14rem !important;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -490,6 +490,25 @@ const showMounth = (date: any) => {
|
|||
// .el-calendar{
|
||||
// font-family: "Calibri"
|
||||
// }
|
||||
// @media screen and (max-width: 768px){
|
||||
// .left{
|
||||
// width: 100vw;
|
||||
|
||||
// * {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
// .header{
|
||||
// height: 60rem;
|
||||
// }
|
||||
// .menuicon{
|
||||
// display: block;
|
||||
// margin-left: 5rem;
|
||||
// width: 25rem;
|
||||
// height: 20rem;
|
||||
// }
|
||||
// }
|
||||
.login2 {
|
||||
background-image: url("@/assets/1x/beijingtu.png");
|
||||
background-repeat: no-repeat;
|
||||
|
@ -500,31 +519,22 @@ const showMounth = (date: any) => {
|
|||
.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%;
|
||||
// font-family: "Calibri";
|
||||
// width: 100%;
|
||||
// background-color: gray;
|
||||
}
|
||||
|
||||
.left {
|
||||
|
||||
width: 70%;
|
||||
// @media screen and (max-width: 768px) {
|
||||
// width: 100vw;
|
||||
|
||||
// height: 100vh;
|
||||
// float: left;
|
||||
// background-color: red;
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 100vw;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
// * {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
@ -532,47 +542,48 @@ const showMounth = (date: any) => {
|
|||
// padding-left: 35px;
|
||||
height: 80px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
height: 60rem;
|
||||
// background-color: red;
|
||||
}
|
||||
// @media screen and (max-width: 768px) {
|
||||
// height: 60rem;
|
||||
// // background-color: red;
|
||||
// }
|
||||
|
||||
.menuicon {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
margin-left: 5rem;
|
||||
|
||||
}
|
||||
// @media screen and (max-width: 768px) {
|
||||
// display: block;
|
||||
// margin-left: 5rem;
|
||||
// width: 25rem;
|
||||
// height: 20rem;
|
||||
// }
|
||||
}
|
||||
|
||||
.menu {
|
||||
@media screen and (max-width: 768px) {
|
||||
img {
|
||||
width: 25rem;
|
||||
height: 20rem;
|
||||
// .menu {
|
||||
// @media screen and (max-width: 768px) {
|
||||
// img {
|
||||
// width: 25rem;
|
||||
// height: 20rem;
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
// }
|
||||
// }
|
||||
|
||||
.inline-input w-50 {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
// .inline-input w-50 {
|
||||
// width: 200px;
|
||||
// height: 50px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
// @media screen and (max-width: 768px) {
|
||||
// display: none;
|
||||
|
||||
:deep(.imgSearch123) {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
// :deep(.imgSearch123) {
|
||||
// width: 10rem;
|
||||
// height: 10rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
.my-autocomplete li {
|
||||
line-height: normal;
|
||||
|
@ -619,9 +630,9 @@ const showMounth = (date: any) => {
|
|||
position: relative;
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
// @media screen and (max-width: 768px) {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.alert {
|
||||
position: absolute;
|
||||
|
@ -646,12 +657,12 @@ const showMounth = (date: any) => {
|
|||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 24rem;
|
||||
height: 28rem;
|
||||
margin-top: 6rem;
|
||||
margin-left: 10rem;
|
||||
}
|
||||
// @media screen and (max-width: 768px) {
|
||||
// width: 24rem;
|
||||
// height: 28rem;
|
||||
// margin-top: 6rem;
|
||||
// margin-left: 10rem;
|
||||
// }
|
||||
}
|
||||
|
||||
.second {
|
||||
|
@ -787,14 +798,14 @@ const showMounth = (date: any) => {
|
|||
|
||||
}
|
||||
|
||||
:deep(.header .el-input__wrapper) {
|
||||
@media screen and (max-width: 768px) {
|
||||
// margin-left: 13vw;
|
||||
// height: 5vh;
|
||||
// background-color: #000000;
|
||||
}
|
||||
// :deep(.header .el-input__wrapper) {
|
||||
// @media screen and (max-width: 768px) {
|
||||
// // margin-left: 13vw;
|
||||
// // height: 5vh;
|
||||
// // background-color: #000000;
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
:deep(.el-calendar-table td) {
|
||||
border: none;
|
||||
|
@ -852,6 +863,46 @@ const showMounth = (date: any) => {
|
|||
:deep(.is-selected) {
|
||||
color: red;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.left{
|
||||
width: 100vw;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.header{
|
||||
height: 60rem;
|
||||
.menuicon{
|
||||
display: block ;
|
||||
margin-left: 5rem;
|
||||
width: 25rem;
|
||||
height: 20rem;
|
||||
}
|
||||
.menu{
|
||||
|
||||
img {
|
||||
width: 25rem;
|
||||
height: 20rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.dropdown1{
|
||||
display: none;
|
||||
}
|
||||
.first{
|
||||
width: 24rem;
|
||||
height: 28rem;
|
||||
margin-top: 6rem;
|
||||
margin-left: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.header .el-input__wrapper {
|
||||
|
|
|
@ -60,11 +60,12 @@ export default defineConfig((mode: ConfigEnv) => {
|
|||
// 配置代理服务器
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://192.168.2.11:8080",
|
||||
target: "http://192.168.2.10:8080",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||
},
|
||||
},
|
||||
host: '0.0.0.0'
|
||||
},
|
||||
// pages:{
|
||||
// move: {
|
||||
|
|
Loading…
Reference in New Issue