发票页面样式

zhangxiaoxu123

2022-12-29 a8ca0e26f96bcb7045a2a6d4ac0c7c6213ec0084

发票页面样式

 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{

 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>