Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
    <link href="//cdn.bootcss.com/iview/2.0.0-rc.9/styles/iview.css" rel="stylesheet" type="text/css">
     <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script> 
    <script src="//cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js"></script> 
    <script src="//cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="layout-ceiling">
            <div class="layout-ceiling-main">
                <a href="#">login</a> | 
            </div>
        </div>
        <i-Menu mode="horizontal" theme="dark">
            <div class="layout-logo"></div>
            <div class="layout-nav">
                <Menu-item name="1">
                    <Icon type="wrench"></Icon>
                    setting
                </Menu-item>
            </div>
        </i-Menu>      
        <div class="layout-content">
            <Row>
                <i-col span="2">
                    <i-Menu theme="light" width="auto" @on-select="showChassis">
                        <Menu-group title="manager">
                            <Menu-item v-for="index in num" :key="index" :name="index">
                                chassis_{{index}}
                            </Menu-item>
                        </Menu-group>
                    </i-Menu>
                </i-col>
                <i-col span="22">
                    <div class="layout-content-main">
                        <router-view name="view"></router-view>
                    </div>
                </i-col>
            </Row>
        </div>
        <div class="layout-copy">
            <p>2016-2017 &copy; ZK Technology Co., Ltd.</p>
        </div>
        <Back-top></Back-top>
    </div>   
</body>
  
  
<script>
    Vue.component('my-table', {
    template: '\
        <div>\
            <div :class = "[tableindex % 2 == 0 ? \'doorA\' : \'doorB\']"><strong>{{door}}</strong></div>\
            <table>\
                <my-tr v-for="index in 8" :key="index" :rowindex="index" :door="door"></my-tr>\
            </table>\
        </div>\
        ',
    props:['door','tableindex'],
});
Vue.component('my-tr', {
    template: '\
    <tr>\
        <td v-for="index in 20" :key="index" :door="door" :rowindex="rowindex">\
            <my-progress :door="door" :rowindex="rowindex" :colindex="index"></my-progress>\
        </td>\
    </tr>\
    ',
    props:['door','rowindex'],
});
Vue.component('my-progress', {
    template: '\
            <div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{{pgvalue}}\
                </div>\
            </div>\
        ',
    data : function(){  
  
        return {
            pgvalue : '50%',
            intervalid1:'',
        }
    },
    computed:{
        changes : {
            get : function(){
                return this.pgvalue;
            },
            set : function(v){
                this.pgvalue =  v;
            }
        }
    },
    mounted : function(){
      
        this.todo()     
    },
    beforeDestroy () {
      
       clearInterval(this.intervalid1)
    },
    methods : {
             
        todo : function(){          
            this.intervalid1 = setInterval(function(){
                this.changes = ((Math.random() * 100).toFixed(2))+'%';
                console.log (this.changes);
            }.bind(this), 3000);
        }
    },
})
const Chassis = {
  template : '<div><my-table class="layout-content-main" v-for="(door,index) in doors" :key="index" :door="door" :tableindex="index"></my-table></div>',
  data (){
    return {
        doors:['doorA', 'doorB'],
    }
  },
};
const routes = [ 
  { path: '/chassis/:id', components: {view : Chassis} }
];
const router = new VueRouter({ 
    mode: 'history',
    routes 
});
var vm = new Vue({
    router, 
    el: '#app',
    data: {
        num : 2, //left sider chassisNum
    },
    methods: {
        showChassis : function(key) {
            this.$router.push({ path: '/chassis/' + key })                  
        },
    },
});
 
</script>
</html>
 
.doorA {
    color: red;
    text-align: center;
    font-size: 30px;
    /*  font-family: verdana;*/
    font-weight: bold;
}
.doorB {
    color: blue;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.progress-bar-vertical {
    width: 50px;
    /*width: 75px;*/
    min-height: 100px;
    display: flex;
    align-items: flex-end;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    /*float: center;*/
}
.progress-bar-vertical .progress-bar {
    width: 100%;
    height: 0;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
}
table {
    margin: 0 auto;
    border: 1px solid #000;
    width: 100%;
}
table td {
    border: 1px solid #000;
    text-align: center;
}
/*body {
    font-family: Verdana;
    font-size: 14px;
    margin: 0;
}*/
.layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    background-image:url(/ico/logo.png);
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 600px;
    margin: 0 auto;
}
.layout-breadcrumb{
    padding: 10px 15px 0;
}
.layout-content{
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}
.layout-content-main{
    padding: 10px;
}
.layout-copy{
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}
.layout-ceiling{
    background: #464c5b;
    padding: 10px 0;
    overflow: hidden;
}
.layout-ceiling-main{
    float: right;
    margin-right: 15px;
}
.layout-ceiling-main a{
    color: #9ba7b5;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
18807600203pro
0viewers