From 389827ac79463bb32d05c12d42f6d09687088529 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Wed, 6 Sep 2023 14:17:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.scss | 17 +- .../learningRecord/learningRecord.tsx | 8 +- .../lineChart/lineChart.module.scss | 2 +- src/components/lineChart/lineChart.tsx | 7 +- .../navigationBar/navigationBar.module.scss | 6 +- src/pages/home/components/feature.tsx | 20 +- src/pages/index/index.tsx | 9 +- src/pages/my/components/header/header.tsx | 26 ++- src/pages/my/components/header/time.tsx | 8 +- src/pages/my/my.module.scss | 59 +++++- src/pages/my/my.tsx | 175 ++++++++++-------- src/store/profile.ts | 3 +- 12 files changed, 217 insertions(+), 123 deletions(-) diff --git a/src/app.scss b/src/app.scss index 886bc0d..76057d2 100644 --- a/src/app.scss +++ b/src/app.scss @@ -60,7 +60,6 @@ .h-9 {height: 90vh} .h-10 {height: 100vh} - .m-0 {margin: 0} .m-auto{margin: auto} .m-1 {margin: 10rpx} @@ -353,4 +352,20 @@ -webkit-line-clamp:3; } +.hr-solid, +.hr-dashed { + box-sizing: border-box; + height: 1px; + transform: scaleY(1); + border-bottom-color: #000; + border-bottom-width: 1px; + transform-origin: bottom center; + opacity: 0.05; +} +.hr-solid { + border-bottom-style: solid; +} +.hr-dashed { + border-bottom-style: dashed; +} diff --git a/src/components/learningRecord/learningRecord.tsx b/src/components/learningRecord/learningRecord.tsx index 4313472..dea1629 100644 --- a/src/components/learningRecord/learningRecord.tsx +++ b/src/components/learningRecord/learningRecord.tsx @@ -2,7 +2,7 @@ import {Text, View} from "@tarojs/components"; import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs"; import {everyDay, formatTime, getMonday, getSunday, monthEnd, monthFirst} from "@/utils/time"; import LineChart from "@/components/lineChart/lineChart"; -import {FC, useEffect, useState} from "react"; +import {CSSProperties, FC, useEffect, useState} from "react"; import {StatisticsParam, userApi} from "@/api"; import styles from './learningRecord.module.scss' import Spin from "@/components/spinner"; @@ -33,13 +33,15 @@ const tabList: TabList[] = [ interface Props { userId?: string | number + style?: CSSProperties + className?: string } /** * 学习记录折线图 */ -const LearningRecord: FC = ({userId}) => { +const LearningRecord: FC = ({userId, style, className}) => { const [lineData, setLineData] = useState([]) const [loading, setLoading] = useState(false) const {token} = Profile.useContainer() @@ -69,7 +71,7 @@ const LearningRecord: FC = ({userId}) => { userId && getStatistics(tabList[0].value) }, [userId]) - return ( + return ( diff --git a/src/components/lineChart/lineChart.module.scss b/src/components/lineChart/lineChart.module.scss index 4520b9a..be146bc 100644 --- a/src/components/lineChart/lineChart.module.scss +++ b/src/components/lineChart/lineChart.module.scss @@ -26,7 +26,7 @@ font-family: PingFang SC-Medium, PingFang SC; font-weight: 500; color: #323635; - margin-top: 18rpx; + margin-top: 10rpx; margin-bottom: 42rpx; } diff --git a/src/components/lineChart/lineChart.tsx b/src/components/lineChart/lineChart.tsx index 9bbf694..7f0cc3f 100644 --- a/src/components/lineChart/lineChart.tsx +++ b/src/components/lineChart/lineChart.tsx @@ -37,11 +37,14 @@ const LineChart: FC = ({data}) => { {!maxHeight.value && 暂无学习记录} { - !!maxHeight.value && lineChartList.map(d => + !!maxHeight.value + && lineChartList.map(d => - {d.value > 0 && {formatTime(d.value, 0)}} + { + d.value > 0 && {formatTime(d.value, 0)} + } {d.time} diff --git a/src/components/navigationBar/navigationBar.module.scss b/src/components/navigationBar/navigationBar.module.scss index 4e9041b..dd4ece0 100644 --- a/src/components/navigationBar/navigationBar.module.scss +++ b/src/components/navigationBar/navigationBar.module.scss @@ -4,7 +4,7 @@ left: 0; width: 100%; padding-left: 20rpx; - z-index: 10; + z-index: 100; overflow: hidden; background: #fff; } @@ -12,7 +12,7 @@ .leftNode { position: absolute; display: flex; - left: 0; + left: 20rpx; bottom: 0; align-items: center; z-index: 1; @@ -20,7 +20,7 @@ .text { position: absolute; - left: 0; + left: 20rpx; right: 0; margin: auto; display: flex; diff --git a/src/pages/home/components/feature.tsx b/src/pages/home/components/feature.tsx index 92e1f46..9f09acb 100644 --- a/src/pages/home/components/feature.tsx +++ b/src/pages/home/components/feature.tsx @@ -7,18 +7,18 @@ import article from '@/static/img/article.png' import styles from '../home.module.scss' import Taro from "@tarojs/taro"; -const Feature: FC = () => { - const list = [ - {url: '/pages/preview/brand/list/list', image: article, text: '品牌'}, - {url: '/pages/preview/health/health', image: health, text: '健康管理'}, - {url: '/pages/preview/profession/profession', image: profession, text: '专业技能'}, - {url: '/pages/preview/illness/sort/sort', image: illness, text: '病症百科'}, - ] +const list = [ + {url: '/pages/preview/brand/list/list', image: article, text: '企业品牌'}, + {url: '/pages/preview/health/health', image: health, text: '健康常识'}, + {url: '/pages/preview/profession/profession', image: profession, text: '专业技能'}, + {url: '/pages/preview/illness/sort/sort', image: illness, text: '病症百科'}, +] - function jump(url) { - Taro.navigateTo({url}) - } +function jump(url) { + Taro.navigateTo({url}) +} +const Feature: FC = () => { return ( { diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index f5000dc..ce10e38 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -6,11 +6,12 @@ import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs"; import {CoursesKey} from "@/api/public"; import NavigationBar from "@/components/navigationBar/navigationBar"; +const category: TabList[] = [ + {title: "企选课程", value: 'is_required'}, + {title: "平台课程", value: 'is_not_required'}, +] + const Index: FC = () => { - const category: TabList[] = [ - {title: "必修", value: 'is_required'}, - {title: "选修", value: 'is_not_required'}, - ] const [categoryKey, setCategoryKey] = useState('is_required') function tabChange(data: OnChangOpt) { diff --git a/src/pages/my/components/header/header.tsx b/src/pages/my/components/header/header.tsx index 3432e85..a06e480 100644 --- a/src/pages/my/components/header/header.tsx +++ b/src/pages/my/components/header/header.tsx @@ -3,7 +3,7 @@ import {Image, Text, View} from "@tarojs/components"; import styles from "@/pages/my/my.module.scss"; import avatar from "@/static/img/avatar.png" import blacktriang from "@/static/img/blacktriangle.png" -import {FC} from "react"; +import {FC, useMemo} from "react"; import Img from "@/components/image/image"; interface Props { @@ -13,23 +13,21 @@ interface Props { const Header: FC = ({companyList, showCompany}) => { const {token, user, company, empty} = Profile.useContainer() + const login = () => empty() + + const showChoose = useMemo(() => (token?.length ?? 0) > 0 && companyList.length >2, [token, companyList]) return ( - - { - token ? - {user?.name} - - {company?.name} - {companyList.length > 2 && } - - - : - empty()}>请登录 - - } + + + {token ? user?.name ?? '匿名' : '请登录'} + + {token ? company?.name : '登录解锁更多功能哦'} + {showChoose && } + + ) diff --git a/src/pages/my/components/header/time.tsx b/src/pages/my/components/header/time.tsx index f6bae09..a1e6944 100644 --- a/src/pages/my/components/header/time.tsx +++ b/src/pages/my/components/header/time.tsx @@ -6,8 +6,8 @@ import {FC, useState} from "react"; import {formatMinute} from "@/utils/time"; import time1 from "@/static/img/time1.png"; import time2 from "@/static/img/time2.png"; -import over from '@/static/img/over.png' -import incomplete from '@/static/img/incomplete.png' +// import over from '@/static/img/over.png' +// import incomplete from '@/static/img/incomplete.png' import {Profile} from "@/store"; interface List { @@ -24,8 +24,8 @@ const Time: FC = () => { {title: '累计时长', time: '00:00', src: time2}, // {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: over, type: 3}, + // {title: '未完成(必修)', time: '0', src: incomplete, type: 4}, ]) diff --git a/src/pages/my/my.module.scss b/src/pages/my/my.module.scss index cb6a7ad..c2b7e90 100644 --- a/src/pages/my/my.module.scss +++ b/src/pages/my/my.module.scss @@ -10,10 +10,21 @@ page { align-items: center; } -.page { +.navbar { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.bg { + z-index: 1; + position: absolute; + overflow: hidden; + top: 0; + left: 0; + right: 0; + height: 460rpx; background: linear-gradient(180deg, #45D4A8 0%, rgba(69, 212, 168, 0) 100%) no-repeat; background-size: 100% 458rpx; - width: 100%; &:before { content: ''; @@ -27,14 +38,50 @@ page { opacity: 0.2; border-radius: 230rpx; } + + &:after { + content: ''; + display: block; + position: absolute; + top: 0rpx; + right: -100rpx; + width: 290rpx; + height: 290rpx; + background: #FFFF; + opacity: 0.2; + border-radius: 290rpx; + } } +/*.page { + background: linear-gradient(180deg, #45D4A8 0%, rgba(69, 212, 168, 0) 100%) no-repeat; + background-size: 100% 458rpx; + width: 100%; + overflow: hidden; + + &:before { + content: ''; + display: block; + position: absolute; + top: -80rpx; + left: -80rpx; + width: 230rpx; + height: 230rpx; + background: #FFFF; + opacity: 0.2; + border-radius: 230rpx; + } +}*/ + .content { + z-index: 8; + position: relative; box-sizing: border-box; - padding: 0 30rpx; + padding: 0 30rpx 24rpx; width: 100%; + //overflow: hidden; - &:after { + /* &:after { content: ''; display: block; position: absolute; @@ -45,7 +92,7 @@ page { background: #FFFF; opacity: 0.2; border-radius: 290rpx; - } + }*/ } @@ -109,7 +156,7 @@ page { background: #fff; border-radius: 20rpx; padding: 30rpx; - margin-top: 30rpx; + //margin-top: 30rpx; } .box { diff --git a/src/pages/my/my.tsx b/src/pages/my/my.tsx index 2c00ac0..8cfe342 100644 --- a/src/pages/my/my.tsx +++ b/src/pages/my/my.tsx @@ -1,4 +1,4 @@ -import {PageContainer, View, Image, ScrollView, Text} from "@tarojs/components"; +import {PageContainer, View, Image, Text} from "@tarojs/components"; import Taro from "@tarojs/taro"; import styles from './my.module.scss' import Header from "./components/header/header"; @@ -22,6 +22,15 @@ interface List { type?: number } +function jump(token: string | null, type?: number) { + if (!token) { + Taro.navigateTo({url: '/pages/login/login'}) + return; + } + if (!type) return; + Taro.navigateTo({url: "/pages/business/courType/courType?type=" + type}) +} + const My: FC = () => { const globalData = Taro.getApp().globalData const {token, company, setCompany, user} = Profile.useContainer() @@ -29,8 +38,6 @@ const My: FC = () => { 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 => { @@ -38,19 +45,18 @@ const My: FC = () => { }) }) - function onScroll(e) { - const v = (Math.min(e.detail.scrollTop / navbarHeight, 1) * 0.9).toFixed(6) + Taro.usePageScroll((e) => { + const v = (Math.min(e.scrollTop / navbarHeight, 1) * 0.9).toFixed(6) if (v != navbarOpacity) { setNavbarOpacity(v) } - } + }) const [list, setList] = useState([ {title: '已完成', time: '0', src: over, type: 3}, {title: '未完成', time: '0', src: incomplete, type: 4}, ]) - Taro.useDidShow(async () => { try { const res = await curriculum.course() @@ -62,83 +68,106 @@ const My: FC = () => { } }) - return ( - + - { + cancelBack + leftNode={ .5 ? "0%" : '-300%'})`}}> - - {user?.name} + style={{transform: `translate(0,${Number(navbarOpacity) > .5 ? "0%" : '-350%'})`}}> + + {token ? user?.name : '请登录'} } - + /> - - - -
companyList.length >= 2 && setCompanyShow(true)}/> - -