feats

src/components/foodCards/foodCards.jsx

@@ -30,14 +30,20 @@ export default (props) => {
   return (
     <view className='foodCard'>
       <view className='fCleft'>
-        <view className='backMoney'>
-          返现￥{(item.cashback / 100).toFixed(2)}
-        </view>
-        <view className='appraise'>
-          <Star star={st} />
-          <text className='storezf'>{st}</text>
+        <view className='fCleft_header'>
+          <view>
+            <view className='backMoney'>
+              返现￥{(item.cashback / 100).toFixed(2)}
+            </view>
+          </view>
+          <view>
+            <view className='appraise'>
+              <Star star={st} />
+              <text className='storezf'>{st}</text>
+            </view>
+          </view>
         </view>
-        <view>
+        <view className='fCleft_body'>
           <view className='contentImg' onClick={() => { goFood() }}>
             <image src={item.poster} className='img1'></image>
             <image src={msTip} className='mstip'></image>

src/components/foodCards/style.less

@@ -1,32 +1,50 @@
 .foodCard{
   background: #FFF;
-  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
   position: relative;
   margin: 15px 15px;
   margin-bottom: 30px;
   overflow: hidden;
-  filter: drop-shadow(0px 6px 13px rgba(0, 0, 0, 0.12));
+  // filter: drop-shadow(0px 6px 13px rgba(0, 0, 0, 0.12));
+  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
   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%;
+  background-size: 100% 50%;
+  box-sizing: border-box;
+  display: flex;
+
   .fCleft{
-    float: left;
-    width: 82%;
+    flex: auto;
+
+    &_header {
+      display: flex;
+      margin: 22px 0;
+
+      & > view {
+        flex: 1;
+      }
+    }
+
+    &_body {
+      display: flex;
+      padding: 0 20px 43px 20px;
+    }
+    
     .backMoney{
+      display: inline-block;
+
       font-size: 24px;
       font-weight: bold;
-      color: #FFF;
-      margin: 22px 40px 20px 0;        
-      padding: 12px 17px 9px 6px;
-      background:url('../../assets/icons/housemantj/fximg.png') no-repeat;    
-      display: inline-block;
+      color: #FFF;     
+      padding: 12px 30px 9px 1em;
+      background:url('../../assets/icons/housemantj/fximg.png') no-repeat;
       background-size: 100% 100%;
     }
-    .appraise{
+
+    .appraise {
       display: inline-block;
-      margin-left: 10px;
+
       image{
         width: 21px;
         height: 21px;
@@ -38,10 +56,12 @@
         color: #020200;
       }
     }
+
     .contentImg{
-      margin: 0 20px 43px 20px;
+      flex: none;
       position: relative;
-      display: inline-block;
+      width: 144px;
+      
       .img1{
         width: 144px;
         height: 144px;
@@ -55,8 +75,9 @@
       }
     }
     .neirong{
-      display: inline-block;
-      width: 57%;
+      flex: auto;
+      margin-left: 1em;
+
       .textword{
         font-size: 24px;           
         color: #333;
@@ -111,14 +132,15 @@
     }
   }
   .fCright{
-    float: right;
+    flex: none;
     width: 18%;
     line-height: 0;
     image{
+      display: block;
       width:35px;
       height:32px;
-      margin-top: 120%;
-      margin-left:calc(50% - 15px)
+      margin: 0 auto;
+      margin-top: 100%;
     }
     view{
       font-size: 24px;
@@ -130,11 +152,13 @@
     }
   }
   .columnLine{
+    flex: none;
+    width: 1px;
     height: 50%;
     border-right: 2px dashed #595959;
     opacity: 0.12;
     position: absolute;
     right: 18%;
-    bottom:15%;
+    bottom: 25%;
   }
 }