1717 lines
28 KiB
SCSS
1717 lines
28 KiB
SCSS
.main-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-image: linear-gradient(#3c9f3c, #f7f7f7);
|
|
height: 70vh;
|
|
z-index: 1;
|
|
right: 0;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
/* 首页 */
|
|
.page-bg {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
/* 搜索 */
|
|
.search-bg {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
padding: 17rpx 0;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.search {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 68rpx;
|
|
background-color: #ffffff;
|
|
margin: 24rpx auto 0;
|
|
padding: 0 30rpx;
|
|
border-radius: 34rpx;
|
|
}
|
|
|
|
.search-bg .search {
|
|
box-sizing: border-box;
|
|
width: calc(100% - 60rpx);
|
|
margin-top: 0;
|
|
border: 1px solid #e9e9e9;
|
|
}
|
|
|
|
.search>image {
|
|
width: 40rpx;
|
|
height: 32rpx;
|
|
padding-right: 20rpx;
|
|
border-right: 2rpx solid #d3d3d3;
|
|
}
|
|
|
|
.search .input {
|
|
width: calc(100% - 85rpx);
|
|
padding-left: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 通知 */
|
|
.new-message {
|
|
font-size: 22rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
/* 轮播 */
|
|
.banner {
|
|
width: 100%;
|
|
height: 350rpx;
|
|
border-radius: 10rpx;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 公告section */
|
|
.section {
|
|
box-sizing: border-box;
|
|
margin: 24rpx auto 0;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
/* 分类导航 */
|
|
.cate {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding:0 20rpx 40rpx 20rpx;
|
|
margin-top: 25rpx;
|
|
}
|
|
|
|
.cate .item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 20%;
|
|
margin-top: 40rpx;
|
|
font-size: 24rpx;
|
|
color: #6e6e6e;
|
|
}
|
|
|
|
.cate .item>image {
|
|
width: 114rpx;
|
|
height: 114rpx;
|
|
}
|
|
|
|
/* 公告 */
|
|
.notice {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 82rpx;
|
|
padding: 0 24rpx;
|
|
margin: 22rpx auto 0;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.notice .title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 134rpx;
|
|
}
|
|
|
|
.notice .title>image {
|
|
height: 24rpx;
|
|
}
|
|
|
|
.notice .msg {
|
|
width: calc(100% - 204rpx);
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.notice .more-btn {
|
|
width: 50rpx;
|
|
color: #999999;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/* 热卖商品 */
|
|
.hot-goods {
|
|
position: relative;
|
|
}
|
|
|
|
.hot-goods-content {
|
|
padding:24rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-bottom: 15rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
}
|
|
|
|
.hot-goods .title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 38rpx;
|
|
font-size: 32rpx;
|
|
margin-top: 6rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hot-goods .title>text:last-child {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.hot-goods .list {
|
|
display: block;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.hot-goods .item {
|
|
box-sizing: border-box;
|
|
width:240rpx;
|
|
margin: 22rpx 15rpx 0 0;
|
|
padding: 12rpx 10rpx 20rpx;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
.hot-goods .item .img {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hot-goods .item .img image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hot-goods .item .name {
|
|
font-size: 26rpx;
|
|
line-height: 30rpx;
|
|
margin-top: 20rpx;
|
|
white-space:initial;
|
|
}
|
|
.hot-goods .item .price-bg{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
margin-top: 10rpx;
|
|
}
|
|
.hot-goods .item .price {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 40rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.2;
|
|
color: #f72e2e;
|
|
}
|
|
.hot-goods .item .price-bg .price:nth-child(2) {
|
|
display: none;
|
|
}
|
|
.hot-goods .item .price>text:nth-of-type(2) {
|
|
font-size: 32rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 商品分类列表 */
|
|
.goods-cate {
|
|
margin: 36rpx 0 0 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods-cate .cate-list {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.goods-cate .cate-list .cate-item {
|
|
line-height: 28rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 31rpx;
|
|
border-right: 2rpx solid #d6d6d6;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.goods-cate .cate-list .cate-item:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.goods-cate .cate-list .cate-item:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.goods-cate .cate-list .cate-item .active {
|
|
color: #3d9f3d;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 商品列表 */
|
|
.index-goods {
|
|
margin-top: 20rpx;
|
|
}
|
|
/* 公用按钮样式 */
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 98rpx;
|
|
line-height: 98rpx;
|
|
border:none;
|
|
background-color: #3a9e3a;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
letter-spacing: 1px;
|
|
margin-top: 40rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
/* 分类页面 */
|
|
.classify {
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.classify-left {
|
|
box-sizing: border-box;
|
|
width: 182rpx;
|
|
background-color: #f2f3f5;
|
|
padding-bottom: 98rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
}
|
|
|
|
.classify-left .classify-item {
|
|
width: 100%;
|
|
line-height: 98rpx;
|
|
text-indent: 30rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.classify-left .classify-item.active {
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
}
|
|
|
|
.classify-left .classify-item.active::before,
|
|
.classify-left .classify-item.active::after {
|
|
content: "";
|
|
display: block;
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
background-image: url('/static/icon/icon-radius.png');
|
|
background-size: cover;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -14rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.classify-left .classify-item.active::after {
|
|
transform: rotateZ(-90deg);
|
|
top: auto;
|
|
bottom: -14rpx;
|
|
}
|
|
|
|
.classify-right {
|
|
box-sizing: border-box;
|
|
width: calc(100% - 182rpx);
|
|
padding: 0 20rpx 0 30rpx;
|
|
margin-left: 182rpx
|
|
}
|
|
|
|
.classify-banner image {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.top-btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
width: calc(100% - 230rpx);
|
|
height: 50rpx;
|
|
padding-left: 20rpx;
|
|
margin-top: 18rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.top-btns .btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 100%;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
position: relative;
|
|
}
|
|
|
|
.top-btns .right {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-btns .btn .cart-num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-radius: 100%;
|
|
background-color: #f72e2e;
|
|
font-size: 14rpx;
|
|
color: #ffffff;
|
|
position: absolute;
|
|
top: -4rpx;
|
|
right: 0;
|
|
}
|
|
.top-btns .btn button{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 商品轮播 */
|
|
.goods-banner {
|
|
box-sizing: border-box;
|
|
height: 750rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.section-other {
|
|
box-sizing: border-box;
|
|
margin: 25rpx auto 0;
|
|
padding:20rpx 24rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.goods-info {
|
|
margin-top:10rpx;
|
|
}
|
|
|
|
.detail-price {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.detail-price .price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 26rpx;
|
|
line-height: 30rpx;
|
|
color: #f72e2e;
|
|
font-family: "Arial";
|
|
}
|
|
.detail-price .amount {
|
|
position: absolute;
|
|
right: 0rpx;
|
|
top: 0;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 40rpx;
|
|
}
|
|
.detail-price .price>text:nth-of-type(2) {
|
|
font-size: 44rpx;
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.goods-info .title {
|
|
font-size: 34rpx;
|
|
margin: 20rpx 0 0 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.goods-info .subtitle {
|
|
font-size: 24rpx;
|
|
opacity: .8;
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
.goods-chose .chose-item {
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
line-height: 36rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.goods-chose .chose-item .tit {
|
|
width: 86rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.goods-chose .chose-item:nth-of-type(2) {
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.goods-chose .chose-item .txt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: calc(100% - 86rpx);
|
|
}
|
|
|
|
.goods-chose .chose-item .txt>text:nth-of-type(2) {
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.pull-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40rpx 0 15rpx;
|
|
font-size: 36rpx;
|
|
color: #3a9e3a;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pull-title::before,
|
|
.pull-title::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 36rpx;
|
|
height: 8rpx;
|
|
background-image: url('/static/icon/icon-spot-blue.png');
|
|
background-size: cover;
|
|
margin: 5rpx 20rpx 0;
|
|
}
|
|
|
|
.pull-title::after {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.goods-details .rich {
|
|
font-size: 26rpx;
|
|
line-height: 48rpx;
|
|
padding:4rpx;
|
|
}
|
|
|
|
/* 相关产品 */
|
|
.relevant-goods {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
/* 返回顶部 */
|
|
.back-top {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border: 2rpx solid #d9dcda;
|
|
border-radius: 100%;
|
|
background-color: #ffffff;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
right: 25rpx;
|
|
bottom: 300rpx;
|
|
}
|
|
|
|
.back-top>image {
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
}
|
|
|
|
.detail-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding:16rpx 20rpx;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 16rpx rgba(146, 146, 146, .1);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right:0;
|
|
z-index: 999;
|
|
border-top: 1px solid #ececec;
|
|
}
|
|
|
|
.detail-foot .collection-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
line-height: 1.5;
|
|
width: 100rpx;
|
|
}
|
|
|
|
.detail-foot .collection-btn image {
|
|
width: 35rpx;
|
|
height: 33rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.detail-foot .cart-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: calc(100% - 175rpx);
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.detail-foot .cart-btn .btn {
|
|
width: 100%;
|
|
line-height: 92rpx;
|
|
border-radius: 46rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
background-color: #3a9e3a;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.detail-foot .cart-btn .btn:nth-of-type(2) {
|
|
width: 230rpx;
|
|
background-color: #c58a5b;
|
|
}
|
|
|
|
/* 搜索页面 */
|
|
.search-screen {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 78rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background-color: #ffffff;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.search-screen .item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.search-screen .item:nth-of-type(1) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.search-screen .item>image {
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.search-screen .item .btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 26rpx;
|
|
margin: 2rpx 0 0 6rpx;
|
|
}
|
|
|
|
.no-more {
|
|
font-size: 20rpx;
|
|
line-height: 1.2;
|
|
padding: 40rpx 0;
|
|
text-align: center;
|
|
color: rgba(51, 51, 51, .4);
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* 弹窗 */
|
|
.pull-pop-bg {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, .7);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.screen-pop {
|
|
box-sizing: border-box;
|
|
width: 590rpx;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
}
|
|
|
|
.screen-pop>view {
|
|
padding: 30rpx 42rpx 26rpx 38rpx;
|
|
border-bottom: 12rpx solid #f7f7f7;
|
|
}
|
|
|
|
.screen-pop>view:nth-last-of-type(1),
|
|
.screen-pop>view:nth-last-of-type(2) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.screen-pop .close-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
padding: 0;
|
|
border: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.screen-pop .close-btn image{
|
|
width: 21rpx;
|
|
height: 21rpx;
|
|
}
|
|
|
|
.price-type>text,
|
|
.price-section>text {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
line-height: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
.price-type-list {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-type-list>.item,
|
|
.price-section-list>input {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 173rpx;
|
|
height: 58rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #eaeaea;
|
|
margin-right: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.price-type-list>.item.active{
|
|
background-color: #3a9e3a;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.price-section-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-section-list>input {
|
|
width: 222rpx;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.price-section-list>text {
|
|
width: 26rpx;
|
|
height: 2rpx;
|
|
background-color: #333333;
|
|
}
|
|
|
|
.screen-pop .submit-btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: calc(100% - 80rpx);
|
|
height: 80rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.screen-pop .submit-btns>text {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 170rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #d6d6d6;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.screen-pop .submit-btns>text:last-child {
|
|
width: calc(100% - 185rpx);
|
|
border: 0;
|
|
background-color: #3a9e3a;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 购物车页面 */
|
|
.cart-addr {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 55rpx;
|
|
padding: 0 38rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
color: #343434;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.cart-addr .edit-btn{
|
|
color: #3a9e3a;
|
|
}
|
|
.cart-addr .del-btn{
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.cart-addr .addr {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(100% - 70rpx);
|
|
}
|
|
|
|
.cart-addr .addr image {
|
|
width: 19rpx;
|
|
height: 23rpx;
|
|
margin: 3rpx 9rpx 0 0;
|
|
}
|
|
|
|
.all-chose {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 18rpx;
|
|
height: 80rpx;
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
}
|
|
|
|
.all-chose>text {
|
|
margin-left: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #3a9e3a;
|
|
}
|
|
|
|
.radio {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 100%;
|
|
border: 2rpx solid #c9c9c9;
|
|
}
|
|
|
|
.radio image {
|
|
width: 22rpx;
|
|
height: 16rpx;
|
|
}
|
|
|
|
.radio.checked {
|
|
background-color: #3a9e3a;
|
|
border: 2rpx solid #3a9e3a;
|
|
}
|
|
|
|
.cart-list {
|
|
margin: 0 auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.cart-list .item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 34rpx 18rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
}
|
|
|
|
.cart-list .item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.cart-list .item .txt-bg {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: calc(100% - 60rpx);
|
|
}
|
|
|
|
.cart-list .item .img,
|
|
.cart-list .item .img image {
|
|
width: 187rpx;
|
|
height: 187rpx;
|
|
}
|
|
|
|
.cart-list .item .txt {
|
|
width: calc(100% - 205rpx);
|
|
}
|
|
|
|
.cart-list .item .tit {
|
|
font-size: 26rpx;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.cart-list .item .price-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.cart-list .item .price-bg {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(100% - 120rpx);
|
|
margin-top: 45rpx;
|
|
}
|
|
|
|
.cart-list .item .price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.cart-list .item .price>text:nth-of-type(2) {
|
|
font-size: 34rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.cart-list .item .btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 120rpx;
|
|
}
|
|
|
|
.cart-list .item .btns input {
|
|
box-sizing: border-box;
|
|
width: 60rpx;
|
|
height: 40rpx;
|
|
padding: 0 6rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #f5f5f5;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.cart-list .item .btns image {
|
|
width: 19rpx;
|
|
}
|
|
|
|
.total-price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 120rpx;
|
|
padding: 0 20rpx;
|
|
box-shadow: 0 0 16rpx rgba(146, 146, 146, .12);
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 98rpx;
|
|
z-index: 999;
|
|
}
|
|
|
|
.total-price .txt,
|
|
.total-price .txt>view {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.total-price .chose-all {
|
|
margin-right: 30rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.total-price .chose-all>text {
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.total-price .price-box {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.total-price .price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.total-price .price>text:nth-of-type(2) {
|
|
font-size: 34rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.total-price .submit-btn,
|
|
.confirm-foot .submit-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 200rpx;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
background-color: #3a9e3a;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.total-price .submit-btn.grey{
|
|
background-color: #999999;
|
|
}
|
|
|
|
.total-price .submit-btn>text {
|
|
font-size: 28rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
|
|
/* 订单确认页面 */
|
|
.order-addr {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.order-addr .address {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.order-addr .address .type {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 34rpx;
|
|
background-color:#3a9e3a;
|
|
font-size: 22rpx;
|
|
line-height: 1.2;
|
|
color: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.order-addr .street {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.order-addr .name>text {
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
|
|
.order-detail-addr{
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
.order-detail-addr .addt-icon{
|
|
width: 25rpx;
|
|
height: 29rpx;
|
|
margin: 9rpx 15rpx 0 0;
|
|
}
|
|
.order-detail-addr .txt{
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
|
|
.pay-type,
|
|
.pay-type .type {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.pay-type .type image {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.order-list {
|
|
padding: 0;
|
|
}
|
|
|
|
.order-list .item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 25rpx 20rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
}
|
|
|
|
.order-list .item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.order-list .img,
|
|
.order-list .img>image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
.order-list .img>image {
|
|
border: 1px solid #ececec;
|
|
}
|
|
.order-list .txt {
|
|
width: calc(100% - 210rpx);
|
|
font-size: 28rpx;
|
|
}
|
|
.order-list .txt .tit {
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 30rpx;
|
|
}
|
|
.order-list .txt .sting {
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp:1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 24rpx;
|
|
margin-top: 6rpx;
|
|
color: #999;
|
|
}
|
|
.order-list .txt .price-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.order-list .txt .price-bg,
|
|
.confirm-foot .actual-pay {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.order-list .txt .price,
|
|
.confirm-foot .actual-pay .price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.order-list .txt .price>text:nth-of-type(2),
|
|
.confirm-foot .actual-pay .price>text:nth-of-type(2) {
|
|
font-size: 36rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.order-info .item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
line-height: 64rpx;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
.order-info .item .input {
|
|
width: 70%;
|
|
text-align: right;
|
|
border: none;
|
|
font-size: 26rpx;
|
|
}
|
|
.order-info .item .import {
|
|
color: #f00;
|
|
margin-right: 8rpx;
|
|
}
|
|
.order-info .item>text:nth-of-type(2) {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.order-info .item:nth-of-type(even)>text:nth-of-type(2) {
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.order-info .item:last-child {
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.order-info .item:last-child>text:nth-of-type(2) {
|
|
font-weight: normal;
|
|
color: #666666;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.order-info .item>input {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
margin-top: 15rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.order-info .item-one{
|
|
justify-content: flex-start;
|
|
margin-bottom: 0;
|
|
line-height: 62rpx;
|
|
}
|
|
.order-info .item-one>text:nth-of-type(1),
|
|
.order-info .item-two>text:nth-of-type(1){
|
|
color: #666666;
|
|
}
|
|
|
|
.order-info .item-one>text:nth-of-type(2){
|
|
font-weight: normal;
|
|
color: #333333 !important;
|
|
}
|
|
|
|
.order-info .item-two{
|
|
margin-bottom: 0;
|
|
line-height: 62rpx;
|
|
}
|
|
.order-info .item-two:last-child{
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.order-info .item-two .price {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 40rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.order-info .item-two .price>text:nth-of-type(2) {
|
|
font-size: 28rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
.order-info .item-two:last-child .price{
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.confirm-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 116rpx;
|
|
padding: 0 20rpx;
|
|
box-shadow: 0 0 16rpx rgba(146, 146, 146, .12);
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.confirm-foot .actual-pay>text {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.confirm-foot .submit-btn {
|
|
width: 246rpx;
|
|
}
|
|
|
|
/* 提示弹窗 */
|
|
.pull-pop-center {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.pull-pop {
|
|
box-sizing: border-box;
|
|
width: calc(100% - 236rpx);
|
|
padding: 45rpx 35rpx 50rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.pull-pop .title {
|
|
font-size: 36rpx;
|
|
line-height: 40rpx;
|
|
color: #f72e2e;
|
|
}
|
|
|
|
.pull-pop .msg {
|
|
font-size: 26rpx;
|
|
line-height: 1.6;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.pull-pop .close-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.pull-pop .close-btn>image {
|
|
width: 21rpx;
|
|
height: 21rpx;
|
|
}
|
|
|
|
.pull-pop .btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.pull-pop .btns .btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 246rpx;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
background-color: #3a9e3a;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 2rpx;
|
|
text-indent: 2rpx;
|
|
}
|
|
|
|
/* 地址弹窗 */
|
|
.address-pop {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 10rpx 20rpx 30rpx;
|
|
background-color: #f7f7f7;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.address-pop .title {
|
|
font-size: 28rpx;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.address-pop .addr-list {
|
|
height: 650rpx;
|
|
}
|
|
.address-pop .addr-list .txt {
|
|
width: 100%;
|
|
}
|
|
.address-list .item,
|
|
.address-pop .item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.address-pop .on {
|
|
border: 1px solid #f00;
|
|
}
|
|
.address-list .item .address,
|
|
.address-pop .item .address {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.address-list .item .address .type,
|
|
.address-pop .item .address .type {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 34rpx;
|
|
background-color: #3a9e3a;
|
|
font-size: 20rpx;
|
|
line-height: 1.2;
|
|
color: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.address-list .item .street,
|
|
.address-pop .item .street {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin: 10rpx 0 12rpx;
|
|
}
|
|
|
|
.address-list .item .name>text,
|
|
.address-pop .item .name>text {
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.address-pop .add-address-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 584rpx;
|
|
height: 95rpx;
|
|
margin: 40rpx auto 0;
|
|
background-color: #3a9e3a;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 2rpx;
|
|
text-indent: 2rpx;
|
|
}
|
|
|
|
.address-pop .close-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.address-pop .close-btn>image {
|
|
width: 21rpx;
|
|
height: 21rpx;
|
|
}
|
|
.address-list .btn,
|
|
.address-pop .btn{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
/* 新增地址 */
|
|
.info-list{
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
.info-list .item{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 95rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
font-size: 26rpx;
|
|
}
|
|
.info-list .item>text{
|
|
width: 172rpx;
|
|
text-indent: 4rpx;
|
|
}
|
|
.info-list .item>input{
|
|
width: calc(100% - 172rpx);
|
|
}
|
|
.info-list .tags{
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(100% - 172rpx);
|
|
}
|
|
.info-list .tags>text{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 102rpx;
|
|
height: 54rpx;
|
|
border-radius: 5rpx;
|
|
border: 2rpx solid #eaeaea;
|
|
margin-right: 10rpx;
|
|
letter-spacing: 2rpx;
|
|
text-indent: 2rpx;
|
|
}
|
|
.info-list .tags>text:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.info-list .tags>text.checked{
|
|
background-color: #3a9e3a;
|
|
border: 2rpx solid #3a9e3a;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.set-default{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
}
|
|
.set-default .radio.checked{
|
|
background-color: #c58a5b;
|
|
border: 2rpx solid #c58a5b;
|
|
}
|
|
.set-default>text{
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.preserve-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 95rpx;
|
|
margin: 40rpx auto 0;
|
|
background-color: #3a9e3a;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 4rpx;
|
|
text-indent: 4rpx;
|
|
}
|
|
|
|
.information{
|
|
padding: 0 18rpx;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.information .item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 95rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
font-size: 26rpx;
|
|
}
|
|
.information .item:first-child{
|
|
height: 110rpx;
|
|
}
|
|
.information .item:last-child{
|
|
border-bottom: 0;
|
|
}
|
|
.information .item .edit-btn{
|
|
width: 12rpx;
|
|
height: 21rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.information .txt{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.information .avatar,
|
|
.information .avatar>image{
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 100%;
|
|
}
|
|
.information .txt>input{
|
|
text-align: right;
|
|
}
|
|
|
|
/* 弹窗 */
|
|
.information-pop input{
|
|
width: 100%;
|
|
height: 60rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
margin-top: 30rpx;
|
|
text-align: left;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
/* 地址列表 */
|
|
.address-list{
|
|
margin: 0 auto;
|
|
}
|
|
.address-list .btns{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 88rpx;
|
|
}
|
|
|
|
.address-btn{
|
|
width: 80%;
|
|
background-color: #f7f7f7;
|
|
position: fixed;
|
|
left: 10%;
|
|
bottom: 98rpx;
|
|
z-index: 999;
|
|
}
|
|
.address-btn .preserve-btn{
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
/* 订单页面 */
|
|
.order-nav{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 78rpx;
|
|
background-color: #ffffff;
|
|
padding: 0 30rpx;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
.order-nav .item{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 76rpx;
|
|
border-bottom: 2rpx solid #ffffff;
|
|
font-size: 28rpx;
|
|
}
|
|
.order-nav .item.active{
|
|
color: #49a149;
|
|
border-bottom: 2rpx solid #49a149;
|
|
}
|
|
|
|
.order-items .code{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 46rpx;
|
|
font-size: 24rpx;
|
|
color: #3a9e3a;
|
|
}
|
|
.order-items .code>text:first-child{
|
|
color: #333333;
|
|
opacity: .7;
|
|
}
|
|
.order-items .info{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 0 15rpx;
|
|
}
|
|
.order-items .left{
|
|
display: flex;
|
|
/* justify-content: space-between; */
|
|
align-items: flex-start;
|
|
width: 480rpx;
|
|
}
|
|
.order-items .img,
|
|
.order-items .img>image{
|
|
width: 162rpx;
|
|
height: 162rpx;
|
|
}
|
|
.order-items .txt{
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
margin: 10rpx 0 0 16rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp:1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.order-items .sting {
|
|
line-height: 1.5;
|
|
margin-left:16rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp:1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 24rpx;
|
|
margin-top: 6rpx;
|
|
color: #999;
|
|
}
|
|
.order-items .price{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
.order-items .price>text:nth-of-type(2){
|
|
font-size: 28rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
.order-items .number{
|
|
font-size: 24rpx;
|
|
color: #6e6e6e;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
.order-items .btns{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.order-items .btns .btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 156rpx;
|
|
height: 62rpx;
|
|
border: 2rpx solid #eaeaea;
|
|
border-radius: 31rpx;
|
|
margin-left: 12rpx;
|
|
font-size: 24rpx;
|
|
color: #6c6c6c;
|
|
}
|
|
.order-items .btns .orange{
|
|
background-color: #3a9e3a;
|
|
border: 2rpx solid #3a9e3a;
|
|
color: #ffffff !important;
|
|
}
|
|
.order-items .btns .orange-other{
|
|
border: 2rpx solid #3a9e3a;
|
|
color: #c58a5b !important;
|
|
}
|
|
.order-items .btns .btn:first-child{
|
|
margin-left: 0;
|
|
}
|
|
|
|
.service-btns {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
.kong {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
padding: 30rpx 0 60rpx 0;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.order-del-btns {
|
|
background-color: #fff;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
} |