gitsubg

src/app.less

@@ -27,14 +27,14 @@
   box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
   .weui-tabbar__label {
     color: #c0c8d3;
-    font-size: 40px;
+    font-size: 30px;
     font-weight: 800;
   }
 
   .weui-bar__item_on {
     .weui-tabbar__label {
       color: #202020;
-      font-size: 50px;
+      font-size: 30px;
       font-weight: 800;
     }
   }

src/components/UserCellBox/index.jsx

@@ -0,0 +1,14 @@
+import { View } from "@tarojs/components"
+
+import './style.less';
+
+
+export default (props) => {
+
+  return (
+    <View className='User-Setup-background-cmp'>
+      <View className='User-Setup-background-SetupText-cmp'>{props.title}</View>
+      <View className='User-Setup-background-wxInfo-cmp'>{props.children}</View>
+    </View>
+  )
+}

src/components/UserCellBox/style.less

@@ -0,0 +1,22 @@
+.User-Setup-background-cmp {
+  width: 95vw;
+  background: #ffffff;
+  border-radius: 40px;
+  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
+  padding-top: 60px;
+  margin: 0 auto 30px auto;
+  padding-bottom: 35px;
+  .User-Setup-background-SetupText-cmp {
+    border-left: 10px solid black;
+    padding-left: 23px;
+    margin-bottom: 40px;
+    font-size: 34px;
+    font-weight: bold;
+    color: #333333;
+  }
+  .User-Setup-background-wxInfo-cmp {
+    width: 90%;
+    background: #ffffff;
+    margin: 0 auto;
+  }
+}

src/pages/index/tabbar.js

@@ -2,18 +2,18 @@
 const tabbar = [
   {//recommend_active
     text: '首页',
-    // iconPath: require('@/assets/icons/tabbar/recommend.gif'),
-    // selectedIconPath: require('@/assets/icons/tabbar/recommend_active.png'),
+    iconPath: require('@/assets/tabbar/HomesOFFImgaes.png'),
+    selectedIconPath: require('@/assets/tabbar/HomesNOImgaes.png'),
   },
   {
     text: '订单',
-    // iconPath: require('@/assets/icons/tabbar/guide.png'),
-    // selectedIconPath: require('@/assets/icons/tabbar/guide_active.png'),
+    iconPath: require('@/assets/tabbar/OrdersOFFImgaes.png'),
+    selectedIconPath: require('@/assets/tabbar/OrdersNOImgaes.png'),
   },
   {
     text: '我的',
-    // iconPath: require('@/assets/icons/tabbar/mine.png'),
-    // selectedIconPath: require('@/assets/icons/tabbar/mine_active.png'),
+    iconPath: require('@/assets/tabbar/MineOFFImgaes.png'),
+    selectedIconPath: require('@/assets/tabbar/MineNOImgaes.png'),
   },
 ]
 

src/pages/index/tabs/Homes.jsx

@@ -1,10 +1,54 @@
 
-import { View } from "@tarojs/components"
+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 './HomesCss/style.less'
+
 export default (props) => {
+  // const { SwiperItem } = Swiper
+
+
+  const imglist = [
+    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
+    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
+    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
+    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
+    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
+    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
+  ]
+
+  const handleSearch = (e) => {
+    console.log(e.detail.value)
+  }
 
   return (
-    <View>Home</View>
+    <View>
+      <View className='heads-top-box'>
+        <View className='heads-top-box-left'>
+          <Image src={addresss} className='heads-top-box-left-addresssImg' />
+          <Text>邓州市</Text>
+          <View className='heads-top-box-left-addresssImg-DownIcon' />
+        </View>
+        <View className='heads-content-searchClass'>
+          <Input type='text' className='heads-content-searchClass-searchInput' onBlur={handleSearch} placeholder='搜索关键字查询订单' />
+          <Image src={searchs} className='heads-content-searchClass-searchInput-searchImg' />
+        </View>
+      </View>
+      <Swiper
+        circular
+        autoplay
+        className='swiper-box'
+      >
+        {imglist.map((item, inx) => (
+          <SwiperItem key={inx}>
+            <Image src={item.url} mode='widthFix' className='storeImage' />
+          </SwiperItem>
+        ))}
+      </Swiper>
+
+    </View>
   )
 }

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

