/* 卡券权益 */ .welfare { text-align: center; width: 100%; background-color: #fff; padding: 30rpx; box-sizing: border-box; } .welfareCont-top{ flex-wrap: wrap; flex-direction: column; margin: 10rpx 0; } .welfareCont-list-img { border: 2rpx solid #eccc69; border-radius: 50%; width: 100rpx; height: 100rpx; display: inline-block; margin: 0 10rpx; } .welfareCont-text { position: relative; padding: 20rpx 50rpx; box-sizing: border-box; width: 100%; display: grid; border-top: 4rpx dashed #ebcc68; } .welfareCont-tips { background-color: #000000; color: #ffd88d; border-radius: 10rpx; margin-top: 20rpx; height: 54rpx; line-height: 54rpx; font-size: 27rpx; display: inline-block; font-weight: 600; padding: 0 20rpx; } .welfareCont { background: #fcf9e8; border: 2rpx solid #eac85c; border-radius: 20rpx; display: inline-block; text-align: center; box-sizing: border-box; } .rightsNumber { display: flex; width: 100%; margin: 30px 0 20px; padding: 0 30rpx; box-sizing: border-box; } .rightsNumber text { display: inline-block; flex: 1; } .rightsAdd { display: flex; } .rightsAdd-btn { background: #eaeaea; color: #535353; border-radius: 50%; text-align: center; width: 50rpx; height: 50rpx; line-height: 45rpx; font-size: 40rpx; font-weight: 600; } .rightsAdd-input { width: 100rpx; text-align: center; font-size: 28rpx; line-height: 50rpx; } .rightsTips { padding: 0 30rpx; color: #ff5b5d; font-size: 28rpx; font-weight: 600; } .rightsList, .notice, .detailsStore { background: white; margin: 30rpx; border-radius: 10rpx; padding: 10rpx 0; box-sizing: border-box; } .rightsLabel, .rightsLabel-pay { display: flex; padding: 20rpx; color: #6f7880; font-size: 30rpx; } .rightsLabel .rightsLabel-left { flex: 1; color: #747d86; } .rightsLabel-black { padding-top: 30rpx; } .rightsLabel-range { display: flex; color: #000; font-weight: 600; } .rightsLabel-row { width: 38rpx; height: 38rpx; margin: 2rpx 0 0 6rpx; } .rightsLabel-black .rightsLabel-right, .rightsLabel-red { color: #ff5b5d; font-size: 32rpx; } .rightsLabel-black .rightsLabel-left { color: #000; } .rightsLabel-score { font-weight: 600; color: #000; font-size: 38rpx; } .rightsLabel-pay { color: #000; } .rightsLabel-pay .rightsLabel-left { flex: 1; } .notice { padding: 20rpx; } .noticeTitle { display: flex; margin-bottom: 20rpx; } .noticeTitle-flex { flex: 1; display: flex; font-size: 30rpx; line-height: 46rpx; } .noticeTitle-img { width: 46rpx; height: 46rpx; margin-right: 20rpx; } .noticeText { font-size: 26rpx; height: 0; overflow: hidden; } .noticeText.active { height: auto; } .noticeText-top { margin: 30rpx 0 10rpx; font-weight: 600; } .noticeText-cont { line-height: 60rpx; color: #666; } .noticeTitle-row { width: 46rpx; height: 46rpx; } .noticeTitle-row.active { transform: rotate(90deg); } /* 门店 */ .detailsStore { padding: 20rpx; } .detailsStore-top { display: flex; line-height: 30rpx; margin-bottom: 20rpx; } .detailsStore-see { color: #dfae2e; border: 2rpx solid #dfae2e; border-radius: 10rpx; font-size: 28rpx; margin-top: 30rpx; height: 80rpx; line-height: 80rpx; text-align: center; } .detailsStore-see text { display: inline-block; } .detailsStore-see image { width: 50rpx; height: 50rpx; margin-left: 10rpx; } /* 购买按钮 */ .rightsBtn { position: fixed; bottom: 0; left: 0; width: 100%; height: 100rpx; z-index: 9; background: #fff; } .rightsBtn button, .rightsBtn text { display: block; margin: 12rpx 30rpx; width: calc(100% - 60rpx) !important; height: 74rpx !important; line-height: 74rpx !important; padding: 0; background: #eacf88; text-align: center; border-radius: 60rpx; font-size: 30rpx; } .rightsBtn.active text { background: #dedede; color: #888; } /* 选择收货地址 */ .addressBack { position: fixed; left: 0; bottom: 0; background: rgba(0, 0, 0, .4); z-index: 10; width: 100%; height: 100%; display: none; } .addressBack.active { display: block; } .addressCont { position: fixed; left: 0; bottom: -1000%; transition: .2s; background: #fff; z-index: 11; width: 100%; } .addressCont.active { bottom: 0; } .addressCont-title { height: 90rpx; line-height: 90rpx; display: flex; padding: 0 30rpx; box-sizing: border-box; font-size: 28rpx; font-weight: 600; } .addressCont-left { flex: 1; } .addressCont-right { color: #309ded; } .header-classify { white-space: nowrap; box-sizing: border-box; height: 600rpx; } .addressCont-list { padding: 30rpx 20rpx; box-sizing: border-box; font-size: 30rpx; overflow: hidden; position: relative; } .addressCont-top { display: flex; margin-bottom: 10rpx; } .addressCont-name { font-weight: 600; } .addressCont-text { color: #666; width: calc(100% - 160rpx); } .addressCont-list:last-child { border: none; } .rightsLabel-address { display: flex; } .rightsLabel-address text { display: inline-block; width: calc(100% - 46rpx); } .rightsLabel-address .rightsLabel-right { display: flex; font-size: 28rpx; } .address-tool { display: flex; float: right; } .address-tool-btn { font-size: 24rpx; margin-top: 20rpx; border: 2rpx solid #666; color: #666; border-radius: 6rpx; text-align: center; height: 50rpx; line-height: 50rpx; padding: 0 20rpx; margin-right: 20rpx; display: flex; } .address-tool-btn-del { color: #dfae2e; border-color: #dfae2e; } .address-tool-icon { width: 120rpx; height: 54rpx; line-height: 54rpx; border-radius: 4rpx; text-align: center; color: #fff; position: absolute; top: 45rpx; right: 10rpx; background: #dfae2e; transform: scale(.9, .9); font-size: 24rpx; } .rightsPoint { position: fixed; left: 0; bottom: 100rpx; background: #fff; z-index: 9; width: 100%; padding: 20rpx 20rpx 10rpx; box-sizing: border-box; } .rightsPoint-cont { width: 100%; background: #fcf9e8; border: 2rpx solid #ecd390; border-radius: 10rpx; position: relative; max-height: 50vh; overflow-y: scroll; } .rightsPoint-top { font-size: 28rpx; display: flex; padding: 20rpx; box-sizing: border-box; font-weight: 600; } .rightsPoint-top image { width: 36rpx; height: 36rpx; margin-right: 10rpx; } .rightsPoint-text { padding: 0 20rpx; box-sizing: border-box; font-size: 24rpx; line-height: 44rpx; height: 90rpx; transition: height 25s; overflow: hidden; } .rightsPoint-text.active { height: auto; transition: 2s; } .rightsPoint-text view { position: relative; padding-left: 40rpx; } .rightsPoint-text view::after { position: absolute; content: ''; left: 10rpx; top: 20rpx; background: #000; width: 10rpx; height: 10rpx; border-radius: 50%; } .rightsPoint-bolck { position: absolute; top: 0; left: 0; height: calc(100% - 40rpx); } .pointMore { text-align: center; width: 100%; background: #fff8e5; height: 80rpx; line-height: 82rpx; position: relative; margin-top: 10rpx; } .pointMore::after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 2rpx; background: #ecd390; } .pointMore text { font-size: 28rpx; color: #c38e00; animation: dong 1.8s infinite; display: inline-block; } .pointMore image { width: 30rpx; height: 30rpx; margin-left: 4rpx; vertical-align: -4rpx; animation: dong 1.8s infinite; } @keyframes dong { 0% { transform: translate(0px, 0px); } 50% { transform: translate(0px, -6rpx); } 100% { transform: translate(0px, 0px); } } .rightsCont-btn { display:inline-block; text-align: center; background-image: linear-gradient(to right, #eaaaa8, #f4e5c2, #eaaaa8); box-shadow: 0 0 10rpx rgba(233, 166, 166, .9); border-radius: 30px; padding: 5rpx; line-height: 40rpx; } .rightsCont-btn text { border-radius: 30px; width: 100%; height: 100%; display: block; padding: 10rpx 20rpx; box-sizing: border-box; background: linear-gradient(#fefcfa, #f9f0db, #f7ebcf); font-size: 30rpx; } .webBack { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9999; background-color: #fff; text-align: center; display: none; } .webBack.active { display: block; }