'update'

src/pages/index/index.jsx

@@ -44,7 +44,10 @@ import zhengzhou from "../../images/zhengzhou.jpg";
 import haikou from "../../images/haikou.jpg";
 import hegang from "../../images/hegang.jpg";
 
-
+import yintian from "../../images/cloud/yintian.png";
+import taiyang from "../../images/cloud/taiyang.png";
+import xiayu from "../../images/cloud/xiayu.png";
+import wifi from "../../images/cloud/wifi.png";
 
 // export default class Index extends Component {
 const Index = () => {
@@ -56,7 +59,9 @@ const Index = () => {
 
   return (
     <View className="Index">
-      <View className="up"></View>
+      <View className="up">
+      <View className="upText">  📣数字游民CNA,是针对中国用户的城市数据统计</View>
+      </View>
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {[
@@ -88,7 +93,6 @@ const Index = () => {
           { cityName: "郑州", img: zhengzhou, type: "item", dom: "" },
           { cityName: "海口", img: haikou, type: "item", dom: "" },
 
-
           { cityName: "荆州", img: jingzhou, type: "item", dom: "" },
         ].map((item, index) => {
           if (item.type === "custom") {
@@ -99,20 +103,38 @@ const Index = () => {
               <View className="item">
                 <View className="itemUp">
                   {/* 序列号 */}
-                  <View className="itemUpleft">{index + 1}</View>
+                  <View className="itemUpleft">
+                    <View>{index + 1}</View>
+                    {/* <View>_</View> */}
+                  </View>
                   {/* 网速 */}
-                  <View className="itemUpright">70mps</View>
+                  <View className="itemUpright">
+                    <Image
+                      style="width: 20px;height: 20px;"
+                      mode="heightFix"
+                      src={wifi}
+                    />
+                    <View className="itemUprightWifi">70mps</View>
+                  </View>
                 </View>
                 {/* 城市名 */}
                 <View className="itemiddle"> {item.cityName}</View>
                 <View className="itemDown">
                   {/* 温度 */}
-                  <View className="itemDownleft">29度</View>
+                  <View className="itemDownleft">
+                    <Image
+                      style="width: 30px;height: 30px;"
+                      mode="heightFix"
+                      src={taiyang}
+                    />
+                    <span> 29度</span>
+                  </View>
                   {/* 消费 */}
                   <View className="itemDownright">¥1545/月</View>
                 </View>
+                {/* 0;opacity: 0.93; */}
                 <Image
-                  style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;opacity: 0.93"
+                  style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;filter: contrast(0.9);"
                   // mode="heightFix"
                   src={item.img}
                 />

src/pages/index/index.scss

@@ -3,11 +3,19 @@
   padding: 20px;
   display: flex;
   flex-direction: column;
+  background-color: #fafafa;
   .up {
     width: 100%;
-    min-height: 200px;
-    background-color: red;
+    min-height: 100px;
+    // background-color: red;
     margin-bottom: 20px;
+    border-radius: 1%;
+    background-color: #fff;
+    .upText {
+      // width: 100%;
+      padding: 40px;
+      font-size: 20px;
+    }
   }
   .items {
     display: flex;
@@ -43,11 +51,25 @@
         // background-color: burlywood;
         position: absolute;
         top: 0px;
-        .itemUpleft{
+        .itemUpleft {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          // justify-content: center;
+          font-size: 20px;
           margin-left: 10px;
+          // background-color: yellow;
         }
-        .itemUpright{
+        .itemUpright {
           margin-right: 10px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          // justify-content: center;
+          .itemUprightWifi {
+            margin-left: 10px;
+          }
         }
       }
       .itemiddle {
@@ -75,10 +97,14 @@
         position: absolute;
         bottom: 0px;
         margin-bottom: 10px;
-        .itemDownleft{
+        .itemDownleft {
           margin-left: 10px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          // justify-content: space-between;
         }
-        .itemDownright{
+        .itemDownright {
           margin-right: 10px;
         }
       }