feats

src/app.config.js

@@ -15,7 +15,6 @@ export default defineAppConfig({
     'pages/message/list/index',
     'pages/index3/index',
     'pages/index4/index',
-    'pages/index5/index',
     'pages/reporting/index',
     'pages/reporting/detail/index',
     'pages/reset-password/index',
@@ -24,6 +23,8 @@ export default defineAppConfig({
     'pages/check/edit/index',
     'pages/notice/list/index',
     'pages/notice/edit/index',
+    'pages/my/index',
+    'pages/my/edit/index',
   ],
   window: {
     // backgroundColor: '#1A7565',

src/layouts/TabBar.jsx

@@ -54,7 +54,7 @@ const mine = {
   label: '我的',
   icon: mineIcon,
   activeIcon: mineActiveIcon,
-  page: '/pages/index5/index'
+  page: '/pages/my/index'
 }
 
 export default (props) => {

src/pages/index5/index.jsx

@@ -1,24 +0,0 @@
-import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-
-export default class Index extends Component {
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <View className='index'>
-        <Text>Hello world!</Text>
-      </View>
-    )
-  }
-}

src/pages/my/components/Notice.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View, Image } from '@tarojs/components';
+import smallbell from '@/assets/icons/smallbell.png';
+import Taro from '@tarojs/taro';
+import style from './notice.module.less';
+
+export default (props) => {
+
+  const onClick = () => {
+    Taro.navigateTo({
+      url: `/pages/my/edit/index`
+    })
+  }
+
+  return (
+    <View className="wrapper-middle-box" onClick={onClick}>
+      <Image className="wrapper-middle-img" src={smallbell} />
+      <View className="wrapper-middle-text3">消息通知</View>
+    </View>
+  )
+}

src/pages/my/components/notice.module.less

@@ -0,0 +1,15 @@
+.wrapper-middle-box {
+  box-shadow: 0px 18px 22px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 20px;
+}
+.wrapper-middle-img {
+  width: 120px;
+  height: 120px;
+}
+.wrapper-middle-text3 {
+  font-size: 32px;
+  margin-bottom: 34px;
+}

src/pages/my/edit/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '消息通知'
+})

src/pages/my/edit/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Page from '@/layouts/index';
+import { Cell, CellGroup } from '@antmjs/vantui'
+import { View, Image } from '@tarojs/components';
+import bell from '@/assets/icons/bell.png';
+import './index.less';
+
+export default (props) => {
+  return (
+    <Page>
+      <View className="news-card-wrapper">
+        <CellGroup>
+          <Cell
+            title="您的xxxx项目已完成,点击查看详情！"
+            isLink size="large"
+            renderIcon={(<>
+              <Image className="img-wrapper" src={bell} />
+            </>
+            )}
+          />
+        </CellGroup>
+      </View>
+    </Page>
+  )
+}

src/pages/my/edit/index.less

@@ -0,0 +1,11 @@
+.news-card-wrapper {
+  width: calc(100% - var(--main-space) * 2);
+  margin: var(--main-space);
+  box-shadow: 0px 9px 11px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  .img-wrapper {
+    width: 32px;
+    height: 42px;
+    margin-right: 2vw;
+  }
+}

src/pages/my/index.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Page from '@/layouts/index';
+import { View, Image } from '@tarojs/components';
+import headportrait from '@/assets/icons/headportrait.png';
+import peopleicon from '@/assets/icons/peopleicon.png';
+import { Card } from '@antmjs/vantui';
+import Notice from './components/Notice';
+import './index.less';
+
+export default (props) => {
+  return (
+    <Page tabBar="mine">
+      <View className="wrapper-header">
+        <View className="wrapper-header-circle">
+          <View className="wrapper-header-circle2" />
+        </View>
+        <View className="wrapper-header-box">
+          <Image className="wrapper-header-img" src={headportrait} />
+        </View>
+        <View className="wrapper-header-box2">
+          <View className="wrapper-header-text">昵称:Tomorrow</View>
+        </View>
+      </View>
+
+      <View className="wrapper-middle">
+        <View className="wrapper-middle-box">
+          <Image className="wrapper-middle-img" src={peopleicon} />
+          <View className="wrapper-middle-text">所在部门</View>
+          <View className="wrapper-middle-text2">县文明办</View>
+        </View>
+        <Notice />
+      </View>
+    </Page>
+  )
+}

src/pages/my/index.less

@@ -0,0 +1,77 @@
+.wrapper-header {
+  background: var(--main-bg-color);
+  border-radius: 0px 0px 120px 120px;
+  height: 359px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  .wrapper-header-circle {
+    position: relative;
+    opacity: 0.02;
+    border-radius: 50%;
+    background: #ffffff;
+    width: 298px;
+    height: 298px;
+    .wrapper-header-circle2 {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      width: 198px;
+      height: 198px;
+      background: #ffffff;
+      border-radius: 50%;
+    }
+  }
+  .wrapper-header-box {
+    position: relative;
+    .wrapper-header-img {
+      position: absolute;
+      top: -49px;
+      right: 88px;
+      width: 115px;
+      height: 109px;
+      border-radius: 50%;
+    }
+  }
+  .wrapper-header-box2 {
+    position: relative;
+    .wrapper-header-text {
+      position: absolute;
+      width: 249px;
+      right: 17px;
+      top: 79px;
+      font-size: 32px;
+      color: #fff;
+    }
+  }
+}
+
+.wrapper-middle {
+  padding: var(--main-space);
+  display: grid;
+  grid-template-columns: repeat(2, 335px);
+  grid-auto-rows: 335px;
+  grid-gap: var(--main-space);
+  .wrapper-middle-box {
+    box-shadow: 0px 18px 22px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 8px;
+    display: grid;
+    place-items: center;
+    margin-bottom: 20px;
+  }
+  .wrapper-middle-img {
+    width: 120px;
+    height: 120px;
+  }
+  .wrapper-middle-text {
+    font-size: 32px;
+    margin-bottom: -38px;
+  }
+  .wrapper-middle-text2 {
+    font-size: 28px;
+    color: #757575;
+  }
+}