初始项目

mallplusui-uniapp-wx/components/circle-percent/circle-percent.vue

@@ -0,0 +1,125 @@
+<template>
+	<view class="box">
+		<view class="boxContent">
+            <view class="boxContent2">
+				<view class="before" :style="{top: (100-percent)+'%'}"></view>
+				<view class="jd" :style="{background: bg}"></view>
+				<view class="after" :style="{top: (100-percent)+'%'}"></view>
+			</view>
+			<view class="percent">{{percent}}%</view>
+		</view>
+		<view class="atitle">{{titleOne}}</view>
+		<view class="atitle">{{titleTwo}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "circle-percent",
+		props: {
+		  titleOne:{
+		    type:String,
+			default: '发卡'
+		  },
+          titleTwo:{
+            type:String,
+            default: '21'
+          },
+          bg: {
+            type:String,
+            default: 'red'
+		  },
+          percent: {
+            type:String,
+            default: "0"
+          }
+		},
+		computed: {
+		},
+		data() {
+		    return {
+
+		    }
+		},
+		methods: {
+		}
+	}
+</script>
+
+<style lang="scss">
+.box{
+		box-sizing: border-box;
+		width: 33%;
+		text-align:center;
+		margin: 20upx 0;
+		.boxContent{
+			position: relative;
+			width: 160upx;
+			height: 160upx;
+			border-radius: 50%;
+			margin: 0 auto;
+			border: 4upx solid #d9d9d9;
+			overflow: hidden;
+			.boxContent2{
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				border: 4upx solid #fff;
+				box-sizing: border-box;
+				overflow: hidden;
+				.before,
+				.after{
+					content: "";
+					position: absolute;
+					width: 200%;
+					height: 200%;
+					top: 0;
+					left: 50%;
+					background-color: rgba(255, 255, 255, .4);
+					border-radius: 45%;
+					transform: translate(-50%, -100%) rotate(0);
+					animation: rotate 6s linear infinite;
+					z-index: 10;
+				}
+
+				.after {
+					border-radius: 44%;
+					background-color: rgba(255, 255, 255, .9);
+					transform: translate(-50%, -100%) rotate(0);
+					animation: rotate 10s linear -5s infinite;
+					z-index: 20;
+				}
+
+				@keyframes rotate {
+					50% {
+						transform: translate(-50%, -103%) rotate(180deg);
+					} 100% {
+						  transform: translate(-50%, -100%) rotate(360deg);
+					  }
+				}
+
+				.jd{
+					width: 100%;
+					height: 100%;
+					bottom:0;
+				}
+			}
+
+			.percent{
+				font-size: 36upx;
+				font-weight: bold;
+				position: absolute;
+				top: 52upx;
+				width: 100%;
+				text-align: center;
+				z-index: 90;
+			}
+		}
+		.atitle{
+			margin-top: 0upx;
+			font-size: 20upx;
+			color: $uni-text-color-grey;
+			font-size: $uni-font-size-base;
+		}
+	}
+</style>