修改ScrollView样式和隐藏滚动条

config/index.js

@@ -20,7 +20,7 @@ const config = {
   framework: 'react',
   compiler: 'webpack5',
   cache: {
-    enable: true // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
   },
   sass: {},
   alias: {

src/components/lineChart/lineChart.module.scss

@@ -3,8 +3,18 @@
   align-items: flex-end;
   justify-content: left;
   flex-wrap: nowrap;
-  height: 400px;
+  height: 380px;
   position: relative;
+  padding-bottom: 10rpx;
+}
+
+.overlay {
+  width: 100%;
+  height: 10rpx;
+  background: #fff;
+  position: absolute;
+  bottom: 0;
+  left: 0
 }
 
 .empty {
@@ -19,7 +29,7 @@
   align-items: center;
   background: rgba(#fff, .9);
 
-  view{
+  view {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -54,6 +64,22 @@
   overflow: hidden;
   animation: rise 300ms ease-in-out forwards;
   max-height: 0;
+  margin-top: 10rpx;
+}
+
+.value {
+  whiteSpace: nowrap;
+  font-size: 20rpx;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #606563;
+}
+
+.time {
+  font-size: 20rpx;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #323635;
 }
 
 .line {

src/components/lineChart/lineChart.tsx

@@ -29,12 +29,12 @@ const LineChart: FC<Props> = ({data}) => {
   }, [data])
 
   return (
-    <>
+    <View style={{width: '100%', position: 'relative'}}>
       <View className={style.records}>
         <Text>{formatDateTime(new Date(maxHeight.time), 'MM月dd日')}</Text>
         {maxHeight.value > 0 ? `日最努力` : `期间没有学习记录`}，学习了{formatTime(maxHeight.value, 0)}
       </View>
-      <ScrollView scrollX={!!maxHeight.value} enhanced showScrollbar={false}>
+      <ScrollView scrollX={!!maxHeight.value} enhanced showScrollbar={false} type='list'>
         <View className={style.lineChart}>
           {
             !maxHeight.value && <View className={style.empty}>
@@ -45,19 +45,20 @@ const LineChart: FC<Props> = ({data}) => {
           {
             !!maxHeight.value
             && lineChartList.map(d => <View key={d.time}>
-              <View className={style.columnBox} style={{width: "100px"}}>
+              <View className={style.columnBox} style={{width: "80px"}}>
                 <View className={style.line} style={{height: height - 10 - (d.value / maxHeight.value * height) + "px"}}/>
                 {
-                  d.value > 0 && <View style={{whiteSpace: "nowrap"}}>{formatTime(d.value, 0)}</View>
+                  d.value > 0 && <View className={style.value}>{formatTime(d.value, 0)}</View>
                 }
                 <View className={style.column} style={{height: d.value / maxHeight.value * height + "px"}}/>
-                <View>{d.time}</View>
+                <View className={style.time}>{d.time}</View>
               </View>
             </View>)
           }
         </View>
       </ScrollView>
-    </>
+      <View className={style.overlay}/>
+    </View>
   )
 }
 

src/pages/manage/depAdmin/depAdmin.scss

@@ -3,7 +3,7 @@
   background: white;
   min-height: calc(100vh - 20rpx - env(safe-area-inset-bottom));
   box-sizing: border-box;
-  padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
 }
 
 .operation {
@@ -16,7 +16,7 @@
   left: 0;
 
   .safeAreaInsetBottom {
-    height: 80rpx;
+    height: 100rpx;
     align-items: center;
     justify-content: space-around;
     padding-bottom: env(safe-area-inset-bottom);

src/pages/manage/userInfo/components/info.tsx

@@ -14,16 +14,15 @@ const Info: FC<Props> = ({data}) => {
     <>
       <View className={styles.box} style={{height: '184rpx'}}>
         <Img width={120} height={120} src={data?.avatar || ''} className={styles.image} errorType='avatar'/>
-        <View className='ml-2'>
-          <View>
+        <View className='ml-3'>
+          <View className='flex align-center'>
             <Text className='font-weight font-32'>{data?.name}</Text>
-            <Text
+            <View
               className={data?.is_lock ? styles.tag_muted : styles.tag}>
               {data?.is_lock ? '禁用' : '正常'}
-            </Text>
+            </View>
           </View>
-          <View className='text-muted font-28'
-                style={{marginTop: '2px'}}>
+          <View className='text-muted font-28 mt-2'>
             {['学员', '管理员', '超级管理员'][data?.role_type || 0]}
           </View>
         </View>
@@ -31,11 +30,11 @@ const Info: FC<Props> = ({data}) => {
 
       <View className={`${styles.box}`} style={{display: 'block', margin: '16rpx 0', padding: '0 32rpx'}}>
         <View className={styles.information} style={{borderBottom: "1px solid #F5F8F7"}}>
-          <Text style={{width: '100px', display: 'inline-block'}}>学员编号</Text>
+          <Text style={{width: '100px', display: 'inline-block', color: '#323635'}}>学员编号</Text>
           <Text>{data?.id}号</Text>
         </View>
         <View className={styles.information}>
-          <Text style={{width: '100px', display: 'inline-block'}}>手机号</Text>
+          <Text style={{width: '100px', display: 'inline-block', color: '#323635'}}>手机号</Text>
           <Text>{data?.phone_number}</Text>
         </View>
       </View>

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

@@ -10,6 +10,8 @@
   align-items: center;
   box-sizing: border-box;
   line-height: 1.75;
+  color: #606563;
+  font-family: PingFang SC-Regular, PingFang SC;
 }
 
 .image {
@@ -25,10 +27,14 @@
   font-family: PingFang SC-Regular, PingFang SC;
   font-weight: 400;
   color: #FFFFFF;
-  margin-left: 20rpx;
-  padding: 3rpx 10rpx;
+  margin-left: 16rpx;
   border-radius: 8rpx;
   box-sizing: border-box;
+  height: 32rpx;
+  width: 60rpx;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .tag_muted {
@@ -37,17 +43,20 @@
   font-family: PingFang SC-Regular, PingFang SC;
   font-weight: 400;
   color: #FFFFFF;
-  margin-left: 20rpx;
-  padding: 3rpx 10rpx;
+  margin-left: 16rpx;
   border-radius: 8rpx;
   box-sizing: border-box;
+  height: 32rpx;
+  width: 60rpx;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .information {
   height: 96rpx;
   box-sizing: border-box;
   width: 100%;
-  color: #606563;
   padding: 20rpx 0;
 }