From 1b3bbb715cd8bf588a9fce14be71ae2ffa0649f5 Mon Sep 17 00:00:00 2001 From: eric Date: Tue, 3 Feb 2026 04:27:49 -0600 Subject: [PATCH] 's' --- src/pages/index/index.jsx | 59 +++++++++---- src/pages/index/index.scss | 165 ++++++++++--------------------------- 2 files changed, 87 insertions(+), 137 deletions(-) diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index 55b9f57..17e6408 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -52,7 +52,6 @@ import nomadPoster from "../../images/nomadPoster.jpg"; import qrcodeoffice from "../../images/qrcodeoffice.jpg"; import qrcode_planet from "../../images/qrcode_planet.jpg"; - import yintian from "../../images/cloud/yintian.png"; import taiyang from "../../images/cloud/taiyang.png"; import xiayu from "../../images/cloud/xiayu.png"; @@ -228,7 +227,7 @@ const Index = () => { const newCityList = _.cloneDeep(cityList); const custDomIndex = newCityList.findIndex( - (item) => item.cityName === "custDom" + (item) => item.cityName === "custDom", ); if (custDomIndex !== -1) { @@ -248,7 +247,6 @@ const Index = () => { return ( - {/* */} {/* @@ -275,7 +273,6 @@ const Index = () => { {/* {!mobile ? ( */} - 📣成为数字游民,并旅居在任何地方
@@ -322,9 +319,11 @@ const Index = () => { onClick={() => { // setqrOpen(true); // 在手机/微信 - isWeChat ? Taro.navigateTo({ - url: "/pages/salon/index", - }) : setqrOpen(true) + isWeChat + ? Taro.navigateTo({ + url: "/pages/salon/index", + }) + : setqrOpen(true); }} >{`加入社群💬`} @@ -367,13 +366,42 @@ const Index = () => { {/* */} {/* */} - {/* 右侧固定内容，放前面 */} - 11 - 22 - 33 - - + + + 新加入成员 + + {[ + { image: girla }, + { image: avatar }, + { image: girlb }, + { image: cat }, + { image: girl }, + { image: boya }, + { image: touxiang }, + { image: girlc }, + { image: boyb }, + { image: girla }, + { image: avatar }, + { image: girlb }, + { image: cat }, + { image: girl }, + { image: boya } + ].map((item, index) => { + return ( + // + + ); + })} + + + + {/* 22 */} + {/* 33 */} {/* 数组尽量是4的倍数 */} {/* 随着屏幕变化,改变自定义数组的索引/顺序 */} @@ -392,8 +420,7 @@ const Index = () => { {/* 城市名 */} {item.cityName} - - + { ); } })} - {/* 112233 */} {/* */} @@ -425,7 +451,6 @@ const Index = () => { mode="heightFix" // src={qrcode_planet} src={qrsalon} - /> diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index aeaf803..9e74cbb 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -123,16 +123,16 @@ } } - - - - .items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); + // grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); + /* 核心改动：前面自适应列 + 最后一列固定 260px 给 rightItem */ grid-auto-rows: 280px; + // grid-auto-rows: 220px; gap: 40px; + // gap: 30px; padding: 20px; box-sizing: border-box; // background-color: #f5222d; @@ -143,6 +143,8 @@ } .item { height: 280px; + // height: 240px; + border-radius: 15px; position: relative; color: white; @@ -226,7 +228,9 @@ } .rightItem { + // padding: 20px; height: 280px; + // height: 240px; border-radius: 15px; position: relative; color: white; @@ -235,7 +239,43 @@ min-width: 260px; // 保证最小宽度不被挤掉 // max-width: 340px; // 最大宽度 box-sizing: border-box; - background-color: yellow; + // background-color: yellow; + border: 1px solid black; + .newMembers { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: black; + .newMembersUp { + width: 100%; + height: 40px; + // background-color: #f5222d; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-bottom: 1px solid black; + } + .AvatarView { + padding: 20px; + margin-top: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + // align-items: center; + // justify-content: space-between; + .Avatar { + width: 40px; + height: 40px; + margin-right: 6px; + margin-bottom: 20px; + border: 2px solid #fff; + border-radius: 50%; + } + } + } } /* 保证右侧永远在最后一列 */ @@ -254,121 +294,6 @@ } } - .items11 { - height: 100%; - padding: 20px; - // background-color: #ff4d4f; - - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 30px; /* 设置元素之间的间隔 */ - - // padding-left: 10px; /* 确保两侧固定边距 */ - // padding-right: 10px; - // background-color: aqua; - - .item:hover { - animation: pulse 0.6s ease; - } - - .item { - flex-grow: 1; /* 自动增长填充空间 */ - flex-basis: 260px; /* 基本宽度为 300px，元素数量随可用空间调整 */ - - // flex: 1 1 260px; /* 自动增长并设置基础宽度为 260px，确保元素均匀分布 */ - max-width: 330px; /* 设置最大宽度 */ - // max-width: 350px; /* 设置最大宽度 */ - - // max-width: 280px; /* 设置最大宽度 */ - // width: 100%; /* 确保可以响应式变化 */ - height: 280px; - // 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; - flex-direction: row; - align-items: center; - justify-content: space-between; - z-index: 1; - width: 100%; - height: 20px; - position: absolute; - top: 0px; - .itemUpleft { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - // justify-content: center; - font-size: 20px; - margin-left: 10px; - // background-color: yellow; - } - .itemUpright { - margin-right: 10px; - display: flex; - flex-direction: row; - align-items: center; - // justify-content: center; - .itemUprightWifi { - margin-left: 10px; - } - } - } - .itemiddle { - font-size: 30px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - z-index: 1; - width: 100%; - height: 20px; - // background-color: green; - position: absolute; - 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: 10px; - margin-bottom: 10px; - .itemDownleft { - margin-left: 10px; - display: flex; - flex-direction: row; - align-items: center; - // justify-content: space-between; - } - .itemDownright { - margin-right: 10px; - } - } - } - } - .custDom { width: 100%; height: 40px;