@@ -0,0 +1,56 @@
+.heads-top-box {
+  display: flex;
+  margin: 30px;
+  margin-bottom: 0;
+  &-left {
+    display: flex;
+    align-items: center;
+    margin-right: 30px;
+    font-size: 32px;
+    font-weight: bold;
+    color: #202020;
+    line-height: 68px;
+    &-addresssImg {
+      width: 28px;
+      height: 34px;
+      margin-right: 9px;
+    }
+    &-addresssImg-DownIcon {
+      border-top: 8px solid #000;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+
+      margin-left: 10px;
+    }
+  }
+  .heads-content-searchClass {
+    display: inline-block;
+    position: relative;
+    flex: 1;
+    &-searchInput {
+      background: #f8f8f8;
+      border-radius: 34px;
+      padding-left: 68px;
+      padding-right: 34px;
+      font-size: 28px;
+      height: 68px;
+      line-height: 68px;
+    }
+    &-searchInput-searchImg {
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      left: 31px;
+      top: 19px;
+    }
+  }
+}
+
+.swiper-box {
+  height: calc(calc(100vw-60px) * 0.62);
+  text-align: center;
+  margin: 30px;
+  .storeImage {
+    height: 100%;
+  }
+}

src/pages/index/tabs/Mine.jsx

@@ -2,44 +2,78 @@
 import { View, Image } from "@tarojs/components"
 import { useDidShow } from "@tarojs/taro"
 import { useState } from "react"
