Tony/taro-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FEAT: 结构调整

Browse Source
This commit is contained in:
Tony 2024-03-21 16:02:08 +08:00
parent 0b939dd618
commit f6a72fefc9
12 changed files with 83 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.scss
View File

@ -1,3 +1,8 @@
@import "tailwindcss/base";
@import 'tailwindcss/components';
@import "tailwindcss/utilities";
@font-face {
font-family: 'ArtFont';
src: url(./assets/font/biaoti.ttf);
}

BIN
src/assets/font/biaoti.ttf Normal file
View File

Binary file not shown.

2
src/components/customized/navigation/index.tsx
View File

@ -16,7 +16,7 @@ const HeaderNation = ({ title = '', headerHeight = 0 }) => {
}}>
{ showBack ? <Image src={arrow} className="w-6 h-6"></Image> : null }
</View>
<View className=" from-neutral-100 text-base text-center" style={{ color: 'white' }}>{ title }</View>
<View className="from-neutral-100 text-base text-center" style={{ color: 'white', fontFamily: 'ArtFont' }}>{ title }</View>
<View className="w-8"></View>
</View>
)

2
src/components/customized/pageWrapper/index.tsx
View File

@ -6,7 +6,7 @@ import HeaderNation from "../navigation"
const PageWrapper = ({ children, title = '' }) => {
return (
<View
className="flex flex-col-reverse h-[100vh]"
className="flex flex-col-reverse h-[100vh] bg-slate-50"
style={{
'backgroundImage': `url(${basicBg})`,
'backgroundSize': '100% auto',

14
src/components/customized/tabWrapper/index.scss Normal file
View File

@ -0,0 +1,14 @@
.selected-tab {
position: relative;
top: -.2rem;
}
.selected-tab::after {
content: '';
position: absolute;
height: .2rem;
width: 1.2rem;
border-radius: .1rem;
background-color: #e5e5e5;
left: calc(50% - .6rem);
bottom: -.1rem;
}

28
src/components/customized/tabWrapper/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { View } from "@tarojs/components"
import './index.scss'
/**
* options 为菜单列表 selected为选中值 callback为函数回调
* @param param0
* @returns
*/
const TabWrapper = ({ options, selectedId = '', callback }) => {
return (
<View className="h-[2.4rem] flex px-2 py-1 overflow-auto items-center text-sm">
{
options.map((item:any) => {
return (
<View
className={`px-3 py-1 ${selectedId === item.id ? 'selected-tab' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => callback(item.id)}
>{ item.title }</View>
)
})
}
</View>
)
}
export default TabWrapper;

4
src/pages/index/index.tsx
View File

@ -69,10 +69,10 @@ const Index = () => {
return (
<View
className="h-[100vh] flex flex-col-reverse relative"
className="h-[100vh] flex flex-col-reverse relative bg-slate-50"
style={{ 'backgroundImage': `url(${basicBg})`, 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }}
>
<View className="flex justify-evenly align-top relative z-100" style={{ height: globalData.navigatorHeight + 'px' }}>
<View className="flex justify-evenly align-top relative z-100 bg-white" style={{ height: globalData.navigatorHeight + 'px' }}>
{
bottomMenuList.map(item => {
return (

18
src/pages/iot/index.tsx
View File

@ -5,6 +5,7 @@ import offlineIcon from '../../assets/images/icons/offline.png'
import errorIcon from '../../assets/images/icons/error.png'
import img from '../../assets/images/img.png'
import Taro from "@tarojs/taro"
import TabWrapper from "../../components/customized/tabWrapper"
const Iot = () => {
const [selectedMenuId, setSelectedMenuId] = useState('all')
@ -111,22 +112,9 @@ const Iot = () => {
},
]
return (
<View className="p-1 h-full">
<View className="px-1 h-full">
<View className="h-full flex flex-col justify-start">
<View className="h-[2.4rem] flex px-2 py-1">
{
topMenus.map(item => {
return (
<View
className={`p-1 px-3 ${selectedMenuId === item.id ? 'border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setSelectedMenuId(item.id)}
>{ item.title }</View>
)
})
}
</View>
<TabWrapper options={topMenus} selectedId={selectedMenuId} callback={setSelectedMenuId}></TabWrapper>
<View className="flex flex-col space-y-3 p-2 rounded-sm" style={{ overflow: 'auto', height: 'calc(100% - 2.4rem)' }}>
{
dataList.map(item => {

6
src/pages/msgCenter/index.scss
View File

@ -7,12 +7,6 @@
margin-top: 25px;
border-radius: 15px;
justify-content: space-between;
box-shadow:
0 10px 6px -6px #ccc, /* bottom shadow */
0 -10px 6px -6px #ccc, /* top shadow */
10px 0 6px -6px #ccc, /* right shadow */
-10px 0 6px -6px #ccc; /* left shadow */
;
.right{
width: 80%;
height: 100%;

4
src/pages/msgCenter/index.tsx
View File

@ -70,7 +70,7 @@ const MsgCenter = () => {
});
return (
<View>
<View className='flex px-2 py-1 border-b-2 border-slate-100' style={{position:'relative'}}>
<View className='flex px-2 py-1' style={{ position:'relative' }}>
{
topMenus.map(item => {
return (
@ -90,7 +90,7 @@ const MsgCenter = () => {
{
contList.map((item,index)=>{
return (
<View className='cont' key={index} onClick={() => { Taro.navigateTo({ url: '/pages/msgDetail/index' }) }}>
<View className='rounded-md shadow-xl cont' key={index} onClick={() => { Taro.navigateTo({ url: '/pages/msgDetail/index' }) }}>
<Image src={item.id=='1'|| item.id=='2'?rang:warn} className='w-11 h-11' style={{marginTop:'-10px'}}></Image>
<View className='right'>
<View className='right-top'>

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

@ -1,14 +1,6 @@
.detail{
width: 90%;
margin: auto;
width: 100%;
padding: 35px;
border-radius: 20px;
box-shadow:
0 10px 6px -6px #ccc, /* bottom shadow */
0 -10px 6px -6px #ccc, /* top shadow */
10px 0 6px -6px #ccc, /* right shadow */
-10px 0 6px -6px #ccc; /* left shadow */
;
}
.detailTop{
display: flex;

12
src/pages/msgDetail/index.tsx
View File

@ -3,14 +3,13 @@ import rang from './assets/rang.png'
import yxImg from './assets/yxImg.png'
import image from './assets/image.png'
import "./index.scss"
import HeaderNation from "../../components/customized/navigation"
import basicBg from '../../assets/images/bg.png'
import PageWrapper from "../../components/customized/pageWrapper"
const MsgDetail = () => {
return (
<View style={{ 'backgroundImage': `url(${basicBg})`, 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }}>
<HeaderNation title='消息中心' />
<View className='detail' style={{backgroundColor:'#fff'}}>
<PageWrapper title="消息详情">
<View className="h-full flex flex-col px-3 py-3">
<View className='detail rounded-md shadow-xl' style={{backgroundColor:'#fff'}}>
<View className='detailTop'>
<Image src={rang} className='w-12 h-12'></Image>
<View style={{marginLeft:'20px',fontWeight:700}}>土壤EC值预警</View>
@ -24,7 +23,7 @@ const MsgDetail = () => {
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>建议： 打开灭蚊灯</View>
</View>
</View>
<View className='detail' style={{marginTop:'15px',backgroundColor:'#fff'}}>
<View className='detail rounded-md shadow-xl' style={{marginTop:'15px',backgroundColor:'#fff'}}>
<View className='detailFootTop' style={{marginBottom:'15px'}}>
<Image src={yxImg} className='w-12 h-12'></Image>
<View style={{marginLeft:'20px',fontWeight:700}}>影像</View>
@ -34,6 +33,7 @@ const MsgDetail = () => {
</View>
</View>
</View>
</PageWrapper>
)
}