FEAT: 结构调整

src/app.scss

@@ -1,3 +1,8 @@
 @import "tailwindcss/base";
 @import 'tailwindcss/components';
 @import "tailwindcss/utilities";
+
+@font-face {
+    font-family: 'ArtFont';
+    src: url(./assets/font/biaoti.ttf);
+}

src/components/customized/navigation/index.tsx

@@ -16,7 +16,7 @@ const HeaderNation = ({ title = '', headerHeight = 0 }) => {
             }}>
                 { showBack ? <Image src={arrow} className="w-6 h-6"></Image> : null }
             </View>
-            <View className=" from-neutral-100 text-base text-center" style={{ color: 'white' }}>{ title }</View>
+            <View className="from-neutral-100 text-base text-center" style={{ color: 'white', fontFamily: 'ArtFont' }}>{ title }</View>
             <View className="w-8"></View>
         </View>
     )

src/components/customized/pageWrapper/index.tsx

@@ -6,7 +6,7 @@ import HeaderNation from "../navigation"
 const PageWrapper = ({ children, title = '' }) => {
     return (
         <View
-            className="flex flex-col-reverse h-[100vh]"
+            className="flex flex-col-reverse h-[100vh] bg-slate-50"
             style={{
                 'backgroundImage': `url(${basicBg})`,
                 'backgroundSize': '100% auto',

src/components/customized/tabWrapper/index.scss

@@ -0,0 +1,14 @@
+.selected-tab {
+    position: relative;
+    top: -.2rem;
+}
+.selected-tab::after {
+    content: '';
+    position: absolute;
+    height: .2rem;
+    width: 1.2rem;
+    border-radius: .1rem;
+    background-color: #e5e5e5;
+    left: calc(50% - .6rem);
+    bottom: -.1rem;
+}

src/components/customized/tabWrapper/index.tsx

@@ -0,0 +1,28 @@
+import { View } from "@tarojs/components"
+import './index.scss'
+
+/**
+ * options 为菜单列表 selected为选中值 callback为函数回调
+ * @param param0 
+ * @returns 
+ */
+const TabWrapper = ({ options, selectedId = '', callback }) => {
+    return (
+        <View className="h-[2.4rem] flex px-2 py-1 overflow-auto items-center text-sm">
+            {
+                options.map((item:any) => {
+                    return (
+                        <View
+                            className={`px-3 py-1 ${selectedId === item.id ? 'selected-tab' : ''}`}
+                            key={item.id}
+                            style={{ color: 'white' }}
+                            onClick={() => callback(item.id)}
+                        >{ item.title }</View>
+                    )
+                })
+            }
+        </View>
+    )
+}
+
+export default TabWrapper;

src/pages/index/index.tsx

@@ -69,10 +69,10 @@ const Index = () => {
 
   return (
     <View
-      className="h-[100vh] flex flex-col-reverse relative"
+      className="h-[100vh] flex flex-col-reverse relative bg-slate-50"
       style={{ 'backgroundImage': `url(${basicBg})`, 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }}
     >
-      <View className="flex justify-evenly align-top relative z-100" style={{ height: globalData.navigatorHeight + 'px' }}>
+      <View className="flex justify-evenly align-top relative z-100 bg-white" style={{ height: globalData.navigatorHeight + 'px' }}>
         {
           bottomMenuList.map(item => {
             return (

src/pages/iot/index.tsx

@@ -5,6 +5,7 @@ import offlineIcon from '../../assets/images/icons/offline.png'
 import errorIcon from '../../assets/images/icons/error.png'
 import img from '../../assets/images/img.png'
 import Taro from "@tarojs/taro"
+import TabWrapper from "../../components/customized/tabWrapper"
 
 const Iot = () => {
     const [selectedMenuId, setSelectedMenuId] = useState('all')
@@ -111,22 +112,9 @@ const Iot = () => {
         },
     ]
     return (
-        <View className="p-1 h-full">
+        <View className="px-1 h-full">
             <View className="h-full flex flex-col justify-start">
-                <View className="h-[2.4rem] flex px-2 py-1">
+                <TabWrapper options={topMenus} selectedId={selectedMenuId} callback={setSelectedMenuId}></TabWrapper>
-                    {
-                        topMenus.map(item => {
-                            return (
-                                <View
-                                    className={`p-1 px-3 ${selectedMenuId === item.id ? 'border-b-4 border-lime-800' : ''}`}
-                                    key={item.id}
-                                    style={{ color: 'white' }}
-                                    onClick={() => setSelectedMenuId(item.id)}
-                                >{ item.title }</View>
-                            )
-                        })
-                    }
-                </View>
                 <View className="flex flex-col space-y-3 p-2 rounded-sm" style={{ overflow: 'auto', height: 'calc(100% - 2.4rem)' }}>
                     {
                         dataList.map(item => {

src/pages/msgCenter/index.scss

@@ -7,12 +7,6 @@
     margin-top: 25px;
     border-radius: 15px;
     justify-content: space-between;
-    box-shadow:
-    0 10px 6px -6px #ccc,  /* bottom shadow */  
-    0 -10px 6px -6px #ccc,  /* top shadow */  
-    10px 0 6px -6px #ccc,  /* right shadow */  
-    -10px 0 6px -6px #ccc; /* left shadow */  
-    ;
     .right{
         width: 80%;
         height: 100%;

src/pages/msgCenter/index.tsx

@@ -70,7 +70,7 @@ const MsgCenter = () => {
     });
     return (
         <View>
-            <View className='flex px-2 py-1 border-b-2 border-slate-100' style={{position:'relative'}}>
+            <View className='flex px-2 py-1' style={{ position:'relative' }}>
                     {
                         topMenus.map(item => {
                             return (
@@ -90,7 +90,7 @@ const MsgCenter = () => {
                 {
                     contList.map((item,index)=>{
                         return (
-                            <View className='cont' key={index} onClick={() => { Taro.navigateTo({ url: '/pages/msgDetail/index' }) }}>
+                            <View className='rounded-md shadow-xl cont' key={index} onClick={() => { Taro.navigateTo({ url: '/pages/msgDetail/index' }) }}>
                                 <Image src={item.id=='1'|| item.id=='2'?rang:warn} className='w-11 h-11' style={{marginTop:'-10px'}}></Image>
                                 <View className='right'>
                                     <View className='right-top'>

src/pages/msgDetail/index.scss

@@ -1,14 +1,6 @@
 .detail{
-    width: 90%;
+    width: 100%;
-    margin: auto;
+    padding: 35px;
-    padding: 35px ;
-    border-radius: 20px; 
-    box-shadow:
-    0 10px 6px -6px #ccc,  /* bottom shadow */  
-    0 -10px 6px -6px #ccc,  /* top shadow */  
-    10px 0 6px -6px #ccc,  /* right shadow */  
-    -10px 0 6px -6px #ccc; /* left shadow */  
-    ;
 }
 .detailTop{
     display: flex;

src/pages/msgDetail/index.tsx

@@ -3,14 +3,13 @@ import rang from './assets/rang.png'
 import yxImg from './assets/yxImg.png'
 import image from './assets/image.png'
 import "./index.scss"
-import HeaderNation from "../../components/customized/navigation"
+import PageWrapper from "../../components/customized/pageWrapper"
-import basicBg from '../../assets/images/bg.png'
 
 const MsgDetail = () => {
     return (
-        <View style={{ 'backgroundImage': `url(${basicBg})`, 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }}>
+        <PageWrapper title="消息详情">
-            <HeaderNation title='消息中心' />
+            <View className="h-full flex flex-col px-3 py-3">
-            <View className='detail' style={{backgroundColor:'#fff'}}>
+                <View className='detail rounded-md shadow-xl' style={{backgroundColor:'#fff'}}>
                     <View className='detailTop'>
                         <Image src={rang}  className='w-12 h-12'></Image>
                         <View style={{marginLeft:'20px',fontWeight:700}}>土壤EC值预警</View>
@@ -24,7 +23,7 @@ const MsgDetail = () => {
                         <View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>建议： 打开灭蚊灯</View>
                     </View>
                 </View>
-            <View className='detail' style={{marginTop:'15px',backgroundColor:'#fff'}}>
+                <View className='detail rounded-md shadow-xl' style={{marginTop:'15px',backgroundColor:'#fff'}}>
                     <View className='detailFootTop' style={{marginBottom:'15px'}}>
                             <Image src={yxImg}  className='w-12 h-12'></Image>
                             <View style={{marginLeft:'20px',fontWeight:700}}>影像</View>
@@ -34,6 +33,7 @@ const MsgDetail = () => {
                     </View>
                 </View>
             </View>
+        </PageWrapper>
     )
 }