feat: 示例页面

src/app.config.ts

@@ -1,12 +1,20 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index',
-    'pages/setting/index'
+    // 首页y以及首页tab页内容
+    'pages/index/index', // 首页
+
+    // 被其他页面引用的组件不要写在这里
+    // 'pages/iot/index', // 物联网
+    // 'pages/msgCenter/index', // 消息中心
+    // 'pages/equipment/index', // 巡检设备
+
+    // 跳转页面
+    'pages/msgDetail/index', // 消息详情
   ],
   window: {
     backgroundTextStyle: 'light',
-    navigationBarBackgroundColor: '#fff',
+    navigationBarBackgroundColor: '#0fc87c',
     navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
+    navigationBarTextStyle: 'white'
   }
 })

src/components/ui/button.tsx

@@ -0,0 +1,8 @@
+import { View } from "@tarojs/components";
+
+export default function Button({ ...props }, ref) {
+    return (
+        <View className="flex space-x-2 border p-2 bg-slate-400 rounded-md" { ...props }>
+        </View>
+    )
+}

src/pages/equipment/index.tsx

@@ -0,0 +1,9 @@
+import { View } from "@tarojs/components"
+
+const EquipMent = () => {
+    return (
+        <View>Equ</View>
+    )
+}
+
+export default EquipMent;

src/pages/index/index.tsx

@@ -1,49 +1,85 @@
-import { useState } from "react";
-import { View } from "@tarojs/components";
-import { clsx } from "clsx";
+import { Image, View } from "@tarojs/components";
 import "./index.scss";
