| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 | 
							- @import './var.less';
 
- :root {
 
-   --van-circle-size: @circle-size;
 
-   --van-circle-color: @circle-color;
 
-   --van-circle-layer-color: @circle-layer-color;
 
-   --van-circle-text-color: @circle-text-color;
 
-   --van-circle-text-font-weight: @circle-text-font-weight;
 
-   --van-circle-text-font-size: @circle-text-font-size;
 
-   --van-circle-text-line-height: @circle-text-line-height;
 
- }
 
- .van-circle {
 
-   position: relative;
 
-   display: inline-block;
 
-   width: var(--van-circle-size);
 
-   height: var(--van-circle-size);
 
-   text-align: center;
 
-   svg {
 
-     position: absolute;
 
-     top: 0;
 
-     left: 0;
 
-     width: 100%;
 
-     height: 100%;
 
-   }
 
-   &__layer {
 
-     stroke: var(--van-circle-layer-color);
 
-   }
 
-   &__hover {
 
-     fill: none;
 
-     stroke: var(--van-circle-color);
 
-     stroke-linecap: round;
 
-   }
 
-   &__text {
 
-     position: absolute;
 
-     top: 50%;
 
-     left: 0;
 
-     box-sizing: border-box;
 
-     width: 100%;
 
-     padding: 0 var(--van-padding-base);
 
-     color: var(--van-circle-text-color);
 
-     font-weight: var(--van-circle-text-font-weight);
 
-     font-size: var(--van-circle-text-font-size);
 
-     line-height: var(--van-circle-text-line-height);
 
-     transform: translateY(-50%);
 
-   }
 
- }
 
 
  |