686 lines
13 KiB
CSS
686 lines
13 KiB
CSS
image{
|
|
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
|
border: 0;
|
|
/* 取消图片底侧有空白缝隙的问题 ① */
|
|
vertical-align: middle;
|
|
/* 取消图片底侧有空白缝隙的问题 ② */
|
|
object-fit: cover;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* 尾部 */
|
|
.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{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
padding-top: 47px;
|
|
background-color: #fcfbd2;
|
|
}
|
|
.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-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: 153px;
|
|
margin-top: 12px;
|
|
background-image: url('/static/icon-btn-02.png');
|
|
}
|
|
.interface-btns .operate .btn:last-child{
|
|
writing-mode: tb-rl;
|
|
}
|
|
|
|
/* 切换按钮 */
|
|
.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;
|
|
}
|
|
|
|
/* 操作说明 */
|
|
.calculator .explain{
|
|
width: 100%;
|
|
margin-top: 32px;
|
|
line-height: 51px;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
background-color: #31742f;
|
|
}
|
|
|
|
|
|
/* 评估碳足迹 */
|
|
.calculator-other{
|
|
padding: 26px 0 16px;
|
|
}
|
|
.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;
|
|
}
|
|
.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: 20px;
|
|
}
|
|
.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 42px;
|
|
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>image{
|
|
width: 100%;
|
|
border-bottom: 1px solid #98b992;
|
|
}
|
|
.assess-contrast .list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #31742f;
|
|
}
|
|
.assess-contrast .item{
|
|
text-align: center;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
.assess-contrast .item:nth-of-type(1) text{
|
|
color: #327531;
|
|
}
|
|
.assess-contrast .item:nth-of-type(1){
|
|
width: 104px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(2){
|
|
width: 134px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(3){
|
|
width: 176px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(4){
|
|
width: 138px;
|
|
}
|
|
.assess-contrast .item:nth-of-type(5){
|
|
width: 262px;
|
|
}
|
|
|
|
/* 消除碳足迹 */
|
|
.eliminate .tips{
|
|
box-sizing: border-box;
|
|
width: calc(100% - 52px);
|
|
margin: 20px 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: 63px 26px 45px;
|
|
position: relative;
|
|
}
|
|
.eliminate-img>image{
|
|
height: 495px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* 在线支付 */
|
|
.contribution{
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.contribution .hot{
|
|
margin-bottom: 20px;
|
|
}
|
|
.contribution .hot>image{
|
|
width: 100%;
|
|
}
|
|
.contribution .tit{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 45px;
|
|
background-color: #31742f;
|
|
}
|
|
.contribution .tit>image{
|
|
margin-left: 32px;
|
|
height: 30px;
|
|
}
|
|
.contribution .tips{
|
|
font-size: 22px;
|
|
line-height: 40px;
|
|
padding: 20px 0;
|
|
text-indent: 32px;
|
|
color: #09881d;
|
|
}
|
|
.form-bg{
|
|
height: 625px;
|
|
background-image: url('/static/contribution-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
background-size: 761px 625px;
|
|
}
|
|
.form-bg .form{
|
|
width: 564px;
|
|
padding: 45px 28px;
|
|
background-color: #ffffff;
|
|
margin: 0 auto;
|
|
font-size: 18px;
|
|
}
|
|
.form-bg .form .item{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 42px;
|
|
}
|
|
.form-bg .form .left{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 96px;
|
|
}
|
|
.form-bg .form .colon{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 44px;
|
|
}
|
|
.form-bg .form .right{
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(100% - 140px);
|
|
}
|
|
.form-bg .form .right>picker{
|
|
width: 100%;
|
|
}
|
|
.form-bg .form .addr-input{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.form-bg .form .right .input,
|
|
.form-bg .form .right .input-box{
|
|
box-sizing: border-box;
|
|
width: 180px;
|
|
height: 27px;
|
|
padding: 0 8px;
|
|
border: 1px solid #a5a5a5;
|
|
}
|
|
.form-bg .form .right .input-box{
|
|
display: flex;
|
|
width: 207px;
|
|
padding: 0;
|
|
}
|
|
.form-bg .form .right .input-box>input{
|
|
width: calc(100% - 27px);
|
|
height: 100%;
|
|
text-align: center;
|
|
letter-spacing: 10px;
|
|
text-indent: 10px;
|
|
}
|
|
.form-bg .form .right .arrow{
|
|
width: 27px;
|
|
height: 25px;
|
|
background-image: url('/static/icon-arrow-down.png');
|
|
background-size: cover;
|
|
}
|
|
.form-bg .form .right text{
|
|
margin-left: 15px;
|
|
}
|
|
.calculator .nav-btns-other{
|
|
margin-top: 13px;
|
|
}
|
|
.form-bg .form .submit-btn{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
line-height: 40px;
|
|
padding: 0 8px;
|
|
border: 1px solid #a5a5a5;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
} |