xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-02 02:06:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Style correction

Browse Source
This commit is contained in:
Vion 2022-01-18 17:18:39 +08:00
parent 5f8154bb63
commit 9115a4738d
24 changed files with 287 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
rc-busness/assets/css/global.less
View File

@ -278,7 +278,7 @@ img, picture {
width:100%; width:100%;
} }
.rc-top{ .rc-top{
margin-top: 74px; margin-top: 90px;
} }
.rc-list__header { .rc-list__header {
background: none; background: none;
@ -497,35 +497,40 @@ img, picture {
} }
h2{ h2{
font-size:20px; font-size:20px;
padding-bottom:1rem;
} }
.ts-scrollable .ts-scrollable
{ {
padding-bottom:1rem;
scrollbar-width: thin;
li li
{ {
margin-left: 30px; margin-left: 30px;
width: 8.125rem; width: 8.125rem;
height: 2.5rem; height: 2.5rem;
line-height: 40px; //line-height: 40px;
font-size: .875rem; font-size: .875rem;
padding:.375rem;
} }
/*
&::-webkit-scrollbar{ &::-webkit-scrollbar{
background:unset; height: 6px;
height:4px; width:50%;
background:transparent;
} }
&::-webkit-scrollbar-thumb{ &::-webkit-scrollbar-thumb{
background-color:#d7d7d7; background-color:#d7d7d7;
height:2px; border-radius:10px;
width:50%;
} }
&::-webkit-scrollbar-track{ &::-webkit-scrollbar-track{
background-color:ddd; //background-color:#ddd;
background-color:transparent;
height:2px;
} }
&::-webkit-scrollbar-button{ &::-webkit-scrollbar-button{
background:unset; background:unset;
} }
*/ /* */
} }
} }

64
rc-busness/assets/css/index.less
View File

