From dfe30478eae6b23c3adb89b4a8af31adc24bcac5 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Mon, 4 Sep 2023 18:05:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84header=20?= =?UTF-8?q?=E5=92=8C=20=E5=AD=A6=E4=B9=A0=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learningRecord/learningRecord.module.scss | 2 +- .../learningRecord/learningRecord.tsx | 5 +- .../navigationBar/navigationBar.module.scss | 3 +- .../navigationBar/navigationBar.tsx | 14 +- src/pages/home/components/search.tsx | 12 +- src/pages/home/home.module.scss | 8 +- src/pages/home/home.tsx | 12 +- src/pages/my/components/header/header.tsx | 2 +- src/pages/my/components/header/time.tsx | 20 +-- src/pages/my/my.module.scss | 66 ++++--- src/pages/my/my.tsx | 169 ++++++++++++------ src/static/img/search.png | Bin 0 -> 1230 bytes 12 files changed, 197 insertions(+), 116 deletions(-) create mode 100644 src/static/img/search.png diff --git a/src/components/learningRecord/learningRecord.module.scss b/src/components/learningRecord/learningRecord.module.scss index 3291bc7..d08d305 100644 --- a/src/components/learningRecord/learningRecord.module.scss +++ b/src/components/learningRecord/learningRecord.module.scss @@ -1,7 +1,7 @@ .box { background: #fff; border-radius: 20rpx; - padding: 40rpx 20rpx; + padding: 40rpx; display: flex; align-items: center; box-sizing: border-box; diff --git a/src/components/learningRecord/learningRecord.tsx b/src/components/learningRecord/learningRecord.tsx index 8a096a4..9cf5042 100644 --- a/src/components/learningRecord/learningRecord.tsx +++ b/src/components/learningRecord/learningRecord.tsx @@ -32,12 +32,14 @@ interface Props { userId: string | number } + /** * 学习记录折线图 */ const LearningRecord: FC = ({userId}) => { const [lineData, setLineData] = useState([]) + async function getStatistics(data: StatisticsParam) { try { const res = await userApi.statistics(userId, data) @@ -56,7 +58,8 @@ const LearningRecord: FC = ({userId}) => { userId && getStatistics(tabList[0].value) }, [userId]) - return ( + return ( + 学习记录 总共学习 diff --git a/src/components/navigationBar/navigationBar.module.scss b/src/components/navigationBar/navigationBar.module.scss index 0279392..4e9041b 100644 --- a/src/components/navigationBar/navigationBar.module.scss +++ b/src/components/navigationBar/navigationBar.module.scss @@ -2,7 +2,7 @@ position: sticky; top: 0; left: 0; - width: 730rpx; + width: 100%; padding-left: 20rpx; z-index: 10; overflow: hidden; @@ -26,6 +26,7 @@ display: flex; justify-content: center; align-items: center; + font-size: 28rpx; } .arrow { diff --git a/src/components/navigationBar/navigationBar.tsx b/src/components/navigationBar/navigationBar.tsx index b77d49f..433803c 100644 --- a/src/components/navigationBar/navigationBar.tsx +++ b/src/components/navigationBar/navigationBar.tsx @@ -40,12 +40,14 @@ const NavigationBar: FC = (props) => { return ( - {!props.cancelBack && Taro.navigateBack()}> - - } + { + !props.cancelBack && Taro.navigateBack()}> + + + } {props.leftNode} {props.children || props.text} diff --git a/src/pages/home/components/search.tsx b/src/pages/home/components/search.tsx index a75e30c..2f6071f 100644 --- a/src/pages/home/components/search.tsx +++ b/src/pages/home/components/search.tsx @@ -1,18 +1,20 @@ import {FC} from "react"; -import {View} from "@tarojs/components"; +import {Image, View} from "@tarojs/components"; import styles from "../home.module.scss"; -import Icon from "@/components/icon"; import Taro from "@tarojs/taro"; +import search from "@/static/img/search.png" export const Search: FC = () => { - function jump(){ - Taro.navigateTo({url:'/pages/preview/search/search/index'}) + function jump() { + Taro.navigateTo({url: '/pages/preview/search/search/index'}) } + return ( - + + {/**/} 点击搜索 ) diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss index ccfc67f..7dcda1f 100644 --- a/src/pages/home/home.module.scss +++ b/src/pages/home/home.module.scss @@ -51,7 +51,7 @@ } .content { - padding: 0 20px; + padding: 0 30rpx; box-sizing: border-box; &:after { @@ -78,7 +78,11 @@ justify-content: center; height: 68rpx; margin-bottom: 40rpx; + font-size: 28rpx; + font-family: PingFang SC-Medium, PingFang SC; + font-weight: 500; color: #909795; + line-height: 1; } .adware { @@ -97,7 +101,7 @@ font-family: PingFang SC-Bold, PingFang SC; font-weight: bold; color: #323635; - margin-top: 10px; + margin-top: 20px; } diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index d946f34..9c42b65 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -20,7 +20,7 @@ const Home: FC = () => { const [data, setData] = useState(null) const [enable, setEnable] = useState(true) const [navbarOpacity, setNavbarOpacity] = useState('0') - const navbarHeight = globalData.statusBarHeight + globalData.textBarHeight; + const navbarHeight = globalData.statusBarHeight + globalData.textBarHeight; function unLogin() { Taro.clearStorage() @@ -48,16 +48,16 @@ const Home: FC = () => { - - 医学道 + + 医学道 } - cancelBack > - + diff --git a/src/pages/my/components/header/header.tsx b/src/pages/my/components/header/header.tsx index 369433e..f000052 100644 --- a/src/pages/my/components/header/header.tsx +++ b/src/pages/my/components/header/header.tsx @@ -18,7 +18,7 @@ const Header: FC = ({companyList, showCompany}) => { { - token ? + token ? {user?.name} {company?.name} diff --git a/src/pages/my/components/header/time.tsx b/src/pages/my/components/header/time.tsx index f2fe81a..f6bae09 100644 --- a/src/pages/my/components/header/time.tsx +++ b/src/pages/my/components/header/time.tsx @@ -1,7 +1,5 @@ import {Image, View} from "@tarojs/components"; import styles from '../../my.module.scss' -import curriculum1 from '@/static/img/curriculum1.png' -import curriculum2 from '@/static/img/curriculum2.png' import Taro from "@tarojs/taro"; import {curriculum} from "@/api"; import {FC, useState} from "react"; @@ -24,10 +22,10 @@ const Time: FC = () => { const [list, setList] = useState([ {title: '今日时长', time: '00:00', src: time1}, {title: '累计时长', time: '00:00', src: time2}, - {title: '必修课', time: '0', src: curriculum1, type: 1}, - {title: '选修课', time: '0', src: curriculum2, type: 2}, + // {title: '必修课', time: '0', src: curriculum1, type: 1}, + // {title: '选修课', time: '0', src: curriculum2, type: 2}, {title: '已完成', time: '0', src: over, type: 3}, - {title: '未完成', time: '0', src: incomplete, type: 4}, + {title: '未完成(必修)', time: '0', src: incomplete, type: 4}, ]) @@ -37,10 +35,10 @@ const Time: FC = () => { const oldList: List[] = JSON.parse(JSON.stringify(list)) oldList[0].time = formatMinute(res.today_learn_time) oldList[1].time = formatMinute(res.total_learn_time) - oldList[2].time = res.required_count - oldList[3].time = res.not_required_count - oldList[4].time = res.finished_count - oldList[5].time = res.not_finished_count + // oldList[2].time = res.required_count + // oldList[3].time = res.not_required_count + oldList[2].time = res.finished_count + oldList[3].time = res.not_finished_count setList(oldList) } catch (e) { } @@ -57,7 +55,7 @@ const Time: FC = () => { return ( - + { list.map(d => { return ( @@ -65,7 +63,7 @@ const Time: FC = () => { {d.title} - {token && {d.time}} + {token && {d.time}} diff --git a/src/pages/my/my.module.scss b/src/pages/my/my.module.scss index ae5c8cc..e37d523 100644 --- a/src/pages/my/my.module.scss +++ b/src/pages/my/my.module.scss @@ -4,68 +4,80 @@ page { overflow-x: hidden; } -.content { +.page { background: linear-gradient(180deg, #45D4A8 0%, rgba(69, 212, 168, 0) 100%) no-repeat; background-size: 100% 458rpx; - position: relative; - padding: 0 10rpx; - width: 750rpx; - box-sizing: border-box; - overflow: hidden; + width: 100%; - &:after { + &:before { content: ''; display: block; position: absolute; - top: 106rpx; - right: -100rpx; - width: 290rpx; - height: 290rpx; + top: -80rpx; + left: -80rpx; + width: 230rpx; + height: 230rpx; background: #FFFF; opacity: 0.2; - border-radius: 290rpx; + border-radius: 230rpx; } +} - &:before { +.content { + box-sizing: border-box; + padding: 0 30rpx; + width: 100%; + + &:after { content: ''; display: block; position: absolute; - top: -80rpx; - left: -80rpx; - width: 230rpx; - height: 230rpx; + top: 0rpx; + right: -100rpx; + width: 290rpx; + height: 290rpx; background: #FFFF; opacity: 0.2; - border-radius: 230rpx; + border-radius: 290rpx; } } + .header { - padding: 130px 10rpx 0; font-size: 10rpx; .avatar { width: 100px; height: 100px; margin-right: 30px; - margin-top: -10px; } } .timeBox { width: 50%; - height: 124rpx; - margin-bottom: 15rpx; - padding: 12rpx 10rpx; + margin-bottom: 22rpx; box-sizing: border-box; + height: 136rpx; + + &:nth-child(n) { + padding-right: 11rpx; + } + + &:nth-child(2n) { + padding-left: 11rpx; + } } .timeBoxFlex { - padding: 20px; + padding: 28px 30rpx; + box-sizing: border-box; border-radius: 20px; display: flex; justify-content: space-between; background: #fff; + height: 100%; + + } .timeImag { @@ -75,10 +87,10 @@ page { } .service { - margin-top: 44rpx; + margin-top: 48rpx; display: grid; grid-template-columns:1fr 1fr 1fr 1fr; - grid-auto-rows: 80px 80px 80px 80px; + grid-auto-rows: 100px 100px 100px 100px; grid-gap: 60px; font-size: 28px; text-align: center; @@ -92,7 +104,7 @@ page { .tool { background: #fff; border-radius: 20rpx; - padding: 30rpx 20px 46rpx; + padding: 30rpx; margin-top: 30rpx; } diff --git a/src/pages/my/my.tsx b/src/pages/my/my.tsx index 90c72eb..116bd53 100644 --- a/src/pages/my/my.tsx +++ b/src/pages/my/my.tsx @@ -1,4 +1,4 @@ -import {PageContainer, View, Image} from "@tarojs/components"; +import {PageContainer, View, Image, ScrollView, Text} from "@tarojs/components"; import Taro from "@tarojs/taro"; import styles from './my.module.scss' import Header from "./components/header/header"; @@ -8,79 +8,138 @@ import Service from "@/pages/my/components/header/service"; import {Profile} from "@/store"; import Img from "@/components/image/image"; import GreenNike from "@/static/img/greenNike.png" -import {userApi} from "@/api"; +import {curriculum, userApi} from "@/api"; import LearningRecord from "@/components/learningRecord/learningRecord"; +import NavigationBar from "@/components/navigationBar/navigationBar"; +import over from "@/static/img/over.png"; +import incomplete from "@/static/img/incomplete.png"; +import avatar from "@/static/img/avatar.png"; + +interface List { + title: string + time: string | number + src: string, + type?: number +} const My: FC = () => { const globalData = Taro.getApp().globalData const {token, company, setCompany, user} = Profile.useContainer() const [companyShow, setCompanyShow] = useState(false) const [companyList, setCompanyList] = useState([]) + const [navbarOpacity, setNavbarOpacity] = useState('0') + const navbarHeight = globalData.statusBarHeight + globalData.textBarHeight; + const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight + + Taro.useDidShow(() => { token && userApi.companyList().then(res => { setCompanyList(res as Company[]) }) }) - return ( - + function onScroll(e) { + const v = (Math.min(e.detail.scrollTop / navbarHeight, 1) * 0.9).toFixed(6) + if (v != navbarOpacity) { + setNavbarOpacity(v) + } + } -
companyList.length >= 2 && setCompanyShow(true)}/> -