dw main.less php,main.less

* {

margin : 0;

padding: 0;

}

ul,

li {

padding : 0;

margin : 0;

list-style: none

}

p {

font-size : 12px;

line-height: 18px;

}

body {

display : flex;

justify-content: center;

font-family : "Microsoft YaHei";

color:#333;

}

// 公共css

.text-center {

text-align: center;

}

.font-blue {

color: #3982c5;

}

/* 首先我们拿出一张a4纸 */

.a4 {

width : 549px;

height : 842px;

box-shadow : #333 2px 3px 5px;

box-sizing : border-box;

display : flex;

margin-top : 20px;

margin-bottom : 20px;

justify-content: center;

overflow: hidden;

aside {

background-color: #3982c5;

width : 32%;

height : 100%;

display : flex;

align-items : center;

flex-direction : column;

color : white;

padding : 1.5rem 0.3125rem;

box-sizing : border-box;

.name {

font-weight: 300;

margin-top : 1.875rem;

line-height: 2rem;

}

.desc {

font-size : 0.5em;

text-align : center;

margin-bottom: 30px;

}

img {

width : 6.25rem;

height : auto;

padding : 0.3125rem;

border : 2px white solid;

box-sizing: border-box;

// 增加css滤镜 美颜效果 哈哈哈

-webkit-filter: contrast(200%);

filter : contrast(200%);

}

.details {

width: 90%;

ul {

padding: 20px 0;

li {

font-size : 10px;

line-height: 25px;

&:before {

padding-right: 7px;

}

}

}

h6 {

font-weight: 300;

font-size : 10px;

line-height: 40px;

}

.process-bar {

width: 100%;

.pb-wrapper {

border : 1px solid #fff;

position : relative;

border-radius: 2px;

}

.pb-container {

height : 8px;

position: relative;

}

.pb-value {

height : 100%;

background: #fff;

}

}

.title {

display: flex;

color : #3982c5;

height : 26px;

.title_icon {

width : 23px;

background-color: #fff;

position : relative;

&:before {

position : absolute;

text-align : center;

width : 100%;

line-height: 26px;

font-size : 17px;

}

.title_sj {

position : absolute;

left : 23px;

border-top : 13px solid transparent;

border-left : 7px solid #fff;

border-bottom: 13px solid transparent;

border-right : 13px solid transparent;

}

}

.title_content {

width : 63%;

margin-left : 23px;

height : 100%;

padding-left : 10px;

font-size : 11px;

line-height : 26px;

background-color: white;

position : relative;

.title_dsj {

position : absolute;

left : -20px;

border-top : 13px solid white;

border-left : 7px solid transparent;

border-bottom: 13px solid white;

border-right : 13px solid white;

}

}

}

}

}

main {

width : 68%;

background: white;

height : 100%;

padding : 15px;

box-sizing: border-box;

overflow-x: scroll;

&::-webkit-scrollbar {

display: none;

}

.title_bar {

height : 24px;

background-color: #f2f2f2;

display : flex;

margin : 5px 0px;

.title_icon {

width : 23px;

height : 100%;

background-color: #3982c5;

position : relative;

display : inline-block;

&:before {

position : absolute;

color : white;

text-align : right;

width : 100%;

line-height: 26px;

font-size : 20px;

}

.title_sj {

position : absolute;

left : 23px;

border-top : 12px solid transparent;

border-left : 7px solid #3982c5;

border-bottom: 12px solid transparent;

border-right : 12px solid transparent;

}

}

h4 {

line-height: 24px;

color : #3982c5;

font-weight: 400;

font-size : 15px;

margin-left: 20px;

}

}

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史