userlogin / personal/mypersonal.vue / producted albumn updated

This commit is contained in:
Vion
2022-01-12 17:02:35 +08:00
parent abd4ea6a6b
commit e3cd2e58ba
13 changed files with 895 additions and 1331 deletions

View File

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

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

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 {
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;

View File

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

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