@line_clamp: 2;// 文字默认截取行数 @onehundred: 100%; //整体百分百 @small-size:12px; @font-size-base:14px;// 新闻简介字号 @titlesize:16px;// 新闻标题字号 @large-size:18px; @large-two-size:24px; @title-color: #333; //标题颜色 @hover-color: #2671DE; //文字滑过颜色跟随当前主体色,也有可能滑过的和高亮的不是一种颜色这个主要作为文字颜色 @active-color: #2671DE; //高亮颜色跟随当前主体色,也有可能滑过的和高亮的不是一种颜色这个主要作为背景颜色 @text-color:#666; //简介颜色 @textinfo-color:#999;// 不重要的文字颜色比如时间 @forminputjianju: 10px;// 输入框左内间距 @white:#fff; //白色 @black:#000; @e5:#e5e5e5; @dc:#dcdcdc; @family:"Microsoft YaHei"; @left:left; @right:right; @center:center; @display-block:block; @display-flex:flex; @display-table:table; @display-inline-block:inline-block; @display-none:none; /************************************** 以上是默认设置除了高亮和滑过别的不要动,想到可以随时添加 *******************************************/ /**************************************** css文件不要改,要改同名的less文件并重新生成css文件!!!!!!****************************************/ * { margin: 0; padding: 0; box-sizing: border-box; /*自动换行*/ word-wrap: break-word; /* 英文强制换行 */ /* word-break: break-all; */ } /*清除元素默认样式*/ html, body { min-height: @onehundred; } body, p, h1, h2, h3, h4, h5, h6, a, video, iframe { margin: 0; padding: 0; } .clear:after, .clear:before { content: ""; clear: both; overflow: hidden; display: table; } a { outline: none; text-decoration: none; -webkit-transition: all 100ms; transition: all 100ms; color: inherit; &:hover { -webkit-transition: all 100ms; transition: all 100ms; } img{ border: 0; } } img { vertical-align: middle; max-width: 100%; height: auto; border: none; } ul{ margin: 0; li{ margin: 0; } } input, textarea { padding-left: @forminputjianju; } input, select, textarea, button, img { outline: none; font-family: @family; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-family: @family; font-size: @font-size-base; color: @textinfo-color; } input:-moz-placeholder, textarea:-moz-placeholder { font-family: @family; font-size: @font-size-base; color: @textinfo-color; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-family: @family; font-size: @font-size-base; color: @textinfo-color; } /*搜索框自带填充颜色清除*/ input:-webkit-autofill { background-color: @white !important; -webkit-box-shadow: 0 0 0px 1000px @white inset; color: @title-color !important; -webkit-text-fill-color: @title-color !important; } /* 背景颜色 background-color: transparent !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s !important; 字体颜色 color: #fff !important; -webkit-text-fill-color: #fff !important; 光标颜色 caret-color: #fff !important; */ /*搜索框自带填充颜色清除 END*/ /*优化下拉样式*/ /*select{ appearance:none; -moz-appearance:none; -webkit-appearance:none;*/ /*在选择框的最右侧中间显示小箭头图片*/ /* background: url(../images/ico-arrow.png) no-repeat 83px center transparent; outline:none; -webkit-outline:none; -moz-outline:none; -o-outline:none; }*/ /*针对ie下拉箭头美化 select::-ms-expand { display: none;清除IE默认下拉按钮,但是测试发现IE10以上有效,IE8,9默认下拉按钮仍旧存在 }*/ /*针对ie火狐下拉虚线框 select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #fff;修改字体颜色 }*/ button { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } table { border-collapse: collapse; border-spacing: 0; margin: 0 auto; max-width: @onehundred; width: auto; td{ width: auto; } } /*******************************************预设样式*******************************************/ p { font-size: @font-size-base; color: @text-color; line-height: 30px; } .Left { float: @left; } .Right { float: @right; } .MarRi { margin-right: 0 !important; } .wrap { width:@onehundred; overflow: hidden; } .content { width: @onehundred; } .w1200 { width: 1200px; margin: 0 auto; height: auto; } .flex-col { display: @display-flex; flex-direction: column; } .flex-row { display: @display-flex; flex-direction: row; } .justify-start { display: @display-flex; justify-content: flex-start; } .justify-center { display: @display-flex; justify-content: center; } .justify-end { display: @display-flex; justify-content: flex-end; } .justify-evenly { display: @display-flex; justify-content: space-evenly; } .justify-around { display: @display-flex; justify-content: space-around; } .justify-between { display: @display-flex; justify-content: space-between; } .align-start { display: @display-flex; align-items: flex-start; } .align-center { display: @display-flex; align-items: @center; } .align-end { display: @display-flex; align-items: flex-end; } /*外间距*/ .m0 { margin: 0 !important; } .m5 { margin: 5px !important; } .m10 { margin: 10px !important; } .m15 { margin: 15px !important; } .m20 { margin: 20px !important; } .m25 { margin: 25px !important; } .m30 { margin: 30px !important; } .m35 { margin: 35px !important; } .mtb5 { margin: 5px 0 !important; } .mtb10 { margin: 10px 0 !important; } .mtb15 { margin: 15px 0 !important; } .mtb20 { margin: 20px 0 !important; } .mtb25 { margin: 25px 0 !important; } .mtb30 { margin: 30px 0 !important; } .mtb35 { margin: 35px 0 !important; } .mlr10 { margin: 0 10px !important; } .mlr15 { margin: 0 15px !important; } .mlr20 { margin: 0 20px !important; } .mlr24 { margin: 0 24px !important; } .mlr25 { margin: 0 25px !important; } .mlr30 { margin: 0 30px !important; } .mlr35 { margin: 0 35px !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mb0 { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } /*内间距*/ .p5 { padding: 5px !important; } .p10 { padding: 10px !important; } .p15 { padding: 15px !important; } .p25 { padding: 25px !important; } .p30 { padding: 30px !important; } .p35 { padding: 35px !important; } .ptb5 { padding: 5px 0 !important; } .ptb10 { padding: 10px 0 !important; } .ptb15 { padding: 15px 0 !important; } .ptb20 { padding: 20px 0 !important; } .ptb25 { padding: 25px 0 !important; } .ptb30 { padding: 30px 0 !important; } .ptb35 { padding: 35px 0 !important; } .plr10 { padding: 0 10px !important; } .plr15 { padding: 0 15px !important; } .plr20 { padding: 0 20px !important; } .plr25 { padding: 0 25px !important; } .plr30 { padding: 0 30px !important; } .plr35 { padding: 0 35px !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } /*单行文字超出隐藏*/ .text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*多行文字超出隐藏*/ .text-line-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @line_clamp; /*要显示的行数*/ overflow: hidden; } /*强制换行主要针对英文或数字*/ .break-word { word-wrap: break-word; } /*字母全部转换成大写*/ .uppercase { text-transform: uppercase; } /*盒子模型 css3属性直接写总宽不用再计算减去边框内边距外边距*/ .box-sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /****************************************预设样式 END******************************************/ /*判断浏览器兼容弹出层*/ .Iepop { width:@onehundred; height: @onehundred; background: url(../images/bg.png); position: fixed; z-index: 9999999999999999999; top: 0; left: 0; display: none; .IeCont { width: 607px; height: 405px; position: relative; top: 30%; margin: 0 auto; background: url(../images/Pop.png) no-repeat; overflow: hidden; .IeBox { padding: 20px; overflow: hidden; padding: 20px; overflow: hidden; margin-top: 70px; margin-left: 61px; margin-right: 33px; h3 { margin-bottom: 25px; font-size: 24px; } p { font-size:@titlesize; font-weight: bold; color: @title-color; } .IeLink { margin-top: 35px; background: url(../images/iealertsprite.png); span { width: 73px; height: 98px; display: inline-block; margin-right: 16px; &:last-child { margin-right: 0; } a{ display: block; width: 73px; height: 98px; } } } } } } /*******新闻详情标题&百度分享样式******/ .TextTitle { padding: 25px 0; padding-bottom: 20px; width: @onehundred; border-bottom: 1px dashed #DEE2E6; text-align: @center; h5 { font-family: @family !important; font-size: @large-two-size; color: @title-color; font-weight: normal; text-align: @center !important; } h6 { color: @text-color; font-size: @large-size; line-height: 36px; font-weight: normal; margin-bottom: 10px; } .shar { margin-top: 10px; font-size: @font-size-base; color: @textinfo-color; .share_items { display: inline-block; position: relative; margin-left: 20px; font-size: @font-size-base; -webkit-text-stroke-width: 0; } } } /******** 新闻详情样式 ***********/ .NewsText { padding: 15px 0; width: @onehundred; overflow: hidden; &,*{ font-size:@titlesize; color: @title-color; line-height: 2; } } .text-imgtable{ img{ max-width: @onehundred !important; height: auto !important; } .scroll_table { overflow-x: auto; table{ th,td{ white-space: nowrap; } } } table{ width: @onehundred; th{ border: 1px solid #ddd; } td{ border: 1px solid #ddd; } } } /*********分页样式***********/ .pages { display: @display-table; margin: 30px auto; margin-bottom: 0; text-align: center; .pagination { padding: 0; list-style: none; display: inline-block; li { float: @left; margin-right: -1px; width: 33px; height: 33px; font-size:@font-size-base; color:@active-color; text-align: @center; line-height: 31px; border: 1px solid #DEE2E6; a { display: block; color:@active-color; } span{ display: block; } &.active,&:hover{ background:@active-color; a{ color: @white; } } &.prev,&.next{ width: 65px; } &.first,&.last{ width: 51px; } &.disabled{ cursor: not-allowed; opacity: .5; &:hover{ background: @white !important; } } } } .form { display:@display-none; height: 30px; line-height: 30px; .text { margin: 0 5px; font-size: 15px; color: @text-color; float: @left; } .input { float: @left; margin-right: 5px; width: 56px; height: 32px; font-size: @font-size-base; color: @text-color; border: 1px solid #DCDFE6; } .go-page { display: inline-block; margin-left: 15px; width: 60px; height: 30px; font-size:@font-size-base; color: @text-color; line-height: 28px; text-align: center; border: 1px solid #C1C1C1; cursor: pointer; outline: none; } } } /**************文章详情分页*******/ .NewsPages { padding: 20px 0; width:@onehundred; font-size:@font-size-base; overflow: hidden; a{ color: @text-color; &:hover{ color: @hover-color; } } } /******** 针对element框架上分页样式的修改 ********/ .pages{ button{ float: @left; margin-right: -1px; padding: 0; width: 51px; height: 33px; font-size:@font-size-base; color:@active-color; text-align: @center; line-height: 31px; border-radius: 0; border: 1px solid #DEE2E6; &.el-button:focus, &.el-button:hover{ color: @white !important; background: @active-color !important; border-color: @active-color; } &:disabled { opacity: 0.5; } } .el-pagination { float: @left; padding: 0; font-size: @font-size-base; color: @active-color; font-weight: normal; button { display: @display-block; float: @left; padding: 0; margin: 0 !important; margin-right: -1px !important; width:65px; height: 33px; font-size:@font-size-base; color: @active-color !important; text-align: @center; line-height: 31px !important; border-radius: 0; background-color: @white !important; border: 1px solid #DEE2E6; &:disabled { opacity: 0.5; } } .el-pager{ float: @left; li{ display: @display-block; float: @left; padding: 0; margin: 0 !important; margin-right: -1px !important; min-width: 33px; width: 33px; height: 33px; line-height: 31px; font-size: @font-size-base; color:@active-color !important; border-radius: 0; border: 1px solid #DEE2E6; background-color: @white !important; &:hover,&.active{ color: @white !important; background: @active-color !important; } } } } }