eric/gitlab-instance-0a899031_yidooplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 调整css布局/央视

Browse Source
This commit is contained in:
hackrobot
2024-03-19 17:38:39 +08:00
parent 8ed540c39b
commit f75a861cc1
2 changed files with 150 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/pages/index/index.jsx
View File

@@ -44,16 +44,55 @@ export default function Index() {
// }); // });
}, []); }, []);
const CustomTest = () => {
return <View>自定义组件</View>;
};
const HomeCardItem = () => { const HomeCardItem = () => {
return [ return [
{ cityName: "北京", imagePath: beijing }, {
{ cityName: "上海", imagePath: shanghai }, cityName: "北京",
{ cityName: "广州", imagePath: guangzhou }, imagePath: beijing,
{ cityName: "深圳", imagePath: shenzhen }, isCustom: false,
{ cityName: "深圳", imagePath: shenzhen }, customCom: "test",
{ cityName: "深圳", imagePath: shenzhen }, },
{ cityName: "深圳", imagePath: shenzhen }, // 双数插入
{
cityName: "上海",
imagePath: shanghai,
isCustom: true,
customCom: <CustomTest />,
},
{
cityName: "上海",
imagePath: shanghai,
isCustom: false,
customCom: "test",
},
{
cityName: "上海",
imagePath: shanghai,
isCustom: true,
customCom: <CustomTest />,
},
{
cityName: "广州",
imagePath: guangzhou,
isCustom: false,
customCom: "test",
},
{
cityName: "上海",
imagePath: shanghai,
isCustom: true,
customCom: <CustomTest />,
},
{
cityName: "深圳",
imagePath: shenzhen,
isCustom: false,
customCom: "test",
},
].map((item, index) => { ].map((item, index) => {
return ( return (
// 设置自动换行 // 设置自动换行
@@ -61,19 +100,23 @@ export default function Index() {
style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }} style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }}
className="homeCardItem" className="homeCardItem"
> >
<View className="homeCard"> {!item.isCustom ? (
{/* 城市封面图片 */} <View className="homeCard">
<Image {/* 城市封面图片 */}
style={{ <Image
width: "100%", style={{
height: "100%", width: "100%",
background: " #fff", height: "100%",
borderRadius: "10px", background: " #fff",
}} borderRadius: "10px",
mode="scaleToFill" }}
src={item.imagePath} mode="scaleToFill"
/> src={item.imagePath}
</View> />
</View>
) : (
item.customCom
)}
</View> </View>
); );
}); });
@@ -93,47 +136,48 @@ export default function Index() {
return ( return (
<View className="index"> <View className="index">
{/* 顶部 */} <View className="indexHome">
<View className="indexHeader"> {/* 顶部 */}
{/* 头像 */} <View className="indexHeader">
<AtAvatar circle image={touxiang}></AtAvatar> {/* 头像 */}
{/* color="#F00" */} <AtAvatar circle image={touxiang}></AtAvatar>
<AtIcon value="chevron-down" size="30"></AtIcon> {/* color="#F00" */}
<AtButton <AtIcon value="chevron-down" size="30"></AtIcon>
type="primary" <AtButton
onClick={() => { type="primary"
Taro.request({ onClick={() => {
url: " http://172.19.0.1:8082/test", //仅为示例，并非真实的接口地址 Taro.request({
method: "POST", url: " http://172.19.0.1:8082/test", //仅为示例，并非真实的接口地址
data: { method: "POST",
openid: "111", data: {
wxid: "22", openid: "111",
}, wxid: "22",
header: { },
"content-type": "application/json", // 默认值 header: {
}, "content-type": "application/json", // 默认值
success: function (res) { },
console.log(res.data); success: function (res) {
}, console.log(res.data);
}); },
}} });
> }}
发起请求 >
</AtButton> 发起请求
</AtButton>
</View>
{/* 省份标签 */}
<View className="provinceTag">
<ProvinceTag />
</View>
{/* 城市列表 */}
<View className="homeCards">
<HomeCardItem />
</View>
<View className="tabbbarDiv"></View>
</View> </View>
{/* 省份标签 */}
<View className="provinceTag">
<ProvinceTag />
</View>
{/* 城市列表 */}
<View className="homeCards">
<HomeCardItem />
</View>
<View className="tabbbarDiv"></View>
{/* 底部tabbar */} {/* 底部tabbar */}
<View className="tabbbar"> <View className="tabbbar">
<AtTabBar <AtTabBar

91
src/pages/index/index.scss
View File

@@ -1,57 +1,56 @@
.index { .index {
padding-left: 20px; .indexHome {
padding-right: 20px; padding-left: 20px;
background-color: aquamarine; padding-right: 20px;
background-color: aquamarine;
.indexHeader { .indexHeader {
margin-top: 10px;
display: flex;
flex-direction: row;
// justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.provinceTag {
display: flex;
flex-direction: row;
// justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.homeCards {
display: flex;
// flex-direction: column;
flex-direction: row;
flex-wrap: wrap;
.homeCardItem {
margin-top: 10px; margin-top: 10px;
width: 340px;
height: 250px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: aqua;
// justify-content: space-between; // justify-content: space-between;
// align-items: center; align-items: center;
.homeCard { margin-bottom: 10px;
width: 100%;
height: 100%;
background-color: yellow;
border-radius: 20px;
// margin-left:20px;
}
}
.homeCardDiv{
width: 30px;
height: 100%;
background-color: blue;
} }
.provinceTag {
display: flex;
flex-direction: row;
// justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.homeCards {
display: flex;
// flex-direction: column;
flex-direction: row;
flex-wrap: wrap;
.homeCardItem {
margin-top: 10px;
width: 340px;
height: 250px;
display: flex;
flex-direction: row;
background-color: aqua;
// justify-content: space-between;
// align-items: center;
.homeCard {
width: 100%;
height: 100%;
background-color: yellow;
border-radius: 20px;
// margin-left:20px;
}
}
.homeCardDiv {
width: 30px;
height: 100%;
// background-color: blue;
}
}
} }
.tabbbarDiv { .tabbbarDiv {
width: 100%; width: 100%;
height: 140px; height: 140px;