+import { useState } from "react";
+import Iot from "../iot";
+import MsgCenter from "../msgCenter";
+import EquipMent from "../equipment";
+import tab1Icon from '../../assets/images/tab/tab1.png'
+import tab1Icon_selected from '../../assets/images/tab/tab1_selected.png'
+import tab2Icon from '../../assets/images/tab/tab2.png'
+import tab2Icon_selected from '../../assets/images/tab/tab2_selected.png'
+import tab3Icon from '../../assets/images/tab/tab3.png'
+import tab3Icon_selected from '../../assets/images/tab/tab3_selected.png'
+
 import Taro from "@tarojs/taro";
 
 const Index = () => {
-  const [flag, setFlag] = useState(true);
-  const className = clsx(
-    flag ? "bg-[#123456]" : "bg-[#654321]",
-    "text-white",
-    "after:content-['click_here_to_switch_bg_className']",
-    'p-[13.3333333px]',
-    'rounded-[10086px]'
-  );
-  const logoClass = clsx(
-    "bg-[url(https://pic1.zhimg.com/v2-3ee20468f54bbfefcd0027283b21aaa8_720w.jpg)] bg-[length:100%_100%] bg-no-repeat w-screen h-[41.54vw]"
-  );
-  return (
-    <>
-      <View className={logoClass}></View>
-      <View className='[&_.u-count-down\_\_text]:!text-sky-400'>
-        <View></View>
-        <View>
-          <View className="u-count-down__text text-[40px] text-center before:content-['taro-react-tailwind-vscode-template']"></View>
-        </View>
-      </View>
-      <View className='space-y-4 flex flex-col items-center'>
-        <View className="after:mx-auto after:text-center after:block after:content-['这是一个小程序taro_react_tailwindcss的模板'] after:text-lime-700"></View>
-        <View
-          className="rounded-lg p-1 bg-gray-100 dark:bg-zinc-800 h-20 w-40 after:text-xs after:content-['this_is_a_hover_block.have_a_try!']"
-          hoverClass='bg-red-500 dark:bg-green-500'
-          onClick={() => setFlag(false)}
-        ></View>
+  const [curSelectedItem, setCurSelectedItem] = useState('iot')
+  Taro.setNavigationBarTitle({ title: '物联网' })
+  const bottomMenuList = [
+    {
+      id: 'iot',
+      title: '物联网',
+      path: '/pages/iot/index',
+      icon: tab1Icon,
+      selectedIcon: tab1Icon_selected
+    },
+    {
+      id: 'msg',
+      title: '消息中心',
+      path: '/pages/msgCenter/index',
+      icon: tab2Icon,
+      selectedIcon: tab2Icon_selected
+    },
+    {
+      id: 'equip',
+      title: '巡检设备',
+      path: '/pages/equipment/index',
+      icon: tab3Icon,
+      selectedIcon: tab3Icon_selected
+    },
+  ]
 
+  return (
+    <View className="h-[100vh] flex flex-col-reverse">
+      <View className="flex justify-evenly h-[6rem] align-top">
+        {
+          bottomMenuList.map(item => {
+            return (
               <View
-          className={className}
+                className="flex flex-col items-center p-2"
+                key={item.id}
                 onClick={() => {
-            Taro.redirectTo({
-              url: '/pages/setting/index'
-            })
+                  setCurSelectedItem(item.id)
+                  Taro.setNavigationBarTitle({ title: item.title })
                 }}
-        >TETT</View>
-        <View className='test'></View>
+              >
+                <View
+                  className="w-8 h-8 shadow-sm p-1 rounded-lg"
+                  style={{
+                    'background': item.id === curSelectedItem ? '#55c15d' : 'white'
+                  }}
+                >
+                  <Image src={item.id === curSelectedItem ? item.selectedIcon : item.icon } className="w-full h-full" />
+                </View>
+                <View className="text-sm mt-1">{ item.title }</View>
+              </View>
+            )
+          })
+        }
+      </View>
+      <View className="h-full border-b border-slate-300">
+        {
+          curSelectedItem === 'iot'
+          ? <Iot />
+          : curSelectedItem === 'msg'
+          ? <MsgCenter />
+          : curSelectedItem === 'equip'
+          ? <EquipMent />
+          : null
+        }
+      </View>
     </View>
-    </>
   );
 };
 

src/pages/iot/index.tsx

@@ -0,0 +1,94 @@
+import { Image, View } from "@tarojs/components"
+import { useState } from "react"
+import onlineIcon from '../../assets/images/icons/online.png'
+import offlineIcon from '../../assets/images/icons/offline.png'
+import errorIcon from '../../assets/images/icons/error.png'
+import img from '../../assets/images/img.png'
+
+const Iot = () => {
+    const [selectedMenuId, setSelectedMenuId] = useState('all')
+    const topMenus = [
+        {
+            id: 'all',
+            title: '全部'
+        },
+        {
+            id: '1',
+            title: '基地1'
+        },
+        {
+            id: '2',
+            title: '基地2'
+        },
+        {
+            id: '3',
+            title: '基地3'
+        },
+    ]
+
+    const dataList = [
+        {
+            id: '1',
+        },
+        {
+            id: '2',
+        },
+        {
+            id: '3',
+        },
+    ]
+    return (
+        <View className="p-1 h-full">
+            <View className="h-full flex flex-col">
+                <View className="flex px-2 py-1 border-b-2 border-slate-100">
+                    {
+                        topMenus.map(item => {
+                            return (
+                                <View
+                                    className={`p-1 px-3 ${selectedMenuId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
+                                    key={item.id}
+                                    onClick={() => setSelectedMenuId(item.id)}
+                                >{ item.title }</View>
+                            )
+                        })
+                    }
+                </View>
+                <View className="h-full border flex flex-col space-y-2 p-2 rounded-sm border-slate-50">
+                    {
+                        dataList.map(item => {
+                            return (
+                                <View className="border border-slate-300 px-4 py-2 rounded-md shadow-lg flex space-x-4">
+                                    <View className="w-12 h-12 relative top-1">
+                                        <Image src={img} className="w-12 h-12"></Image>
+                                    </View>
+                                    <View className="w-full flex flex-col justify-between items-start pb-1">
+                                        <View className="text-lg pb-1">气象站</View>
+                                        <View className="w-full flex justify-between items-center space-x-2">
+                                            <View className="flex items-center space-x-1">
+                                                <View className="flex items-center"><Image src={onlineIcon} className="w-5 h-5"></Image></View>
+                                                <View>在线</View>
+                                                <View>3</View>
+                                            </View>
+                                            <View className="flex items-center space-x-1">
+                                                <View className="flex items-center"><Image src={offlineIcon} className="w-5 h-5"></Image></View>
+                                                <View>离线</View>
+                                                <View>3</View>
+                                            </View>
+                                            <View className="flex items-center space-x-1">
+                                                <View className="flex items-center"><Image src={errorIcon} className="w-5 h-5"></Image></View>
+                                                <View>故障</View>
+                                                <View>3</View>
+                                            </View>
+                                        </View>
+                                    </View>
+                                </View>
+                            )
+                        })
+                    }
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export default Iot;

src/pages/msgCenter/index.tsx

@@ -0,0 +1,9 @@
+import { View } from "@tarojs/components"
+
+const MsgCenter = () => {
+    return (
+        <View>MsgCenter</View>
+    )
+}
+
+export default MsgCenter;

src/pages/msgDetail/index.tsx

@@ -0,0 +1,9 @@
+import { View } from "@tarojs/components"
+
+const MsgDetail = () => {
+    return (
+        <View></View>
+    )
+}
+
+export default MsgDetail;