样式修改

马宇豪

2023-07-24 b1fc04036f964163c128586810fec8b5e9da7e2c

 pages/tabBar/notice/measures.vue

@@ -6,10 +6,11 @@
         <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
         <!-- 真正的导航栏内容 -->
         <view class="navBar">
            <u-icon name="arrow-left" color="black" size="17" @click="goBack" />
            <view class="barText">响应措施反馈</view>
         </view>
      </view>
      <view style="display: flex;flex-direction: column; padding: 10px 15px;">
      <view class="measureCard">
         <view class="first">
            <text style="font-size: 16px;margin-bottom: 20px;">基础措施</text>
             <u-checkbox-group
@@ -46,7 +47,9 @@
                  {{item.name}}
               </view>
         </view>
         <u-button class="btn" type="success">提交</u-button>
      </view>
      <view class="measures">
      <u-button class="measureBtn" type="success">提交</u-button>
      </view>
   </view>
</template>
@@ -89,6 +92,12 @@
         uni.hideTabBar();
      },
      methods: {
         goBack() {
            uni.navigateBack({
                url:'./detail/detail'
            });
         },
			
         checkboxChange(n) {
            console.log('change', n);
         },
@@ -148,12 +157,31 @@

<style lang='scss' scoped>
.navBarBox .navBar {
   background-color:lightgrey;
   height: 25px;
  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;
}

.measureCard{
   display: flex;
   flex-direction: column;
   background: #fff;
   box-shadow: 0 3px 12px rgba(0,0,0,0.05);
   margin: 12px 12px 20px;
   border-radius: 5px;
   padding: 30px 12px;
}
.fix{
   position: sticky;
@@ -191,6 +219,17 @@
   margin-top: 5px;
   font-size: 14px;
}

.measures{
   margin-top: 50px 12px 0;
   padding: 0 12px;
	
   .measureBtn{
      border-radius: 5px;
      box-shadow: 0 3px 12px rgba(33,239,102,0.4);
   }
}

/* .btn{
   position: fixed;
   bottom: var(--window-bottom, 1);