feat: 首页优化

src/app.config.js

@@ -1,7 +1,8 @@
 export default {
   pages: [
     'pages/index/index',
-    'pages/my/index'
+    'pages/my/index',
+    'pages/meetup/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/pages/index/index.jsx

@@ -1,6 +1,6 @@
 import { Component } from "react";
-import Taro from '@tarojs/taro'
-import { View, Text, Image} from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { View, Text, Image } from "@tarojs/components";
 import "./index.scss";
 import { AtTabBar } from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
@@ -8,6 +8,7 @@ import { AtGrid } from "taro-ui";
 import { Swiper, SwiperItem } from "@tarojs/components";
 import { AtCard } from "taro-ui";
 import { AtImagePicker } from "taro-ui";
+import { AtButton } from 'taro-ui'
 
 // export default class Index extends Component {
 const Index = () => {
@@ -20,56 +21,65 @@ const Index = () => {
       Taro.redirectTo({
         url: "/pages/my/index",
       });
+    } else if (value == 0) {
+      Taro.redirectTo({
+        url: "/pages/index/index",
+      });
+    } else {
+      Taro.redirectTo({
+        url: "/pages/meetup/index",
+      });
     }
     //
   };
   return (
     <View className="index">
       {/* <Text>Hello world!</Text> */}
-
-      <Swiper
-        className="indexSwiper"
-        indicatorColor="#999"
-        indicatorActiveColor="#333"
-        // vertical
-        circular
-        indicatorDots
-        autoplay
-      >
-        <SwiperItem>
-          <View className="demo-text">
-            {" "}
-            <Image
-              // style="width: 300px;height: 100px;background: #fff;"
-              src={
-                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
-              }
-            />
-          </View>
-        </SwiperItem>
-        <SwiperItem>
-          <View className="demo-text">
-            {" "}
-            <Image
-              // style="width: 300px;height: 100px;background: #fff;"
-              src={
-                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
-              }
-            />
-          </View>
-        </SwiperItem>
-        <SwiperItem>
-          <View className="demo-text">
-            {" "}
-            <Image
-              // style="width: 300px;height: 100px;background: #fff;"
-              src={
-                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
-              }
-            />
-          </View>
-        </SwiperItem>
-      </Swiper>
+      <View className="indexSwiper">
+        {" "}
+        <Swiper
+          indicatorColor="#999"
+          indicatorActiveColor="#333"
+          // vertical
+          circular
+          indicatorDots
+          autoplay
+        >
+          <SwiperItem>
+            <View className="demo-text">
+              {" "}
+              <Image
+                // style="width: 300px;height: 100px;background: #fff;"
+                src={
+                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+                }
+              />
+            </View>
+          </SwiperItem>
+          <SwiperItem>
+            <View className="demo-text">
+              {" "}
+              <Image
+                // style="width: 300px;height: 100px;background: #fff;"
+                src={
+                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+                }
+              />
+            </View>
+          </SwiperItem>
+          <SwiperItem>
+            <View className="demo-text">
+              {" "}
+              <Image
+                // style="width: 300px;height: 100px;background: #fff;"
+                src={
+                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+                }
+              />
+            </View>
+          </SwiperItem>
+        </Swiper>
+      </View>
 
       <AtGrid
         data={[
@@ -92,18 +102,28 @@ const Index = () => {
       />
 
       <AtCard
-        note="星期三 2023-12-06"
+        note=""
         extra=""
-        title="这是个[副业交流] 沙龙茶话会标题"
+        title="[副业交流] 沙龙茶话会"
         thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
       >
-        {/* 这也是内容区 可以随意定义功能 */}
-        <Image
-          style="width: 300px;height: 100px;background: #fff;"
-          src={
-            "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
-          }
-        />
+        <View className="meetupCard">
+          {" "}
+          <View className="left">
+            {" "}
+            <Image
+              style="width: 150px;height: 100px;background: #fff;"
+              src={
+                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+              }
+            />
+          </View>
+          <View className="right">
+            <View className="up">[副业交流] 沙龙茶话会</View>
+            <View className="middle">2023/12/06 星期三</View>
+            <View className="down"><AtButton type='primary' size='small' className="submitBtn">立即报名</AtButton></View>
+          </View>
+        </View>
       </AtCard>
 
       <View className="indexTablebar">

src/pages/index/index.scss

@@ -1,24 +1,54 @@
 .index {
-    display: flex;
-    flex-direction: column;
-    // align-items: center;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  // align-items: center;
+  justify-content: center;
   .indexSwiper {
     // margin-top: 20px;
-    // padding: 20px;
- 
+    padding: 20px;
+
     .demo-text {
+      // display: flex;
+      // flex-direction: column;
+      // align-items: center;
+      // justify-content: center;
+      background-color: yellow;
+      height: 300px;
+      width: 100%;
+      // padding: 20px;
+      // Image{
+      //     width: 90%;
+      // }
+    }
+  }
+
+  .meetupCard {
+    display: flex;
+    flex-direction: row;
+    .right {
+      // background-color: yellow;
+      width: 100%;
+      margin-left: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .down {
+        width: 200px;
+        // background-color: aqua;
+        position: relative;
+        bottom: 10px;
+        right: -120px;
         // display: flex;
-        // flex-direction: column;
-        // align-items: center;
-        // justify-content: center;
-        background-color: yellow;
-        height: 300px;
-        width: 100%;
-        // Image{
-        //     width: 90%;
-        // }
+        // flex-direction: column-reverse;
+        // justify-content:flex-end
+        // position: relative;
+        .submitBtn {
+          // width: 200px;
+          // position: absolute;
+          // right: 0px;
+        }
       }
+    }
   }
 
   .indexTablebar {

src/pages/meetup/index.jsx

@@ -0,0 +1,53 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from '@tarojs/taro'
+
+
+// export default class Index extends Component {
+const Meetup = () => {
+  const [current, setcurrent] = useState(1);
+  const handleClick = (value) => {
+    console.log('value',value)
+    setcurrent(value)
+    if (value == 2) {
+        // 跳转到目的页面，在当前页面打开
+        Taro.redirectTo({
+          url: "/pages/my/index",
+        });
+      }else if(value == 0){
+        Taro.redirectTo({
+            url: "/pages/index/index",
+          });
+      }else{
+        Taro.redirectTo({
+          url: "/pages/meetup/index",
+        });
+      }
+  };
+  return (
+    <View className="my">
+      {/* <Text>Hello world!</Text> */}
+      meetup
+      <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Meetup;

src/pages/meetup/index.scss

@@ -0,0 +1,10 @@
+.my{
+
+
+
+    .indexTablebar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+}

src/pages/my/index.jsx

@@ -11,7 +11,7 @@ import Taro from '@tarojs/taro'
 
 
 // export default class Index extends Component {
-const Index = () => {
+const My = () => {
   const [current, setcurrent] = useState(2);
   const handleClick = (value) => {
     console.log('value',value)
@@ -25,10 +25,14 @@ const Index = () => {
         Taro.redirectTo({
             url: "/pages/index/index",
           });
+      }else{
+        Taro.redirectTo({
+          url: "/pages/meetup/index",
+        });
       }
   };
   return (
-    <View className="index">
+    <View className="my">
       {/* <Text>Hello world!</Text> */}
       my
       <View className="indexTablebar">
@@ -46,4 +50,4 @@ const Index = () => {
   );
 };
 
-export default Index;
+export default My;

src/pages/my/index.scss

@@ -0,0 +1,10 @@
+.my{
+
+
+
+    .indexTablebar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+}