块级tabs & 调整学习记录样式

src/components/learningRecord/learningRecord.module.scss

@@ -0,0 +1,17 @@
+.box {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 40rpx 20rpx;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: 1.75;
+}
+
+.total {
+  font-size: 40px;
+  font-family: PingFang SC-Heavy, PingFang SC;
+  font-weight: 800;
+  color: #323635;
+  margin-top: 48rpx;
+}

src/components/learningRecord/learningRecord.tsx

@@ -1,10 +1,10 @@
 import {Text, View} from "@tarojs/components";
-import styles from "@/pages/manage/userInfo/userInfo.module.scss";
 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 {StatisticsParam, userApi} from "@/api";
+import styles from './learningRecord.module.scss'
 
 const tabList: TabList<any>[] = [
   {
@@ -57,8 +57,8 @@ const LearningRecord: FC<Props> = ({userId}) => {
   }, [userId])
 
   return (<View className={`${styles.box}`} style={{display: 'block'}}>
-    <Tabs tabList={tabList} onChange={tabChange}/>
+    <Tabs tabList={tabList} onChange={tabChange} backMode/>
-    <View className='font-weight font-36 mt-5 mb-3'>
+    <View className={styles.total}>
       总共学习
       <Text style={{margin: '0 10px', color: '#00D6AC'}}>
         {formatTime(lineData.reduce((pre, cur) => pre + cur.value, 0) || 0)}

src/components/lineChart/lineChart.module.scss

@@ -21,6 +21,14 @@
   background: rgba(#fff, .9);
 }
 
+.records {
+  font-size: 30rpx;
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #323635;
+  margin-bottom: 42rpx;
+}
+
 .columnBox {
   display: flex;
   flex-direction: column;

src/components/lineChart/lineChart.tsx

@@ -29,7 +29,7 @@ const LineChart: FC<Props> = ({data}) => {
 
   return (
     <>
-      <View style={{marginBottom: '15px'}}>
+      <View className={style.records}>
         <Text>{formatDateTime(new Date(maxHeight.time), 'MM月dd日')}</Text>
         {maxHeight.value > 0 ? `日最努力` : `期间没有学习记录`}，学习了{formatTime(maxHeight.value)}
       </View>

src/components/tabs/tabs.scss

@@ -1,5 +1,21 @@
-View::-webkit-scrollbar {
+.tabsBack {
-  display: none !important;
+  height: 76rpx;
+  background: #F5F8F7;
+  border-radius: 24rpx;
+
+  .tabs-item {
+    padding: 8rpx 20rpx !important;
+  }
+
+  .current {
+    background: #FFF;
+    border-radius: 18rpx;
+    background-clip: content-box;
+
+    &:after {
+      display: none !important;
+    }
+  }
 }
 
 .tabs {
@@ -15,7 +31,7 @@ View::-webkit-scrollbar {
     display: -webkit-flex;
     display: flex;
     text-align: center;
-    align-items: baseline;
+    align-items: center;
   }
 
   .tabs-item {
@@ -24,6 +40,10 @@ View::-webkit-scrollbar {
     font-family: PingFang SC-Medium, PingFang SC;
     font-weight: 500;
     color: #606563;
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: 90rpx;
+    transition: background-color 300ms;
   }
 
   .current {

src/components/tabs/tabs.tsx

@@ -21,9 +21,10 @@ interface TabsProps {
   tabList: TabList[]
   height?: number | string
   onChange?: (data: OnChangOpt) => void
+  backMode?: boolean // 块级模式
 }
 
-const Tabs: FC<TabsProps> = (opt: TabsProps) => {
+const Tabs: FC<TabsProps> = (opt) => {
   const {screenWidth} = Taro.getApp().globalData
   const [current, setCurrent] = useState<number | string>(opt.current || 0)
   const [left, setLeft] = useState(0)
@@ -48,7 +49,7 @@ const Tabs: FC<TabsProps> = (opt: TabsProps) => {
 
 
   return (
-    <View className='tabs' style={{height: opt.height}}>
+    <View className={`tabs ${opt.backMode ? 'tabsBack' : ''}`} style={{height: opt.height}}>
       <ScrollView scrollX scrollLeft={left} scrollWithAnimation showScrollbar={false} style={{height: opt.height}}>
         <View className={'tabs-scroll ' + (opt.tabList.length < 5 ? 'justify-around' : '')}>
           {opt.tabList.map((d, index) => <View

src/pages/manage/userInfo/userInfo.module.scss

@@ -2,15 +2,7 @@
   padding: 15rpx;
 }
 
-.box {
+
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 20rpx;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: 1.75;
-}
 
 .image {
   width: 120rpx;
@@ -45,6 +37,6 @@
   padding: 20rpx 0;
 }
 
-.total{
+.total {
   text-align: center;
 }