diff --git a/rc-busness/assets/css/integral.less b/rc-busness/assets/css/integral.less
new file mode 100644
index 00000000..6494a1bb
--- /dev/null
+++ b/rc-busness/assets/css/integral.less
@@ -0,0 +1,195 @@
+@media screen and (max-width:768px){
+    .rc-button{
+        width: 100%;
+ height: 80px;
+ background: #FFFFFF;
+box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 12px;
+
+.rc-order{
+width: 164px;
+ height: 48px;
+ border: 2px solid #E2001A;
+ border-radius: 30px;
+ background: #E2001A;
+ text-align: center;
+ align-items: center;
+ line-height: 48px;
+span{
+    font-size: 16px;
+    display: block;
+     color: #FFFFFF;
+
+}
+}
+    }
+.rc-usermain{
+    width: 92%;
+    margin: 0 auto;
+
+    ul{
+        height: 70px;
+        display: block;
+        border-bottom: 1px solid #D8D8D8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 16px;
+        color: #444444;
+        li{
+            float: left;
+            width: 30%;
+          
+
+        }
+        li:after{
+             //   height: 2px;
+             //   border: 1px solid red;
+             //   display: block;
+               content:"|";
+               color: #707070;
+               margin-left: 5px;
+
+        }
+         li:last-child:after{
+                content:"";
+
+        } 
+    }
+
+    ol{
+        li{
+            font-style: normal;
+            display: block;
+            height: 32px;
+            margin-top: 16px;
+            display: flex;
+         //    justify-content: space-between;
+            align-items: center;
+            color: #666666;
+            font-size: 14px;
+            text-align: center;
+            i{
+                font-style: normal;
+                 display: block;
+                width: 40%;
+            }
+            span{
+              font-style: normal;
+                 display: block;
+                width: 36%;
+            }
+            em{
+                font-style: normal;
+                 display: block;
+                width: 23%;
+            }
+         
+
+        }
+    }
+     
+  
+}
+
+}
+
+@media screen and (min-width: 769px)
+{
+
+    .rc-button{
+        width: 100%;
+ height: 80px;
+ background: #FFFFFF;
+box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 12px;
+ display: none;
+
+.rc-order{
+width: 164px;
+ height: 48px;
+ border: 2px solid #E2001A;
+ border-radius: 30px;
+ background: #E2001A;
+ text-align: center;
+ align-items: center;
+ line-height: 48px;
+span{
+    font-size: 16px;
+    display: block;
+     color: #FFFFFF;
+
+}
+}
+    }
+.rc-main{
+    width: 92%;
+    margin: 0 auto;
+    margin-top: 60px;
+
+    ul{
+        height: 64px;
+background: #F6F6F6;
+border: 1px solid #D7D7D7;
+opacity: 1;
+border-radius: 3px 3px 0px 0px;
+        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 16px;
+        color: #444444;
+        li{
+            float: left;
+            width: 42%;
+          
+
+        }
+    
+    }
+
+    ol{
+        li{
+            font-style: normal;
+            display: block;
+            height: 48px;
+            margin-top: 16px;
+            display: flex;
+            border: 1px solid #D7D7D7;
+         //    justify-content: space-between;
+            align-items: center;
+            color: #666666;
+            font-size: 14px;
+            text-align: center;
+            i{
+                font-style: normal;
+                 display: block;
+                width: 34%;
+            }
+            span{
+              font-style: normal;
+                 display: block;
+                width: 34%;
+            }
+            em{
+                font-style: normal;
+                 display: block;
+                width: 34%;
+            }
+         
+
+        }
+    }
+     
+  
+}
+
+}
\ No newline at end of file
diff --git a/rc-busness/pages/personal/integral.vue b/rc-busness/pages/personal/integral.vue
index aa1c3da0..dd1a63ce 100644
--- a/rc-busness/pages/personal/integral.vue
+++ b/rc-busness/pages/personal/integral.vue
@@ -1,8 +1,8 @@
 <template>
 <div>
     <Myheader></Myheader>
-     <div class="rc-header">
-         <div class="rc-main">
+
+         <div class="rc-usermain ">
           <ul>
               <li v-for="(item,index) in userrecord" :key="index">
                      {{item.title}}
