<template>
    <div  class="payroll">
        <div class="p_head">
            <img src="../../assets/image/payrollback_left@2x.png" alt="" @click="$router.replace('/index')">
            <span>工资代发</span>
        </div>
        <!-- :style="'margin-top:' + cMarginTop" -->
        <div class="p_con" :style="'margin-top:' + cMarginTop">
            <div class="con_l">
                <div class="title_l">
                    服务详情联系客服
                </div>
                <div class="button_n">
                    <a href="tel:18518267398">185 1826 7398</a>
                </div>
                <div class="wx">
                    (微信同步)
                </div>
            </div>
        </div>
        <!-- <div class="p_head">
            <img src="../../assets/image/payrollback.png" alt="">
        </div>
        <div class="p_con">
           <div class="con_l">
               <div class="title_l">
                   <p>服务详情联系客服</p>
               </div>
               <div class="button_n">
                   <a href="tel:18518267398">185 1826 7398 <span style="font-size:1.5rem;">(同微信)</span></a>
               </div>
           </div>
        </div> -->
    </div>
</template>

<script lang="ts" >
    import {Component,Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import {MessageBox} from 'element-ui';
    import {Message} from "element-ui";
    import router from "@/router";
import login from "@/store/module/login";

    @Component({})
    export default class App extends Vue {
        public data: any = {
            clientWidth: '',
            clientHeight: ''
        }

        async created() {
            // 网页可见区域的宽度
            this.data.clientWidth = document.body.clientWidth || document.documentElement.clientWidth
            this.data.clientHeight = document.body.clientHeight || document.documentElement.clientHeight
            // let fontSize = document.documentElement.style.fontSize || document.body.style.fontSize
           if (this.data.clientWidth < 500) {
                document.documentElement.style.fontSize = this.data.clientWidth / 375 * 12 + 'px'
           } else {
               document.documentElement.style.fontSize = this.data.clientWidth / 375 * 9 + 'px'
           }
            console.log('fontSize', document.documentElement.style.fontSize);
            
        }

        get cMarginTop() {
            if (this.data.clientHeight / this.data.clientWidth > 1.78) {
                // console.log('距离', this.data.clientHeight / this.data.clientWidth > 1.7);
                
                return this.data.clientHeight / this.data.clientWidth * 30 + 'px'
            } else {
                return this.data.clientHeight / this.data.clientWidth * 20 + 'px'
            }
        }
    }
</script>

<style lang="scss" scoped>
.payroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/image/payrollback@2x.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: auto;
}
    .p_head{
        text-align: center; 
        position: relative;
        top: 0.833rem;
        font-size: 2rem;
        font-family: 'PingFang SC';
        color: #333;
        background-color: transparent;
        // font-weight: bold;
        img{
            position: absolute;
            left: 1.667rem;
            top: 0.833rem;
            width: 0.667rem;
        }
    }
    // .p_con {
        // position: absolute;
        // margin-top: 11%;
        // margin: auto;
        // margin-top: 4rem;
    // }
    .con_l{
        color: #fff;
        // border: 1px solid #ebebeb;
        // width: 92%;
        // height: 20rem;
        // border-radius: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        .title_l{
            font-size: 2.083rem;   
            font-family: ZhenyanGB;
            // margin-top: 4rem;
            margin-bottom: 0.833rem;
        }
        .button_n{
            background: #fff;
            width: 22rem;
            // width: 60%;
            height: 4rem;
            border-radius: 50px;
            text-align: center;
            line-height: 4rem;
            font-size: 2.75rem;
            a{
                color: #21200F;
                font-family: -webkit-body;
                // font-size: 1.75rem;
            }
        }
        .wx {
            margin-top: 1rem;
            font-size: 1.667rem;
        }
    }
    // .p_head{
    //     img{
    //         width: 100%;
    //     }
    // }
    // .p_con{
    //     background: #fff4fc;
    //     width: 92%;
    //     height: 22rem;
    //     margin: auto;
    //     position: relative;
    //     top: -4.8rem;
    //     border-radius: 10px;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     flex-direction: column;
    //     .con_l{
    //         border: 1px solid #ebebeb;
    //         width: 92%;
    //         height: 20rem;
    //         border-radius: 10px;
    //         display: flex;
    //         align-items: center;
    //         flex-direction: column;
    //         .title_l{
    //             font-size: 1.8rem;
    //             margin-top: 4rem;
    //             margin-bottom: 2rem;
    //         }
    //         .button_n{
    //             background: #20b452;
    //             width: 24rem;
    //             height: 4rem;
    //             border-radius: 50px;
    //             text-align: center;
    //             line-height: 4rem;
    //             font-size: 2rem;
    //             a{
    //                 color: #ffffff;
    //                 font-family: -webkit-body;
    //             }
    //         }
    //     }
    // }
</style>
