Skip to content

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

修改导航

parent fa92afbc
Hide 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 @@ ...@@ -11,7 +11,7 @@
</el-row> </el-row>
<el-row><span style="color: white">创造智能打印新时代</span></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> </el-col>
......
admin/src/components/common/header/Header.vue
View file @ f6a7dd57
<template> <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-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=""> <img src="../../../assets/images/logo_portal.png" style="width: 80%;float: right;" alt="">
</el-col> </el-col>
<el-col :span="16" > <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 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-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"> <el-submenu style="width: 15%;font-weight: bold" index="/product">
<template slot="title" >产品中心</template> <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=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=2">智能win盒</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=1">自助打印设备</el-menu-item>
</el-submenu> </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="/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="/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="/about">关于我们</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="4"> <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-col>
</el-row> </el-row>
</div> </div>
<div :class="tops?'navbar':'navbar-top'"> <div :class="tops?'navbar':'navbar-top'">
<el-tooltip popper-class="testtooltip" effect="white" placement="left"> <el-tooltip popper-class="testtooltip" effect="white" placement="left">
<div slot="content" v-html="headContent"></div> <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>
<el-tooltip popper-class="testtooltip" effect="white" content="微信" placement="left"> <el-tooltip popper-class="testtooltip" effect="white" placement="left">
<a><i> <svg-icon icon-class="wechat" width="30px" height="30px"></svg-icon></i></a>
<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>
<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>
<!-- <a><i class="el-icon-shopping-cart-2"></i></a>--> <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> </el-tooltip>
<el-tooltip popper-class="testtooltip" effect="white" content="返回顶部" placement="left" v-if="tops"> <el-tooltip popper-class="testtooltip" effect="white" content="返回顶部" placement="left" v-if="tops">
<a @click="gotop"><i class="el-icon-caret-top"></i> <a @click="gotop"><i class="el-icon-caret-top"></i>
<br> <br>
<span>顶部</span></a> <span>顶部</span></a>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import AppFunctions from "@/utils/AppFunctions"; import AppFunctions from "@/utils/AppFunctions";
import wechat from '@/assets/images/contacts/wechat.png'
export default { export default {
name: "Header", name: "Header",
components: {}, components: {},
data(){ data() {
return{ return {
headContent:"&nbsp;&nbsp;&nbsp;&nbsp;服务热线<br/><br/> 18200542686<br><br/> 18180928870<br><br>", headContent: "&nbsp;&nbsp;&nbsp;&nbsp;服务热线<br/><br/> 18200542686<br><br/> 18180928870<br><br>",
showQR:false, wechatContent: "<img src='/wechat.png' style='width:150px;height:150px'/>",
tops:false, tiktokContent: "<img src='/tiktok.png' style='width:150px;height:150px'/>",
heights:window.innerHeight, showQR: false,
scrolltop:'', tops: false,
heights: window.innerHeight,
scrolltop: '',
companyInfo: {}, companyInfo: {},
AppFunctions, AppFunctions,
} wechat:wechat
}, }
methods: { },
methods: {
getCompanyInfo() { getCompanyInfo() {
//获取公司信息，默认第一个 //获取公司信息，默认第一个
this.$post("/company/interlist", {}) this.$post("/company/interlist", {})
...@@ -104,21 +121,21 @@ export default { ...@@ -104,21 +121,21 @@ export default {
}, },
toggleStickyHeader() { toggleStickyHeader() {
const scrolled = document.documentElement.scrollTop; const scrolled = document.documentElement.scrollTop;
if (scrolled > 100) { if (scrolled > 100) {
AppFunctions.addClass('.header-default', 'sticky'); AppFunctions.addClass('.header-default', 'sticky');
} else if (scrolled <= 100) { } else if (scrolled <= 100) {
AppFunctions.removeClass('.header-default', 'sticky'); AppFunctions.removeClass('.header-default', 'sticky');
} }
}, },
showQRCode(){//显示二维码 showQRCode() {//显示二维码
this.showQR = true this.showQR = true
}, },
hideQRCode(){//隐藏二维码 hideQRCode() {//隐藏二维码
this.showQR = false this.showQR = false
}, },
scrollToTop () { scrollToTop() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.scrolltop = scrollTop this.scrolltop = scrollTop
if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) { if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
...@@ -127,7 +144,7 @@ export default { ...@@ -127,7 +144,7 @@ export default {
this.tops = false this.tops = false
} }
}, },
gotop () { gotop() {
let timer = setInterval(() => { let timer = setInterval(() => {
document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90 document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
if (this.scrolltop === 0) { if (this.scrolltop === 0) {
...@@ -135,35 +152,37 @@ export default { ...@@ -135,35 +152,37 @@ export default {
} }
}, 15) }, 15)
}, },
}, },
created() { created() {
window.addEventListener('scroll', this.toggleStickyHeader); window.addEventListener('scroll', this.toggleStickyHeader);
}, },
destroyed () { destroyed() {
window.removeEventListener('scroll', this.scrollToTop) window.removeEventListener('scroll', this.scrollToTop)
}, },
mounted() { mounted() {
this.getCompanyInfo() this.getCompanyInfo()
this.toggleStickyHeader(); this.toggleStickyHeader();
window.addEventListener('scroll', this.scrollToTop) window.addEventListener('scroll', this.scrollToTop)
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('scroll', this.toggleStickyHeader); window.removeEventListener('scroll', this.toggleStickyHeader);
} }
} }
</script> </script>
<style > <style>
.el-tooltip__popper[x-placement^="left"] .popper__arrow { .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 { .el-tooltip__popper[x-placement^="left"] .popper__arrow:after {
border-left-color: white !important; border-left-color: white !important;
} }
.testtooltip{
.testtooltip {
background: white !important; background: white !important;
box-shadow: 1px 1px 10px 3px #D3D3D6; box-shadow: 1px 1px 10px 3px #D3D3D6;
} }
...@@ -182,13 +201,14 @@ export default { ...@@ -182,13 +201,14 @@ export default {
font-size: 50px; font-size: 50px;
visibility: hidden; visibility: hidden;
} }
.router.router-link-active{
/*color: #fff;*/
/*background-color: #0e90d2;*/
/*border: 1px solid #0e90d2;*/
cursor: default;
color: #0e90d2; .router.router-link-active {
/*color: #fff;*/
/*background-color: #0e90d2;*/
/*border: 1px solid #0e90d2;*/
cursor: default;
color: #0e90d2;
} }
.el-menu--horizontal > .el-menu-item { .el-menu--horizontal > .el-menu-item {
...@@ -206,14 +226,14 @@ export default { ...@@ -206,14 +226,14 @@ export default {
} }
.el-submenu /deep/ .el-submenu__title { .el-submenu /deep/ .el-submenu__title {
font-size: 16px; font-size: 16px;
color: #303133; color: #303133;
padding: 0 20px; padding: 0 20px;
cursor: pointer; cursor: pointer;
-webkit-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; transition: border-color .3s, background-color .3s, color .3s;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -229,7 +249,8 @@ export default { ...@@ -229,7 +249,8 @@ export default {
border-radius: 10px; border-radius: 10px;
border: solid 1px #e6e6e6; border: solid 1px #e6e6e6;
} }
.navbar-top{
.navbar-top {
text-align: center; text-align: center;
background-color: white; background-color: white;
position: fixed; position: fixed;
...@@ -241,6 +262,7 @@ export default { ...@@ -241,6 +262,7 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
.navbar a { .navbar a {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
...@@ -250,7 +272,8 @@ export default { ...@@ -250,7 +272,8 @@ export default {
font-size: 30px; font-size: 30px;
padding-top: 5px; padding-top: 5px;
} }
.navbar a:last-child{
.navbar a:last-child {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
...@@ -259,7 +282,8 @@ export default { ...@@ -259,7 +282,8 @@ export default {
font-size: 15px; font-size: 15px;
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
} }
.navbar a:first-child{
.navbar a:first-child {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
width: 55px; width: 55px;
...@@ -268,10 +292,12 @@ export default { ...@@ -268,10 +292,12 @@ export default {
font-size: 30px; font-size: 30px;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
} }
.navbar a:hover { .navbar a:hover {
background-color: #2f1ce5; background-color: #2f1ce5;
color: white; color: white;
} }
.navbar-top a { .navbar-top a {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
...@@ -281,7 +307,8 @@ export default { ...@@ -281,7 +307,8 @@ export default {
font-size: 30px; font-size: 30px;
padding-top: 5px; padding-top: 5px;
} }
.navbar-top a:last-child{
.navbar-top a:last-child {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
...@@ -290,7 +317,8 @@ export default { ...@@ -290,7 +317,8 @@ export default {
font-size: 30px; font-size: 30px;
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
} }
.navbar-top a:first-child{
.navbar-top a:first-child {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
width: 55px; width: 55px;
...@@ -299,12 +327,13 @@ export default { ...@@ -299,12 +327,13 @@ export default {
font-size: 30px; font-size: 30px;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
} }
.navbar-top a:hover { .navbar-top a:hover {
background-color: #2f1ce5; background-color: #2f1ce5;
color: white; color: white;
} }
.svg-icon:hover{ .svg-icon:hover {
-webkit-filter: drop-shadow(0px 0px 0px red); -webkit-filter: drop-shadow(0px 0px 0px red);
color: #067acc !important; color: #067acc !important;
} }
......
admin/src/router.js
View file @ f6a7dd57
...@@ -22,13 +22,9 @@ const router = new Router({ ...@@ -22,13 +22,9 @@ const router = new Router({
builder("/", "portal/IndexView"), builder("/", "portal/IndexView"),
builder("/index", "portal/IndexView"), builder("/index", "portal/IndexView"),
builder("/product", "portal/ProductView"), builder("/product", "portal/ProductView"),
builder("/product/detail", "portal/ProductDetailsView"),
builder("/product/productId/:productId", "portal/ProductDetailsView"),
builder("/example", "portal/ExampleView"), builder("/example", "portal/ExampleView"),
builder("/news", "portal/NewsView"), builder("/news", "portal/NewsView"),
builder("/news/newsId/:newsId", "portal/NewsDetailsView"), builder("/news/newsId/:newsId", "portal/NewsDetailsView"),
......
admin/src/views/portal/IndexView.vue
View file @ f6a7dd57
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <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> </el-row>
</div> </div>
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <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> </el-row>
</div> </div>
</el-col> </el-col>
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <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> </el-row>
</div> </div>
</el-col> </el-col>
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <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> </el-row>
</div> </div>
</el-col> </el-col>
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <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> </el-row>
</div> </div>
</el-col> </el-col>
...@@ -259,6 +259,19 @@ export default { ...@@ -259,6 +259,19 @@ export default {
window.removeEventListener('scroll', this.scrollToTop) window.removeEventListener('scroll', this.scrollToTop)
}, },
methods:{ methods:{
knowMore(type) {
//了解更多
console.log(type)
this.$router.push({
name:"/product/detail",
path: "/product/detail",
params: {"typeId":type},
});
},
changeTab(index){ changeTab(index){
this.tabIndex = index this.tabIndex = index
}, },
......
admin/src/views/portal/ProductDetailsView.vue
View file @ f6a7dd57
<template> <template>
<Layout> <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="solution-page">
<div class="container"> <div class="container">
<h2>{{title}}</h2> <h2>{{title}}</h2>
<p>{{introduction}}</p> <p>{{introduction}}</p>
</div> </div>
</div> </div>
</div> </div>-->
<div class="gallery"> <div class="gallery">
<div class="active-photo" :style="'background-image: url('+ photos[activePhoto]+');'"> <div class="active-photo" :style="'background-image: url('+ photos[activePhoto]+');'">
...@@ -51,13 +51,63 @@ export default { ...@@ -51,13 +51,63 @@ export default {
title: '', title: '',
introduction:'', introduction:'',
activePhoto: 0, activePhoto: 0,
list:[],
photos: [] photos: []
} }
}, },
mounted() { mounted() {
this.getProductById(this.$route.params.productId) console.log(this.$route)
this.findExampleByExampleType(this.$route.params.typeId)
}, },
methods:{ 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){ getProductById(typeDetailsId){
//根据类型详细id获取详细信息 type/details //根据类型详细id获取详细信息 type/details
...@@ -113,7 +163,7 @@ export default { ...@@ -113,7 +163,7 @@ export default {
} }
.gallery-box .gallery { .gallery-box .gallery {
width: 80%; width: 60%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #ffffff; 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