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-11-12手机端网页开发资料:新手入门指南
- 2024-11-12网页开发资料入门教程
- 2024-11-12响应式布局资料:新手入门教程
- 2024-11-12移动布局资料:新手入门指南
- 2024-11-12AJAX资料详解:新手入门教程
- 2024-11-12Button标签资料详解:初学者必看教程
- 2024-11-12Div标签资料:新手入门教程
- 2024-11-11PS网页切图项目实战:新手入门教程
- 2024-11-11Span标签项目实战:新手入门教程
- 2024-11-11Web网页开发项目实战:从入门到独立完成项目