2021-6-25
2021/7/10 23:36:54
本文主要是介绍2021-6-25，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
65
新手指导模块
<el-drawer
class="drawer"
:title="$t('新手引导')"
:visible.sync="drawer"
size="465.81px"
:modal="false"
>
<div
style="display:flex;justify-content:center;margin-left:20px;margin-right:10px;margin-top:20px"
class="detaill"
>
<el-tabs v-model="activeName" type="card" class="detail">
<el-tab-pane :label="$t('Step1相机部署')" name="first"
><Step1
/></el-tab-pane>
<el-tab-pane :label="$t('Step2盒子管理')" name="second"
><Step2
/></el-tab-pane>
<el-tab-pane :label="$t('Step3模型组管理')" name="third"
><Step3
/></el-tab-pane>
</el-tabs>
</div>
</el-drawer>
这个放在el-container里面就行，因为position是fixed不会影响别的元素。
然后是某Step
<template>
<div>
<div class="title">
<span class="title-blue"></span>
<p class="title-word" v-html="$t('新增相机部署')"></p>
</div>
<div
class="part"
v-html="
$t('进入相机部署页面')
"
></div>
<br />
<div style="margin-left:5px;display:flex;justify-content:center">
<img class="img" src="../assets/image/step1.png" />
</div>
<br />
</div>
</template>
<style lang="scss" scoped>
.img {
width: 426.19px;
margin-left: -5px;
}
.title {
padding: 1px;
}
.title-blue {
display: inline-block;
width: 4px;
height: 16px;
margin-top: 5px;
background-color: #3488E2;
line-height: 2;
}
.title-word {
margin-top: -20px;
margin-left: 15px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.part {
margin-left: 2px;
// margin-right: 10px;
line-height: 1.5;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
}
</style>
因为之前有空格，现在删了，所以没有改。加上‘&npsb；’+就有空格了。
然后就是帮助的图标
<span style="margin-left: auto;">
<el-dropdown
@command="handleCommand"
trigger="click"
@visible-change="changeColor"
>
<span :class="blue?'el-dropdown-link':'origin'">
<span class="test">
<img
class="operation-icon"
src="../assets/image/activehelp.png"
/>
{{ $t('帮助') }}
</span>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="document">{{
$t('帮助文档')
}}</el-dropdown-item>
<el-dropdown-item command="guide">{{
$t('新手引导')
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
这个其实不难但是就是css比较难
一个是那个图片+文字的下拉点击按钮，hover的时候一起变蓝
.operation-icon {
margin-bottom: -5px;
margin-right: 0px;
cursor: pointer;
width: 20px;
filter: grayscale(1);
}
.operation-icon:hover {
margin-bottom: -5px;
margin-right: 0px;
cursor: pointer;
width: 20px;
filter: grayscale(0);
}
.el-dropdown-link:focus {
font-family: PingFangSC-Medium, PingFang SC;
color: #3488e2;
.test img {
filter: grayscale(0);
}
}
.origin {
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
font-family: PingFangSC-Medium, PingFang SC;
.test img {
filter: grayscale(1);
margin-right: 0px;
}
}
.origin:hover {
color: #3488e2;
font-family: PingFangSC-Medium, PingFang SC;
.test img {
filter: grayscale(0);
margin-right: 0px;
}
}
不hover的时候设为灰色，也就是灰度置1，hover置0。blue通过点击事件来控制。
changeColor (value) {
this.blue = value
},
handleCommand (command) {
if (command === 'document') {
this.jumpToHelp()
} else {
this.drawer = true
}
},
还有就是drawer打开的时候不让他影响后面的页面点击，drawer的遮罩层设置为false。
.el-drawer__wrapper {
margin-left: auto;
width: 500px;
}
放个全的
<template>
<el-container class="container">
<el-drawer
class="drawer"
:title="$t('新手引导')"
:visible.sync="drawer"
size="465.81px"
:modal="false"
>
<div
style="display:flex;justify-content:center;margin-left:20px;margin-right:10px;margin-top:20px"
class="detaill"
>
<el-tabs v-model="activeName" type="card" class="detail">
<el-tab-pane :label="$t('Step1相机部署')" name="first"
><Step1
/></el-tab-pane>
<el-tab-pane :label="$t('Step2盒子管理')" name="second"
><Step2
/></el-tab-pane>
<el-tab-pane :label="$t('Step3模型组管理')" name="third"
><Step3
/></el-tab-pane>
</el-tabs>
</div>
</el-drawer>
<!-- <transition name="el-zoom-in-top">
<div class="container-alert" v-if="websocketLinking">
<i
class="el-icon-loading"
style="font-size: 16px; margin-right: 10px;"
></i>
{{ $t('正在连接服务器') }}
</div>
</transition> -->
<el-container class="container-content">
<el-header class="container-content-header">
<img
style="height: 30px;"
:key="$store.state.systemInfo.logo"
:src="$store.state.systemInfo.logo || defaultLogo"
alt="logo"
/>
<span style="margin: 0 10px;">|</span
>{{ $store.state.systemInfo.systemName || $t('系统名称') }}
<span style="margin-left: auto;">
<el-dropdown
@command="handleCommand"
trigger="click"
@visible-change="changeColor"
>
<span :class="blue?'el-dropdown-link':'origin'">
<span class="test">
<img
class="operation-icon"
src="../assets/image/activehelp.png"
/>
{{ $t('帮助') }}
</span>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="document">{{
$t('帮助文档')
}}</el-dropdown-item>
<el-dropdown-item command="guide">{{
$t('新手引导')
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</el-header>
<el-container style="overflow: hidden;">
<el-aside class="container-aside" width="150px">
<el-menu class="container-menu">
<el-menu-item index="realtimeWatch">
<router-link
class="menu-sub-item-content"
:to="{ name: 'realtimeWatch' }"
>
<i class="el-icon-video-play"></i>
{{ $t('实时查看') }}
</router-link>
</el-menu-item>
<el-menu-item index="cameraDeploy">
<router-link
class="menu-sub-item-content"
:to="{ name: 'cameraDeploy' }"
>
<i class="el-icon-video-camera"></i>
{{ $t('相机部署') }}
</router-link>
</el-menu-item>
<el-menu-item index="boxManage">
<router-link
class="menu-sub-item-content"
:to="{ name: 'boxManage' }"
>
<i class="el-icon-box"></i>
{{ $t('盒子管理') }}
</router-link>
</el-menu-item>
<el-menu-item index="modelManage">
<router-link
class="menu-sub-item-content"
:to="{ name: 'modelManage' }"
>
<i class="el-icon-document"></i>
{{ $t('模型管理') }}
</router-link>
</el-menu-item>
<el-menu-item index="systemManage">
<router-link
class="menu-sub-item-content"
:to="{ name: 'systemManage' }"
>
<i class="el-icon-setting"></i>
{{ $t('系统设置') }}
</router-link>
</el-menu-item>
<el-menu-item index="systemManage">
<router-link
class="menu-sub-item-content"
:to="{ name: 'sampleProject' }"
>
<i class="el-icon-bell"></i>
{{ $t('事件展示') }}
</router-link>
</el-menu-item>
</el-menu>
<!-- <el-switch
:active-value="LANG.english"
:inactive-value="LANG.chinese"
@change="changeLanguage"
v-model="language"
active-text="English"
inactive-text="中文"
></el-switch> -->
</el-aside>
<el-main class="container-content-main"
><router-view></router-view
></el-main>
</el-container>
</el-container>
</el-container>
</template>
<script>
import Vue from 'vue'
import io from 'socket.io-client'
import { LANG } from '@/constant'
import defaultLogo from '@/assets/logo.png'
import { GetCustomSystemInfo } from '@/api/ports'
import { BASE_URL, BASE_URL_SOCKET } from '@/utils'
import Step1 from '@/components/Step1.vue'
import Step2 from '@/components/Step2.vue'
import Step3 from '@/components/Step3.vue'
export default {
components: {
Step1,
Step2,
Step3
},
data () {
return {
blue: false,
activeName: 'first',
drawer: false,
connection: null,
language: LANG.chinese,
LANG,
defaultLogo,
websocketLinking: false,
alertHideTimeout: null,
retryTimeout: null
}
},
mounted () {
this.stopSocket()
this.startSocket()
this.language = this.$store.state.language
this.$i18n.locale = this.$store.state.language
this.getSystemNameAndLogoInfo()
// FIXME:
// this.startSocket()
// TODO 获取系统信息
// this.getSystemUserInfo()
// this.$API.system.GetCustomSystemInfo().then(res => {
// if (res.result){
// this.$store.commit('setSystemInfo', {
// systemName: res.data.platform_name,
// logo: res.data.platform_icon_path ? GetFile(res.data.platform_icon_path) : ''
// })
// }else {
// this.$message.error(res.message)
// }
// })
},
methods: {
changeColor (value) {
this.blue = value
},
handleCommand (command) {
if (command === 'document') {
this.jumpToHelp()
} else {
this.drawer = true
}
},
getSystemNameAndLogoInfo () {
GetCustomSystemInfo().then(result => {
console.log(result)
if (result) {
this.GetFile(result.logo)
this.$store.commit('setSystemInfo', {
systemName: result.name,
logo: result.logo ? this.GetFile(result.logo) : ''
})
}
})
},
GetFile (path, download = false) {
return `${BASE_URL}${path}`
},
jumpToHelp () {
window.open(`${BASE_URL}/config/help`)
},
async getSystemInfo () {
const systemInfo = await GetCustomSystemInfo()
console.log(systemInfo)
},
changeLanguage () {
this.$store.commit('setLanguage', this.language)
this.$i18n.locale = this.language
},
stopSocket () {
if (Vue.prototype.$WebsocketConnection) {
Vue.prototype.$WebsocketConnection.close()
Vue.prototype.$WebsocketConnection = null
}
},
socketOpenWithToken (token) {
const url = BASE_URL_SOCKET
Vue.prototype.$WebsocketConnection = io(`${url}/server?token=${token}`, {
transports: ['websocket'],
timestampRequests: true
})
Vue.prototype.$WebsocketConnection.on('connect_error', e => {
console.log('socket io connect_error ', url)
this.websocketLinking = true
clearTimeout(this.retryTimeout)
this.retryTimeout = setTimeout(() => {
const token = localStorage.getItem('token')
this.socketOpenWithToken(token)
}, 2000)
})
Vue.prototype.$WebsocketConnection.on('disconnect', e => {
console.log('socket io disconnect ', url)
this.websocketLinking = true
})
Vue.prototype.$WebsocketConnection.on('connect', () => {
console.log('socket io connect ', url)
clearTimeout(this.alertHideTimeout)
this.alertHideTimeout = setTimeout(() => {
this.websocketLinking = false
}, 1500)
})
},
startSocket () {
this.stopSocket()
const token = localStorage.getItem('token')
this.socketOpenWithToken(token)
}
},
destroyed () {
this.stopSocket()
clearTimeout(this.alertHideTimeout)
clearTimeout(this.retryTimeout)
}
}
</script>
<style lang="scss" scoped>
@import '../style/variables';
@import '../style/theme';
.operation-icon {
margin-bottom: -5px;
margin-right: 0px;
cursor: pointer;
width: 20px;
filter: grayscale(1);
}
.operation-icon:hover {
margin-bottom: -5px;
margin-right: 0px;
cursor: pointer;
width: 20px;
filter: grayscale(0);
}
.el-dropdown-menu__item {
color: rgba(255, 255, 255, 0.6);
}
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #2f2f2f;
}
.el-drawer__wrapper {
margin-left: auto;
width: 500px;
}
.el-tabs__nav-next {
display: none;
}
.el-tabs__nav-prev {
display: none;
}
.container {
overflow: hidden;
height: 100%;
&-aside {
@include var(background-color, color-bg-dark-2);
text-align: center;
line-height: 200px;
height: 100%;
box-shadow: 2px 0px 0px 0px #000000;
z-index: 1;
}
&-menu {
@include var(background-color, color-bg-dark-1);
border-right: none;
color: rgba(255, 255, 255, 0.6);
}
&-content {
&-header {
@include var(background-color, color-bg-dark-1);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.6), 0px 2px 0px 0px black;
z-index: 2;
display: flex;
align-items: center;
}
&-main {
display: flex;
flex-direction: column;
@include var(background-color, color-bg-dark-1);
padding: 0;
overflow: hidden;
}
}
&-alert {
position: fixed;
top: 10px;
left: calc(50% - 200px);
height: 40px;
width: 400px;
line-height: 40px;
padding: 0 20px;
background: rgba($color: #e6a23c, $alpha: 0.7);
z-index: 3;
color: #fff;
font-size: 14px;
border-radius: 4px;
text-align: center;
}
}
.menu-sub-item-content {
width: 100%;
height: 100%;
display: block;
}
.menu-icon {
color: rgba($color: #fff, $alpha: 0.49);
font-size: 24px;
vertical-align: sub;
}
.el-dropdown-link:focus {
font-family: PingFangSC-Medium, PingFang SC;
color: #3488e2;
.test img {
filter: grayscale(0);
}
}
.el-dropdown {
font-family: PingFangSC-Medium, PingFang SC;
display: inline-block;
position: relative;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.origin {
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
font-family: PingFangSC-Medium, PingFang SC;
.test img {
filter: grayscale(1);
margin-right: 0px;
}
}
.origin:hover {
color: #3488e2;
font-family: PingFangSC-Medium, PingFang SC;
.test img {
filter: grayscale(0);
margin-right: 0px;
}
}
</style>
<style lang="scss">
@import '../style/variables';
.drawer .el-drawer__body {
overflow-y: scroll;
border-top: solid 1px;
color: rgba(255, 255, 255, 0.1);
}
.detail.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #5f5f5f;
background-color: rgba(255, 255, 255, 0.1);
}
.detail .el-tabs--card > .el-tabs__header .el-tabs__item {
border-left: none;
width: 142px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border-radius: 1px 0px 0px 1px;
}
.detail .el-tabs__item {
padding: 0 23px;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.detail .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item {
color: rgba(255, 255, 255, 0.8);
}
.detail .el-tabs--card > .el-tabs__header .el-tabs__nav {
width: 426px;
height: 36px;
border-radius: 1px;
border: 1px solid #5f5f5f;
}
.drawer .el-drawer.rtl {
background-color: #3b3b3b;
}
.drawer .el-drawer__header {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
line-height: 0px;
margin-top: -2px;
margin-bottom: 17px;
}
.detail.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
color: rgba(255, 255, 255, 0.8);
}
.drawer .el-drawer__close-btn :hover {
border: none;
cursor: pointer;
font-size: 20px;
color: #3488e2;
background-color: transparent;
}
.detail .el-tabs__nav-scroll {
overflow: hidden;
display: flex;
justify-content: center;
}
.el-menu-item {
text-align: left;
padding: 0;
padding-left: 0;
height: 80px;
margin-left: -20px;
line-height: 80px;
overflow: hidden;
box-shadow: 0px 2px 0px 0px #000000;
&:hover {
background: #000 !important;
}
}
.menu-sub-item-content {
text-decoration: none;
padding-left: 18px;
color: #fff;
&.router-link-exact-active {
box-shadow: inset 8px 0px 0px 0px $--color-primary;
}
}
</style>
这篇关于2021-6-25的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-23线下车企门店如何实现线上线下融合？
- 2024-12-23鸿蒙Next ArkTS编程规范总结
- 2024-12-23物流团队冬至高效运转，哪款办公软件可助力风险评估？
- 2024-12-23优化库存，提升效率：医药企业如何借助看板软件实现仓库智能化
- 2024-12-23项目管理零负担！轻量化看板工具如何助力团队协作
- 2024-12-23电商活动复盘，为何是团队成长的核心环节？
- 2024-12-23鸿蒙Next ArkTS高性能编程实战
- 2024-12-23数据驱动：电商复盘从基础到进阶！
- 2024-12-23从数据到客户：跨境电商如何通过销售跟踪工具提升营销精准度？
- 2024-12-23汽车4S店运营效率提升的核心工具
