!5 2022-1-12 Leung

Merge pull request !5 from Admin/sit-Leung
This commit is contained in:
Admin 2022-01-12 09:06:41 +00:00 committed by Gitee
commit 8c352508cd
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
13 changed files with 895 additions and 1331 deletions

View File

@ -91,7 +91,7 @@ img, picture {
border: 2px solid #E2001A; border: 2px solid #E2001A;
border-radius: 1.875rem; border-radius: 1.875rem;
display: block; display: block;
line-height: 2.5rem; line-height: 2.25rem;
font-size: .875rem; font-size: .875rem;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
@ -106,6 +106,9 @@ img, picture {
color: #e2001a; color: #e2001a;
border-color: #e2001a; border-color: #e2001a;
} }
&.ts-standard-btn--max-width{
width:100%;
}
} }
@ -202,33 +205,49 @@ img, picture {
} }
span{ span{
font-size: 0.12rem; font-size: 0.12rem;
color: #666666;
} }
.tuntop{ .tuntop{
width: 1.25rem; width: 100%;
height: auto; height:4.125rem;
background: #FFFFFF;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
opacity: 1;
display: block;
color: #666666;
font-size: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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) @media screen and (max-width: 768px)
{ {
html { html {
font-size:100px; //font-size:100px;
} }
.rc-md-up { .rc-md-up {
display: none!important; display: none!important;
@ -244,6 +263,10 @@ img, picture {
padding: .5rem 0; padding: .5rem 0;
border-bottom: none; border-bottom: none;
} }
.ts-right-arr {
border-bottom:1px solid #E1001A;
padding-bottom:2px;
}
.rc-home-header{ .rc-home-header{
width: 100%; width: 100%;
.rc-main .rc-main
@ -334,6 +357,23 @@ img, picture {
width:20rem; 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 { .rc-main {
width:100%; width:100%;
max-width:1400px; max-width:1400px;

View File

@ -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{ .van-field-one{
width: 335px; width: 335px;
background: #F6F6F6; background: #F6F6F6;
@ -55,23 +82,6 @@
font-size: 18px; font-size: 18px;
color: #999999; 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 { .userbutton {
width: 335px; width: 335px;
height: 48px; height: 48px;
@ -93,12 +103,6 @@
border: none; border: none;
outline: none; outline: none;
} }
button {
outline: none;
border: none;
list-style: none;
background: none;
}
.rc-center { .rc-center {
font-size: 30px; font-size: 30px;
color: #333333; color: #333333;
@ -189,23 +193,6 @@ margin-top: 24px;
font-size: 0.1rem; font-size: 0.1rem;
color: #999999; 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 { .userbutton {
width: 3.8rem; width: 3.8rem;
height: 0.48rem; height: 0.48rem;
@ -227,12 +214,6 @@ margin-top: 24px;
border: none; border: none;
outline: none; outline: none;
} }
button {
outline: none;
border: none;
list-style: none;
background: none;
}
.rc-center { .rc-center {
font-size: 30px; font-size: 30px;
color: #333333; color: #333333;
@ -247,24 +228,13 @@ margin-top: 24px;
margin: 0 auto; margin: 0 auto;
} }
.rc-button { .rc-button {
font-size: 14px; .rc-styled-link{
width:395px; padding-bottom:3px;
display: flex; border-bottom:1px solid #333;
align-items: center; &:hover{
justify-content: space-between; border-bottom:1px solid #e2001a;
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;
} }
} }
} }

View File

@ -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;
}
}
}
}

View File

@ -41,12 +41,6 @@
span { span {
color: #666666; color: #666666;
} }
em {
font-style: normal;
line-height: 22px;
color: #E2001A;
border-bottom:1px solid rgba(226, 0, 26, 0.15);
}
} }
.rc-produnnum { .rc-produnnum {
display: flex; display: flex;
@ -96,7 +90,7 @@
bottom: 0; bottom: 0;
background-color: white; background-color: white;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
z-index:2;
span{ span{
width: 9.68rem; width: 9.68rem;
height: 3rem; height: 3rem;
@ -527,25 +521,6 @@
.ts-ecprice{ .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 { .rc-productdeta {
margin-top: 16px; margin-top: 16px;

View File

@ -162,6 +162,15 @@ header .ts-not-header {
.ts-wechat--xs .ts-hover-show img{margin:0 auto;} .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;} .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 { footer .rc-list .rc-list__header {
font-weight:bold; font-weight:bold;
} }

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -14,7 +14,7 @@
</button> </button>
</li> </li>
</ul> </ul>
<a href="#" class="rc-header__brand"> <a href="/" class="rc-header__brand">
<h1> <h1>
<span class="rc-screen-reader-text">translations.feature.headerbar.alternatelogotext</span> <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"> <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"> <img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/royalcanincn-qrcode.jpg">
</div> </div>
</a> </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"> <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"> <span class="rc-screen-reader-text">

View File

@ -26,7 +26,7 @@
<div class="usermain"> <div class="usermain">
<div :class="searchBar?'rc-ma':'rc-ma searchBara'"> <div :class="searchBar?'rc-ma':'rc-ma searchBara'">
<div v-if="!searchBar" class="online bold rc-md-down"></div> <div v-if="!searchBar" class="online bold rc-md-down"></div>
<ul class="ul-zhuan"> <ul class="ul-zhuan rc-margin-y--xl">
<li <li
v-for="(item, index) in discountlist" v-for="(item, index) in discountlist"
:key="index" :key="index"
@ -37,7 +37,6 @@
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</li> </li>
</ul> </ul>
<div class="online bold rc-md-down"></div>
</div> </div>
</div> </div>
</div> </div>
@ -616,7 +615,7 @@
</ul> </ul>
<div class="tuntop" @click="toTop" v-show="gotop"> <div class="tuntop" @click="toTop" v-show="gotop">
<img src="../assets/image/turntop.png" alt=""> <img src="../assets/image/turntop.png" alt="">
回到顶部 <span>回到顶部</span>
</div> </div>
</div> </div>

View File

@ -1,64 +1,73 @@
<template> <template>
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-header"> <div class="rc-top"></div>
<div class="rc-main"> <div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
<div class="rc-column">
<!-- <div class="rc-title"> <!-- <div class="rc-title">
<img src="../../assets/image/rc-cat.png" alt="" /> <img src="../../assets/image/rc-cat.png" alt="" />
<span>{{ userorder }}</span> <span>{{ userorder }}</span>
</div> --> </div> -->
<div class="rc-center"> <div class="rc-max-width--xl">
<img :src='userimage' /> <div class="rc-center">
</div> <img :src='userimage' />
<div class="rc-login"> </div>
<div class="rc-unlogin"> </div>
<div class="rc-people" @click="opendialog()"> <div class="rc-max-width--xl ts-special-padding">
<img src="../../assets/image/rc-people.png" alt="" /> <div class="rc-login">
</div> <div class="rc-unlogin">
<div class="rc-userlogin"> <div class="rc-people" @click="opendialog()">
<div v-if="!islogin"> <img src="../../assets/image/rc-people.png" alt="" />
<span>{{usertitle}}</span> </div>
<em>{{userorder}}</em> <div class="rc-userlogin">
</div> <div v-if="!islogin">
<nuxt-link :to="`/userlogin/login/`"> <span>{{usertitle}}</span>
<span v-if="islogin">登录/注册</span> <em>{{userorder}}</em>
</nuxt-link> </div>
</div> <nuxt-link :to="`/userlogin/login/`">
</div> <span v-if="islogin">登录/注册</span>
<div class="rc-islogin"> </nuxt-link>
<nuxt-link :to="`/personal/usermember/`"> </div>
<span>会员权益</span> </div>
</nuxt-link> <div class="rc-islogin">
</div> <nuxt-link :to="`/personal/usermember/`" class="ts-right-arr">
</div> <span>会员权益</span>
</nuxt-link>
<div class="usercord"> </div>
<em>当前积分:{{ rcrcord }}</em> </div>
<span @click="userinter">积分明细</span> </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"> <div class="rc-cordd">
<span>距离升级还差:{{ rcvalue }} </span> <span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
<div class="block"> <div class="block">
<div class="r-block" ref="userblock"></div> <div class="r-block" ref="userblock"></div>
<!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> --> <!-- <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="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"> <div class="rc-order">
<em>我的订单</em> <em>我的订单</em>
<span @click="findall" >查看全部</span> <span class="ts-right-arr" @click="findall" >查看全部</span>
</div> </div>
<div class="rc-obligation"> <div class="rc-obligation rc-max-width--lg">
<ul> <ul>
<li v-for="(item, index) in prefecture" :key="index" @click="obligation(item,index)"> <li v-for="(item, index) in prefecture" :key="index" @click="obligation(item,index)">
<img :src="item.catimage" alt="" /> <img :src="item.catimage" alt="" />
@ -66,9 +75,14 @@
</li> </li>
</ul> </ul>
</div> </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> <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-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(item,index)">
<div class="rc-cord"> <div class="rc-cord">
<img :src="item.buyimage" alt="" /> <img :src="item.buyimage" alt="" />
@ -81,6 +95,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="online bold"></div>
</div> </div>
</div> </div>
@ -402,492 +418,6 @@ this.$router.push({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
ul li ol li em strong i { @import url("@/assets/css/global.less");
list-style: none; @import url("@/assets/css/mypersonal.less");
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;
}
}
}
}
</style> </style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div>
<div class="rc-header"> <div class="rc-layout-container rc-one-column rc-max-width--xl">
<div class="rc-main"> <div class="rc-main">
<div class="rc-receiving"> <div class="rc-receiving">
<em>{{userisdelivery}}</em> <em>{{userisdelivery}}</em>

View File

@ -6,9 +6,47 @@
<tabs></tabs> <tabs></tabs>
<div class="online" ></div> <div class="online" ></div>
<div class="rc-top"></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> <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="usermain">
<div class="online bold rc-md-down"></div> <div class="online bold rc-md-down"></div>
<div class="rc-main"> <div class="rc-main">
@ -29,7 +67,7 @@
<i class="ts-row-title">活动促销</i> <i class="ts-row-title">活动促销</i>
<span>全场商品限时优惠</span> <span>全场商品限时优惠</span>
</div> </div>
<em @click="userget()">立即领取</em> <em class="ts-right-arr" @click="userget()">立即领取</em>
</div> </div>
</div> </div>
</div> </div>
@ -91,9 +129,10 @@
<span @click="usertanchu(item,1)">立即购买</span> <span @click="usertanchu(item,1)">立即购买</span>
</div> </div>
</div> </div>
<div class="online bold rc-md-down"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="rc-footimage rc-main"> <div class="rc-footimage rc-main">

View File

@ -1,18 +1,24 @@
// <!-- --> // <!-- -->
<template> <template>
<div class="container"> <div class="container rc-full-width">
<!-- <Myheader/> --> <Myheader></Myheader>
<p class="header">账号注册</p> <div class="content ts-max-width--460">
<div class="content"> <h2 class="rc-beta rc-text--center">账号注册</h2>
<van-field
v-model="tel" <div class="rc-layout-container rc-one-column">
placeholder="请输入手机号" <div class="rc-column">
:error-message="usertel" <input
class="van-field-one" class="ts-standard-input"
clearable v-model="tel"
/> placeholder="请输入手机号"
:error-message="usertel"
v-if="!ifpassword"
clearable
/>
</div>
</div>
<!-- <van-field <!-- <van-field
v-model="password" v-model="password"
type="password" type="password"
@ -21,34 +27,70 @@
clearable clearable
/> --> /> -->
<van-field <div class="rc-layout-container rc-two-column">
class="van-field-two" <div class="rc-column">
v-model="sms" <input
center v-if="!ifpassword"
clearable v-model="sms"
placeholder="请输入验证码" class="ts-standard-input ts-standard-input--two center"
center
> clearable
<!-- :error-message="test" --> 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">
<van-button :disabled="flag" slot="button" size="small" @click="sendCode" class="rc-use">{{ buttonmsg }}</van-button> <div class="usecheck rc-column rc-text--left">
<label>
</van-field> <input
<div class="usecheck"> type="checkbox"
<input type="checkBox" style="width:24px;height:24px" @click="checkBox()">我已阅读同意隐私声明和账号使用协议 @click="checkBox()"
</div> 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"> <div class="rc-layout-container rc-one-column">
<van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="register()" class="userbutton" >注册</van-button> <div class="rc-column">
<!-- <van-divider @click="toLogin">注册账户</van-divider> --> <input
</div> 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> </div>
</template> </template>
@ -285,291 +327,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@media screen and(min-width: 320px) and(max-width:768px) { @import url("../../assets/css/global.less");
.van-field-one{ @import url("../../assets/css/login.less");
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;
}
}
}
// /* 768px1920 *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> </style>

View File

@ -1,32 +1,37 @@
// <!-- -->
<template> <template>
<div class="container"> <div class="container rc-full-width">
<!-- <Myheader/> --> <Myheader></Myheader>
<p class="header">{{ usertitle ? "账号登录" : "" }}</p> <div class="content ts-max-width--460">
<div class="rc-header"> <h2 class="rc-beta rc-text--center">{{ usertitle ? "账号登录" : "" }}</h2>
<!-- <i>|</i> --> <!-- Deprecated : No tab switching as no password
<span <div class="rc-header">
v-for="(item, index) in swiperData" <span
:key="index" v-for="(item, index) in swiperData"
@click="selectGoods(item, index)" :key="index"
:class="activeIndex == index ? 'active' : 'unactive'" @click="selectGoods(item, index)"
>{{ item.title }}</span :class="activeIndex == index ? 'active' : 'unactive'"
> >{{ item.title }}</span
</div> >
<div class="content"> </div>
<van-field -->
class="van-field-one"
v-model="tel" <div class="rc-layout-container rc-one-column">
placeholder="请输入手机号" <div class="rc-column">
:error-message="usertel" <input
v-if="!ifpassword" class="ts-standard-input"
clearable v-model="tel"
/> placeholder="请输入手机号"
:error-message="usertel"
<van-field v-if="!ifpassword"
clearable
/>
</div>
</div>
<!-- Deprecated : No tab switching as no password
<input
v-model="text" v-model="text"
class="van-field-two" class="ts-standard-input ts-standard-input--two"
placeholder="请输入账号" placeholder="请输入账号"
v-if="ifpassword" v-if="ifpassword"
@ -41,53 +46,72 @@
v-if="ifpassword" v-if="ifpassword"
clearable clearable
/> />
<van-field -->
v-if="!ifpassword" <div class="rc-layout-container rc-two-column">
v-model="sms" <div class="rc-column">
class="van-field-two" <input
center v-if="!ifpassword"
clearable v-model="sms"
placeholder="请输入验证码" class="ts-standard-input ts-standard-input--two center"
center
> clearable
<van-button placeholder="请输入验证码"
:disabled="flag"
slot="button" >
size="small" </div>
@click="sendCode" <div class="rc-column">
class="rc-use" <button
>{{ buttonmsg }}</van-button :disabled="flag"
> slot="button"
</van-field> size="small"
<div class="usecheck"> @click="sendCode"
<input class="rc-use ts-standard-btn ts-standard-btn--two"
type="checkbox" >{{ buttonmsg }}</button
@click="checkBox()" >
style="width: 24px; height: 24px" </div>
v-model="inRank" </div>
/>使
</div> <div class="rc-layout-container rc-one-column">
<div class="rc-button"> <div class="usecheck rc-column rc-text--left">
<span>隐私政策</span> <label>
<nuxt-link :to="`/userlogin/edit/`"> <input
<span>注册账户</span> type="checkbox"
</nuxt-link> @click="checkBox()"
</div> style="width: 24px; height: 24px"
<div class="rc-user"> v-model="inRank"
<van-button />使
type="primary" </label>
:loading="loading" </div>
loading-text="登录..." </div>
size="large" <div class="rc-layout-container rc-two-column rc-button">
:disabled="zhud" <div class="rc-column rc-text--left">
@click="register()" <a href="#" class="rc-styled-link"><span>隐私政策</span></a>
class="userbutton" </div>
>登录</van-button <div class="rc-column rc-text--right">
> <nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
<!-- <van-divider @click="toLogin">注册账户</van-divider> --> <span>注册账户</span>
</div> </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> </div>
</template> </template>
@ -126,7 +150,7 @@ export default {
}; };
}, },
components: { components: {
// Myheader, Myheader
}, },
computed: { computed: {
usertel() { usertel() {
@ -350,286 +374,6 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// @import url("../../assets/css/global.less");
@media screen and(min-width: 320px) and(max-width:768px) { @import url("../../assets/css/login.less");
.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;
}
}
}
// /* 768px1920 *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;
}
}
}
</style> </style>