diff --git a/src/images/fuzhou.jpg b/src/images/fuzhou.jpg new file mode 100644 index 0000000..ad235ef Binary files /dev/null and b/src/images/fuzhou.jpg differ diff --git a/src/images/haikou.jpg b/src/images/haikou.jpg new file mode 100644 index 0000000..3bb6081 Binary files /dev/null and b/src/images/haikou.jpg differ diff --git a/src/images/hegang.jpg b/src/images/hegang.jpg new file mode 100644 index 0000000..303c39d Binary files /dev/null and b/src/images/hegang.jpg differ diff --git a/src/images/kunming.jpg b/src/images/kunming.jpg new file mode 100644 index 0000000..136fb6e Binary files /dev/null and b/src/images/kunming.jpg differ diff --git a/src/images/zhengzhou.jpg b/src/images/zhengzhou.jpg new file mode 100644 index 0000000..367b6fb Binary files /dev/null and b/src/images/zhengzhou.jpg differ diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index 1923727..2774c5f 100644 --- a/src/pages/index/index.jsx +++ b/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 = () => { {/* 数组尽量是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") { diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index a3df85c..2d0ef37 100644 --- a/src/pages/index/index.scss +++ b/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;