Commit 59fae134 authored by 赵啸非's avatar 赵啸非

修改导航

parent 9ee5a88c
<template>
<svg
className="svg-icon"
:style="{ width: width, height: height, }"
>
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
props: {
iconClass: {
type: String,
required: true,
},
width: {
type: String,
default: "16px",
},
height: {
type: String,
default: "16px",
},
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
},
};
</script>
<style>
.svg-icon {
width: 30px;
height: 30px;
fill: #249ffd;
}
.svg-icon:hover {
width: 30px;
height: 30px;
fill: #ffffff;
}
</style>
<template>
<div class="header-wrapper" >
<!--
<div class="header">
<div class="header-left">
<img src="../../../assets/images/logo_portal.png" alt="">
</div>
<div class="header-mid">
<div class="header-item">
<i style="color:#7c6aa6" class="contact-icon am-icon-phone"></i>
<div class="item">
<strong>{{ companyInfo.name }}</strong>
<span>周一 ~ 周五, 8:30 - 17:30</span>
</div>
</div>
<div class="header-item">
<i style="color:#7c6aa6" class="contact-icon am-icon-map-marker"></i>
<div class="item">
<strong>{{companyInfo.address}}</strong>
<span>{{companyInfo.name}}</span>
</div>
</div>
</div>
<div class="header-right">
<a :href="'tel:'+companyInfo.phone" class="">
<button type="button" >联系我们</button>
</a>
</div>
</div>
-->
<div class="nav-wrapper header-default" >
<div class="nav" style="" >
<el-row :span="24" style="height: 80px;margin-top: 20px">
<el-col :span="4">
<img src="../../../assets/images/logo_portal.png" style="width: 150px; margin-top: 10px;float: right" alt="">
</el-col>
<el-col :span="16">
<el-menu router :default-active="$route.path" text-color="#111" active-text-color="#2f1ce5" mode="horizontal" >
<el-menu-item style="width: 15% ;margin-left: 180px;font-size: 16px;font-weight: bold" index="/index">网站首页</el-menu-item>
<el-submenu style="width: 15%;font-weight: bold" index="/product">
<template slot="title" >产品中心</template>
<!-- <el-menu-item style="font-size: 16px" index="/product?id=1" >自助打印系统</el-menu-item>
<el-menu-item style="font-size: 16px" index="/product?id=2" >智能win盒</el-menu-item>
<el-menu-item style="font-size: 16px" index="/product?id=3" >自助打印设备</el-menu-item>-->
<el-menu-item style="font-size: 16px" index="/product?id=1" >自助打印系统</el-menu-item>
<el-menu-item style="font-size: 16px" index="/product?id=2" >智能win盒</el-menu-item>
<el-menu-item style="font-size: 16px" index="/product?id=3" >自助打印设备</el-menu-item>
</el-submenu>
<el-menu-item style="width: 15%;font-size: 16px;font-weight: bold" index="/example" >合作案例</el-menu-item>
<el-menu-item style="width: 15%;font-size: 16px;font-weight: bold" index="/news" >招商加盟</el-menu-item>
<el-menu-item style="width: 15%;font-size: 16px;font-weight: bold" index="/about" >关于我们</el-menu-item>
</el-menu>
</el-col>
<el-col :span="4">
<el-button @click="login_redirct()" class="blue-button" style="margin-top:10px;float: right;margin-right: 50px"round>管理平台登录</el-button>
<!-- <img src="../../../assets/images/manage_login.png" style="margin-top:10px;float: right;margin-right: 50px" @click="login_redirct()" alt="">
--> </el-col>
</el-row>
<!-- <div class="nav" style="" >
<ul class="am-nav am-nav-pills am-nav-justify">
<li ><img src="../../../assets/images/logo_portal.png" style="width: 150px" alt=""></li>
<li><router-link class="router" to="/index">网站首页</router-link></li>
......@@ -39,14 +53,48 @@
<li><router-link class="router" to="/news">招商加盟</router-link></li>
<li><router-link class="router" to="/about">关于我们</router-link></li>
<li ><img src="../../../assets/images/manage_login.png" style="width: 150px" @click="login_redirct()" alt=""></li>
<!-- <li ><el-button @click="login_redirct()">
&lt;!&ndash; <i class="el-icon-devops" />&ndash;&gt;
</el-button></li>-->
<li ><el-button @click="login_redirct()">
<i class="el-icon-devops" />
</el-button></li>
</ul>
</div>
</div>-->
</div>
<div :class="tops?'navbar':'navbar-top'">
<el-tooltip class="item" effect="dark" content="客服" placement="left">
<a><i> <svg-icon icon-class="headset-one" width="30px" height="30px" ></svg-icon></i></a>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="微信" placement="left">
<a><i> <svg-icon icon-class="wechat" width="30px" height="30px"></svg-icon></i></a>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抖音" placement="left">
<a><i> <svg-icon icon-class="tiktok" width="30px" height="30px"></svg-icon></i></a>
<!-- <a><i class="el-icon-shopping-cart-2"></i></a>-->
</el-tooltip>
<!-- <div class="qrShow right" v-if="showQR">
<el-image
style="width: 100px; height: 100px;border-radius: 8px;"
src="static/img/rightBar/qrcode.jpg"
fit="cover">
</el-image>
</div>-->
<!-- <a @mouseover="showQRCode" @mouseleave="hideQRCode"><i class="el-icon-full-screen"></i></a>-->
<el-tooltip class="item" effect="dark" content="返回顶部" placement="left" v-if="tops">
<a @click="gotop"><i class="el-icon-caret-top"></i>
<br>
<span>顶部</span></a>
</el-tooltip>
</div>
</div>
</template>
......@@ -57,6 +105,10 @@ export default {
components: {},
data(){
return{
showQR:false,
tops:false,
heights:window.innerHeight,
scrolltop:'',
companyInfo: {},
AppFunctions,
}
......@@ -95,13 +147,41 @@ export default {
AppFunctions.removeClass('.header-default', 'sticky');
}
},
showQRCode(){//显示二维码
this.showQR = true
},
hideQRCode(){//隐藏二维码
this.showQR = false
},
scrollToTop () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.scrolltop = scrollTop
if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
this.tops = true
} else {
this.tops = false
}
},
gotop () {
let timer = setInterval(() => {
document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
if (this.scrolltop === 0) {
clearInterval(timer)
}
}, 15)
},
},
created() {
window.addEventListener('scroll', this.toggleStickyHeader);
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
mounted() {
this.getCompanyInfo()
this.toggleStickyHeader();
window.addEventListener('scroll', this.scrollToTop)
},
beforeDestroy() {
window.removeEventListener('scroll', this.toggleStickyHeader);
......@@ -132,4 +212,164 @@ export default {
color: #0e90d2;
}
.el-menu--horizontal > .el-menu-item {
border-bottom: none;
text-decoration: none;
}
.el-menu.el-menu--horizontal {
border-bottom: solid 0px #e6e6e6;
}
.el-menu--horizontal /deep/ .el-submenu.is-active .el-submenu__title {
border-bottom: 0px solid #409EFF;
color: #303133;
}
.el-submenu__title{
font-size: 18px;
}
.el-submenu /deep/ .el-submenu__title {
font-size: 16px;
color: #303133;
padding: 0 20px;
cursor: pointer;
-webkit-transition: border-color .3s,background-color .3s,color .3s;
transition: border-color .3s,background-color .3s,color .3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.navbar {
text-align: center;
background-color: white;
position: fixed;
top: 68%;
right: 2%;
width: 55px;
height: 220px;
z-index: 999;
border-radius: 10px;
border: solid 1px #e6e6e6;
}
.navbar-top{
text-align: center;
background-color: white;
position: fixed;
top: 68%;
right: 2%;
width: 55px;
height: 165px;
z-index: 999;
border-radius: 10px;
}
.navbar a {
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 30px;
padding-top: 5px;
}
.navbar a:last-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 15px;
border-radius: 0px 0px 10px 10px;
}
.navbar a:first-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 55px;
height: 55px;
display: block;
font-size: 30px;
border-radius: 10px 10px 0px 0px;
}
.navbar a:hover {
background-color: #2f1ce5;
color: white;
}
.navbar-top a {
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 30px;
padding-top: 5px;
}
.navbar-top a:last-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 30px;
border-radius: 0px 0px 10px 10px;
}
.navbar-top a:first-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 55px;
height: 55px;
display: block;
font-size: 30px;
border-radius: 10px 10px 0px 0px;
}
.navbar-top a:hover {
background-color: #d9534f;
color: white;
}
.qrShow{
position: fixed;
top: calc(68% + 80px);
right: calc(3% + 60px);
z-index: 999;
background-color: rgb(179, 179, 179);
width: 110px;
height: 110px;
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
padding-top: 5px;
}
.qrShow:after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 8px solid;
}
.right:after {
border-left-color: rgb(179, 179, 179);
left: 100%;
top: 50%;
margin-top: -7px;
}
.svg-icon:hover{
-webkit-filter: drop-shadow(0px 0px 0px red);
color: #067acc !important;
}
.blue-button {
background-color: #2f1ce5;
color: white;
letter-spacing: 3px;
}
</style>
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg component
// register globally
Vue.component("svg-icon", SvgIcon);
const req = require.context("./svg", false, /\.svg$/);
const requireAll = (requireContext) =>
requireContext.keys().map(requireContext);
requireAll(req);
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36 32C40.4183 32 44 28.4183 44 24C44 19.5817 40.4183 16 36 16" fill="none"/>
<path d="M36 32V32C40.4183 32 44 28.4183 44 24C44 19.5817 40.4183 16 36 16" stroke="currentColor" stroke-width="2"
stroke-linejoin="round"/>
<path d="M12 16C7.58172 16 4 19.5817 4 24C4 28.4183 7.58172 32 12 32" fill="none"/>
<path d="M12 16C7.58172 16 4 19.5817 4 24C4 28.4183 7.58172 32 12 32V32" stroke="currentColor" stroke-width="2"
stroke-linejoin="round"/>
<path d="M12 32V31.5V29V24V16C12 9.37258 17.3726 4 24 4C30.6274 4 36 9.37258 36 16V32C36 38.6274 30.6274 44 24 44"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.358 19.1399C15.4694 18.8558 11.3762 20.9553 9.07838 25.4384C5.63169 32.163 8.48026 43.1666 19.9788 43.1666C31.4774 43.1666 31.81 32.0554 31.81 30.8914C31.81 30.1154 31.81 25.7764 31.81 17.8746C34.2694 19.4323 36.343 20.37 38.0308 20.6877C39.7186 21.0053 40.7915 21.1461 41.2497 21.11V14.6343C39.6886 14.4461 38.3386 14.0873 37.1997 13.5581C35.4913 12.7643 32.1037 10.5611 32.1037 7.33208C32.106 7.34787 32.106 6.51493 32.1037 4.83325H24.9857C24.9645 20.6493 24.9645 29.3353 24.9857 30.8914C25.0175 33.2255 23.2068 36.4905 19.5355 36.4905C15.8642 36.4905 14.0535 33.2281 14.0535 31.1239C14.0535 29.8357 14.496 27.9685 16.3251 26.5858C17.4098 25.7658 18.9153 25.4384 21.358 25.4384C21.358 24.6828 21.358 22.5833 21.358 19.1399Z"
stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M36.9974 21.7112C36.8434 13.0079 29.7401 6 21 6C12.1634 6 5 13.1634 5 22C5 26.1701 6.59531 29.9676 9.20892 32.8154L8.01043 40.0257L15.125 36.9699C18.2597 38.0122 21.218 38.2728 24 37.7516"
fill="none"/>
<path d="M36.9974 21.7112C36.8434 13.0079 29.7401 6 21 6C12.1634 6 5 13.1634 5 22C5 26.1701 6.59531 29.9676 9.20892 32.8154L8.01043 40.0257L15.125 36.9699C18.2597 38.0122 21.218 38.2728 24 37.7516"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.125 20.4667C16.3676 20.4667 17.375 19.4519 17.375 18.2C17.375 16.9482 16.3676 15.9333 15.125 15.9333C13.8824 15.9333 12.875 16.9482 12.875 18.2C12.875 19.4519 13.8824 20.4667 15.125 20.4667Z"
fill="currentColor"/>
<path d="M24.125 20.4667C25.3676 20.4667 26.375 19.4519 26.375 18.2C26.375 16.9482 25.3676 15.9333 24.125 15.9333C22.8824 15.9333 21.875 16.9482 21.875 18.2C21.875 19.4519 22.8824 20.4667 24.125 20.4667Z"
fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M38.7618 39.9293C37.0135 41.2302 34.8467 42 32.5 42C26.701 42 22 37.299 22 31.5C22 25.701 26.701 21 32.5 21C38.299 21 43 25.701 43 31.5C43 33.0997 42.6423 34.6159 42.0024 35.9728"
fill="none"/>
<path d="M38.7618 39.9293C37.0135 41.2302 34.8467 42 32.5 42C26.701 42 22 37.299 22 31.5C22 25.701 26.701 21 32.5 21C38.299 21 43 25.701 43 31.5C43 33.0997 42.6423 34.6159 42.0024 35.9728"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0024 35.9728L43 42L38.7618 39.9293" fill="none"/>
<path d="M42.0024 35.9728L43 42L38.7618 39.9293" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M35.6875 30.7999C34.7555 30.7999 34 30.0388 34 29.0999C34 28.161 34.7555 27.3999 35.6875 27.3999C36.6195 27.3999 37.375 28.161 37.375 29.0999C37.375 30.0388 36.6195 30.7999 35.6875 30.7999Z"
fill="currentColor"/>
<path d="M28.9375 30.7999C28.0055 30.7999 27.25 30.0388 27.25 29.0999C27.25 28.161 28.0055 27.3999 28.9375 27.3999C29.8695 27.3999 30.625 28.161 30.625 29.0999C30.625 30.0388 29.8695 30.7999 28.9375 30.7999Z"
fill="currentColor"/>
</svg>
......@@ -15,6 +15,8 @@ import "@/assets/less/common.less";
import './assets/css/style.css'
import "./icons";//自定义图标
Vue.config.productionTip = false;
Vue.use(Prototype);
Vue.use(Filter);
......
......@@ -21,7 +21,13 @@ const router = new Router({
//不需要鉴权的页面
builder("/", "portal/IndexView"),
builder("/index", "portal/IndexView"),
builder("/product", "portal/ProductView"),
builder("/product/productId/:productId", "portal/ProductDetailsView"),
builder("/example", "portal/ExampleView"),
builder("/news", "portal/NewsView"),
......@@ -56,13 +62,14 @@ function restBuilder(path, component = path) {
* @param {boolean} [requiresAuth=false] 是否登录后才能访问
* @returns {any} {} 路由对象
*/
function builder(path, component = path, requiresAuth = false) {
function builder(path, component = path, requiresAuth = false, activeMenu = '') {
return {
path: path,
name: path || "homepage",
component: getComponent(component),
meta: {
requiresAuth: requiresAuth,
activeMenu:activeMenu
},
};
}
......
......@@ -63,6 +63,7 @@ export default {
},
mounted() {
this.getCompanyInfo()
activeIndex:'/about'
/*this.getDesigners()*/
},
methods: {
......
<template>
<Layout>
<div style="width: 100%">
<!-- <div style="width: 100%">
<div class="index-page">
<div data-am-widget="tabs" class="am-tabs am-tabs-default">
<div class="am-tabs-bd" >
......@@ -9,18 +9,6 @@
v-if="slideshow.length > 0"
:style="{ backgroundImage: `url(${slideshow[tabIndex].imageUrl})`}">
<div class="index-banner">
<!-- <div class="index-mask">
<div class="container">
<div class="am-g">
<div class="am-u-md-10 am-u-sm-centered" style="text-align: center">
<h1 class="slide_simple&#45;&#45;title">{{ slideshow[tabIndex].name}}</h1>
<p class="slide_simple&#45;&#45;text am-text-left" style="display: flex;justify-content: center">
{{ slideshow[tabIndex].introduction}}
</p>
</div>
</div>
</div>
</div>-->
</div>
</div>
</div>
......@@ -32,16 +20,30 @@
<i :class="tab.icon"></i>
</div>
<div class="school-item-right am-u-md-9 am-u-sm-9 am-text-left">
<strong class="promo_slider_nav--item_title" style="margin-top: 15px">{{tab.name}}</strong>
<!-- <p class="promo_slider_nav&#45;&#45;item_description">{{tab.introduction}}</p>-->
<strong class="promo_slider_nav&#45;&#45;item_title" style="margin-top: 15px">{{tab.name}}</strong>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>-->
<div style="width: 100%">
<el-carousel :interval="4000" height="500px" arrow="never" >
<el-carousel-item v-for="item in slideshow" :key="item.imageUrl">
<el-image :src="item.imageUrl" style="width: 100%;height: inherit" />
</el-carousel-item>
</el-carousel>
</div>
<div class="section">
<div class="container" style="max-width: 1160px;">
<div class="section--header">
......@@ -142,6 +144,10 @@ export default {
components: {Layout},
data(){
return{
showQR:false,
tops:false,
heights:window.innerHeight,
scrolltop:'',
tabList:[
{name:'家用电梯', desc:'一句话概括特点', icon:'el-icon-pie-chart'},
{name:'别墅电梯', desc:'一句话概括特点', icon:'el-icon-files'},
......@@ -169,6 +175,10 @@ export default {
this.getSlideshow()
this.getAdvantage()
this.getService()
window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
methods:{
changeTab(index){
......@@ -209,11 +219,144 @@ export default {
.catch((error) => {
this.$message.error(error.message);
});
},
showQRCode(){//显示二维码
this.showQR = true
},
hideQRCode(){//隐藏二维码
this.showQR = false
},
scrollToTop () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.scrolltop = scrollTop
if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
this.tops = true
} else {
this.tops = false
}
},
gotop () {
let timer = setInterval(() => {
document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
if (this.scrolltop === 0) {
clearInterval(timer)
}
}, 15)
},
},
}
</script>
<style scoped>
.navbar {
text-align: center;
background-color: white;
position: fixed;
top: 68%;
right: 2%;
width: 55px;
height: 220px;
z-index: 999;
border-radius: 10px;
}
.navbar-top{
text-align: center;
background-color: white;
position: fixed;
top: 68%;
right: 2%;
width: 55px;
height: 165px;
z-index: 999;
border-radius: 10px;
}
.navbar a {
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 30px;
padding-top: 5px;
}
.navbar a:last-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 15px;
border-radius: 0px 0px 10px 10px;
}
.navbar a:first-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 55px;
height: 55px;
display: block;
font-size: 30px;
border-radius: 10px 10px 0px 0px;
}
.navbar a:hover {
background-color: #d9534f;
color: white;
}
.navbar-top a {
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 30px;
padding-top: 5px;
}
.navbar-top a:last-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
height: 55px;
display: block;
font-size: 30px;
border-radius: 0px 0px 10px 10px;
}
.navbar-top a:first-child{
color: rgb(0, 0, 0);
text-decoration: none;
width: 55px;
height: 55px;
display: block;
font-size: 30px;
border-radius: 10px 10px 0px 0px;
}
.navbar-top a:hover {
background-color: #d9534f;
color: white;
}
.qrShow{
position: fixed;
top: calc(68% + 80px);
right: calc(3% + 60px);
z-index: 999;
background-color: rgb(179, 179, 179);
width: 110px;
height: 110px;
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
padding-top: 5px;
}
.qrShow:after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 8px solid;
}
.right:after {
border-left-color: rgb(179, 179, 179);
left: 100%;
top: 50%;
margin-top: -7px;
}
</style>
......@@ -4,24 +4,23 @@
<div class="layout-container" style="width: 100%">
<img src="@/assets/images/product/bg.jpg" style="height: 25%;width: 100% " >
<img src="@/assets/images/product/bg.jpg" style="height: 25%;width: 100% ">
</div>
<!--
<div class="layout-container" style="width: 100%">
<div class="breadcrumb-box">
<div class="am-container">
<ol class="am-breadcrumb">
<li><router-link to="/">首页</router-link></li>
<li class="am-active">产品中心</li>
</ol>
</div>
<div style="width: 80%;margin:20px 20px 20px 40px"
v-for="(goods,index) in goodsList"
:key="index"
>
<img :src="goods.imageUrl1" style="width: 100%;height: 100%" alt="">
</div>
</div>-->
<!--
<div class="section">
<div class="container" style="max-width: 1160px">
<div class="solution-container" style=" margin-top: -80px">
......@@ -37,53 +36,60 @@
<a href="#">{{tab.typeName}}</a>
</li>
</ul>
<!-- <div class="layout-container" style="width: 100%">
&lt;!&ndash; <div class="layout-container" style="width: 100%">
<img src="@/assets/images/product/bg.jpg" style="height: 25%;width: 100% " >
</div>-->
<div class="am-tabs-bd">
<div class=am-tabs-tab>
<div style="width: 800px;"
v-for="(goods,index) in goodsList"
:key="index"
>
<img :src="goods.imageUrl1" style="width: 100%;height: 100%" alt="">
</div>&ndash;&gt;
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-->
</Layout>
</template>
<script>
import Layout from "@/components/common/Layout";
export default {
name: "ProductView",
components: {Layout},
data(){
return{
tabList:[],
list:[],
data() {
return {
tabList: [],
list: [],
tabIndex: 0,
goodsList:[],
goodsList: [],
}
},
mounted() {
this.getTabList()
this.getGoodsList(3)
},
methods:{
getTabList(){
watch: {
'$route.query': { // $route可以用引号,也可以不用引号 监听的对象
handler(newval) {
console.log('路由变化了')
console.log('当前页面路由:', newval);
// this.changeTab(index,tab.id);
this.getGoodsList(newval.id)
},
deep: true, // 深度观察监听 设置为 true
immediate: true, // 第一次初始化渲染就可以监听到
}
},
methods: {
getTabList() {
//获取所有种类
let params={}
params.page=1
params.size=-1
let params = {}
params.page = 1
params.size = -1
this.$post("/type/interlist", params)
.then((res) => {
if (res.code == 1) {
......@@ -95,14 +101,14 @@ export default {
this.$message.error(error.message);
});
},
changeTab(index,typeId){
changeTab(index, typeId) {
this.tabIndex = index
console.log("typeId"+typeId)
console.log("typeId" + typeId)
this.getGoodsList(typeId)
},
getGoodsList(typeId){
getGoodsList(typeId) {
this.$post("/type/details/interlist", {"typeId":typeId})
this.$post("/type/details/interlist", {"typeId": typeId})
.then((res) => {
if (res.code == 1) {
console.log(res)
......@@ -113,9 +119,9 @@ export default {
this.$message.error(error.message);
});
},
handleDetails(productId){
console.log("productId:"+productId)
this.$router.push({path:`/product/productId/${productId}`})
handleDetails(productId) {
console.log("productId:" + productId)
this.$router.push({path: `/product/productId/${productId}`})
}
}
}
......
const path=require('path')
function resolve(dir) {
console.log(dir)
console.log(__dirname)
console.log(path)
return path.join(__dirname, dir);
}
module.exports = {
productionSourceMap: false,
assetsDir: "s",
......@@ -11,21 +18,24 @@ module.exports = {
"/m": {
// target: "http://192.168.0.98:11019",
//target: 'http://127.0.0.1:18001',
target: 'http://192.168.0.250:18001',
// target: 'http://192.168.0.250:18001',
target: 'http://8.136.255.30:1101',
changeOrigin: true,
secure: false
},
"/file/fileupload/": {
// target: "http://192.168.0.98:11019",
//target: 'http://127.0.0.1:18001',
target: 'http://192.168.0.250:1101',
//target: 'http://192.168.0.250:1101',
target: 'http://8.136.255.30:1101',
changeOrigin: true,
secure: false
},
"/file/preview/": {
// target: "http://192.168.0.98:11019",
//target: 'http://127.0.0.1:18001',
target: 'http://192.168.0.250:1101',
//target: 'http://192.168.0.250:1101',
target: 'http://8.136.255.30:1101',
changeOrigin: true,
secure: false
}
......@@ -33,4 +43,23 @@ module.exports = {
///file/preview/
},
},
chainWebpack: (config) => {
// 配置 svg-sprite-loader
config.module
.rule("svg")
.exclude.add(resolve("src/icons"))
.end();
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
})
.end();
},
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment