<script setup lang="ts">
const sliderChange = (e: any) => {
  console.log('value发生变化' + e.detail.value)
}
</script>

<template>
  <view class="time_out">
    <view class="time_top">
      <view class="time_top_time">25:32</view>
      <!-- <view>	<button type="default" class="mini-btn" size='mini'>计时关闭音乐</button></view> -->
      <view>
        <view class="time_close_music">计时关闭音乐</view>
      </view>
    </view>
    <!--    <view class="time_middle">
      <view class='time_img'>
        <image style="width: 40rpx; height: 40rpx; background-color: #eeeeee;"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" @error="imageError"></image>

        <image style="width: 40rpx; height: 40rpx; background-color: #eeeeee;margin-left:40rpx"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" @error="imageError"></image>

      </view>
      <view>
        <view class="time_close_music">计时闹钟提醒</view>
      </view>
    </view> -->
    <view class="time_progress">
      <view>
        <view class="progress-box">
          <!-- <input type='range'> -->
          <slider
            value="100"
            @change="sliderChange"
            activeColor="#5aa4ae"
            min="1"
            max="100"
            block-size="28"
          />
          <!-- <progress :percent="40" stroke-width="30" border-radius='20' activeColor="#5aa4ae" /> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts"></script>

<style lang="scss">
.time_out {
  background-color: #ffffff;
  width: 100%;
  border-radius: 40rpx;
  display: flex;
  padding-left: 20rpx;
  padding-right: 20rpx;
  flex-direction: column;
}

.time_top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  height: 100rpx;
}

.time_top_time {
  color: #5aa4ae;
  font-size: 50rpx;
  font-weight: 700;
  padding-left: 40rpx;
}

.time_close_music {
  font-size: 26rpx;
  color: #5aa4ae;
  border-radius: 60rpx;
  border: 1rpx solid #5aa4ae;
  padding: 4rpx 20rpx;
}

.time_middle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  height: 40rpx;
}

.time_progress {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.time_img {
  padding-left: 50rpx;
}

.wx-slider .wx-slider-handle-wrapper {
  height: 20rpx;
}
</style>
