<template>
  <view>
    <view class="location">
      <view class="address">
        <view class="text1">江苏省南京市江宁区xx街道600号</view>
        <view class="text2">地点微调</view>
      </view>
      <view class="page-map">
        <map
          style="width: 100%; height: 379rpx"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
          :circles="circles"
          min-scale="3"
          max-scale="20"
          :enable-zoom="true"
          @markertap="markerTap"
        >
        </map>
      </view>
    </view>
    <view class="check-in">
      <view class="btn-call">
        <view class="text1">签到</view>
        <view class="text2">16:08</view>
      </view>
      <view class="address">
        <view class="icon-tick"></view>
        <view
          >你已签到
          <text style="color: #fe7634; margin: 0 10rpx"> 1 </text> 次</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: "/static/images/umale/icon-pointb.png",
          width: 40,
          height: 35,
        },
      ],
      circles: [
        {
          latitude: 39.909,
          longitude: 116.39742,
          color: "#367BEF",
          // 填充颜色
          fillColor: "#367BEF3A",
          // 圆半径
          radius: 150,
          // 边
          strokeWidth: 1,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.location {
  margin: 20rpx;
  padding: 20rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
  border-radius: 16rpx;
  .address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22rpx;
    .text1 {
      font-size: 32rpx;
      font-family: PingFang SC;
      // font-weight: bold;
      color: #2e2f31;
    }

    .text2 {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #367bef;
    }
  }
}
.check-in {
  margin: 20rpx;
  padding-top: 98rpx;
  padding-bottom: 198rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .btn-call {
    width: 298rpx;
    height: 298rpx;
    background: linear-gradient(180deg, #32b78b 0%, #12a373 100%);
    box-shadow: 0rpx 0rpx 40rpx rgba(72, 202, 121, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 89rpx;
    .text1 {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fefeff;
      letter-spacing: 6rpx;
    }

    .text2 {
      margin-top: 10rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fefeff;
      letter-spacing: 6rpx;
    }
  }

  .address {
    display: flex;
    align-items: flex-start;

    .icon-tick {
      width: 29rpx;
      height: 29rpx;
      background-size: 100%;
      background-image: url("@/static/images/umale/icon-tick.png");
      background-repeat: no-repeat;
      margin-right: 18rpx;
      margin-top: 8rpx;
    }
  }
}
</style>
