From e3cd2e58badaf248997155bcdf1704678984ae63 Mon Sep 17 00:00:00 2001 From: Vion Date: Wed, 12 Jan 2022 17:02:35 +0800 Subject: [PATCH] userlogin / personal/mypersonal.vue / producted albumn updated --- rc-busness/assets/css/global.less | 70 +- rc-busness/assets/css/login.less | 100 +-- rc-busness/assets/css/mypersonal.less | 473 ++++++++++++++ rc-busness/assets/css/producted.less | 27 +- rc-busness/assets/css/royalcanin-custom.css | 9 + rc-busness/assets/image/ico-login.svg | 20 + rc-busness/components/header.vue | 9 +- rc-busness/pages/index.vue | 5 +- rc-busness/pages/personal/mypersonal.vue | 602 ++---------------- rc-busness/pages/personal/quiry.vue | 4 +- rc-busness/pages/productdetails/producted.vue | 49 +- rc-busness/pages/userlogin/edit.vue | 404 +++--------- rc-busness/pages/userlogin/login.vue | 454 +++---------- 13 files changed, 895 insertions(+), 1331 deletions(-) create mode 100644 rc-busness/assets/css/mypersonal.less create mode 100644 rc-busness/assets/image/ico-login.svg 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 @@ + + + + + + + + + + + + + + + + + + + + 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 @@ - +

translations.feature.headerbar.alternatelogotext + + + -
- -
- - -
- 当前积分:{{ rcrcord }} - 积分明细 -
+
+
+ +
+
+
+ +
+
+
+
+ 当前积分:{{ rcrcord }} + 积分明细 +
-
- 距离升级还差:{{ rcvalue }} -
-
- - -
-
- 0 - 5000 - 10000 -
-
+
+ 距离升级还差: {{ rcvalue }} +
+
+ +
+
+ 0 + 5000 + 10000 +
+
+
+
+ +
我的订单 - 查看全部 + 查看全部
-
+
  • @@ -66,9 +75,14 @@
-
+
+ +
+ +
+

服务工具

-
+
@@ -81,6 +95,8 @@
+
+
@@ -402,492 +418,6 @@ this.$router.push({ \ 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 @@