JSFiddle - React, Tailwind, and code Playground

by tanjw

HTML

<script src="//cdn.jsdelivr.net/vue/0.12.10/vue.js"></script>
<script src="//rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>
<link href="//cdn.bootcss.com/iview/2.0.0-rc.9/styles/iview.css" rel="stylesheet" type="text/css">
<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>

<div id="container">
  <div id="header">
    <h1>UMonitor</h1>
  </div>
  <div id="menu">
    This is the Menu
    <router-link to="/chassis/1">click/1</router-link>
    <router-link to="/chassis/2">click/2</router-link>
  </div>
  <div id="mainContent">
    <div id="sidebar">
      <i-Menu theme="dark" mode="vertical" style="width: 180px" @on-select="showChassis">
        <Menu-group title="Manager">
          <Menu-item v-for="index in num" :key="index" :name="index">
            Chas_{{index}}
          </Menu-item>
        </Menu-group>
      </i-Menu>
    </div>
    <div id="content">
      <!-- <my-table class="layout-content-main" v-for="(door,index) in doors" :key="index" :door="door" :tableindex="index" :curchassisno="curchassisno"></my-table> -->

      <router-view name="view"></router-view>
    </div>
  </div>
  <div id="footer">
    This is the footer
    <input type="text">
  </div>
  <Back-top></Back-top>
</div>

CSS

.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;
  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;
}

body {
  font-family: Verdana;
  font-size: 14px;
  margin: 0;
}

#container {
  margin: 0 auto;
  width: 100%;
}

#header {
  height: 100px;
  background: #DCDCDC;
}

#menu {
  height: 30px;
  background: #3d454c;
  color: white;
}

#mainContent {
  overflow: auto;
  zoom: 1;
}

#sidebar {
  float: left;
  width: 180px;
  /* background:#cf9;*/
  height: 100%;
}

#content {
  margin-left: 180px !important;
  margin-left: 202px;
  height: 100% !important;
  height: 100px;
}

#footer {
  height: 60px;
  background: #DCDCDC;
}

JavaScript

Vue.component('my-table', {
  template: '\
        <div>\
            <div :class = "[tableindex % 2 == 0 ? \'doorA\' : \'doorB\']" v-once><strong>{{door}}_{{$route.params.id}}</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">\
            <Tooltip  placement="top" :delay="300">\
                <div slot="content" v-once>\
                    <p>{{door}}</p>\
                    <p><i>行号:{{rowindex}}</i></p>\
                    <p><i>列号:{{index}}</i></p>\
                </div>\
                <div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\
                    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">30%\
                        <span class="sr-only">30% Complete</span>\
                    </div>\
                </div>\
            </Tooltip>\
        </td>\
    </tr>\
    ',
  props: ['door', 'rowindex'],
});

const Chassis = {

  template: '<div>{{$route.params.id}}<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', 'doorC', 'doorD'],
    }
  },
};

const routes = [{
  path: '/chassis/:id',
  components: {
    view: Chassis
  }
}];

const router = new VueRouter({
  mode: 'history',
  routes,
});

new Vue({
  router,
  el: '#container',
  data: {
    num: '',
  },
  methods: {
    showChassis(key) {},
      getNum() {
        var resource = this.$resource('/index/left');
        vm = this;
        resource.get()
          .then((response) => {
            this.num = response.data;
      ...