style: 活动卡片样式

src/pages/activityList/index.scss

@@ -0,0 +1,3 @@
+.activityList{
+    padding: 20px;
+}

src/pages/activityList/index.tsx

@@ -4,6 +4,8 @@ import { Card, DropdownMenu } from "@antmjs/vantui";
 import { DropdownItem } from "@antmjs/vantui";
 import TabbarCom from "../components/TabbarCom";
 import Taro from "@tarojs/taro";
+import ActiveCard from "../components/ActiveCard";
+import './index.scss'
 
 const activityList = () => {
   useEffect(() => {
@@ -42,8 +44,8 @@ const activityList = () => {
     value2: "a",
   });
   return (
-    <View>
-      {" "}
+    <View className="activityList">
+
       <View>
         <DropdownMenu>
           <DropdownItem value={state.value1} options={state.option1} />
@@ -60,13 +62,18 @@ const activityList = () => {
               });
             }}
           >
-            <Card
+
+             {/* 活动卡片 */}
+             <ActiveCard />
+
+
+            {/* <Card
               num=""
               price=""
               desc="报名中"
               title="周末爬山"
               thumb="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg"
-            />
+            /> */}
           </View>
         );
       })}

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;

src/pages/home/index.scss

@@ -1,3 +1,18 @@
+.homeContent{
+    padding: 20px;
+    .tagStyle{
+        font-size: 18px;
+    }
+
+}
+
 .iconStyle{
     color: red;
+}
+
+.topHome{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
 }

src/pages/home/index.tsx

@@ -19,7 +19,9 @@ import { Tabbar, TabbarItem } from "@antmjs/vantui";
 import TabbarCom from "../components/TabbarCom";
 import { getTable, getTableid } from "../../utils/index";
 import { Icon } from "@antmjs/vantui";
-import './index.scss'
+import "./index.scss";
+import { Search } from "@antmjs/vantui";
+import ActiveCard from "../components/ActiveCard";
 
 const Home = () => {
   // const { images } = COMMON
@@ -57,9 +59,7 @@ const Home = () => {
   }, []);
 
   return (
-    <View>
-      
-
+    <View className="homeContent">
       {/* 通知条 */}
       <NoticeBar
         leftIcon="volume-o"
@@ -73,12 +73,18 @@ const Home = () => {
           </Col>
         </Row>
       </View> */}
-      <View>
+      <View className="topHome">
         {/* <Tag type="primary">深圳</Tag> */}
-        <Tag plain={true} type="primary">
-          深圳
-        </Tag>
+        <View>
+          <Tag plain={true} type="primary" size="large">
+            深圳
+          </Tag>
+        </View>
+        <View>
+          <Search placeholder="请输入搜索关键词" style={{ width: "320px" }} />
+        </View>
       </View>
+
       {/* 轮播图 */}
       <View className="demo-box">
         <Swiper
@@ -161,14 +167,16 @@ const Home = () => {
               });
             }}
           >
-            {" "}
-            <Card
+            {/* 活动卡片 */}
+            <ActiveCard />
+
+            {/* <Card
               num=""
               price=""
               desc="报名中"
               title="周末爬山"
               thumb="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg"
-            />
+            /> */}
           </View>
         );
       })}