<template>
  <view class="page-container">
    <view class="swiper">
      <u-swiper :list="list"></u-swiper>
    </view>
    <view class="tag">
      <view class="item" v-for="(item,index) in tagList" :key="index">
        <image src="/static/index/Frame.png" alt="" />
        {{ item.value }}
      </view>
    </view>
    <view class="recommend">
      <view class="tuijian_img">
        <image src="/static/index/tuijian.png" alt="" />
      </view>

      <view
        class="recommend_js"
        v-for="(item, index) in rankList"
        :key="index"
        @click="goPDetails(item)"
      >
        <view class="js_img">
          <!-- <image src="/static/index/ranking.png" mode=""></image> -->
          <view class="border">
            <image
              :src="$globalData.publicUrl + item.cPortrait"
              mode=""
            ></image>
          </view>
        </view>
        {{ item.cNickName }}
      </view>
    </view>
    <view class="content">
      <view class="selcet_box">
        <view
          class="options"
          :class="{ hover: current == index }"
          v-for="(item, index) in selectList"
          :key="index"
          @click="onSelect(item, index)"
        >
          {{ item.cdescribe }}
        </view>
      </view>
      <view class="menu">
        <view
          class="project"
          v-for="(item, index) in pojectList"
          :key="index"
          @click="goGDetails(item.cId)"
        >
          <view class="img">
            <image :src="$globalData.publicUrl + item.cCover"></image>
            <!-- <view class="time">
							{{item.nMinute}}分钟
						</view> -->
          </view>
          <view class="describe">
            <view class="name">
              {{ item.cTitle }}
            </view>
            <view class="num">
              <view class="time">
                <image src="/static/index/time.png" alt="" />
                {{ item.nMinute }}分钟
              </view>
              <view class="time">
                <image src="/static/index/people.png" alt="" />
                {{ item.nSaleNumber }}人选择
              </view>
            </view>
            <view class="num">
              {{ item.cLdList }}
            </view>
            <!-- <view class="num">
							超{{item.nSaleNumber}}人选择
						</view> -->
            <view class="price_box">
              <view class="price">
                ￥<text>{{ item.dPrice }}</text>
              </view>
              <view class="make" @click.stop="onSubmit(item.cId)"> 预约 </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="modal-container" v-if="showCoupon">
      <view class="coupon-content show">
        <view class="coupon-box">
          <image class="imgs" src="/static/index/popup_bgi.png" mode=""></image>
          <view class="border">
            <image class="imgs" src="/static/index/border.png" mode=""></image>
          </view>
          <view class="close" @click="onClose('showCoupon')">
            <image src="/static/other/cut.png" mode=""></image>
          </view>
          <view class="btn" @click="receiveAllCoupon">
            <image
              class="imgs"
              src="/static/index/collection.png"
              mode=""
            ></image>
          </view>
          <view class="coupon">
            <view class="item" v-for="(item, index) in couponList" :key="index">
              <view class="left">
                <text v-if="item.discountType == 3"
                  >￥{{ item.discountValue }}<br
                /></text>
                <text v-else>{{ item.rebValue }}折券<br /></text>
                <text>有效期{{ item.termDays }}天</text>
              </view>
              <view class="right" v-if="item.discountType == 3">
                满{{ item.thresholdAmount }}减{{ item.discountValue }}
              </view>
              <view class="right" v-else>
                满{{ item.thresholdAmount }}可用
              </view>
              <view class="one_btn" @click.stop="receiveCoupon(item)">
                <image src="/static/index/one.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="coupon-header">恭喜您获得优惠券</view>
				<view class="coupon-amount">{{ couponAmount }}</view>
				<view class="coupon-desc">{{ couponDesc }}</view>
				<button class="coupon-btn" @click="receiveCoupon">立即领取</button> -->
      </view>
      <view class="mask show"></view>
    </view>
	<view>
		<!-- 优惠券弹窗 -->
		<uni-popup class="popup-box" ref="popup" background-color="#fff" :mask-click="false">
			<view class="popup-content">
				<view class="coupon-centent">
					<view class="coupon-title">
						<image src="../../static/other/leftBg.png"></image>
						<view class="words">
							恭喜你获得<view class="special">1张</view>优惠券
						</view>
						<image src="../../static/other/rightBg.png"></image>
					</view>
					<view class="coupon-message">
						<view class="left">
							<view class="left-item">{{ myCouponObj.name }}</view>
							<view class="left-item" v-if="myCouponObj.validityType == 2">领券{{item.validDays }}天后失效</view>
							<view class="left-item" v-else-if="myCouponObj.validityType == 3">长期有效</view>
							<view class="left-item" v-else>有效期至{{ myCouponObj.validEndTime }}</view>
							<view class="left-item">{{ myCouponObj.type==='1'?'兑换券':myCouponObj.type==='2'?'折扣券':myCouponObj.type==='3'?'满减券':'' }}*1</view>
						</view>
						<view class="right" v-if="myCouponObj.type==='1'">
							<view>兑换</view>
						</view>
						<view class="right" v-if="myCouponObj.type==='2'">
							<view class="special">{{ myCouponObj.ruleDiscountRate?myCouponObj.ruleDiscountRate*100:'' }}</view>折
						</view>
						<view class="right" v-if="myCouponObj.type==='3'">
							<view class="special">￥</view>{{ myCouponObj.ruleReductionAmount?myCouponObj.ruleReductionAmount:'' }}
						</view>
					</view>
					<view class="coupon-btn-box">
						<button class="coupon-btns" :loading="receiveLoading" @click="handleReceiveCoupon">立即领取</button>
					</view>
				</view>
				<view class="coupon-close" @click="handleCloseCoupon">
					<image src="../../static/other/closeBg.png"></image>
				</view>
			</view>
		</uni-popup>
	</view>
  </view>
