From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue | 198 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 198 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue b/minipro_standard/uni_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue
new file mode 100644
index 0000000..d1ee286
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue
@@ -0,0 +1,198 @@
+<template>
+ <view class="u-circle-progress">
+ <view class="u-circle-progress__left">
+ <view
+ class="u-circle-progress__left__circle"
+ :style="[leftSyle]"
+ ref="left-circle"
+ >
+
+ </view>
+ </view>
+ <view
+ class="u-circle-progress__right"
+ >
+ <view
+ class="u-circle-progress__right__circle"
+ ref="right-circle"
+ :style="[rightSyle]"
+ >
+
+ </view>
+ </view>
+ <view class="u-circle-progress__circle">
+
+ </view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const animation = uni.requireNativePlugin('animation')
+ // #endif
+ /**
+ * CircleProgress 鍦嗗舰杩涘害鏉� TODO: 寰呭畬鍠�
+ * @description 灞曠ず鎿嶄綔鎴栦换鍔＄殑褰撳墠杩涘害锛屾瘮濡備笂浼犳枃浠讹紝鏄竴涓渾褰㈢殑杩涘害鐜��
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String | Number} percentage 鍦嗙幆杩涘害鐧惧垎姣斿�硷紝涓烘暟鍊肩被鍨嬶紝0-100 (榛樿 30 )
+ * @example
+ */
+ export default {
+ name: 'u-circle-progress',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ data() {
+ return {
+ leftBorderColor: 'rgb(200, 200, 200)',
+ rightBorderColor: 'rgb(200, 200, 200)',
+ }
+ },
+ computed: {
+ leftSyle() {
+ const style = {}
+ style.borderTopColor = this.leftBorderColor
+ style.borderRightColor = this.leftBorderColor
+ return style
+ },
+ rightSyle() {
+ const style = {}
+ style.borderLeftColor = this.rightBorderColor
+ style.borderBottomColor = this.rightBorderColor
+ return style
+ }
+ },
+ mounted() {
+ uni.$u.sleep().then(() => {
+ this.rightBorderColor = 'rgb(66, 185, 131)'
+ // this.init()
+ })
+ },
+ methods: {
+ init() {
+ animation.transition(this.$refs['right-circle'].ref, {
+ styles: {
+ transform: 'rotate(45deg)',
+ transformOrigin: 'center center'
+ },
+ }, () => {
+ this.rightBorderColor = 'rgb(66, 185, 131)'
+ // animation.transition(this.$refs['right-circle'].ref, {
+ // styles: {
+ // transform: 'rotate(225deg)',
+ // transformOrigin: 'center center'
+ // },
+ // duration: 3000,
+ // }, () => {
+ // animation.transition(this.$refs['left-circle'].ref, {
+ // styles: {
+ // transform: 'rotate(45deg)',
+ // transformOrigin: 'center center'
+ // },
+ // }, () => {
+ // this.leftBorderColor = 'rgb(66, 185, 131)'
+ // animation.transition(this.$refs['left-circle'].ref, {
+ // styles: {
+ // transform: 'rotate(225deg)',
+ // transformOrigin: 'center center'
+ // },
+ // duration: 1500,
+ // }, () => {
+
+ // })
+ // })
+ // })
+ })
+
+ }
+ },
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-circle-progress {
+ @include flex(row);
+ position: relative;
+ border-radius: 100px;
+ height: 100px;
+ width: 100px;
+ // transform: rotate(0deg);
+ // background-color: rgb(66, 185, 131);
+ background-color: rgb(200, 200, 200);
+ overflow: hidden;
+ justify-content: space-between;
+
+ &__circle {
+ border-radius: 100px;
+ height: 90px;
+ width: 90px;
+ transform: translate(-50%, -50%);
+ background-color: rgb(255, 255, 255);
+ left: 50px;
+ top: 50px;
+ position: absolute;
+ }
+
+ &__left {
+ position: absolute;
+ left: 0;
+ width: 50px;
+ height: 100px;
+ overflow: hidden;
+ box-sizing: border-box;
+ // background-color: rgb(66, 185, 131);
+ // background-color: rgb(200, 200, 200);
+ // transform-origin: left center;
+
+ &__circle {
+ box-sizing: border-box;
+ // background-color: red;
+ border-left-color: transparent;
+ border-bottom-color: transparent;
+ border-top-left-radius: 50px;
+ border-top-right-radius: 50px;
+ border-bottom-right-radius: 50px;
+ // border-left-color: rgb(66, 185, 131);
+ // border-bottom-color: rgb(66, 185, 131);
+ border-top-color: rgb(66, 185, 131);
+ border-right-color: rgb(66, 185, 131);
+ border-width: 5px;
+ width: 100px;
+ height: 100px;
+ transform: rotate(225deg);
+ // border-radius: 100px;
+ }
+ }
+
+ &__right {
+ position: absolute;
+ right: 0;
+ width: 50px;
+ height: 100px;
+ overflow: hidden;
+
+ &__circle {
+ position: absolute;
+ right: 0;
+ box-sizing: border-box;
+ // background-color: red;
+ border-top-color: transparent;
+ border-right-color: transparent;
+ border-top-left-radius: 50px;
+ border-bottom-left-radius: 50px;
+ border-bottom-right-radius: 50px;
+ // border-left-color: rgb(66, 185, 131);
+ // border-bottom-color: rgb(66, 185, 131);
+ border-left-color: rgb(200, 200, 200);
+ border-bottom-color: rgb(200, 200, 200);
+ border-width: 5px;
+ width: 100px;
+ height: 100px;
+ transform: rotate(45deg);
+ transform-origin: center center;
+ // border-radius: 100px;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3