This commit is contained in:
eric
2026-02-03 18:40:47 -06:00
parent 0444dc1eaa
commit f2d5745b9b
2 changed files with 109 additions and 34 deletions

View File

@@ -74,7 +74,6 @@ import nomadBook from "../../images/nomadBook.jpg";
import qrsalon from "../../images/qrsalon.png";
import meetupsalon from "../../images/meetupsalon.png";
import wechatGroup from "../../images/wechatGroup.jpg";
import nomad from "../../images/nomad.mp4";
@@ -104,8 +103,8 @@ const Index = () => {
};
useEffect(() => {
isWeChatFun()
}, [])
isWeChatFun();
}, []);
// 自定义组件模版
const custDom = () => {
return <View className="custDom">custDom</View>;
@@ -298,11 +297,6 @@ const Index = () => {
{ image: boyb },
].map((item, index) => {
return (
// <AtAvatar
// className="Avatar"
// circle
// image={item?.image}
// ></AtAvatar>
<Image className="Avatar" mode="heightFix" src={item?.image} />
);
})}
@@ -327,8 +321,8 @@ const Index = () => {
// 在手机/微信
isWeChat
? Taro.navigateTo({
url: "/pages/salon/index",
})
url: "/pages/salon/index",
})
: setqrOpen(true);
}}
>{`加入社群💬`}</AtButton>
@@ -374,8 +368,8 @@ const Index = () => {
<View className="items">
{/* 右侧固定内容,放前面 */}
<View className="rightItem">
<View className="newMembers">
<View className="newMembersUp">新加入成员</View>
<View className="rightItemcontent">
<View className="rightItemtitle">新加入成员</View>
<View className="AvatarView">
{[
{ image: girla },
@@ -392,20 +386,49 @@ const Index = () => {
{ image: girlb },
{ image: cat },
{ image: girl },
{ image: boya }
{ image: boya },
].map((item, index) => {
return (
// <AtAvatar
// className="Avatar"
// circle
// image={item?.image}
// ></AtAvatar>
<Image className="Avatar" mode="heightFix" src={item?.image} />
<Image
className="Avatar"
mode="heightFix"
src={item?.image}
/>
);
})}
</View>
</View>
</View>
<View className="rightItem">
<View className="rightItemcontent">
<View className="rightItemtitle">最新活动</View>
<View className="meetup">
<View className="meetupDate">活动时间: 2026年3月1日</View>
<View className="meetupGps">活动地点: 深圳市</View>{" "}
<View className="meetupNum">活动人数: 8</View>{" "}
{/* <View className="meetupDate">活动时间: 2026年3月1日</View> */}
<View className="meetupAvatarView">
{[
{ image: girla },
{ image: avatar },
{ image: girlb },
{ image: cat },
{ image: girl },
{ image: boya },
{ image: touxiang },
].map((item, index) => {
return (
<Image
className="Avatar"
mode="heightFix"
src={item?.image}
/>
);
})}
</View>
</View>
</View>
</View>
{/* <View className="rightItem">22</View> */}
{/* <View className="rightItem">33</View> */}
@@ -458,7 +481,6 @@ const Index = () => {
// src={qrcode_planet}
// src={qrsalon}
src={meetupsalon}
/>
</View>
</AtModalContent>

View File

@@ -227,48 +227,101 @@
}
}
// css动画
.rightItem:hover {
animation: pulse 0.6s ease;
}
.rightItem {
// padding: 20px;
height: 280px;
// height: 240px;
border-radius: 15px;
position: relative;
color: white;
overflow: hidden;
width: 100%;
min-width: 260px; // 保证最小宽度不被挤掉
// max-width: 340px; // 最大宽度
box-sizing: border-box;
// background-color: yellow;
border: 1px solid black;
.newMembers {
.rightItemcontent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: black;
.newMembersUp {
// background-color: #ff4d4f;
.rightItemtitle {
width: 100%;
height: 40px;
// background-color: #f5222d;
height: 44px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom: 1px solid black;
background: linear-gradient(90deg, #ff4d4f, #ff7a45);
color: #fff;
}
.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: 5px;
margin-bottom: 20px;
border: 2px solid #fff;
border-radius: 50%;
}
}
/* ===== 活动信息区 ===== */
.meetup {
flex: 1;
padding: 20px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
font-size: 14px;
}
.meetupDate,
.meetupGps,
.meetupNum {
display: flex;
align-items: center;
gap: 8px;
// padding: 10px 12px;
border-radius: 10px;
background: #f5f6f7;
color: #333;
font-weight: 500;
}
.meetupDate::before {
content: "🗓";
}
.meetupGps::before {
content: "📍";
}
.meetupNum::before {
content: "👥";
}
.meetupAvatarView {
// padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.Avatar {
width: 34px;
height: 34px;
margin-right: 6px;
margin-bottom: 20px;
border: 2px solid #fff;