321 lines
8.6 KiB
Vue
321 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container">
|
|
<div class="nav">
|
|
<div
|
|
class="menu"
|
|
:class="{ active: current === 0 }"
|
|
@click="tpPage('/home')"
|
|
>
|
|
首页
|
|
</div>
|
|
<div class="menu" :class="{ active: current === 1 }">
|
|
<el-dropdown @command="tpPage">
|
|
<span class="menu"> 产品 </span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item
|
|
command="/product/RV400-AR100"
|
|
>矽璓智能终端RV400-NPU16T-5G-AR100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/RV400-SR100"
|
|
>矽璓智能终端RV400-NPU4T-5G-SR100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/M168-SM100"
|
|
>矽璓智能终端M168-NPU4T-4G-SM100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/M528"
|
|
>矽璓智能终端M528-A800-5G-HM100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/RV400-CR100"
|
|
>矽璓智能终端RV400-4G-CR100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/M528-CM100"
|
|
>矽璓智能终端M528-LoRa-CM100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/RV400"
|
|
>矽璓智能终端RV400-4G-FR100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/M168"
|
|
>矽璓智能终端M168-LoRa-FM100</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/edu-riscv64"
|
|
>edu-riscv64教育开发板</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/product/edu-arm"
|
|
>edu-arm教育开发板</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<div
|
|
class="menu"
|
|
:class="{ active: current === 2 }"
|
|
style="padding: 0 20px"
|
|
>
|
|
<el-dropdown @command="tpPage">
|
|
<span class="menu"> 解决方案 </span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item
|
|
command="/solution/shengda"
|
|
>大胜达环境智能感知系统</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/solution/qianjiang"
|
|
>钱江电气智能电力监控系统</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<div
|
|
class="menu"
|
|
:class="{ active: current === 4 }"
|
|
style="padding: 0 20px"
|
|
>
|
|
<el-dropdown @command="tpPage">
|
|
<span class="menu"> 组态开发 </span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item
|
|
command="/configuration/development"
|
|
>流程规划</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/configuration/transferStation"
|
|
>变电站</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/configuration/AiCity"
|
|
>智慧城市</el-dropdown-item>
|
|
<el-dropdown-item
|
|
command="/configuration/bridgeMachine"
|
|
>大方架桥机</el-dropdown-item>
|
|
</el-dropdown-menu></el-dropdown>
|
|
</div>
|
|
<div
|
|
class="menu"
|
|
:class="{ active: current === 3 }"
|
|
style="padding: 0 20px"
|
|
@click="tpPage('/login')"
|
|
>
|
|
管理平台
|
|
</div>
|
|
</div>
|
|
<div class="body-container">
|
|
<div>
|
|
<h1 class="slogan">赋能感联知控 襄助智慧生产</h1>
|
|
<h2 style="font-weight: normal; font-family: Nunito; opacity: 0.8">
|
|
为万物互联提供可靠安全稳定的终端接入、设备管理、数据分析等核心功能
|
|
</h2>
|
|
</div>
|
|
<div v-if="showWebsite" class="website">
|
|
<div class="url" />
|
|
<div class="url_button">
|
|
<el-link class="url_link" href="http://xuos.io">了解更多</el-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-box">
|
|
<el-popover placement="left" trigger="hover">
|
|
<ul>
|
|
<li>
|
|
<p>
|
|
<span style="font-weight: bold">
|
|
<svg-icon icon-class="phone" class="contact_icon" />
|
|
咨询电话
|
|
</span>
|
|
<br>
|
|
<span style="margin-left: 30px">15968835923</span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span style="font-weight: bold">
|
|
<svg-icon icon-class="address" class="contact_icon" />
|
|
地址
|
|
</span>
|
|
<br>
|
|
<span style="margin-left: 30px; display: block">
|
|
浙江省杭州市萧山区永晖路233号杭州湾智慧谷27F
|
|
</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
<div slot="reference" class="contact_btn">联系我们</div>
|
|
</el-popover>
|
|
<div class="contact_btn" @click="visible = true">在线咨询</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
:visible.sync="visible"
|
|
title="留言板"
|
|
width="300px"
|
|
@close="close"
|
|
>
|
|
<el-form ref="form" :model="form">
|
|
<el-form-item prop="msg">
|
|
<el-input
|
|
v-model="form.msg"
|
|
type="textarea"
|
|
placeholder="请在此输入留言内容，我们会尽快与您联系。"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="gender">
|
|
<el-input v-model="form.gender" placeholder="姓名" />
|
|
</el-form-item>
|
|
<el-form-item prop="phone">
|
|
<el-input v-model="form.phone" placeholder="电话" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="send">发送</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
<slot name="content" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
current: {
|
|
default: 0,
|
|
type: Number
|
|
},
|
|
showWebsite: {
|
|
default: true,
|
|
type: Boolean
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
form: {
|
|
msg: '',
|
|
gender: '',
|
|
phone: ''
|
|
}
|
|
}
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
close() {
|
|
this.$refs.form.resetFields()
|
|
},
|
|
send() {
|
|
if (!this.form.phone) {
|
|
this.$message.warning('请填写电话')
|
|
return
|
|
} else {
|
|
this.visible = false
|
|
this.$message.success('留言成功，工作人员稍后会与您联系')
|
|
}
|
|
},
|
|
tpPage(router) {
|
|
this.$router.push({ path: router })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-form {
|
|
margin: auto 20px;
|
|
}
|
|
.el-form-item__content .el-input {
|
|
width: 100%;
|
|
}
|
|
.el-dropdown-menu {
|
|
width: auto;
|
|
}
|
|
.container {
|
|
min-width: 1340px;
|
|
height: 100vh;
|
|
position: relative;
|
|
background: url("~@/assets/images/home_bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.nav {
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
right: 120px;
|
|
top: 3px;
|
|
background-color: rgba(95, 155, 241, 0.39);
|
|
width: 700px;
|
|
.menu {
|
|
height: 70px;
|
|
line-height: 70px;
|
|
text-align: center;
|
|
flex: 1;
|
|
font-weight: bold;
|
|
font-size: 26px;
|
|
font-family: Poplar Std;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.body-container {
|
|
padding: 25vh 0 0 11%;
|
|
color: #fff;
|
|
.slogan {
|
|
font-family: Roboto;
|
|
font-size: 45px;
|
|
}
|
|
.website {
|
|
display: flex;
|
|
line-height: 45px;
|
|
.url {
|
|
width: 320px;
|
|
background: url("~@/assets/images/url.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.url_button {
|
|
margin-left: 50px;
|
|
border-radius: 5px;
|
|
background-color: #5f9bf1;
|
|
.url_link {
|
|
color: #fff;
|
|
padding: 0 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.contact-box {
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20vh;
|
|
z-index: 10;
|
|
.contact_btn {
|
|
&:last-child {
|
|
margin-top: 10px;
|
|
}
|
|
&:hover {
|
|
color: #00bfff;
|
|
}
|
|
background-color: rgb(73, 102, 178);
|
|
width: 70px;
|
|
height: 70px;
|
|
color: #fff;
|
|
padding: 10px;
|
|
line-height: 27px;
|
|
text-align: center;
|
|
font-family: Nunito;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.contact_icon {
|
|
margin-right: 14px;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
ul {
|
|
width: 200px;
|
|
padding-left: 10px;
|
|
color: #757f92;
|
|
li {
|
|
list-style: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.active {
|
|
background-color: #5f9bf1;
|
|
}
|
|
</style>
|