css之常用样式

admin • • 5G

展示样式一：

<div class="showListBox">
        <div class="List"  v-for="(i,index) in sealList" :key="index"> 
            <div class="ListItemCon">
                <div class="ListItem-titleBox">
                   <img src="../img/qygl.png" class="ListItem-titleImg">
                    <div class="ListItem-titleCon">标题</div>
                </div>
                <div class="ListItem-conBox">
                    <div class="ListItem-leftCon">
                        <img src="../img/logo.png" class="ListItem-leftConImg" />
                    </div>
                    <div class="ListItem-CenterCon">
                            <div class="ListItem-leftCon-item">当前状态：<span>已通过</span></div>
                            <div class="ListItem-leftCon-item">申请时间：<span>2022-12-22</span></div>
                        </div>
                    <div class="ListItem-rightCon">
                        <img src="../img/gd.png"  class="ListItem-rightConImg"/>
                    </div>
                </div>
            </div>
            <div class="top"></div>
        </div>
    </div>


#css
.showListBox{
  background-color: #fff;
  .List{
    .ListItemCon{
      // 标题
      .ListItem-titleBox{
        display: flex;
        align-items: center;
        padding:10px 20px;
	      border-bottom:2px solid #f7f7f7;
	      color:#000000;
        .ListItem-titleImg{
						 width:29px;
						 height:24px;
             margin-right:5px;
        }
        .ListItem-titleCon{
         text-align: center;
         font-size:14px;
        }
      }
      // 内容
      .ListItem-conBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:10px 25px;
         .ListItem-leftCon{
            .ListItem-leftConImg{
              width:50px;
              height:50px;
            }
         }
         .ListItem-CenterCon{
          .ListItem-leftCon-item{
            padding:2px 0;
            span{
              color: #666;
            }
          }
         }
         .ListItem-rightCon{
           .ListItem-rightConImg{
            width:20px;
            height:20px;
           }
         }
      }

    }
  }
}

展示样式二：

   <div class="showListLineBox">
      <div class="List">
        <div class="ListItemCon">
          <div class="ListItem-titleBox">
            <div class="ListItem-titleCon">标题</div>
            <div class="ListItem-titleCon">标题</div>
          </div>
          <div class="ListItem-conBox">
            <div class="ListItem-conBoxOne">
              <div class="ListItem-leftCon">
                <div class="ListItem-leftCon-item">申请人：<span>XXX</span></div>
                <div class="ListItem-leftCon-item">申请时间：<span>2022-12-22</span></div>
              </div>
              <div class="ListItem-rightCon">
                <img src="../img/gd.png" class="ListItem-rightConImg" />
              </div>
            </div>
            <div class="ListItem-conBoxTwo">
              <div class="ListItem-conBoxTwo-item">查看</div>
              <div class="ListItem-conBoxTwo-item">删除</div>
            </div>
          </div>
        </div>
        <div class="top"></div>
      </div>
    </div>


//列表样式2： 左边竖线标题，两行内容  //ListItem-titleBox和ListItem-titleBoxs可切换
.showListLineBox {
  background-color: #fff;
  // margin:0 10px;
  .List {
    .ListItemCon {
      .ListItem-titleBox {
        display: flex;
        justify-content: space-between;
        border-left: 5px solid #ff6f61;
        padding: 10px 15px;
        .ListItem-titleCon {
          font-size: 14px;
          color: #000;
        }
      }
      .ListItem-titleBoxs {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        .ListItem-titleConLeft {
          padding: 0px 15px;
          border-left: 5px solid #ff6f61;
        }
        .ListItem-titleConRight {
          padding: 0px 15px;
        }
        .ListItem-titleCon {
          font-size: 14px;
          color: #000;
        }
      }
      .ListItem-conBox {
        .ListItem-conBoxOne {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 20px;
          .ListItem-leftCon {
            .ListItem-leftCon-item {
              padding: 5px 0;
              span {
                color: #666;
              }
            }
          }
          .ListItem-rightCon {
            .ListItem-rightConImg {
              width: 20px;
              height: 20px;
            }
          }
        }
        .ListItem-conBoxTwo {
          border-top: 2px solid #eee;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .ListItem-conBoxTwo-item {
            padding: 10px 5px;
            color: #ff6f61;
          }
        }
      }
    }
  }
}

展示样式三：

 <div class="showListDotBox">
      <div class="List">
        <div class="ListItemCon">
          <div class="ListItem-titleBox">
            <img src="../img/title.png" class="ListItem-titleImg" />
            <div class="ListItem-titleCon">标题</div>
          </div>
          <div class="ListItem-conBox">
            <div class="ListItem-leftCon">
              <div class="ListItem-leftCon-item">申请人：<span>XXX</span></div>
              <div class="ListItem-leftCon-item ListItem-leftCon-Lastitem">
                申请时间：<span>2022-12-22</span>
              </div>
            </div>
            <div class="ListItem-rightCon">
              <img src="../img/gd.png" class="ListItem-rightConImg" />
            </div>
          </div>
        </div>
        <div class="top"></div>
      </div>
    </div>

