Skip to content

C
company-portal-ui
Commit f6a7dd57 authored by 赵啸非's avatar 赵啸非
Browse files
Options

修改导航

parent fa92afbc
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 101 deletions
admin/src/components/common/footer/Footer.vue
View file @ f6a7dd57
......@@ -11,7 +11,7 @@
</el-row>
<el-row><span style="color: white">创造智能打印新时代</span></el-row>
<el-row style=" position: absolute;bottom: 0px;"><span style="color: white">蜀ICP备2023018969号</span></el-row>
<el-row style=" position: absolute;bottom: 0px;"><a href="https://beian.miit.gov.cn/#/home" style="color: white">蜀ICP备2023018969号</a></el-row>
</el-col>
......
admin/src/components/common/header/Header.vue
View file @ f6a7dd57
<template>
<div class="header-wrapper" >
<div class="header-wrapper">
<div class="nav-wrapper header-default" >
<div class="nav-wrapper header-default">
<el-row :span="24" type="flex" justify="center" align="middle" style="height: 80px;margin-top: 20px;">
<el-col :span="4" >
<el-col :span="4">
<img src="../../../assets/images/logo_portal.png" style="width: 80%;float: right;" alt="">
</el-col>
<el-col :span="16" >
<el-menu style="margin-left: 100px" router :default-active="$route.path" text-color="#111" active-text-color="#2f1ce5" mode="horizontal" >
<el-col :span="16">
<el-menu style="margin-left: 100px" router :default-active="$route.path" text-color="#111" active-text-color="#2f1ce5" mode="horizontal">
<el-menu-item style="width: 15% ;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=3" >自助打印系统</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=1" >自助打印设备</el-menu-item>
<template slot="title">产品中心</template>
<el-menu-item style="font-size: 16px" index="/product?id=3">自助打印系统</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=1">自助打印设备</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-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="float: left;"round>管理平台登录</el-button>
<el-button @click="login_redirct()" class="blue-button" style="float: left;" round>管理平台登录</el-button>
</el-col>
</el-row>
......@@ -39,17 +39,30 @@
<div slot="content" v-html="headContent"></div>
<a><i> <svg-icon icon-class="headset-one" width="30px" height="30px" ></svg-icon></i></a>
<a><i>
<svg-icon icon-class="headset-one" width="30px" height="30px"></svg-icon>
</i></a>
</el-tooltip>
<el-tooltip popper-class="testtooltip" effect="white" content="微信" placement="left">
<a><i> <svg-icon icon-class="wechat" width="30px" height="30px"></svg-icon></i></a>
<el-tooltip popper-class="testtooltip" effect="white" placement="left">
<div slot="content" v-html="wechatContent"></div>
<a><i>
<svg-icon icon-class="wechat" width="30px" height="30px"></svg-icon>
</i></a>
</el-tooltip>
<el-tooltip popper-class="testtooltip" effect="white" content="抖音" placement="left">
<el-tooltip popper-class="testtooltip" effect="white" placement="left">
<div slot="content" v-html="tiktokContent"></div>
<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>-->
<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>
......@@ -64,18 +77,22 @@
<script>
import AppFunctions from "@/utils/AppFunctions";
import wechat from '@/assets/images/contacts/wechat.png'
export default {
name: "Header",
components: {},
data(){
return{
headContent:"&nbsp;&nbsp;&nbsp;&nbsp;服务热线<br/><br/> 18200542686<br><br/> 18180928870<br><br>",
showQR:false,
tops:false,
heights:window.innerHeight,
scrolltop:'',
data() {
return {
headContent: "&nbsp;&nbsp;&nbsp;&nbsp;服务热线<br/><br/> 18200542686<br><br/> 18180928870<br><br>",
wechatContent: "<img src='/wechat.png' style='width:150px;height:150px'/>",
tiktokContent: "<img src='/tiktok.png' style='width:150px;height:150px'/>",
showQR: false,
tops: false,
heights: window.innerHeight,
scrolltop: '',
companyInfo: {},
AppFunctions,
wechat:wechat
}
},
methods: {
......@@ -112,13 +129,13 @@ export default {
AppFunctions.removeClass('.header-default', 'sticky');
}
},
showQRCode(){//显示二维码
showQRCode() {//显示二维码
this.showQR = true
},
hideQRCode(){//隐藏二维码
hideQRCode() {//隐藏二维码
this.showQR = false
},
scrollToTop () {
scrollToTop() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.scrolltop = scrollTop
if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
......@@ -127,7 +144,7 @@ export default {
this.tops = false
}
},
gotop () {
gotop() {
let timer = setInterval(() => {
document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
if (this.scrolltop === 0) {
......@@ -140,7 +157,7 @@ export default {
window.addEventListener('scroll', this.toggleStickyHeader);
},
destroyed () {
destroyed() {
window.removeEventListener('scroll', this.scrollToTop)
},
mounted() {
......@@ -156,14 +173,16 @@ export default {
</script>
<style >
<style>
.el-tooltip__popper[x-placement^="left"] .popper__arrow {
border-left-color: white!important;
border-left-color: white !important;
}
.el-tooltip__popper[x-placement^="left"] .popper__arrow:after {
border-left-color: white !important;
}
.testtooltip{
.testtooltip {
background: white !important;
box-shadow: 1px 1px 10px 3px #D3D3D6;
}
......@@ -182,7 +201,8 @@ export default {
font-size: 50px;
visibility: hidden;
}
.router.router-link-active{
.router.router-link-active {
/*color: #fff;*/
/*background-color: #0e90d2;*/
/*border: 1px solid #0e90d2;*/
......@@ -210,8 +230,8 @@ export default {
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-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;
}
......@@ -229,7 +249,8 @@ export default {
border-radius: 10px;
border: solid 1px #e6e6e6;
}
.navbar-top{
.navbar-top {
text-align: center;
background-color: white;
position: fixed;
......@@ -241,6 +262,7 @@ export default {
border-radius: 10px;
}
.navbar a {
color: rgb(0, 0, 0);
text-decoration: none;
......@@ -250,7 +272,8 @@ export default {
font-size: 30px;
padding-top: 5px;
}
.navbar a:last-child{
.navbar a:last-child {
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
......@@ -259,7 +282,8 @@ export default {
font-size: 15px;
border-radius: 0px 0px 10px 10px;
}
.navbar a:first-child{
.navbar a:first-child {
color: rgb(0, 0, 0);
text-decoration: none;
width: 55px;
......@@ -268,10 +292,12 @@ export default {
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;
......@@ -281,7 +307,8 @@ export default {
font-size: 30px;
padding-top: 5px;
}
.navbar-top a:last-child{
.navbar-top a:last-child {
color: rgb(0, 0, 0);
text-decoration: none;
width: 100%;
......@@ -290,7 +317,8 @@ export default {
font-size: 30px;
border-radius: 0px 0px 10px 10px;
}
.navbar-top a:first-child{
.navbar-top a:first-child {
color: rgb(0, 0, 0);
text-decoration: none;
width: 55px;
......@@ -299,12 +327,13 @@ export default {
font-size: 30px;
border-radius: 10px 10px 0px 0px;
}
.navbar-top a:hover {
background-color: #2f1ce5;
color: white;
}
.svg-icon:hover{
.svg-icon:hover {
-webkit-filter: drop-shadow(0px 0px 0px red);
color: #067acc !important;
}
......
admin/src/router.js
View file @ f6a7dd57
......@@ -22,13 +22,9 @@ const router = new Router({
builder("/", "portal/IndexView"),
builder("/index", "portal/IndexView"),
builder("/product", "portal/ProductView"),
builder("/product/productId/:productId", "portal/ProductDetailsView"),
builder("/product/detail", "portal/ProductDetailsView"),
builder("/example", "portal/ExampleView"),
builder("/news", "portal/NewsView"),
builder("/news/newsId/:newsId", "portal/NewsDetailsView"),
......
admin/src/views/portal/IndexView.vue
View file @ f6a7dd57
......@@ -132,7 +132,7 @@
</el-row>
<el-row type="flex" justify="center" align="middle">
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(1)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
</el-row>
</div>
......@@ -150,7 +150,7 @@
</el-row>
<el-row type="flex" justify="center" align="middle">
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(5)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
</el-row>
</div>
</el-col>
......@@ -169,7 +169,7 @@
</el-row>
<el-row type="flex" justify="center" align="middle">
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(2)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
</el-row>
</div>
</el-col>
......@@ -185,7 +185,7 @@
</el-row>
<el-row type="flex" justify="center" align="middle">
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(4)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
</el-row>
</div>
</el-col>
......@@ -201,7 +201,7 @@
</el-row>
<el-row type="flex" justify="center" align="middle">
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
<el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(3)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
</el-row>
</div>
</el-col>
......@@ -259,6 +259,19 @@ export default {
window.removeEventListener('scroll', this.scrollToTop)
},
methods:{
knowMore(type) {
//了解更多
console.log(type)
this.$router.push({
name:"/product/detail",
path: "/product/detail",
params: {"typeId":type},
});
},
changeTab(index){
this.tabIndex = index
},
......
admin/src/views/portal/ProductDetailsView.vue
View file @ f6a7dd57
<template>
<Layout>
<div class="gallery-box" v-if="title !== '' && photos.length > 0">
<div class="gallery-box" v-if=" photos.length > 0">
<div class="layout-container" style="width: 100%">
<!-- <div class="layout-container" style="width: 100%">
<div class="solution-page">
<div class="container">
<h2>{{title}}</h2>
<p>{{introduction}}</p>
</div>
</div>
</div>
</div>-->
<div class="gallery">
<div class="active-photo" :style="'background-image: url('+ photos[activePhoto]+');'">
......@@ -51,13 +51,63 @@ export default {
title: '',
introduction:'',
activePhoto: 0,
list:[],
photos: []
}
},
mounted() {
this.getProductById(this.$route.params.productId)
console.log(this.$route)
this.findExampleByExampleType(this.$route.params.typeId)
},
methods:{
findExampleByExampleType(exampleType){
//根据案例类型进行查询分类
this.$post("/example/interlist", {"exampleType":exampleType})
.then((res) => {
if (res.code == 1) {
console.log(res)
if(res.data.data.length>0){
const temp = res.data.data[0]
const list = [];
for (let i = 1; i < 17; i++) {
// 判断是否为空
if (temp['image'+ i] != null&&temp['image'+ i] != ''){
list.push(temp['image'+ i])
}
}
console.log("list",list)
this.photos = list
this.srcList=list
}
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
findExample(){
//根据案例类型进行查询分类
this.$post("/example/interlist", {})
.then((res) => {
if (res.code == 1) {
console.log(res)
if(res.data.data.length>0){
this.tabList=res.data.data
}
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
getProductById(typeDetailsId){
//根据类型详细id获取详细信息 type/details
......@@ -113,7 +163,7 @@ export default {
}
.gallery-box .gallery {
width: 80%;
width: 60%;
display: flex;
flex-direction: column;
background-color: #ffffff;
......
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