项目列表

packageA/project/modules/list/index.json

@@ -1,6 +1,5 @@
 {
     "component": true,
     "usingComponents": {
-        "van-circle": "@vant/weapp/circle/index"
     }
 }

packageA/project/modules/list/index.scss

@@ -11,18 +11,48 @@
         width: 100rpx;
         flex-shrink: 0;
 
-        .odds,
-        .percentage {
-            width: 100%;
-            text-align: center;
-            font-size: 16rpx;
-            font-family: PingFang SC-Regular, PingFang SC;
-            color: #666666;
-            margin-top: 4rpx;
-        }
+        .circle {
+            width: 100rpx;
+            height: 100rpx;
+            position: relative;
+            border-radius: 50%;
+            box-shadow: inset 0 0 0 8rpx var(--assist);
+
+            .ab {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+            }
+
+            &_left {
+                border: 8rpx solid #ccc;
+                border-radius: 50%;
+                clip: rect(0, 50rpx, 100rpx, 0);
+            }
 
-        .odds {
-            margin-top: -6rpx;
+            &_right {
+                border: 8rpx solid #ccc;
+                border-radius: 50%;
+                clip: rect(0, 100rpx, 100rpx, 50rpx);
+            }
+
+            &_text {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 16rpx;
+                font-family: PingFang SC-Regular, PingFang SC;
+                color: #666666;
+
+                .name {
+                    margin-bottom: 6rpx;
+                }
+            }
         }
     }
 

packageA/project/modules/list/index.wxml

@@ -1,9 +1,13 @@
 <navigator url="/packageA/project/detail?sa_projectid={{item.sa_projectid}}" class="project-item" wx:for="{{list}}" wx:key="item.sa_projectid">
     <view class="chart">
-        <van-circle value="{{ handle.num(item.winrate) }}" stroke-width="6" size="50" z-index="1">
-            <view class="odds">赢率</view>
-            <view class="percentage">{{item.winrate}}</view>
-        </van-circle>
+        <view class="circle">
+            <view class="circle_left ab" style="{{render.leftRate(item.winrate)}}" />
+            <view class="circle_right ab" style="{{render.rightRate(item.winrate)}}" />
+            <view class="circle_text">
+                <text class="name">赢率</text>
+                <text class="value">{{item.winrate}}%</text>
+            </view>
+        </view>
     </view>
     <view class="main">
         <view class="label">
@@ -29,8 +33,19 @@
     </view>
 </navigator>
 <My_empty wx:if="{{list.length==0}}" />
-<wxs module="handle">
-    module.exports.num = function (str) {
-        return str.substring(0, str.length - 1)
+<wxs module="render">
+    module.exports = {
+        rightRate: function (rate) {
+            if (rate - 0 < 50) {
+                return 'transform: rotate(' + 3.6 * (rate - 0) + 'deg);';
+            } else {
+                return 'transform: rotate(0);border-color: var(--assist);';
+            }
+        },
+        leftRate: function (rate) {
+            if (rate - 0 >= 50) {
+                return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
+            }
+        }
     }
 </wxs>