diff --git a/package.json b/package.json
index 66ea511..e0381b2 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
"@tarojs/taro": "3.6.20",
"animate.css": "^4.1.1",
"github-markdown-css": "^5.6.1",
+ "lodash": "^4.17.21",
"marked": "^14.1.2",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
diff --git a/src/images/nomadBook.jpg b/src/images/nomadBook.jpg
new file mode 100644
index 0000000..3bb11b3
Binary files /dev/null and b/src/images/nomadBook.jpg differ
diff --git a/src/images/wechatGroup.jpg b/src/images/wechatGroup.jpg
new file mode 100644
index 0000000..699f207
Binary files /dev/null and b/src/images/wechatGroup.jpg differ
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 4fb42a2..a7eb1ef 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -24,6 +24,8 @@ import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import { VIEW } from "@tarojs/runtime";
import "animate.css";
+import _ from "lodash";
+
import beijing from "../../images/beijing.jpg";
import shanghai from "../../images/shanghai.jpg";
import shenzhen from "../../images/shenzhen.jpg";
@@ -50,60 +52,140 @@ import xiayu from "../../images/cloud/xiayu.png";
import wifi from "../../images/cloud/wifi.png";
// import nomadcna from "../../images/cloud/nomadcna.jpg";
import nomadcna from "../../images/cloud/nomadcna.png";
+import nomadBook from "../../images/nomadBook.jpg";
+import wechatGroup from "../../images/wechatGroup.jpg";
-import IndexDetail from './componments/IndexDetail/index'
-
-
+import IndexDetail from "./componments/IndexDetail/index";
// export default class Index extends Component {
const Index = () => {
const [current, setcurrent] = useState(0);
+ // 自定义组件模版
const custDom = () => {
return custDom;
};
+ // 微信群
+ const weGroup = () => {
+ return (
+
+ {" "}
+
+
+ );
+ };
+
+ // 微信读书
+ const weBook = () => {
+ return (
+
+
+
+ );
+ };
+
+ // 定义初始数据数组
+ const [cityList, setCityList] = useState([
+ { cityName: "大理", img: dali, type: "item", dom: "" },
+ { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
+ { cityName: "北京", img: beijing, type: "item", dom: "" },
+ { cityName: "上海", img: shanghai, type: "item", dom: "" },
+ {
+ cityName: "custDom",
+ img: shenzhen,
+ type: "custom",
+ dom: weGroup(),
+ },
+
+ { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
+ {
+ cityName: "custDom",
+ img: shenzhen,
+ type: "custom",
+ dom: weBook(),
+ },
+ { cityName: "广州", img: guangzhou, type: "item", dom: "" },
+ { cityName: "武汉", img: wuhan, type: "item", dom: "" },
+ { cityName: "杭州", img: hangzhou, 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: "" },
+ ]);
+
+ const [oldcityList, setoldCityList] = useState(cityList);
+
+ // 定义屏幕宽度
+ const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+ // 监听屏幕宽度变化
+ useEffect(() => {
+ const handleResize = () => {
+ setWindowWidth(window.innerWidth);
+ };
+ window.addEventListener("resize", handleResize);
+
+ // 清除监听器
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, []);
+
+ // 当屏幕宽度小于某个值时，改变 custDom 的位置
+ useEffect(() => {
+ if (windowWidth < 768) {
+ // 比如，宽度小于768时，将 custDom 移到第一位
+ // const newCityList = [...cityList];
+ const newCityList = _.cloneDeep(cityList);
+
+ const custDomIndex = newCityList.findIndex(
+ (item) => item.cityName === "custDom"
+ );
+
+ if (custDomIndex !== -1) {
+ const [custDomItem] = newCityList.splice(custDomIndex, 1);
+ newCityList.unshift(custDomItem); // 将 custDomItem 移动到数组开头
+ }
+ setCityList(newCityList);
+ } else {
+ // 屏幕宽度大于 768 时，恢复默认顺序
+ setCityList(oldcityList);
+ }
+ }, [windowWidth, cityList]);
+
return (
- 📣数字游民CNA,是针对中国用户的城市数据统计
+
+ {" "}
+ 📣数字游民CNA,是针对中国用户的城市数据统计
+
{/* 数组尽量是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: "" },
- {
- cityName: "custDom",
- img: shenzhen,
- 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: 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) => {
+ {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
+ {cityList.map((item, index) => {
if (item.type === "custom") {
// 根据屏幕变化,添加自定义组件
- // return {item.dom};
+ return {item.dom};
} else {
return (
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index f30d30d..2f5f931 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -18,6 +18,7 @@
}
}
.items {
+ height: 100%;
display: flex;
flex-direction: row;
align-items: center;
@@ -34,11 +35,19 @@
max-width: 330px; /* 设置最大宽度 */
// width: 100%; /* 确保可以响应式变化 */
height: 280px;
- background-color: yellow;
+ // background-color: yellow;
margin-bottom: 20px;
border-radius: 5%;
position: relative;
color: white;
+
+ .weBook {
+ height: 100%;
+ }
+ .weGroup {
+ height: 100%;
+ }
+
.itemUp {
margin-top: 10px;
display: flex;
diff --git a/yarn.lock b/yarn.lock
index ba2f7c1..b844cb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8115,11 +8115,16 @@ lodash.uniq@^4.5.0:
resolved "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
-"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
+"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4:
version "4.17.21"
resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+lodash@^4.17.21:
+ version "4.17.21"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+ integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
log-symbols@^2.0.0:
version "2.2.0"
resolved "https://registry.npmmirror.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"