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

1

This commit is contained in:
zzy 2023-04-18 10:09:32 +08:00
parent 21c1ea7551
commit f5a85c78bd
6 changed files with 166 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@ -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" >

46
src/router/index.ts
View File

@ -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({

15
src/views/IPO/index.vue
View File

@ -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('')

8
src/views/login/components/Main.vue
View File

@ -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;

171
src/views/login/index.vue
View File

@ -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 {

3
vite.config.ts
View File

@ -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: {