diff --git a/src/app.less b/src/app.less
index e69de29..a26a58c 100644
--- a/src/app.less
+++ b/src/app.less
@@ -0,0 +1,3 @@
+::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/pages/ListenType/MainType/index.less b/src/pages/ListenType/MainType/index.less
index 02c679b..d1fe29c 100644
--- a/src/pages/ListenType/MainType/index.less
+++ b/src/pages/ListenType/MainType/index.less
@@ -57,26 +57,33 @@
 
       .typelist {
         height: calc(100vh - 2.5rem);
-        padding: 0 0.7rem 0 1rem;
+        text-align: center;
+        background-color: #fff;
 
         .item {
-          width: 100%;
-          height: 2.5rem;
-          display: flex;
-
-          .line {
-            width: .1875rem;
-            height: .625rem;
-            border-radius: 1.0625rem;
-            background-color: #3ba366;
-            margin: auto .3125rem auto 0;
+          position: relative;
+          font-size: .75rem;
+          line-height: 2.5rem;
+          background-color: #f5f6fa;
+          &.active {
+            background-color: #fff;
+            &::before {
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 0;
+              width: .18rem;
+              height: 1.2rem;
+              background-color: #3ba366;
+              border-radius: 1.0625rem;
+              transform: translateY(-50%);
+            }
           }
-
-          .title {
-            height: 1.0625rem;
-            line-height: 1.0862rem;
-            font-size: .75rem;
-            margin: auto auto auto 0;
+          &.active-prev {
+            border-bottom-right-radius: .6rem;
+          }
+          &.active-next {
+            border-top-right-radius: .6rem;
           }
         }
       }
diff --git a/src/pages/ListenType/MainType/index.tsx b/src/pages/ListenType/MainType/index.tsx
index 400d0fc..90fbe0d 100644
--- a/src/pages/ListenType/MainType/index.tsx
+++ b/src/pages/ListenType/MainType/index.tsx
@@ -225,17 +225,9 @@ export default function MainType() {
                 typeList && chooseType !== -1 && typeList[chooseType] && typeList[chooseType].children.map((item: any, index: number) => (
                   <View
                     key={index}
-                    className='item'
+                    className={`item ${choooseTypeType === index ? 'active' : choooseTypeType === index + 1 ? 'active-prev' : choooseTypeType === index - 1 ? 'active-next' : ''}`}
                     onClick={()=>handleChooseTypeType(index)}
-                  >
-                    {
-                      choooseTypeType === index && <View className='line'></View>
-                    }
-                    <View
-                      className='title'
-                      style={choooseTypeType === index? {color: '#3ba366'} : {}}
-                    >{item.class_name}</View>
-                  </View>
+                  >{item.class_name}</View>
                 ))
               }
           </ScrollView>
diff --git a/src/pages/ListenType/SingleType/index.less b/src/pages/ListenType/SingleType/index.less
index d635aa3..ac14c5e 100644
--- a/src/pages/ListenType/SingleType/index.less
+++ b/src/pages/ListenType/SingleType/index.less
@@ -40,33 +40,40 @@
 
       .typelist {
         height: calc(100vh - 6.5rem - 1rem);
-        padding: 0 0.7rem 0 1rem;
+        text-align: center;
+        background-color: #fff;
 
         .item {
-          width: 100%;
-          height: 2.5rem;
-          display: flex;
-
-          .line {
-            width: .1875rem;
-            height: .625rem;
-            border-radius: 1.0625rem;
-            background-color: #3ba366;
-            margin: auto .3125rem auto 0;
+          position: relative;
+          font-size: .75rem;
+          line-height: 2.5rem;
+          background-color: #f5f6fa;
+          &.active {
+            background-color: #fff;
+            &::before {
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 0;
+              width: .18rem;
+              height: 1.2rem;
+              background-color: #3ba366;
+              border-radius: 1.0625rem;
+              transform: translateY(-50%);
+            }
           }
-
-          .title {
-            height: 1.0625rem;
-            line-height: 1.0862rem;
-            font-size: .75rem;
-            margin: auto auto auto 0;
+          &.active-prev {
+            border-bottom-right-radius: .6rem;
+          }
+          &.active-next {
+            border-top-right-radius: .6rem;
           }
         }
       }
     }
 
     .product_container {
-      width: calc(100vw - 4.5rem);
+      width: calc(100vw - 4.8rem);
       height: 100%;
 
       .product {
diff --git a/src/pages/ListenType/SingleType/index.tsx b/src/pages/ListenType/SingleType/index.tsx
index 2c54806..54cb8f2 100644
--- a/src/pages/ListenType/SingleType/index.tsx
+++ b/src/pages/ListenType/SingleType/index.tsx
@@ -147,7 +147,7 @@ export default function SingleType() {
         }
       })
     }
-    
+
   }, [typeCode])
 
   const handleChooseTypeType = (index: number) => {
@@ -164,48 +164,40 @@ export default function SingleType() {
       url: '/pages/ListenDetail/index?prdtId=' + prdtId
     })
   }
-  
+
   return (
     <View className='singleType_bg'>
       <View className='header'>
-        <View 
+        <View
           className='back'
           onClick={handleBack}
         ></View>
-        <View className='title'>{pageTitle}</View> 
+        <View className='title'>{pageTitle}</View>
       </View>
       <View className='main_context'>
         <View className='type_container'>
-          <ScrollView 
+          <ScrollView
             className='typelist'
             scrollY
-            scrollWithAnimation  
-          > 
+            scrollWithAnimation
+          >
               {
                 typeList.map((item: any, index: number) => (
                   <View
                     key={index}
-                    className='item'
+                    className={`item ${choooseTypeType === index ? 'active' : choooseTypeType === index + 1 ? 'active-prev' : choooseTypeType === index - 1 ? 'active-next' : ''}`}
                     onClick={()=>handleChooseTypeType(index)}
-                  >
-                    {
-                      choooseTypeType === index && <View className='line'></View>
-                    }
-                    <View 
-                      className='title'
-                      style={choooseTypeType === index? {color: '#3ba366'} : {}}  
-                    >{item.class_name}</View>
-                  </View>
+                  >{item.class_name}</View>
                 ))
               }
           </ScrollView>
         </View>
 
         <View className='product_container'>
-          <ScrollView 
+          <ScrollView
             className='product'
             scrollY
-            scrollWithAnimation  
+            scrollWithAnimation
           >
             <View className='container'>
               {
@@ -215,9 +207,9 @@ export default function SingleType() {
                     className='item'
                     onClick={()=>handleDetail(item.PrdtId)}
                   >
-                    <Image 
+                    <Image
                       className='icon'
-                      src={item.PrdtCover}  
+                      src={item.PrdtCover}
                       lazyLoad
                     ></Image>
                     <View className='title'>{item.PrdtTitle}</View>
@@ -227,8 +219,8 @@ export default function SingleType() {
             </View>
           </ScrollView>
         </View>
-        
-       
+
+
       </View>
     </View>
   )