|
|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <div class='Billing-result'>
|
|
|
+ <div class="head-box">
|
|
|
+ <div class="state">开具中</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-i">
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="tit">增值税电子普通发票</div>
|
|
|
+ <img src="@/static/img/invoice.png" class="invoice_ico" alt="">
|
|
|
+ <div class="info-item flex_r flex_jb">
|
|
|
+ <div class="label">发票抬头</div>
|
|
|
+ <div class="input">增值税电子普通发票</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item flex_r flex_jb">
|
|
|
+ <div class="label">税号</div>
|
|
|
+ <div class="input">增值税电子普通发票</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item flex_r flex_jb">
|
|
|
+ <div class="label">价税合计</div>
|
|
|
+ <div class="input">增值税电子普通发票</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item flex_r flex_jb">
|
|
|
+ <div class="label">电子邮箱</div>
|
|
|
+ <div class="input">增值税电子普通发票</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item flex_r flex_jb">
|
|
|
+ <div class="label">手机号码</div>
|
|
|
+ <div class="input">增值税电子普通发票</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="check-btn">预览发票</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { get, post } from '@/request/api.js';
|
|
|
+export default {
|
|
|
+ name: 'Billing-result',
|
|
|
+ data () {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ onLoad (option) {},
|
|
|
+ onLaunch () {},
|
|
|
+ onShow () {},
|
|
|
+ onHide () {},
|
|
|
+ methods: {},
|
|
|
+ computed: {},
|
|
|
+ watch: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang='scss'>
|
|
|
+page {
|
|
|
+ background-color: #F6F6F6;
|
|
|
+}
|
|
|
+.Billing-result{
|
|
|
+
|
|
|
+ .head-box{
|
|
|
+ height: 230rpx;
|
|
|
+ background: linear-gradient(90deg, #0ee6a2 0%, #18bb88 100%);
|
|
|
+ padding-top: 70rpx;
|
|
|
+ position: relative;
|
|
|
+ .state{
|
|
|
+ text-align: center;
|
|
|
+ // color: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ // &::before{
|
|
|
+ // content: '';
|
|
|
+ // width: calc(100% - 72rpx);
|
|
|
+ // height: 40rpx;
|
|
|
+ // background: #fff;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 36rpx;
|
|
|
+ // bottom: 0;
|
|
|
+ // border-radius: 12rpx 12rpx 0 0;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .content-i{
|
|
|
+ padding: 0 36rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .info-box{
|
|
|
+ padding: 60rpx 36rpx 40rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ box-shadow: 0 6rpx 16rpx 0 rgba(0,0,0,0.2);
|
|
|
+ width: calc(100% - 72rpx);
|
|
|
+ position: absolute;
|
|
|
+ top: -40rpx;
|
|
|
+ left: 36rpx;
|
|
|
+ .tit{
|
|
|
+ color: #f00;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+ }
|
|
|
+ .invoice_ico{
|
|
|
+ width: 186rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 14px;
|
|
|
+ left: calc(50% - 93rpx);
|
|
|
+ }
|
|
|
+ .info-item{
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ width: 140rpx;
|
|
|
+ color: #333;
|
|
|
+ text-align: justify;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
+ .input{
|
|
|
+ width: calc(100% - 140rpx);
|
|
|
+ text-align: right;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-btn{
|
|
|
+ position: absolute;
|
|
|
+ top: 700rpx;
|
|
|
+ left: 36rpx;
|
|
|
+ width: calc(100% - 72rpx);
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: #18bb88;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|