目的效果：

这个弧线的实现
我们所有元素默认的都是长方形的元素，，以是若是想要实现这个弧线，，那必定需要做出圆形。。。。。

step 1 一个长方形的框

设置 overflow: hidden;
原理就是：方形框里边笼罩一个圆形的框，，然后给外边的方框设置 overflow: hidden; 那么多出的圆的部分将不会显示

step 2 做一个圆

1. width:930rpx;
2. height:930rpx;
3. border-radius: 465rpx;

让半径radius即是宽高的一半就可以将一个方框设为圆形
原理很简朴，，“正方形的内切圆的半径即是正方形边长的一半”。。。。。

step 3 调解圆相关于外边的方框的位置就行

1. margin-left:-224rpx;
2. margin-top:-303px;

一个点 我发明可以使用left 和 top 可是无法使用bottom 和right。。。。。
也是，，事实默认的都是从左上最先排列的。。。。。

完整代码

1. //.wxml
4.  
5. //.wxss
6. .distance{
7. width:498rpx;
8. height:626rpx;
9. background-color: #fff;
10. border-radius: 12rpx;
11. position:absolute;
12. z-index:99999;
13. top:200rpx;
14. left:126rpx;
15. overflow: hidden;
16. }
17. .dist_s{
18. width:930rpx;
19. height:930rpx;
20. border-radius: 465rpx;
21. background-color: rgb(233, 233, 233);
22. margin-left:-224rpx;
23. margin-top:-303px;
24. }

事实证实：为了适配种种装备，，虽然宽度都设置好了，，可是高度需要适配，，一般情形下不可使用一个牢靠的值，，而是应该使用比例。。。。。

实验证实，，任何形式的居中都不如想方想法让他可以使用flex结构来抵达居中的目的。。。。。

至此，，完成。。。。。

改变圆的位置的效果
 

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。。。。通过拖拽、拼接
？
？？？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城。。。。。