</template>

<script>
import {
  getCateList,
  getBannerList,
  getCouponList,
  getProjectList,
  getAccessToken,
  getRecommendList,
  netCouponReceive,
  getCityCode,
  getShareVolutionDetail,
  receiveCoupon
} from '@/api/index'
import { h5Url } from '@/common/config.js';
export default {
  data() {
    return {
      showCoupon: false,
      list: [],
      rankList: [],
      selectList: [],
      pojectList: [],
      couponList: [],
      current: 0,
      selectCurrent: '',
      tagList: [
        {
          value: '实名认证',
        },
        {
          value: '爽约包赔',
        },
        {
          value: '超时秒退',
        },
        {
          value: '资质证书',
        },
      ],
	  myCouponObj: {},
	  query: [],
	  receiveLoading: false
    }
  },
  onShow() {
	// this.$refs.popup.open('center')
    // 获取坐标
    this.getLocaltion()
    // 获取城市
    //this.getCity()
    // 获取banner
    this.getBanner()
    // 获取商品
    this.getProject()
    // 获取商品分类
    this.getCatetory()
    // 获取优惠劵
    this.getCoupon()
    // 获取推荐数据
    this.getRanking()
  },
  onLoad(query) {
    // 静默登录
	this.query = query
	console.log('参数', query)
    // 1. 获取URL中的code和state参数
    const urlParams = new URLSearchParams(window.location.search)
    const code = urlParams.get('code')
    const state = urlParams.get('state')

    // 2. 如果有code参数，就跳转到目标Hash路径并携带参数
    if (code && state) {
      const targetUrl = `${h5Url}/#/?code=${code}&state=${
        state || 'STATE'
      }`
      // 替换当前页面，避免浏览器返回按钮出现重复授权
      window.location.replace(targetUrl)
    }
    if (query.code) this.onLogin(query.code)
	// 获取优惠券
	if(query.shareType === 'COUPON' && query.shareContentId) {
		this.showCoupons()
	}

    // uni.setStorageSync('wx_copenid', 'o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
    // uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJlNGNiNjY0ZS05Y2Q5LTRlOWItODU1Yy0zN2RlNjRiOGI3ZDIifQ.xj0ZBULLc7wYOaUgDQd_zbeynbJ8M3M-UQM6JPUKcV9rIWVlax8dJnU247om39nialcKnklKFZ8m8oerc-NY0A')
  },
  methods: {
	// 优惠券弹框
	showCoupons() {
		getShareVolutionDetail({
			couponId: this.query.shareContentId
		}).then(res => {
			if(res.data.code == 200) {
				this.myCouponObj = res.data.data
			}
		})
		this.$nextTick(() => {
			this.$refs.popup.open()
		})
	},
	// 关闭优惠券弹窗
	handleCloseCoupon() {
		this.$nextTick(() => {
			this.$refs.popup.close()
		})
	},
	// 领取优惠券
	handleReceiveCoupon() {
		this.receiveLoading = true
		const token = uni.getStorageSync('access-token') || '';
		const isLogin = !!token;
		if(!isLogin) {
			receiveCoupon({
				...this.myCouponObj
			}).then(res => {
				this.receiveLoading = false
				if(res.data.code == 200) {
					this.$nextTick(() => {
						this.$refs.popup.close()
					})
				}
			})
		} else{
			uni.navigateTo({
				url: `/pages/login/wxLogin?shareType=${this.query.shareType}&shareContentId=${this.query.shareContentId}`
			})
		}
	},
    // 获取城市
    getCity() {
      uni.request({
        url: 'https://restapi.amap.com/v3/ip?parameters',
        data: {
          key: 'a4c460548bff03534a39e0985d210674',
        },
        success: res => {
          console.log(res,'定位')
          uni.setStorageSync('selectCity', res.data.city.slice(0, 2))
          uni.setStorageSync('selectCitycode', res.data.adcode)
        },
      })
    },
    // 获取推荐数据
    getRanking() {
      let params = {
        deptName: uni.getStorageSync('selectCity'),
      }
      this.rankList = []
      getRecommendList(params).then(res => {
        if (res.data.data) {
          this.rankList = res.data.data.slice(0, 4)
        }
      })
    },
    // 获取坐标
    getLocaltion() {
      var _this = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          uni.setStorageSync('latitude', res.latitude)
          uni.setStorageSync('longitude', res.longitude)
          _this.getCityInfo(res.latitude,res.longitude)
        },
      })
    },
    async getCityInfo(latitude, longitude) {
      if (!latitude || !longitude) {
        console.error('经纬度参数不能为空');
        return;
      }
      try {
        const resquery = await getCityCode({longitude: longitude,latitude:latitude});
        console.log(resquery);
        uni.setStorageSync('selectCity', resquery.data.data.cityName);
        uni.setStorageSync('selectCitycode', resquery.data.data.cityCode);
      } catch (error) {
        console.error('获取城市信息失败:', error);
      }
    },
    // 获取商品分类
    getCatetory() {
      this.selectList = [{ cdescribe: '热门' }]
      getCateList().then(res => {
        if (res.data.code == 200 && Array.isArray(res.data.data)) {
          this.selectList = [...this.selectList, ...res.data.data]
        }
      })
    },
    // 获取商品
    getProject() {
      this.pojectList = []
      getProjectList({
        current: 1,
        size: 10,
        cLdList: this.selectCurrent,
      }).then(res => {
        if (res.data.code == 200) {
          this.pojectList = res.data.data
        }
      })
    },
    // 获取banner
    getBanner() {
      this.list = []
      getBannerList({
        current: 1,
        size: 10,
      }).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data.map(
            item => this.$globalData.publicUrl + item.cImgUrl
          )
        }
      })
    },
    // 获取优惠劵
    getCoupon() {
      let params = {
        openid: uni.getStorageSync('wx_copenid'),
        deptName: uni.getStorageSync('selectCity'),
      }
      getCouponList(params).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.showCoupon = true
          this.couponList = res.data.data
        }
      })
    },
    // 关闭事件
    onClose(n) {
      this[n] = false
    },
    // 一键领取优惠券
    receiveAllCoupon() {
      let params = {
        openId: uni.getStorageSync('wx_copenid'),
        couponIds: this.couponList.map(item => item.id),
      }
      netCouponReceive(params).then(res => {
        this.showCoupon = false
        uni.showToast({
          title: '已领取',
          icon: 'none',
        })
      })
    },
    // 领取优惠券
    receiveCoupon(item) {
      let params = {
        couponIds: [item.id],
        openId: uni.getStorageSync('wx_copenid'),
      }
      netCouponReceive(params).then(res => {
        this.showCoupon = false
        uni.showToast({
          title: '已领取',
          icon: 'none',
        })
      })
    },
    // 正则匹配请求地址中的参数函数
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
            location.href
          ) || [, ''])[1].replace(/\+/g, '%20')
        ) || null
      )
    },
    // 静默登录
    onLogin(wxCode) {
      let params = {
        code: wxCode,
      }
      if (wxCode !== '') {
        getAccessToken(params).then(res => {
          if (res.data.code == 200) {
            uni.setStorageSync('wx_copenid', res.data.data.copenid)
            uni.setStorageSync('access-token', res.data.data.token)
            uni.setStorageSync('userId', res.data.data.id)
            if(res.data.data.cphone === null || res.data.data.cphone === ''){
              uni.navigateTo({
                url: '/setting/myNew/phone'
              })
            }else{
              uni.setStorageSync('wx_phone', res.data.data.cphone)
            }
          }
        })
      }
    },
    // tab选择
    onSelect(item, index) {
      this.current = index
      if (item.cdescribe == '热门') {
        this.selectCurrent = ''
      } else {
        this.selectCurrent = item.cdescribe
      }
      this.getProject()
    },
    // 下单
    onSubmit(cId) {
      uni.setStorageSync('projectId', cId)
      uni.switchTab({
        url: '/pages/identify/identify',
      })
    },
    // 跳转详情页
    goGDetails(cid) {
      let str = uni.$u.queryParams({
        cid: cid,
        deptName: uni.getStorageSync('selectCity'),
      })
      uni.navigateTo({
        url: `/pages/index/details${str}`,
      })
    },
    goPDetails(item) {
      if (!this.$utils.checkLogin({ type: 'modal' })) return
      let str = uni.$u.queryParams({
        id: item.id,
      })
      uni.navigateTo({
        url: `/pages/identify/details${str}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page-container {
  width: 100vw;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    rgb(246, 249, 242),
    rgb(210, 241, 243)
  );
  overflow-y: auto;

  .swiper {
    padding: 16rpx 32rpx;

    ::v-deep uni-swiper {
      height: 320rpx !important;
    }
  }

  .tag {
    width: 100%;
    padding: 0px 32rpx;
    margin: 28rpx 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;

    .item {
      width: 160rpx;
      height: 44rpx;
      background: rgba(0, 184, 151, 0.06);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 24rpx;
      color: #0fb4ac;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }
    }
  }

  .recommend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 64rpx);
    margin: 12rpx auto 16rpx;
    height: 218rpx;
    padding: 40rpx 30rpx;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.15);
    border-radius: 24rpx;
    box-sizing: border-box;

    .tuijian_img {
      position: absolute;
      top: 0;
      left: 0;
      width: 75rpx;
      height: 40rpx;
      z-index: 9999;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .recommend_js {
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #333333;
      .js_img {
        width: 120rpx;
        height: 120rpx;
        position: relative;
        border-radius: 50%;
        // overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          margin-bottom: 12rpx;
          // z-index: 9;
          z-index: 999;
        }
        .border {
          position: absolute;
          top: 0;
          left: 0;
          width: 120rpx;
          height: 120rpx;

          image {
            width: 100%;
            height: 100%;
            z-index: 99;
            margin: 0;
          }
        }
      }
    }
  }

  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0px 0px;
    margin-top: 28rpx;
    // padding: 32rpx;
    box-sizing: border-box;

    .selcet_box {
      width: 100%;
      overflow-x: auto;
      box-sizing: border-box;
      white-space: nowrap;
      padding: 20rpx 32rpx;

      .options {
        display: inline-block;
        font-size: 30rpx;
        margin-right: 24rpx;
      }

      .hover {
        color: #03c8be;
        font-weight: 700;
        border-bottom: 4rpx solid #03c8be;
      }
    }

    .menu {
      flex: 1;
      width: 100%;
      padding: 0 24rpx 32rpx;

      .project {
        background: linear-gradient(180deg, #f7ffff 0%, #e9fffb 100%);
        box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.2);
        border-radius: 24rpx;
        margin-bottom: 24rpx;
        padding: 16rpx 32rpx;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        justify-content: space-between;

        .img {
          width: 168rpx;
          height: 168rpx;
          border-radius: 8rpx;
          overflow: hidden;
          margin-right: 34rpx;

          image {
            width: 100%;
            height: 100%;
          }

          // .time {
          // 	position: absolute;
          // 	top: 0;
          // 	right: 0;
          // 	padding: 0px 10px;
          // 	background-color: #333;
          // 	opacity: .7;
          // 	border-radius: 0px 0px 0px 10px;
          // 	color: #fff;
          // }
        }

        .describe {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;

          .name {
            width: 100%;
            font-size: 32rpx;
            line-height: 24rpx;
            font-weight: 500;
          }

          .num {
            font-size: 24rpx;
            color: #808080;
            display: flex;
            margin-top: 16rpx;

            .time {
              font-size: 24rpx;
              color: #666666;
              display: flex;
              align-items: center;
              margin-right: 26rpx;

              image {
                width: 24rpx;
                height: 24rpx;
                margin-right: 4rpx;
              }
            }
          }

          .price_box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price {
              font-size: 24rpx;
              color: #f53e54;
              display: flex;
              align-items: baseline;

              text {
                font-weight: 500;
                font-size: 48rpx;
              }
            }

            .make {
              width: 124rpx;
              height: 56rpx;
              font-size: 30rpx;
              color: #fff;
              background: linear-gradient(135deg, #1ad8cf 0%, #21c8c0 100%);
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              padding: 0px 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }

  .modal-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .coupon-content {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 300rpx;
      transform: translateY(100%);
      border-radius: 20rpx 20rpx 0 0;
      box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
      opacity: 1;
      transition: all 0.3s;
      z-index: 9999;

      .coupon-box {
        width: 350px;
        height: 500px;
        margin: 0 auto;
        position: relative;

        .imgs {
          width: 350px;
          height: 500px;
        }

        .close {
          width: 80rpx;
          height: 80rpx;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 99999;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .border {
          position: absolute;
          top: 0;
          left: 0;
        }

        .btn {
          position: absolute;
          bottom: 0;
          left: 0;
        }

        .coupon {
          width: 230px;
          height: 230px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          overflow-y: auto;

          .item {
            width: 85%;
            height: 70px;
            background-image: url('/static/index/item.png');
            // background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            padding: 10rpx 25rpx;
            display: flex;
            align-items: center;
            position: relative;
            margin-bottom: 10rpx;

            .left {
              color: #ff0000;
            }

            .right {
              height: 100%;
              padding-top: 30px;
              margin-left: 20rpx;
              font-size: 28rpx;
            }

            .one_btn {
              position: absolute;
              top: 10%;
              right: 2%;
              width: 30px;
              height: 60px;

              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }

    .coupon-header {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin: 40rpx 0 20rpx 0;
      text-align: center;
    }

    .coupon-amount {
      font-size: 80rpx;
      font-weight: bold;
      color: #ff0000;
      text-align: center;
    }

    .coupon-desc {
      font-size: 28rpx;
      color: #666;
      margin: 30rpx 0;
      text-align: center;
    }

    .coupon-btn {
      margin: 20rpx auto 0 auto;
      width: 500rpx;
      height: 80rpx;
      border: none;
      border-radius: 40rpx;
      background-color: #ff0000;
      color: #fff;
      font-size: 36rpx;
      display: block;
      text-align: center;
      line-height: 80rpx;
    }

    .mask {
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      opacity: 0;
      transition: all 0.3s;
    }

    .show {
      opacity: 1;
    }
  }
  .popup-box{
	  border-radius: 32rpx;
	  ::v-deep .uni-popup__wrapper{
		  background: none !important;
	  }
  }
  .popup-content{
	  width: 540rpx;
	  height: 510rpx;
	  border-radius: 32rpx;
	  .coupon-centent{
		  width: 100%;
		  height: 400rpx;
		  border-radius: 32rpx;
		  background: linear-gradient( 0deg, #CBFFFB 0%, #F3FFFE 100%);
		  padding: 52rpx 24rpx 40rpx;
		  position: relative;
	  }
	  .coupon-title{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  margin-bottom: 28rpx;
		  image{
			  width: 32rpx;
			  height: 2rpx;
		  }
		  .words{
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  .special{
				  color: #03C8BE;
			  }
		  }
	  }
	  .coupon-message{
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  background: #ffffff;
		  border-radius: 24rpx;
		  .left{
			  padding: 20rpx;
			  .left-item{
				  color: #333333;
				  margin-bottom: 8rpx;
				  &:nth-child(1) {
					  font-size: 24rpx;
				  }
				  &:nth-child(2) {
					  color: #999999;
					  font-size: 20rpx;
				  }
				  &:nth-child(3) {
					  font-size: 20rpx;
				  }
			  }
		  }
		  .right{
			  padding: 56rpx;
			  background-color: #E8FBFA;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  border-radius: 0 24rpx 24rpx 0;
			  color: #03C8BE;
		  }
	  }
	  .coupon-btn-box{
		  width: 540rpx;
		  position: absolute;
		  left: 0;
		  bottom: 0rpx;
		  height: 160rpx;
		  background: url('../../static/other/bottomBg.png') no-repeat;
		  background-size: 100% 100%;
		  .coupon-btns{
			margin: 70rpx auto 40rpx;
			height: 60rpx;
			width: 400rpx;
			line-height: 60rpx;
			text-align: center;
			  border-radius: 98rpx;
			  background: linear-gradient( 80deg, #00DAAB 0%, #07CDC4 100%);
			  color: #ffffff;
		  }
	  }
	  .coupon-close{
		  margin: 60rpx auto 0;
		  width: 48rpx;
		  height: 48rpx;
		  display: flex;
		  image{
			  width: 100%;
			  height: 100%;
		  }
	  }
  }

}
</style>
