11-wms-zjl #8
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
BIN
src/assets/img/choicepart/choicepart-back-u.png
Normal file
After Width: | Height: | Size: 183 KiB |
Before Width: | Height: | Size: 3.5 MiB After Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 29 KiB |
@ -11,10 +11,12 @@
|
||||
|
||||
<div class="right-menu">
|
||||
|
||||
<div v-if="showhome" class="right-menu-back" @click="toHome">
|
||||
<!-- <div v-if="showhome" class="right-menu-back" @click="toHome">
|
||||
<svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" />
|
||||
{{ 'navbar.homepage' | i18nFilter }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back" @click="toHome">
|
||||
<svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" /></div>
|
||||
<el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<el-badge :hidden="alarmNum>0?false:true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
|
||||
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
|
||||
@ -204,8 +206,12 @@ export default {
|
||||
clearInterval(logoutInterval)
|
||||
},
|
||||
async toHome() {
|
||||
this.$store.dispatch('app/setChoicepart')
|
||||
this.$router.push('/')
|
||||
// this.$store.dispatch('app/setChoicepart')
|
||||
// this.$router.push('/')
|
||||
if (localStorage.getItem('param')) {
|
||||
const param = JSON.parse(window.atob(localStorage.getItem('param')))
|
||||
window.location = 'https://www.baidu.com/?' + param
|
||||
}
|
||||
},
|
||||
handleAlarm() {},
|
||||
getAlarm() {
|
||||
|
@ -1,21 +1,25 @@
|
||||
<template>
|
||||
<div class="choicepart-container">
|
||||
<div id="container" class="choicepart-container">
|
||||
<div class="choicepat-navbar">
|
||||
<navbar :showhome="false" :show-title="true" />
|
||||
</div>
|
||||
<div class="choicepart-box">
|
||||
<div class="choicepart-box" :style="{ width: 1585 * beilv + 'px' }">
|
||||
<div
|
||||
v-for="(item, index) in moduleList"
|
||||
:key="item.path"
|
||||
class="choicepart-item"
|
||||
:style="{ width: 180 * beilv + 'px', height: 223 * beilv + 'px', margin: 40 * beilv + 'px' }"
|
||||
@click="handelClick(item, index)"
|
||||
>
|
||||
<div class="choicepart-item-border">
|
||||
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="">
|
||||
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="" :style="{ width: 90 * beilv + 'px', height: 90 * beilv + 'px', top: 35 * beilv + 'px', left: 50 * beilv + 'px' }">
|
||||
</div>
|
||||
<div class="choicepart-item-title" :title="item.meta.title">{{ item.meta.title }}</div>
|
||||
<div class="choicepart-item-title" :title="item.meta.title" :style="{ height: 40 * beilv + 'px', lineHeight: 40 * beilv + 'px', fontSize: 16 * beilv + 'px' }">{{ item.meta.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-img">
|
||||
<img :src="require('../../assets/img/choicepart/choicepart-back-u.png')" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,11 +32,25 @@ export default {
|
||||
components: { Navbar },
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
moduleList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.isFullScreen) {
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
} else {
|
||||
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||||
}
|
||||
})
|
||||
this.getModuleList()
|
||||
const path = location.href
|
||||
if (path.indexOf('?') !== -1) {
|
||||
const param = path.split('?')
|
||||
localStorage.setItem('param', window.btoa(JSON.stringify(param[1])))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getModuleList() {
|
||||
@ -70,41 +88,38 @@ export default {
|
||||
.choicepart-container {
|
||||
min-width: 100%;
|
||||
min-height: 100vh;
|
||||
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
|
||||
background: url('../../assets/img/choicepart/choicepart-back.png') repeat;
|
||||
background-size: cover;
|
||||
overflow-x: auto;
|
||||
.choicepart-box {
|
||||
width: 1585px;
|
||||
// width: 1585px;
|
||||
margin: 0 auto;
|
||||
padding-top: 25vh;
|
||||
.choicepart-item {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 223px;
|
||||
margin: 40px;
|
||||
// width: 180px;
|
||||
// height: 223px;
|
||||
// margin: 40px;
|
||||
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// border: 1px dashed #fff;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
||||
top: 0;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
img {
|
||||
width: 90px;
|
||||
height: 99px;
|
||||
// width: 90px;
|
||||
// height: 90px;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 43px;
|
||||
// top: 32px;
|
||||
// left: 43px;
|
||||
}
|
||||
.choicepart-item-border {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
line-height: 32px;
|
||||
font-size: 28px;
|
||||
// line-height: 32px;
|
||||
// font-size: 28px;
|
||||
font-weight: lighter;
|
||||
color: #2c6bd8;
|
||||
overflow: hidden;
|
||||
@ -120,9 +135,9 @@ export default {
|
||||
right: 2px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
// font-size: 16px;
|
||||
// line-height: 40px;
|
||||
// height: 40px;
|
||||
letter-spacing: 2px;
|
||||
background-color: rgba($color: #0b58ff, $alpha: 0.45);
|
||||
}
|
||||
@ -140,6 +155,13 @@ export default {
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.bottom-img {
|
||||
img {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
//滚动条凹槽的颜色,还可以设置边框属性
|
||||
|