mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
Merge branch 'sit-Leung' into sit-Carl
# Conflicts: # rc-busness/components/header.vue # rc-busness/pages/index.vue
This commit is contained in:
Vion
commit
bca2c24f98
@ -201,32 +201,27 @@ export const userque = (stype) => {
|
||||
|
||||
|
||||
//标品全部信息
|
||||
export const biaomessage = (stype,name) => {
|
||||
console.log(stype);
|
||||
if(stype.length>1){
|
||||
console.log("========");
|
||||
let list={};
|
||||
stype.map(item=>{
|
||||
console.log(item);
|
||||
list=item
|
||||
})
|
||||
var str = "?";
|
||||
for(var key in list){
|
||||
str = str + key + "=" + list[key] + "&";
|
||||
}
|
||||
stype = str.substr(0,str.length-1);
|
||||
var data = {
|
||||
page:1,
|
||||
row:10
|
||||
}
|
||||
return fetch('product/query'+stype, data, 'POST' )
|
||||
}else{
|
||||
console.log('-==');
|
||||
return fetch('product/query?petType='+stype,data, 'POST' )
|
||||
|
||||
}
|
||||
|
||||
|
||||
export const biaomessage = (stype,name,curPage,curRow) => {
|
||||
if(!curPage)
|
||||
curPage=1;
|
||||
if(!curRow)
|
||||
curRow=10;
|
||||
let queryTail='&page='+curPage+'&rows='+curRow;
|
||||
if(stype.length>1){
|
||||
let list={};
|
||||
stype.map(item=>{
|
||||
console.log(item);
|
||||
list=item
|
||||
})
|
||||
var str = "?";
|
||||
for(var key in list){
|
||||
str = str + key + "=" + list[key] + "&";
|
||||
}
|
||||
stype = str.substr(0,str.length-1);
|
||||
return fetch('product/query'+stype+queryTail, '', 'POST' )
|
||||
}else{
|
||||
return fetch('product/query?petType='+stype+queryTail, '', 'POST' )
|
||||
}
|
||||
}
|
||||
|
||||
export const searchchanpin = (stype) => {
|
||||
|
||||
@ -38,8 +38,7 @@ img, picture {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
&:after{
|
||||
content:"";
|
||||
width:154px;
|
||||
|
||||
}
|
||||
li{
|
||||
border: 1px solid #D7D7D7;
|
||||
@ -151,11 +150,9 @@ img, picture {
|
||||
flex-wrap: nowrap;
|
||||
text-align: center;
|
||||
width: 86%;
|
||||
&::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
li{
|
||||
border-radius: 100px;
|
||||
flex-shrink:0;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
@ -345,6 +342,9 @@ img, picture {
|
||||
font-size:.75rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
&::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -369,17 +369,25 @@ img, picture {
|
||||
display:block;
|
||||
li{
|
||||
max-width:20rem;
|
||||
margin-right:.9rem;
|
||||
margin-left:.9rem;
|
||||
//margin-right:.875rem;
|
||||
margin-left:2.2vw;
|
||||
.rc-column{
|
||||
span{
|
||||
font-size:1.875rem;
|
||||
height: 5.2rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n+1){
|
||||
margin-left:0;
|
||||
}
|
||||
&:nth-child(4n){
|
||||
//margin-right:0;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width:20rem;
|
||||
width:100%;
|
||||
max-width:320px;
|
||||
min-width:160px;
|
||||
}
|
||||
}
|
||||
.ts-right-arr {
|
||||
@ -489,12 +497,30 @@ img, picture {
|
||||
{
|
||||
li
|
||||
{
|
||||
margin-left: 40px;
|
||||
margin-left: 30px;
|
||||
width: 8.125rem;
|
||||
height: 2.5rem;
|
||||
line-height: 40px;
|
||||
font-size: .875rem;
|
||||
}
|
||||
/*
|
||||
&::-webkit-scrollbar{
|
||||
background:unset;
|
||||
height:4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb{
|
||||
background-color:#d7d7d7;
|
||||
height:2px;
|
||||
}
|
||||
&::-webkit-scrollbar-track{
|
||||
background-color:ddd;
|
||||
|
||||
height:2px;
|
||||
}
|
||||
&::-webkit-scrollbar-button{
|
||||
background:unset;
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -511,4 +537,15 @@ img, picture {
|
||||
.rc-xl-down {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) and (max-width: 1370px)
|
||||
{
|
||||
.ts-product-list {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
li{
|
||||
margin-left:0;
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,36 @@
|
||||
/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.uservideo{
|
||||
overflow: hidden;
|
||||
video{
|
||||
height:100%;
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:768px){
|
||||
.ul-dog{
|
||||
display: none;
|
||||
@ -24,16 +54,14 @@
|
||||
display: block;
|
||||
}
|
||||
img{
|
||||
width: 0.64rem;
|
||||
height: 0.64rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: block;
|
||||
}
|
||||
li{
|
||||
display: inline-block;
|
||||
margin-left: 0.20rem;
|
||||
width: 0.64rem;
|
||||
text-align: center;
|
||||
height: 0.64rem;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
@ -97,7 +125,6 @@
|
||||
height: 26.31rem;
|
||||
width: 100%;
|
||||
font-size: 0.20px;
|
||||
line-height: 1.50rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
@ -260,12 +287,7 @@
|
||||
li{
|
||||
display: inline-block;
|
||||
margin-left: 1.25rem;
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
height: 4rem;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -280,15 +302,16 @@
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-size: 0.14rem;
|
||||
border: 1px solid red;
|
||||
color: red;
|
||||
|
||||
font-size: 0.14rem;
|
||||
img{
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
.unactive {
|
||||
font-size: 0.14rem;
|
||||
color: #444444;
|
||||
border: 1px solid #D7D7D7;
|
||||
font-size: 0.14rem;
|
||||
img{
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
// .usermain{
|
||||
// display: none;
|
||||
@ -314,7 +337,6 @@ object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.25rem;
|
||||
line-height: 9.375rem;
|
||||
text-align: center;
|
||||
|
||||
|
||||
@ -411,35 +433,33 @@ object-fit: cover;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.uservideo{
|
||||
width: 35rem;
|
||||
height: 31.6rem;
|
||||
display: block;
|
||||
border: 1px solid red;
|
||||
|
||||
}
|
||||
.userleft{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left:0;
|
||||
margin-top: -.72rem;
|
||||
img{
|
||||
width: .69rem;
|
||||
height: 1.38rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.userright{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right:0;
|
||||
margin-top: -.72rem;
|
||||
img{
|
||||
width: .69rem;
|
||||
height: 1.375rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.uservideo{
|
||||
width: 35rem;
|
||||
height: 31.6rem;
|
||||
display: block;
|
||||
}
|
||||
.userleft{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left:0;
|
||||
margin-top: -.72rem;
|
||||
img{
|
||||
width: .69rem;
|
||||
height: 1.38rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.userright{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right:0;
|
||||
margin-top: -.72rem;
|
||||
img{
|
||||
width: .69rem;
|
||||
height: 1.375rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -494,23 +514,18 @@ img{
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
span{
|
||||
margin-top: 2.5rem;
|
||||
margin-top: 1vw;
|
||||
display: block;
|
||||
}
|
||||
img{
|
||||
width: 9.5rem;
|
||||
height: 9.5rem;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
display: block;
|
||||
}
|
||||
li{
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
width: 9.875rem;
|
||||
text-align: center;
|
||||
height: 9.875rem;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
margin-left:1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -525,8 +540,6 @@ img{
|
||||
|
||||
}
|
||||
.usermain{
|
||||
margin-top: 2.5rem;
|
||||
padding-bottom: 2.82rem;
|
||||
.ul-dog{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -593,17 +606,18 @@ margin-left: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-size: 1rem;
|
||||
border: 3px solid red;
|
||||
color: red;
|
||||
|
||||
}
|
||||
.unactive {
|
||||
font-size: 1rem;
|
||||
color: #444444;
|
||||
border: 1px solid #D7D7D7;
|
||||
}
|
||||
.active {
|
||||
font-size: 1rem;
|
||||
img{
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
.unactive {
|
||||
font-size: 1rem;
|
||||
img{
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
.rc-maa{
|
||||
ul{
|
||||
width: 100%;
|
||||
@ -635,15 +649,12 @@ border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.userselection {
|
||||
font-size: 0.16rem;
|
||||
|
||||
color: #E2001A;
|
||||
|
||||
}
|
||||
.userselection {
|
||||
font-size: 0.16rem;
|
||||
color: #E2001A;
|
||||
}
|
||||
.unselection {
|
||||
font-size: 0.16rem;
|
||||
|
||||
}
|
||||
.rc-usermessage{
|
||||
span{
|
||||
@ -653,3 +664,14 @@ color: #E2001A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:600px) and (max-width:768px)
|
||||
{
|
||||
.ul-zhuan{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li{
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -379,17 +379,19 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
const isReload={
|
||||
needload:false
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headerScroll:false,
|
||||
loginornot:true,//用户是否登录提示点
|
||||
usermessage:null,//存储用户信息
|
||||
|
||||
headerScroll:false,
|
||||
loginornot:true,//用户是否登录提示点
|
||||
usermessage:null,//存储用户信息
|
||||
};
|
||||
},
|
||||
created(){
|
||||
},
|
||||
mounted() {
|
||||
//判断用户有无登录显示红点
|
||||
let usernot=JSON.parse(localStorage.getItem("userInfo"));
|
||||
@ -401,11 +403,45 @@ export default {
|
||||
this.loginornot=false
|
||||
this.usermessage=usernot;
|
||||
}
|
||||
console.log(this.loginornot);
|
||||
//debugger;
|
||||
if(isReload.needload)
|
||||
location.reload();
|
||||
if(isReload.needload==false)
|
||||
isReload.needload=true;
|
||||
//console.log(this.loginornot);
|
||||
/*
|
||||
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)
|
||||
{
|
||||
|
||||
if (["sm", "xs", "md-1"].includes(RCDL.utilities.breakpoints.values.width.current)) {
|
||||
this.refreshMobileNav();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.refreshDesktopNav();
|
||||
}
|
||||
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
refreshDesktopNav:function(){
|
||||
RCDL.navigation.currentState=null;
|
||||
RCDL.navigation.rebuild();
|
||||
},
|
||||
refreshMobileNav:function(){
|
||||
let itemGroupList=document.querySelectorAll("nav[data-toggle-group=mobile] .rc-list--align[role=menu]");
|
||||
itemGroupList.forEach(function(ele,i){
|
||||
if(ele.className.indexOf("rc-expand--horizontal")<0 && ele.className.indexOf("rc-btn-offset--top")<0)
|
||||
{
|
||||
if(ele.id.indexOf("nav-list")>=0)
|
||||
ele.classList.add("rc-expand--horizontal");
|
||||
else if(ele.id.indexOf("nav-footer")>=0)
|
||||
ele.classList.add("rc-expand--vertical");
|
||||
}
|
||||
})
|
||||
},
|
||||
bindTracking: function(){
|
||||
console.log('bindTracking');
|
||||
},
|
||||
|
||||
@ -1,288 +0,0 @@
|
||||
<template>
|
||||
<div class="magnify">
|
||||
<div class="left_contaner">
|
||||
<div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
|
||||
<img :src="middleImg" alt="" style="width:100%">
|
||||
<div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
|
||||
</div>
|
||||
<div class="carousel">
|
||||
<div class="left_arrow arrow" @click="leftArrowClick">
|
||||
<img src="../assets/image/userleft.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="show_box">
|
||||
<ul class="picture_container" ref="middlePicture">
|
||||
<li class="picture_item" @click="tabPicture(item,index)" v-for="(item, index) in pictureList" :key="index">
|
||||
<img :src="item.attachmentPath" class="small_img" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right_arrow arrow" @click="rightArrowClick">
|
||||
<img src="../assets/image/userright.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_contanier" v-show="isBig">
|
||||
<img :src="middleImg" ref="bigImg" class="big_img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
export default {
|
||||
props:['parentmsg'],
|
||||
props: {
|
||||
|
||||
tableLabelTest:Array,
|
||||
imgList: Array, // 图片数据
|
||||
zoom: {
|
||||
default: 2, // 缩略比例,放大比例
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
middleImgWidth:350,
|
||||
middleImgHeight:350,
|
||||
thumbnailHeight:100,
|
||||
|
||||
tableLabelTest1:this.tableLabelTest,
|
||||
pictureList: [
|
||||
{url: require("../assets/four.png")},
|
||||
{url: require("../assets/cat.png")},
|
||||
{url: require("../assets/one.png")},
|
||||
{url: require("../assets/six.png")},
|
||||
{url: require("../assets/six.png")},
|
||||
{url: require("../assets/six.png")},
|
||||
{url: require("../assets/four.png")},
|
||||
{url: require("../assets/cat.png")},
|
||||
{url: require("../assets/one.png")},
|
||||
{url: require("../assets/six.png")},
|
||||
{url: require("../assets/six.png")},
|
||||
{url: require("../assets/six.png")},
|
||||
],
|
||||
menu:[],
|
||||
middleImg: '', // 中图图片地址
|
||||
bigImg: '', // 大图图片地址
|
||||
isShade: false, // 控制阴影显示与否
|
||||
isBig: false, // 控制放大图显示与否
|
||||
initX: 0, // 初始clientX值
|
||||
initY: 0, // 初始clientY值
|
||||
leftX: 0, // 初始定位left
|
||||
topY: 0, // 初始定位top
|
||||
middleLeft: 0, // 当前放置小图盒子的定位left值,
|
||||
itemWidth: 80, // 缩略图每张的宽度
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data:'ifadroind',// 值可以为methods的方法名
|
||||
inputName: function(newValue) {
|
||||
this.pictureList=newValue;
|
||||
this.menu=newValue;
|
||||
console.log(this.newValue);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let user= JSON.parse(localStorage.getItem("message"));
|
||||
console.log(user);
|
||||
if(user!==null){
|
||||
this.pictureList=user;
|
||||
}
|
||||
if (user && user.length) {
|
||||
this.pictureList = user
|
||||
}
|
||||
this.middleImg = this.pictureList[0].attachmentPath;
|
||||
console.log(this.middleImg);
|
||||
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
|
||||
// this.itemWidth = (this.middleImgWidth-30) / 2
|
||||
this.ifadroind();
|
||||
this.$nextTick(() => {
|
||||
console.log(this.menu);
|
||||
// 容器的高
|
||||
const imgWidth = this.middleImgHeight + this.thumbnailHeight + 20
|
||||
// 设置容器宽高
|
||||
// $('.magnify').css({
|
||||
// width: this.middleImgWidth,
|
||||
// height: imgWidth
|
||||
// })
|
||||
|
||||
// 设置移动阴影图宽高
|
||||
$('.middle_img .shade').css({
|
||||
width: this.middleImgWidth/this.zoom,
|
||||
height: this.middleImgHeight/this.zoom
|
||||
})
|
||||
// 设置缩略图容器高
|
||||
$('.carousel').css({
|
||||
height: this.thumbnailHeight
|
||||
})
|
||||
// 设置每个缩略图宽
|
||||
// $('.picture_item').css({
|
||||
// width: this.itemWidth
|
||||
// })
|
||||
// 设置放大后图片容器的宽高,left
|
||||
$('.right_contanier').css({
|
||||
left: this.middleImgWidth,
|
||||
width: imgWidth,
|
||||
height: imgWidth
|
||||
})
|
||||
// 设置放大图片的宽高(图片的放大倍数)
|
||||
$('.right_contanier .big_img').css({
|
||||
width: imgWidth * this.zoom,
|
||||
height: imgWidth * this.zoom
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
//判断是手机打开还是电脑打开
|
||||
ifadroind(){
|
||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
|
||||
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||
//Mob Screen
|
||||
}else{
|
||||
//PC screen size
|
||||
this.middleImgWidth=560;
|
||||
this.middleImgHeight=560;
|
||||
}
|
||||
$('.middle_img').css({
|
||||
width: this.middleImgWidth,
|
||||
height: this.middleImgHeight
|
||||
})
|
||||
},
|
||||
// 产品图片鼠标移入事件,显示阴影,显示大图
|
||||
boxMouseOver (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.isShade = true
|
||||
this.isBig = true
|
||||
// 计算阴影的位置
|
||||
let x = e.offsetX - $('.shade').width()/2
|
||||
let y = e.offsetY - $('.shade').height()/2
|
||||
let maxLeft = $('.middle_img').width() - $('.shade').width()
|
||||
let maxTop = $('.middle_img').height() - $('.shade').height()
|
||||
x = x <= 0 ? 0 : x
|
||||
x = x >= maxLeft ? maxLeft : x
|
||||
y = y <= 0 ? 0 : y
|
||||
y = y >= maxTop ? maxTop : y
|
||||
$('.shade').css({
|
||||
left: x,
|
||||
top: y
|
||||
})
|
||||
},
|
||||
// 鼠标在阴影移动
|
||||
shadeMouseMove (e) {
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
//用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
|
||||
var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
|
||||
//用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
|
||||
var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;
|
||||
|
||||
//让阴影的坐标居中
|
||||
x -= $('.shade').width() / 2;
|
||||
y -= $('.shade').height() / 2;
|
||||
|
||||
// 移动边界限制
|
||||
let maxLeft = $('.middle_img').width() - $('.shade').width()
|
||||
let maxTop = $('.middle_img').height() - $('.shade').height()
|
||||
x = x <= 0 ? 0 : x
|
||||
x = x >= maxLeft ? maxLeft : x
|
||||
y = y <= 0 ? 0 : y
|
||||
y = y >= maxTop ? maxTop : y
|
||||
// 重新赋值当前的定位值
|
||||
$('.shade').css({
|
||||
left: x,
|
||||
top: y
|
||||
})
|
||||
// 计算出实时的大图的定位,首先计算出比例
|
||||
// 比例为x:大图宽度/小图宽度 y: 大图高度/小图高度,将小图的定位乘以比例就是大图的定位
|
||||
const xRate = $('.big_img').width() / $('.middle_img').width()
|
||||
const yRate = $('.big_img').height() / $('.middle_img').height()
|
||||
$('.big_img').css({
|
||||
left: -x*xRate,
|
||||
top: -y*yRate
|
||||
})
|
||||
// console.log(e, x, y, xRate, yRate, 66677)
|
||||
},
|
||||
// 鼠标移入阴影,去除自定义事件
|
||||
shadeMouseOver (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// console.log(88888, e)
|
||||
},
|
||||
// 图片移出隐藏阴影和大图
|
||||
boxMouseLeave () {
|
||||
this.isShade = false
|
||||
this.isBig = false
|
||||
},
|
||||
// 切换图片
|
||||
tabPicture (item,index) {
|
||||
this.middleImg = item.attachmentPath
|
||||
this.$emit('changeName',item)
|
||||
console.log(item,index)
|
||||
},
|
||||
// 点击左边箭头
|
||||
leftArrowClick () {
|
||||
if (this.middleLeft < 0) {
|
||||
// 每次向右平移一个图片盒子的宽度
|
||||
this.middleLeft += this.itemWidth
|
||||
$('.picture_container').animate({
|
||||
left: this.middleLeft
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
// 点击右边箭头
|
||||
rightArrowClick () {
|
||||
// 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-1)*每张缩略图的宽度
|
||||
if (this.middleLeft > -this.itemWidth*(this.pictureList.length-1)) {
|
||||
this.middleLeft -= this.itemWidth
|
||||
$('.picture_container').animate({
|
||||
left: this.middleLeft
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取网页滚出去的距离（包括上面滚出去的部分和左边滚出去的部分）
|
||||
* @returns {{scrollTop: (Number|number), scrollLeft: (Number|number)}}
|
||||
*/
|
||||
getPageScroll() {
|
||||
return {
|
||||
scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
|
||||
scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取事件对象点击的点，相对于文档左上角的坐标
|
||||
* @param e
|
||||
* @returns {{pageX: *, pageY: *}}
|
||||
*/
|
||||
getEventPage(e) {
|
||||
return {
|
||||
pageX: e.clientX + this.getPageScroll().scrollLeft,
|
||||
pageY: e.clientY + this.getPageScroll().scrollTop
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../assets/css/magnifier.less");
|
||||
</style>
|
||||
@ -50,7 +50,6 @@ export default {
|
||||
plugins: [
|
||||
'@/plugins/vant',
|
||||
'@/plugins/ElementUI',
|
||||
{ src: "~/plugins/swiper.js", ssr: false },
|
||||
{ src: '@/plugins/localStorage', ssr: false },
|
||||
|
||||
|
||||
|
||||
28614
rc-busness/package-lock.json
generated
28614
rc-busness/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -16,12 +16,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/axios": "^5.13.6",
|
||||
"@vant/touch-emulator": "^1.3.2",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"core-js": "^3.15.1",
|
||||
"element-ui": "^2.15.6",
|
||||
"ip": "^1.1.5",
|
||||
"jquery": "^3.6.0",
|
||||
"less": "^4.1.2",
|
||||
"less-loader": "^6.0.0",
|
||||
"nuxt": "^2.15.7",
|
||||
@ -29,7 +27,8 @@
|
||||
"qrcodejs2": "^0.0.2",
|
||||
"vant": "^2.12.22",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vuex-persistedstate": "^4.1.0"
|
||||
"vuex-persistedstate": "^4.1.0",
|
||||
"swiper":"^5.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vant/area-data": "^1.1.5",
|
||||
|
||||
@ -3,25 +3,17 @@
|
||||
|
||||
<div>
|
||||
<Myheader></Myheader>
|
||||
|
||||
<div class="rc-top"></div>
|
||||
<unlogin></unlogin>
|
||||
<!-- Suppose in header end -->
|
||||
<van-swipe :autoplay="3000">
|
||||
<van-swipe-item v-for="(banner, index) in banners" :key="index">
|
||||
<van-swipe-item v-for="(banner, index) in showingBanners" :key="index">
|
||||
<img :src="banner.src" class="useraimg"/>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
||||
<!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" v-for="(banner,index ) in banners" :key="index">
|
||||
<img :src="banner.src">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination swiper-pagination-bullets"></div>
|
||||
</div> -->
|
||||
<div class="rc-max-width--xl">
|
||||
<div class="usermain">
|
||||
<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
|
||||
@ -39,6 +31,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="online bold rc-md-up" v-show="catproduct"></div>
|
||||
|
||||
@ -50,13 +43,14 @@
|
||||
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
||||
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
|
||||
<!-- 轮播图 -->
|
||||
<swiper :options="swiperOption">
|
||||
<swiper-slide class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" >
|
||||
<van-swipe>
|
||||
<van-swipe-item class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" >
|
||||
<div class="rc-video">
|
||||
<div class="uservideo">
|
||||
|
||||
<video :poster=item.catimage controls="">
|
||||
<source :src=item.video>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="rc-right">
|
||||
<img :src=item.catimage alt="">
|
||||
<span>{{item.title}}</span>
|
||||
@ -83,8 +77,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
|
||||
|
||||
@ -285,11 +279,13 @@
|
||||
<h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
|
||||
</div>
|
||||
<!-- 轮播图 -->
|
||||
<swiper :options="swiperOption">
|
||||
<swiper-slide class="swiper-slide" v-for="(item, key) in doglistvideo" :key="key" >
|
||||
<van-swipe>
|
||||
<van-swipe-item class="swiper-slide" v-for="(item, key) in doglistvideo" :key="key" >
|
||||
<div class="rc-video">
|
||||
<div class="uservideo">
|
||||
|
||||
<video :poster=item.catimage controls="">
|
||||
<source :src=item.video>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="rc-right">
|
||||
@ -318,8 +314,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
|
||||
|
||||
@ -707,11 +703,9 @@
|
||||
</template>
|
||||
<script>
|
||||
let vm=null;
|
||||
import $ from 'jquery'
|
||||
import Myheader from "~/components/header.vue";
|
||||
import Myfooter from "~/components/rc-footer.vue";
|
||||
import unlogin from "~/components/unlogin.vue";
|
||||
import '@vant/touch-emulator';
|
||||
import { userquery,postCourseId,biaomessage,userque,searchchanpin } from "../ajax/getData";
|
||||
const settings = require("@/config");
|
||||
export default {
|
||||
@ -791,13 +785,19 @@ activeInde3:0,
|
||||
},
|
||||
],
|
||||
|
||||
banners:[
|
||||
{src:require("../assets/image/one.jpg"),link:""},
|
||||
{src:require("../assets/image/two.jpg"),link:""},
|
||||
{src:require("../assets/image/three.jpg"),link:""},
|
||||
{src:require("../assets/image/four.jpg"),link:""},
|
||||
],
|
||||
|
||||
banners:{
|
||||
'mobile':[
|
||||
{src:"/images/one.jpg",link:""},
|
||||
{src:"/images/two.jpg",link:""},
|
||||
{src:"/images/three.jpg",link:""},
|
||||
{src:"/images/four.jpg",link:""}
|
||||
],
|
||||
'pc':[
|
||||
{src:"/images/pc-banner1.png",link:""},
|
||||
{src:"/images/pc-banner2.png",link:""},
|
||||
]
|
||||
},
|
||||
showingBanners:{},
|
||||
userdoglist: [
|
||||
{
|
||||
title: "小型犬",
|
||||
@ -1136,40 +1136,41 @@ vm=this;
|
||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
|
||||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||
console.log("当前是电脑打开")
|
||||
this.stypechange=false;
|
||||
console.log(this.usertitle)
|
||||
|
||||
// let catshiid=document.querySelectorAll('.selectionswitch');
|
||||
// catshiid[this.userindex].style.display='none';
|
||||
// catshiid[this.userindex].style.display='none';
|
||||
this.catproduct=true;
|
||||
this.onemao=false;
|
||||
this.twomao=false;
|
||||
this.threemao=false;
|
||||
this.fourmao=false;
|
||||
this.fivemao=false;
|
||||
this.sixmao=false;
|
||||
this.dogshow=false
|
||||
// console.log(catshiid);
|
||||
}else{
|
||||
console.log("当前是手机打开")
|
||||
this.stypechange=true;
|
||||
this.onemao=true;
|
||||
this.twomao=true;
|
||||
this.threemao=true;
|
||||
this.fourmao=true;
|
||||
this.fivemao=true;
|
||||
this.dogshow=true;
|
||||
this.catproduct=true
|
||||
this.sixmao=true;
|
||||
console.log("当前是电脑打开")
|
||||
this.stypechange=false;
|
||||
console.log(this.usertitle)
|
||||
|
||||
}
|
||||
// let catshiid=document.querySelectorAll('.selectionswitch');
|
||||
// catshiid[this.userindex].style.display='none';
|
||||
// catshiid[this.userindex].style.display='none';
|
||||
this.catproduct=true;
|
||||
this.onemao=false;
|
||||
this.twomao=false;
|
||||
this.threemao=false;
|
||||
this.fourmao=false;
|
||||
this.fivemao=false;
|
||||
this.sixmao=false;
|
||||
this.dogshow=false;
|
||||
this.showingBanners=this.banners.pc;
|
||||
// console.log(catshiid);
|
||||
}else{
|
||||
console.log("当前是手机打开")
|
||||
this.stypechange=true;
|
||||
this.onemao=true;
|
||||
this.twomao=true;
|
||||
this.threemao=true;
|
||||
this.fourmao=true;
|
||||
this.fivemao=true;
|
||||
this.dogshow=true;
|
||||
this.catproduct=true
|
||||
this.sixmao=true;
|
||||
this.showingBanners=this.banners.mobile;
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
ifadroind(item,index,order){
|
||||
console.log(item,index,order);
|
||||
|
||||
ifadroind(item,index,order){
|
||||
//console.log(item,index,order);
|
||||
|
||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
@ -1302,9 +1303,7 @@ dogtop.scrollIntoView(true);
|
||||
}
|
||||
}
|
||||
this.dogmessage(this.userserachlist)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
userlook(order){
|
||||
if(order==0){
|
||||
this.catshi=this.catlist;
|
||||
@ -1367,24 +1366,21 @@ dogtop.scrollIntoView(true);
|
||||
}
|
||||
},
|
||||
//请求猫
|
||||
async catmessage(stype) {
|
||||
let data=[];
|
||||
if(stype==undefined||stype==null){
|
||||
data = await biaomessage(0);
|
||||
}else{
|
||||
data = await biaomessage(this.userserachlist);
|
||||
}
|
||||
if(data){
|
||||
this.catlist=data;
|
||||
let userlist=[];
|
||||
userlist=data.slice(0,6);
|
||||
this.catshi=userlist;
|
||||
this.catgan=userlist;
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
async catmessage(stype) {
|
||||
let data=[];
|
||||
if(stype==undefined||stype==null){
|
||||
data = await biaomessage(0,'',1,6);
|
||||
}else{
|
||||
data = await biaomessage(this.userserachlist,'',1,6);
|
||||
}
|
||||
if(data){
|
||||
this.catlist=data;
|
||||
let userlist=[];
|
||||
userlist=data.slice(0,6);
|
||||
this.catshi=userlist;
|
||||
this.catgan=userlist;
|
||||
}
|
||||
},
|
||||
|
||||
//请求犬
|
||||
async dogmessage(stype) {
|
||||
@ -1441,24 +1437,24 @@ dogtop.scrollIntoView(true);
|
||||
}
|
||||
|
||||
},
|
||||
//处方用粮筛选
|
||||
userclick(item,index){
|
||||
this.userquery(index)
|
||||
},
|
||||
//处方用粮筛选
|
||||
userclick(item,index){
|
||||
this.userquery(index)
|
||||
},
|
||||
//全价猫湿粮筛选
|
||||
catclick(item,index){
|
||||
this.userstype=0;
|
||||
let petType={
|
||||
petType:0,
|
||||
name:index,
|
||||
}
|
||||
for(let i =0;i<this.userserachlist.length;i++){
|
||||
if(!this.userserachlist.includes(petType)){
|
||||
this.userserachlist.push(petType)
|
||||
}
|
||||
}
|
||||
this.catmessage(this.userserachlist)
|
||||
},
|
||||
catclick(item,index){
|
||||
this.userstype=0;
|
||||
let petType={
|
||||
petType:0,
|
||||
name:index,
|
||||
}
|
||||
for(let i =0;i<this.userserachlist.length;i++){
|
||||
if(!this.userserachlist.includes(petType)){
|
||||
this.userserachlist.push(petType)
|
||||
}
|
||||
}
|
||||
this.catmessage(this.userserachlist)
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
@ -7,9 +7,6 @@
|
||||
<div class="online" id="fixed-catbar-seperator"></div>
|
||||
<div class="rc-top"></div>
|
||||
<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>
|
||||
-->
|
||||
<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">
|
||||
@ -223,7 +220,6 @@
|
||||
|
||||
<script>
|
||||
import Myheader from "~/components/header.vue";
|
||||
import magnifier from "@/components/magnifier.vue";
|
||||
import tabs from "@/components/tabs.vue";
|
||||
import unlogin from "~/components/unlogin.vue";
|
||||
import { mapMutations } from "vuex";
|
||||
@ -320,7 +316,6 @@ export default {
|
||||
components: {
|
||||
Myheader,
|
||||
tabs,
|
||||
magnifier,
|
||||
unlogin,
|
||||
Myfooter
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
|
||||
Vue.use(VueAwesomeSwiper)
|
||||
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 170 KiB |
BIN
rc-busness/static/images/pc-banner1.png
Normal file
BIN
rc-busness/static/images/pc-banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
rc-busness/static/images/pc-banner2.png
Normal file
BIN
rc-busness/static/images/pc-banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 286 KiB |
Loading…
Reference in New Issue
Block a user