在线书籍

src/pages/index/index.jsx

@@ -29,6 +29,8 @@ import emoji from "../../images/emoji.png";
 import phone from "../../images/phone.png";
 import robot from "../../images/robot.png";
 import nomad from "../../images/nomad.png";
+import book from "../../images/book.png";
+import meetup from "../../images/meetup.jpg";
 
 // export default class Index extends Component {
 const Index = () => {
@@ -169,7 +171,7 @@ const Index = () => {
                 "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect";
             }}
           />
-          <AtListItem
+          {/* <AtListItem
             title="数字游民"
             arrow="right"
             // hasBorder={false}
@@ -178,10 +180,32 @@ const Index = () => {
               window.location.href =
                 "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545541605766168582#wechat_redirect";
             }}
-          />
+          /> */}
         </AtList>
       </View>
 
+      {/* 在线图书 */}
+      <View className="index-book">
+        <View className="bookImg">
+          <Image
+            style="width: 40%px;height:100%;background: #fff;"
+            src={book}
+          />
+        </View>
+        <View className="book-middle"></View>
+        <View className="nomad-right">
+          <View className="nomad-title">
+            <Image
+              style="width: 30px;height:30px;background: #fff;"
+              src={nomad}
+            />
+            <View>数字游民</View>
+          </View>
+          <View>222</View>
+          <View>333</View>
+        </View>
+      </View>
+
       {/* 软件下载 */}
       <View className="software">
         <View className="emojiTitle">
@@ -222,7 +246,7 @@ const Index = () => {
             <View className="meetup-left">
               <Image
                 style="width: 100%;height: 100px;background: #fff;"
-                src="https://cdn.huodongxing.com/logo/202407/2764598892100/355309716945349_v2small.jpg"
+                src={meetup}
               />
             </View>
 
@@ -281,9 +305,14 @@ const Index = () => {
             >
               取消
             </Button>
-            <Button onClick={() => {
-              window.location.href="https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo"
-            }}>下载</Button>
+            <Button
+              onClick={() => {
+                window.location.href =
+                  "https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo";
+              }}
+            >
+              下载
+            </Button>
           </AtModalAction>
         </AtModal>
       </View>

src/pages/index/index.scss

@@ -35,11 +35,53 @@
     margin-top: 60px;
   }
 
+  .index-book {
+    margin-top: 60px;
+    // width: 100%;
+    height: 300px;
+    padding: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    // justify-content: center;
+    background-color: #f0f0f0;
+    .bookImg {
+      width: 40%;
+      height: 100%;
+      background-color: #1bb14e;
+    }
+
+    .book-middle{
+      width: 20px;
+      height: 100%;
+    }
+    .nomad-right {
+      // margin-left: 20px;
+      display: flex;
+      flex-direction: column;
+      // align-items: center;
+      justify-content: space-between;
+      background-color: yellow;
+      // width: 100%;
+      flex: 1;
+      height: 100%;
+
+      .nomad-title {
+        font-size: 35px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        // justify-content: space-between;
+        // background-color: red;
+      }
+    }
+  }
+
   .software {
     margin-top: 60px;
     font-size: 30px;
     padding: 30px;
-    .emojiTitle{
+    .emojiTitle {
       color: rgb(99 102 241);
     }
     .emojitext {
@@ -104,12 +146,11 @@
     }
   }
 
-  .emojiModel{
-
-    .modelText{
+  .emojiModel {
+    .modelText {
       font-size: 22px;
     }
-    .model-emoji{
+    .model-emoji {
       display: flex;
       flex-direction: row;
       align-items: center;