安卓H5首页,添加动画效果

src/pages/index/index.jsx

@@ -11,8 +11,7 @@ import { AtImagePicker } from "taro-ui";
 import { AtButton } from "taro-ui";
 import { AtSearchBar } from "taro-ui";
 import { Picker } from "@tarojs/components";
-import { AtList, AtListItem } from "taro-ui";
-import { AtNavBar } from "taro-ui";
+import { AtList, AtListItem, AtNavBar, AtTag } from "taro-ui";
 import {
   AtModal,
   AtModalHeader,
@@ -24,6 +23,7 @@ import {
 import { AtToast } from "taro-ui";
 import { AtIcon } from "taro-ui";
 import { VIEW } from "@tarojs/runtime";
+import 'animate.css'
 
 // export default class Index extends Component {
 const Index = () => {
@@ -32,7 +32,6 @@ const Index = () => {
   const [open, setopen] = useState(false);
   const [referer, setreferer] = useState(window.document.referrer);
 
-
   const [isOpened, setisOpened] = useState(false);
   const [joinMeetup, setjoinMeetup] = useState(false);
 
@@ -69,7 +68,6 @@ const Index = () => {
   };
 
   useEffect(() => {
-    
     getOpenid();
   }, []);
 
@@ -83,35 +81,35 @@ const Index = () => {
   };
   return (
     <View className="index">
-      <View>公众号:异度世界</View>
-      <View>referer={document.referrer}</View>
 
-      <View className="content">
-        <View>
-          1.微信机器人
-          <br />
-          2.大众点评-探店
-          <br />
-          3.云手机
-          <br />
-          4.数字游民-工具箱
-          <br />
-          5.youtube频道
-          <br />
-          6.wordpress博客
-          <br />
-          7.如何出版一本书
-          <br />
-          8.AI: gpt对话/文生图/srt字幕/配音
-          <br />
-          9. electron软件-emoji编辑器
-          <br />
-        </View>
+      {/* 公众号 */}
+      <View className="index-title" onClick={()=>{
+        // window.location.href=""
+      }}>
+        <AtAvatar
+          size="small"
+          circle
+          image="https://www.hackrobot.cn/wp-content/uploads/2023/05/cropped-cropped-Screenshot-2023-05-22-at-17.26.38.png"
+        ></AtAvatar>
+        <View>公众号:异度世界</View>
       </View>
 
-      <View className="payBtn">
+      {/* 标签 */}
+      <View  className="index-tags animate__animated animate__pulse">
+        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
+          独立开发者
+        </AtTag>
+        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
+          跨境电商
+        </AtTag>
+        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
+          树莓派
+        </AtTag>
+      </View>
+
+      {/* <View className="payBtn">
         <AtButton type="primary">立即购买 -- 29.8元</AtButton>
-      </View>
+      </View> */}
     </View>
   );
 };

src/pages/index/index.scss

@@ -1,17 +1,22 @@
 .index {
-
   // background-color: #002329;
   width: 100vw;
   height: 100vh;
+  padding: 40px;
 
-  .content {
-    font-size: 28px;
-    flex-direction: row;
+  .index-title {
     display: flex;
+    flex-direction: row;
+    font-weight: 700;
     align-items: center;
-    justify-content: center;
-    // color: aliceblue;
-    
+  }
+
+  .index-tags {
+    margin-top: 20px;
+    .index-AtTag {
+      background-color: rgb(99 102 241);
+      color: white;
+    }
   }
 
   .payBtn {