From ad9609c60f8fd0fffecfb0b8c03682caef1f3db8 Mon Sep 17 00:00:00 2001 From: whycq <you@example.com> Date: 星期三, 16 十一月 2022 23:32:50 +0800 Subject: [PATCH] # --- Monitor-APP/pages/home/home.vue | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 150 insertions(+), 11 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index 375516a..098cfa0 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/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> <!-- 鍏ㄦ澘/鎷f枡淇℃伅 --> @@ -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; + } /* 鍏ㄦ澘/鎷f枡淇℃伅 */ .info { width: 100vw; @@ -155,6 +296,4 @@ min-height: 100vh; background-color: #00ffff; } - /* 鍏辩敤 */ - </style> \ No newline at end of file -- Gitblit v1.9.1