feat: 首页ui

package.json

@@ -105,6 +105,7 @@
     "@tarojs/shared": "3.6.5",
     "@tarojs/taro": "3.6.5",
     "ahooks": "^3.7.6",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.3",

pnpm-lock.yaml

@@ -58,6 +58,9 @@ dependencies:
   ahooks:
     specifier: ^3.7.6
     version: 3.7.6(react@18.2.0)
+  classnames:
+    specifier: ^2.3.2
+    version: 2.3.2
   react:
     specifier: ^18.2.0
     version: 18.2.0

src/pages/index/index.jsx

@@ -1,19 +1,81 @@
 import {View, Image, Text} from '@tarojs/components';
+import classNames from 'classnames';
+import sendIcon from '@assets/sending.svg';
+import complateIcon from '@assets/complate.svg';
+import orderIcon from '@assets/order.svg';
+import face from '@assets/face.svg';
+import Login from './login';
+import {useBoolean} from 'ahooks';
+
+const btnList = [
+  {
+    title: '收发货',
+    children: [
+      {title: '发货', icon: sendIcon},
+      {title: '收货', icon: complateIcon},
+    ],
+  },
+  {title: '历史记录', children: [{title: '订单', icon: orderIcon}]},
+];
 
 export default function App() {
+  const [visible, {toggle, setFalse}] = useBoolean();
+
   return (
-    <View className='w-screen h-screen bg-gradient-to-br from-[#EBF1FF] to-[#F4F6F8] pt-20 px-4'>
-      <View className='flex items-center'>
-        <Image
-          className='w-14 h-14 rounded-full'
-          src='https://cdn.novenn.com/random/avatars/1595853168010.jpg'
-          mode='aspectFit'
-        />
+    <>
+      <View
+        className={classNames(
+          'w-screen h-screen overflow-auto pt-20  px-4',
+          'bg-gradient-to-br from-[#DEF6FE] to-[#F4F6F8]',
+        )}
+      >
+        <View className='flex items-center' onClick={toggle}>
+          <Image
+            className='w-14 h-14 rounded-full'
+            src={face}
+            mode='widthFix'
+          />
 
-        <View className='flex-1 ps-4'>
-          <Text className='block text-base text-[#333]'>谭迪人</Text>
+          <View className='flex-1 ps-4'>
+            <Text className='block text-base text-[#333]'>登录</Text>
+          </View>
         </View>
+
+        {btnList.map(function (el, index) {
+          return (
+            <View
+              key={el.title}
+              className={classNames(
+                'bg-white py-3 px-5 rounded-lg shadow-lg',
+                index === 0 ? 'mt-20' : 'mt-6',
+              )}
+            >
+              <Text className='block text-lg font-semibold text-black'>
+                {el.title}
+              </Text>
+
+              <View className='mt-3 grid grid-cols-4 grid-rows-1 gap-4'>
+                {el.children.map(function (item) {
+                  return (
+                    <View key={item.title}>
+                      <Image
+                        src={item.icon}
+                        className='w-8 h-8 mx-auto'
+                        mode='widthFix'
+                      />
+                      <Text className='block text-center text-sm mt-2 text-[#666]'>
+                        {item.title}
+                      </Text>
+                    </View>
+                  );
+                })}
+              </View>
+            </View>
+          );
+        })}
       </View>
-    </View>
+
+      <Login visible={visible} onClose={setFalse} />
+    </>
   );
 }

src/pages/index/login/index.jsx

@@ -0,0 +1,45 @@
+import {Popup, Button} from '@nutui/nutui-react-taro';
+import {Input, View} from '@tarojs/components';
+import classNames from 'classnames';
+
+export default function Login({visible, onClose}) {
+  return (
+    <Popup
+      visible={visible}
+      position='bottom'
+      closeable
+      round
+      className='px-4 py-5 pb-10'
+      onClose={onClose}
+      closeOnClickOverlay={false}
+    >
+      <View className='pt-9'>
+        <Input
+          className={classNames(
+            'border border-gray-300 border-solid rounded-lg',
+            'p-2',
+          )}
+          placeholder='请输入用户名'
+        />
+
+        <Input
+          className={classNames(
+            'border border-gray-300 border-solid rounded-lg',
+            'p-2 mt-4',
+          )}
+          placeholder='请输入密码'
+          password
+        />
+        <View className='mt-12'>
+          <Button
+            className='py-4 !border-none !text-base'
+            block
+            color='#58C6EA'
+          >
+            登录
+          </Button>
+        </View>
+      </View>
+    </Popup>
+  );
+}

tailwind.config.js

@@ -3,7 +3,11 @@ module.exports = {
   content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
   darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#58C6EA',
+      },
+    },
   },
   plugins: [],
   corePlugins: {