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

feat: 首页优化

Browse Source
This commit is contained in:
eric
2023-12-02 16:14:00 +08:00
parent 3d6d6901b8
commit a336c930dc
7 changed files with 202 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.config.js
View File

@@ -1,7 +1,8 @@
export default { export default {
pages: [ pages: [
'pages/index/index', 'pages/index/index',
'pages/my/index' 'pages/my/index',
'pages/meetup/index',
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',

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

@@ -1,6 +1,6 @@
import { Component } from "react"; import { Component } from "react";
import Taro from '@tarojs/taro' import Taro from "@tarojs/taro";
import { View, Text, Image} from "@tarojs/components"; import { View, Text, Image } from "@tarojs/components";
import "./index.scss"; import "./index.scss";
import { AtTabBar } from "taro-ui"; import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
@@ -8,6 +8,7 @@ import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components"; import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui"; import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui"; import { AtImagePicker } from "taro-ui";
import { AtButton } from 'taro-ui'
// export default class Index extends Component { // export default class Index extends Component {
const Index = () => { const Index = () => {
@@ -20,56 +21,65 @@ const Index = () => {
Taro.redirectTo({ Taro.redirectTo({
url: "/pages/my/index", url: "/pages/my/index",
}); });
} else if (value == 0) {
Taro.redirectTo({
url: "/pages/index/index",
});
} else {
Taro.redirectTo({
url: "/pages/meetup/index",
});
} }
// //
}; };
return ( return (
<View className="index"> <View className="index">
{/* <Text>Hello world!</Text> */} {/* <Text>Hello world!</Text> */}
<View className="indexSwiper">
<Swiper {" "}
className="indexSwiper" <Swiper
indicatorColor="#999" indicatorColor="#999"
indicatorActiveColor="#333" indicatorActiveColor="#333"
// vertical // vertical
circular circular
indicatorDots indicatorDots
autoplay autoplay
> >
<SwiperItem> <SwiperItem>
<View className="demo-text"> <View className="demo-text">
{" "} {" "}
<Image <Image
// style="width: 300px;height: 100px;background: #fff;" // style="width: 300px;height: 100px;background: #fff;"
src={ src={
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg" "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
} }
/> />
</View> </View>
</SwiperItem> </SwiperItem>
<SwiperItem> <SwiperItem>
<View className="demo-text"> <View className="demo-text">
{" "} {" "}
<Image <Image
// style="width: 300px;height: 100px;background: #fff;" // style="width: 300px;height: 100px;background: #fff;"
src={ src={
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg" "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
} }
/> />
</View> </View>
</SwiperItem> </SwiperItem>
<SwiperItem> <SwiperItem>
<View className="demo-text"> <View className="demo-text">
{" "} {" "}
<Image <Image
// style="width: 300px;height: 100px;background: #fff;" // style="width: 300px;height: 100px;background: #fff;"
src={ src={
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg" "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
} }
/> />
</View> </View>
</SwiperItem> </SwiperItem>
</Swiper> </Swiper>
</View>
<AtGrid <AtGrid
data={[ data={[
@@ -92,18 +102,28 @@ const Index = () => {
/> />
<AtCard <AtCard
note="星期三 2023-12-06" note=""
extra="" extra=""
title="这是个[副业交流] 沙龙茶话会标题" title="[副业交流] 沙龙茶话会"
thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG" thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
> >
{/* 这也是内容区 可以随意定义功能 */} <View className="meetupCard">
<Image {" "}
style="width: 300px;height: 100px;background: #fff;" <View className="left">
src={ {" "}
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg" <Image
} style="width: 150px;height: 100px;background: #fff;"
/> src={
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
}
/>
</View>
<View className="right">
<View className="up">[副业交流] 沙龙茶话会</View>
<View className="middle">2023/12/06 星期三</View>
<View className="down"><AtButton type='primary' size='small' className="submitBtn">立即报名</AtButton></View>
</View>
</View>
</AtCard> </AtCard>
<View className="indexTablebar"> <View className="indexTablebar">

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

@@ -1,24 +1,54 @@
.index { .index {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// align-items: center; // align-items: center;
justify-content: center; justify-content: center;
.indexSwiper { .indexSwiper {
// margin-top: 20px; // margin-top: 20px;
// padding: 20px; padding: 20px;
.demo-text { .demo-text {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
background-color: yellow;
height: 300px;
width: 100%;
// padding: 20px;
// Image{
// width: 90%;
// }
}
}
.meetupCard {
display: flex;
flex-direction: row;
.right {
// background-color: yellow;
width: 100%;
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
.down {
width: 200px;
// background-color: aqua;
position: relative;
bottom: 10px;
right: -120px;
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column-reverse;
// align-items: center; // justify-content:flex-end
// justify-content: center; // position: relative;
background-color: yellow; .submitBtn {
height: 300px; // width: 200px;
width: 100%; // position: absolute;
// Image{ // right: 0px;
// width: 90%; }
// }
} }
}
} }
.indexTablebar { .indexTablebar {

53
src/pages/meetup/index.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from '@tarojs/taro'
// export default class Index extends Component {
const Meetup = () => {
const [current, setcurrent] = useState(1);
const handleClick = (value) => {
console.log('value',value)
setcurrent(value)
if (value == 2) {
// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
url: "/pages/my/index",
});
}else if(value == 0){
Taro.redirectTo({
url: "/pages/index/index",
});
}else{
Taro.redirectTo({
url: "/pages/meetup/index",
});
}
};
return (
<View className="my">
{/* <Text>Hello world!</Text> */}
meetup
<View className="indexTablebar">
<AtTabBar
tabList={[
{ title: "首页", text: "" },
{ title: "活动" },
{ title: "我的" },
]}
onClick={(value) => handleClick(value)}
current={current}
/>
</View>
</View>
);
};
export default Meetup;

10
src/pages/meetup/index.scss Normal file
View File

@@ -0,0 +1,10 @@
.my{
.indexTablebar {
position: fixed;
bottom: 0;
width: 100%;
}
}

10
src/pages/my/index.jsx
View File

@@ -11,7 +11,7 @@ import Taro from '@tarojs/taro'
// export default class Index extends Component { // export default class Index extends Component {
const Index = () => { const My = () => {
const [current, setcurrent] = useState(2); const [current, setcurrent] = useState(2);
const handleClick = (value) => { const handleClick = (value) => {
console.log('value',value) console.log('value',value)
@@ -25,10 +25,14 @@ const Index = () => {
Taro.redirectTo({ Taro.redirectTo({
url: "/pages/index/index", url: "/pages/index/index",
}); });
}else{
Taro.redirectTo({
url: "/pages/meetup/index",
});
} }
}; };
return ( return (
<View className="index"> <View className="my">
{/* <Text>Hello world!</Text> */} {/* <Text>Hello world!</Text> */}
my my
<View className="indexTablebar"> <View className="indexTablebar">
@@ -46,4 +50,4 @@ const Index = () => {
); );
}; };
export default Index; export default My;

10
src/pages/my/index.scss
View File

@@ -0,0 +1,10 @@
.my{
.indexTablebar {
position: fixed;
bottom: 0;
width: 100%;
}
}