'update'

src/pages/index/index.jsx

@@ -38,6 +38,13 @@ import jingzhou from "../../images/jingzhou.jpg";
 import chengdu from "../../images/chengdu.jpg";
 import nanjing from "../../images/nanjing.jpg";
 import xian from "../../images/xian.jpg";
+import kunming from "../../images/kunming.jpg";
+import fuzhou from "../../images/fuzhou.jpg";
+import zhengzhou from "../../images/zhengzhou.jpg";
+import haikou from "../../images/haikou.jpg";
+import hegang from "../../images/hegang.jpg";
+
+
 
 // export default class Index extends Component {
 const Index = () => {
@@ -53,6 +60,8 @@ const Index = () => {
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {[
+          { cityName: "大理", img: dali, type: "item", dom: "" },
+          { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
           { cityName: "北京", img: beijing, type: "item", dom: "" },
           { cityName: "上海", img: shanghai, type: "item", dom: "" },
           {
@@ -61,18 +70,25 @@ const Index = () => {
             type: "custom",
             dom: custDom(),
           },
+
           { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
           { cityName: "广州", img: guangzhou, type: "item", dom: "" },
           { cityName: "武汉", img: wuhan, type: "item", dom: "" },
           { cityName: "杭州", img: hangzhou, type: "item", dom: "" },
-          { cityName: "大理", img: dali, type: "item", dom: "" },
-          { cityName: "鹤岗", img: dali, type: "item", dom: "" },
+
           { cityName: "成都", img: chengdu, type: "item", dom: "" },
           { cityName: "南京", img: nanjing, type: "item", dom: "" },
           { cityName: "西安", img: xian, type: "item", dom: "" },
 
           { cityName: "重庆", img: chongqing, type: "item", dom: "" },
           { cityName: "长沙", img: changsha, type: "item", dom: "" },
+
+          { cityName: "昆明", img: kunming, type: "item", dom: "" },
+          { cityName: "福州", img: fuzhou, type: "item", dom: "" },
+          { 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") {

src/pages/index/index.scss

@@ -15,15 +15,15 @@
     align-items: center;
     // justify-content: space-between;
     flex-wrap: wrap;
-    gap: 20px; /* 设置元素之间的间隔 */
+    gap: 30px; /* 设置元素之间的间隔 */
     // padding-left: 10px; /* 确保两侧固定边距 */
     // padding-right: 10px;
     // background-color: aqua;
 
     .item {
       flex-grow: 1; /* 自动增长填充空间 */
-      flex-basis: 280px; /* 基本宽度为 300px，元素数量随可用空间调整 */
-      max-width: 350px; /* 设置最大宽度 */
+      flex-basis: 260px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+      max-width: 330px; /* 设置最大宽度 */
       // width: 100%; /* 确保可以响应式变化 */
       height: 280px;
       background-color: yellow;