mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-04 11:16:39 +08:00
missing file
This commit is contained in:
Admin
Gitee
parent
c0252fcb2d
commit
2c52684c1f
11
rc-busness/components/NuxtLogo.vue
Normal file
11
rc-busness/components/NuxtLogo.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<svg class="nuxt-logo" viewBox="0 0 45 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.nuxt-logo {
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
46
rc-busness/components/Tutorial.vue
Normal file
46
rc-busness/components/Tutorial.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<!-- Please remove this file from your project -->
|
||||
<template>
|
||||
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">
|
||||
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
|
||||
<a class="flex justify-center pt-8 sm:pt-0" href="https://nuxtjs.org" target="_blank">
|
||||
<svg width="218" height="45" viewBox="0 0 159 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M55.5017 6.81866H60.1727L70.0719 22.9912V6.81866H74.3837V29.7345H69.7446L59.8135 13.5955V29.7345H55.5017V6.81866Z" fill="#003543" /> <path d="M93.657 29.7344H89.6389V27.1747C88.7241 28.9761 86.8628 29.9904 84.5113 29.9904C80.7869 29.9904 78.3684 27.3059 78.3684 23.4423V13.2339H82.3865V22.5976C82.3865 24.8566 83.7594 26.4276 85.8171 26.4276C88.0712 26.4276 89.6389 24.6598 89.6389 22.2377V13.2339H93.657V29.7344Z" fill="#003543" /> <path d="M107.64 29.7344L103.784 24.2342L99.9291 29.7344H95.6492L101.596 21.1242L96.1074 13.2339H100.485L103.784 17.9821L107.051 13.2339H111.461L105.94 21.1242L111.886 29.7344H107.64Z" fill="#003543" /> <path d="M120.053 8.25848V13.2339H124.627V16.6063H120.053V24.7974C120.053 25.0725 120.162 25.3363 120.356 25.531C120.55 25.7257 120.813 25.8353 121.087 25.8357H124.627V29.728H121.98C118.386 29.728 116.035 27.6323 116.035 23.9687V16.6095H112.801V13.2339H114.83C115.776 13.2339 116.327 12.6692 116.327 11.7349V8.25848H120.053Z" fill="#003543" /> <path d="M134.756 24.5446V6.81866H139.066V23.1864C139.066 27.6067 136.943 29.7345 133.349 29.7345H128.332V25.8421H133.461C133.804 25.8421 134.134 25.7054 134.377 25.4621C134.619 25.2188 134.756 24.8888 134.756 24.5446Z" fill="#003543" /> <path d="M141.649 22.0409H145.799C146.029 24.6006 147.728 26.2308 150.472 26.2308C152.923 26.2308 154.623 25.2501 154.623 23.2199C154.623 18.3085 142.331 21.7129 142.331 12.9395C142.334 9.17515 145.568 6.55945 150.215 6.55945C155.05 6.55945 158.317 9.34153 158.516 13.6306H154.388C154.193 11.6341 152.632 10.2918 150.207 10.2918C147.953 10.2918 146.548 11.3397 146.548 12.9427C146.548 18.0173 159 14.2226 159 23.1576C159 27.4131 155.504 30 150.474 30C145.279 30 141.882 26.8563 141.654 22.0441" fill="#003543" /> <path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" /></svg>
|
||||
</a>
|
||||
<div class="mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6">
|
||||
<h2 class="text-2xl leading-7 font-semibold">
|
||||
Welcome to your Nuxt Application
|
||||
</h2>
|
||||
<p class="mt-3 text-gray-600">
|
||||
We recommend you take a look at the <a href="https://nuxtjs.org" target="_blank" class="text-green-500 hover:underline">Nuxt documentation</a>, whether you are new or have previous experience with the framework.<br>
|
||||
</p>
|
||||
<p class="mt-4 pt-4 text-gray-800 border-t border-dashed">
|
||||
To get started, remove <code class="bg-gray-100 text-sm p-1 rounded border">components/Tutorial.vue</code> and start coding in <code class="bg-gray-100 text-sm p-1 rounded border">pages/index.vue</code>. Have fun!
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-center pt-4 space-x-2">
|
||||
<a href="https://github.com/nuxt/nuxt.js" target="_blank"><svg
|
||||
class="w-6 h-6 text-gray-600 hover:text-gray-800"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
width="32"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
><path d="M12 2.247a10 10 0 0 0-3.162 19.487c.5.088.687-.212.687-.475c0-.237-.012-1.025-.012-1.862c-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 0 0-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 0 1 1.538 1.025a2.137 2.137 0 0 0 2.912.825a2.104 2.104 0 0 1 .638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 0 1 1.025-2.688a3.594 3.594 0 0 1 .1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 0 1 5 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 0 1 .1 2.65a3.869 3.869 0 0 1 1.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 0 1 .675 1.85c0 1.338-.012 2.413-.012 2.75c0 .263.187.575.687.475A10.005 10.005 0 0 0 12 2.247z" fill="currentColor" /></svg></a>
|
||||
<a href="https://twitter.com/nuxt_js" target="_blank"><svg
|
||||
class="w-6 h-6 text-gray-600 hover:text-gray-800"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
width="32"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
><path d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23z" fill="currentColor" /></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
144
rc-busness/components/header.vue
Normal file
144
rc-busness/components/header.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
|
||||
|
||||
<header class="rc-home-header">
|
||||
<div class="rc-main">
|
||||
<nuxt-link :to="`../../productdetails/userdetails/`">
|
||||
<div class="c-left">
|
||||
<img src="../assets/image/rc-icon.png" alt="">
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="`/userseach/search/`">
|
||||
<div class="c-right">
|
||||
<img src="../assets/image/rc-logo.png" alt="" class="flex-center">
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="`../../usersearch/search/`">
|
||||
<div class="rc-search">
|
||||
<img src="../assets/image/rc-search.png" alt="">
|
||||
</div>
|
||||
</nuxt-link>
|
||||
<div class="rc-center">
|
||||
|
||||
<ul>
|
||||
<li>猫</li>
|
||||
<li>犬</li>
|
||||
<li>定制营养方案</li>
|
||||
<li>关于我们</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headerScroll:false
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/* 手机端 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.rc-home-header{
|
||||
|
||||
.rc-main{
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
// position: fixed;
|
||||
top: 0;
|
||||
left: 4%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
background-color: white;
|
||||
z-index: 994;
|
||||
.rc-center{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.c-left img{
|
||||
width: 19px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
}
|
||||
.c-right img{
|
||||
width: 97px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
}
|
||||
.rc-search img{
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/* pc端 */
|
||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||
.rc-home-header{
|
||||
height:120px ;
|
||||
.rc-main{
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
// position: fixed;
|
||||
top: 0;
|
||||
z-index: 989;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 120px;
|
||||
ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
li{
|
||||
margin-right: 25px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.c-left{
|
||||
display: none;
|
||||
}
|
||||
.rc-search{
|
||||
display: none;
|
||||
}
|
||||
.c-left img{
|
||||
width: 19px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
}
|
||||
.c-right img{
|
||||
width: 120px;
|
||||
height: 45px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
482
rc-busness/components/magnifier.vue
Normal file
482
rc-busness/components/magnifier.vue
Normal file
@ -0,0 +1,482 @@
|
||||
<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.url" 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,
|
||||
middleImgWidth: {
|
||||
default: 350,
|
||||
type: Number
|
||||
}, // 产品图片宽
|
||||
middleImgHeight: {
|
||||
default: 282,
|
||||
type: Number
|
||||
}, // 产品图片高
|
||||
thumbnailHeight: {
|
||||
default: 100,
|
||||
type: Number
|
||||
}, // 缩略图容器高度
|
||||
imgList: Array, // 图片数据
|
||||
zoom: {
|
||||
default: 2, // 缩略比例,放大比例
|
||||
type: Number
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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")},
|
||||
],
|
||||
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() {
|
||||
|
||||
if (this.imgList && this.imgList.length) {
|
||||
this.pictureList = this.imgList
|
||||
}
|
||||
this.middleImg = this.pictureList[0].url
|
||||
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
|
||||
// this.itemWidth = (this.middleImgWidth-30) / 2
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(this.parentmsg)
|
||||
|
||||
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)) {
|
||||
// 设置产品图宽高
|
||||
$('.middle_img').css({
|
||||
width: this.middleImgWidth,
|
||||
height: this.middleImgHeight
|
||||
})
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
// 产品图片鼠标移入事件,显示阴影,显示大图
|
||||
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.url
|
||||
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 () {
|
||||
// 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-4)*每张缩略图的宽度
|
||||
if (this.middleLeft > -this.itemWidth*(this.pictureList.length-4)) {
|
||||
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>
|
||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
||||
.magnify {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.left_contaner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.left_contaner .middle_img {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.left_contaner .shade {
|
||||
background-color: rgba( 135,206,235, .5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: move;
|
||||
display: none;
|
||||
}
|
||||
.left_contaner .middle_img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.left_contaner .carousel {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: -webkit-flex;
|
||||
|
||||
}
|
||||
|
||||
.left_contaner .carousel .show_box {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.left_contaner .carousel .arrow {
|
||||
flex-basis: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.left_contaner .carousel .left_arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 0.16rem;
|
||||
height: 0.24rem;
|
||||
}
|
||||
|
||||
// background: url('../assets/image/userleft.jpg') no-repeat;
|
||||
// background-position: center center;
|
||||
}
|
||||
.left_contaner .carousel .right_arrow {
|
||||
// background: url('../assets/image/userright.png') no-repeat;
|
||||
// background-position: center right;
|
||||
// width: 8px;
|
||||
// height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 0.16rem;
|
||||
height: 0.24rem;
|
||||
display: block;
|
||||
margin-left: 0.06rem;
|
||||
}
|
||||
}
|
||||
.left_contaner .carousel .picture_container {
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.left_contaner .picture_container .picture_item {
|
||||
height: 100%;
|
||||
float: left;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid #d8d8d8 ;
|
||||
margin-left: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.left_contaner .picture_container .picture_item:hover {
|
||||
border: 2px solid #E2001A;
|
||||
}
|
||||
.left_contaner .picture_container .picture_item img {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.right_contanier {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 1px solid #ccc;
|
||||
display: none;
|
||||
}
|
||||
.right_contanier .big_img {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// // /* 最小768px最大1920 *pc端/
|
||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||
.magnify {
|
||||
position: relative;
|
||||
}
|
||||
.left_contaner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.left_contaner .middle_img {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.left_contaner .shade {
|
||||
background-color: rgba( 135,206,235, .5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: move;
|
||||
}
|
||||
.left_contaner .middle_img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.left_contaner .carousel {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: -webkit-flex;
|
||||
}
|
||||
.left_contaner .carousel .show_box {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.left_contaner .carousel .arrow {
|
||||
flex-basis: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.left_contaner .carousel .left_arrow {
|
||||
background: url('../assets/image/rc-left.png') no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.left_contaner .carousel .right_arrow {
|
||||
background: url('../assets/image/rc-left.png') no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
.left_contaner .carousel .picture_container {
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.left_contaner .picture_container .picture_item {
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.left_contaner .picture_container .picture_item:hover {
|
||||
border: 2px solid #E2001A;
|
||||
}
|
||||
.left_contaner .picture_container .picture_item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.right_contanier {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.right_contanier .big_img {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
531
rc-busness/components/rc-footer.vue
Normal file
531
rc-busness/components/rc-footer.vue
Normal file
@ -0,0 +1,531 @@
|
||||
<template>
|
||||
<footer class="rc-main">
|
||||
<div class="rc-max-width">
|
||||
<div class="rc-padding-left">
|
||||
<div class="rc-list--inverse">
|
||||
<img src="../assets/image/address.png" alt="">
|
||||
<span>在哪里购买</span>
|
||||
</div>
|
||||
<div class="rc-text--right">
|
||||
<img src="../assets/image/turn-top.png" alt="">
|
||||
<span @click="usertop">回到顶部</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-md-up">
|
||||
<!-- <div class="rc-list__header">
|
||||
<span v-for="(item,index) in titlelist" :key="index">
|
||||
{{item.title}}
|
||||
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(0)">
|
||||
<span>猫</span>
|
||||
<img :src="istrue?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="variety">
|
||||
|
||||
<li>品种</li>
|
||||
<li>想养只猫</li>
|
||||
<li>幼猫</li>
|
||||
<li>健康和心情</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(1)">
|
||||
<span>犬</span>
|
||||
<img :src="istruea?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="varietyt">
|
||||
<li>产品</li>
|
||||
<li>品种</li>
|
||||
<li>想养只犬</li>
|
||||
<li>幼犬</li>
|
||||
<li>健康和心情</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(2)">
|
||||
<span>定制营养方案</span>
|
||||
<img :src="istrueb?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="varietytt">
|
||||
<li>猫系列</li>
|
||||
<li>狗系列</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-list">
|
||||
<div class="rc-center" @click="chanemenu(3)">
|
||||
<span>关于我们</span>
|
||||
<img :src="istruec?require('../assets/image/onbottom.png'):require('../assets/image/ontop.png')" alt="" >
|
||||
</div>
|
||||
<ul ref="varietyttt">
|
||||
<li>我们的历史</li>
|
||||
<li>我们的价值观</li>
|
||||
<li>可持续发展</li>
|
||||
<li>致力提供优质产品</li>
|
||||
<li>新闻</li>
|
||||
<li>常见问题解答</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="../assets/image/shopmessage.png" alt="">
|
||||
<span>在哪购买</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../assets/image/ontop.png" alt="" @click="usertop">
|
||||
<span>回到顶部</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-columnm">
|
||||
<ol>
|
||||
<li>
|
||||
联系我们
|
||||
</li>
|
||||
<li>致电客服热线</li>
|
||||
<li>
|
||||
<i>
|
||||
+86400-688-1527
|
||||
</i>
|
||||
<span>
|
||||
办公时间为 09:00 - 18:00 周一至周五
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li>关注我们</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fin-column">
|
||||
|
||||
<span>法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
||||
|
||||
<div>
|
||||
<em>隐私声明</em> | <em>法律声明</em>
|
||||
</div>
|
||||
<strong>沪ICP备08000779号-2</strong>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-column">
|
||||
<ul>
|
||||
<span>
|
||||
联系皇家宠物
|
||||
</span>
|
||||
<li>办公时间为8.00am 至4.30pm</li>
|
||||
<li>+8612456789</li>
|
||||
<li>与我们联系</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<span>关注我们</span>
|
||||
<li>爱宠荟</li>
|
||||
<li>皇家兽医精英荟</li>
|
||||
<li>产品验证</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-padding-bottom">
|
||||
<span>法律声明 ©2021 ROYAL CANIN, Inc.</span>
|
||||
<i>沪ICP备08000779号-2</i>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
activeindex:0,
|
||||
titlelist:[
|
||||
{
|
||||
title:'猫'
|
||||
},
|
||||
{
|
||||
title:'犬'
|
||||
},
|
||||
{
|
||||
title:'定制营养方案'
|
||||
},
|
||||
{
|
||||
title:'关于我们'
|
||||
}
|
||||
],
|
||||
istrue:true,
|
||||
istruea:true,
|
||||
istrueb:true,
|
||||
istruec:true
|
||||
}
|
||||
},
|
||||
components:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
usertop(){
|
||||
this.$emit("litentop",'1')
|
||||
|
||||
},
|
||||
chanemenu(ordem){
|
||||
if(ordem==0){
|
||||
this.istrue=!this.istrue;
|
||||
}else if(ordem==1){
|
||||
this.istruea=!this.istruea;
|
||||
}else if(ordem==2){
|
||||
this.istrueb=!this.istrueb;
|
||||
}
|
||||
else if(ordem==3){
|
||||
this.istruec=!this.istruec;
|
||||
}
|
||||
if(ordem==0){
|
||||
this.istrue?this.$refs.variety.style.display='block': this.$refs.variety.style.display='none'
|
||||
}
|
||||
if(ordem==1){
|
||||
this.istruea?this.$refs.varietyt.style.display='block': this.$refs.varietyt.style.display='none'
|
||||
}
|
||||
if(ordem==2){
|
||||
this.istrueb?this.$refs.varietytt.style.display='block': this.$refs.varietytt.style.display='none'
|
||||
}
|
||||
if(ordem==3){
|
||||
this.istruec?this.$refs.varietyttt.style.display='block': this.$refs.varietyttt.style.display='none'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 小于768 手机端*/
|
||||
@media screen and (max-width:768px){
|
||||
.rc-main{
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
height: 700px;
|
||||
.rc-padding-left{
|
||||
display: none;
|
||||
}
|
||||
.rc-max-width{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
.rc-md-up{
|
||||
width: 100%;
|
||||
height: 2.46rem;
|
||||
// border-bottom: 1px solid #d7d7d7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.rc-list__header{
|
||||
margin-top: 0.20rem;
|
||||
display: flex;
|
||||
width: 52%;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
.rc-list{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span{
|
||||
display: block;
|
||||
font-size: 0.18rem;
|
||||
color:#ffffff;
|
||||
font-weight: bold;
|
||||
margin-top: 0.08rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
ul{
|
||||
|
||||
color: #F6F6F6;
|
||||
font-size: 0.18rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.04rem;
|
||||
line-height: 0.34rem;
|
||||
display: none;
|
||||
li{
|
||||
height: 0.6rem;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
|
||||
}
|
||||
.rc-center{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
img{
|
||||
width: 0.24rem;
|
||||
height: 0.32rem;
|
||||
display: block;
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.rc-column{
|
||||
display: flex;
|
||||
display: none;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.18rem;
|
||||
color: #ffffff;
|
||||
span{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rc-padding-bottom{
|
||||
display: none;
|
||||
}
|
||||
.rc-bottom{
|
||||
width: 100%;
|
||||
ul{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.56rem;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #F6F6F6;
|
||||
font-size: 0.16rem;
|
||||
|
||||
span{
|
||||
display: block;
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
width: 0.24rem;
|
||||
height: 0.32rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.rc-columnm{
|
||||
i{
|
||||
font-style: normal;
|
||||
display: block;
|
||||
}
|
||||
width: 100%;
|
||||
ol{
|
||||
display: flex;
|
||||
font-size: 0.16rem;
|
||||
flex-direction: column;
|
||||
margin-top: 0.1rem;
|
||||
color: #ffffff;
|
||||
li{
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fin-column{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.16rem;
|
||||
color: #ffffff;
|
||||
margin-top: 0.70rem;
|
||||
line-height: 0.32rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i{
|
||||
font-style: normal;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
strong{
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// /* 大于992小于1200 */
|
||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||
.rc-main{
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
height: 700px;
|
||||
.rc-center img{
|
||||
display: none;
|
||||
}
|
||||
.rc-max-width{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.rc-padding-left{
|
||||
height: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #d7d7d7 ;
|
||||
font-size: 16px;
|
||||
color: #F6F6F6;
|
||||
img{
|
||||
width: 24px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
}
|
||||
.rc-list--inverse{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
.rc-text--right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img{
|
||||
margin-right: 6px;
|
||||
}
|
||||
span{
|
||||
margin-right: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rc-md-up{
|
||||
width: 100%;
|
||||
height: 246px;
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
display: flex;
|
||||
|
||||
.rc-list__header{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
width: 52%;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
.rc-list{
|
||||
width: 52%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span{
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color:#ffffff;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
}
|
||||
ul{
|
||||
|
||||
color: #F6F6F6;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 4px;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.rc-column{
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
span{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
ol{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
|
||||
span{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.rc-padding-bottom{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 32px;
|
||||
margin-top: 45px;
|
||||
cursor: pointer;
|
||||
|
||||
i{
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
0
rc-busness/components/usercation.vue
Normal file
0
rc-busness/components/usercation.vue
Normal file
25
rc-busness/components/userlogin.vue
Normal file
25
rc-busness/components/userlogin.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
|
||||
|
||||
|
||||
methods: {}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
82
rc-busness/config/common.js
Normal file
82
rc-busness/config/common.js
Normal file
@ -0,0 +1,82 @@
|
||||
/**
|
||||
* 存储localStorage
|
||||
*/
|
||||
export const setStore = (name, content) => {
|
||||
if (!name) return
|
||||
if (typeof content !== 'string') {
|
||||
content = JSON.stringify(content)
|
||||
}
|
||||
window.localStorage.setItem(name, content)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取localStorage
|
||||
*/
|
||||
export const getStore = (name) => {
|
||||
if (!name) return
|
||||
return window.localStorage.getItem(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除localStorage
|
||||
*/
|
||||
export const removeStore = name => {
|
||||
if (!name) return
|
||||
window.localStorage.removeItem(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤周
|
||||
*/
|
||||
const getWeek = (arr) => {
|
||||
if (process.BROWSER_BUILD) {
|
||||
let weekArr = []
|
||||
arr.forEach(function (element) {
|
||||
switch (element) {
|
||||
case '1':
|
||||
weekArr.push('一')
|
||||
break
|
||||
case '2':
|
||||
weekArr.push('二')
|
||||
break
|
||||
case '3':
|
||||
weekArr.push('三')
|
||||
break
|
||||
case '4':
|
||||
weekArr.push('四')
|
||||
break
|
||||
case '5':
|
||||
weekArr.push('五')
|
||||
break
|
||||
case '6':
|
||||
weekArr.push('六')
|
||||
break
|
||||
case '7':
|
||||
weekArr.push('日')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
return '每周' + weekArr.join(',') + '上课'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出周几上课
|
||||
*/
|
||||
export const filterWeek = value => {
|
||||
if (process.BROWSER_BUILD) {
|
||||
let week = []
|
||||
if (value.indexOf('@') !== -1) {
|
||||
let arr = value.split('@')
|
||||
arr.forEach(function (element) {
|
||||
week.push(element.slice(2))
|
||||
}, this)
|
||||
return getWeek(week)
|
||||
} else {
|
||||
week.push(value.slice(2))
|
||||
return getWeek(week)
|
||||
}
|
||||
}
|
||||
}
|
||||
5
rc-busness/config/index.js
Normal file
5
rc-busness/config/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
|
||||
module.exports={
|
||||
//图片路径地址
|
||||
rbs:'http://47.96.75.242:10086/royalcanin/',
|
||||
}
|
||||
20
rc-busness/config/rem.js
Normal file
20
rc-busness/config/rem.js
Normal file
@ -0,0 +1,20 @@
|
||||
// 隔离作用域，避免全局变量的污染
|
||||
!(function(){
|
||||
function setHtmlFontSize(){
|
||||
// 1.获取手机屏幕宽度
|
||||
var w = document.documentElement.getBoundingClientRect().width; //如果用window.innerwidth的话，改变窗口大小，不能够及时获取窗口大小
|
||||
// console.log(w);
|
||||
// 2.根据屏幕宽度计算html font-size大小, 7.5指的是设计稿的宽度为750，如果在公司中设计稿的尺寸为720，那么应该除以7.2
|
||||
var f = w/40;
|
||||
// 3.设置html 的font-szie
|
||||
document.documentElement.style.fontSize=f+"px";
|
||||
}
|
||||
setHtmlFontSize();
|
||||
window.addEventListener("resize",function(){
|
||||
// setTimeout 是为了解决在苹果手机上的闪屏情况
|
||||
setTimeout(function(){
|
||||
setHtmlFontSize();
|
||||
},300)
|
||||
|
||||
})
|
||||
})();
|
||||
271
rc-busness/config/request.js
Normal file
271
rc-busness/config/request.js
Normal file
@ -0,0 +1,271 @@
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
// import Message from '@ele/component/Message'
|
||||
|
||||
|
||||
const instance = axios.create({
|
||||
// baseURL: apiPrefix,
|
||||
// baseURL: 'http://192.168.1.111:7005/',
|
||||
|
||||
// baseURL: 'http://kbptestservice.keyunzhihui.com/', //40
|
||||
|
||||
baseURL: 'http://47.96.75.242:10086/royalcanin/royalcanin/', //52
|
||||
|
||||
// baseURL: 'http://192.168.1.52:8080',
|
||||
// baseURL: 'http://192.168.1.60:8400',
|
||||
// baseURL: '',
|
||||
// baseURL: video,
|
||||
// baseURL: 'http://192.168.1.68:8848/',
|
||||
// baseURL: 'http://192.168.1.40:8080',
|
||||
|
||||
// baseURL: 'http://192.168.33.52:8080',
|
||||
|
||||
|
||||
// baseURL: 'http://192.168.1.68:8580/',
|
||||
// 媒体增删查改
|
||||
// videoURL: 'http://192.168.1.115:7005/',
|
||||
// baseURL: 'http://192.168.33.52:8080/',
|
||||
|
||||
// baseURL: 'http://192.168.1.83:8080',
|
||||
// baseURL:'http://172.19.0.9',
|
||||
|
||||
// withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 60000 // request timeout
|
||||
})
|
||||
|
||||
instance.interceptors.request.use(
|
||||
config => {
|
||||
//登录状态下socket断连时，除登出外中断一切请求
|
||||
// if (store.state.user.id && !store.state.socket.online && config.url !== '/account/logout') {
|
||||
// Message.error('请等待与服务器重新连接')
|
||||
// return Promise.reject('')
|
||||
// }
|
||||
|
||||
// header添加token
|
||||
// if (store.state.user.token) {
|
||||
// config.headers['X-Token'] = store.state.user.token
|
||||
// }
|
||||
if (localStorage.getItem('Authorization')) {
|
||||
config.headers.Authorization = localStorage.getItem('Authorization');
|
||||
// config.headers.Authorization ='Bearer eyJhbGciOiJIUzUxMiJ9.eyJyb2xlQ29kZXMiOlsiUk9MRV9SOCIsIlJPTEVfUjE5IiwiUk9MRV9SMTgiLCJST0xFX1I0IiwiUk9MRV9SMTQiLCJST0xFX1IxMSIsIlJPTEVfWiszMiIsIlJPTEVfUjEwIiwiUk9MRV9SMTMiLCJST0xFX1IxMiJdLCJqdGkiOiIxIiwic3ViIjoiYWRtaW4iLCJleHAiOjE2MzI4MTQ1MDN9.M2VWwhih-T8AD1AwYYskH9y-SoOZtHk-qf4PV4Hdb7J6L4Nd7hxKw4JTibGNREjNsmTR1BwMPTDhVgioBSnDfQ'
|
||||
|
||||
}
|
||||
// config.headers.Authorization ='Bearer eyJhbGciOiJIUzUxMiJ9.eyJyb2xlQ29kZXMiOlsiUk9MRV9SOCIsIlJPTEVfUjE5IiwiUk9MRV9SMTgiLCJST0xFX1I0IiwiUk9MRV9SMTQiLCJST0xFX1IxMSIsIlJPTEVfWiszMiIsIlJPTEVfUjEwIiwiUk9MRV9SMTMiLCJST0xFX1IxMiJdLCJqdGkiOiIxIiwic3ViIjoiYWRtaW4iLCJleHAiOjE2MzI4MTQ1MDN9.M2VWwhih-T8AD1AwYYskH9y-SoOZtHk-qf4PV4Hdb7J6L4Nd7hxKw4JTibGNREjNsmTR1BwMPTDhVgioBSnDfQ'
|
||||
return config
|
||||
},
|
||||
error => Promise.reject(error)
|
||||
)
|
||||
|
||||
instance.interceptors.response.use(
|
||||
response => {
|
||||
const res = response.data, { responseType = 'json' } = response.config
|
||||
console.log(res.errorCode);
|
||||
if (res.errorCode === 6001) {
|
||||
console.log('66666');
|
||||
localStorage.removeItem("Authorization");
|
||||
removeToken("Token")
|
||||
res && Notification.error({
|
||||
title: '错误',
|
||||
message: res.data.errorMessage || '请求错误，请稍后重试'
|
||||
})
|
||||
return Promise.reject(res)
|
||||
}
|
||||
if (res.errorCode === 6002) {
|
||||
console.log('6002');
|
||||
localStorage.removeItem("Authorization");
|
||||
removeToken("Token")
|
||||
|
||||
res && Notification.error({
|
||||
title: '错误',
|
||||
message: res.data.errorMessage || '账号或密码错误，请重试'
|
||||
})
|
||||
return Promise.reject(res)
|
||||
|
||||
}
|
||||
if (res.errorCode === 1001) {
|
||||
console.log('1001');
|
||||
localStorage.removeItem("Authorization");
|
||||
removeToken("Token")
|
||||
window.location.href='/#/login'
|
||||
res && Notification.error({
|
||||
title: '错误',
|
||||
message: res.data.errorMessage || '请求错误，请稍后重试'
|
||||
})
|
||||
return Promise.reject(res)
|
||||
|
||||
}
|
||||
if (res.errorCode === 1000) {
|
||||
localStorage.removeItem("Authorization");
|
||||
removeToken("Token")
|
||||
localStorage.removeItem("elecloud");
|
||||
console.log('---这是状态码')
|
||||
window.location.href='/#/login'
|
||||
// res && Notification.error({
|
||||
// title: '错误',
|
||||
// message: res.data.errorMessage || '请求错误，请稍后重试'
|
||||
// })
|
||||
return Promise.reject(res)
|
||||
|
||||
}
|
||||
if (res.errorCode === 1002) {
|
||||
localStorage.removeItem("Authorization");
|
||||
removeToken("Token")
|
||||
window.location.href='/#/login'
|
||||
res && Notification.error({
|
||||
title: '错误',
|
||||
message: res.data.errorMessage || '请求错误，请稍后重试'
|
||||
})
|
||||
return Promise.reject(res)
|
||||
|
||||
}
|
||||
//当返回类型非{status,data,msg}的接口请求时，不使用status来判断请求是否成功
|
||||
if ((!('status' in res)) || (res.status === 200)) {
|
||||
//当返回类型为json时，返回response.data
|
||||
return responseType === 'json' ? res : response
|
||||
}
|
||||
|
||||
//服务器异常
|
||||
if (res.status === 500) {
|
||||
// Message.error(res.msg || '操作失败')
|
||||
return Promise.reject(res.msg)
|
||||
}
|
||||
|
||||
//未登录
|
||||
// if (res.status === 6001) {
|
||||
// if (store.state.user.Authorization) return Promise.reject()
|
||||
// return MessageBox.alert('请登录后重试', {
|
||||
// type: 'warning',
|
||||
// beforeClose: (action, instance, done) => {
|
||||
// store.dispatch('user/logout').then(done)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
//没有权限
|
||||
if (res.status === 403) {
|
||||
// Message.error(res.msg || '没有权限进行该操作')
|
||||
return Promise.reject(res.msg)
|
||||
}
|
||||
if (res.status === 400) {
|
||||
// Message.error(res.msg || '没有权限进行该操作')
|
||||
return Promise.reject(res)
|
||||
}
|
||||
// if(res.)
|
||||
|
||||
//其他错误
|
||||
// Message.error(res.msg || '接口有误')
|
||||
return Promise.reject(res)
|
||||
},
|
||||
error => {
|
||||
// console.log('error',error.response);
|
||||
if (axios.isCancel(error)) return
|
||||
error && Notification.error({
|
||||
title: '错误',
|
||||
// message: '请求错误，请稍后重试'
|
||||
message: error.response.data.message || '请求错误，请稍后重试'
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
class Api {
|
||||
/**
|
||||
* 数据接口定义
|
||||
* @param url 请求url，不带参数
|
||||
* @param arg 对传入参数的处理方法，返回值将作为axios[get,post]的第二个参数
|
||||
* @param chain 形参为请求返回的promise
|
||||
* @param method 请求方法，小写，get、post...
|
||||
*/
|
||||
constructor(url, arg, chain, method) {
|
||||
this.url = url
|
||||
this.arg = arg
|
||||
this.chain = chain
|
||||
this.method = method
|
||||
}
|
||||
|
||||
request(...args) {
|
||||
const params = this.arg ? this.arg(...args) : undefined
|
||||
const promise = instance[this.method](this.url, params).catch(e => console.error(e)
|
||||
|
||||
)
|
||||
return this.chain ? this.chain(promise) : promise
|
||||
}
|
||||
}
|
||||
|
||||
class ApiJson {
|
||||
/**
|
||||
* 数据接口定义
|
||||
* @param url 请求url，不带参数
|
||||
* @param arg 对传入参数的处理方法，返回值将作为axios[get,post]的第二个参数
|
||||
* @param chain 形参为请求返回的promise
|
||||
* @param method 请求方法，小写，get、post...
|
||||
* @param header 请求方法，头部信息Json
|
||||
*/
|
||||
constructor(url, arg, chain, method, header) {
|
||||
this.url = url
|
||||
this.arg = arg
|
||||
this.chain = chain
|
||||
this.method = method
|
||||
this.header = header
|
||||
}
|
||||
|
||||
request(...args) {
|
||||
const params = this.arg ? this.arg(...args) : undefined
|
||||
const promise = instance[this.method](this.url, params, { headers: { 'Content-Type': 'application/json' } }).catch(e => console.error(e))
|
||||
return this.chain ? this.chain(promise) : promise
|
||||
}
|
||||
}
|
||||
|
||||
export class PostApi extends Api {
|
||||
constructor(url, arg, chain) {
|
||||
if (!arg) arg = data => data
|
||||
super(url, arg, chain, 'post')
|
||||
}
|
||||
}
|
||||
|
||||
export class GetApi extends Api {
|
||||
constructor(url, arg, chain) {
|
||||
super(url, arg, chain, 'get')
|
||||
}
|
||||
}
|
||||
|
||||
export class DeleteApi extends Api {
|
||||
constructor(url, arg, chain) {
|
||||
super(url, arg, chain, 'delete')
|
||||
}
|
||||
}
|
||||
export class PatchApi extends Api {
|
||||
constructor(url, arg, chain) {
|
||||
if (!arg) arg = data => data
|
||||
super(url, arg, chain, 'patch')
|
||||
}
|
||||
}
|
||||
|
||||
export class PutApi extends Api {
|
||||
constructor(url, arg, chain) {
|
||||
if (!arg) arg = data => data
|
||||
|
||||
super(url, arg, chain, 'put')
|
||||
}
|
||||
}
|
||||
|
||||
export class PostJsonApi extends ApiJson {
|
||||
constructor(url, arg, chain) {
|
||||
if (!arg) arg = data => data
|
||||
let header = { headers: { 'Content-Type': 'application/json' } }
|
||||
super(url, arg, chain, 'post', header)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class DeleteJsonApi extends ApiJson {
|
||||
constructor(url, arg, chain) {
|
||||
super(url, arg, chain, 'delete')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default instance
|
||||
1097
rc-busness/pages/index.vue
Normal file
1097
rc-busness/pages/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
3
rc-busness/plugins/ElementUI.js
Normal file
3
rc-busness/plugins/ElementUI.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
Vue.use(ElementUI)
|
||||
1
rc-busness/plugins/lib.js
Normal file
1
rc-busness/plugins/lib.js
Normal file
@ -0,0 +1 @@
|
||||
import 'lib-flexible'
|
||||
9
rc-busness/plugins/localStorage.js
Normal file
9
rc-busness/plugins/localStorage.js
Normal file
@ -0,0 +1,9 @@
|
||||
import createPersistedState from 'vuex-persistedstate'
|
||||
|
||||
export default ({store}) => {
|
||||
window.onNuxtReady(() => {
|
||||
createPersistedState({
|
||||
key: "store", // 读取本地存储的数据到store
|
||||
})(store)
|
||||
})
|
||||
}
|
||||
4
rc-busness/plugins/swiper.js
Normal file
4
rc-busness/plugins/swiper.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
|
||||
Vue.use(VueAwesomeSwiper)
|
||||
4
rc-busness/plugins/vant.js
Normal file
4
rc-busness/plugins/vant.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import Vant from 'vant'
|
||||
|
||||
Vue.use(Vant)
|
||||
BIN
rc-busness/static/favicon.ico
Normal file
BIN
rc-busness/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
10
rc-busness/store/README.md
Normal file
10
rc-busness/store/README.md
Normal file
@ -0,0 +1,10 @@
|
||||
# STORE
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your Vuex Store files.
|
||||
Vuex Store option is implemented in the Nuxt.js framework.
|
||||
|
||||
Creating a file in this directory automatically activates the option in the framework.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
|
||||
33
rc-busness/store/index.js
Normal file
33
rc-busness/store/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
const state = () => ({position: {}})
|
||||
|
||||
const mutations = {
|
||||
// changeLogin(state, val) {
|
||||
// console.log(state,val);
|
||||
// let list=[];
|
||||
// list.push(val);
|
||||
|
||||
// JSON.parse(list);
|
||||
// console.log(list);
|
||||
// localStorage.setItem("cardata", list);
|
||||
// },
|
||||
changeClod(state, val) {
|
||||
localStorage.setItem('userInfo', val.cloud);
|
||||
console.log(state,val);
|
||||
},
|
||||
// changeMenu(state, user){
|
||||
// // console.log("vuex存储的变化",JSON.parse(user))
|
||||
// // console.log("vuex存储的变化",user)
|
||||
// state.menuList = user;
|
||||
// localStorage.setItem('menuList', user);
|
||||
// }
|
||||
}
|
||||
|
||||
const actions = {
|
||||
setPosition: ({
|
||||
commit
|
||||
}, position) => {
|
||||
commit('setPosition', position)
|
||||
}
|
||||
}
|
||||
|
||||
export default {namespaced: true, state, mutations, actions}
|
||||
Loading…
Reference in New Issue
Block a user