@charset "UTF-8"; /* Author XGQ * 2019-10-27 */ .image_box { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .image_box image { width: 100%; height: 690rpx; } .top { margin: -20rpx 28rpx 45rpx 28rpx; padding: 10rpx 10rpx 70rpx 10rpx; background-color: #FFFFFF; border-radius: 0rpx 0rpx 15rpx 15rpx; } .top_box { display: -webkit-box; display: -webkit-flex; display: flex; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .top_box_text { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; margin: 50rpx 15rpx 20rpx 15rpx; } .top_box_text text { color: #FB6451; font-size: 40rpx; } .top_item { display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; margin: 60rpx 0 0 0; } .top_item_img { float: left; width: 28%; margin: 0rpx 10rpx 0rpx 20rpx; } .top_item_img image { width: 150rpx; height: 150rpx; border-radius: 50%; border: #F96865 solid 3rpx; } .top_item_center { float: left; width: 50%; } .top_item_center_title { font-size: 35rpx; color: #FB6451; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 0 10rpx 15rpx 0rpx; word-break: break-all; /*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/ text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ } .top_item_center_ramke { font-size: 25rpx; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; line-height: 35rpx; letter-spacing: 0.5rpx; word-break: break-all; /*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/ text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ } .top_item_button { float: right; width: 22%; padding: 65rpx 20rpx 0 1rpx; } .top_item_button button { font-size: 25rpx; background: #fd6969; color: #FFFFFF; border-radius: 50rpx; height: 45rpx; line-height: 45rpx; } .top_card { width: 309rpx; display: inline-block; margin: 15rpx; vertical-align:top; } .top_card_box { background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 20rpx; height: 250rpx; margin: 5rpx; } .img1 { background-image: url(https://mshopimg.yolipai.net/miniapp/images/giftbag/vip01.png); } .img2 { background-image: url(https://mshopimg.yolipai.net/miniapp/images/giftbag/vip02.png); } .img3 { background-image: url(https://mshopimg.yolipai.net/miniapp/images/giftbag/vip03.png); } .top_card_tite_box { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .top_card_tite_a { padding: 5rpx 25rpx 5rpx 25rpx; line-height: 29rpx; font-size: 25rpx; color: #FFFFFF; background: #ffa7c0; border-radius: 0rpx 20rpx 0rpx 6rpx; } .top_card_tite_b { padding: 5rpx 25rpx 5rpx 25rpx; line-height: 29rpx; font-size: 25rpx; color: #FFFFFF; background: #50dfdb; border-radius: 0rpx 20rpx 0rpx 6rpx; } .top_card_tite_c { padding: 5rpx 25rpx 5rpx 25rpx; line-height: 29rpx; font-size: 25rpx; color: #FFFFFF; background: #92cbff; border-radius: 0rpx 20rpx 0rpx 6rpx; } .top_card_tite_d { padding: 5rpx 25rpx 5rpx 25rpx; line-height: 29rpx; font-size: 25rpx; color: #FFFFFF; border-radius: 0rpx 20rpx 0rpx 6rpx; } .top_card_counte { padding: 40rpx 20rpx 0 0; text-align: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; color: #FFFFFF; font-size: 40rpx; } .top_card_remak { padding: 20rpx 0 40rpx 0; text-align: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: 20rpx; color: #FFFFFF; } .top_card_button_a button { margin: 0 85rpx; background: #ffa6bc; border-radius: 50rpx; line-height: 40rpx; height: 40rpx; color: white; font-size: 25rpx; } .top_card_button_b button { margin: 0 85rpx; background: #50dfdb; border-radius: 50rpx; line-height: 40rpx; height: 40rpx; color: white; font-size: 25rpx; } .top_card_button_c button { margin: 0 85rpx; background: #75bcfc; border-radius: 50rpx; line-height: 40rpx; height: 40rpx; color: white; font-size: 25rpx; } .top_card_button_d button { margin: 0 85rpx; border-radius: 50rpx; line-height: 40rpx; height: 40rpx; color: white; font-size: 25rpx; } .top_box_image { padding: 20rpx 20rpx 20rpx 20rpx; } .top_box_image image { height: 216rpx; width: 100%; } .top_box_image button { margin: 15rpx 95rpx 0rpx 95rpx; background: var(--color); border-radius: 50rpx; line-height: 60rpx; height: 60rpx; color: white; font-size: 30rpx; } .foot_box { margin: 0 30rpx 40rpx 30rpx; background: #FFFFFF; border-radius: 20rpx; } .foot_box_title { font-size: 43rpx; color: #000000; padding: 20rpx 30rpx 20rpx 30rpx; } .foot_box_text { font-size: 30rpx; color: #000000; line-height: 48rpx; padding: 20rpx 35rpx 50rpx 30rpx; } .button_box { margin: 50rpx 50rpx 50rpx 50rpx; text-align: center; } .button { margin: 0 30rpx; background:#61d3dd; border-radius: 50rpx; line-height: 80rpx; height: 80rpx; color: white; font-size: 35rpx; } .button_text { padding-top: 20rpx; font-size: 20rpx; color: white; height: 100rpx; } .foot_empty { height: 90rpx; } .foot_button { display: -webkit-box; display: -webkit-flex; display: flex; margin: 20rpx 0rpx 0rpx 0rpx; padding: 25rpx 0rpx; background: #FFFFFF; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; position: fixed; bottom: 0; left: 0; width: 100%; } .foot_button_buy { background:#61d3dd; color: #FFFFFF; width: 400rpx; height: 70rpx; font-size: 28rpx; line-height: 70rpx; border-radius: 40rpx; } .foot_button_notbuy{ background: #999999; color: #FFFFFF; width: 400rpx; height: 70rpx; font-size: 28rpx; line-height: 70rpx; border-radius: 30rpx 30rpx 30rpx 30rpx; } page { background-color: #9be0e5; } button::after { border: none; } .foot_box_text ._img { width: 100%; } .foot_box_text .img { line-height: 0; } .lvip { left: 30rpx; bottom: -58rpx; width: 20rpx; height: 90rpx; z-index: 5; } .rvip { right: 30rpx; bottom: -58rpx; width: 20rpx; height: 90rpx; z-index: 5; } .font_and_bg { background-color: var(--bg-color); color:var(--color); } /*-- 和弹出框的组件有关系 --*/ .xc-width { width: 100%; } .spec-model { position: fixed; bottom: 0; z-index: 20; background: white; width: 100%; /* padding: 0 30rpx; */ font-size: 32rpx; box-sizing: border-box; border-radius: 20rpx 20rpx 0 0; /* height: 72%; */ } .spec-model .pding { padding: 0 20rpx; } .pding { padding-top: 20rpx; padding-left: 20rpx; height: 81%; padding-right: 20rpx; font-size: 26rpx; color: #ea120f } .spec-goods { padding: 30rpx 0 20rpx; /* float: left; */ width: 100%; /* border-bottom:2rpx solid #eee; */ } .spec-img { float: left; height: 186rpx; width: 186rpx; border: 4rpx solid #eee } .spec-goods-info { float: left; padding: 0 25rpx; width: 400rpx; } .spec-goods-name { font-size: 30rpx; line-height: 35rpx; height: 70rpx; margin: 15rpx 20rpx 25rpx 0; overflow: hidden; text-overflow: ellipsis; color: #333; } .spec-goods-price { color: #d60021; font-size: 33rpx; font-weight: bold; /* display: flex; */ } .spec-goods-stock { margin-top: 3rpx; font-size: 24rpx; color: #999999; margin-right: 15rpx; } .spec-name { clear: both; padding: 20rpx 0; font-size: 30rpx; color: #333; } .spec-name+view{ flex-wrap: wrap; } .stores-img { width: 28rpx; height: 28rpx; margin-right: 10rpx; } .right-arrow { width: 15rpx; height: 15rpx; border-top: 2rpx solid #d70026; border-right: 2rpx solid #d70026; transform: rotate(45deg); display: inline-block; margin-bottom: 3rpx; } .spec-btn { color: black; background-color: white; padding: 10rpx 10rpx; font-size: 26rpx; line-height: 28rpx; float: left; border: 1rpx solid #dedede; margin: 4rpx 10rpx 4rpx 0; border-radius: 4rpx; } .spec-btn-click { color: white; background-color: #f23030; border: 1rpx solid #f23030; } .spec-cart-btns { /* width: 92%; */ line-height: 70rpx; /* margin: 0rpx auto; margin-top: 160rpx; */ /* border-radius: 20rpx; */ /* position: fixed; */ /* bottom: 50rpx; */ /* left: 4%; */ padding: 20rpx; } .spec-cart-btn { width: 100%; font-size: 30rpx; text-align: center; color: white; border-radius: 40rpx; } .spec-cart-btn.w40 { width: 46%; } .spec-add-cart { background-color: #ffb03f; } .spec-buy { background-color: #f23030; /* margin-left: 34rpx; */ } .spec-cart-disable { background: #bbbbbb; } .spec-cart-btn-lg { width: 614rpx; } /* 选择门店的弹窗 */ .mongolia-layer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 11; background: rgba(0, 0, 0, 0.4); width: 100%; height: 91.9%; } .popup-frame { position: fixed; z-index: 20; background: white; width: 100%; border-radius: 20rpx 20rpx 0 0; height: auto; bottom: 0; } .popup-top { border-bottom: 1rpx solid #eee; height: 155rpx; width: 95%; margin: auto; line-height: 155rpx; } .bg_rights { border-top: 2rpx solid; border-right: 2rpx solid; transform: rotate(45deg); display: inline-block; width: 15rpx; height: 15rpx; border-color: #da0b31; } .modal-closes { position: absolute; right: 30rpx; top: -15rpx; height: 25rpx; } .choose_more { margin-top: 40rpx; margin-right: 20rpx; } .choose_mores { margin-top: 30rpx; margin-right: 15rpx; } .store-list { width: 95%; min-height: 700rpx; overflow-y: scroll; margin: auto; max-height: 700rpx; } .store-list .store_choose { width: 100%; height: 120rpx; line-height: 125rpx; border-bottom: 1rpx solid #eee; padding: 10rpx 0; } .store-list .store_choose .store { width: 100%; margin: auto; line-height: 37rpx; padding-left: 20rpx; } .xc-hook { width: 35rpx; height: 35rpx; transform: rotate(-145deg); line-height: 37rpx; text-align: center; } .xc-hooks { width: 30rpx; height: 30rpx; border: 1rpx solid #999; } .address-frame { width: 93%; margin-left: 7rpx; } .nearby_store { margin-left: 17rpx; } .address_name { margin-right: 10rpx; width: 360rpx; } .address-val { height: 38rpx; line-height: 38rpx; } .store-bottom { width: 85%; margin: auto; height: 90rpx; } .searchbar { height: 95rpx; border-bottom: 2rpx solid rgb(238, 238, 238); } .storeListpadd { padding: 0rpx 31rpx; } .search { width: 125rpx; height: 45rpx; line-height: 45rpx; background-color: rgb(219, 27, 52); border-radius: 30rpx; color: rgb(255, 255, 255); } .inputstore { width: 510rpx; height: 43rpx; line-height: 43rpx; border-radius: 30rpx; border: 2rpx solid rgb(238, 238, 238); padding-left: 30rpx; } .determine { width: 260rpx; height: 55rpx; border-radius: 50rpx; line-height: 55rpx; } .default { width: 260rpx; height: 55rpx; border: 3rpx solid #c8c8c8; border-radius: 50rpx; line-height: 55rpx; } .store-bottom-frame { width: 95%; margin: auto; } /* 门店分类列表 */ .sort_store_list { max-height: 700rpx; min-height: 700rpx; overflow: hidden; overflow-y: scroll; width: 95%; margin: auto; } .sort_store_list .sort-store-frame { width: 100%; height: 100rpx; line-height: 100rpx; border-bottom: 1rpx solid #eee; } .sort_store_list .sort-store-frame .sort-store { width: 94.5%; margin: auto; }