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 | 141 ++++++++++++++++++++++++++++------------------ 1 files changed, 86 insertions(+), 55 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index 0690806..098cfa0 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -15,44 +15,58 @@ <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 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="content-item img"> - <text>浠撳簱鏁版嵁</text> - <p class="english">warehouse data</p> - <view> - <view class="charge-info-item"> + <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> - <text class="count">{{xDistance}}</text> - <text class="unit">m</text> - </view> + + <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="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 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> @@ -90,11 +104,15 @@ yDistance: '', xDuration: '', yDuration: '', + fontSize: '', + height: '' } }, onShow() { // 闅愯棌鏃堕棿,鐢甸噺,淇″彿绛� + // #ifdef APP-PLUS plus.navigator.setFullscreen(true) + // #endif }, onLoad() { this.getDate() @@ -138,6 +156,7 @@ </script> <style> + @import url("../../static/css/common.css"); .container{ width: 100vw; min-height: 100vh; @@ -146,6 +165,7 @@ flex-direction: column; align-items: center; color: #fff; + } /* 涓昏鍥� */ .home-view { @@ -166,17 +186,19 @@ .head { width: 100vw; height: 11vh; - font-size: 4vh; + 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; @@ -197,14 +219,6 @@ width: 13.5%; height: 8.5%; } - .charge-info-item { - width: 100%; - height: 100%; - } - .charge-info-item image { - height: 100%; - width: 100%; - } @@ -224,35 +238,52 @@ align-items: center; justify-content: center; } - .mian-item:last-child { - align-items: flex-start; - } .mian-item-box { width: 98%; height: 98%; } - .content-item { + .box-item { + width: 100%; + margin-top: 2%; 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; + .item-title { + font-size:1.5vw; + font-weight: 700; } - .introduce-content { - font-size: 0.3vh; - padding-top: 2vh; - text-indent: 3vh; - letter-spacing: 0.3vh; + .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; -- Gitblit v1.9.1