From 9d8b36f300e745a45184829e57d38706865e3190 Mon Sep 17 00:00:00 2001
From: king <2229249788@qq.com>
Date: Mon, 4 Sep 2023 14:46:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9D=97=E7=BA=A7tabs=20&=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E8=AE=B0=E5=BD=95=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../learningRecord/learningRecord.module.scss | 17 ++++++++++++
 .../learningRecord/learningRecord.tsx         |  6 ++---
 .../lineChart/lineChart.module.scss           |  8 ++++++
 src/components/lineChart/lineChart.tsx        |  2 +-
 src/components/tabs/tabs.scss                 | 26 ++++++++++++++++---
 src/components/tabs/tabs.tsx                  |  5 ++--
 .../manage/userInfo/userInfo.module.scss      | 12 ++-------
 7 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 src/components/learningRecord/learningRecord.module.scss

diff --git a/src/components/learningRecord/learningRecord.module.scss b/src/components/learningRecord/learningRecord.module.scss
new file mode 100644
index 0000000..3291bc7
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/learningRecord/learningRecord.tsx b/src/components/learningRecord/learningRecord.tsx
index b951a39..8a096a4 100644
--- a/src/components/learningRecord/learningRecord.tsx
+++ b/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}/>
-    <View className='font-weight font-36 mt-5 mb-3'>
+    <Tabs tabList={tabList} onChange={tabChange} backMode/>
+    <View className={styles.total}>
       总共学习
       <Text style={{margin: '0 10px', color: '#00D6AC'}}>
         {formatTime(lineData.reduce((pre, cur) => pre + cur.value, 0) || 0)}
diff --git a/src/components/lineChart/lineChart.module.scss b/src/components/lineChart/lineChart.module.scss
index a537589..07c565e 100644
--- a/src/components/lineChart/lineChart.module.scss
+++ b/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;
diff --git a/src/components/lineChart/lineChart.tsx b/src/components/lineChart/lineChart.tsx
index d3e2a69..18a92ff 100644
--- a/src/components/lineChart/lineChart.tsx
+++ b/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>
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 19991e0..f442c1b 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,5 +1,21 @@
-View::-webkit-scrollbar {
-  display: none !important;
+.tabsBack {
+  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 {
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 67bb51a..de5c184 100644
--- a/src/components/tabs/tabs.tsx
+++ b/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
diff --git a/src/pages/manage/userInfo/userInfo.module.scss b/src/pages/manage/userInfo/userInfo.module.scss
index 9cbc680..157c3eb 100644
--- a/src/pages/manage/userInfo/userInfo.module.scss
+++ b/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;
 }