This commit is contained in:
parent
21c1ea7551
commit
f5a85c78bd
18
src/App.vue
18
src/App.vue
|
@ -7,13 +7,17 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineComponent, ref, onBeforeMount } 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"
|
||||||
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;
|
||||||
|
@ -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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" >
|
<style lang="scss" >
|
||||||
|
|
|
@ -1,29 +1,31 @@
|
||||||
import { createRouter, createWebHistory ,createWebHashHistory} from "vue-router";
|
import { createRouter, createWebHistory ,createWebHashHistory} from "vue-router";
|
||||||
import { staticRoutes } from "@/router/routes";
|
import { staticRoutes } from "@/router/routes";
|
||||||
import {modelRoutes} from "./routesModel"
|
// import {modelRoutes} from "./routesModel"
|
||||||
let shouRoute=[] as any;
|
// let shouRoute=[] as any;
|
||||||
function setRoutes(){
|
// function setRoutes(){
|
||||||
IsMobile();
|
// window.addEventListener('resize', function() {
|
||||||
window.addEventListener('resize', function() {
|
// // IsMobile3()
|
||||||
IsMobile2()
|
// })
|
||||||
})
|
// }
|
||||||
}
|
// function IsMobile(){
|
||||||
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)){
|
||||||
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;
|
||||||
shouRoute=modelRoutes;
|
// }else{
|
||||||
}else{
|
// shouRoute=staticRoutes;
|
||||||
shouRoute=staticRoutes;
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// function IsMobile2(){
|
||||||
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)){
|
||||||
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()
|
||||||
window.location.reload()
|
// }else{
|
||||||
}else{
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// function IsMobile3(){
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
setRoutes();
|
// setRoutes();
|
||||||
|
|
||||||
|
|
||||||
var router = createRouter({
|
var router = createRouter({
|
||||||
|
|
|
@ -154,8 +154,8 @@ const Offerings = ref([
|
||||||
name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
|
name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
|
||||||
info2: "10,000,000",
|
info2: "10,000,000",
|
||||||
table: {
|
table: {
|
||||||
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", 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: 50, align: "right" }],
|
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel()?38:50, align: "right" }],
|
||||||
lists: [
|
lists: [
|
||||||
{
|
{
|
||||||
number: '1',
|
number: '1',
|
||||||
|
@ -194,7 +194,7 @@ const Offerings = ref([
|
||||||
{
|
{
|
||||||
name: proxy.$t('ipo.Offering.DenominationTable'),
|
name: proxy.$t('ipo.Offering.DenominationTable'),
|
||||||
table: {
|
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" }],
|
{ header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
|
||||||
lists: [
|
lists: [
|
||||||
{
|
{
|
||||||
|
@ -273,10 +273,10 @@ const Timetable = ref([
|
||||||
info2: "09:00",
|
info2: "09:00",
|
||||||
table: {
|
table: {
|
||||||
title: [
|
title: [
|
||||||
{ header: " ", content: "des", width: 43, align: "left" },
|
{ header: " ", content: "des",width: isMobel()?49: 43, align: "left" },
|
||||||
{ width: 12 }, //通过加一段空结构来调整表头的位置
|
{ width: 12 }, //通过加一段空结构来调整表头的位置
|
||||||
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: 25, 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: 20, align: "left" }],
|
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel()?49: 43, align: "left" }],
|
||||||
lists: [
|
lists: [
|
||||||
{
|
{
|
||||||
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
|
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
|
||||||
|
@ -364,6 +364,9 @@ const getreferencedata = async () => {
|
||||||
setTransaction((res as any).data[0])
|
setTransaction((res as any).data[0])
|
||||||
setTimeTable((res as any).data[0])
|
setTimeTable((res as any).data[0])
|
||||||
}
|
}
|
||||||
|
function isMobel(){
|
||||||
|
return 768 >= document.documentElement.clientWidth;
|
||||||
|
}
|
||||||
function setInformation(mockRes: any) {
|
function setInformation(mockRes: any) {
|
||||||
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
|
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
|
||||||
const placeOfincorporation = ref('')
|
const placeOfincorporation = ref('')
|
||||||
|
|
|
@ -181,8 +181,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;
|
||||||
|
@ -290,8 +290,8 @@ const handleclick = (item: any) => {
|
||||||
.bigbox {
|
.bigbox {
|
||||||
|
|
||||||
width: 76vw;
|
width: 76vw;
|
||||||
min-height: 310rem;
|
// min-height: 310rem;
|
||||||
height: fit-content;
|
// height: fit-content;
|
||||||
|
|
||||||
margin-top: 14rem !important;
|
margin-top: 14rem !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -490,6 +490,25 @@ const showMounth = (date: any) => {
|
||||||
// .el-calendar{
|
// .el-calendar{
|
||||||
// font-family: "Calibri"
|
// 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 {
|
.login2 {
|
||||||
background-image: url("@/assets/1x/beijingtu.png");
|
background-image: url("@/assets/1x/beijingtu.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -500,31 +519,22 @@ const showMounth = (date: any) => {
|
||||||
.box {
|
.box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
// background-image: url("@/assets/1x/beijingtu.png");
|
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
//height: 100%;
|
|
||||||
// font-family: "Calibri";
|
|
||||||
// width: 100%;
|
|
||||||
// background-color: gray;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
|
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
// @media screen and (max-width: 768px) {
|
||||||
|
// width: 100vw;
|
||||||
|
|
||||||
// height: 100vh;
|
// * {
|
||||||
// float: left;
|
// margin: 0;
|
||||||
// background-color: red;
|
// padding: 0;
|
||||||
@media screen and (max-width: 768px) {
|
// }
|
||||||
width: 100vw;
|
// }
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -532,47 +542,48 @@ const showMounth = (date: any) => {
|
||||||
// padding-left: 35px;
|
// padding-left: 35px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
height: 60rem;
|
// height: 60rem;
|
||||||
// background-color: red;
|
// // background-color: red;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.menuicon {
|
.menuicon {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
display: block;
|
// display: block;
|
||||||
margin-left: 5rem;
|
// margin-left: 5rem;
|
||||||
|
// width: 25rem;
|
||||||
}
|
// height: 20rem;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
// .menu {
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
img {
|
// img {
|
||||||
width: 25rem;
|
// width: 25rem;
|
||||||
height: 20rem;
|
// height: 20rem;
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.inline-input w-50 {
|
// .inline-input w-50 {
|
||||||
width: 200px;
|
// width: 200px;
|
||||||
height: 50px;
|
// height: 50px;
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
display: none;
|
// display: none;
|
||||||
|
|
||||||
:deep(.imgSearch123) {
|
// :deep(.imgSearch123) {
|
||||||
width: 10rem;
|
// width: 10rem;
|
||||||
height: 10rem;
|
// height: 10rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
.my-autocomplete li {
|
.my-autocomplete li {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
@ -619,9 +630,9 @@ const showMounth = (date: any) => {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -646,12 +657,12 @@ const showMounth = (date: any) => {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
width: 24rem;
|
// width: 24rem;
|
||||||
height: 28rem;
|
// height: 28rem;
|
||||||
margin-top: 6rem;
|
// margin-top: 6rem;
|
||||||
margin-left: 10rem;
|
// margin-left: 10rem;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.second {
|
.second {
|
||||||
|
@ -787,14 +798,14 @@ const showMounth = (date: any) => {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.header .el-input__wrapper) {
|
// :deep(.header .el-input__wrapper) {
|
||||||
@media screen and (max-width: 768px) {
|
// @media screen and (max-width: 768px) {
|
||||||
// margin-left: 13vw;
|
// // margin-left: 13vw;
|
||||||
// height: 5vh;
|
// // height: 5vh;
|
||||||
// background-color: #000000;
|
// // background-color: #000000;
|
||||||
}
|
// }
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
:deep(.el-calendar-table td) {
|
:deep(.el-calendar-table td) {
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -852,6 +863,46 @@ const showMounth = (date: any) => {
|
||||||
:deep(.is-selected) {
|
:deep(.is-selected) {
|
||||||
color: red;
|
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>
|
||||||
<style>
|
<style>
|
||||||
.header .el-input__wrapper {
|
.header .el-input__wrapper {
|
||||||
|
|
|
@ -60,11 +60,12 @@ export default defineConfig((mode: ConfigEnv) => {
|
||||||
// 配置代理服务器
|
// 配置代理服务器
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api": {
|
"/api": {
|
||||||
target: "http://192.168.2.11: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: {
|
||||||
|
|
Loading…
Reference in New Issue