css之常用样式

展示样式一：

<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;}
}