@ -6,6 +6,19 @@
background-color: #E1001A; background-color: #E1001A;
} }
.ts-carousel-indicator{
/deep/.swiper-pagination-bullet{
margin-left:.5rem;
}
/deep/.swiper-pagination-bullet-active{
background:#E2001A;
}
&.center{
width:100%;
text-align: center;
}
}
li{ li{
background: unset;; background: unset;;
img{ img{
@ -38,6 +51,9 @@ li{
.ul-dog{ .ul-dog{
display: none; display: none;
} }
.ts-banner-swiper-container{
margin-bottom:2.5rem;
}
.searchBara{ .searchBara{
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -98,9 +114,6 @@ li{
} }
} }
.van-swipe{
z-index: 2;
}
.rc-usermessage{ .rc-usermessage{
span{ span{
font-size: 1rem; font-size: 1rem;
@ -117,6 +130,9 @@ li{
object-fit: cover; object-fit: cover;
} }
.van-swipe{
z-index: 2;
}
.van-swipe-item { .van-swipe-item {
color: #fff; color: #fff;
width: 100%; width: 100%;
@ -320,14 +336,21 @@ li{
.rc-selection{ .rc-selection{
display: none; display: none;
} }
.sw-center{ .sw-center{
display: none; display: none;
} }
.useraimg{ .useraimg{
width: 100%; width: 100%;
// height: 29.31rem; // height: 29.31rem;
object-fit: cover; object-fit: cover;
} }
.ts-banner-swiper-container{
position:relative;
.ts-carousel-indicator{
position:absolute;
bottom:.4rem;
}
}
.van-swipe-item { .van-swipe-item {
color: #fff; color: #fff;
height: 100%; height: 100%;
@ -346,15 +369,12 @@ object-fit: cover;
#xxxFullScreen { #xxxFullScreen {
background-color: white; background-color: white;
// margin-top: 100px; // margin-top: 100px;
#swiper1 { #swiper1,#swiper2 {
width: 100%;
overflow: hidden; overflow: hidden;
margin-top: 2.31rem; margin-top: 2.31rem;
}
h2{ h2{
padding-bottom: 5rem; padding-bottom: 5rem;
}
} }
.swiper-container2 { .swiper-container2 {
@ -363,10 +383,10 @@ object-fit: cover;
// overflow: visible !important; // overflow: visible !important;
position: relative; position: relative;
} }
#swiper1 .swiper-container .swiper-wrapper .swiper-slide { #swiper1 .swiper-container .swiper-wrapper .swiper-slide {
width: 100%; width: 100%;
//height: 6.18rem; //height: 6.18rem;
} }
/* 上一张 */ /* 上一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev { #swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {

4
rc-busness/assets/css/login.less
View File

@ -1,7 +1,9 @@
.container{ .container{
min-height:80vh; min-height:100vh;
height:100%; height:100%;
background-color:#f6f6f6; background-color:#f6f6f6;
display: flex;
flex-direction: column;
} }
.ts-max-width--460{ .ts-max-width--460{
border-radius: 3px; border-radius: 3px;

122
rc-busness/components/header.vue
View File

@ -58,11 +58,6 @@
</span> </span>
</button> </button>
--> -->
<a href="#" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='在哪购买' class="rc-btn rc-btn--icon rc-icon rc-pin--xs rc-iconography rc-interactive rc-xl-up" aria-label="pin">
<span class="rc-screen-reader-text">
translations.feature.headerbar.pin
</span>
</a>
<button data-js-trigger="search-bar" @click='searchturn' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='全文搜索' class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-interactive" aria-label="Search" role="menuitem" data-click-modifier=".rc-hidden"> <button data-js-trigger="search-bar" @click='searchturn' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='全文搜索' class="rc-btn rc-btn--icon rc-icon rc-search--xs rc-iconography rc-interactive" aria-label="Search" role="menuitem" data-click-modifier=".rc-hidden">
<span class="rc-screen-reader-text">translations.feature.headerbar.search</span> <span class="rc-screen-reader-text">translations.feature.headerbar.search</span>
</button> </button>
@ -75,16 +70,16 @@
<div class="rc-container"> <div class="rc-container">
<ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center"> <ul class="rc-list rc-list--blank rc-list--inline rc-list--align rc-header__center">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫">猫</a> <a href="https://royalcanin.com.cn/cats" class="rc-list__header" data-ref="nav-link" role="menuitem" title="猫">猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a> <a href="#/tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a> <a href="https://royalcanin.com.cn/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
</li> </li>
</ul> </ul>
<div class="submenu rc-layout-container rc-one-column rc-margin--none rc-xl-up"> <div class="submenu rc-layout-container rc-one-column rc-margin--none rc-xl-up">
@ -94,49 +89,49 @@
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/sub-nav-1.jpg" class="ts-head-img rc-margin-bottom--xs"> <img src="../assets/showimage/sub-nav-1.jpg" class="ts-head-img rc-margin-bottom--xs">
<a href="#cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a> <a href="https://royalcanin.com.cn/cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a>
<ul class="rc-list rc-list--blank rc-list--align test" role="menu"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/products" class="rc-list__link" role="menuitem">产品</a> <a href="#/cats/products" class="rc-list__link" role="menuitem">产品</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/breeds" class="rc-list__link" role="menuitem">品种</a> <a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a> <a href="https://royalcanin.com.cn/cats/getting-a-kitten" class="rc-list__link" role="menuitem">想养猫吗</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten" class="rc-list__link" role="menuitem">幼猫</a> <a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link" role="menuitem">幼猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a> <a href="https://royalcanin.com.cn/cats/kitten/health" class="rc-list__link" role="menuitem">健康和心情</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/sub-nav-2.jpg" class="ts-head-img rc-margin-bottom--xs"> <img src="../assets/showimage/sub-nav-2.jpg" class="ts-head-img rc-margin-bottom--xs">
<a href="#dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a>
<ul class="rc-list rc-list--blank rc-list--align test" role="menu"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a> <a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/breeds" class="rc-list__link" role="menuitem">品种</a> <a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a> <a href="https://royalcanin.com.cn/dogs/getting-a-puppy" class="rc-list__link" role="menuitem">想养只狗</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a> <a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link" role="menuitem">幼犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a> <a href="https://royalcanin.com.cn/dogs/puppy/health" class="rc-list__link" role="menuitem">健康和心情</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs"> <img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
<a href="#tailored-nutrition" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a> <a href="/" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
<ul class="rc-list rc-list--blank rc-list--align test" role="menu"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a> <a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a>
@ -148,13 +143,13 @@
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<img src="../assets/showimage/sub-nav-4.jpg" class="ts-head-img rc-margin-bottom--xs"> <img src="../assets/showimage/sub-nav-4.jpg" class="ts-head-img rc-margin-bottom--xs">
<a href="#about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a> <a href="https://royalcanin.com.cn/about" class="rc-list__header rc-margin--none" role="menuitem">关于我们</a>
<ul class="rc-list rc-list--blank rc-list--align test" role="menu"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a> <a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link" role="menuitem">我们的历史</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about" class="rc-list__link" role="menuitem">我们的价值观</a> <a href="https://royalcanin.com.cn/about" class="rc-list__link" role="menuitem">我们的价值观</a>
</li> </li>
<!-- <!--
<li class="rc-list__item"> <li class="rc-list__item">
@ -203,67 +198,67 @@
<div class="rc-column rc-double-width rc-padding-x--none--mobile rc-padding-right--none"> <div class="rc-column rc-double-width rc-padding-x--none--mobile rc-padding-right--none">
<ul class="rc-list rc-list--blank rc-list--align rc-list--two-column" role="menubar"> <ul class="rc-list rc-list--blank rc-list--align rc-list--two-column" role="menubar">
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<a href="#cats" class="rc-list__header" id="mega-nav-header-1" data-toggle="nav-list-1" role="menuitem">猫</a> <a href="https://royalcanin.com.cn/cats" class="rc-list__header" id="mega-nav-header-1" data-toggle="nav-list-1" role="menuitem">猫</a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-1" aria-labelledby="mega-nav-menu-1" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-1" aria-labelledby="mega-nav-menu-1" role="menu">
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-1" role="button">返回</button> <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-1" role="button">返回</button>
</li> </li>
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<a href="#cats" class="rc-list__header" title="Cat" role="menuitem">猫</a> <a href="https://royalcanin.com.cn/cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a> <a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/getting-a-kitten" class="rc-list__link ca" role="menuitem" title="Thinking of getting a cat">想养只猫</a> <a href="https://royalcanin.com.cn/cats/getting-a-kitten" class="rc-list__link ca" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten" class="rc-list__link ca" role="menuitem" title="Kitten">幼猫</a> <a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link ca" role="menuitem" title="Kitten">幼猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/cats/kitten/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<a href="#dogs" class="rc-list__header" role="menuitem" id="mega-nav-header-2" data-toggle="nav-list-2">犬</a> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header" role="menuitem" id="mega-nav-header-2" data-toggle="nav-list-2">犬</a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-2" aria-labelledby="mega-nav-menu-2" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-2" aria-labelledby="mega-nav-menu-2" role="menu">
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-2" role="button">返回</button> <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-2" role="button">返回</button>
</li> </li>
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<a href="#dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a> <a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/getting-a-puppy" class="rc-list__link ca" role="menuitem" title="Thinking of getting a dog">想养只犬</a> <a href="https://royalcanin.com.cn/dogs/getting-a-puppy" class="rc-list__link ca" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy" class="rc-list__link ca" role="menuitem" title="Puppy">幼犬</a> <a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link ca" role="menuitem" title="Puppy">幼犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/dogs/puppy/health" class="rc-list__link ca" role="menuitem" title="Health and wellbeing">健康和心情</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a> <a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button> <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
</li> </li>
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<a href="#tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a> <a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a> <a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
@ -275,16 +270,16 @@
</li> </li>
<li class="rc-list__item rc-list__item--group"> <li class="rc-list__item rc-list__item--group">
<a href="#about" class="rc-list__header" role="menuitem" id="mega-nav-header-4" data-toggle="nav-list-4">关于我们</a> <a href="https://royalcanin.com.cn/about" class="rc-list__header" role="menuitem" id="mega-nav-header-4" data-toggle="nav-list-4">关于我们</a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-4" aria-labelledby="mega-nav-menu-4" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-list-4" aria-labelledby="mega-nav-menu-4" role="menu">
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-4" role="button">返回</button> <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-4" role="button">返回</button>
</li> </li>
<li class="rc-list__item rc-md-down"> <li class="rc-list__item rc-md-down">
<a href="#about" class="rc-list__header" title="About" role="menuitem">关于我们</a> <a href="https://royalcanin.com.cn/about" class="rc-list__header" title="About" role="menuitem">关于我们</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a> <a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link ca" role="menuitem" title="Our history">我们的历史</a>
</li> </li>
<!-- <!--
<li class="rc-list__item"> <li class="rc-list__item">
@ -311,15 +306,10 @@
<div class="rc-column rc-padding-x--none"> <div class="rc-column rc-padding-x--none">
<ul class="rc-list rc-list--blank rc-list--align rc-btn-offset--top" role="menu"> <ul class="rc-list rc-list--blank rc-list--align rc-btn-offset--top" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="#about/contact"> <a class="rc-list__link rc-icon rc-email--xs rc-iconography--xs" role="menuitem" href="https://royalcanin.com.cn/about/contact">
与我们联系 与我们联系
</a> </a>
</li> </li>
<li class="rc-list__item">
<a class="rc-list__link rc-icon rc-pin--xs rc-iconography--xs" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='headerBtnClick' evt-val='在哪购买' role="menuitem" href="#">
在哪里购买
</a>
</li>
<li class="rc-list__item"> <li class="rc-list__item">
<a class="rc-list__link rc-icon rc-language--xs ts-weibo--xs" role="menuitem" target='_blank' href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1"> <a class="rc-list__link rc-icon rc-language--xs ts-weibo--xs" role="menuitem" target='_blank' href="https://weibo.com/chinaroyalcanin?topnav=1&wvr=6&topsug=1&is_all=1">
微博 微博
@ -349,39 +339,9 @@
</section> </section>
</div> </div>
<!-- Popup menu end--> <!-- Popup menu end-->
</div>
<!-- Where to buy modal -->
<aside role="modal" class="rc-modal rc-hidden" data-modal-target="modal-whereToBuy">
<div class="rc-modal__container">
<header class="rc-modal__header">
<button class="rc-btn rc-icon rc-btn--icon-label rc-modal__close rc-close--xs rc-iconography" data-modal-trigger="modal-whereToBuy">关闭</button>
</header>
<section class="rc-modal__content rc-scroll--y">
<div class="rc-margin-top--md">
<h2 class="rc-gamma rc-text--center">我能在哪买到Royal Canin 的产品</h2>
<p class='rc-text--center'>
您可以点击下面的链接进入到我们的电商店铺
<br />
</p>
</div>
<div class="rc-btn-group">
<a href="https://royalcanin.tmall.com/shop/view_shop.htm?spm=a1z10.3-b-s.w5001-17212536142.3.1284526cyHC5If&scene=taobao_shop" target='_blank' class="rc-btn rc-btn--one ts-flex-center">
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/tm-logo.png" alt="天猫旗舰店" />
</a>
<a href="https://mall.jd.com/index-650686.html" class="rc-btn rc-btn--one ts-flex-center ts-btn-img--70" target='_blank'>
<img src="#profiles/custom/royal_canin_profile/themes/royal_canin/images/jd-logo.png" alt="京东旗舰店" />
</a>
</div>
</section>
</div>
</aside>
<!-- Where to buy modal end -->
</div>
</template> </template>
<script> <script>
const isReload={
needload:false
};
export default { export default {
data() { data() {
return { return {
@ -404,10 +364,10 @@ export default {
this.usermessage=usernot; this.usermessage=usernot;
} }
//debugger; //debugger;
if(isReload.needload) if(isInitialized)
location.reload(); location.reload();
if(isReload.needload==false) if(!isInitialized)
isReload.needload=true; isInitialized=true;
//console.log(this.loginornot); //console.log(this.loginornot);
/* /*
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild) if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)

55
rc-busness/components/rc-footer.vue
View File

@ -1,69 +1,55 @@
<template> <template>
<footer class="rc-bg-colour--interface-dark rc-padding-bottom--sm" role="contentinfo"> <footer class="rc-bg-colour--interface-dark rc-padding-bottom--sm" role="contentinfo">
<div class="rc-max-width--lg rc-scroll--y"> <div class="rc-max-width--lg rc-scroll--y">
<div class="footer-block1 rc-layout-container rc-five-column rc-padding-x--xs rc-border-colour--interface rc-md-up rc-padding-left--none">
<div class="rc-column rc-padding-left--none" data-component="nav-track" data-nav-name="Footer navigation">
<nav class="rc-menubar">
<ul class="rc-list rc-list--blank rc-list--inverse" style="background-color: transparent;">
<li class="rc-list__item">
<a href="javascript:;" class="rc-list__link rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-pin--xs rc-brand3" data-ref="nav-link" role="menuitem" title="Where to buy" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='footerBtnClick' evt-val='在哪购买'>在哪里购买</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="rc-divider rc-md-up"></div>
<div class="footer-block2 rc-layout-container rc-three-column rc-padding-x--xs rc-border-colour--interface"> <div class="footer-block2 rc-layout-container rc-three-column rc-padding-x--xs rc-border-colour--interface">
<div class="rc-column rc-double-width rc-padding-x--xs"> <div class="rc-column rc-double-width rc-padding-x--xs">
<nav class="rc-padding-x--xs" data-toggle-group="mobile" data-toggle-effect="rc-expand--vertical" role="navigation" data-component="nav-track" data-nav-name="Footer navigation"> <nav class="rc-padding-x--xs" data-toggle-group="mobile" data-toggle-effect="rc-expand--vertical" role="navigation" data-component="nav-track" data-nav-name="Footer navigation">
<ul class="rc-list ts-list--four-column rc-list--blank rc-list--align rc-list--inverse" role="menubar"> <ul class="rc-list ts-list--four-column rc-list--blank rc-list--align rc-list--inverse" role="menubar">
<li class="rc-list__item rc-list__item--group" role="none"> <li class="rc-list__item rc-list__item--group" role="none">
<a href="#cats" class="rc-list__header" role="menuitem" id="nav-footer-top-1" data-toggle="nav-footer-1">猫</a> <a href="https://royalcanin.com.cn/cats" class="rc-list__header" role="menuitem" id="nav-footer-top-1" data-toggle="nav-footer-1">猫</a>
<ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-1" aria-labelledby="nav-footer-top-1"> <ul class="rc-list rc-list--blank rc-list--align" role="menu" id="nav-footer-1" aria-labelledby="nav-footer-top-1">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a> <a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/getting-a-kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a cat">想养只猫</a> <a href="https://royalcanin.com.cn/cats/getting-a-kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a cat">想养只猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Kitten">幼猫</a> <a href="https://royalcanin.com.cn/cats/kitten" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Kitten">幼猫</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#cats/kitten/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/cats/kitten/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group" role="none"> <li class="rc-list__item rc-list__item--group" role="none">
<a href="#dogs" class="rc-list__header" role="menuitem" id="nav-footer-top-2" data-toggle="nav-footer-2"> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header" role="menuitem" id="nav-footer-top-2" data-toggle="nav-footer-2"
犬 >犬
</a> </a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-2" aria-labelledby="nav-footer-top-2" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-2" aria-labelledby="nav-footer-top-2" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a> <a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Products">产品</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Breeds">品种</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/getting-a-puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a dog">想养只犬</a> <a href="https://royalcanin.com.cn/dogs/getting-a-puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Thinking of getting a dog">想养只犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Puppy">幼犬</a> <a href="https://royalcanin.com.cn/dogs/puppy" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Puppy">幼犬</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#dogs/puppy/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a> <a href="https://royalcanin.com.cn/dogs/puppy/health" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Health and wellbeing">健康和心情</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group" role="none"> <li class="rc-list__item rc-list__item--group" role="none">
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"> <a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
定制营养方案 >定制营养方案
</a> </a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
@ -75,15 +61,15 @@
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group" role="none"> <li class="rc-list__item rc-list__item--group" role="none">
<a href="#about" class="rc-list__header" id="nav-footer-top-4" data-toggle="nav-footer-4" role="menuitem"> <a href="https://royalcanin.com.cn/about" class="rc-list__header" id="nav-footer-top-4" data-toggle="nav-footer-4" role="menuitem"
关于我们 >关于我们
</a> </a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-4" aria-labelledby="nav-footer-top-4" role="menu"> <ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-4" aria-labelledby="nav-footer-top-4" role="menu">
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about#growth-phase1" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our history">我们的历史</a> <a href="https://royalcanin.com.cn/about#growth-phase1" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our history">我们的历史</a>
</li> </li>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="#about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a> <a href="https://royalcanin.com.cn/about" class="rc-list__link" data-ref="nav-link" role="menuitem" title="Our values">我们的价值观</a>
</li> </li>
</ul> </ul>
@ -98,9 +84,6 @@
<div class="rc-layout-container rc-one-column rc-md-down"> <div class="rc-layout-container rc-one-column rc-md-down">
<div class="rc-column rc-padding-x--none"> <div class="rc-column rc-padding-x--none">
<a href="javascript:;" data-modal-trigger="modal-whereToBuy" onclick='bindTracking(this)' evt-name='页内弹窗' evt-cat='footererBtnClick' evt-val='在哪购买' class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-bag--xs rc-brand3" title="Where to buy" role="menuitem">
在哪购买
</a>
<!-- <!--
<a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-language--xs rc-brand3" role="menuitem" data-modal-trigger="country-lang-selector"> <a class="rc-btn rc-btn--inverse rc-btn--icon-label rc-icon rc-language--xs rc-brand3" role="menuitem" data-modal-trigger="country-lang-selector">
Language Language
@ -220,9 +203,9 @@
<div class="rc-column rc-text--center rc-padding-y--none"> <div class="rc-column rc-text--center rc-padding-y--none">
<span class="">法律声明 ©2021 ROYAL CANIN, Inc.</span> <span class="">法律声明 ©2021 ROYAL CANIN, Inc.</span>
<br/> <br/>
<a target='_blank' href='#privacy'><span class="">隐私声明</span></a> <a target='_blank' href='https://royalcanin.com.cn/#privacy'><span class="">隐私声明</span></a>
&nbsp; | &nbsp; &nbsp; | &nbsp;
<a target='_blank' href='#declaration'><span class="">法律声明</span></a> <a target='_blank' href='https://royalcanin.com.cn/declaration'><span class="">法律声明</span></a>
</div> </div>
</div> </div>

8
rc-busness/nuxt.config.js
View File

@ -1,5 +1,5 @@
const trackingScript = 'var dataLayer = window.dataLayer = window.dataLayer || [];dataLayer.push({"user":{"sitecoreId":"00000000-0000-0000-0000-000000000000","locale":"zh-HK"},"session":{"id":"vvfwez43vfoomct4y3yqneqy"},"site":{"country":"HK","id":"RCGlobalMC1","environment":"prd"},"page":{"type":"Start of Life Page","hitTimestamp":"2020-10-16T16:26:21.7350880+00:00","topic":"Collecting your kitten and their first week with you","theme":"Cat"},"pet":{"specieId":"2"}});'; const trackingScript = 'var dataLayer = window.dataLayer = window.dataLayer || [];dataLayer.push({"user":{"sitecoreId":"00000000-0000-0000-0000-000000000000","locale":"zh-HK"},"session":{"id":"vvfwez43vfoomct4y3yqneqy"},"site":{"country":"HK","id":"RCGlobalMC1","environment":"prd"},"page":{"type":"Start of Life Page","hitTimestamp":"2020-10-16T16:26:21.7350880+00:00","topic":"Collecting your kitten and their first week with you","theme":"Cat"},"pet":{"specieId":"2"}});';
const assetsUrl = 'var assetsUrl="/royalcanin-cdn-assets-new/css_js/";'; const assetsUrl = 'var assetsUrl="/royalcanin-cdn-assets-new/css_js/";var isInitialized=false;';
export default { export default {
// Global page headers: https://go.nuxtjs.dev/config-head // Global page headers: https://go.nuxtjs.dev/config-head
@ -23,7 +23,7 @@ export default {
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1,target-densitydpi =1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' },
{ hid: 'description', name: 'description', content: '' }, { hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' } { name: 'format-detection', content: 'telephone=no' }
], ],
@ -38,7 +38,8 @@ export default {
css: [ css: [
'vant/lib/index.css', 'vant/lib/index.css',
'element-ui/lib/theme-chalk/index.css', 'element-ui/lib/theme-chalk/index.css',
{src:'@/assets/css/royalcanin-custom.css'}, { src:'@/assets/css/global.less'},
{ src:'@/assets/css/royalcanin-custom.css'},
{ src: "swiper/css/swiper.css" } { src: "swiper/css/swiper.css" }
], ],
@ -49,6 +50,7 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [ plugins: [
'@/plugins/vant', '@/plugins/vant',
'@/plugins/swiper',
'@/plugins/ElementUI', '@/plugins/ElementUI',
{ src: '@/plugins/localStorage', ssr: false }, { src: '@/plugins/localStorage', ssr: false },

265
rc-busness/pages/index.vue
View File

@ -1,17 +1,18 @@
<template> <template>
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<unlogin></unlogin>
<!-- Suppose in header end --> <!-- Suppose in header end -->
<div class="ts-banner-swiper-container">
<van-swipe :autoplay="3000" class="" touchable> <swiper :options="headerSwiperOption">
<van-swipe-item v-for="(banner, index) in showingBanners" :key="index"> <swiper-slide v-for="(banner, index) in showingBanners" :key="index">
<img :src="banner.src" class="useraimg"/> <a :href="banner.link" target="_blank">
</van-swipe-item> <img :src="banner.src" class="useraimg"/>
</van-swipe> </a>
</swiper-slide>
</swiper>
<div id="homeBannerSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
</div>
<div class="online bold rc-md-down"></div> <div class="online bold rc-md-down"></div>
<div id="fixed-catbar-seperator"></div> <div id="fixed-catbar-seperator"></div>
@ -40,11 +41,12 @@
<!-- <h2>明星猫粮</h2> --> <!-- <h2>明星猫粮</h2> -->
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing"> <div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
<!-- 内容 --> <!-- 内容 -->
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1"> <div class="rc-full-width rc-padding-y--md" id="swiper1">
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2> <h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
<!-- 轮播图 --> <!-- 轮播图 -->
<van-swipe class="rc-padding-bottom--md" touchable> <div class="ts-carousel-container">
<van-swipe-item v-for="(item, index) in catlistvideo" :key="index"> <swiper class="rc-padding-bottom--md" :options="catStarProductswiperOption">
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
<div class="rc-video"> <div class="rc-video">
<div class="uservideo"> <div class="uservideo">
<video controls="" :poster=item.catimage> <video controls="" :poster=item.catimage>
@ -53,7 +55,7 @@
</div> </div>
<div class="rc-right"> <div class="rc-right">
<img :src=item.catimage alt=""> <img :src=item.productimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
@ -68,7 +70,7 @@
</video> </video>
</div> </div>
<img :src=item.catimage alt=""> <img :src=item.productimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
@ -77,23 +79,20 @@
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i> <i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
</div> </div>
</div> </div>
</van-swipe-item> </swiper-slide>
</van-swipe> </swiper>
<div id="catStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
</div>
</div> </div>
</div> </div>
<div class="online bold" v-show="onemao"></div> <div class="online bold" v-show="onemao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao"> <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
<h2 class="rc-beta rc-text--center" >全价猫湿粮</h2> <h2 class="rc-beta rc-text--center" >全价猫湿粮</h2>
<van-tabs @change='catclick' class="van-tabs"> <van-tabs @change='catclick' class="van-tabs" v-if="onemao">
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title"> <van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
<div class="rc-contair"> <div class="rc-contair">
<ul class="ts-product-list rc-margin-bottom--lg"> <ul class="ts-product-list rc-margin-bottom--lg">
@ -160,7 +159,7 @@
<div class="rc-column"> <div class="rc-column">
<div class="rc-click" @click="selectproduce(item,index)"> <div class="rc-click" @click="selectproduce(item,index)">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<i>0.001{{item.price}}</i> <i>{{item.ecprice}}</i>
</div> </div>
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong> <strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
</div> </div>
@ -181,7 +180,7 @@
<div class="online bold" v-show="twomao"></div> <div class="online bold" v-show="twomao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan"> <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
<h2 class="rc-beta rc-text--center">全价猫干粮</h2> <h2 class="rc-beta rc-text--center">全价猫干粮</h2>
<van-tabs @change='catclick' class="van-tabs"> <van-tabs @change='catclick' class="van-tabs" v-if="twomao">
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title"> <van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
<div class="rc-contair"> <div class="rc-contair">
<ul class="ts-product-list rc-margin-bottom--lg"> <ul class="ts-product-list rc-margin-bottom--lg">
@ -194,7 +193,7 @@
<div class="rc-column"> <div class="rc-column">
<div class="rc-click" @click="selectproduce(item,index)"> <div class="rc-click" @click="selectproduce(item,index)">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<i>0.001{{item.price}}</i> <i>{{item.ecprice}}</i>
</div> </div>
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong> <strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
</div> </div>
@ -279,8 +278,9 @@
<h2 class="rc-beta rc-text--center">{{dogtitle}}</h2> <h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<van-swipe class="rc-padding-bottom--md"> <div class="ts-carousel-container">
<van-swipe-item v-for="(item, key) in doglistvideo" :key="key"> <swiper class="rc-padding-bottom--md" :options="dogStarProductswiperOption" v-if="dogshow">
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
<div class="rc-video"> <div class="rc-video">
<div class="uservideo"> <div class="uservideo">
<video controls="" :poster=item.catimage> <video controls="" :poster=item.catimage>
@ -289,7 +289,7 @@
</div> </div>
<div class="rc-right"> <div class="rc-right">
<img :src=item.catimage alt=""> <img :src=item.productimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
@ -304,7 +304,7 @@
</video> </video>
</div> </div>
<img :src=item.catimage alt=""> <img :src=item.productimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
@ -314,8 +314,10 @@
</div> </div>
</div> </div>
</van-swipe-item> </swiper-slide>
</van-swipe> </swiper>
<div id="dogStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
</div>
</div> </div>
@ -327,7 +329,7 @@
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi"> <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2> <h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
<van-tabs @change='userdog' class="van-tabs"> <van-tabs @change='userdog' class="van-tabs" v-if="threemao">
<div class="online bold rc-md-down" v-show="threemao"></div> <div class="online bold rc-md-down" v-show="threemao"></div>
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title"> <van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
<div class="online bold" v-show="threemao"></div> <div class="online bold" v-show="threemao"></div>
@ -444,7 +446,7 @@
<div class="online bold" v-show="fourmao"></div> <div class="online bold" v-show="fourmao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan"> <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
<h2 class="rc-beta rc-text--center">全价犬干粮</h2> <h2 class="rc-beta rc-text--center">全价犬干粮</h2>
<van-tabs @change='userdog' class="van-tabs"> <van-tabs @change='userdog' class="van-tabs" v-if="fourmao">
<div class="online bold" v-show="fourmao"></div> <div class="online bold" v-show="fourmao"></div>
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title"> <van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
<div class="usermain"> <div class="usermain">
@ -555,7 +557,7 @@
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang"> <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
<h2 class="rc-beta rc-text--center">处方用粮</h2> <h2 class="rc-beta rc-text--center">处方用粮</h2>
<van-tabs @change='userclick' class="van-tabs"> <van-tabs @change='userclick' class="van-tabs" v-if="fivemao">
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title"> <van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
<div class="rc-contair"> <div class="rc-contair">
<ul class="ts-product-list rc-margin-bottom--lg"> <ul class="ts-product-list rc-margin-bottom--lg">
@ -792,22 +794,24 @@
], ],
'pc':[ 'pc':[
{src:"/images/banner/pc-banner1.png",link:""}, {src:"/images/banner/pc-banner1.png",link:""},
{src:"/images/banner/pc-banner2.png",link:""} {src:"/images/banner/pc-banner2.png",link:""},
{src:"/images/banner/pc-banner3.png",link:""},
{src:"/images/banner/pc-banner4.png",link:""}
] ]
}, },
showingBanners:[], showingBanners:[],
userdoglist: [ userdoglist: [
{ {
title: "小型犬", title: "小型犬",
catimage: require("../assets/cat.png"), catimage: "/images/dog/small.png",
}, },
{ {
title: "中型犬", title: "中型犬",
catimage: require("../assets/four.png"), catimage: "/images/dog/medium.png",
}, },
{ {
title: "大型犬", title: "大型犬",
catimage: require("../assets/one.png"), catimage: "/images/dog/big.png",
}, },
], ],
@ -836,10 +840,10 @@
discountlist: [ discountlist: [
{ {
title: "明星猫粮", title: "明星猫粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养', detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
catimage: require("../assets/star-cat.png"), catimage: require("../assets/star-cat.png"),
price:'￥2' price:'￥2'
}, },
{ {
title: "猫湿粮", title: "猫湿粮",
@ -913,64 +917,72 @@
], ],
catlistvideo: [ catlistvideo: [
{ {
title: "明星猫粮", title: "主食级猫湿粮",
video:"/images/cat/one.mp4", video:"/images/cat/one.mp4",
catimage: "/images/cat/one.jpg", catimage: "/images/cat/one.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养', productimage: "/images/cat/star-1.png",
price:'¥123.45', detail:'为10柔软细腻慕斯 适合离乳期幼猫舔食',
price:'¥77',
}, },
{ {
title: "猫湿粮", title: "幼猫成长专属",
video:"/images/cat/two.mp4", video:"/images/cat/two.mp4",
catimage: "/images/cat/two.jpg", catimage: "/images/cat/two.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养', productimage: "/images/cat/star-2.png",
price:'¥123.45', detail:'支持幼猫自身保护力 为快速生长提供足够能量',
price:'¥147',
}, },
{ {
title: "猫干粮", title: "室内成猫专属",
video:"/images/cat/three.mp4", video:"/images/cat/three.mp4",
catimage: "/images/cat/three.jpg", catimage: "/images/cat/three.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养', productimage: "/images/cat/star-3.png",
price:'¥123.45', detail:'高易消化蛋白 减少粪便量和异味',
price:'¥140',
}, },
{ {
title: "猫干粮", title: "英短成猫专属",
video:"/images/cat/four.mp4", video:"/images/cat/four.mp4",
catimage: "/images/cat/four.jpg", catimage: "/images/cat/four.jpg",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养', productimage: "/images/cat/star-4.png",
price:'¥123.45', detail:'增强肌肉质量 支持骨骼与关节健康',
price:'¥183',
}, },
], ],
doglistvideo: [ doglistvideo: [
{ {
title: "明星犬粮", title: "主食级狗湿粮",
video:"/images/dog/one.mp4", video:"/images/dog/one.mp4",
catimage: "/images/dog/one.jpg", catimage: "/images/dog/one.jpg",
detail:'为10月龄及以上成犬量身打造的精准营养', productimage: "/images/cat/star-1.png",
price:'¥123.45', detail:'柔软细腻慕斯 适合离乳期幼犬舔食',
price:'¥77',
}, },
{ {
title: "狗湿粮", title: "贵宾成犬专属",
video:"/images/dog/two.mp4", video:"/images/dog/two.mp4",
catimage: "/images/dog/two.jpg", catimage: "/images/dog/two.jpg",
detail:'为10月龄及以上英国成犬量身打造的精准营养', productimage: "/images/cat/star-2.png",
price:'¥123.45', detail:'护肤靓毛 理想体态',
price:'¥241',
}, },
{ {
title: "狗干粮", title: "小型犬成犬专属",
video:"/images/dog/three.mp4", video:"/images/dog/three.mp4",
catimage: "/images/dog/three.jpg", catimage: "/images/dog/three.jpg",
detail:'为10月龄及以上英国犬成犬量身打造的精准营养', productimage: "/images/cat/star-3.png",
price:'¥123.45', detail:'亮泽被毛 呵护牙齿',
price:'¥121',
}, },
{ {
title: "狗干粮", title: "离乳期全价奶糕",
video:"/images/dog/four.mp4", video:"/images/dog/four.mp4",
catimage: "/images/dog/four.jpg", catimage: "/images/dog/four.jpg",
detail:'为10月龄及以上英国成犬量身打造的精准营养', productimage: "/images/cat/star-4.png",
price:'¥123.45', detail:'高易再水合颗粒 帮助增强保护健康成长',
price:'¥88',
}, },
], ],
@ -1044,39 +1056,74 @@
// }, // },
], ],
swiperOption: { headerSwiperOption: {
loop: true, loop: true,
slidesPerView: 'auto', slidesPerView: 'auto',
centeredSlides: true, centeredSlides: true,
speed:1000, speed:1000,
spaceBetween: 30, spaceBetween: 0,
// autoplay: true, autoplay: true,
loopAdditionalSlides: 100, pagination: {
pagination: { el: '#homeBannerSwiperPagnation'
el: '.swiper-pagination', },
dynamicBullets: true paginationClickable: true,
}, loopAdditionalSlides: 100,
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev' prevEl: '.swiper-button-prev'
},
on: {
slideChange(Swiper) {
}, },
on: { tap() {
slideChange(Swiper) {
//console.log('onSlideChangeEnd',this); }
// vm.ifadroind('','',this.realIndex); }
vm.useraindex=this.realIndex; },
}, catStarProductswiperOption: {
tap() { loop: true,
//console.log('onTap', this); slidesPerView: 'auto',
} centeredSlides: true,
// slideChange() { speed:1000,
// console.log('onSlideChangeEnd', this); spaceBetween: 30,
// }, // autoplay: true,
// tap() { loopAdditionalSlides: 100,
// console.log('onTap', this); pagination: {
// } el: '#catStarSwiperPagnation',
} },
}, navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChange(Swiper) {
vm.useraindex=this.realIndex;
},
tap() {
}
}
},
dogStarProductswiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
speed:1000,
spaceBetween: 30,
// autoplay: true,
loopAdditionalSlides: 100,
pagination: {
el: '#dogStarSwiperPagnation',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChange(Swiper) {},
tap() {}
}
},
} }
}, },
components:{ components:{

4
rc-busness/plugins/swiper.js Normal file
View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

BIN
rc-busness/static/images/banner/pc-banner1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 134 KiB

BIN
rc-busness/static/images/banner/pc-banner2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 300 KiB

BIN
rc-busness/static/images/banner/pc-banner3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
rc-busness/static/images/banner/pc-banner4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
rc-busness/static/images/cat/star-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
rc-busness/static/images/cat/star-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
rc-busness/static/images/cat/star-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
rc-busness/static/images/cat/star-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
rc-busness/static/images/dog/big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
rc-busness/static/images/dog/medium.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
rc-busness/static/images/dog/small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
rc-busness/static/images/dog/star-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
rc-busness/static/images/dog/star-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
rc-busness/static/images/dog/star-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
rc-busness/static/images/dog/star-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
rc-busness/static/images/dog/two.mp4 Normal file
View File

Binary file not shown.