diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less
index 7802d729..60f35e44 100644
--- a/rc-busness/assets/css/global.less
+++ b/rc-busness/assets/css/global.less
@@ -91,7 +91,7 @@ img, picture {
 	border: 2px solid #E2001A;
 	border-radius: 1.875rem;
 	display: block;
-	line-height: 2.5rem;
+	line-height: 2.25rem;
 	font-size: .875rem;
 	color: #fff;
 	cursor: pointer;
@@ -106,6 +106,9 @@ img, picture {
 		color: #e2001a;
 		border-color: #e2001a;
 	}
+	&.ts-standard-btn--max-width{
+		width:100%;
+	}
 }
 
 
@@ -202,33 +205,49 @@ img, picture {
 	}
 	span{
 		font-size: 0.12rem;
-		color: #666666;
 	}
 	.tuntop{
-		width: 1.25rem;
-		height: auto;
-		background: #FFFFFF;
+		width: 100%;
+		height:4.125rem;
 		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
-		opacity: 1;
-		display: block;
-		color: #666666;
-		font-size: 12px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		img{
-			width: 0.22rem;
-			height: 0.22rem;
-			display: block;
-		}
 	}
 }
+
+.ts-max-width--460{
+	max-width: 460px;
+	margin-left: auto!important;
+	margin-right: auto!important;
+}
+
+.ts-standard-input{
+	background: #F6F6F6;
+	width: 100%;
+	height: 3rem;
+	border-radius: 4px;
+	padding:.875rem 0 .875rem 1rem;
+	&::-webkit-input-placeholder {
+		text-align: left;
+	}
+	&.ts-standard-input--two{
+		
+	}
+}
+.ts-right-arr {
+	font-style: normal;
+	line-height: 22px;
+	color: #E2001A;
+	font-weight:bold;
+}
+
 /* 手机端 */
 @media screen and (max-width: 768px) 
 {
 	html {
-		font-size:100px;
+		//font-size:100px;
 	}
 	.rc-md-up {
 	    display: none!important;
@@ -244,6 +263,10 @@ img, picture {
 	    padding: .5rem 0;
 	    border-bottom: none;
 	}
+	.ts-right-arr {
+		border-bottom:1px solid #E1001A;
+		padding-bottom:2px;
+	}
 	.rc-home-header{
 		width: 100%;
 		.rc-main
@@ -334,6 +357,23 @@ img, picture {
 			width:20rem;
 		}
 	}
+	.ts-right-arr {
+		cursor: pointer;
+		border-bottom : unset;
+		padding-right:1rem;
+		position:relative;
+		&:after{
+			content: " ";
+			width: .5rem;
+			height: 1rem;
+			background: url(../image/arr-right-red.png) no-repeat left top;
+			background-size: contain;
+			display: block;
+			position:absolute;
+			right:0;
+			top:.25rem;
+		}
+	}
 	.rc-main {
 		width:100%;
 		max-width:1400px;
diff --git a/rc-busness/assets/css/login.less b/rc-busness/assets/css/login.less
index f785969b..8ba135c4 100644
--- a/rc-busness/assets/css/login.less
+++ b/rc-busness/assets/css/login.less
@@ -1,5 +1,32 @@
+.container{
+	min-height:80vh;
+	height:100%;
+	background-color:#f6f6f6;
+}
+.ts-max-width--460{
+	border-radius: 3px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
+	background-color: #fff;
+	box-sizing: border-box;
+	padding:5rem 2.8rem;
+}
+.usecheck label{
+	display:flex;
+	input{
+		margin-right:.687rem;
+	}
+}
 // 手机端
-@media screen and(min-width: 320px) and(max-width:768px) {
+@media screen and (max-width:768px) {
+	.ts-max-width--460{
+		padding:4.375rem 1.25rem;
+	}
+	.rc-column *{
+		font-size:.875rem;
+	}
+	.rc-two-column>.rc-column {
+		width: 50%;
+	}
 .van-field-one{
    width: 335px;
 	background: #F6F6F6;
@@ -55,23 +82,6 @@
       font-size: 18px;
       color: #999999;
     }
-    .rc-use {
-      width: 155px;
-      height: 48px;
-      opacity: 1;
-      border-radius: 30px;
-      outline: none;
-      border: none;
-      border: 2px solid #e1001a;
-      color: #e1001a;
-      font-size: 14px;
-    }
-    .rc-user {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: 40px;
-    }
     .userbutton {
       width: 335px;
       height: 48px;
@@ -93,12 +103,6 @@
       border: none;
       outline: none;
     }
-    button {
-      outline: none;
-      border: none;
-      list-style: none;
-      background: none;
-    }
     .rc-center {
       font-size: 30px;
       color: #333333;
@@ -189,23 +193,6 @@ margin-top: 24px;
       font-size: 0.1rem;
       color: #999999;
     }
-    .rc-use {
-      width: 1.55rem;
-      height: 0.48rem;
-      opacity: 1;
-      border-radius: 0.15rem;
-      border: 2px solid #e1001a;
-      color: #e1001a;
-      font-size: 0.14rem;
-      background: white;
-
-    }
-    .rc-user {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: 40px;
-    }
     .userbutton {
       width: 3.8rem;
       height: 0.48rem;
@@ -227,12 +214,6 @@ margin-top: 24px;
       border: none;
       outline: none;
     }
-    button {
-      outline: none;
-      border: none;
-      list-style: none;
-      background: none;
-    }
     .rc-center {
       font-size: 30px;
       color: #333333;
@@ -247,24 +228,13 @@ margin-top: 24px;
       margin: 0 auto;
     }
     .rc-button {
-      font-size: 14px;
-       width:395px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 auto;
-      color: #333333;
-    }
-    .rc-button span {
-      border-bottom: 1px solid #333333;
-    }
-    .rc-button span {
-      margin-left: 20px;
-      margin-top: 24px;
-    }
-    .rc-button span:last-child {
-      margin-right: 20px;
-      display: block;
+		.rc-styled-link{
+			padding-bottom:3px;
+			border-bottom:1px solid #333;
+			&:hover{
+				border-bottom:1px solid #e2001a;
+			}
+		}
     }
   }
 }
\ No newline at end of file
diff --git a/rc-busness/assets/css/mypersonal.less b/rc-busness/assets/css/mypersonal.less
new file mode 100644
index 00000000..d96f6826
--- /dev/null
+++ b/rc-busness/assets/css/mypersonal.less
@@ -0,0 +1,473 @@
+ul li ol li em strong i {
+  list-style: none;
+  font-style: normal;
+}
+.rc-header {
+  width: 100%;
+}
+.rc-center{
+	overflow:hidden;
+}
+//手机端
+@media screen and (max-width: 768px) {
+	.ts-mypersonal{
+		font-size:14px;
+	}
+	.online{
+		margin:1rem auto;
+	}
+	.rc-column{
+		padding-left:0;
+		padding-right:0;
+	}
+	.rc-max-width--xl{
+		padding:0 1.25rem;
+		&.ts-special-padding{
+			padding:0;
+			.rc-login,.usercord,.rc-cordd,.rc-order,.rc-buy,.rc-obligation{
+				padding-left:1.25rem;
+				padding-right:1.25rem;
+			}
+		}
+	}
+
+/deep/.el-dialog {
+ width: 352px;
+ height: 500px;
+}
+
+.rc-max-width--lg{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    img{
+      width: 210px;
+      height: 210px;
+      display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    }
+  }
+}
+  .rc-column {
+       .rc-usermain{
+        h2{
+        display: none;
+        }
+        
+      }
+    .rc-center {
+      width: 100%;
+      height: 180px;
+      img {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+   
+    }
+
+    .rc-login {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.08);
+		margin-top: -2rem;
+	    position: relative;
+	    background: #fff;
+		padding-top:1.5rem;
+		.rc-unlogin{
+			display: flex;
+			align-items: center;
+		}
+      .rc-userlogin{
+            margin-left: 16px;
+     
+      span{
+    font-size: 18px;
+   color: #333333;
+   display: block;
+      }
+      em{
+        font-size: 14px;
+        color:#666666;
+        font-style: normal;
+        display: block;
+        margin-top: 8px;
+      }
+ 
+       }
+      .rc-people {
+        width: 4rem;
+        height: 4rem;
+        display: flex;
+        align-items: center;
+        border: 2px solid #d7d7d7;
+        border-radius: 50%;
+        img {
+          width: 36px;
+          height: 36px;
+          display: block;
+          margin: 0 auto;
+        }
+      }
+    }
+    .usercord{
+        display: flex;
+        justify-content: space-between;
+         height: 32px;
+         align-items: center;
+         border-bottom: 1px solid #D8D8D8;
+         padding-bottom: 17px;
+        em{
+            font-style: normal;
+        }
+    }
+ .rc-cordd{
+   color:#666666;
+     span{
+        display: inline-block;
+        margin-top: 16px;
+        text-align: left;
+     }
+     .block{
+		height: 8px;
+		background: #D7D7D7;
+		margin-top: 16px;
+		border-radius: 4px;
+		.r-block{
+		width: 0%;
+		height: 100%;
+		background: #008900;
+	 }
+   
+  
+     }
+      .rc-value{
+        display: flex;
+        justify-content: space-between;
+   }
+ }
+    .rc-order{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 16px;
+        border-bottom: 1px solid #D8D8D8;
+        padding-bottom: 16px;
+        em{
+            font-style: normal;
+            font-size: 14px;
+              font-weight: bold;
+            color: #333333;
+        }
+    }
+
+    .rc-obligation{
+      margin-top: 16px;
+        ul{
+        display: flex;
+		width:100%;
+        justify-content: space-between;
+            li{
+                float: left;
+
+            }
+            img{
+                width: 44px;
+                height: 44px;
+                display: block;
+            }
+        }
+    }
+    .rc-buy{
+        width: 100%;
+        height: 64px;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #D8D8D8;
+        padding:1rem 0;
+		&:first-child{
+			padding-top:0;
+		}
+		&:last-child{
+			border:0;
+		}
+        .rc-cord{
+            display: flex;
+            align-items: center;
+        }
+        img{
+            width: 32px;
+            height: 32px;
+            display: block;
+        }
+        em{
+            font-style: normal;
+            font-size: 14px;
+            color: #333333;
+            margin-left: 16px;
+
+        }
+        .rc-load{
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+             color: #666666;
+             span{
+                  display: block;
+                  margin-right: 8px;
+                  margin-top: -4px;
+             }
+             img{
+               width: 8px;
+               height: 16px;
+               display: block;
+             }
+        }
+    }
+  }
+}
+//pc端
+
+@media screen and (min-width: 769px) {
+  /deep/.el-dialog {
+ width: 440px;
+ height: 652px;
+}
+.online{
+	margin:40px auto;
+}
+.ts-right-arr{
+	font-size:1.125rem;
+}
+.rc-max-width--lg{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    img{
+      width: 210px;
+      height: 210px;
+      display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    }
+  }
+}
+    .rc-column {
+    .rc-center {
+      width: 100%;
+      height: 180px;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      display: none;
+    }
+
+    .rc-login {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top:24px;
+  .rc-unlogin{
+    display: flex;
+    align-items: center;
+  }
+      .rc-userlogin{
+        margin-left: 16px;
+      span{
+		font-size: 20px;
+		color: #333333;
+		display: block;
+      }
+      em{
+        font-size: 14px;
+        color:#666666;
+        font-style: normal;
+        display: block;
+        margin-top: 8px;
+      }
+ 
+       }
+      .rc-people {
+        width: 64px;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        border: 2px solid #d7d7d7;
+        border-radius: 50%;
+        img {
+          width: 48px;
+          height: 48px;
+          display: block;
+          margin: 0 auto;
+        }
+      }
+    }
+    .usercord{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom:32px;
+        border-bottom: 1px solid #D7D7D7;
+        em{
+            font-style: normal;
+            color: #333333;
+            font-size: 18px;
+
+        }
+    }
+ .rc-cordd{
+	color:#333333;
+	font-size: 18px;
+	//height: 133px;
+	margin-top: 32px;
+	span{
+		font-size: 18px;
+		text-align: left;
+		&.lackOfPoint{
+			font-weight: 400;
+			color:#333;
+		}
+	}
+     .block{
+          height: 8px;
+   background: #D7D7D7;
+   margin-top: 16px;
+   border-radius: 4px;
+   .r-block{
+     width: 0%;
+     height: 100%;
+     background: #008900;
+   }
+   
+  
+     }
+      .rc-value{
+        display: flex;
+		margin-top:11px;
+		font-size:14px;
+		color:#666;
+        justify-content: space-between;
+		span{
+			font-size: 14px;
+		}
+   }
+
+ }
+    .rc-order{
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #D8D8D8;
+        padding-bottom: 28px;
+        margin-top: 20px;
+		align-items: center;
+        em{
+            font-style: normal;
+            font-size: 26px;
+            color: #333333;
+        }
+    }
+
+    .rc-obligation{
+      margin-top: 16px;
+        ul{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+            li{
+                float: left;
+
+            }
+            img{
+                width: 96px;
+                height: 96px;
+                display: block;
+            }
+        }
+        span{
+          font-size: 18px;
+		  color:#333;
+        }
+    }
+    .rc-usermain{
+    h2{
+		color: #333333;
+		font-size: 26px;
+		font-weight: normal;
+		display: block;
+		padding-bottom: 28px;
+		border-bottom: 1px solid #D8D8D8;
+		text-align: left;
+	  }
+    }
+    .rc-buymain{
+      display: flex;
+      justify-content: space-between;
+	  flex-direction: row;
+      margin: 0 auto;
+    }
+    .rc-buy{     
+        img{
+            width: 96px;
+            height: 96px;
+            display: block;
+        }
+        em{
+            font-style: normal;
+            font-size: 18px;
+            color: #333333;
+        }
+        .rc-load{
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+             color: #666666;
+             span{
+                  display: block;
+                  margin-right: 8px;
+                  margin-top: -4px;
+             }
+             img{
+               width: 8px;
+               height: 16px;
+               display: block;
+             }
+             display: none;
+        }
+    }
+  }
+}
\ No newline at end of file
diff --git a/rc-busness/assets/css/producted.less b/rc-busness/assets/css/producted.less
index 22eec9e5..26d06bdf 100644
--- a/rc-busness/assets/css/producted.less
+++ b/rc-busness/assets/css/producted.less
@@ -41,12 +41,6 @@
 	  span {
 	    color: #666666;
 	  }
-	  em {
-	    font-style: normal;
-	    line-height: 22px;
-	    color: #E2001A;
-		border-bottom:1px solid rgba(226, 0, 26, 0.15);
-	  }
 	}
 	.rc-produnnum {
 	  display: flex;
@@ -96,7 +90,7 @@
           bottom: 0;
           background-color: white;
 		  box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
-		  
+		  z-index:2;
           span{
             width: 9.68rem;
 			height: 3rem;
@@ -527,25 +521,6 @@
 	  .ts-ecprice{
 		  
 	  }
-      .rc-productdetai {
-		em {          
-			cursor: pointer;
-			border-bottom : unset;
-			padding-right:1rem;
-			position:relative;
-			&:after{
-				content: " ";
-				width: .5rem;
-				height: 1rem;
-				background: url(/_nuxt/assets/image/arr-right-red.png) no-repeat left top;
-				background-size: contain;
-				display: block;
-				position:absolute;
-				right:0;
-				top:.25rem;
-			}
-		}
-	  }
 
       .rc-productdeta {
         margin-top: 16px;
diff --git a/rc-busness/assets/css/royalcanin-custom.css b/rc-busness/assets/css/royalcanin-custom.css
index a37212f3..9e7a6054 100644
--- a/rc-busness/assets/css/royalcanin-custom.css
+++ b/rc-busness/assets/css/royalcanin-custom.css
@@ -162,6 +162,15 @@ header .ts-not-header {
 .ts-wechat--xs .ts-hover-show img{margin:0 auto;}
 .ts-wechat--xs:hover .ts-hover-show{display:block;color:#666;-webkit-animation: fadeIn .3s ease forwards;animation: fadeIn .3s ease forwards;}
 
+.rc-icon.ts-login--xs:after{
+	width: 24px;
+	background-image:unset;
+	mask:url(../image/ico-login.svg) no-repeat center center;
+	-webkit-mask:url(../image/ico-login.svg) no-repeat center center;
+	background-color:#666;
+}
+.rc-icon.ts-login--xs:hover:after{background-color:#e2001a;}
+
 footer .rc-list .rc-list__header {
   font-weight:bold;
 }
diff --git a/rc-busness/assets/image/ico-login.svg b/rc-busness/assets/image/ico-login.svg
new file mode 100644
index 00000000..1fba8bf8
--- /dev/null
+++ b/rc-busness/assets/image/ico-login.svg
@@ -0,0 +1,20 @@
+<svg id="Icons_User_16" data-name="Icons/User/16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <clipPath id="clip-path">
+      <path id="User" d="M15,16H1a1,1,0,0,1-1-1,6.583,6.583,0,0,1,1.244-3.9A7.311,7.311,0,0,1,4.565,8.615,4.949,4.949,0,0,1,3,5,5,5,0,1,1,13,5a4.947,4.947,0,0,1-1.564,3.614A7.312,7.312,0,0,1,14.756,11.1,6.583,6.583,0,0,1,16,15,1,1,0,0,1,15,16ZM8,10c-3.011,0-5.38,1.608-5.9,4H13.9C13.4,11.571,11.083,10,8,10ZM8,2a3,3,0,1,0,3,3A3,3,0,0,0,8,2Z" fill="#767676"/>
+    </clipPath>
+    <clipPath id="clip-path-2">
+      <rect id="Rectangle_Copy_3" data-name="Rectangle Copy 3" width="16" height="16" fill="#767676"/>
+    </clipPath>
+  </defs>
+  <g id="组_248" data-name="组 248">
+    <path id="User-2" data-name="User" d="M15,16H1a1,1,0,0,1-1-1,6.583,6.583,0,0,1,1.244-3.9A7.311,7.311,0,0,1,4.565,8.615,4.949,4.949,0,0,1,3,5,5,5,0,1,1,13,5a4.947,4.947,0,0,1-1.564,3.614A7.312,7.312,0,0,1,14.756,11.1,6.583,6.583,0,0,1,16,15,1,1,0,0,1,15,16ZM8,10c-3.011,0-5.38,1.608-5.9,4H13.9C13.4,11.571,11.083,10,8,10ZM8,2a3,3,0,1,0,3,3A3,3,0,0,0,8,2Z" fill="#767676"/>
+    <g id="蒙版组_251" data-name="蒙版组 251" clip-path="url(#clip-path)">
+      <g id="Visual_Styles_Colour_Iconography" data-name="Visual Styles/Colour/Iconography" transform="translate(0 0)">
+        <g id="组_286" data-name="组 286">
+          <rect id="Rectangle_Copy_3-2" data-name="Rectangle Copy 3" width="16" height="16" fill="#767676"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/rc-busness/components/header.vue b/rc-busness/components/header.vue
index b362dc1e..e43ae230 100644
--- a/rc-busness/components/header.vue
+++ b/rc-busness/components/header.vue
@@ -14,7 +14,7 @@
 	      </button>
 	      </li>
 	    </ul>
-	    <a href="#" class="rc-header__brand">
+	    <a href="/" class="rc-header__brand">
 	      <h1>
 	        <span class="rc-screen-reader-text">translations.feature.headerbar.alternatelogotext</span>
 	        <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 223 83.75" class="rc-header__logo">
@@ -40,6 +40,13 @@
 					<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/royalcanincn-qrcode.jpg">
 				</div>
 			</a>
+			
+			<a href="userlogin/login" class="rc-md-up rc-btn rc-btn--icon rc-icon ts-login--xs rc-iconography rc-interactive" aria-label="login">
+				<span class="rc-screen-reader-text">
+					登录
+				</span>
+			</a>
+			
 			<!--
 	        <button href="#" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='地理位置选择' class="rc-btn rc-btn--icon rc-icon rc-language--xs rc-iconography rc-interactive rc-md-up" aria-label="language" data-modal-trigger="country-lang-selector" role="menuitem">
 				<span class="rc-screen-reader-text">
diff --git a/rc-busness/pages/index.vue b/rc-busness/pages/index.vue
index 53c8f01e..46689dce 100644
--- a/rc-busness/pages/index.vue
+++ b/rc-busness/pages/index.vue
@@ -26,7 +26,7 @@
 	<div class="usermain">
 		<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
 			<div v-if="!searchBar" class="online bold rc-md-down"></div>
-			<ul class="ul-zhuan">
+			<ul class="ul-zhuan rc-margin-y--xl">
 				<li 
 					v-for="(item, index) in discountlist"
 					:key="index"
@@ -37,7 +37,6 @@
 					<span>{{ item.title }}</span>
 				</li>
 			</ul>
-			<div class="online bold rc-md-down"></div>
 		</div>
 	</div>
 </div>
@@ -616,7 +615,7 @@
 			</ul>
 			<div class="tuntop" @click="toTop" v-show="gotop">
 				<img src="../assets/image/turntop.png" alt="">
-				回到顶部
+				<span>回到顶部</span>
 			</div>
         </div>
 
diff --git a/rc-busness/pages/personal/mypersonal.vue b/rc-busness/pages/personal/mypersonal.vue
index 04ad8c6b..a1967cae 100644
--- a/rc-busness/pages/personal/mypersonal.vue
+++ b/rc-busness/pages/personal/mypersonal.vue
@@ -1,64 +1,73 @@
 <template>
 <div>
 <Myheader></Myheader>
-  <div class="rc-header">
-    <div class="rc-main">
+<div class="rc-top"></div>
+  <div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
+    <div class="rc-column">
       <!-- <div class="rc-title">
         <img src="../../assets/image/rc-cat.png" alt="" />
         <span>{{ userorder }}</span>
       </div> -->
-      <div class="rc-center">
-      <img :src='userimage'  />
-      </div>
-      <div class="rc-login">
-        <div class="rc-unlogin">
-        <div class="rc-people" @click="opendialog()">
-          <img src="../../assets/image/rc-people.png" alt="" />
-        </div>
-        <div class="rc-userlogin">
-          <div v-if="!islogin">
-        <span>{{usertitle}}</span>
-          <em>{{userorder}}</em>
-          </div>
-           <nuxt-link :to="`/userlogin/login/`">
-           <span v-if="islogin">登录/注册</span>
-            </nuxt-link>
-        </div>
-        </div>
-          <div class="rc-islogin">
-              <nuxt-link :to="`/personal/usermember/`">
-         <span>会员权益</span>
-            </nuxt-link>
-      </div>
-      </div>
-    
-      <div class="usercord">
-        <em>当前积分:{{ rcrcord }}</em>
-        <span @click="userinter">积分明细</span>
-      </div>
+	  <div class="rc-max-width--xl">
+		<div class="rc-center">
+			<img :src='userimage'  />
+		</div>
+	  </div>
+	  <div class="rc-max-width--xl ts-special-padding">
+		<div class="rc-login">
+			<div class="rc-unlogin">
+				<div class="rc-people" @click="opendialog()">
+					<img src="../../assets/image/rc-people.png" alt="" />
+				</div>
+				<div class="rc-userlogin">
+					<div v-if="!islogin">
+						<span>{{usertitle}}</span>
+						<em>{{userorder}}</em>
+					</div>
+					<nuxt-link :to="`/userlogin/login/`">
+						<span v-if="islogin">登录/注册</span>
+					</nuxt-link>
+				</div>
+			</div>
+			<div class="rc-islogin">
+				<nuxt-link :to="`/personal/usermember/`" class="ts-right-arr">
+					<span>会员权益</span>
+				</nuxt-link>
+			</div>
+		</div>
+    </div>
+	<div class="online bold"></div>
+	<div class="rc-max-width--xl ts-special-padding">
+	  <div class="usercord">
+		<em>当前积分:{{ rcrcord }}</em>
+		<span class="ts-right-arr" @click="userinter">积分明细</span>
+	  </div>
 
-      <div class="rc-cordd">
-        <span>距离升级还差:{{ rcvalue }} </span>
-        <div class="block">
-          <div class="r-block" ref="userblock"></div>
-          <!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
-
-        </div>
-           <div class="rc-value">
-                 <span>0</span>
-                 <span>5000</span>
-                 <span>10000</span>
-          </div>
-      </div>
+	  <div class="rc-cordd">
+		<span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
+		<div class="block">
+		  <div class="r-block" ref="userblock"></div>
+		  <!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
 
+		</div>
+		   <div class="rc-value">
+				 <span>0</span>
+				 <span>5000</span>
+				 <span>10000</span>
+		  </div>
+	  </div>
+	</div>
+	<div class="online bold"></div>
+	
+	<div class="rc-max-width--xl ts-special-padding">
       <div class="rc-order">
         <em>我的订单</em>
 
        
-        <span @click="findall" >查看全部</span>
+        <span class="ts-right-arr" @click="findall" >查看全部</span>
           
       </div>
-      <div class="rc-obligation">
+      <div class="rc-obligation rc-max-width--lg">
         <ul>
           <li v-for="(item, index) in prefecture" :key="index" @click="obligation(item,index)">
             <img :src="item.catimage" alt="" />
@@ -66,9 +75,14 @@
           </li>
         </ul>
       </div>
-          <div class="rc-usermain">
+	</div>
+	
+	<div class="online bold"></div>
+	
+	<div class="rc-max-width--xl ts-special-padding">
+    <div class="rc-usermain">
       <h2>服务工具</h2>
-          <div class="rc-buymain">
+          <div class="rc-buymain rc-max-width--lg ts-special-padding">
       <div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(item,index)">
         <div class="rc-cord">
           <img :src="item.buyimage" alt="" />
@@ -81,6 +95,8 @@
       </div>
       </div>
       </div>
+	</div>
+	<div class="online bold"></div>
     </div>
   </div>
 
@@ -402,492 +418,6 @@ this.$router.push({
 </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) {
-
-
-/deep/.el-dialog {
- width: 352px;
- height: 500px;
-}
-
-.rc-header{
- display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    h3{
-      color:#333333;
-      font-size: 26px;
-    }
-  .rc-title{
-     img{
-       width: 96px;
-       height: 96px;
-
-     }
-  }
-  .userer{
-    img{
-      width: 210px;
-      height: 210px;
-      display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    }
-  }
-}
-  .rc-main {
-    width: 92%;
-    margin: 0 auto;
-    overflow: hidden;
-       .rc-usermain{
-        h2{
-        display: none;
-        }
-        
-      }
-    .rc-center {
-      width: 100%;
-      height: 180px;
-      img {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-   
-    }
-
-    .rc-login {
-      width: 100%;
-      height: 112px;
-     display: flex;
-    justify-content: space-between;
-    align-items: center;
-  .rc-unlogin{
-    display: flex;
-    align-items: center;
-  }
-      .rc-userlogin{
-            margin-left: 16px;
-     
-      span{
-    font-size: 18px;
-   color: #333333;
-   display: block;
-      }
-      em{
-        font-size: 14px;
-        color:#666666;
-        font-style: normal;
-        display: block;
-        margin-top: 8px;
-      }
- 
-       }
-            .rc-islogin{
-        span{
-          color: #E1001A;
-    font-size: 14px;
-    display: block;
-    border-bottom: 1px solid #E1001A;
-        }
-      }
-      .rc-people {
-        width: 64px;
-        height: 64px;
-        display: flex;
-        align-items: center;
-        border: 2px solid #d7d7d7;
-        border-radius: 50%;
-        img {
-          width: 48px;
-          height: 48px;
-          display: block;
-          margin: 0 auto;
-        }
-      }
-    }
-    .usercord{
-        display: flex;
-        justify-content: space-between;
-         height: 32px;
-         align-items: center;
-         border-bottom: 1px solid #D8D8D8;
-         padding-bottom: 17px
-;
-
-        em{
-            font-style: normal;
-            color: #333333;
-            font-weight: bold;
-
-        }
-        span{
-            color:#E1001A;
-              font-size: 14px;
-              display: block;
-              border-bottom: 1px solid #E1001A;
-        }
-    }
- .rc-cordd{
-   color:#666666;
-   font-size: 14px;
-
-     span{
-        display: block;
-        margin-top: 16px;
-        text-align: left;
-     }
-     .block{
-          height: 8px;
-   background: #D7D7D7;
-   margin-top: 16px;
-   border-radius: 4px;
-   .r-block{
-     width: 0%;
-     height: 100%;
-     background: #008900;
-   }
-   
-  
-     }
-      .rc-value{
-        display: flex;
-        justify-content: space-between;
-   }
- }
-    .rc-order{
-        display: flex;
-        justify-content: space-between;
-        margin-top: 16px;
-        border-bottom: 1px solid #D8D8D8;
-        padding-bottom: 16px;
-        em{
-            font-style: normal;
-            font-size: 14px;
-              font-weight: bold;
-            color: #333333;
-        }
-          span{
-            color:#E1001A;
-              font-size: 14px;
-              display: block;
-              border-bottom: 1px solid #E1001A;
-        }
-    }
-
-    .rc-obligation{
-      margin-top: 16px;
-        ul{
-        display: flex;
-        justify-content: space-between;
-            li{
-                float: left;
-
-            }
-            img{
-                width: 44px;
-                height: 44px;
-                display: block;
-            }
-        }
-    }
-    .rc-buy{
-        width: 100%;
-        height: 64px;
-        display: flex;
-        justify-content: space-between;
-        border-bottom: 1px solid #D8D8D8;
-        margin-top: 24px;
-        .rc-cord{
-            display: flex;
-            align-items: center;
-        }
-        img{
-            width: 32px;
-            height: 32px;
-            display: block;
-        }
-        em{
-            font-style: normal;
-            font-size: 14px;
-            color: #333333;
-            margin-left: 16px;
-
-        }
-        .rc-load{
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-             color: #666666;
-             span{
-                  display: block;
-                  margin-right: 8px;
-                  margin-top: -4px;
-             }
-             img{
-               width: 8px;
-               height: 16px;
-               display: block;
-             }
-        }
-    }
-  }
-}
-//pc端
-
-@media screen and (min-width: 768px) and (max-width: 1920px) {
-  /deep/.el-dialog {
- width: 440px;
- height: 652px;
-}
-
-.rc-header{
- display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    h3{
-      color:#333333;
-      font-size: 26px;
-    }
-  .rc-title{
-     img{
-       width: 96px;
-       height: 96px;
-
-     }
-  }
-  .userer{
-    img{
-      width: 210px;
-      height: 210px;
-      display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    }
-  }
-}
-    .rc-main {
-    width: 92%;
-    margin: 0 auto;
-    .rc-center {
-      width: 100%;
-      height: 180px;
-      img {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-      display: none;
-    }
-
-    .rc-login {
-  width: 100%;
-      height: 112px;
-     display: flex;
-    justify-content: space-between;
-    align-items: center;
-  .rc-unlogin{
-    display: flex;
-    align-items: center;
-  }
-      .rc-userlogin{
-            margin-left: 16px;
-     
-      span{
-    font-size: 18px;
-   color: #333333;
-   display: block;
-      }
-      em{
-        font-size: 14px;
-        color:#666666;
-        font-style: normal;
-        display: block;
-        margin-top: 8px;
-      }
- 
-       }
-            .rc-islogin{
-        span{
-          color: #E1001A;
-    font-size: 18px;
-    display: block;
-        }
-      }
-      .rc-people {
-        width: 64px;
-        height: 64px;
-        display: flex;
-        align-items: center;
-        border: 2px solid #d7d7d7;
-        border-radius: 50%;
-        img {
-          width: 48px;
-          height: 48px;
-          display: block;
-          margin: 0 auto;
-        }
-      }
-    }
-    .usercord{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 80px;
-        border-bottom: 1px solid #D7D7D7;
-        em{
-            font-style: normal;
-            color: #333333;
-            font-weight: bold;
-            font-size: 18px;
-
-        }
-        span{
-            color:#E1001A;
-              font-size: 18px;
-              display: block;
-        }
-    }
- .rc-cordd{
-   color:#333333;
-   font-size: 18px;
-   height: 133px;
-   margin-top: 32px;
-
- color:#666666;
-   font-size: 14px;
-     span{
-       margin-top: 16px;
-        font-size: 18px;
-           text-align: left;
-           display: block;
-     }
-     .block{
-          height: 8px;
-   background: #D7D7D7;
-   margin-top: 16px;
-   border-radius: 4px;
-   .r-block{
-     width: 0%;
-     height: 100%;
-     background: #008900;
-   }
-   
-  
-     }
-      .rc-value{
-        display: flex;
-        justify-content: space-between;
-   }
-
- }
-    .rc-order{
-        display: flex;
-        justify-content: space-between;
-            border-bottom: 1px solid #D8D8D8;
-            padding-bottom: 28px;
-            margin-top: 20px;
-        em{
-            font-style: normal;
-            font-size: 26px;
-            color: #333333;
-        }
-          span{
-            color:#E1001A;
-              font-size: 18px;
-              display: block;
-            
-        }
-    }
-
-    .rc-obligation{
-      margin-top: 16px;
-        ul{
-        display: flex;
-        justify-content: space-between;
-        width: 80%;
-        margin: 0 auto;
-        text-align: center;
-            li{
-                float: left;
-
-            }
-            img{
-                width: 96px;
-                height: 96px;
-                display: block;
-            }
-        }
-        span{
-          font-size: 18px;
-        }
-    }
-    .rc-usermain{
-      h2{
-    color: #333333;
-    font-size: 26px;
-    font-weight: normal;
-    display: block;
-    padding-bottom: 28px;
-    border-bottom: 1px solid #D8D8D8;
-    text-align: left;
-
-      }
-    }
-    .rc-buymain{
-      display: flex;
-      justify-content: space-between;
-      width: 80%;
-      margin: 0 auto;
-    }
-    .rc-buy{
-        display: flex;
-        justify-content: space-between;
-          text-align: center;
-        margin-top: 24px;
-      
-        img{
-            width: 96px;
-            height: 96px;
-            display: block;
-        }
-        em{
-            font-style: normal;
-            font-size: 18px;
-            color: #333333;
-        }
-        .rc-load{
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-             color: #666666;
-             span{
-                  display: block;
-                  margin-right: 8px;
-                  margin-top: -4px;
-             }
-             img{
-               width: 8px;
-               height: 16px;
-               display: block;
-             }
-             display: none;
-        }
-    }
-  }
-
-
-}
+@import url("@/assets/css/global.less");
+@import url("@/assets/css/mypersonal.less");
 </style>
\ No newline at end of file
diff --git a/rc-busness/pages/personal/quiry.vue b/rc-busness/pages/personal/quiry.vue
index 78c0d836..59c94978 100644
--- a/rc-busness/pages/personal/quiry.vue
+++ b/rc-busness/pages/personal/quiry.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <Myheader></Myheader>
-
-    <div class="rc-header">
+	<div class="rc-top"></div>
+    <div class="rc-layout-container rc-one-column rc-max-width--xl">
       <div class="rc-main">
         <div class="rc-receiving">
           <em>{{userisdelivery}}</em>
diff --git a/rc-busness/pages/productdetails/producted.vue b/rc-busness/pages/productdetails/producted.vue
index 0ff97258..76b021e4 100644
--- a/rc-busness/pages/productdetails/producted.vue
+++ b/rc-busness/pages/productdetails/producted.vue
@@ -6,9 +6,47 @@
      <tabs></tabs>
      <div class="online" ></div>
 	<div class="rc-top"></div>
-    <div class="rc-usermain ts-product-detail">
+    <div class="rc-usermain ts-product-detail rc-max-width--xl rc-layout-container rc-two-column rc-border-bottom rc-border-colour--brand4">
+	<!--
     <magnifier v-bind:parentmsg="msg" ></magnifier>
-    <div class="ts-product-header" >
+	-->
+	<div class="rc-column">
+		<div data-js-carousel="" data-image-gallery="true">
+		  <div class="rc-carousel rc-carousel__gallery-image" data-zoom-container="328b2e5f-6904-4cac-9709-51ed18d2500f" data-zoom-factor="2">
+			<!-- Big images-->
+			<div>
+			  <div>
+				  <img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
+			  </div>
+			</div>
+			
+			<div>
+			  <div>
+				  <img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
+			  </div>
+			</div>
+			<!-- Big images end-->
+		  </div>
+		  <div class="rc-carousel__gallery-thumbnails-wrapper">
+		    <div class="rc-carousel rc-carousel__gallery-thumbnails">
+				<!-- Thunb images-->
+				<div class="rc-carousel__gallery-thumbnail">
+					<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=64&fm=jpg&auto=compress')">
+					  <figcaption class="rc-screen-reader-text">Product caption text</figcaption>
+					</figure>
+				  </div>
+				  <div class="rc-carousel__gallery-thumbnail">
+					<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=64&fm=jpg&auto=compress')">
+					  <figcaption class="rc-screen-reader-text">Product caption text</figcaption>
+					</figure>
+				</div>
+				<!-- Thunb images end-->
+		    </div>
+		  </div>
+		</div>
+	</div>
+	
+    <div class="ts-product-header rc-column" id="328b2e5f-6904-4cac-9709-51ed18d2500f">
         <div class="usermain">
 			<div class="online bold rc-md-down"></div>
 			<div class="rc-main">
@@ -29,7 +67,7 @@
 							<i class="ts-row-title">活动促销：</i>
 							<span>全场商品限时优惠</span>
 						</div>
-						<em @click="userget()">立即领取</em>
+						<em class="ts-right-arr" @click="userget()">立即领取</em>
 					</div>
 				</div>
 			</div>
@@ -91,9 +129,10 @@
 					<span @click="usertanchu(item,1)">立即购买</span>
 				</div>
 			</div>
+			<div class="online bold rc-md-down"></div>
         </div>
-</div>
-    
+	  </div>
+
     </div>
     </div>
         <div class="rc-footimage rc-main">
diff --git a/rc-busness/pages/userlogin/edit.vue b/rc-busness/pages/userlogin/edit.vue
index 7dc556bc..c7077ecb 100644
--- a/rc-busness/pages/userlogin/edit.vue
+++ b/rc-busness/pages/userlogin/edit.vue
@@ -1,18 +1,24 @@
 // <!--  -->
 <template>
 
-    <div class="container">
-      <!-- <Myheader/> -->
+    <div class="container rc-full-width">
+      <Myheader></Myheader>
 
-        <p class="header">账号注册</p>
-         <div class="content">
-             <van-field
-                 v-model="tel"
-                 placeholder="请输入手机号"
-                 :error-message="usertel"
-                  class="van-field-one"
-                  clearable
-             />
+         <div class="content ts-max-width--460">
+			 <h2 class="rc-beta rc-text--center">账号注册</h2>
+			 
+             <div class="rc-layout-container rc-one-column">
+				<div class="rc-column">
+				  <input
+				  class="ts-standard-input"
+					v-model="tel"
+					placeholder="请输入手机号"
+					:error-message="usertel"
+					v-if="!ifpassword"
+					clearable
+				  />
+				</div>
+             </div>
              <!-- <van-field
                  v-model="password"
                  type="password"
@@ -21,34 +27,70 @@
                 
                  clearable
              /> -->
-             <van-field
-              class="van-field-two"
-                 v-model="sms"
-                 center
-                 clearable                
-                 placeholder="请输入验证码"
-              
-              >
-                 <!-- :error-message="test" -->
+             <div class="rc-layout-container rc-two-column">
+				<div class="rc-column">
+				  <input
+					v-if="!ifpassword"
+					v-model="sms"
+					class="ts-standard-input ts-standard-input--two center"
+					center
+					clearable
+					placeholder="请输入验证码"
+				
+				  >
+				</div>
+				<div class="rc-column">
+				  <button
+					:disabled="flag"
+					slot="button"
+					size="small"
+					@click="sendCode"
+					class="rc-use ts-standard-btn ts-standard-btn--two"
+					>{{ buttonmsg }}</button
+				  >
+				</div>
+             </div>
             
-               
-             <van-button :disabled="flag" slot="button" size="small"  @click="sendCode" class="rc-use">{{ buttonmsg }}</van-button>
-            
-             </van-field>
-                  <div class="usecheck">
-                <input type="checkBox" style="width:24px;height:24px"  @click="checkBox()">我已阅读同意隐私声明和账号使用协议
-                     </div>
+            <div class="rc-layout-container rc-one-column">
+			  <div class="usecheck rc-column rc-text--left">
+				<label>
+					<input
+					  type="checkbox"
+					  @click="checkBox()"
+					  style="width: 24px; height: 24px"
+					  v-model="inRank"
+					/>我已阅读同意隐私声明和账号使用协议
+				</label>
+			  </div>
+            </div>
+			<div class="rc-layout-container rc-two-column rc-button">
+				  <div class="rc-column rc-text--left">
+					<a href="#" class="rc-styled-link"><span>隐私政策</span></a>
+				  </div>
+				  <div class="rc-column rc-text--right">
+					<nuxt-link :to="`/userlogin/login/`" class="rc-styled-link">
+					  <span>返回登录</span>
+					</nuxt-link>
+				  </div>
+			</div>
 
-             <div class="rc-user">
-              <van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="register()" class="userbutton" >注册</van-button>
-              <!-- <van-divider @click="toLogin">注册账户</van-divider> -->
-              </div>
-
-           
+            <div class="rc-layout-container rc-one-column">
+			  <div class="rc-column">
+				<input
+				  type="primary"
+				  :loading="loading"
+				  loading-text="注册中..."
+				  size="large"
+				  :disabled="zhud"
+				  @click="register()"
+				  class="ts-standard-btn ts-standard-btn--max-width"
+				  value="注册"
+				  ></input
+				>
+				<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
+			  </div>
+            </div>        
          </div>
-
-
-
     </div>
 </template>
 
@@ -285,291 +327,7 @@ export default {
 }
 
 </script>
-<style  lang="less" scoped>
-@media screen and(min-width: 320px) and(max-width:768px) {
-   .van-field-one{
-   width: 335px;
-background: #F6F6F6;
-border-radius: 4px;
-margin: 0 auto;
-  }
-  .van-field-two{
-    margin: 0 auto;
-    width: 335px;
-height: 48px;
-background: #F6F6F6;
-margin: 0 auto;
-border-radius: 4px;
-margin-top: 24px;
-  }
-   .usecheck{
-    display: flex;
-    text-align: left;
-    width: 335px;
-    margin: 0 auto;
-    align-items: center;
-    margin-top: 18px;
- 
-  }
-  .container {
-   
-    font-size: 0.1rem;
-    .van-field__body {
-      border-bottom: 1px solid red;
-    }
-    .content {
-      margin-top: 24px;
-    }
-    .userfoget {
-      font-size: 14px;
-      color: #333333;
-      border-bottom: 1px solid #333333;
-      margin-left: 20px;
-    }
-    .rc-header {
-      text-align: center;
-    }
-    .rc-header span:first-of-type {
-      margin-right: 60px;
-    }
-    .rc-header span:last-child {
-      margin-right: 20px;
-    }
-    .active {
-      font-size: 18px;
-      color: #666666;
-    }
-    .unactive {
-      font-size: 18px;
-      color: #999999;
-    }
-    .rc-use {
-      width: 155px;
-      height: 48px;
-      opacity: 1;
-      border-radius: 30px;
-      outline: none;
-      border: none;
-      border: 2px solid #e1001a;
-      color: #e1001a;
-      font-size: 14px;
-    }
-    .rc-user {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: 40px;
-    }
-    .userbutton {
-      width: 335px;
-      height: 48px;
-      background: #e2001a;
-      opacity: 1;
-      border-radius: 30px;
-      outline: none;
-      border: none;
-      margin: 0 auto;
-    }
-    van-button {
-      width: 335px;
-      height: 48px;
-      background: #e2001a;
-      opacity: 1;
-      border-radius: 30px;
-    }
-    .header {
-      color: #333333;
-      font-size: 30px;
-      text-align: center;
-    }
-    input {
-      border: none;
-      outline: none;
-    }
-    button {
-      outline: none;
-      border: none;
-      list-style: none;
-      background: none;
-    }
-    .rc-center {
-      font-size: 30px;
-      color: #333333;
-      text-align: center;
-    }
-    .rc-center input {
-      color: #999999;
-      font-size: 14px;
-    }
-    .userlogin {
-      width: 92%;
-      margin: 0 auto;
-    }
-   .rc-button {
-      font-size: 14px;
-       width:335px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 auto;
-      color: #333333;
-    }
-    .rc-button span {
-      border-bottom: 1px solid #333333;
-    }
-    .rc-button span {
-      margin-left: 20px;
-      margin-top: 24px;
-    }
-    .rc-button span:last-child {
-      margin-right: 20px;
-      display: block;
-    }
-  }
-}
-//    /* 最小768px最大1920 *pc端/
-@media screen and (min-width: 768px) and (max-width: 1920px) {
-  .usecheck{
-    display: flex;
-    text-align: left;
-    width: 395px;
-    margin: 0 auto;
-    align-items: center;
-    margin-top: 18px;
- 
-  }
-  /deep/
-  .van-field-one{
-   width: 395px;
-height: 48px;
-background: #F6F6F6;
-border-radius: 4px;
-margin: 0 auto;
-  }
-  .van-field-two{
-    margin: 0 auto;
-    width: 395px;
-height: 48px;
-background: #F6F6F6;
-margin: 0 auto;
-border-radius: 4px;
-margin-top: 24px;
-  }
-  .container {
-    // border: 1px solid red;
-    .header {
-      color: #333333;
-      font-size: 0.4rem;
-      text-align: center;
-    }
-    .content {
-      margin-top: 24px;
-    }
-    .userfoget {
-      font-size: 14px;
-      color: #333333;
-      border-bottom: 1px solid #333333;
-      margin-left: 20px;
-    }
-    .rc-header {
-      text-align: center;
-    }
-    .rc-header span:first-of-type {
-      margin-right: 60px;
-    }
-    .rc-header span:last-child {
-      margin-right: 20px;
-    }
-    .active {
-      font-size: 0.1rem;
-      color: #666666;
-    }
-    .unactive {
-      font-size: 0.1rem;
-      color: #999999;
-    }
-    .rc-use {
-      width: 1.55rem;
-      height: 0.48rem;
-      opacity: 1;
-      border-radius: 0.15rem;
-      border: 2px solid #e1001a;
-      color: #e1001a;
-      font-size: 0.14rem;
-      background: white;
-
-    }
-    .rc-user {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: 40px;
-    }
-    .userbutton {
-      width: 3.8rem;
-      height: 0.48rem;
-      background: #e2001a;
-      border-radius: 0.15rem;
-      outline: none;
-      border: none;
-      margin: 0 auto;
-    }
-    van-button {
-      width: 335px;
-      height: 48px;
-      background: #e2001a;
-      opacity: 1;
-      border-radius: 30px;
-    }
-
-    input {
-      border: none;
-      outline: none;
-    }
-    button {
-      outline: none;
-      border: none;
-      list-style: none;
-      background: none;
-    }
-    .rc-center {
-      font-size: 30px;
-      color: #333333;
-      text-align: center;
-    }
-    .rc-center input {
-      color: #999999;
-      font-size: 14px;
-    }
-    .userlogin {
-      width: 92%;
-      margin: 0 auto;
-    }
-    .rc-button {
-      font-size: 14px;
-       width:395px;
-    /* line-height: 0.85rem; */
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 auto;
- 
-
-      color: #333333;
-    }
-    .rc-button span {
-      border-bottom: 1px solid #333333;
-    }
-    .rc-button span {
-      margin-left: 20px;
-      margin-top: 24px;
-    }
-    .rc-button span:last-child {
-      margin-right: 20px;
-      display: block;
-    }
-  }
-}
-
-
+<style lang="less" scoped>
+@import url("../../assets/css/global.less");
+@import url("../../assets/css/login.less");
 </style>
\ No newline at end of file
diff --git a/rc-busness/pages/userlogin/login.vue b/rc-busness/pages/userlogin/login.vue
index 4038f6c1..fcea716f 100644
--- a/rc-busness/pages/userlogin/login.vue
+++ b/rc-busness/pages/userlogin/login.vue
@@ -1,32 +1,37 @@
-// <!--  -->
 <template>
-  <div class="container">
-    <!-- <Myheader/> -->
+  <div class="container rc-full-width">
+    <Myheader></Myheader>
 
-    <p class="header">{{ usertitle ? "账号登录" : "" }}</p>
-    <div class="rc-header">
-      <!-- <i>|</i> -->
-      <span
-        v-for="(item, index) in swiperData"
-        :key="index"
-        @click="selectGoods(item, index)"
-        :class="activeIndex == index ? 'active' : 'unactive'"
-        >{{ item.title }}</span
-      >
-    </div>
-    <div class="content">
-      <van-field
-      class="van-field-one"
-        v-model="tel"
-        placeholder="请输入手机号"
-        :error-message="usertel"
-        v-if="!ifpassword"
-        clearable
-      />
-
-      <van-field
+    <div class="content ts-max-width--460">
+		<h2 class="rc-beta rc-text--center">{{ usertitle ? "账号登录" : "" }}</h2>
+		<!-- Deprecated : No tab switching as no password
+		<div class="rc-header">
+		  <span
+		    v-for="(item, index) in swiperData"
+		    :key="index"
+		    @click="selectGoods(item, index)"
+		    :class="activeIndex == index ? 'active' : 'unactive'"
+		    >{{ item.title }}</span
+		  >
+		</div>
+		-->
+		
+	  <div class="rc-layout-container rc-one-column">
+		<div class="rc-column">
+		  <input
+		  class="ts-standard-input"
+			v-model="tel"
+			placeholder="请输入手机号"
+			:error-message="usertel"
+			v-if="!ifpassword"
+			clearable
+		  />
+		</div>
+	  </div>
+		<!-- Deprecated : No tab switching as no password
+      <input
         v-model="text"
-         class="van-field-two"
+        class="ts-standard-input ts-standard-input--two"
         placeholder="请输入账号"
     
         v-if="ifpassword"
@@ -41,53 +46,72 @@
         v-if="ifpassword"
         clearable
       />
-      <van-field
-        v-if="!ifpassword"
-        v-model="sms"
-          class="van-field-two"
-        center
-        clearable
-        placeholder="请输入验证码"
-    
-      >
-        <van-button
-          :disabled="flag"
-          slot="button"
-          size="small"
-          @click="sendCode"
-          class="rc-use"
-          >{{ buttonmsg }}</van-button
-        >
-      </van-field>
-      <div class="usecheck">
-        <input
-          type="checkbox"
-          @click="checkBox()"
-          style="width: 24px; height: 24px"
-          v-model="inRank"
-        />我已阅读同意隐私声明和账号使用协议
-      </div>
-      <div class="rc-button">
-        <span>隐私政策</span>
-        <nuxt-link :to="`/userlogin/edit/`">
-          <span>注册账户</span>
-        </nuxt-link>
-      </div>
-      <div class="rc-user">
-        <van-button
-          type="primary"
-          :loading="loading"
-          loading-text="登录..."
-          size="large"
-          :disabled="zhud"
-          @click="register()"
-          class="userbutton"
-          >登录</van-button
-        >
-        <!-- <van-divider @click="toLogin">注册账户</van-divider> -->
-      </div>
+	  -->
+	  <div class="rc-layout-container rc-two-column">
+		<div class="rc-column">
+		  <input
+			v-if="!ifpassword"
+			v-model="sms"
+			class="ts-standard-input ts-standard-input--two center"
+			center
+			clearable
+			placeholder="请输入验证码"
+		
+		  >
+		</div>
+		<div class="rc-column">
+		  <button
+		    :disabled="flag"
+		    slot="button"
+		    size="small"
+		    @click="sendCode"
+		    class="rc-use ts-standard-btn ts-standard-btn--two"
+		    >{{ buttonmsg }}</button
+		  >
+		</div>
+	  </div>
+	  
+	  <div class="rc-layout-container rc-one-column">
+		  <div class="usecheck rc-column rc-text--left">
+			<label>
+				<input
+				  type="checkbox"
+				  @click="checkBox()"
+				  style="width: 24px; height: 24px"
+				  v-model="inRank"
+				/>我已阅读同意隐私声明和账号使用协议
+			</label>
+		  </div>
+	  </div>
+	  <div class="rc-layout-container rc-two-column rc-button">
+		  <div class="rc-column rc-text--left">
+			<a href="#" class="rc-styled-link"><span>隐私政策</span></a>
+		  </div>
+		  <div class="rc-column rc-text--right">
+			<nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
+			  <span>注册账户</span>
+			</nuxt-link>
+		  </div>
+	  </div>
+	  
+	  <div class="rc-layout-container rc-one-column">
+		  <div class="rc-column">
+			<input
+			  type="primary"
+			  :loading="loading"
+			  loading-text="登录..."
+			  size="large"
+			  :disabled="zhud"
+			  @click="register()"
+			  class="ts-standard-btn ts-standard-btn--max-width"
+			  value="登录"
+			  ></input
+			>
+			<!-- <van-divider @click="toLogin">注册账户</van-divider> -->
+		  </div>
+	  </div>
     </div>
-  </div>
+</div>
 </template>
 
 
@@ -126,7 +150,7 @@ export default {
     };
   },
   components: {
-    // Myheader,
+     Myheader
   },
   computed: {
     usertel() {
@@ -350,286 +374,6 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-// 手机端
-@media screen and(min-width: 320px) and(max-width:768px) {
-
-    .van-field-one{
-   width: 335px;
-background: #F6F6F6;
-border-radius: 4px;
-margin: 0 auto;
-  }
-  .van-field-two{
-    margin: 0 auto;
-    width: 335px;
-height: 48px;
-background: #F6F6F6;
-margin: 0 auto;
-border-radius: 4px;
-margin-top: 24px;
-  }
-   .usecheck{
-    display: flex;
-    text-align: left;
-    width: 335px;
-    margin: 0 auto;
-    align-items: center;
-    margin-top: 18px;
- 
-  }
-  .container {
-    font-size: 0.1rem;
-    .van-field__body {
-      border-bottom: 1px solid red;
-    }
-    .content {
-      margin-top: 24px;
-    }
-    .userfoget {
-      font-size: 14px;
-      color: #333333;
-      border-bottom: 1px solid #333333;
-      margin-left: 20px;
-    }
-    .rc-header {
-      text-align: center;
-    }
-    .rc-header span:first-of-type {
-      margin-right: 60px;
-    }
-    .rc-header span:last-child {
-      margin-right: 20px;
-    }
-    .active {
-      font-size: 18px;
-      color: #666666;
-    }
-    .unactive {
-      font-size: 18px;
-      color: #999999;
-    }
-    .rc-use {
-      width: 155px;
-      height: 48px;
-      opacity: 1;
-      border-radius: 30px;
-      outline: none;
-      border: none;
-      border: 2px solid #e1001a;
-      color: #e1001a;
-      font-size: 14px;
-    }
-    .rc-user {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: 40px;
-    }
-    .userbutton {
-      width: 335px;
-      height: 48px;
-      background: #e2001a;
-      opacity: 1;
-      border-radius: 30px;
-      outline: none;
-      border: none;
-      margin: 0 auto;
-    }
-    van-button {
-      width: 335px;
-      height: 48px;
-      background: #e2001a;
-      opacity: 1;
-      border-radius: 30px;
-    }
-    .header {
-      color: #333333;
-      font-size: 30px;
-      text-align: center;
-    }
-    input {
-      border: none;
-      outline: none;
-    }
-    button {
-      outline: none;
-      border: none;
-      list-style: none;
-      background: none;
-    }
-    .rc-center {
-      font-size: 30px;
-      color: #333333;
-      text-align: center;
-    }
-    .rc-center input {
-      color: #999999;
-      font-size: 14px;
-    }
-    .userlogin {
-      width: 92%;
-      margin: 0 auto;
-    }
-   .rc-button {
-      font-size: 14px;
-       width:335px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 auto;
-      color: #333333;
-    }
-    .rc-button span {
-      border-bottom: 1px solid #333333;
-    }
-    .rc-button span {
-      margin-left: 20px;
-      margin-top: 24px;
-    }
-    .rc-button span:last-child {
-      margin-right: 20px;
-      display: block;
-    }
-  }
-}
-//    /* 最小768px最大1920 *pc端/
-@media screen and (min-width: 768px) and (max-width: 1920px) {
-  .usecheck{
-    display: flex;
-    text-align: left;
-    width: 395px;
-    margin: 0 auto;
-    align-items: center;
-    margin-top: 18px;
- 
-  }
-  /deep/
-  .van-field-one{
-   width: 395px;
-height: 48px;
-background: #F6F6F6;
-border-radius: 4px;
-margin: 0 auto;
-  }
-  .van-field-two{
-    margin: 0 auto;
-    width: 395px;
-height: 48px;
-background: #F6F6F6;
-margin: 0 auto;
-border-radius: 4px;
-margin-top: 24px;
-  }
-  .container {
-    // border: 1px solid red;
-    .header {
-      color: #333333;
-      font-size: 0.4rem;
-      text-align: center;
-    }
-    .content {
-      margin-top: 24px;
-    }
-    .userfoget {
-      font-size: 14px;
-      color: #333333;
-      border-bottom: 1px solid #333333;
-      margin-left: 20px;
-    }
-    .rc-header {
-      text-align: center;
-    }
-    .rc-header span:first-of-type {
-      margin-right: 60px;
-    }
-    .rc-header span:last-child {
-      margin-right: 20px;
-    }
-    .active {
-      font-size: 0.1rem;
-      color: #666666;
-    }
-    .unactive {
-      font-size: 0.1rem;
-      color: #999999;
-    }
-    .rc-use {
-      width: 1.55rem;
-      height: 0.48rem;
-      opacity: 1;
-      border-radius: 0.15rem;
-      border: 2px solid #e1001a;
-      color: #e1001a;
-      font-size: 0.14rem;
-      background: white;
-
-    }
-    .rc-user {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-top: 40px;
-    }
-    .userbutton {
-      width: 3.8rem;
-      height: 0.48rem;
-      background: #e2001a;
-      border-radius: 0.15rem;
-      outline: none;
-      border: none;
-      margin: 0 auto;
-    }
-    van-button {
-      width: 335px;
-      height: 48px;
-      background: #e2001a;
-      opacity: 1;
-      border-radius: 30px;
-    }
-
-    input {
-      border: none;
-      outline: none;
-    }
-    button {
-      outline: none;
-      border: none;
-      list-style: none;
-      background: none;
-    }
-    .rc-center {
-      font-size: 30px;
-      color: #333333;
-      text-align: center;
-    }
-    .rc-center input {
-      color: #999999;
-      font-size: 14px;
-    }
-    .userlogin {
-      width: 92%;
-      margin: 0 auto;
-    }
-    .rc-button {
-      font-size: 14px;
-       width:395px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 auto;
-      color: #333333;
-    }
-    .rc-button span {
-      border-bottom: 1px solid #333333;
-    }
-    .rc-button span {
-      margin-left: 20px;
-      margin-top: 24px;
-    }
-    .rc-button span:last-child {
-      margin-right: 20px;
-      display: block;
-    }
-  }
-}
+@import url("../../assets/css/global.less");
+@import url("../../assets/css/login.less");
 </style>
\ No newline at end of file