+import UserCellBox from '@/components/UserCellBox'
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
+import aboutUs from '@/assets/mineImgaes/aboutUs.png'//关于我们
+import feedbacks from '@/assets/mineImgaes/feedbacks.png'//意见反馈
+import helpCenter from '@/assets/mineImgaes/helpCenter.png'//帮助中心
+import versionUpdate from '@/assets/mineImgaes/versionUpdate.png'//版本更新
+import userRight from '@/assets/mineImgaes/userRight.png'//版本更新
 import './MineCss/style.less'
 
 
 export default (props) => {
   const [isLoginBox, setIsLoginBox] = useState(false)
+  const userList = [
+    { userTitle: '关于我们', userImg: aboutUs },
+    { userTitle: '版本更新', userImg: versionUpdate },
+    { userTitle: '帮助中心', userImg: helpCenter },
+    { userTitle: '意见反馈', userImg: feedbacks },
+  ]
 
   return (
-    <scroll-view scrollY style='height: 100%;' >
 
+    <scroll-view scrollY style='height: 100%;' >
       <View>
         {/* 头像 */}
         {
           !isLoginBox ?
-            <View className='User-Avatar-background-falseBox'>
+            <View style={{ backgroundImage: "url(" + require("@/assets/mineImgaes/mineBack.png") + ")" }} className='User-Avatar-background-falseBox'>
               <Image className='User-Avatar-background-falseBox-userImg userImg' src='https://profile.csdnimg.cn/3/1/5/0_qq_42551866' />
               <View className='User-Avatar-background-falseBox-userLogin' onClick={() => setIsLoginBox(true)}>点击登陆</View>
             </View>
             :
-            <View className='User-Avatar-background-trueBox'>
-              <View className='setPassword'>修改密码</View>
-              <Image className='User-Avatar-background-trueBox-userImg' src='https://profile.csdnimg.cn/3/1/5/0_qq_42551866' />
-              <View className='User-Avatar-background-trueBox-name textStyle' >鲍zhangchao</View>
-              <View className='User-Avatar-background-trueBox-phone textStyle'>18082043755</View>
-            </View>
+            <>
+              <View style={{ backgroundImage: "url(" + require("@/assets/mineImgaes/mineBack.png") + ")" }} className='User-Avatar-background-trueBox'>
+                <View className='setPassword'>修改密码</View>
+                <Image className='User-Avatar-background-trueBox-userImg' src='https://profile.csdnimg.cn/3/1/5/0_qq_42551866' />
+                <View className='User-Avatar-background-trueBox-name textStyle' >鲍zhangchao</View>
+                <View className='User-Avatar-background-trueBox-phone textStyle'>18082043755</View>
+              </View>
+              <UserCellBox title='地址信息' >
+                <View className='addresss-box'>
+                  <Image className='addresss-box-images' src={addresss} />
+                  <View className='addresss-box-contents'>
+                    <View className='addresss-box-contents-texts' >河南省南阳市邓州市九龙镇5556666665</View>
+                    <View>》</View>
+                  </View>
+                </View>
+              </UserCellBox>
+            </>
         }
 
+
         {/* 菜单 */}
-        <View className='User-Setup-background'>
-          <View className='User-Setup-background-SetupText'>设置</View>
-          <View className='User-Setup-background-wxInfo'>
-            <View className='User-Setup-background-wxInfo-InfoCell'>
-              <Image className='User-Setup-background-wxInfo-InfoCell-imgae' src='https://profile.csdnimg.cn/3/1/5/0_qq_42551866' />
-              <View className='User-Setup-background-wxInfo-InfoCell-text'>关于我闷</View>
-              <View> 》 </View>
-            </View>
+        <UserCellBox title='设置' >
+          {
+            userList.map((item, index) => {
+              return (
+                <View key={index} className='User-Setup-background-wxInfo-InfoCell'>
+                  <Image className='User-Setup-background-wxInfo-InfoCell-imgae' src={item.userImg} />
+                  <View className='box-flex'>
+                    <View className='User-Setup-background-wxInfo-InfoCell-text'>{item.userTitle}</View>
+                    <Image src={userRight} />
+                  </View>
+                </View>
+              )
+            })
+          }
+
+        </UserCellBox>
+
+
+        <View className='bottom-buttom'>退出登陆</View>
 
-          </View>
-        </View>
       </View>
     </scroll-view>
   )

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

@@ -1,12 +1,14 @@
 .User-Avatar-background-falseBox {
   width: 95vw;
   height: 30vh;
-  background: rgb(233, 104, 104);
+  background-size: 100%;
+  background-repeat: no-repeat;
   border-radius: 40px;
   box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
   margin-top: 1em;
   margin: 0 auto;
   display: flex;
+  margin-bottom: 30px;
   &-userImg {
     position: relative;
     top: 8vh;
@@ -31,13 +33,14 @@
 //已登陆样式-----------------------
 
 .User-Avatar-background-trueBox {
+  background-size: 100%;
+  background-repeat: no-repeat;
   width: 95vw;
   height: 30vh;
-  background: rgb(233, 104, 104);
   border-radius: 40px;
   box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
   margin-top: 1em;
-  margin: 0 auto;
+  margin: 0 auto 30px auto;
   &-userImg {
     position: relative;
     top: 8vh;
@@ -58,8 +61,6 @@
     font-weight: 500;
     text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
   }
-  &-name {
-  }
   &-phone {
     margin-top: 38px;
   }
@@ -79,46 +80,76 @@
   }
 }
 // 结束-----------------------------
-.User-Setup-background {
-  width: 95vw;
-  background: #ffffff;
-  border-radius: 40px;
-  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
-  padding-top: 60px;
 
-  margin: 0 auto;
-  &-SetupText {
-    border-left: 10px solid black;
-    padding-left: 23px;
-    margin-bottom: 40px;
-    font-size: 34px;
-    font-weight: bold;
-    color: #333333;
+//地址显示 ---------------
+
+.addresss-box {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  &-images {
+    width: 22px;
+    height: 27px;
+  }
+  &-contents {
+    display: flex;
+    width: 93%;
+    margin-left: 20px;
+    justify-content: space-between;
+    &-texts {
+      width: 88%;
+      font-size: 34px;
+      text-overflow: ellipsis; //显示...
+      white-space: nowrap; //不换行
+      overflow: hidden;
+      font-weight: 500;
+    }
   }
-  &-wxInfo {
-    width: 90%;
-    height: 60vh;
-    background: #ffffff;
-    margin: 0 auto;
-    &-InfoCell {
-      width: 100%;
-      height: 108px;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      &-imgae {
-        width: 34px;
-        height: 43px;
-      }
-      &-text {
-        position: relative;
-        right: 0px;
+}
+
+//END
+
+.User-Setup-background-wxInfo-InfoCell {
+  width: 100%;
+  height: 108px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  &-imgae {
+    width: 34px;
+    height: 43px;
+  }
+  .box-flex {
+    width: 91%;
+    display: flex;
+    margin-left: 24px;
+    justify-content: space-between;
+    &-text {
+      position: relative;
+      right: 0px;
+
+      font-size: 34px;
+      font-weight: bold;
+      color: #333333;
+      letter-spacing: 5px;
+    }
 
-        font-size: 34px;
-        font-weight: bold;
-        color: #333333;
-        letter-spacing: 5px;
-      }
+    > Image {
+      width: 21px;
+      height: 36px;
     }
   }
 }
+
+.bottom-buttom {
+  width: 95vw;
+  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  line-height: 98px;
+  height: 98px;
+  background: #ffffff;
+  border-radius: 49px;
+  font-size: 40px;
+  font-weight: 600;
+  margin: 59px auto;
+}