Cars

src/pages/index/index.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import Taro, { useDidShow } from '@tarojs/taro'
 import withLayout from '@/layouts'
 
-import ButtontWX from '../../components/ButtontWX'
 import tabList from './tabbar'
 import Homes from './tabs/Homes'
 import Orders from './tabs/Orders'
@@ -41,7 +40,6 @@ export default withLayout((props) => {
 
   return (
     <view className='page-index'>
-      {/* <ButtontWX butText='确认登陆' butWidth={100} butHeight={30} butFontSize={10} butBorderRadius={20} /> */}
       <view className='index-navbar'>
       </view>
       <view className='index-container'>

src/pages/index/tabs/Homes.jsx

@@ -1,8 +1,10 @@
 
 import { View, Swiper, Image, SwiperItem, Text, Input } from "@tarojs/components"
-import addresss from '@/assets/mineImgaes/addresss.png'//地址
-import searchs from '@/assets/homesImgaes/searchs.png'//地址
+import ButtontWX from '@/components/ButtontWX'
 
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
+import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
+import carsListImga from '@/assets/homesImgaes/carsListImga.png'//农机列表图片
 
 
 import './HomesCss/style.less'
@@ -10,6 +12,14 @@ import './HomesCss/style.less'
 export default (props) => {
   // const { SwiperItem } = Swiper
 
+  const carsList = [
+    { carsName: '联合收割机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg', jiage: '300', carsLocation: '3.9' },
+    { carsName: '水稻播种机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd031719b1.jpg', jiage: '300', carsLocation: '3.9' },
+    { carsName: '秸秆统一处理 型号：GB2312', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd03201503.jpg', jiage: '免费', carsLocation: '3.9' },
+    { carsName: '花生稻子小麦收割一体机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd0324f649.jpg', jiage: '550', carsLocation: '3.9' },
+    { carsName: '拖拉机', carsUrl: 'https://image.cnhnb.com/image/jpg/miniapp/2020/03/26/ef945970d2cc4948b61d45ce57ac1179.jpg', jiage: '180', carsLocation: '3.9' },
+    { carsName: '自行车', carsUrl: 'https://image.cnhnb.com/image/jpg/miniapp/2020/03/26/e8745759793d48398f82e6658186686a.jpg', jiage: '20', carsLocation: '3.9' },
+  ]
 
   const imglist = [
     { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
@@ -25,7 +35,9 @@ export default (props) => {
   }
 
   return (
-    <View>
+
+
+    <scroll-view className='scrollView' scrollY style='height: 100%;' >
       <View className='heads-top-box'>
         <View className='heads-top-box-left'>
           <Image src={addresss} className='heads-top-box-left-addresssImg' />
@@ -48,7 +60,40 @@ export default (props) => {
           </SwiperItem>
         ))}
       </Swiper>
+      <View className='content-header-box'>
+        <View className='content-header-box-liftCentent'>
+          <Image src={carsListImga} />
+          <View>农机列表</View>
+        </View>
+        <View className='content-header-box-rightCentent'>更多&gt;&gt;</View>
+      </View>
+
+      {
+        carsList.map((item, index) => {
+          return (
+            <View key={index} className='carsListImga-bottom-box'>
+              <Image src={item.carsUrl} />
+              <View className='carsListImga-bottom-box-flaxBox'>
+                <View className='carsListImga-bottom-box-flaxBox-liftText'>
+                  <View className='carsListImga-bottom-box-flaxBox-liftText-Titles'>{item.carsName}</View>
+                  <View className='carsListImga-bottom-box-flaxBox-liftText-price'>{item.jiage}/<Text>公顷</Text></View>
+                </View>
+                <View className='carsListImga-bottom-box-flaxBox-rightBut'>
+                  <ButtontWX butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
+                </View>
+              </View>
+              <View className='content-header-box-map'>
+                <View className='content-header-box-map-liftCentent'>
+                  <Image src={addresss} />
+                  <View>距离当前位置{item.carsLocation}公里</View>
+                </View>
+                <View className='content-header-box-map-rightCentent'>进入地图&gt;&gt;</View>
+              </View>
+            </View>
+          )
+        })
+      }
 
-    </View>
+    </scroll-view>
   )
 }

src/pages/index/tabs/HomesCss/style.less

@@ -19,7 +19,6 @@
       border-top: 8px solid #000;
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
-
       margin-left: 10px;
     }
   }
@@ -54,3 +53,107 @@
     height: 100%;
   }
 }
+
+//农机劣效----------------
+.content-header-box {
+  width: 93vw;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &-liftCentent {
+    display: flex;
+    align-items: center;
+    > Image {
+      width: 44px;
+      height: 40px;
+    }
+    > View {
+      padding-left: 15px;
+      font-size: 40px;
+      font-weight: 800;
+      color: #222222;
+    }
+  }
+  &-rightCentent {
+    font-size: 32px;
+    font-weight: 500;
+    color: #666666;
+  }
+}
+
+.carsListImga-bottom-box {
+  margin: 30px auto 0 auto;
+  background: #f2f2f2;
+  width: 93vw;
+  > Image {
+    width: 100%;
+    margin: 0 auto;
+  }
+  &-flaxBox {
+    width: 94%;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 40px;
+    margin-bottom: 38px;
+    &-liftText {
+      width: 95%;
+
+      &-Titles {
+        width: 95%;
+
+        text-overflow: ellipsis; //显示...
+        white-space: nowrap; //不换行
+        overflow: hidden;
+        font-size: 36px;
+        font-weight: bold;
+        color: #222222;
+      }
+      &-price {
+        margin-top: 44px;
+        font-size: 44px;
+        font-weight: 800;
+        color: #666666;
+        background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        > Text {
+          font-size: 25px;
+        }
+      }
+    }
+    &-rightBut {
+      align-items: center;
+      margin: 0 auto;
+    }
+  }
+  .content-header-box-map {
+    width: 94%;
+
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 60px;
+    &-liftCentent {
+      display: flex;
+      align-items: center;
+      > Image {
+        width: 22px;
+        height: 27px;
+      }
+      > View {
+        padding-left: 15px;
+        font-size: 30px;
+        font-weight: 800;
+        color: #222222;
+      }
+    }
+    &-rightCentent {
+      font-size: 30px;
+      font-weight: 500;
+      color: #666666;
+    }
+  }
+}

src/pages/index/tabs/Orders.jsx

@@ -5,6 +5,8 @@ import { View } from "@tarojs/components"
 export default (props) => {
 
   return (
-    <View>Orders</View>
+    <View>
+
+    </View>
   )
 }