From a8ca0e26f96bcb7045a2a6d4ac0c7c6213ec0084 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期四, 29 十二月 2022 17:17:59 +0800
Subject: [PATCH] 发票页面样式
---
src/components/page/invoice/index.vue | 29 ++++++++++----
src/components/page/invoice/invoiceForm.vue | 35 +++++++++++++----
2 files changed, 47 insertions(+), 17 deletions(-)
diff --git a/src/components/page/invoice/index.vue b/src/components/page/invoice/index.vue
index 6042394..0af4b3e 100644
--- a/src/components/page/invoice/index.vue
+++ b/src/components/page/invoice/index.vue
@@ -2,6 +2,7 @@
<div class="invoice-wrap">
<div class="invoice-main">
<img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
+ <h1>鍙戠エ鏌ヨ</h1>
</div>
<div class="invoice-main2">
<el-form
@@ -13,15 +14,15 @@
prop="carNo"
class="carNum"
label="杞︾墝鍙�:"
- label-width="100px">
+ label-width="80px">
<el-input v-model="form.carNo" placeholder="杈撳叆杞︾墝鍙�"></el-input>
</el-form-item>
<el-form-item
- prop="mobile"
+ prop="phone"
class="carNum"
label="鎵嬫満鍙�:"
- label-width="100px">
- <el-input v-model="form.mobile" placeholder="杈撳叆鎵嬫満鍙�"></el-input>
+ label-width="80px">
+ <el-input v-model="form.phone" placeholder="杈撳叆鎵嬫満鍙�"></el-input>
</el-form-item>
<el-form-item class="invoice-btn">
<el-button
@@ -53,13 +54,13 @@
return {
form: {
carNo:'',
- mobile:''
+ phone:''
},
rules:{
carNo: [
{required: true, message: '杞︾墝鍙风爜涓嶈兘涓虹┖',trigger: 'blur'}
],
- mobile: [
+ phone: [
{ required: true, message: '鎵嬫満鍙蜂笉鑳戒负绌�' },
{validator: validateMobile, trigger: 'blur'}
]
@@ -74,7 +75,7 @@
path: '/invoiceForm',
query: {
carNo: this.form.carNo,
- //mobile: this.form.mobile
+ phone: this.form.phone
}
})
}
@@ -86,9 +87,14 @@
</script>
<style lang="scss" scoped>
+ *{
+ font-family: '鑻规柟';
+ color: #626262;
+ }
::v-deep{
.el-form{
width: 88%;
+ padding-right: 2.67vw /* 20/7.5 */;
}
.el-form-item__content{
display: flex;
@@ -103,8 +109,15 @@
.invoice-main{
width: 100%;
display: flex;
+ flex-direction: column;
justify-content: center;
+ align-items: center;
margin-top: 10vw;
+ h1{
+ font-size: 3.73vw /* 28/7.5 */;
+ line-height: 2;
+ margin-top: 2.67vw /* 20/7.5 */;
+ }
}
.logoPhone{
margin-top: 10vw;
@@ -116,7 +129,7 @@
display: flex;
justify-content: center;
margin-top: 10vw;
- height: calc(100% - 50vw);
+ height: calc(100% - 60vw);
position: relative;
}
.jiaofei-btn{
diff --git a/src/components/page/invoice/invoiceForm.vue b/src/components/page/invoice/invoiceForm.vue
index f2dc820..a110051 100644
--- a/src/components/page/invoice/invoiceForm.vue
+++ b/src/components/page/invoice/invoiceForm.vue
@@ -40,8 +40,8 @@
{{item.address}}
</div>
</div>
- <div>
- <h1 class="money-box">{{item.money}}</h1>
+ <div class="money-main">
+ <h1 class="money-box">{{item.money}}<font class="money-small">鍏�</font></h1>
</div>
</el-checkbox>
</div>
@@ -89,6 +89,7 @@
let url = this.$systemconfig.basePath + '/orderrecord/getByCarNo';
let params = {
carNo: this.$route.query.carNo,
+ phone: this.$route.query.phone,
current: this.current,
size: this.size
}
@@ -127,6 +128,10 @@
</script>
<style lang="scss" scoped>
+ *{
+ font-family: '骞虫柟';
+ color: #626262;
+ }
::v-deep{
.el-checkbox__input.is-checked+.el-checkbox__label{
color: #606266;
@@ -151,6 +156,10 @@
justify-content: space-between;
align-items: center;
}
+ .el-checkbox__inner::after{
+ left: 5px;
+ top: 2px;
+ }
}
.iconSvg{
width: 3.2vw /* 24/7.5 */;
@@ -171,7 +180,6 @@
}
.invoiceForm-main{
width: 100%;
- padding: 0 1.33vw /* 10/7.5 */ 1.33vw /* 10/7.5 */ 1.33vw /* 10/7.5 */;
box-sizing: border-box;
height: calc(100% - 11.73vw);
.invoiceForm-main-inside{
@@ -181,28 +189,37 @@
}
.invoiceForm-content{
font-size: 3.73vw /* 28/7.5 */;
- line-height: 1.5;
+ line-height: 1.8;
}
.invoiceForm-block{
border-bottom: 1px solid #e5e5e5;
- padding:4vw /* 30/7.5 */ 2.67vw /* 20/7.5 */;
+ padding:4vw /* 30/7.5 */;
background-color: #fff;
- margin-top:2.13vw /* 16/7.5 */;
}
.fapiao-btn{
position: fixed;
bottom: 0;
left: 0;
- padding:1.33vw /* 10/7.5 */ 2.67vw /* 20/7.5 */;
+ padding:1.87vw /* 14/7.5 */ 2.67vw /* 20/7.5 */;
width: 100%;
display: flex;
background: #fafafa;
border-top: 1px solid #e5e5e5;
z-index: 9;
}
+ .money-main{
+ align-self: flex-start;
+ line-height: 1.2;
+ }
.money-box{
- font-size: 4.8vw /* 36/7.5 */;
-
+ font-size: 6.4vw /* 48/7.5 */;
+ font-weight: normal;
+ font-family: '鑻规柟';
+ color: #343434;
+ }
+ .money-small{
+ font-size: 3.2vw /* 24/7.5 */;
+ font-weight: lighter;
}
}
</style>
--
Gitblit v1.9.1