From 5f8154bb63456403c4c830f0947a8f3e9a499ff9 Mon Sep 17 00:00:00 2001 From: Vion Date: Mon, 17 Jan 2022 20:46:31 +0800 Subject: [PATCH] Index style update --- rc-busness/assets/css/global.less | 10 +++- rc-busness/assets/css/index.less | 95 +++++++++++++++---------------- rc-busness/components/header.vue | 4 +- rc-busness/pages/index.vue | 19 ++++--- 4 files changed, 65 insertions(+), 63 deletions(-) diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index 4dcc22de..ae5f2bdf 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -369,9 +369,13 @@ img, picture { display:block; li{ max-width:20rem; + min-width:18.75rem; width:22.8vw; //margin-right:.875rem; margin-left:2vw; + padding-left:1px; + padding-right:1px; + box-sizing: border-box; .rc-column{ span{ font-size:1.875rem; @@ -543,10 +547,10 @@ img, picture { { .ts-product-list { display:flex; - justify-content: space-between; + //justify-content: space-between; li{ - margin-left:0; - margin-right:0; + //margin-left:0; + //margin-right:0; } } } \ No newline at end of file diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index fc6f260e..2df02938 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -5,29 +5,28 @@ /deep/.van-swipe__indicator--active{ background-color: #E1001A; } -.rc-ma{ - .ul-zhuan{ - li{ - background: unset;; - img{ - border-radius: 50%; - } - &.active { - img{ - border: 3px solid #E2001A; - } - color: #E2001A; - - } - &.unactive { - color: #444444; - img{ - border: 3px solid #D7D7D7; - } - } + +li{ + background: unset;; + img{ + border-radius: 50%; + } + &.active { + img{ + border: 3px solid #E2001A; + } + color: #E2001A; + + } + &.unactive { + color: #444444; + img{ + border: 3px solid #D7D7D7; } } } + + .uservideo{ overflow: hidden; video{ @@ -39,8 +38,7 @@ .ul-dog{ display: none; } - .searchBara{ - position: fixed; + .searchBara{ width: 100%; position: fixed; top:66px; @@ -66,12 +64,11 @@ border-radius: 50%; opacity: 1; } - } - - .rc-login{ - width: 92%; - margin:0 auto; - } + } + .rc-login{ + width: 92%; + margin:0 auto; + } .userunlogin{ width: 100%; height: 0.60rem; @@ -122,7 +119,6 @@ .van-swipe-item { color: #fff; - height: 26.31rem; width: 100%; font-size: 0.20px; text-align: center; @@ -172,7 +168,6 @@ .uservideo{ width: 100%; height:auto; - max-height: 15.68rem; display: block; video{ max-width:100%; @@ -209,6 +204,7 @@ margin-top: 1.25rem; } p{ + color: #666666; font-size: .875rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; @@ -301,22 +297,22 @@ } } - .active { - font-size: 0.14rem; - img{ - border-width: 1px; - } - } - .unactive { - font-size: 0.14rem; - img{ - border-width: 1px; - } - } // .usermain{ // display: none; // } } +.active { + font-size: 0.14rem; + img{ + border-width: 1px; + } +} +.unactive { + font-size: 0.14rem; + img{ + border-width: 1px; + } +} @media screen and (min-width: 769px) @@ -518,14 +514,18 @@ img{ display: block; } img{ - width: 10vw; - height: 10vw; + width:100%; + height: auto; + object-fit: contain; display: block; } li{ + width: 10vw; + max-width:11rem; cursor: pointer; font-size: 16px; text-align: center; + overflow:hidden; } } @@ -548,7 +548,7 @@ img{ flex-direction: row; span{ - margin-top: 2.5rem; + margin-top: .5rem; display: block; } img{ @@ -559,11 +559,8 @@ img{ li{ cursor: pointer; font-size: 16px; - width: 9.875rem; text-align: center; - height: 9.875rem; - background: #F6F6F6; - border-radius: 50%; + margin-top:3rem; margin-left:3rem; } } diff --git a/rc-busness/components/header.vue b/rc-busness/components/header.vue index 7c10461f..2bd355ac 100644 --- a/rc-busness/components/header.vue +++ b/rc-busness/components/header.vue @@ -58,7 +58,7 @@ --> - + translations.feature.headerbar.pin @@ -196,7 +196,7 @@

帮助猫狗过最健康的生活。

- Royal Canin China + Royal Canin China