..

src/pages/details/foodDetails/foodDetails.jsx

@@ -84,6 +84,7 @@ export default (props) => {
               <image src={titlezs}></image>
               <text>返现套餐</text>
             </view>
+            
             <view className='foodCard'>
               <view className='fCleft'>
                 <view className='backMoney'>
@@ -124,8 +125,6 @@ export default (props) => {
                 <image src={pay} />
                 <view>支付</view>
               </view>
-              <view className='circleTop'></view>
-              <view className='circleBottom'></view>
               <view className='columnLine'></view>
             </view>
             <view className='foodCard'>
@@ -168,8 +167,6 @@ export default (props) => {
                 <image src={pay} />
                 <view>支付</view>
               </view>
-              <view className='circleTop'></view>
-              <view className='circleBottom'></view>
               <view className='columnLine'></view>
             </view>
             <view className='showMore'>
@@ -238,8 +235,6 @@ export default (props) => {
                 <image src={pay} />
                 <view>支付</view>
               </view>
-              <view className='circleTop'></view>
-              <view className='circleBottom'></view>
               <view className='columnLine'></view>
             </view>
             <view className='storezn'>

src/pages/details/foodDetails/foodDetails.less

@@ -140,13 +140,32 @@
     top: 5px;
   }
 }
+.cs{
+  height: 500px;
+  // background: rgb(240, 142, 142);
+  // background: radial-gradient(circle at top left, transparent 15px, rgb(240, 142, 142) 0) top left,
+  //           radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
+  //           radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
+  //           radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
+
+
+  background: radial-gradient(circle at 82% top,transparent 15px,rgb(240,140,140) 0) top,
+              radial-gradient(circle at 82% bottom,transparent 15px,rgb(230,120,120) 0) bottom;
+
+background-repeat: no-repeat;
+background-size: auto 50%;
+}
 .foodCard{
-  background: #FFFFFF;
+  background: #FFF;
   box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
   position: relative;
   margin-bottom: 30px;
   overflow: hidden;
+  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
+              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
   .fCleft{
     float: left;
     width: 82%;
@@ -248,9 +267,9 @@
     width: 18%;
     line-height: 0;
     image{
-      width: 35px;
+      width:35px;
       height:32px;
-      margin-top: 135%;
+      margin-top: 120%;
       margin-left:calc(50% - 15px)
     }
     view{
@@ -262,26 +281,6 @@
       text-align: center;
     }
   }
-  .circleTop{
-    width: 30px;
-    height: 16px;
-    border-radius: 15px 15px 0 0;
-    background-color: #F8F8F8;
-    position: absolute;
-    bottom: 0;
-    right: 16%;
-    
-  }
-  .circleBottom{
-    width: 30px;
-    height: 16px;
-    border-radius:0 0 15px 15px;
-    background-color: #F8F8F8;
-    position: absolute;
-    top: 0;
-    right: 16%;
-    
-  }
   .columnLine{
     height: 50%;
     border-right: 2px dashed #595959;

src/pages/details/mjDetails/sceneryDetails.jsx

@@ -132,8 +132,6 @@ export default (props) => {
                 <image src={pay} />
                 <view>支付</view>
               </view>
-              <view className='circleTop'></view>
-              <view className='circleBottom'></view>
               <view className='columnLine'></view>
             </view>
             <view className='foodCard'>
@@ -176,8 +174,6 @@ export default (props) => {
                 <image src={pay} />
                 <view>支付</view>
               </view>
-              <view className='circleTop'></view>
-              <view className='circleBottom'></view>
               <view className='columnLine'></view>
             </view>
             <view className='showMore'>

src/pages/details/mjDetails/sceneryDetails.less

@@ -115,12 +115,16 @@
   }
 }
 .foodCard{
-  background: #FFFFFF;
+  background: #FFF;
   box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
   position: relative;
   margin-bottom: 30px;
   overflow: hidden;
+  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
+              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
   .fCleft{
     float: left;
     width: 82%;
@@ -222,9 +226,9 @@
     width: 18%;
     line-height: 0;
     image{
-      width: 35px;
+      width:35px;
       height:32px;
-      margin-top: 135%;
+      margin-top: 120%;
       margin-left:calc(50% - 15px)
     }
     view{
@@ -236,26 +240,6 @@
       text-align: center;
     }
   }
-  .circleTop{
-    width: 30px;
-    height: 16px;
-    border-radius: 15px 15px 0 0;
-    background-color: #F8F8F8;
-    position: absolute;
-    bottom: 0;
-    right: 16%;
-    
-  }
-  .circleBottom{
-    width: 30px;
-    height: 16px;
-    border-radius:0 0 15px 15px;
-    background-color: #F8F8F8;
-    position: absolute;
-    top: 0;
-    right: 16%;
-    
-  }
   .columnLine{
     height: 50%;
     border-right: 2px dashed #595959;