From 06b93604f8f9bfbcc740decfe5a5b922d75a0de3 Mon Sep 17 00:00:00 2001 From: zuoxiao <470321431@qq.com> Date: 星期三, 03 七月 2024 10:05:51 +0800 Subject: [PATCH] 完成界面 --- pages/feedback/feedback.wxss | 109 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 94 insertions(+), 15 deletions(-) diff --git a/pages/feedback/feedback.wxss b/pages/feedback/feedback.wxss index 6218e0a..7a16002 100644 --- a/pages/feedback/feedback.wxss +++ b/pages/feedback/feedback.wxss @@ -2,15 +2,37 @@ .container { display: flex; flex-direction: column; + width: 100%; height: 100vh; - padding-left: 30rpx; - padding-right: 30rpx; - width: calc(100% - 0rpx); /* 鑰冭檻浜嗗乏鍙宠竟璺濆悗鐨勫疄闄呭搴� */ background-color: #fff; - justify-content: flex-start; + justify-content: center; align-items: center; } + +.container-scroll{ + flex: 1; + overflow-y: auto; + z-index: 0; + display: flex; + flex-direction: column; + padding-bottom: 20rpx; /* 澧炲姞搴曢儴濉厖 */ +} + +.container-feedBack { + width: calc(100% - 80rpx); + /* 40rpx 涓哄乏鍙� padding 鐨勬�诲拰 */ + height: 100vh; + /* 鑰冭檻浜嗗乏鍙宠竟璺濆悗鐨勫疄闄呭搴� */ + background-color: #fff; + padding-left: 40rpx; + padding-right: 40rpx; + padding-top: 1rpx; + padding-bottom: 1rpx; +} + + + .btn { margin: 10px; @@ -43,9 +65,13 @@ .input-class { border-radius: 5px; border: 2rpx solid #000000; - height: 20vh; + height: 10vh; width: 100%; background-color: #fcfcfc; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .img-upload { @@ -54,23 +80,21 @@ } .container-item { - width: 100%; display: flex; flex-direction: column; - + justify-content: flex-start } .container-voice { width: 100%; display: flex; flex-direction: row; - align-items: center; } .fb-text { font-size: 35rpx; - margin-left: 30rpx; + margin-bottom: 10rpx; } .fb-submit { @@ -78,7 +102,7 @@ background-color: #1890FF; font-size: 35rpx; color: white; - margin-top: 50rpx; + margin-top: 200rpx; } .voice_img { @@ -146,17 +170,72 @@ margin-right: 20rpx; } -.voice_starting{ +.voice_starting { position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); - width: 200rpx; - height: 200rpx; - line-height: 200rpx; + width: 300rpx; + height: 300rpx; + align-items: center; + line-height: 300rpx; background-color: #787879; color: #fff; text-align: center; - border-radius: 100rpx; /* 浣垮叾鍛堢幇鍦嗗舰 */ + border-radius: 150rpx; + /* 浣垮叾鍛堢幇鍦嗗舰 */ z-index: 10000; +} + +.tabs { + display: flex; + justify-content: space-around; + position: relative; + width: 100%; + border-bottom: 1px solid #eee; + margin-bottom: 20rpx; + /* Tabs 鍗犳弧鏁翠釜妯悜灞忓箷 */ +} + +.tab { + font-size: 16px; + padding: 10px; + cursor: pointer; + position: relative; + width: 50%; + /* Tabs 骞冲垎鏁翠釜妯悜灞忓箷 */ + text-align: center; + /* 鏂囧瓧灞呬腑 */ +} + +.indicator { + width: 100%; + height: 3px; + background-color: #1890FF; + position: absolute; + bottom: 0; + left: 0; + transform: translateX(0); + /* 鍒濆鍖栦綅缃� */ +} + +.item { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + /*琛ㄧず涓嶆崲琛�*/ + padding-left: 40rpx; + padding-right: 40rpx; + width: calc(100% - 80rpx); + margin-bottom: 40rpx; +} + +.item-data { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.item-data text { + font-size: 30rpx; } \ No newline at end of file -- Gitblit v1.8.0