@@ -20,7 +20,6 @@
 
          </div> 
 
-     </div>
     <div class="rc-button">
        <div class="rc-order">
            <span>积分兑换</span>
@@ -115,207 +114,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-ul li ol li em strong i {
-  list-style: none;
-  font-style: normal;
-}
-.rc-header {
-  width: 100%;
-}
-//手机端
-@media screen and (max-width: 768px) {
-
-         .rc-button{
-           width: 100%;
-    height: 80px;
-    background: #FFFFFF;
-   box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-
-.rc-order{
-width: 164px;
-    height: 48px;
-    border: 2px solid #E2001A;
-    border-radius: 30px;
-    background: #E2001A;
-    text-align: center;
-    align-items: center;
-    line-height: 48px;
-   span{
-       font-size: 16px;
-       display: block;
-        color: #FFFFFF;
-
-   }
-}
-       }
-   .rc-main{
-       width: 92%;
-       margin: 0 auto;
-
-       ul{
-           height: 70px;
-           display: block;
-           border-bottom: 1px solid #D8D8D8;
-           display: flex;
-           align-items: center;
-           justify-content: center;
-           text-align: center;
-           font-size: 16px;
-           color: #444444;
-           li{
-               float: left;
-               width: 30%;
-             
-
-           }
-           li:after{
-                //   height: 2px;
-                //   border: 1px solid red;
-                //   display: block;
-                  content:"|";
-                  color: #707070;
-                  margin-left: 5px;
-
-           }
-            li:last-child:after{
-                   content:"";
-
-           } 
-       }
-
-       ol{
-           li{
-               font-style: normal;
-               display: block;
-               height: 32px;
-               margin-top: 16px;
-               display: flex;
-            //    justify-content: space-between;
-               align-items: center;
-               color: #666666;
-               font-size: 14px;
-               text-align: center;
-               i{
-                   font-style: normal;
-                    display: block;
-                   width: 40%;
-               }
-               span{
-                 font-style: normal;
-                    display: block;
-                   width: 36%;
-               }
-               em{
-                   font-style: normal;
-                    display: block;
-                   width: 23%;
-               }
-            
-
-           }
-       }
-        
-     
-   }
-}
-//pc端
-@media screen and (min-width: 768px) and (max-width: 1920px) {
-     .rc-button{
-           width: 100%;
-    height: 80px;
-    background: #FFFFFF;
-   box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-    display: none;
-
-.rc-order{
-width: 164px;
-    height: 48px;
-    border: 2px solid #E2001A;
-    border-radius: 30px;
-    background: #E2001A;
-    text-align: center;
-    align-items: center;
-    line-height: 48px;
-   span{
-       font-size: 16px;
-       display: block;
-        color: #FFFFFF;
-
-   }
-}
-       }
-   .rc-main{
-       width: 92%;
-       margin: 0 auto;
-       margin-top: 60px;
-
-       ul{
-           height: 64px;
-background: #F6F6F6;
-border: 1px solid #D7D7D7;
-opacity: 1;
-border-radius: 3px 3px 0px 0px;
-           display: block;
-           display: flex;
-           align-items: center;
-           justify-content: center;
-           text-align: center;
-           font-size: 16px;
-           color: #444444;
-           li{
-               float: left;
-               width: 42%;
-             
-
-           }
-       
-       }
-
-       ol{
-           li{
-               font-style: normal;
-               display: block;
-               height: 48px;
-               margin-top: 16px;
-               display: flex;
-               border: 1px solid #D7D7D7;
-            //    justify-content: space-between;
-               align-items: center;
-               color: #666666;
-               font-size: 14px;
-               text-align: center;
-               i{
-                   font-style: normal;
-                    display: block;
-                   width: 34%;
-               }
-               span{
-                 font-style: normal;
-                    display: block;
-                   width: 34%;
-               }
-               em{
-                   font-style: normal;
-                    display: block;
-                   width: 34%;
-               }
-            
-
-           }
-       }
-        
-     
-   }
-
-}
+@import url("../../assets/css/integral.less");
 
 
 </style>
\ No newline at end of file