样式修改

马宇豪

2023-07-24 b1fc04036f964163c128586810fec8b5e9da7e2c

 pages/tabBar/information/information.vue

@@ -21,8 +21,10 @@
            <view class="listContent" v-if="informationList.length > 0">
               <view v-for="(item, index) in informationList" :key="index" class="itemContent">
                  <view class="content" @click="toDetail(item)">
              <view class="textContent">
                     <text>[{{item.colorContent}}]</text>
                     <text>{{item.title}},{{item.content}}</text>
              </view>
                     <view class="buttonContent">
                        <u-button v-if="item.buttonContent == '审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white">
                           {{item.buttonContent}}
@@ -125,7 +127,7 @@

</script>

<style>
<style lang="scss" scoped>
.box {
   display: flex; 
   flex-direction: column; 
@@ -141,12 +143,13 @@
   z-index: 1;
}
.navBarBox .navBar {
      background-color:lightgrey;
      height: 40px;
  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{
   text-align: center;
@@ -161,6 +164,7 @@
.contentList{
   display: flex;
   flex-direction: column;
  padding-bottom: 65px;
}
.buttonGroup{
   margin: 18px 12px;
@@ -215,38 +219,54 @@
   align-items: center;
}
.listHead{
  padding: 12px;
   display: flex;
   align-items: center;
   /* background-color:lightgrey; */
   height: 25px;
   padding: 10px 10px;
  justify-content: space-between;
}
.listContent{
   display: flex;
   flex-direction: column;
   padding: 0 10px;
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.itemContent{
   font-size: 16px;
   color: gray;
   margin-top: 10px;
   border-bottom: 1px solid lightgrey;
  color: #333;
  margin-top: 15px;
  padding: 0 12px 15px;
  border-bottom: 1px solid #ebebeb;
   
  &:last-of-type{
    border-bottom: none;
  }
}
.content{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

  .textContent{
    width: calc(100% - 90px);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
.buttonCo{
   margin-top: 5px;
   margin-bottom: 10px;
}

.buttonContent{
   float: right; 
   width: 80px;
   margin-top: -5px;
}
}
.buttonCo{
   font-size: 13px;
}

/* .divider{
   height: 1px;
   background-color: gray;