<template>

<view class="content">

<!-- <view class="circleprogress">

<view class="progresstext">{{progresstext}}%</view>

<view class="wrapper left">

<view class="leftprogress" :style="{ transform: leftprogress}"></view>

</view>

<view class="wrapper right">

<view class="rightprogress" :style="{ transform: rightprogress}"></view>

</view>

</view>

<view class="section section_gap">

<text class="section__title">設(shè)置最小/最大值</text>

<view class="body-view">

<slider @changing="sliderchange" @change="sliderchange" min="0" max="100" show-value />

</view>

</view>

<view class="wrapper right">

<view class="rightprogress" :style="{ transform: rightprogress}"></view>

</view>

<view class="circle">

<view class="circle1" :style="{ transform: fog}">

<view class="">

</view>

</view>

</view> -->

<view class="">?

?<circlr></circle>?

?</view>?

?<image src="../../static/aixinRed.png" mode=""></image>?

</view>

</template>

<script>

export default {

data() {

return {

val: 0,

leftprogress: 'rotate(-45deg)',

rightprogress: 'rotate(45deg)',

progresstext: '0',

fog: 'rotate(45deg)',

n: 1

}

},

onLoad() {

// setInterval(()=>{

// this.n--

// this.fog = "rotate("+(45+this.n)+"deg)"

// },200)

},

watch: {

// val(new,old){}

},

methods: {

sliderchange: function(event) {

var val = event.detail.value;

this.progresstext = val;

console.log(val);

var deg = val / 100 * 360;

if (deg <= 180) {

this.rightprogress = 'rotate(' + eval(45 + deg) + 'deg)'

this.leftprogress = 'rotate(' + eval(-45) + 'deg)'

} else {

this.rightprogress = 'rotate(' + eval(45 + 180) + 'deg)'

this.leftprogress = 'rotate(' + eval(-45 + (deg - 180)) + 'deg)'

}

}

}

}

</script>

<style>

.circle1 {

width: 200rpx;

height: 200rpx;

border-radius: 50%;

border: 20rpx solid #ccc;

border-right: 20rpx solid #000;

border-bottom: 20rpx solid #000;

}

.leftprogress,

.rightprogress {

width: 160px;

height: 160px;

border: 20px solid green;

border-bottom: 20px solid #7ef22e;

border-radius: 50%;

}

.wrapper {

width: 100px;

height: 200px;

overflow: hidden;

}

.content {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

flex-flow: wrap;

align-items: center;

border-radius: 50%;

text-align: center;

height: 400upx;

padding-top: 50px;

}

.circleprogress {

width: 100%;

height: 200px;

display: flex;

justify-content: center;

}

.progresstext {

position: absolute;

font-size: 40px;

width: 200px;

height: 200px;

display: flex;

justify-content: center;

align-items: center;

z-index: 10;

color: #008000;

}

.wrapper {

width: 100px;

height: 200px;

overflow: hidden;

}

.leftprogress {

border-right: 20px solid #7ef22e;

}

.rightprogress {

border-left: 20px solid #7ef22e;

margin-left: -100px;

}

.section {

width: 80%;

margin-top: 50px;

}

</style>