diff --git a/src/images/qrsalon.png b/src/images/qrsalon.png
new file mode 100644
index 0000000..df8069d
Binary files /dev/null and b/src/images/qrsalon.png differ
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;