748 lines
14 KiB
CSS
748 lines
14 KiB
CSS
image{
|
|
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
|
border: 0;
|
|
/* 取消图片底侧有空白缝隙的问题 ① */
|
|
vertical-align: middle;
|
|
/* 取消图片底侧有空白缝隙的问题 ② */
|
|
object-fit: cover;
|
|
}
|
|
@font-face {
|
|
font-family: "FZDBSJW";
|
|
src: url('/common/fonts/FZDBSJW.ttf');
|
|
}
|
|
.main{
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-image: url('/static/page-bg.jpg');
|
|
background-size: cover;
|
|
}
|
|
.header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
padding-top: 26px;
|
|
}
|
|
.header .logo{
|
|
width: 197px;
|
|
padding: 0 0 6px 39px;
|
|
}
|
|
.header .title{
|
|
width: 480px;
|
|
}
|
|
.header .position{
|
|
width: 161px;
|
|
padding: 0 60px 6px 25px;
|
|
}
|
|
.header view image{
|
|
width: 100%;
|
|
}
|
|
|
|
/* 轮播 */
|
|
.banner{
|
|
width: calc(100% - 150px);
|
|
box-shadow: 0 0 38px 5px #447406;
|
|
margin: 33px auto;
|
|
}
|
|
|
|
|
|
/* 导航 */
|
|
.calculator .nav-btns{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-top: 46px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.calculator .nav-btns .btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 271px;
|
|
height: 73px;
|
|
background-image: url('/static/icon-tabbar.png');
|
|
background-size: cover;
|
|
}
|
|
.calculator .nav-btns .btn.active{
|
|
background-image: url('/static/icon-tabbar-active.png');
|
|
}
|
|
.calculator .nav-btns .btn image{
|
|
height: 27px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
/* 尾部 */
|
|
.footer{
|
|
background-color: #31742f;
|
|
line-height: 62px;
|
|
color: #ffffff;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
letter-spacing: 3px;
|
|
}
|
|
.footer>text{
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/* 计算器 */
|
|
.calculator-bg{
|
|
padding: 0 75px;
|
|
margin-top: 48px;
|
|
position: relative;
|
|
}
|
|
.calculator-bg .bg-img{
|
|
width: 100%;
|
|
height: 350px;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
.calculator-bg .bg-img>image{
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
.calculator{
|
|
width: 100%;
|
|
background-color: #fcfbd2;
|
|
}
|
|
.calculator .count{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
.calculator .cate{
|
|
box-sizing: border-box;
|
|
width: 398px;
|
|
height: 771px;
|
|
margin-left: 26px;
|
|
border: 2px solid #659436;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.calculator .cate .list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.calculator .cate .list .title{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
font-size: 20px;
|
|
}
|
|
.calculator .cate .list .title text{
|
|
margin-bottom: 6px;
|
|
}
|
|
.calculator .cate .list:nth-of-type(1) .title text{
|
|
margin-top: 10px;
|
|
}
|
|
.calculator .cate .list .title::before{
|
|
content: '';
|
|
display: block;
|
|
width: 128px;
|
|
margin-left: 12px;
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
}
|
|
|
|
.calculator .cate .list:nth-of-type(1) .title::before{
|
|
background-image: url('/static/icon-clothing.png');
|
|
background-size: auto 59px;
|
|
height: 59px;
|
|
}
|
|
.calculator .cate .list:nth-of-type(2) .title::before{
|
|
background-image: url('/static/icon-food.png');
|
|
background-size: auto 45px;
|
|
height: 45px;
|
|
}
|
|
.calculator .cate .list:nth-of-type(3) .title::before{
|
|
background-image: url('/static/icon-live.png');
|
|
background-size: auto 42px;
|
|
height: 42px;
|
|
}
|
|
.calculator .cate .list:nth-of-type(4) .title::before{
|
|
background-image: url('/static/icon-go.png');
|
|
background-size: auto 36px;
|
|
height: 36px;
|
|
}
|
|
.calculator .cate .list:nth-of-type(5) .title::before{
|
|
background-image: url('/static/icon-use.png');
|
|
background-size: auto 37px;
|
|
height: 37px;
|
|
}
|
|
|
|
.calculator .cate .list .item{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 110px;
|
|
height: 29px;
|
|
font-size: 14px;
|
|
margin: 15px 9px 0;
|
|
background-image: url('/static/icon-btns.png');
|
|
background-size: 100%;
|
|
}
|
|
|
|
.calculator .interface{
|
|
box-sizing: border-box;
|
|
width: 456px;
|
|
height: 768px;
|
|
padding: 40px 38px 0;
|
|
margin-right: 26px;
|
|
background-color: #669438;
|
|
border: 1px solid #31742f;
|
|
border-radius: 70px;
|
|
box-shadow: 5px 5px 0 2px #2d5305;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 计算器界面 */
|
|
.interface .result{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 350px;
|
|
background-color: #ffffff;
|
|
border: 1px solid #31742f;
|
|
border-radius: 15px;
|
|
padding: 6px 26px;
|
|
font-size: 24px;
|
|
line-height: 1.4;
|
|
color: #659437;
|
|
}
|
|
.interface .result .individual{
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid #ddd949;
|
|
}
|
|
.interface .result .subtotal{
|
|
padding: 6px 0;
|
|
}
|
|
.interface .result .total{
|
|
padding: 18px 0 15px;
|
|
border-top: 1px solid #ddd949;
|
|
}
|
|
.interface .result .item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.interface .result .item view:first-child{
|
|
width: 118px;
|
|
margin-right: 28px;
|
|
}
|
|
.interface .result .item view:nth-of-type(2){
|
|
color: #333333;
|
|
}
|
|
.interface .result .subtotal .item view:first-child{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.interface .result .individual .item view:first-child{
|
|
width: 146px;
|
|
margin-right: 0;
|
|
}
|
|
.interface .result .item view:nth-of-type(2){
|
|
width: calc(100% - 240px);
|
|
text-align: right;
|
|
}
|
|
.interface .result .item view:last-child{
|
|
width: 74px;
|
|
text-align: right;
|
|
}
|
|
.interface .result .total .item view:first-child{
|
|
letter-spacing: 5px;
|
|
}
|
|
.interface .result .item view .input{
|
|
width: 100%;
|
|
font-size: 24px;
|
|
/* white-space: nowrap;
|
|
overflow: hidden;
|
|
direction: rtl */;
|
|
}
|
|
.interface .result .item view .input.blur{
|
|
animation: opacity_name 0.8s linear alternate infinite;
|
|
}
|
|
|
|
@keyframes opacity_name {
|
|
from {
|
|
opacity: .1;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 计算器按钮 */
|
|
.interface-btns{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.interface-btns .num,
|
|
.interface-btns .operate{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 260px;
|
|
}
|
|
.interface-btns .num .btn,
|
|
.interface-btns .operate .btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 71px;
|
|
height: 71px;
|
|
margin-top: 12px;
|
|
background-image: url('/static/icon-btn-01.png');
|
|
background-size: cover;
|
|
font-size: 26px;
|
|
color: #1c5e2e;
|
|
}
|
|
.interface-btns .num .btn:last-child{
|
|
box-sizing: border-box;
|
|
padding-bottom: 22px;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.interface-btns .operate{
|
|
width: 90px;
|
|
}
|
|
|
|
.interface-btns .operate .btn{
|
|
width: 90px;
|
|
height: 71px;
|
|
margin-top: 12px;
|
|
background-image: url('/static/icon-btn-03.png');
|
|
}
|
|
.interface-btns .operate .btn:last-child{
|
|
height: 153px;
|
|
background-image: url('/static/icon-btn-02.png');
|
|
writing-mode: tb-rl;
|
|
}
|
|
|
|
/* 操作说明 */
|
|
.calculator .explain{
|
|
width: 100%;
|
|
margin-top: 32px;
|
|
line-height: 51px;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
background-color: #31742f;
|
|
}
|
|
|
|
|
|
/* 评估碳足迹 */
|
|
.calculator-other{
|
|
padding-top: 26px;
|
|
}
|
|
.assess,
|
|
.eliminate{
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
/* 标题 */
|
|
.assess-title,
|
|
.eliminate-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 26px;
|
|
}
|
|
.assess-title>image,
|
|
.eliminate-title>image{
|
|
height: 29px;
|
|
}
|
|
|
|
.assess .assess-title-other{
|
|
margin-top: -22px;
|
|
}
|
|
|
|
.total-num{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.total-num .num{
|
|
width: 39px;
|
|
line-height: 33px;
|
|
margin: 0 7px;
|
|
background-color: #31742f;
|
|
border-radius: 5px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.total-num .num:nth-last-of-type(3){
|
|
background: none;
|
|
color: #31742f;
|
|
font-size: 24px;
|
|
width: auto;
|
|
}
|
|
.total-num image{
|
|
height: 24px;
|
|
margin-left: 7px;
|
|
}
|
|
.assess-form,
|
|
.assess-contrast{
|
|
padding: 0 32px;
|
|
}
|
|
|
|
/* 柱状图 */
|
|
.assess-form{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.histogram{
|
|
width: calc(100% - 400px);
|
|
height: 370px;
|
|
padding-top: 0;
|
|
}
|
|
.histogram .form-list{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 300px;
|
|
border-bottom: 2px solid #31742f;
|
|
}
|
|
.histogram .form-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 280px;
|
|
width: calc(100%/5);
|
|
overflow: hidden;
|
|
animation-name: changeHeight;
|
|
animation-duration: 1.2s;
|
|
animation-iteration-count:1;
|
|
}
|
|
.histogram .form-item text{
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.histogram .form-item view{
|
|
width: 28px;
|
|
border-radius: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
@keyframes changeHeight {
|
|
from {height: 0;}
|
|
to {height: 280px;}
|
|
}
|
|
|
|
.histogram .form-item:nth-of-type(1) view{
|
|
background-image: linear-gradient(to top,rgba(166,254,165,0),rgba(166,254,165,1));
|
|
}
|
|
.histogram .form-item:nth-of-type(2) view{
|
|
background-image: linear-gradient(to top,rgba(255,181,76,0),rgba(255,181,76,1));
|
|
}
|
|
.histogram .form-item:nth-of-type(3) view{
|
|
background-image: linear-gradient(to top,rgba(148,223,222,0),rgba(148,223,222,1));
|
|
}
|
|
.histogram .form-item:nth-of-type(4) view{
|
|
background-image: linear-gradient(to top,rgba(255,218,173,0),rgba(255,218,173,1));
|
|
}
|
|
.histogram .form-item:nth-of-type(5) view{
|
|
background-image: linear-gradient(to top,rgba(136,136,172,0),rgba(136,136,172,1));
|
|
}
|
|
.form-title{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 40px;
|
|
}
|
|
.form-title view{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(100%/5);
|
|
}
|
|
.form-title image{
|
|
height: 25px;
|
|
}
|
|
|
|
/* 饼图 */
|
|
.pie-chart{
|
|
width: 400px;
|
|
height: 400px;
|
|
margin-right: -30px;
|
|
}
|
|
|
|
/* 对比 */
|
|
.assess-txt{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 26px;
|
|
margin: 15px 0 15px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.assess-btns{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 1px 1px 0 1px rgba(45, 83, 5, .35);
|
|
width: 110px;
|
|
height: 30px;
|
|
border: 1px solid #959795;
|
|
border-radius: 7px;
|
|
overflow: hidden;
|
|
margin: 0 7px;
|
|
background-color: #ffffff;
|
|
}
|
|
.assess-btns .btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 32px;
|
|
height: 30px;
|
|
background-image: linear-gradient(to top,#d0cfd1,#f7f7f7);
|
|
}
|
|
.assess-btns .btn image{
|
|
width: 19px;
|
|
}
|
|
.assess-btns input{
|
|
width: calc(100% - 70px);
|
|
height: 30px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.assess-txt text{
|
|
color: #327531;
|
|
}
|
|
.assess-contrast .assess-contrast-bg{
|
|
width: 100%;
|
|
height: 235px;
|
|
background-color: rgba(252, 252, 242, .52);
|
|
}
|
|
.assess-contrast .line{
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #98b992;
|
|
border-bottom: 1px solid #31742f;
|
|
}
|
|
.assess-contrast .list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
height: 308px;
|
|
margin-top: -255px;
|
|
}
|
|
.assess-contrast .item{
|
|
text-align: center;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
.assess-contrast .item image{
|
|
margin-bottom: 25px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(1) text{
|
|
color: #327531;
|
|
}
|
|
.assess-contrast .item:nth-of-type(1){
|
|
width: 130px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(2){
|
|
width: 130px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(3){
|
|
width: 168px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(4){
|
|
width: 130px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(5){
|
|
width: 262px;
|
|
}
|
|
|
|
/* 消除碳足迹 */
|
|
.eliminate .tips{
|
|
box-sizing: border-box;
|
|
width: calc(100% - 52px);
|
|
margin: 23px auto 0;
|
|
padding: 20px 35px;
|
|
background-image: linear-gradient(to top,rgba(181,250,172,1),rgba(181,250,172,0));
|
|
font-size: 19px;
|
|
line-height: 2.2;
|
|
}
|
|
.eliminate .tips text{
|
|
color: #337632;
|
|
margin: 0 32px;
|
|
}
|
|
.eliminate-img{
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 34px 26px 42px;
|
|
position: relative;
|
|
}
|
|
.eliminate-img>image{
|
|
height: 460px;
|
|
}
|
|
.eliminate-img .payment-btn{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 271px;
|
|
height: 67px;
|
|
background-image: url(/static/icon-payment.png);
|
|
background-size: cover;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -10px;
|
|
z-index: 99;
|
|
}
|
|
.eliminate-img .payment-btn image{
|
|
height: 27px;
|
|
margin-top: 9px;
|
|
}
|
|
.eliminate-img .payment-btn-other{
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
/* 在线支付 */
|
|
.contribution{
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.iframe-box{
|
|
width: 100%;
|
|
height: 818px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 查看证书 */
|
|
.certificate-bg{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
.certificate{
|
|
width: calc(100% - 200px);
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
}
|
|
.certificate>image{
|
|
width: 100%;
|
|
}
|
|
.certificate .content{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.certificate .logo{
|
|
width: 149px;
|
|
height: 111px;
|
|
margin: 100px auto 0;
|
|
}
|
|
.certificate .logo image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.certificate .txt{
|
|
width: 680px;
|
|
margin: 40px auto 0;
|
|
}
|
|
.certificate .txt .code{
|
|
font-family: 'FZDBSJW';
|
|
font-size: 21px;
|
|
line-height: 24px;
|
|
color: #d4191a;
|
|
text-align: right;
|
|
margin-top: 32px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.certificate .txt>image{
|
|
width: 529px;
|
|
height: 223px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.certificate .msg{
|
|
width: 680px;
|
|
margin: 40px auto 0;
|
|
}
|
|
.certificate .msg .item{
|
|
font-size: 26px;
|
|
line-height: 46px;
|
|
text-align: justify;
|
|
}
|
|
.certificate .msg .item:nth-of-type(1){
|
|
display: flex;
|
|
}
|
|
.certificate .msg .item:nth-of-type(2){
|
|
text-indent: 2em;
|
|
margin-top: 10px;
|
|
}
|
|
.certificate .number{
|
|
margin: 0 3px;
|
|
}
|
|
.certificate .msg .item text{
|
|
font-family: 'FZDBSJW';
|
|
color: #d4191a;
|
|
letter-spacing: 2px;
|
|
text-indent: 2px;
|
|
}
|
|
|
|
.certificate .msg .time{
|
|
font-size: 26px;
|
|
line-height: 32px;
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.certificate .foot{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 540px;
|
|
margin: 40px auto 0;
|
|
}
|
|
.certificate .foot-logo,
|
|
.certificate .foot-logo image{
|
|
width: 170px;
|
|
height: 170px;
|
|
}
|
|
.certificate .qr{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
.certificate .qr image{
|
|
width: 194px;
|
|
height: 191px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.certificate .qr text{
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.certificate .support{
|
|
width: 100%;
|
|
font-size: 22px;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
} |