#

whycq

2022-11-16 7a958524ae462a5f28724cbb72b2338b6797385a

 Monitor-APP/pages/home/home.vue

@@ -10,12 +10,53 @@
            <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="content-item">
                           <text>自动化立体仓库</text>
                           <p class="english">Automatic Storageand Retrieval System</p>
                           <p class="introduce-content">  利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；
                           自动化立体仓库是当前技术水平较高的形式。
                           自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。
                           货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货
                           架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</p>
                        </view>
                        <view class="content-item img">
                           <text>仓库数据</text>
                           <p class="english">warehouse data</p>
                           <view>
                              <view class="charge-info-item">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
                                 <view>
                                    <text class="count">{{xDistance}}</text>
                                    <text class="unit">m</text>
                                 </view>
                                 <view>累计走行距离(米)</view>
                              </view>
                           </view>
                        </view>
                     </y-box>
                  </view>
               </view>
               <view class="mian-item">
                  <view class="mian-item-box">
                     <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 class="home-right"></view>
         </view>
      </uni-transition>
      <!-- 全板/拣料信息 -->
@@ -44,7 +85,11 @@
               boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
            },
            duration: 1000,
            calendar: ''
            calendar: '',
            xDistance: '',
            yDistance: '',
            xDuration: '',
            yDuration: '',
         }
      },
      onShow() {
@@ -109,9 +154,18 @@
      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;
      height: 11vh;
      font-size: 4vh;
      font-weight: 700;
      display: flex;
@@ -143,6 +197,62 @@
      width: 13.5%;
      height: 8.5%;
   }
   .charge-info-item {
      width: 100%;
      height: 100%;
   }
   .charge-info-item image {
      height: 100%;
      width: 100%;
   }
	
	
	
   /* 共用 */
   .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:last-child {
      align-items: flex-start;
   }
   .mian-item-box {
      width: 98%;
      height: 98%;
   }
   .content-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-top: 1vh;
      margin-left: 4%;
      margin-right: 4%;
   }
   .english {
      font-size: 0.1vh;
   }
   .introduce-content {
      font-size: 0.3vh;
      padding-top: 2vh;
      text-indent: 3vh;
      letter-spacing: 0.3vh;
   }
	
	
	
	
   /* 全板/拣料信息 */
   .info {
      width: 100vw;
@@ -155,6 +265,4 @@
      min-height: 100vh;
      background-color: #00ffff;
   }
   /* 共用 */
	
</style>