添加实时监控页面

朱桂飞

2023-12-19 8cc072a8a3bffcb8e9292cd39d1062493a1a0282

 pages/tabBar/demo.vue

@@ -1,22 +1,115 @@
<template>
   <view>
		
   </view>
</template>

<script>
   export default {
      data() {
         return {
				
         }
      },
      methods: {
<template>

   <view class="app">

      <view class="inner">

         <view class="content flex">

            <view class="flex-sub flex align-center justify-center bg-blue">1</view>

            <view class="flex-sub flex align-center justify-center bg-cyan">2</view>

            <view class="flex-sub flex align-center justify-center bg-gradual-orange">3</view>

         </view>
         <view class="h-table" style=" width: 100vh;">
            <view class="h-tr h-tr-12 h-thead">
               <view class="h-td">品名</view>
               <view class="h-td">装料量</view>
               <view class="h-td">目标</view>
               <view class="h-td h-td-colspan h-td-rowspan">
                  <view class="h-tr h-tr-1">
                     <view class="h-td  h-td-colspan">前</view>
                  </view>
                  <view class="h-tr h-tr-2">
                     <view class="h-td">左</view>
                     <view class="h-td">右</view>
                  </view>
         
      }
   }
</script>

<style>

               </view>
               <view class="h-td h-td-colspan h-td-rowspan">
                  <view class="h-tr h-tr-1">
                     <view class="h-td  h-td-colspan">中</view>
                  </view>
                  <view class="h-tr h-tr-2">
                     <view class="h-td">左</view>
                     <view class="h-td">右</view>
                  </view>
			
               </view>
               <view class="h-td h-td-colspan h-td-rowspan">
                  <view class="h-tr h-tr-1">
                     <view class="h-td  h-td-colspan">后</view>
                  </view>
                  <view class="h-tr h-tr-2">
                     <view class="h-td">左</view>
                     <view class="h-td">右</view>
                  </view>
			
               </view>
				 
               <view class="h-td">平均</view>
               <view class="h-td">时间(分钟)</view>
               <view class="h-td">蒸汽(立方)</view>
            </view>
			
            <view v-for="(item,index) in 10" class="h-tr h-tr-12" style="background-color: white">
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
               <view class="h-td">100</view>
 
            </view>
			
         </view>
			
			


      </view>



   </view>

</template>



<script>

   export default {

      data() {

         return {
            list:[{}]



         }

      },

      methods: {



      }

   }

</script>



<style lang="scss" scoped>

   @import "components/table/helang-table";



   .app {

      width: 100vw;

      height: 100vh;

      background-color: royalblue;



      .inner {

         /* 设置基准点为左上角 */

         transform-origin: top left;

         /* 以左上角为基准点，顺时针旋转90度 然后沿Y轴反方向平移100% */

         /* 为什么沿Y轴，因为旋转使坐标轴方向发生了变化 */

         transform: rotate(90deg) translateY(-100%);

         /*设置元素的宽度为 100%父元素的高度 并提高样式优先级 */

         width: 100vh !important;

         /*设置元素的宽度为 100%父元素的宽度  并提高样式优先级 */

         height: 100vw !important;

         background-color: gold;
         overflow: scroll;



         .content {

            width: 100%;

         }

      }

   }

</style>