style: 活动卡片样式

src/pages/components/ActiveCard/index.scss

@@ -0,0 +1,36 @@
+.activeCard {
+  display: flex;
+  flex-direction: row;
+  height: 200px;
+  background-color: #fafafa;
+  margin-top: 20px;
+  .left {
+    width: 30%;
+    // background-color: aqua;
+  }
+  .middle {
+    display: flex;
+    flex-direction: column;
+    // align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    // background-color: greenyellow;
+    padding-left: 20px;
+    padding-right: 10px;
+    padding-top: 10px;
+    .down{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        // background-color: red;
+        .date{
+            display: flex;
+            flex-direction: column;
+        }
+    }
+  }
+  .right {
+    width: 20%;
+  }
+}

src/pages/components/ActiveCard/index.tsx

@@ -0,0 +1,59 @@
+import { Button, Tabbar, TabbarItem } from "@antmjs/vantui";
+import { View, Text } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import react from "react";
+import { Image } from "@antmjs/vantui";
+import "./index.scss";
+import { Tag } from "@antmjs/vantui";
+
+const ActiveCard = () => {
+  return (
+    <View className="activeCard">
+      <View className="left">
+        <Image
+          width="100%"
+          height="100px"
+          fit="cover"
+          src="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images/v4-460px-Climb-a-Mountain-Step-9.jpg"
+        />
+      </View>
+      <View className="middle">
+        <View className="title">
+          <Tag round={true} type="warning" style={{ marginRight: "5px" }}>
+            标签
+          </Tag>
+          <Text>这是标题这是标题这是标题这是标题这是标题</Text>
+        </View>
+        <View className="down">
+          <View className="date">
+          <View className="21">莲花山公园</View>
+          <View className="11">2022年11月17日</View>
+          
+          </View>
+         
+
+          <View className="btn">
+            {" "}
+            <Button plain hairline type="primary">
+              立即报名
+            </Button>
+          </View>
+        </View>
+      </View>
+      {/* <View className="right">
+        <View className="tag">标签</View>
+        <View className="image">头像</View>
+        <View className="btn">按钮</View>
+      </View> */}
+
+      {/* <Image
+        round
+        width="100px"
+        height="100px"
+        src="https://img.yzcdn.cn/vant/cat.jpeg"
+      /> */}
+    </View>
+  );
+};
+
+export default ActiveCard;