From 444754286ab1db922c8df7bfb84158800ca1b87a Mon Sep 17 00:00:00 2001 From: eric Date: Tue, 3 Feb 2026 00:13:14 -0600 Subject: [PATCH] =?UTF-8?q?'=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/images/qrsalon.png | Bin 0 -> 2080 bytes src/pages/index/index.jsx | 105 +++++++++++++++-------------- src/pages/index/index.scss | 131 ++++++++++++++++++++++++++++++++++++- 3 files changed, 181 insertions(+), 55 deletions(-) create mode 100644 src/images/qrsalon.png diff --git a/src/images/qrsalon.png b/src/images/qrsalon.png new file mode 100644 index 0000000000000000000000000000000000000000..df8069dfc9f0a3fcd1f594989c3dae4d526d3b25 GIT binary patch literal 2080 zcmeAS@N?(olHy`uVBq!ia0y~yV4MKL985qF{<{lj11Zh|kH}&M2EHR8%s5q>Pnv;& z{gS7PV@SoEw|A|JlsyGl9g}*$@Bh@Zk1NXK^ht(0{0wFvIklfg?)~@Y=V#`C5BK-i zF*Gb^;XWatqu{)uf#)ET5&4|Q<*!=f)?dHkEo!^--o_tdvU|3DI(ggTYoX8I-$(oF zEdxxeUKIcIlKIgVj-G{2x6))qyygRh=xZMu(KM&+j2os}q zO&;fT_w?&A(#v%1&p*>Cd=(%4?^xYW{wJL3#6@96?a#eEv)B1X^RKI4|MB&XW5k5Z zRo#bI405wrw%aWG{psz!E9SYM|6PBYe{p%8Gn?{bV&dif74BTUJ!ZBw&-CLfe0P4+ zwfZ5J`;M1CPkJs9=}zLdkljX0>t7G7+0FIuRwq>!gzuSNP%zQz>w4KcoOTb1alz|b zuU_4{_hCV{^nv#C!E+q+`d==SdwHwBY63B_ygK@jy4iBi)8B>c61{$2+j=$Y3)`6& z%ij}Y^Ui8c`y0`ZJM+o2 zJ4HXGqib@aogPSY5|KRj|Nq7K@BJ;?iOuIX|9rlVcZvMJooA2VGx;IrtJ$}re$Ivl z0YbSR82WneKV9RwCsb8%-#qE3($$swzaIJY@8hjx`6t8#z>R4iPUlalPAYy_`eE(A zD~-1gZm&9Zu>LGDNw4_3P~JVC?@#h|?`wQ_DVb9K_VWCyxy|y&5Bk@45fgLkvz2$K zo9Vx={;{3!-h*$~4j#R^HUGqvgX@oPm4EXo`YmxD*ifMlESBD@);xN^_2$-{qR+Q? zylMX4Mob+3@!NahO3aH}8u=e8`QH6D^UeLfZm+An%}E=Jr6q?5m$=C}-W3I9TVCGs zEtp;Z`qqy33$ybdpMPH0&1RX1s~kirA&+He<^No%eY1J#yrY+x}Q<_rqg0 zF!Bi&`4YQ5N>4pIaF*-MtmeOrEvauKFk8=+|pkTpOG9L+3;TbzX@s zDPa29LQJe}YpFK79)0~=TeJRF%VpLT#ZRxi&e4lzC&tT#dEOCwO7j9f-jClmz2Nde zZwB-IitNv)5ffR!@^!uL(P^T`OPcL|#8+n*6qM)Q-~Pvj7`=PC#2+%=KS@NYCK&37 c`uHEy*+3KJhC7Q4fmJ?(r>mdKI;Vst0IJ;^dH?_b literal 0 HcmV?d00001 diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index 1c48fd5..55b9f57 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -72,6 +72,8 @@ import boya from "../../images/Avatar/boya.jpg"; import boyb from "../../images/Avatar/boyb.jpg"; import nomadBook from "../../images/nomadBook.jpg"; +import qrsalon from "../../images/qrsalon.png"; + import wechatGroup from "../../images/wechatGroup.jpg"; import nomad from "../../images/nomad.mp4"; @@ -86,7 +88,19 @@ import "react-lazy-load-image-component/src/effects/blur.css"; const Index = () => { const [current, setcurrent] = useState(0); const [qrOpen, setqrOpen] = useState(false); + const [isWeChat, setisWeChat] = useState(false); + // 是否在微信客户端 + const isWeChatFun = () => { + var ua = navigator.userAgent.toLowerCase(); + if (ua.indexOf("micromessenger") != -1) { + setisWeChat(true); + return true; + } else { + setisWeChat(false); + return false; + } + }; // 自定义组件模版 const custDom = () => { return custDom; @@ -140,24 +154,24 @@ const Index = () => { { 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: "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: "custDom", + // img: shenzhen, + // type: "custom", + // dom: weBook(), + // }, { cityName: "成都", img: chengdu, type: "item", dom: "" }, { cityName: "南京", img: nanjing, type: "item", dom: "" }, { cityName: "西安", img: xian, type: "item", dom: "" }, @@ -298,7 +312,7 @@ const Index = () => {
🌎追踪你的旅行，记录你去过的地方
- 💬加入社群，在旅途中找到你的社区 + 💬加入社群，在旅途中找到你的归属 {!!mobile ? ( { onClick={() => { // setqrOpen(true); // 在手机/微信 - Taro.navigateTo({ + isWeChat ? Taro.navigateTo({ url: "/pages/salon/index", - // url: "/pages/meetup/index", - // url: "pages/meetup/Detail/index", - // url: "/pages/my/index", - - }); + }) : setqrOpen(true) }} >{`加入社群💬`} @@ -342,11 +352,11 @@ const Index = () => { size="small" onClick={() => { // 如果在PC浏览器 - // setqrOpen(true); + setqrOpen(true); // 在手机/微信 - Taro.navigateTo({ - url: "/pages/salon/index", - }); + // Taro.navigateTo({ + // url: "/pages/salon/index", + // }); }} >{`加入社群💬`} @@ -354,7 +364,17 @@ const Index = () => { {/* ) : null} */} + {/* */} + {/* */} + + {/* 右侧固定内容，放前面 */} + 11 + 22 + 33 + + + {/* 数组尽量是4的倍数 */} {/* 随着屏幕变化,改变自定义数组的索引/顺序 */} {cityList.map((item, index) => { @@ -368,39 +388,12 @@ const Index = () => { {/* 序列号 */} {index + 1} - {/* _ */} - {/* 网速 */} - {/* - - 70mps - */} {/* 城市名 */} {item.cityName} - {/* 温度 */} - {/* - - 29度 - */} - {/* 消费 */} - {/* ¥1545/月 */} - {/* 0;opacity: 0.93; */} - {/* */} { ); } })} - + + {/* 112233 */} + {/* */} { {/* ,加入💬微信群 */} - 扫码关注公众号 + 立即报名 diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 8dcaf30..3e5755f 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -124,15 +124,141 @@ } .items { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); + grid-auto-rows: 280px; + gap: 30px; + padding: 20px; + box-sizing: border-box; + // background-color: #f5222d; + .item:hover { + animation: pulse 0.6s ease; + } + .item { + height: 280px; + border-radius: 15px; + position: relative; + color: white; + width: 100%; + box-sizing: border-box; + .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; + } + } + } + + .rightItem { + height: 280px; + border-radius: 15px; + position: relative; + color: white; + overflow: hidden; + width: 100%; + min-width: 260px; // 保证最小宽度不被挤掉 + max-width: 340px; // 最大宽度 + box-sizing: border-box; + background-color: yellow; + } + + /* 保证右侧永远在最后一列 */ + .rightItem:nth-child(1) { + grid-column: -1; + grid-row: 1; + } + + .rightItem:nth-child(2) { + grid-column: -1; + grid-row: 2; + } + .rightItem:nth-child(3) { + grid-column: -1; + grid-row: 3; + } + } + + .items11 { height: 100%; padding: 20px; + // background-color: #ff4d4f; display: flex; flex-direction: row; align-items: center; - // justify-content: space-between; + justify-content: center; flex-wrap: wrap; gap: 30px; /* 设置元素之间的间隔 */ + // padding-left: 10px; /* 确保两侧固定边距 */ // padding-right: 10px; // background-color: aqua; @@ -144,8 +270,11 @@ .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;