@font-face { font-family: 'FZLTZHK'; /* 这个名字可以自己定义 */ src: url('../font/.font-spider/FZLTZHK--GBK1-0.TTF '); /* IE9 Compat Modes */ /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/ url('../fonts/.font-spider/FZLTZHK--GBK1-0.TTF') format('ttf'), url('../fonts/.font-spider/FZLTZHK--GBK1-0.TTF') format('truetype'), /* Safari, Android, iOS */ url('') font-weight: bold; font-style: normal; } @font-face { font-family: 'SourceHanSansCN-Normal'; /* 这个名字可以自己定义 */ src: url('../font/.font-spider/SourceHanSansCN-Normal.ttf '); /* IE9 Compat Modes */ /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/ url('../fonts/.font-spider/SourceHanSansCN-Normal.ttf') format('ttf'), url('../fonts/.font-spider/SourceHanSansCN-Normal.ttf') format('truetype'), /* Safari, Android, iOS */ url('') font-weight: bold; font-style: normal; } @font-face { font-family: 'SourceHanSansCN-Regular'; /* 这个名字可以自己定义 */ src: url('../font/SourceHanSansCN-Regular.ttf '); /* IE9 Compat Modes */ /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/ url('../fonts/.font-spider/SourceHanSansCN-Regular.ttf') format('ttf'), url('../fonts/.font-spider/SourceHanSansCN-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('') font-weight: bold; font-style: normal; } body, html { margin: 0; width: 100%; height: 100%; padding: 0; font-family: 微软雅黑; } header { display: inline-block; } header > img { width: 100%; display: inline-block; } .wrap { background:rgba(42,97,241,1); display: inline-block; text-align: center; position:absolute; width: 100%; height:100%; } .wrap > img { width: 100%; margin-bottom: 1rem; position:relative; } .wrap-form { background: url("../image/form-img (3).png"); background-size: 100% 100%; display: inline-block; position:relative; } .wrap-form .form { display: inline-block; text-align: center; padding-top: 1rem; width: 100%; } .wrap-form-img{ position:relative; background: url("../image/form-img (2).png"); background-size: 100% 100%; display: inline-block; height: 6rem; width: 95%; margin: 0 auto; margin-top:40%; margin-bottom:2rem; margin-left:.5rem; } .wrap-form .form input { display: inline; text-decoration: none; outline: none; list-style: none; padding: 0 1rem; width: 70%; height: 2.5625rem; margin:0.375rem; border:1px solid rgba(125,125,125,1); border-radius:0.875rem; font-size:0.8125rem; font-family:SourceHanSansCN; font-weight:400; color:rgba(22,1,132,1); } /* WebKit browsers */ input::-webkit-input-placeholder { font-size:0.8125rem; font-family:SourceHanSansCN; font-weight:500; color:rgba(22,1,132,1); } /* Mozilla Firefox 4-18使用伪类 */ input:-moz-placeholder { font-size:0.8125rem; font-family:SourceHanSansCN; font-weight:500; color:rgba(22,1,132,1); } /* Mozilla Firefox 19+ 使用伪元素 */ input::-moz-placeholder { font-size:0.8125rem; font-family:SourceHanSansCN; font-weight:500; color:rgba(22,1,132,1); } /* IE10使用伪类 */ input:-ms-input-placeholder { font-size:0.8125rem; font-family:SourceHanSansCN; font-weight:400; color:rgba(22,1,132,1); } input::-webkit-input-placeholder { font-size: 12px; } .btn { background: url("../image/form-img (1).png"); background-size: 100% 100%; width:30%; height: 2.1875rem; margin: .5rem auto; text-align: center; cursor: pointer; z-index: 10; font-size:1.125rem; font-family:SourceHanSansCN; font-weight:500; color:rgba(22,1,132,1); line-height: 2.1875rem; margin-bottom:1.5rem; } .input_in { display: inline-block; width: 100%; position: relative; } .icon { display: inline-block; padding: .2rem .5rem; position: absolute; top: .1rem; right: .2rem; } .icon > img { width: 1rem; } .class-list { display: inline-block; width: 100%; background: #fff; border-bottom-left-radius: .4rem; border-bottom-right-radius: .4rem; border: solid 1px #B157E1; border-top: none; padding: .4rem .1rem; position: absolute; top: 1.5rem; left: 0; } .class-list ul { list-style: none; display: inline-block; margin: 0; padding: 0; } .class-list ul li { display: inline-block; border-radius: .3rem; padding: .3rem .7rem; background: #CEB9F8; margin: .8rem; } .input_in .hide { display: none; } .mark { width: 100%; height: 200%; background: rgba(0, 0, 0, .4); position: fixed; top: 0; font-weight: bold; font-family: FZLTZHK; display: none; } .mark-card { display: inline-block; background-color: #fff; position: absolute; background: url("../image/image13.png") no-repeat; background-size: 100% 100%; width: 94%; height: 47%; margin: 5% 3%; } .mark-header { display: inline-block; width: 100%; margin-top: .5rem; } .mark-header .del { width: 1.2rem; margin: .2rem 1.5rem; float: right; } .mark-name { text-align: center; padding: 1.5rem; padding-bottom: 0; } .mark-name > span { text-align: center; color: #fff; font-family: SourceHanSansCN-Normal; display: block; font-size: 36px; } .mark-name > p > span { list-style: none; color: #FFF600; font-size: 19px; } .mark-name > p { text-align: center; font-family: SourceHanSansCN-Normal; color: #fff; font-size: 17px; margin: 0; } .address-items { width: 97%; display: inline-block; margin-top: 1rem; } .address-scroll { display: inline-block; height: 16rem; width: 92.2%; text-align: left; padding: .7rem; padding-top: 0; overflow: scroll; background-color: rgb(255, 255, 255); } .address-items .item { width: 100%; border-bottom: solid 1px rgba(100, 100, 100, 0.5); padding-top: .6rem; padding-bottom: .6rem; } .address-items .item span, .recommend-info .item span { color: #000; font-family: SourceHanSansCN-Regular; font-weight: 400; font-size: 13px; } .recommend-info .name, .recommend-info .address-info { display: inline-block; color: #1c1c1c; font-size: 13px; } .address-items .item .name, .recommend-info .item .name { display: inline-block; color: #1c1c1c; font-size: 13px; font-weight: bold; font-family: FZLTZHK; } .address-items .item .address-info { width: 100%; display: block; font-size: 13px; } .address-items .item .phone { } .recommend-info { display: inline-block; font-weight: 400; padding: .3rem; font-family: SourceHanSansCN-Regular; text-align: left; } .info-title { font-size: 15px; font-family: SourceHanSansCN-Regular; color: #fff; text-align: center; background-color: rgb(255, 117, 168); } .recommend-info .item { padding-left: .7rem; padding-right: .7rem; background-color: #fff; } .show { display: block; } .hide { display: none; }