share.css

*{margin:0;padding:0;}
ul,li{
    list-style: none;
}
input{
    border: none;
    outline: none;
    -webkit-appearance:none; /*去除系统默认的样式*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 点击去除高亮的颜色*/
}
body,html{
    width:100%;
    height:100%;
    background: #f0f0f0;
    max-width:520px;
    margin: 0 auto;
}
#loading{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    z-index: 999999;
    max-width:520px;
    margin: 0 auto;
}
.loading-box{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.loading-box p {
    color: rgb(224, 195, 67);
    font-size: 0.8rem;
}
.loading{
    width: 150px;
    height: 15px;
    margin: 0 auto 20px;
    text-align: center;
}
.loading span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: rgb(224, 195, 67);
    -webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.loading span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
    -webkit-animation-delay:0.65s;
}



#noSearchBox,#searchBox,#showPay{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    text-align: center;
    padding: 10% 10% 35%;
    display: none;
    max-width:520px;
    margin: 0 auto;
}
#noSearchBox img,#searchBox img,#showPay img{
    width:100%;
    display: block;
    margin-bottom: 0.4rem;
}
.noSearch-box p{
    margin-bottom: 0.2rem;
}

#showPay .noSearch-box{

}
.search-box{
    background: rgb(224, 195, 67);
    width: 100%;
    height: 100%;
    border-radius: 0.4rem;
    box-shadow: 1px 1px 1px 1px rgba(255,255,255,.2), -1px -1px 1px 1px rgba(255,255,255,.2);
    padding: 1.2rem;
    box-sizing: border-box;
}
.search-box h4{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1.2rem;
}
.search-box .search-item{
    height:3rem;
    margin-bottom: 1.2rem;
}
.search-box .search-input > input{
    padding: 0.6rem;
    box-sizing: border-box;
    width: 100%;
    height: 2.2rem;
    border-radius: .2rem;
    font-size: 1.2rem;
}
.search-box .search-button .button{
    width: 6rem;
    text-align: center;
    box-sizing: border-box;
    height: 2.6rem;
    line-height: 2.6rem;
    border-radius: .4rem;
    font-size: 1.2rem;
    margin: 0 auto;
    background: rgb(224, 195, 67);
    border: 3px dashed rgb(41, 41, 41);
    box-shadow: 1px 1px 2px 2px rgba(255,255,255,0.2), -1px -1px 2px 2px rgba(255,255,255,0.2);
}
#main{
    width:100%;
    max-width:520px;
    padding-bottom: 2rem;
    margin:0 auto;
    /*height:3000px;*/
    background-image:
            -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(0, transparent),
            color-stop(.25, transparent),
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, transparent),
            color-stop(.5, transparent),
            color-stop(.5, rgba(255, 255, 255, .2)),
            color-stop(.51, rgba(255, 255, 255, .2)),
            color-stop(.51, transparent),
            to(transparent));
    background-color: rgb(41, 41, 41);
    background-size: 10px 10px;
    position: relative;
}
#showShare{
    padding-bottom: 2rem;
    background-image:
            -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(0, transparent),
            color-stop(.25, transparent),
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, transparent),
            color-stop(.5, transparent),
            color-stop(.5, rgba(255, 255, 255, .2)),
            color-stop(.51, rgba(255, 255, 255, .2)),
            color-stop(.51, transparent),
            to(transparent));
    background-color: rgb(41, 41, 41);
    background-size: 10px 10px;
}


@font-face {
    font-family: 'AaFangMeng';
    src: url('./font/meng/AaFangMeng.woff') format('woff'),
    url('./font/meng/AaFangMeng.ttf') format('truetype'),
    url('./font/meng/AaFangMeng.svg#AaFangMeng') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.yellow{
    color: rgb(224, 195, 67);
    font-family: 'AaFangMeng';
}
.write{
    font-family: 'AaFangMeng';
    color: #ffff;
}
.black{
    color: #000000;
    font-family: 'AaFangMeng';
}
.tr{
    text-align: right;
}
.tl{
    text-align: left;
}
.item{
    padding-top:10%;
}
.title-bj{
    background-repeat:no-repeat ;
    text-align: center;
}
.yellow-title{
    background-image: url('./image/yellow-text-bj.png');
    color: #000000;
    font-family: 'AaFangMeng';
    height: 8rem;
    background-size: 100%;
    background-position: center;
    line-height: 8rem;
}
.write-title{
    background-image: url(./image/write-text-bj.png);
    color: #000;
    font-family: 'AaFangMeng';
    height: 8rem;
    background-size: 100%;
    background-position: center;
    line-height: 6.8rem;
    text-indent: -2rem;
}
.logo{
    margin-top: -2.2rem;
}
.logo > img{
    display: block;
    width: 7.8rem;
    margin: 0 auto;
}
.html-padding{
    padding:0 1.2rem;
    margin-bottom: 1rem;
    position: relative;
}
.p-text {
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.2rem;
    margin-bottom: 1.2rem;
}
.p-html{
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.2rem;

}
.list{
    display: flex;
    margin-top: 2rem;
    font-size: 1.5rem;
    text-align: center;
}
.list > li{
    flex: 1;
}
.list > li .listImg{
    padding: 0 20%;
    height: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    vertical-align: middle;
}
.list > li img{
    height: 2rem;
    margin: 0 auto;
}
.p-html-title{
    width: 3.2rem;
    margin: 0 auto;
}
.pointer-link{
    text-align: center;
}
.pointer-link > a{
    display: block;
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 2.2rem;
    border: 0.2rem solid rgb(224, 195, 67);
    border-radius: 0.8rem;
    width: 12rem;
    margin: 0 auto;
    padding:0.4rem;
}
.user-headpoirt img{
    display: block;
    margin: 0 auto;
    width: 8rem;
    height: 8rem;
}
.html-padding .html-padding-img{
    position: absolute;
    top:0;
}
.html-padding .html-padding-img.l-p{
    left:1.2rem;
}
.html-padding .html-padding-img.r-p{
    right:1.2rem;
}
.html-padding .html-padding-img img{
    width: 5.2rem;
}
.makeTable .button{
    width: 12rem;
    text-align: center;
    padding: 0.8rem 0.5rem;
    border-radius: .4rem;
    font-size: 1.2rem;
    margin: 0 auto;
    background: rgb(224, 195, 67);
    border: 3px dashed rgb(41, 41, 41);
    box-shadow: 1px 1px 2px 2px rgba(255,255,255,0.2), -1px -1px 2px 2px rgba(255,255,255,0.2);
}
.erweima{
    padding: 0 30%;
    text-align: center;
}
.erweima img{
    display: block;
    width:100%;
    margin-bottom: 0.2rem;
}
#userHeadpoirt{
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
    display: block;
}
.overflow{
    overflow: hidden;
}
#save{
    display: none;
    position: relative;
}
#save img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    z-index: 10;
}
#shareImg {
    display: none;
    width:100%;
    position: absolute;
    left:0;
    top:0;
}
#shareImg img{
    width:100%;
    display: block;
}
.payImg{
    width: 10rem;
    margin: 0 auto 1.2rem;
    display: block;
}