样式修改

马宇豪

2023-07-24 b1fc04036f964163c128586810fec8b5e9da7e2c

 pages/tabBar/response/response.vue

@@ -6,7 +6,7 @@
         <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
         <!-- 真正的导航栏内容 -->
         <view class="navBar">
            <view class="barText"></view>
            <view class="barText">叫应记录</view>
         </view>
      </view>
      <!-- 页面内容 -->
@@ -103,12 +103,21 @@

<style>
.navBarBox .navBar {
   background-color:lightgrey;
   height: 15px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}
.fix{
   position: sticky;
@@ -122,22 +131,34 @@
   background-color:lightgrey;
}
.responseList{
   display: flex;
   flex-direction: column;
   padding: 20px 15px;
  display: flex;
  flex-direction: column;
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  margin-top: 12px;
}
.itemContent{
   display: flex;
   border-bottom: 1px lightgrey solid;
   margin-top: 15px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  padding: 0 12px;
  border-bottom: 1px solid #ebebeb;

  &:last-of-type{
    border-bottom: none;
  }
}
.timeLeft{
   border-radius: 13px;
   border-radius: 5px;
   padding: 15px 15px;
   background-color: rgb(174, 228, 255) ;
   display: flex;
   flex-direction: column;
   align-items: center;
   align-items: flex-start;
   justify-content: center;
   margin-bottom: 15px;
}