From dc7ef35a8d972bdd853c8324703087ac4b6b9063 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期五, 31 三月 2023 16:52:46 +0800
Subject: [PATCH] 细节修改
---
src/components/page/invoice/index.vue | 139 +++++++++++++++++++++++++++++++++++-----------
1 files changed, 105 insertions(+), 34 deletions(-)
diff --git a/src/components/page/invoice/index.vue b/src/components/page/invoice/index.vue
index dd66725..7b029cf 100644
--- a/src/components/page/invoice/index.vue
+++ b/src/components/page/invoice/index.vue
@@ -1,36 +1,45 @@
<template>
<div class="invoice-wrap">
- <div class="invoice-main">
- <img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
- <h1>鍙戠エ鏌ヨ</h1>
+ <div class="weixin-box" v-if="!isWeiXin">
+ <div class="invoice-main">
+ <img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
+ <h1>鍙戠エ鏌ヨ</h1>
+ </div>
+ <div class="invoice-main2">
+ <el-form
+ :inline="true"
+ :model="form"
+ class="invoice-main2-box"
+ ref="form"
+ :rules="rules">
+ <el-form-item
+ prop="carNo"
+ class="carNum"
+ label="杞︾墝鍙�:"
+ >
+ <el-input v-model="form.carNo" placeholder="杈撳叆杞︾墝鍙�"></el-input>
+ </el-form-item>
+ <el-form-item
+ prop="phone"
+ class="carNum"
+ label="鎵嬫満鍙�:"
+ >
+ <el-input v-model="form.phone" placeholder="杈撳叆鎵嬫満鍙�"></el-input>
+ </el-form-item>
+ <el-form-item class="invoice-btn" v-if="isShowBtn">
+ <el-button
+ id="fixBtn"
+ @click="submitInvoice('form')"
+ class="jiaofei-btn"
+ type="primary">纭畾</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
</div>
- <div class="invoice-main2">
- <el-form
- :model="form"
- class="invoice-main2-box"
- ref="form"
- :rules="rules">
- <el-form-item
- prop="carNo"
- class="carNum"
- label="杞︾墝鍙�:"
- label-width="80px">
- <el-input v-model="form.carNo" placeholder="杈撳叆杞︾墝鍙�"></el-input>
- </el-form-item>
- <el-form-item
- prop="phone"
- class="carNum"
- label="鎵嬫満鍙�:"
- label-width="80px">
- <el-input v-model="form.phone" placeholder="杈撳叆鎵嬫満鍙�"></el-input>
- </el-form-item>
- <el-form-item class="invoice-btn">
- <el-button
- @click="submitInvoice('form')"
- class="jiaofei-btn"
- type="primary">纭畾</el-button>
- </el-form-item>
- </el-form>
+ <div class="middlePge-wrap" v-else>
+ <div class="middlePge-main">
+ <img src="../../../assets/images/middlePage.png" alt="">
+ </div>
</div>
</div>
</template>
@@ -52,6 +61,10 @@
}
}
return {
+ isWeiXin: false,
+ isShowBtn: true, //纭畾鎸夐挳鏄剧ず 瑙ｅ喅瀹夊崜button琚《璧风殑闂
+ docmHeight: document.documentElement.clientHeight, //榛樿灞忓箷楂樺害
+ showHeight: document.documentElement.clientHeight, //瀹炴椂灞忓箷楂樺害
form: {
carNo:'',
phone:''
@@ -67,7 +80,45 @@
}
}
},
+ created() {
+ this.checkWeiXin()
+ },
+ watch: {
+ showHeight() {
+ // 瑙ｅ喅瀹夊崜搴曢儴鍥哄畾閮ㄤ綅琚蒋閿洏椤朵笂鍘婚棶棰�
+ //鐩戝惉灞忓箷楂樺害鍙樺寲
+ if(this.docmHeight > this.showHeight){
+ this.isShowBtn = false
+ }else {
+ this.isShowBtn = true
+ }
+ }
+ },
+ mounted() {
+ //棣栨杩涘叆鐨勫師濮嬮珮搴�
+ window.addEventListener('resize', this.watchResize);
+ },
methods: {
+ watchResize() {
+ //瀹炴椂鍙樺寲鐨勭獥鍙ｉ珮搴�
+ this.showHeight = document.body.clientHeight;
+ },
+ checkWeiXin() {
+ // let userAgent = navigator.userAgent;
+ // console.log(userAgent)
+ // if (userAgent.includes("MicroMessenger")) {
+ // this.isWeiXin = true
+ // } else {
+ // this.isWeiXin = false
+ // }
+ let ua = window.navigator.userAgent.toLowerCase();
+ //閫氳繃姝ｅ垯琛ㄨ揪寮忓尮閰島a涓槸鍚﹀惈鏈塎icroMessenger瀛楃涓�
+ if(ua.match(/MicroMessenger/i) == 'micromessenger'){
+ this.isWeiXin = true
+ } else{
+ this.isWeiXin = false
+ }
+ },
submitInvoice(formName) {
this.$refs[formName].validate(valid => {
if(valid) {
@@ -82,7 +133,10 @@
})
}
- }
+ },
+ beforeDestroy() {
+ window.removeEventListener("resize", this.watchResize);
+ },
}
</script>
@@ -106,16 +160,32 @@
width: 88%;
padding-right: 2.67vw /* 20/7.5 */;
}
- .el-form-item__content{
- display: flex;
- justify-content: center;
+ .el-form-item__label{
+ font-size: 3.73vw /* 28/7.5 */;
+ width: 24vw /* 180/7.5 */;
}
+ .el-form-item__content{
+ width: calc(100% - 24vw - 15px);
+ }
+
}
.invoice-wrap{
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
+ .weixin-box{
+ width: 100%;
+ height: 100%;
+ }
+ .middlePge-wrap{
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.7);
+ img{
+ width: 100%;
+ }
+ }
.invoice-main{
width: 100%;
display: flex;
@@ -152,6 +222,7 @@
}
.carNum{
margin-top: 10vw;
+ width: 100%;
}
.invoice-btn{
position: absolute;
--
Gitblit v1.9.1