848 lines
18 KiB
Vue
848 lines
18 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2021-07-19 15:18:30
|
|
* @LastEditors: zhp
|
|
* @LastEditTime: 2022-01-25 16:50:41
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div id="container" ref="container" class="visual-container">
|
|
<el-row
|
|
class="container-title"
|
|
:style="{ height: beilv * 88 + 'px', lineHeight: beilv * 88 + 'px', fontSize: beilv * 32 + 'px' }"
|
|
>
|
|
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
|
产线监控 产线一
|
|
<el-button
|
|
type="text"
|
|
class="title-button"
|
|
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
|
|
@click="changeFullScreen"
|
|
>
|
|
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
|
<svg-icon v-else icon-class="fullScreenView" />
|
|
</el-button>
|
|
</el-row>
|
|
<el-row class="container-main">
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
|
<el-col :span="8">
|
|
<el-row>
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
|
<base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv">
|
|
<!-- <base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv" :height="360"> -->
|
|
<now-team />
|
|
</base-container>
|
|
</el-col>
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
|
<base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv">
|
|
<!-- <base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv" :height="296"> -->
|
|
<base-table
|
|
:page="1"
|
|
:limit="6"
|
|
:beilv="beilv"
|
|
:table-config="qualityTableProps"
|
|
:table-data="qualityList"
|
|
/>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
|
|
<!-- <el-row>
|
|
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
|
<base-container :beilv="beilv" :height="672">
|
|
<base-video :video-height="624" :beilv="beilv" />
|
|
<video-footer :beilv="beilv" />
|
|
</base-container>
|
|
</el-col>
|
|
</el-row> -->
|
|
|
|
<el-col :span="16">
|
|
<el-row>
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
|
<base-container title="产量情况" title-icon="yield" :beilv="beilv">
|
|
<!-- <base-container title="产量情况" title-icon="yield" :beilv="beilv" :height="318"> -->
|
|
<top-radio-group />
|
|
<three-bar-chart :name-list="clNameList" :data-list="clDataList" :height="192" :beilv="beilv" />
|
|
</base-container>
|
|
</el-col>
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
|
<base-container title="产线产量情况" title-icon="yieldline" :beilv="beilv" :height="338">
|
|
<top-radio-group />
|
|
<linear-bar-chart
|
|
:name-list="cxNameList"
|
|
:data-list="cxDataList"
|
|
:height="212"
|
|
:beilv="beilv"
|
|
:show-legend="true"
|
|
/>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="15">
|
|
<base-container title="质量缺陷信息月度总览" title-icon="qualitydefectmonth" :beilv="beilv" :height="256">
|
|
<div class="visual-select">
|
|
选择月(每天平均值)
|
|
<el-select v-model="modelMonth" size="mini" placeholder="">
|
|
<el-option key="1" value="12月" label="12月" default />
|
|
</el-select>
|
|
</div>
|
|
<base-table
|
|
:page="1"
|
|
:limit="5"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="qualityMonthTableProps"
|
|
:table-data="qualityMonthList"
|
|
/>
|
|
</base-container>
|
|
</el-col>
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="9">
|
|
<base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="256">
|
|
<div class="visual-select">
|
|
选择年(每天平均值)
|
|
<el-select v-model="modelYear" size="mini" placeholder="">
|
|
<el-option key="1" value="2021年" label="2021年" default />
|
|
</el-select>
|
|
</div>
|
|
<base-table
|
|
:page="1"
|
|
:limit="5"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="qualityYearTableProps"
|
|
:table-data="qualityYearList"
|
|
/>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv" />
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import baseContainer from './components/baseContainer'
|
|
import baseTable from './components/baseTable'
|
|
import { mapGetters } from 'vuex'
|
|
import screenfull from 'screenfull'
|
|
import nowTeam from './components/ProductionLineMonitoringCockpit/nowTeam.vue'
|
|
import TopRadioGroup from './components/topRadioGroup'
|
|
import BaseTable from './components/baseTable.vue'
|
|
// import BaseVideo from './components/baseVideo.vue'
|
|
import ThreeBarChart from './components/threeBarChart.vue'
|
|
import LinearBarChart from './components/linearBarChart'
|
|
// import VideoFooter from './components/videoFooter'
|
|
|
|
const qualityTableProps = [
|
|
{
|
|
prop: 'createTime',
|
|
label: '发生时间'
|
|
},
|
|
{
|
|
prop: 'content',
|
|
label: '缺陷内容'
|
|
},
|
|
{
|
|
prop: 'productLine',
|
|
label: '产线'
|
|
},
|
|
{
|
|
prop: 'process',
|
|
label: '发生工序'
|
|
}
|
|
]
|
|
|
|
const qualityList = [
|
|
{ createTime: '12:00:01', content: '报废', productLine: '钢一线', process: '磨边' },
|
|
{ createTime: '11:20:51', content: '报废', productLine: '钢二线', process: '镀膜' },
|
|
{ createTime: '11:05:21', content: '报废', productLine: '钢三线', process: '钢化' },
|
|
{ createTime: '11:02:16', content: '报废', productLine: '钢四线', process: '钢化' },
|
|
{ createTime: '10:50:49', content: '报废', productLine: '钢五线', process: '包装' },
|
|
{ createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' }
|
|
]
|
|
|
|
const qualityMonthTableProps = [
|
|
{
|
|
prop: 'teamName',
|
|
label: '班组名称'
|
|
},
|
|
{
|
|
prop: '1',
|
|
label: '2021/12/1'
|
|
},
|
|
{
|
|
prop: '2',
|
|
label: '2号'
|
|
},
|
|
{
|
|
prop: '3',
|
|
label: '3号'
|
|
},
|
|
{
|
|
prop: '4',
|
|
label: '4号'
|
|
},
|
|
{
|
|
prop: '5',
|
|
label: '5号'
|
|
},
|
|
{
|
|
prop: '6',
|
|
label: '6号'
|
|
},
|
|
{
|
|
prop: '7',
|
|
label: '7号'
|
|
},
|
|
{
|
|
prop: '8',
|
|
label: '8号'
|
|
},
|
|
{
|
|
prop: '9',
|
|
label: '9号'
|
|
},
|
|
{
|
|
prop: '10',
|
|
label: '10号'
|
|
},
|
|
{
|
|
prop: '11',
|
|
label: '11号'
|
|
},
|
|
{
|
|
prop: '12',
|
|
label: '12号'
|
|
},
|
|
{
|
|
prop: '13',
|
|
label: '13号'
|
|
},
|
|
{
|
|
prop: '14',
|
|
label: '14号'
|
|
},
|
|
{
|
|
prop: '15',
|
|
label: '15号'
|
|
},
|
|
{
|
|
prop: '16',
|
|
label: '16号'
|
|
},
|
|
{
|
|
prop: '17',
|
|
label: '17号'
|
|
},
|
|
{
|
|
prop: '18',
|
|
label: '18号'
|
|
},
|
|
{
|
|
prop: '19',
|
|
label: '19号'
|
|
},
|
|
{
|
|
prop: '20',
|
|
label: '20号'
|
|
},
|
|
{
|
|
prop: '21',
|
|
label: '21号'
|
|
},
|
|
{
|
|
prop: '22',
|
|
label: '22号'
|
|
},
|
|
{
|
|
prop: '23',
|
|
label: '23号'
|
|
},
|
|
{
|
|
prop: '24',
|
|
label: '24号'
|
|
},
|
|
{
|
|
prop: '25',
|
|
label: '25号'
|
|
},
|
|
{
|
|
prop: '26',
|
|
label: '26号'
|
|
},
|
|
{
|
|
prop: '27',
|
|
label: '27号'
|
|
},
|
|
{
|
|
prop: '28',
|
|
label: '28号'
|
|
},
|
|
{
|
|
prop: '29',
|
|
label: '29号'
|
|
},
|
|
{
|
|
prop: '30',
|
|
label: '30号'
|
|
},
|
|
{
|
|
prop: '31',
|
|
label: '31号'
|
|
}
|
|
]
|
|
|
|
const qualityMonthList = [
|
|
{
|
|
teamName: '早班执行一组',
|
|
'1': '97.2%',
|
|
'2': '98.3%',
|
|
'3': '97.3%',
|
|
'4': '98.5%',
|
|
'5': '98.67%',
|
|
'6': '97.54%',
|
|
'7': '97.43%',
|
|
'8': '97.65%',
|
|
'9': '97.34%',
|
|
'10': '98.34%',
|
|
'11': '98.76%',
|
|
'12': '97.43%',
|
|
'13': '98.65%',
|
|
'14': '97.86%',
|
|
'15': '98.77%',
|
|
'16': '98.54%',
|
|
'17': '97.59%',
|
|
'18': '98.76%',
|
|
'19': '98.55%',
|
|
'20': '97.87%',
|
|
'21': '98.76%',
|
|
'22': '99.11%',
|
|
'23': '98.12%',
|
|
'24': '98.86%',
|
|
'25': '98.34%',
|
|
'26': '97.34%',
|
|
'27': '98.54%',
|
|
'28': '97.65%',
|
|
'29': '98.76%',
|
|
'30': '98.45%',
|
|
'31': '97.65%'
|
|
},
|
|
{
|
|
teamName: '早班执行二组',
|
|
'1': '97.22%',
|
|
'2': '98.37%',
|
|
'3': '97.38%',
|
|
'4': '98.52%',
|
|
'5': '98.76%',
|
|
'6': '97.55%',
|
|
'7': '97.32%',
|
|
'8': '97.23%',
|
|
'9': '97.45%',
|
|
'10': '98.75%',
|
|
'11': '98.34%',
|
|
'12': '97.34%',
|
|
'13': '98.23%',
|
|
'14': '97.65%',
|
|
'15': '98.43%',
|
|
'16': '98.57%',
|
|
'17': '97.34%',
|
|
'18': '98.86%',
|
|
'19': '98.43%',
|
|
'20': '97.34%',
|
|
'21': '98.75%',
|
|
'22': '99.43%',
|
|
'23': '98.45%',
|
|
'24': '98.32%',
|
|
'25': '98.34%',
|
|
'26': '97.43%',
|
|
'27': '98.54%',
|
|
'28': '97.64%',
|
|
'29': '98.65%',
|
|
'30': '98.43%',
|
|
'31': '97.23%'
|
|
},
|
|
{
|
|
teamName: '中班执行一组',
|
|
'1': '98.43%',
|
|
'2': '98.23%',
|
|
'3': '97.53%',
|
|
'4': '98.45%',
|
|
'5': '98.87%',
|
|
'6': '98.74%',
|
|
'7': '98.13%',
|
|
'8': '97.47%',
|
|
'9': '97.99%',
|
|
'10': '98.323%',
|
|
'11': '98.99%',
|
|
'12': '97.23%',
|
|
'13': '98.23%',
|
|
'14': '97.34%',
|
|
'15': '98.65%',
|
|
'16': '98.58%',
|
|
'17': '97.64%',
|
|
'18': '98.23%',
|
|
'19': '98.32%',
|
|
'20': '98.27%',
|
|
'21': '98.23%',
|
|
'22': '99%',
|
|
'23': '98.62%',
|
|
'24': '98.56%',
|
|
'25': '98.44%',
|
|
'26': '97.54%',
|
|
'27': '98.23%',
|
|
'28': '98.25%',
|
|
'29': '98.72%',
|
|
'30': '98.35%',
|
|
'31': '97.25%'
|
|
},
|
|
{
|
|
teamName: '中班执行三组',
|
|
'1': '97.23%',
|
|
'2': '98.23%',
|
|
'3': '97.31%',
|
|
'4': '98.53%',
|
|
'5': '98.64%',
|
|
'6': '97.34%',
|
|
'7': '97.34%',
|
|
'8': '97.23%',
|
|
'9': '97.32%',
|
|
'10': '98.23%',
|
|
'11': '98.32%',
|
|
'12': '97.55%',
|
|
'13': '98.67%',
|
|
'14': '97.23%',
|
|
'15': '98.23%',
|
|
'16': '98.64%',
|
|
'17': '97.65%',
|
|
'18': '98.19%',
|
|
'19': '98.23%',
|
|
'20': '97.17%',
|
|
'21': '98.17%',
|
|
'22': '99.38%',
|
|
'23': '98.47%',
|
|
'24': '98.23%',
|
|
'25': '98.74%',
|
|
'26': '97.23%',
|
|
'27': '97.32%',
|
|
'28': '97.78%',
|
|
'29': '98.67%',
|
|
'30': '98.23%',
|
|
'31': '97.68%'
|
|
},
|
|
{
|
|
teamName: '晚班执行一组',
|
|
'1': '97.32%',
|
|
'2': '98.34%',
|
|
'3': '97.37%',
|
|
'4': '98.58%',
|
|
'5': '98.87%',
|
|
'6': '97.34%',
|
|
'7': '97.23%',
|
|
'8': '97.35%',
|
|
'9': '97.64%',
|
|
'10': '98.33%',
|
|
'11': '98.76%',
|
|
'12': '97.23%',
|
|
'13': '98.33%',
|
|
'14': '97.44%',
|
|
'15': '98.34%',
|
|
'16': '98.43%',
|
|
'17': '97.43%',
|
|
'18': '98.43%',
|
|
'19': '98.66%',
|
|
'20': '97.45%',
|
|
'21': '98.36%',
|
|
'22': '99.14%',
|
|
'23': '98.57%',
|
|
'24': '98.32%',
|
|
'25': '98.23%',
|
|
'26': '97.78%',
|
|
'27': '98.23%',
|
|
'28': '97.23%',
|
|
'29': '98.34%',
|
|
'30': '98.54%',
|
|
'31': '97.67%'
|
|
}
|
|
]
|
|
|
|
const qualityYearTableProps = [
|
|
{
|
|
prop: 'teamName',
|
|
label: '班组名称'
|
|
},
|
|
{
|
|
prop: '1',
|
|
label: '2021/1'
|
|
},
|
|
{
|
|
prop: '2',
|
|
label: '2月'
|
|
},
|
|
{
|
|
prop: '3',
|
|
label: '3月'
|
|
},
|
|
{
|
|
prop: '4',
|
|
label: '4月'
|
|
},
|
|
{
|
|
prop: '5',
|
|
label: '5月'
|
|
},
|
|
{
|
|
prop: '6',
|
|
label: '6月'
|
|
},
|
|
{
|
|
prop: '7',
|
|
label: '7月'
|
|
},
|
|
{
|
|
prop: '8',
|
|
label: '8月'
|
|
},
|
|
{
|
|
prop: '9',
|
|
label: '9月'
|
|
},
|
|
{
|
|
prop: '10',
|
|
label: '10月'
|
|
},
|
|
{
|
|
prop: '11',
|
|
label: '11月'
|
|
},
|
|
{
|
|
prop: '12',
|
|
label: '12月'
|
|
}
|
|
]
|
|
|
|
const qualityYearList = [
|
|
{
|
|
teamName: '早班执行一组',
|
|
'1': '98.2%',
|
|
'2': '98.23%',
|
|
'3': '98.23%',
|
|
'4': '98.23%',
|
|
'5': '98.67%',
|
|
'6': '98.65%',
|
|
'7': '98.43%',
|
|
'8': '97.43%',
|
|
'9': '98.43%',
|
|
'10': '98.66%',
|
|
'11': '98.45%',
|
|
'12': '98.32%'
|
|
},
|
|
{
|
|
teamName: '早班执行二组',
|
|
'1': '98.76%',
|
|
'2': '98.72%',
|
|
'3': '98.6%',
|
|
'4': '99%',
|
|
'5': '98.4%',
|
|
'6': '98.3%',
|
|
'7': '99%',
|
|
'8': '97.3%',
|
|
'9': '98.2%',
|
|
'10': '98.63%',
|
|
'11': '98.32%',
|
|
'12': '98.32%'
|
|
},
|
|
{
|
|
teamName: '中班执行一组',
|
|
'1': '98.5%',
|
|
'2': '98.34%',
|
|
'3': '97.65%',
|
|
'4': '98.37%',
|
|
'5': '98.53%',
|
|
'6': '98.38%',
|
|
'7': '98.32%',
|
|
'8': '98.34%',
|
|
'9': '98.58%',
|
|
'10': '98.45%',
|
|
'11': '97.45%',
|
|
'12': '97.34%'
|
|
},
|
|
{
|
|
teamName: '中班执行三组',
|
|
'1': '97.65%',
|
|
'2': '97.54%',
|
|
'3': '98.44%',
|
|
'4': '98.23%',
|
|
'5': '97.43%',
|
|
'6': '98.43%',
|
|
'7': '98.34%',
|
|
'8': '97.34%',
|
|
'9': '98.34%',
|
|
'10': '98.33%',
|
|
'11': '98.56%',
|
|
'12': '98.3%'
|
|
},
|
|
{
|
|
teamName: '晚班执行一组',
|
|
'1': '98.4%',
|
|
'2': '98.65%',
|
|
'3': '98.34%',
|
|
'4': '98.34%',
|
|
'5': '98.65%',
|
|
'6': '98.34%',
|
|
'7': '98.45%',
|
|
'8': '98.34%',
|
|
'9': '98.43%',
|
|
'10': '98.34%',
|
|
'11': '98.34%',
|
|
'12': '97.43%'
|
|
}
|
|
]
|
|
|
|
const clNameList = [
|
|
'早班执行一组',
|
|
'早班执行二组',
|
|
'早班执行三组',
|
|
'中班执行一组',
|
|
'中班执行二组',
|
|
'中班执行三组',
|
|
'晚班执行一组',
|
|
'晚班执行二组',
|
|
'晚班执行三组'
|
|
]
|
|
const clDataList = [
|
|
{
|
|
topColor: '#7CB6FF',
|
|
bottomColor: '#166BD6',
|
|
name: '产量',
|
|
data: [100, 150, 121, 97, 140, 180, 11, 180]
|
|
}
|
|
]
|
|
|
|
const cxNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
const cxDataList = [
|
|
{
|
|
topColor: '#9DD5FF',
|
|
bottomColor: '#1295FF',
|
|
name: '钢一线',
|
|
data: [100, 150, 121, 97, 140, 111, 127]
|
|
},
|
|
{
|
|
topColor: '#FF8BC3',
|
|
bottomColor: '#EB46A1',
|
|
name: '钢二线',
|
|
data: [110, 110, 151, 77, 110, 98, 22]
|
|
},
|
|
{
|
|
topColor: '#85F6E9',
|
|
bottomColor: '#2EC6B4',
|
|
name: '钢三线',
|
|
data: [110, 120, 171, 287, 40, 160, 127]
|
|
},
|
|
{
|
|
topColor: '#9496FF',
|
|
bottomColor: '#6567FF',
|
|
name: '钢四线',
|
|
data: [140, 157, 122, 27, 240, 112, 21]
|
|
},
|
|
{
|
|
topColor: '#F68E8A',
|
|
bottomColor: '#E95552',
|
|
name: '钢五线',
|
|
data: [170, 180, 127, 17, 340, 111, 98]
|
|
},
|
|
{
|
|
topColor: '#FFE873',
|
|
bottomColor: '#E7AE2A',
|
|
name: '钢六线',
|
|
data: [140, 160, 121, 57, 170, 99, 123]
|
|
}
|
|
]
|
|
|
|
export default {
|
|
name: 'ProductionMonitoringCockpit',
|
|
components: {
|
|
baseContainer,
|
|
baseTable,
|
|
nowTeam,
|
|
BaseTable,
|
|
// BaseVideo,
|
|
TopRadioGroup,
|
|
ThreeBarChart,
|
|
LinearBarChart
|
|
// VideoFooter
|
|
},
|
|
data() {
|
|
return {
|
|
beilv: 1,
|
|
isFullScreen: false,
|
|
qualityTableProps,
|
|
qualityList,
|
|
qualityMonthTableProps,
|
|
qualityMonthList,
|
|
qualityYearTableProps,
|
|
qualityYearList,
|
|
clNameList,
|
|
clDataList,
|
|
cxNameList,
|
|
cxDataList,
|
|
modelMonth: '12月',
|
|
modelYear: '2021年'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['sidebar'])
|
|
},
|
|
watch: {
|
|
isFullScreen: function(val) {
|
|
if (val) {
|
|
this.beilv = document.body.offsetWidth / 1920
|
|
} else {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
}
|
|
},
|
|
'sidebar.opened': function(val) {
|
|
console.log(val)
|
|
if (!this.isFullScreen) {
|
|
setTimeout(() => {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
}, 300)
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
console.log(this.qualityMonthTableProps)
|
|
console.log(this.qualityMonthList)
|
|
},
|
|
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
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
change() {
|
|
this.isFullScreen = screenfull.isFullscreen
|
|
},
|
|
init() {
|
|
if (screenfull.enabled) {
|
|
screenfull.on('change', this.change)
|
|
}
|
|
},
|
|
destroy() {
|
|
if (screenfull.enabled) {
|
|
screenfull.off('change', this.change)
|
|
}
|
|
},
|
|
changeFullScreen() {
|
|
if (!screenfull.enabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
screenfull.toggle(this.$refs.container)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.visual-container {
|
|
width: 100%;
|
|
min-width: 960px;
|
|
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
|
background-size: cover;
|
|
.container-title {
|
|
width: 100%;
|
|
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #00fff0;
|
|
text-align: center;
|
|
.title-button {
|
|
color: #00fff0;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.container-main {
|
|
padding: 16px;
|
|
}
|
|
.visual-select {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: 2em;
|
|
background: rgba($color: #31878c, $alpha: 0.29);
|
|
padding-left: 1em;
|
|
border-radius: 0.2em;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.visual-container {
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background: #1b2b3d;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: #1b2b3d;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
width: 6px;
|
|
background: #1b2b3d;
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
border-radius: 2em;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba($color: #5bc4be, $alpha: 0.7);
|
|
background-clip: padding-box;
|
|
min-height: 28px;
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
border-radius: 2em;
|
|
transition: background-color 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba($color: #5bc4be, $alpha: 1);
|
|
}
|
|
.el-input {
|
|
min-height: 10px;
|
|
}
|
|
.el-input__inner {
|
|
background-color: rgba($color: #31878c, $alpha: 0.29);
|
|
border: rgba($color: #31878c, $alpha: 0.29);
|
|
color: aliceblue;
|
|
}
|
|
.el-divider--vertical {
|
|
height: 174px;
|
|
width: 1px;
|
|
border: rgba(255, 255, 255, 0.15);
|
|
color: rgba(255, 255, 255, 0.15);
|
|
margin-left: 3em;
|
|
}
|
|
}
|
|
</style>
|