update

src/pages/index/index.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '数字游民工具箱'
+  navigationBarTitleText: '数字游民CNA'
 }

src/pages/index/index.jsx

@@ -42,19 +42,39 @@ const Index = () => {
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {[
-          { img: beijing, type: "item", dom: "" },
-          { img: shanghai, type: "item", dom: "" },
-          { img: shenzhen, type: "custom", dom: custDom() },
-          { img: shenzhen, type: "item", dom: "" },
+          { cityName: "北京", img: beijing, type: "item", dom: "" },
+          { cityName: "上海", img: shanghai, type: "item", dom: "" },
+          {
+            cityName: "custDom",
+            img: shenzhen,
+            type: "custom",
+            dom: custDom(),
+          },
+          { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
+          { cityName: "广州", img: shenzhen, type: "item", dom: "" },
+          { cityName: "武汉", img: shenzhen, type: "item", dom: "" },
+          { cityName: "杭州", img: shenzhen, type: "item", dom: "" },
         ].map((item, index) => {
           if (item.type === "custom") {
-            return <View className="item"> {item.dom}</View>;
+            // 根据屏幕变化,添加自定义组件
+            // return <View className="item"> {item.dom}</View>;
           } else {
             return (
               <View className="item">
-                <View className="itemUp"> itemUp</View>
-                <View className="itemiddle"> itemiddle</View>
-                <View className="itemDown">itemDown </View>
+                <View className="itemUp">
+                  {/* 序列号 */}
+                  <View className="itemUpleft">{index + 1}</View>
+                  {/* 网速 */}
+                  <View className="itemUpright">70mps</View>
+                </View>
+                {/* 城市名 */}
+                <View className="itemiddle"> {item.cityName}</View>
+                <View className="itemDown">
+                  {/* 温度 */}
+                  <View className="itemDownleft">29度</View>
+                  {/* 消费 */}
+                  <View className="itemDownright">$1545/月</View>
+                </View>
                 <Image
                   style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0"
                   // mode="heightFix"

src/pages/index/index.scss

@@ -32,14 +32,30 @@
       position: relative;
       color: white;
       .itemUp {
+        margin-top: 10px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
         z-index: 1;
         width: 100%;
         height: 20px;
-        background-color: burlywood;
+        // background-color: burlywood;
         position: absolute;
         top: 0px;
+        .itemUpleft{
+          margin-left: 10px;
+        }
+        .itemUpright{
+          margin-right: 10px;
+        }
       }
       .itemiddle {
+        font-size: 30px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
         z-index: 1;
         width: 100%;
         height: 20px;
@@ -48,12 +64,23 @@
         top: 50%;
       }
       .itemDown {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
         z-index: 1;
         width: 100%;
         height: 20px;
         // background-color: red;
         position: absolute;
         bottom: 0px;
+        margin-bottom: 10px;
+        .itemDownleft{
+          margin-left: 10px;
+        }
+        .itemDownright{
+          margin-right: 10px;
+        }
       }
     }
   }