//列表样表3 ：标题带圆点，圆形边框
.showListDotBox {
  margin: 0 10px;
  .List {
    .ListItemCon {
      background-color: #fff;
      border-radius: 5px !important;
      .ListItem-titleBox {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #eee;
        .ListItem-titleImg {
          width: 10px;
          height: 10px;
          padding: 0 5px;
        }
      }
      .ListItem-conBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        .ListItem-leftCon {
          .ListItem-leftCon-item {
            padding: 5px 0;
            span {
              color: #666;
            }
          }
          .ListItem-leftCon-Lastitem {
            padding-bottom: 10px;
          }
        }
        .ListItem-rightCon {
          .ListItem-rightConImg {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
}

展示样式四：

  

 <div class="showListTipBox">
      <div class="List">
        <div class="ListItem">
          <div class="ListItem-left">
            <img src="../img/logo.png" alt="" class="ListItem-leftImg" />
            <div class="ListItem-leftTipBox">
              <div class="ListItem-leftTitle">标题</div>
              <div class="ListItem-leftTips">简介信息</div>
            </div>
          </div>
          <img src="../img/gd.png" alt="" class="ListItem-rightImg" />
        </div>
        <div class="top"></div>
      </div>
    </div>
// 列表4：列表三列两列内容，两图一个提示
.showListTipBox {
  background-color: #fff;
  .List {
    .ListItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      .ListItem-left {
        display: flex;
        .ListItem-leftImg {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
        .ListItem-leftTipBox {
          .ListItem-leftTitle {
            font-size: 14px;
          }
          .ListItem-leftTips {
            color: #666;
            padding: 5px 10px;
          }
        }
      }
      .ListItem-rightImg {
        width: 20px;
        height: 20px;
      }
    }
  }
}

 展示样式五：

<div class="showListNormalBox">
      <div class="List">
        <div class="ListItemCon">
          <div class="ListItemCon-leftCon">标题</div>
          <img src="../img/gd.png" alt="" class="ListItemCon-rightImg" />
        </div>
        <div class="top"></div>
      </div>
    </div>
// 列表5 ：日常列表，一个标题，一个查看图片
.showListNormalBox {
  background-color: #fff;
  .List {
    .ListItemCon {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      .ListItemCon-leftCon {
        font-size: 14px;
      }
      .ListItemCon-rightImg {
        width: 20px;
        height: 20px;
      }
    }
  }
}

展示样式六：

 <div class="showInfoNormal">
      <div class="showInfoNormal-item">申请人：<span>XXX</span></div>
      <div class="showInfoNormal-item">申请时间：<span>2022-12-22</span></div>
      <div class="top"></div>
    </div>
// 内容显示：
.showInfoNormal {
  .showInfoNormal-item {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    //  margin:10px 0;
    span {
      color: #666;
    }
  }
}

 展示样式七：

   <div class="showNormalInputBox">
      <div class="List">
        <div class="ListItemCon">
          <div class="ListItem">
            <div class="ListItem-title">申请人</div>
            <input type="text" />
          </div>
          <div class="ListItem">
            <div class="ListItem-title">印章密码</div>
            <input type="password" />
          </div>
          <div class="ListItem">
            <div class="ListItem-titles">手机号</div>
            <input type="number" />
          </div>
        </div>
        <div class="top"></div>
      </div>
    </div>
// 输入框：   //ListItem-title有必选*，ListItem-titles没有必选*
.showNormalInputBox {
  .List {
    .ListItemCon {
      padding: 10px;
      .ListItem {
        padding: 10px;
        border-bottom: 1px solid #eee;
        .ListItem-title,
        .ListItem-titles {
          font-size: 14px;
        }
        .ListItem-title::before {
          display: inline-block;
          margin-right: 4px;
          color: #f5222d;
          font-size: 14px;
          font-family: SimSun, sans-serif;
          line-height: 1;
          content: "*";
        }
        .ListItem-title::after,
        .ListItem-titles::after {
          content: ":";
          position: relative;
          top: -0.5px;
          margin: 0 8px 0 2px;
          padding-right: 5px;
        }
      }
    }
  }
}

展示样式八：

    <div class="showSelectBox">
      <div class="showSelectBox-title">选择区域：</div>
      <div class="showSelectBox-select">
        <select name="">
          <option>美国</option>
          <option selected="selected">中国</option>
          <option>俄罗斯</option>
          <option>韩国</option>
        </select>
      </div>
    </div>
// 下拉菜单
.showSelectBox {
  display: flex;
  align-items: center;
  // justify-content: center;
  padding: 10px 15px;
  .showSelectBox-title {
    font-size: 14px;
    width: 80px;
  }
  .showSelectBox-select {
    display: inline-block;
  }
}

 展示样式九：

 <div class="showButtonBox">
      <div class="showCircleButton">圆角按钮</div>
      <div class="showSquareButton">方形按钮</div>
    </div>
// 按钮：   showCircleButton圆形按钮，showSquareButton方形按钮，修改bordr可以查看镂空。修改bgc可以查看全部背景
.showButtonBox {
  // margin-top:20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  .showCircleButton {
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color: #ed602a;
    color: #ffff;
    // border:1px solid #ed602a;
    // color: #c0c4cc;
    font-size: 15px;
    border-radius: 20px;
    text-align: center;
  }
  .showSquareButton {
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color: #ed602a;
    color: #ffff;
    // border:1px solid #ed602a;
    // color: #c0c4cc;
    font-size: 15px;
    text-align: center;
  }
}

 展示样式十：

 <div class="showNullDataBox">
      <div class="showNullImg"><img src="../img/null.png" alt="" /></div>
      <div class="showNullMsg">您还没有申请记录哦~</div>
      <div class="showButtonBox">
        <div class="showCircleButton">确定</div>
      </div>
    </div>
// 列表数据为空展示
.showNullDataBox {
  background-color: #fff;
  .showNullImg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
    img {
      width: 220px;
      height: 168px;
    }
  }
  .showNullMsg {
    text-align: center;
    padding-bottom: 25px;
  }
}

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>