page { height: 100vh; } .container { background: #f5f5f5; } /*弹窗*/ .mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; z-index: 9000; opacity: 0.7; } .guanbi { border: 5rpx solid #7F7F7F; position: absolute; bottom: -70rpx; color: #7F7F7F; font-size: 60rpx; border-radius: 40rpx; width: 60rpx; height: 60rpx; text-align: center; line-height: 57rpx; } .modalDlg { width: 580rpx; /* height: 750rpx; */ position: fixed; top: 45%; left: 0; z-index: 9999; margin: -370rpx 85rpx; background-color: #fff; border-radius: 36rpx; display: flex; flex-direction: column; align-items: center; background: #EE4749; } .modalDlg button { margin-top: 30rpx; margin-bottom: 30rpx; font-size: 24rpx; color: #47C5FA; background: #E7F7FF; border-radius: 30rpx; } .modalDlg .table { /* border:1px solid red; */ overflow: scroll; max-height: 600rpx; min-height: 200rpx; } .modalDlg .huode { color: white; margin-top: 30rpx; font-size: 30rpx; } .modalDlg .youhuiquan { margin-top: 10rpx; font-size: 24rpx; color: white; } .modalDlg .line { width: 520rpx; /* border: 2px solid blue; */ background: white; height: 140rpx; border-radius: 30rpx; overflow: hidden; text-align: center; margin-top: 20rpx; } .modalDlg .line .left { width: 150rpx; height: 140rpx; background: #E7F7FF; float: left; } .modalDlg .line .left .ljsy { width: 100rpx; font-size: 20rpx; background: #47C5FA; color: white; margin: 0px auto; border-radius: 20rpx; margin-top: 5rpx; } .modalDlg .line .right .mz { margin-top: 30rpx; overflow: hidden; color: black; font-weight: 600; font-size: 26rpx; } .modalDlg .line .right .sj { color: #C8C5C5; font-size: 20rpx; margin-top: 20rpx; } .adv { position: fixed; left: 0rpx; bottom: 0; z-index: 100; width: 750rpx; height: 165rpx; display: flex; /* border: 1px solid red; */ } .banner { width: 750rpx; height: 492rpx; z-index: 20; } .banner image { width: 100%; height: 492rpx; } .m-menu { /* background: #fff; */ padding: 0 20rpx; margin: 16rpx 0; display: flex; align-items: center; flex-wrap: wrap; height: 272rpx; justify-content: space-between; } .category-item { width: 168rpx; height: 272rpx; position: relative; } .item-name { position: absolute; left: 0; right: 0; top: 30rpx; text-align: center; font-size: 24rpx; color: #fff; margin: 0 0 12rpx 0; } .item-desc { position: absolute; left: 0; right: 0; top: 64rpx; text-align: center; font-size: 20rpx; color: #fff; } .m-menu .item { width: 245rpx; height: 126rpx; margin-top: 10rpx; margin-bottom: 10rpx; } .hot-item { padding: 0 20rpx; } .hot-item image { width: 710rpx; height: 172rpx; margin-bottom: 12rpx; } .m-menu image { width: 168rpx; height: 272rpx; border-radius: 10rpx; } .m-menu text { display: block; font-size: 24rpx; text-align: center; margin: 0 auto; line-height: 1; color: #333; } .shoadow { box-shadow: 1px 2px 2px 2px #f7f7f1; } .image-margin { margin-bottom: 20rpx; } .a-section { width: 750rpx; height: auto; overflow: hidden; /* margin-top: 20rpx; */ } .a-section .h { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; height: 120rpx; } .popular-title { display: flex; align-items: center; justify-content: space-between; height: 34rpx; width: 100%; } .a-section .h .txt1 { width: 4rpx; height: 34rpx; background: #09AFFF; margin: 0 12rpx 0 0; } .devide-bar { width: 4rpx; height: 34rpx; background: #09AFFF; margin: 0 12rpx 0 0; } .title-text { font-size: 33rpx; font-weight: bold; } .title-left { display: flex; align-items: center; height: 34rpx; } .title-right { display: flex; align-items: center; height: 34rpx; font-size: 24rpx; } .a-section .h .txt { padding-right: 30rpx; font-size: 33rpx; font-weight: bold; } .a-brand .b { width: 750rpx; height: auto; overflow: hidden; position: relative; } .a-brand .wrap { position: relative; } .a-brand .img { position: absolute; left: 0; top: 0; } .a-brand .mt { position: absolute; z-index: 2; padding: 27rpx 31rpx; left: 0; top: 0; } .a-brand .mt .brand { display: block; font-size: 33rpx; height: 43rpx; color: #fff; } .a-brand .mt .price, .a-brand .mt .unit { font-size: 25rpx; color: #fff; } .a-brand .item-1 { float: left; width: 375rpx; height: 252rpx; overflow: hidden; border-top: 1rpx solid #fff; margin-left: 1rpx; } .a-brand .item-1:nth-child(2n+1) { margin-left: 0; width: 374rpx; } .a-brand .item-1 .img { width: 375rpx; height: 253rpx; } .a-coupon { width: 750rpx; height: auto; overflow: hidden; } .a-coupon .b .item { position: relative; height: 200rpx; width: 700rpx; background: linear-gradient(to right, #cfa568, #e3bf79); margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx; padding-top: 30rpx; } .a-coupon .b .tag { height: 32rpx; background: #a48143; padding-left: 16rpx; padding-right: 16rpx; position: absolute; left: 20rpx; color: #fff; top: 20rpx; font-size: 20rpx; text-align: center; line-height: 32rpx; } .a-coupon .b .content { margin-top: 24rpx; margin-left: 40rpx; display: flex; margin-right: 40rpx; flex-direction: row; } .a-coupon .b .content .left { flex: 1; } .a-coupon .b .discount { font-size: 50rpx; color: #b4282d; } .a-coupon .b .min { color: #fff; } .a-coupon .b .content .right { width: 400rpx; } .a-coupon .b .name { font-size: 44rpx; color: #fff; margin-bottom: 14rpx; } .a-coupon .b .desc { font-size: 24rpx; color: #fff; } .a-coupon .b .time { font-size: 24rpx; color: #fff; line-height: 30rpx; } .a-groupon { width: 750rpx; height: auto; overflow: hidden; } .a-groupon .b .item { border-top: 1px solid #d9d9d9; margin: 0 20rpx; height: 244rpx; width: 710rpx; } .a-groupon .b .img { margin-top: 12rpx; margin-right: 12rpx; float: left; width: 220rpx; height: 220rpx; } .a-groupon .b .right { float: left; height: 244rpx; width: 476rpx; display: flex; flex-flow: row nowrap; } .a-groupon .b .text { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; overflow: hidden; height: 244rpx; width: 476rpx; } .a-groupon .b .name { float: left; display: block; color: #333; line-height: 50rpx; font-size: 30rpx; } .a-groupon .b .desc { width: 476rpx; display: block; color: #999; line-height: 50rpx; font-size: 25rpx; } .a-groupon .b .price { width: 476rpx; display: flex; color: #ab956d; line-height: 50rpx; font-size: 33rpx; } .a-groupon .b .counterPrice { text-decoration: line-through; font-size: 28rpx; color: #999; } .a-groupon .b .retailPrice { margin-left: 30rpx; font-size: 28rpx; color: #a98f76; } .a-new .b { width: 750rpx; height: auto; overflow: hidden; padding: 0 31rpx 45rpx 31rpx; } .a-new .b .item { float: left; width: 302rpx; margin-top: 10rpx; margin-left: 21rpx; margin-right: 21rpx; } .a-new .b .item-b { margin-left: 42rpx; } .a-new .b .img { width: 298rpx; height: 300rpx; } .a-new .b .name { /*text-align: center;*/ display: block; width: 302rpx; height: 60rpx; margin-bottom: 14rpx; overflow: hidden; font-size: 30rpx; color: #333; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; margin-top: 5rpx; margin-left: 0rpx; line-height: 1em; /*行间距*/ } .a-new .b .price { display: block; /*text-align: center;*/ line-height: 30rpx; font-size: 30rpx; color: darkred; margin-left: 10rpx; } .a-new .b .brand { font-size: 20rpx; color: #a98f76; display: block; line-height: 30rpx; margin-bottom: 5rpx; margin-left: 12rpx; } .a-popular { width: 750rpx; height: auto; overflow: hidden; padding: 0 20rpx; margin: -14rpx 0 0; } .popular-item { box-shadow: 0 0 10rpx 0 rgba(100, 100, 100, 0.2); border-radius: 10rpx; margin: 0 0 16rpx 0; min-height: 380rpx; width: 710rpx; background: #fff; padding: 20rpx 30rpx 24rpx; display: flex; flex-direction: column; } .item-img-wrapper { position: relative; } .self-tag { height: 28rpx; background: #09afff; color: #fff; padding: 0 8rpx; /* line-height: 28rpx; */ font-size: 20rpx; margin: 0 12rpx 0 0; border-radius: 4rpx; } .popular-item .product-item-name { width: 380rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 28rpx; } .popular-item .item-brief { width: 400rpx; overflow: hidden; /* white-space: nowrap; */ text-overflow: ellipsis; font-size: 20rpx; display: -webkit-box; color: #85868A; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 5rpx; /*超过两行省略号*/ } .counter-price { font-size: 20rpx; text-decoration: line-through; color: #2A2A2A; line-height: 28rpx; text-align: center; } .retail-price { font-size: 32rpx; font-weight: bold; color: #DD483E; text-align: center; } .retail-price .title { font-size: 26rpx; color: #DD483E; line-height: 48rpx; } .retail-price .unit { font-size: 21rpx; font-weight: 400; color: #DD483E; } .retail-price .price { font-size: 32rpx; font-weight: bold; color: #DD483E; margin-left: 10rpx; } /* 活动商品显示样式 */ .activity { height: 75rpx; background: linear-gradient(67deg, #4F43DD, #689CF2, #BA64E2); border-radius: 10rpx; display: flex; justify-content: space-between; flex-direction: row; align-items: center; } .activity .clock { width: 42rpx; height: 42rpx; margin-right: 10rpx; } .activity .time { font-size: 20rpx; font-weight: 400; color: #F4F4F4; line-height: 30rpx; } .activity .arrow { width: 10rpx; height: 16rpx; margin-left: 10rpx; margin-right: 10rpx; } .activity .limit { width: 131rpx; height: 32rpx; background-image: url(https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/activity2.png); background-size: 100% 100%; color: #fff; font-size: 23rpx; text-align: center; margin-left: 20rpx; } .a-popular .b .img { width: 650rpx; height: 426rpx; border-radius: 10rpx; } .item-tag { position: absolute; left: 0; top: 20rpx; height: 32rpx; width: 116rpx; text-align: center; color: #fff; font-size: 22rpx; background: #09AFFF; border-radius: 0 32rpx 32rpx 0; } .item-main { display: flex; /* align-items: center; */ justify-content: space-between; height: 68rpx; margin: 20rpx 0 10rpx; } .item-sub { display: flex; align-items: center; justify-content: space-between; /* height: 20rpx; */ } .item-left { display: flex; /* align-items: center; */ flex-direction: column; } .a-popular .b .right { float: left; height: 264rpx; width: 456rpx; display: flex; flex-flow: row nowrap; } .a-popular .b .text { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; overflow: hidden; height: 264rpx; width: 456rpx; } .a-popular .b .name { width: 456rpx; display: block; color: #333; line-height: 40rpx; font-size: 30rpx; } .a-popular .b .desc { width: 456rpx; display: block; color: #a98f76; line-height: 50rpx; font-size: 25rpx; } /* .a-popular .b .price { width: 456rpx; display: block; color: darkred; line-height: 50rpx; font-size: 33rpx; } */ .a-popular .b .brand { font-size: 20rpx; color: #a98f76; display: block; line-height: 30rpx; padding: 2rpx; } .a-topic .b { /*height: 533rpx;*/ height: auto; width: 750rpx; padding: 0 0 48rpx 0; } .good-nva { border: 1px #eee solid; } /* .a-topic .b .list { height: auto; width: 750rpx; white-space: nowrap; } .a-topic .b .item { display: block; height: 533rpx; width: 680.5rpx; margin-left: 30rpx; overflow: hidden; } .a-topic .b .t { height: 100rpx; background: #fff; display: flex; align-items: center; justify-content: center; } .a-topic .b .item:last-child { margin-right: 30rpx; } .a-topic .b .img { height: 387.5rpx; width: 680.5rpx; margin-bottom: 30rpx; } .a-topic .b .np { height: 35rpx; margin-bottom: 13.5rpx; color: #333; font-size: 30rpx; } .a-topic .b .np .price { margin-left: 20.8rpx; color: #ab956d; } .a-topic .b .np .discount { width: 476rpx; display: block; color: #999; line-height: 50rpx; font-size: 25rpx; } .a-topic .b .desc { display: block; height: 30rpx; color: #999; font-size: 24rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */ .good-grid { width: 750rpx; height: auto; overflow: hidden; } .good-grid .h { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; height: 130rpx; font-size: 33rpx; color: #333; } .good-grid .b { width: 750rpx; padding: 0 6.25rpx; height: auto; overflow: hidden; } .good-grid .b .item { float: left; background: #fff; width: 365rpx; margin-bottom: 6.25rpx; height: 452rpx; overflow: hidden; text-align: center; } .good-grid .b .item .a { height: 452rpx; width: 100%; } .good-grid .b .item-b { margin-left: 6.25rpx; } .good-grid .item .img { margin-top: 20rpx; width: 302rpx; height: 302rpx; } .good-grid .item .name { display: block; width: 365.625rpx; padding: 0 20rpx; overflow: hidden; height: 35rpx; margin: 11.5rpx 0 22rpx 0; text-align: center; font-size: 30rpx; color: #333; } .good-grid .item .price { display: block; width: 365.625rpx; height: 30rpx; text-align: center; font-size: 30rpx; color: #a98f76; } .good-grid .t { height: 100rpx; background: #fff; display: flex; align-items: center; justify-content: center; } .address { padding: 0 50rpx; height: 68rpx; display: flex; align-items: center; } .address .name { display: flex; align-items: center; /* height: 40rpx; */ width: 600rpx; overflow: hidden; float: left; } .address .shar { background: #fff; } .address button::after { border: none; } .address .shar image { float: right; width: 40rpx; height: 40rpx; margin-top: 6rpx; /* border:1px solid red; */ } .address .name .address-name { height: 68rpx; line-height: 68rpx; text-overflow: ellipsis; /* word-wrap: break-word; */ margin: 0 12rpx; white-space: nowrap; overflow: hidden; width: 240rpx; } .address .warning { font-size: 26rpx; color: red; margin-left: 40rpx; } .search { height: 68rpx; width: 100%; padding: 0 50rpx; display: flex; align-items: center; margin: 0 0 20rpx 0; } .search .van-icon-search { line-height: 59rpx; color: #ffffff; } .search .input { width: 648rpx; height: 68rpx; background: #fff; border-radius: 68rpx; /* border:1rpx solid gray; */ display: flex; align-items: center; justify-content: center; } .search .txt { height: 42rpx; line-height: 42rpx; /* color: #ffffff; */ color: gray; padding-left: 10rpx; font-size: 30rpx; } .no-login { width: 100%; height: auto; margin: 0 auto; background-color: #fff; } .no-login .c { width: 100%; height: auto; margin-top: 400rpx; } .no-login .c text { margin: 0 auto; display: block; width: 258rpx; height: 59rpx; line-height: 29rpx; text-align: center; font-size: 35rpx; } .no-login button { width: 90%; margin: 0 auto; color: #fff; font-size: 30rpx; height: 96rpx; line-height: 96rpx; right: 0; display: flex; justify-content: center; align-items: center; position: flex; bottom: 0; left: 0; border-radius: 0; padding: 0; margin-left: 5%; text-align: center; border-radius: 6rpx; letter-spacing: 3rpx; background-color: #242a48; /*background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);*/ } .wechat { width: 80rpx; height: 80rpx; margin-right: 15rpx; } /* 关于鲸致 */ .about-jz { padding: 28rpx 20rpx 46rpx; } .jzhz-img { width: 710rpx; } .service-tel { font-size: 20rpx; text-align: center; display: flex; align-items: center; justify-content: center; } .partner-title { font-size: 30rpx; margin: 40rpx 0 24rpx; text-align: center; font-weight: bold; } .jz-feature { margin: 40rpx 0 0; height: 60rpx; display: flex; align-items: center; justify-content: space-between; } .devide-line { height: 50rpx; width: 2rpx; background: #85868A; } .feature-item { display: flex; flex-direction: column; justify-content: space-between; font-size: 20rpx; align-items: center; height: 50rpx; } .jz-logo-wrapper { text-align: center; margin: 20rpx 0 10rpx; height: 30rpx; } .jz-logo { width: 152rpx; height: 30rpx; } .jz-company { color: #A4A4A4; font-size: 20rpx; margin: 24rpx 0 0; text-align: center; } .member-price { height: 34rpx; display: flex; align-items: center; justify-content: flex-end; } .memberPrice { font-size: 26rpx; color: #DD483E; margin: 0 0 0 30rpx; } .member-price-tag { width: 120rpx; height: 32rpx; line-height: 32rpx; background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center; background-size: 100% 100%; color: #5E3A11; font-size: 22rpx; padding: 0 8rpx 0 0; text-align: right; } /* 新客角标 */ .isNew { position: absolute; width: 80rpx; height: 120rpx; right: 30rpx; } .phone-btn{ position: fixed; z-index: 999; right: 20rpx; top: 500rpx; font-size: 60rpx; animation-iteration-count: infinite; width: 100rpx; height: 100rpx; border-radius: 100rpx; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; color: #09afff; } .phone-wrapper{ display: flex; align-items: center; } .right-icon{ color: #09afff; font-size: 30rpx; margin-left:6rpx; } .shop-name{ font-size: 24rpx; border:2rpx solid #09afff; line-height: 30rpx; padding:0 8rpx; border-radius:8rpx; margin:0 8rpx 0 0; word-break: keep-all; max-width: 240rpx; overflow: hidden; text-overflow: ellipsis; }