joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

iscs交互处理

Browse Source
This commit is contained in:
joylink_fanyuhong 2020-02-04 18:24:31 +08:00
parent 55a38da7e4
commit 720ec4b0ce
3 changed files with 582 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
View File

@ -21,8 +21,7 @@
</div>
<div v-else>
<div class="pa-table-content" @click="clickArea(i,j)">
<div v-if="isSelected(i, j)" class="pa-table-content-inside-selected" />
<div v-else class="pa-table-content-inside" />
<div class="pa-table-content-inside" :style="{background: selectedAreaList.includes(i + '-' + j)? '#2EFF74':'#CDCDCD'}" />
</div>
<div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
</div>
@ -119,17 +118,12 @@ export default {
this.selectedAreaList.push(i + '-' + j);
}
},
isSelected(i, j) {
return this.selectedAreaList.includes(i + '-' + j);
},
selectedAll() {
const flag = this.checkSelectedAll();
this.selectedAreaList = [];
for (let i = 1; i < this.verticalHeader.length; i++) {
for (let j = 0; j < this.stationList.length; j++) {
if (flag) {
this.selectedAreaList = [];
} else {
if (!flag) {
this.selectedAreaList.push(i + '-' + j);
}
}
@ -314,19 +308,6 @@ export default {
border-right: 2px solid #898888;
border-bottom: 2px solid #898888;
}
.pa-table-content-inside-selected{
height: 10px;
width: 10px;
margin: auto;
background:#27FF27;
position: relative;
top: 50%;
transform: translateY(-50%);
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #898888;
border-bottom: 2px solid #898888;
}
.pa-grey-box{
position: absolute;
left: 4%;

437
src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue Normal file
View File

@ -0,0 +1,437 @@
<template>
<el-dialog
v-dialogDrag
:visible.sync="visible"
width="800px"
:before-close="doClose"
class="iscs-voice-broadcast-dialog"
>
<div>
<div class="dialog-header">信息广播</div>
<div class="iscs-pis-dialog-info">
<el-radio-group v-model="addModel.infoType">
<el-radio label="realTime">实时信息</el-radio>
<el-radio label="common">普通信息</el-radio>
<el-radio label="emergency" class="iscs-pis-dialog-emergencyInfo">紧急信息</el-radio>
</el-radio-group>
</div>
<div v-show="addModel.infoType !== 'realTime'" class="secondary-title">{{ this.message[this.addModel.infoType].title }}</div>
<div v-show="addModel.infoType !== 'realTime'" class="information-description-box">
<div v-for="(item,index) in message[addModel.infoType].infoList" :key="index">
<div class="information-box">{{item.title}}</div>
</div>
</div>
<div v-show="addModel.infoType === 'realTime'">
<el-row>
<el-col :span="20">
<div>
<div class="secondary-title">实时信息显示内容</div>
<div class="information-context-box">
<el-input
type="textarea"
:rows="4"
placeholder="请输入内容"
v-model="addModel.infoContent">
</el-input>
</div>
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="iscs-pis-dialog-info" style="text-align: left">
<div style="margin-bottom: 20px; font-size: 16px; margin-top: 10px;">优先等级</div>
<el-radio v-model="addModel.priority" style="margin-bottom: 20px;" label="common">普通</el-radio>
<el-radio v-model="addModel.priority" label="emergency">紧急</el-radio>
</div>
</el-col>
</el-row>
</div>
<div style="margin-top: 10px">
<div style="display: inline;">名称：</div>
<input class="pis-dialog-input" style="width: 550px;" v-model="addModel.infoTitle"/>
<input v-show="addModel.infoType !== 'emergency'" class="pis-dialog-input" style="width: 140px;" v-model="addModel.infoTime"/>
<div v-show="addModel.infoType !== 'emergency'" style="display: inline;">次</div>
</div>
<div v-show="addModel.infoType !== 'realTime'" class="secondary-title" style="margin-top: 10px">{{ this.message[this.addModel.infoType].title + '内容显示' }}</div>
<div v-show="addModel.infoType !== 'realTime'" class="information-context-box">站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类</div>
<div v-show="addModel.infoType === 'realTime'" class="information-description-box" style="margin-top: 15px;">
<el-row>
<el-col :span="6" style="border-right:2px solid #898888; min-height: 100px">
<div v-for="(item,index) in message[addModel.infoType].infoList" :key="index">
<div class="information-box" @click="selectedRealTimeInfo(item)">{{item.title}}</div>
</div>
</el-col>
<el-col>
<div>{{ showRealTimeInfo }}</div>
</el-col>
</el-row>
</div>
<div class="button-group">
<el-select v-show="addModel.infoType === 'realTime'" v-model="value" placeholder="信息选择">
<el-option
v-for="item in infoList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div v-show="addModel.infoType === 'realTime'" class="pis-button">储存</div>
<div class="button-group-content" :style="{left: addModel.infoType ==='realTime'?'280px':'550px'}">
<div class="pis-button">设定中</div>
<div class="pis-button" @click="releaseBroadcast">发布</div>
<div class="pis-button">取消</div>
</div>
</div>
<div class="pis-dialog-form-box">
<el-form ref="form" :model="form" label-width="95px">
<el-row>
<el-col :span="3">
<div class="pis-button" style="position: relative; top: 10px;left: 5px; padding: 7px 10px ;">导入描述</div>
</el-col>
<el-col :span="21">
<el-form-item :prop="description" label-width="0">
<input v-model="form.description" style="width:600px;position: relative; top: 8px;" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="21">
<el-row>
<el-col :span="12">
<el-form-item :prop="startDate" label="开始日期">
<el-date-picker
v-model="form.startDate"
type="date"
size="mini"
placeholder="选择日期"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :prop="endTime" label="结束时间">
<el-time-picker
arrow-control
v-model="form.endTime"
size="mini"
placeholder="选择时间"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :prop="startTime" label="开始时间">
<el-time-picker
arrow-control
v-model="form.startTime"
size="mini"
placeholder="选择时间"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :prop="endDate" label="结束日期">
<el-date-picker
v-model="form.endDate"
type="date"
size="mini"
placeholder="选择日期"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :prop="durationTime" label="延续时间">
<el-time-picker
arrow-control
v-model="form.durationTime"
size="mini"
placeholder="选择时间"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<div style="text-align: center;padding-top: 10px;">
<div class="pis-button">今日</div>
<div class="pis-button">一次</div>
<div class="pis-button">无截止</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="3">
<div class="each_operate_button">排定<br>确认</div>
</el-col>
</el-row>
</el-form>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'VoiceBroadcast',
data() {
return {
visible: false,
addModel: {
infoType: 'common',
infoTitle: '',
infoTime: '',
infoContent: '',
priority: 'common'
},
form: {
startDate: '',
startTime: '',
durationTime: '',
endTime: '',
endDate: ''
},
infoList: [],
showRealTimeInfo: '',
message: {
realTime: {
title: '实时信息',
infoList:[
{
title: 'mes1实时信息',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes2',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes3',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes4',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes5',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes6',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes7',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
}
]
},
common: {
title: '普通信息',
infoList:[
{
title: 'mes1普通信息',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes2',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes3',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes4',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes5',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
}
]
},
emergency: {
title: '紧急信息',
infoList:[
{
title: '紧急信息',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes2',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes3',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes4',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
},
{
title: 'mes5',
content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
time: 1
}
]
}
}
};
},
mounted() {
this.showRealTimeInfo = '';
},
methods:{
doClose() {
this.visible = false;
},
doShow() {
this.visible = true;
},
releaseBroadcast() {
this.visible = false;
},
selectedRealTimeInfo(item) {
this.showRealTimeInfo = item.content;
}
}
}
</script>
<style scoped>
.dialog-header{
text-align: center;
font-size: 28px;
margin-bottom: 15px;
}
.pis-dialog-form-box{
margin-top: 20px;
padding: 10px 5px;
border-top: 2px solid #898888;
border-left: 2px solid #898888;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.information-description-box{
height: 100px;
width: 100%;
background: #DCDCDC;
border-left: 2px solid #898888;
overflow-x: auto;
overflow-y: auto;
}
.information-box{
white-space: nowrap;
background: #DCDCDC;
margin-top: 2px;
}
.secondary-title{
text-align: center;
width: 100%;
font-size: 18px;
background: #A9A9A9;
border-top: 2px solid #898888;
border-left: 2px solid #898888;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.pis-dialog-input{
background: #DCDCDC;
border-top: 2px solid #898888;
border-left: 2px solid #898888;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.information-context-box{
background: #DCDCDC;
width: 100%;
height: 100px;
overflow-y: auto;
}
.button-group{
margin-top: 20px;
}
.button-group-content{
position: relative;
left: 550px;
display: inline;
}
.pis-button{
background: #CCCCCC;
color: #000;
display: inline;
font-weight: bold;
padding: 7px 15px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #454541;
border-bottom: 2px solid #454541;
cursor: default;
}
.iscs-pis-dialog-info{
text-align: center;
margin-bottom: 10px;
}
.iscs-pis-dialog-emergencyInfo{
color: #F00 !important;
}
.each_operate_button{
position: relative;
top: 100px;
text-align: center;
font-weight: bold;
margin-top: 5px;
cursor:pointer;
color: #000;
background: #CCCCCC;
display: inline-block;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
padding: 5px 10px;
line-height: 140%;}
</style>
<style>
.iscs-voice-broadcast-dialog .el-dialog__body{
background: #A9A9A9;
padding-top: 10px;
padding-bottom: 60px;
}
.iscs-voice-broadcast-dialog .el-dialog__headerbtn{
top: 10px;
}
.iscs-voice-broadcast-dialog .el-dialog__header{
background-image: linear-gradient(#FFE4C4, #F4A460, #FFE4C4);
}
.iscs-pis-dialog-info .el-radio__input.is-checked+.el-radio__label{
color: #606266;
font-size: 16px;
}
.iscs-pis-dialog-info .el-radio__input+.el-radio__label {
color: #606266;
font-size: 16px;
}
.iscs-pis-dialog-info .iscs-pis-dialog-emergencyInfo .el-radio__input.is-checked+.el-radio__label{
color: #F00;
}
.iscs-voice-broadcast-dialog .information-context-box .el-textarea__inner {
background: #DCDCDC;
border-radius: 0;
}
</style>

214
src/views/iscs/iscsSystem/config/pis/mainScreen.vue
View File

@ -7,14 +7,14 @@
<div class="screen_left">
<div class="screen_left_tab">特定区域</div>
<div class="sceen_left_content">
<div class="screen_operate_name" :class="allLine?'active':''" @click="clickIt">全线</div>
<div class="screen_operate_name">全站厅(LCD)</div>
<div class="screen_operate_name">全上行站台</div>
<div class="screen_operate_name">全下行站台</div>
<div class="screen_operate_name">全出入口</div>
<div class="screen_operate_name">全物业</div>
<div class="screen_operate_name">全天桥</div>
<div class="screen_operate_name">出入口(LED)</div>
<div class="screen_operate_name" @click="selectedAllLine">全线</div>
<div class="screen_operate_name" @click="selectedAreaBatch(0)">全站厅(LCD)</div>
<div class="screen_operate_name" @click="selectedAreaBatch(1)">全上行站台</div>
<div class="screen_operate_name" @click="selectedAreaBatch(2)">全下行站台</div>
<div class="screen_operate_name" @click="selectedAreaBatch(3)">全出入口</div>
<div class="screen_operate_name" @click="selectedAreaBatch(4)">全物业</div>
<div class="screen_operate_name" @click="selectedAreaBatch(5)">全天桥</div>
<div class="screen_operate_name" @click="selectedAreaBatch(6)">出入口(LED)</div>
</div>
</div>
<div class="screen_main_content">
@ -32,25 +32,26 @@
</div>
<div class="screen_right_group">
<div class="screen_right_group_in">
<div v-for="station in stationList" :key="station.name" class="each_station_info">
<div class="each_data_info">
<div v-for="station in stationList" :key="station.stationName" class="each_station_info">
<div class="each_data_info" @click="selectedStation(station)">
<div class="screen_station_name">{{ station.stationName }}</div>
</div>
<div v-if="station.chidren&&station.chidren.length>0">
<div v-for="(child,index) in station.chidren" :key="station.name+index" class="each_data_info">
<div v-if="child.status=='default'" class="data_button_info button_default" />
<div v-if="station.children&&station.children.length>0">
<div v-for="(child,index) in station.children" :key="station.stationName+index" class="each_data_info" @click="selectArea(station.stationName,index)" style="text-align: center;">
<div v-if="child.status==='default'" class="button_default_content">
<div class="button_default" :style="{background:selectedAreaList.includes(station.stationName + '-' + index)?'#2EFF74':'#CDCDCD'}" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="screen_right">
<div class="each_operate">
<div class="each_operate_text">操作</div>
<div class="each_operate_button">信息发布<br>窗口</div>
<div class="each_operate_button" @click="showInfoBrroadcast">信息发布<br>窗口</div>
</div>
<div class="each_operate">
<div class="each_operate_text">信息清除</div>
@ -79,18 +80,22 @@
</div>
</div>
</div>
<info-broadcast ref="infoBroadcast" />
</div>
</template>
<script>
import InfoBroadcast from './infoBroadcast';
export default {
name:'MainScreen',
components: {
InfoBroadcast
},
data() {
return {
allLine:false,
stationList:[
{
stationName:'会展中心站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -99,7 +104,7 @@ export default {
},
{
stationName:'世纪大道站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -108,7 +113,7 @@ export default {
},
{
stationName:'交通大学站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -117,7 +122,7 @@ export default {
},
{
stationName:'市图书馆站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -126,7 +131,7 @@ export default {
},
{
stationName:'中心医院站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -135,7 +140,7 @@ export default {
},
{
stationName:'未来路站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -144,7 +149,7 @@ export default {
},
{
stationName:'火车站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -153,7 +158,7 @@ export default {
},
{
stationName:'人民广场站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
@ -162,23 +167,103 @@ export default {
},
{
stationName:'体育中心站',
chidren:[
children:[
{status:'none'}, {status:'default'},
{status:'default'}, {status:'default'},
{status:'none'}, {status:'none'},
{status:'none'}, {status:'default'}
]
}
]
],
selectedAreaList: []
};
},
methods:{
clickIt(event) {
if (!this.allLine) {
this.allLine = true;
showInfoBrroadcast() {
this.$refs.infoBroadcast.doShow();
},
selectedAllLine() {
const flag = this.checkSelectedAllLine();
this.selectedAreaList = [];
this.stationList.forEach(station => {
station.children.forEach((item, index) => {
if (item.status === 'default' && !flag) {
this.selectedAreaList.push(station.stationName + '-' + index);
}
});
});
},
checkSelectedAllLine() {
let selectedAllLineFlag = true;
this.stationList.some(station => {
station.children.some((item, index) => {
if (item.status === 'default') {
const elem = station.stationName + '-' + index;
selectedAllLineFlag = this.selectedAreaList.includes(elem);
return !selectedAllLineFlag;
}
});
return !selectedAllLineFlag;
});
return selectedAllLineFlag;
},
selectArea(stationName, index) {
const elem = stationName + '-' + index;
if (this.selectedAreaList.includes(elem)) {
const areaIndex = this.selectedAreaList.indexOf(elem);
this.selectedAreaList.splice(areaIndex, 1);
} else {
this.allLine = false;
this.selectedAreaList.push(elem);
}
},
selectedStation(station) {
const flag = this.checkStationSelected(station);
station.children.forEach((item, index) => {
const elem = station.stationName + '-' + index;
if (item.status === 'default' && flag) {
const areaIndex = this.selectedAreaList.indexOf(elem);
this.selectedAreaList.splice(areaIndex, 1);
} else if (item.status === 'default' && !flag && !this.selectedAreaList.includes(elem)) {
this.selectedAreaList.push(elem);
}
});
},
checkStationSelected(station) {
let stationSelectedFlag = true;
station.children.some((item, index) => {
if (item.status === 'default') {
stationSelectedFlag = this.selectedAreaList.includes(station.stationName + '-' + index);
return !stationSelectedFlag;
}
});
return stationSelectedFlag;
},
selectedAreaBatch(areaIndex) {
const flag = this.checkAreaBatchSelected(areaIndex);
this.stationList.forEach(station => {
station.children.forEach((item, index) => {
const elem = station.stationName + '-' + index;
if (item.status === 'default' && index === areaIndex && flag) {
const selectedAreaIndex = this.selectedAreaList.indexOf(elem);
this.selectedAreaList.splice(selectedAreaIndex, 1);
} else if (item.status === 'default' && index === areaIndex && !flag && !this.selectedAreaList.includes(elem)) {
this.selectedAreaList.push(elem);
}
});
});
},
checkAreaBatchSelected(areaIndex) {
let selectedAreaBatchFlag = true;
this.stationList.some(station => {
station.children.some((item, index) => {
if (item.status === 'default' && index === areaIndex) {
selectedAreaBatchFlag = this.selectedAreaList.includes(station.stationName + '-' + index);
return !selectedAreaBatchFlag;
}
});
return !selectedAreaBatchFlag;
});
return selectedAreaBatchFlag;
}
}
};
@ -247,6 +332,14 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
border-right: 2px solid #9e9e9e;
border-bottom: 2px solid #636667;
cursor: pointer;
&.active,
&:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
}
.screen_station_name{
width: 120px;
@ -263,7 +356,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
// border-bottom: 2px solid #fff;
// }
}
.screen_operate_name.active,.screen_station_name.active{
.screen_station_name.active{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
@ -279,49 +372,28 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
position: relative;
}
.button_default{
border-top: 2px solid #edf1f2;border-left: 2px solid #d0d8dd;border-right: 2px solid #8c8a88;border-bottom: 2px solid #8a8887;
}
.button_default:before{
content:'';
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
min-width: 10px;
height: 10px;
display: inline-block;
vertical-align: top;
background: #cccccc;
width: 10px;
margin: auto;
background:#CCCCCC;
position: relative;
top: 50%;
transform: translateY(-50%);
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #898888;
border-bottom: 2px solid #898888;
}
.button_default::before{
content:'';
border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
min-width: 10px;
height: 10px;
.button_default_content{
margin:0 auto;
height: 18px;
width: 18px;
background: #D4D4D4;
display: inline-block;
vertical-align: top;
background: #cccccc;
}
.button_default:after{
content:'';
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
min-width: 10px;
height: 10px;
display: inline-block;
vertical-align: top;
background: #c9c9c9;
position: absolute;
left: 0;
top: 0;
}
.button_default::after{
content:'';
border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
min-width: 10px;
height: 10px;
display: inline-block;
vertical-align: top;
background: #c9c9c9;
position: absolute;
left: 0;
top: 0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #898888;
border-bottom: 2px solid #898888;
}
.screen_right_group_in{
display: -webkit-flex;