#

whycq

2022-11-16 ad9609c60f8fd0fffecfb0b8c03682caef1f3db8

 Monitor-APP/pages/home/home.vue

@@ -10,12 +10,67 @@
            <view class="time-tools">{{calendar}}</view>
            <view class="button-left"></view>
            <view class="button-right"></view>
         </view>
         <view class="main">
            <view class="home-left">
               <y-box></y-box>
            <!-- 主体 -->
            <view class="main">
               <view class="mian-item">
                  <view class="mian-item-box">
                     <y-box>
                        <view class="box-item">
                           <text class="item-title">自动化立体仓库</text>
                           <text class="item-subTitle">Automatic Storageand Retrieval System</text>
                           <text class="item-text">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</text>
                        </view>
                        <view class="box-item">
                           <text class="item-title">仓库数据</text>
                           <text class="item-subTitle">warehouse data</text>
                           <view class="img-box">
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                           </view>
                        </view>
                        <view class="box-item">
                           <text class="item-title">库位使用率</text>
                           <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text>
                        </view>
                     </y-box>
                  </view>
               </view>
               <view class="mian-item">
                  <view class="mian-item-box">
                     <view style="width: 100%;height: 100%;">
                        <view style="height: 38%;">
                           <y-box></y-box>
                        </view>
                        <view style="height: 2%;"></view>
                        <view style="height: 38%;">
                           <y-box></y-box>
                        </view>
                        <view style="height: 2%;"></view>
                        <view style="height: 20%;">
                           <y-box></y-box>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="home-right"></view>
         </view>
      </uni-transition>
      <!-- 全板/拣料信息 -->
@@ -44,12 +99,20 @@
               boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
            },
            duration: 1000,
            calendar: ''
            calendar: '',
            xDistance: '',
            yDistance: '',
            xDuration: '',
            yDuration: '',
            fontSize: '',
            height: ''
         }
      },
      onShow() {
         // 隐藏时间,电量,信号等
         // #ifdef APP-PLUS
         plus.navigator.setFullscreen(true)
         // #endif
      },
      onLoad() {
         this.getDate()
@@ -93,6 +156,7 @@
</script>

<style>
   @import url("../../static/css/common.css");
   .container{
      width: 100vw;
      min-height: 100vh;
@@ -101,6 +165,7 @@
      flex-direction: column;
      align-items: center;
      color: #fff;
		
   }
   /* 主视图 */
   .home-view {
@@ -109,20 +174,31 @@
      background-image: url(../../static/background.png);
      background-size: 100vw 100vh;
   }
   .home-right {
      width: 50vw;
      height: 89vh;
      /* background-color: cadetblue; */
   }
   .home-right-box {
      width: 98%;
      height: 98%;
   }
   .head {
      width: 100vw;
      height: 10vh;
      font-size: 4vh;
      height: 11vh;
      font-size:4vw;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0.7);
   }
   .time-tools {
      position: absolute;
      right: 2%;
      top: 2%;
      font-size: 1.5vh;
      font-size:1vw;
      transform: scale(0.8);
   }
   .button-left {
      position: absolute;
@@ -143,6 +219,71 @@
      width: 13.5%;
      height: 8.5%;
   }
	
	
	
   /* 共用 */
   .main {
      width: 100vw;
      height: 88vh;
      margin-top: 1vh;
      display: flex;
		
   }
   .mian-item {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
   .mian-item-box {
      width: 98%;
      height: 98%;
   }
   .box-item {
      width: 100%;
      margin-top: 2%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
   }
   .item-title {
      font-size:1.5vw;
      font-weight: 700;
   }
   .item-subTitle {
      font-size:0.5vw;
      text-indent: 1em;
   }
   .item-text {
      font-size: 1vw;
      text-indent: 2em;
      letter-spacing: 1px;
   }
   .img-box {
      width: 100%;
      background-color: #666666;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
   }
   .item-img {
      width: 50%;
      margin-top: 3%;
      background-color: #00ffff;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
   }
   .item-img image {
      height: 5vw;
      width: 5vw;
   }
   /* 全板/拣料信息 */
   .info {
      width: 100vw;
@@ -155,6 +296,4 @@
      min-height: 100vh;
      background-color: #00ffff;
   }
   /* 共用 */
	
</style>