Improve layout

This commit is contained in:
ori agranat
2019-03-24 20:01:57 +02:00
parent a69bd84273
commit bdacdd845f
4 changed files with 48 additions and 42 deletions

View File

@@ -24,24 +24,24 @@
</Menu>
</Sider>
<Layout id="main-layout">
<Header id="main-header" v-if="['input','threshold'].indexOf($route.name)>-1">
<row type="flex" justify="start" align="middle" >
<i-col span="12">
<chselect title="select a camera" placeholdert="1" :list="[1,2,3]"></chselect>
</i-col>
<i-col span="12">
<chselect title="select pipline" placeholdert="0" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
</i-col>
<Header id="main-header" v-if="$route.path.includes('vision')">
<Row type="flex" justify="start" align="middle" :gutter="10">
<Col span="12">
<chselect title="select a camera" :list="[1,2,3]"></chselect>
</Col>
<Col span="12">
<chselect title="select pipline" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
</Col>
</Row>
</Header>
<Content id="main-content">
<row type="flex" justify="start" align="middle" :gutter="5" >
<i-col span="12">
<Col span="12">
<router-view></router-view>
</i-col>
<i-col span="12">
</Col>
<Colspan="12">
<img src="./assets/logo.png">
</i-col>
</Col>
</row>
</Content>
</Layout>
@@ -126,6 +126,10 @@
text-align: left
}
#main-content {
padding: 30px
}
.layout{
height: 100%;
width: 100%;

View File

@@ -3,8 +3,8 @@
<div id="InputTab">
<chslider class="spacing" title="exposure" v-model="expval" v-on:input="onChange(expval)"></chslider>
<chslider class="spacing" title="Brightness"></chslider>
<chselect class="spacing" title="Orientation" placeholdert="" :list="['Normal','Inverted']" v-model="OrientationVal" v-on:input="onChange(OrientationVal)" ></chselect>
<chselect class="spacing" title="Resolution" placeholdert="" :list="['idk']"></chselect>
<chselect class="spacing" title="Orientation" :list="['Normal','Inverted']" v-model="OrientationVal" v-on:input="onChange(OrientationVal)" ></chselect>
<chselect class="spacing" title="Resolution" :list="['idk']"></chselect>
</div>
</template>

View File

@@ -1,14 +1,14 @@
<template>
<row type="flex" justify="start" align="middle" :gutter="1" >
<Col>
<h4 style="width:100% ; margin-right:10px;">{{title}}</h4>
</Col>
<col>
<i-select v-model="value" size="small" style="width:40%" v-bind:placeholder="placeholdert" @on-change="handleInput">
<i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
</i-select>
</col>
</row>
<Row type="flex" justify="start" align="middle" :gutter="1" >
<Col span="4">
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
</Col>
<Col span="4">
<i-select v-model="value" size="small" v-bind:placeholder="list[0]" @on-change="handleInput">
<i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
</i-select>
</Col>
</Row>
</template>
<script>
@@ -16,7 +16,6 @@
name: 'ch-select',
props:[
'title',
'placeholdert',
'list'
],
data() {
@@ -35,6 +34,7 @@
<style>
h4 {
color: #e6ebf1;
text-align: left;
}
.ivu-select-selection{
background-color: #2c3e50 !important;

View File

@@ -1,15 +1,15 @@
<template>
<row type="flex" justify="start" align="middle" :gutter="1" >
<Col>
<h4 style="width:100%">{{title}}</h4>
</Col>
<col >
<InputNumber style="margin-left: 5px ;width:10%;" v-model="value" size="small"></InputNumber>
</col>
<Col span="14">
<Slider style="margin-left:10px;" v-model="value" @on-input="handleInput"></Slider>
</col>
<row type="flex" justify="start" align="middle" :gutter="1">
<Col span="4">
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
</Col>
<Col span="4" style="text-align: left">
<InputNumber style="align-self: flex-start;" v-model="value" size="small"></InputNumber>
</Col>
<Col span="14">
<Slider v-model="value" @on-input="handleInput"></Slider>
</Col>
</row>
</template>
@@ -30,13 +30,15 @@
}
</script>
<style >
<style>
h4 {
color: #e6ebf1;
}
.ivu-input-number-input{
background-color: #2c3e50 !important;
color: #fff !important;
}
color: #e6ebf1;
text-align: left;
}
.ivu-input-number-input{
background-color: #2c3e50 !important;
color: #fff !important;
}
</style>