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

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

@@ -1,57 +1,56 @@
.index {
padding-left: 20px;
padding-right: 20px;
background-color: aquamarine;
.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 {
.indexHome {
padding-left: 20px;
padding-right: 20px;
background-color: aquamarine;
.indexHeader {
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;
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;
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 {
width: 100%;
height: 140px;