From dc01187c6ca2cf46fef268e84a7ac7fc171f2ebb Mon Sep 17 00:00:00 2001 From: zuoxiao <470321431@qq.com> Date: 星期一, 27 五月 2024 16:12:47 +0800 Subject: [PATCH] 开泵相关 --- pages/home/home.wxss | 170 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 155 insertions(+), 15 deletions(-) diff --git a/pages/home/home.wxss b/pages/home/home.wxss index 3e06c83..a6806c0 100644 --- a/pages/home/home.wxss +++ b/pages/home/home.wxss @@ -11,19 +11,20 @@ .head-wrapper { background-color: #1890FF; - height: 30vh; + height: 25vh; + width: 100%; padding-left: 40rpx; display: grid; flex-direction: column; align-items: center; - border-bottom-left-radius: 5rpx; border-bottom-right-radius: 5rpx; z-index: 1; + border-top: 1px solid #0484fc; + } .head-top { - margin-top: 40rpx; display: flex; align-items: center; /* 鍦ㄧ旱鍚戞柟鍚戜笂灞呬腑瀵归綈 */ @@ -31,13 +32,49 @@ .head-text-wrapper { + flex: 1; display: flex; flex-direction: column; - margin-left: 30rpx; + align-items: left; + justify-content: center; + margin-left: 15rpx; +} + +.head-button-wrapper { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 15rpx; +} + + +.head-bottom { + margin-top: 20rpx; + color: #fff; + font-size: 35rpx; +} + +.unbind { + font-size: 30rpx; + /* 鎸夐挳鏂囧瓧鐨勫瓧浣撳ぇ灏� */ + color: #1890FF; + /* 鎸夐挳鏂囧瓧棰滆壊 */ + background-color: #fff; + /* 鎸夐挳鑳屾櫙棰滆壊 */ + border: none; + /* 鍘绘帀鎸夐挳杈规 */ + border-radius: 20px; + /* 鎸夐挳鍦嗚 */ + padding-left: 20rpx; + padding-right: 20rpx; + padding-top: 5rpx; + padding-bottom: 5rpx; + margin-bottom: 10rpx; } .head-text-wrapper text { - margin-bottom: 10rpx; color: #fff; } @@ -64,6 +101,8 @@ } .center-view { + flex: 1; + /* 姣忎釜鍏冪礌骞冲垎瀹藉害 */ display: flex; flex-direction: column; /* 鍦ㄧ旱鍚戜笂鎺掑垪瀛愬厓绱� */ @@ -73,9 +112,20 @@ /* 鍦ㄦí鍚戝拰绾靛悜涓婇兘灞呬腑鏄剧ず瀛愬厓绱� */ } +.center-view image, +.center-view t-avatar { + width: 90rpx; + /* 鏍规嵁闇�瑕佽皟鏁村浘鏍囧ぇ灏� */ + height: 90rpx; + /* 鏍规嵁闇�瑕佽皟鏁村浘鏍囧ぇ灏� */ + margin-bottom: 10rpx; + /* 鍥炬爣鍜屾枃鏈箣闂寸殑闂磋窛 */ +} + .center-view text { margin-top: 15rpx; font-size: 30rpx; + color: #1890FF; } .bottom-wrapper { @@ -98,7 +148,7 @@ .list-item { background-color: #fff; - margin-top: 10rpx; + margin-top: 2rpx; display: flex; justify-content: space-between; align-items: center; @@ -106,17 +156,15 @@ padding-right: 30rpx; padding-top: 20rpx; padding-bottom: 20rpx; - + margin-left: 20rpx; + margin-right: 20rpx; } .list-item text { font-size: 30rpx; } -.list-item image { - width: 80rpx; - height: 80rpx; -} + .list-item-piping { display: flex; @@ -127,7 +175,99 @@ .bottom-title { border-radius: 5px 5px 0 0; background-color: #fff; - padding-left: 30rpx; - padding-top: 30rpx; - padding-bottom: 30rpx; -} \ No newline at end of file + display: flex; + align-items: center; + /* 鍨傜洿鏂瑰悜灞呬腑 */ + justify-content: space-between; + /* 瀛愬厓绱犲湪涓昏酱涓婄殑瀵归綈鏂瑰紡 */ + padding: 10px; + /* 瀹瑰櫒鐨勫唴杈硅窛 */ + margin-left: 20rpx; + margin-right: 20rpx; + margin-top: 20rpx; +} + +.bottom-title-text { + position: absolute; + /* 缁濆瀹氫綅 */ + left: 50%; + /* 绉诲姩鍒板鍣ㄧ殑涓棿 */ + transform: translateX(-50%); + /* 閫氳繃骞崇Щ鑷韩瀹藉害鐨勪竴鍗婃潵瀹炵幇鐪熸鐨勫眳涓� */ + font-size: 16px; + /* 瀛椾綋澶у皬 */ + color: #333; + /* 瀛椾綋棰滆壊 */ +} + +.refresh-button { + margin-left: auto; + /* 灏嗘寜閽帹鍒板鍣ㄧ殑鏈�鍙充晶 */ + font-size: 30rpx; + /* 鎸夐挳鏂囧瓧鐨勫瓧浣撳ぇ灏� */ + color: #fff; + /* 鎸夐挳鏂囧瓧棰滆壊 */ + background-color: #1890FF; + /* 鎸夐挳鑳屾櫙棰滆壊 */ + border: none; + /* 鍘绘帀鎸夐挳杈规 */ + border-radius: 5px; + /* 鎸夐挳鍦嗚 */ + padding-left: 20rpx; + padding-right: 20rpx; + padding-top: 5rpx; + padding-bottom: 5rpx; +} + +.refresh-view { + text-align: center; + padding: 30rpx; + display: flex; + justify-content: center; + align-items: center; +} + +.dot { + width: 20rpx; + height: 20rpx; + background-color: #333; + border-radius: 50%; + margin: 0 5px; + animation: blink 1.4s infinite both; +} + +.dot:nth-child(2) { + animation-delay: 0.2s; +} + +.dot:nth-child(3) { + animation-delay: 0.4s; +} + +@keyframes blink { + 0%, 80%, 100% { + opacity: 0; + } + 40% { + opacity: 1; + } +} +.switch{ + --td-switch-checked-color: #1890FF; +} + + +.item-left { + display: flex; + align-items: center; +} +.item-left text{ + font-size: 40rpx; +} +.item-img { + width: 40rpx; + /* 鏍规嵁闇�瑕佽皟鏁村浘鏍囧ぇ灏� */ + height: 40rpx; + /* 鏍规嵁闇�瑕佽皟鏁村浘鏍囧ぇ灏� */ + margin-left: 20rpx; +} -- Gitblit v1.8.0