添加后台ui框架

admin-ui/static/css/date.css

@@ -0,0 +1,600 @@
+.textbox-icon-disabled {
+    display: none;
+}
+.calendar-header {
+    background: none;
+    border-bottom: 1px solid #e2e2e2;
+    line-height: 30px;
+}
+
+.calendar-title {
+    position: relative;
+    top: -3px;
+    width: 160px;
+    margin: 0 auto;
+}
+
+.calendar-title span {
+    position: relative;
+    display: inline-block;
+    top: 2px;
+    padding: 0 5px;
+    height: 26px;
+    line-height: 26px;
+    cursor: pointer;
+    color: black;
+}
+
+.calendar-title span:hover {
+    color: #004c8b;
+}
+
+.calendar-day {
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.calendar-nav-hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.calendar-selected {
+    border: 1px solid #fff;
+    background-color: #004c8b;
+    color: #fff !important;
+}
+
+.calendar-today {
+    color: #004c8b;
+}
+
+.calendar-nav {
+    height: 30px;
+}
+
+.calendar-prevmonth, .calendar-nextmonth, .calendar-prevyear, .calendar-nextyear {
+    top: -5px;
+    line-height: 30px;
+    margin-top: 0;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+    background-image: none;
+}
+
+.calendar-prevmonth, .calendar-nextmonth {
+    font-size: 20px;
+}
+
+.calendar-prevyear, .calendar-nextyear {
+    font-size: 24px;
+}
+
+.calendar-prevmonth {
+    left: 30px;
+    top: -4px;
+}
+
+.calendar-nextmonth {
+    right: 30px;
+    top: -4px;
+}
+
+.calendar-text.calendar-nav-hover, .calendar-nextmonth.calendar-nav-hover, .calendar-nextyear.calendar-nav-hover, .calendar-prevmonth.calendar-nav-hover, .calendar-prevyear.calendar-nav-hover {
+    background-color: #fff;
+    color: #004c8b;
+}
+
+.datebox-button {
+    margin: 0;
+    padding: 5px 5px;
+    height: 26px !important;
+    text-align: right;
+    background: #fff;
+}
+
+.datebox-button a {
+    height: 26px;
+    line-height: 26px;
+    margin-top: 10px;
+    background-color: #004c8b;
+    color: #fff;
+    border-radius: 2px;
+    transition: all 0.2s ease-in-out;
+    opacity: 1;
+}
+
+.datebox-button a:hover {
+    color: #fff;
+    opacity: 0.8;
+}
+
+.datebox-button a:nth-child(1) {
+    margin-right: 8px;
+}
+
+.datebox-button a:nth-child(2) {
+    margin-right: 3px;
+}
+
+/* 月份 */
+.date-month-list {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 0;
+}
+
+.date-month-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 25%;
+    margin: 17px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.date-month-list > li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.date-month-this {
+    background-color: #004c8b !important;
+    color: #fff;
+}
+
+.date-month-this:hover {
+    color: #fff !important;
+}
+
+/* 月份 */
+.date-year-titleys {
+/ / margin: 0 3 px;
+    top: 0 !important;
+    height: auto;
+    line-height: none;
+}
+
+.date-year-list {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    padding: 15px 0;
+}
+
+.date-year-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 33.3333%;
+    margin: 3px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.date-year-list > li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.date-year-this {
+    background-color: #004c8b !important;
+    color: #fff;
+}
+
+.date-year-this:hover {
+    color: #fff !important;
+}
+
+/* 时分秒 */
+.date-time-list {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    background-color: #fff;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.date-time-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 33.3333%;
+    margin: 3px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+}
+
+.date-time-list p {
+    position: relative;
+    top: -4px;
+    line-height: 29px;
+}
+
+.date-time-list li:first-child ol {
+    border-left-width: 1px;
+}
+
+.date-time-list li ol {
+    margin: 0;
+    padding: 0;
+    border: 1px solid #e2e2e2;
+    border-left-width: 0;
+    height: 181px;
+    overflow: hidden;
+}
+
+.date-time-list ol li {
+    width: 120%;
+    padding-left: 33px;
+    line-height: 30px;
+    text-align: left;
+    cursor: pointer;
+}
+
+.date-time-list li ol:hover {
+    overflow-y: auto;
+}
+
+.date-this {
+    background-color: #004c8b !important;
+    color: #fff !important;
+}
+
+.date-time-list li ol li {
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.date-time-list li ol li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.calendar-title .year-range {
+    display: none;
+}
+
+.calendar-body .calendar-menu {
+    display: none;
+}
+
+.calendar-body .date-month-list {
+    display: none;
+}
+
+.calendar-body .date-year-list {
+    display: none;
+}
+
+/*-------- 时间范围选择------- */
+.calendarT {
+    width: 523px;
+    height: 284px;
+    margin: 10px 10px 5px 0px;
+    background: #fff;
+    border: 1px solid #d2d2d2;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
+    padding: 10px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.calendarT-header-box {
+    height: 30px;
+}
+
+.calendarT-header-left {
+    width: 250px;
+    float: left;
+    height: 100%;
+}
+
+.calendarT-header-right {
+    margin-left: 250px;
+    height: 100%;
+}
+
+.calendarT .calendar-header {
+    border: none;
+}
+
+.calendarT .calendar-body {
+    border-bottom: 1px solid #e2e2e2;
+    border-top: 1px solid #e2e2e2;
+    height: 232px;
+}
+
+.calendarT-body-left {
+    width: 250px;
+    float: left;
+    height: 100%;
+}
+
+.calendarT-body-right {
+    margin-left: 250px;
+    border-left: 1px solid #e2e2e2;
+    height: 100%;
+}
+
+/* 月份范围选择 */
+.date-monthrange-list {
+    margin: 0 10px;
+    padding: 8px 0;
+}
+
+.date-monthrange-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 25%;
+    margin: 17px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.date-monthrange-list > li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.date-monthrange-this {
+    background-color: #004c8b !important;
+    color: #fff;
+}
+
+.date-monthrange-this:hover {
+    color: #fff !important;
+}
+
+/* 年份范围选择 */
+.date-yearrange-list {
+    margin: 0 10px;
+    padding: 11px 0;
+}
+
+.date-yearrange-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 33.3333%;
+    margin: 3px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.date-yearrange-list > li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.date-yearrange-this {
+    background-color: #004c8b !important;
+    color: #fff;
+}
+
+.date-yearrange-this:hover {
+    color: #fff !important;
+}
+
+/* 时分秒范围选择 */
+.date-timerange-list {
+    width: 250px;
+    height: 100%;
+    padding: 10px;
+    background-color: #fff;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.date-timerange-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 33.3333%;
+    margin: 3px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+}
+
+.date-timerange-list p {
+    position: relative;
+    top: -4px;
+    line-height: 29px;
+}
+
+.date-timerange-list li:first-child ol {
+    border-left-width: 1px;
+}
+
+.date-timerange-list li ol {
+    margin: 0;
+    padding: 0;
+    border: 1px solid #e2e2e2;
+    border-left-width: 0;
+    height: 181px;
+    overflow: hidden;
+}
+
+.date-timerange-list ol li {
+    width: 120%;
+    padding-left: 33px;
+    line-height: 30px;
+    text-align: left;
+    cursor: pointer;
+}
+
+.date-timerange-list li ol:hover {
+    overflow-y: auto;
+}
+
+.date-timerange-list li ol li {
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.date-timerange-list li ol li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+/*-------- 年月日选择------- */
+.show-time .calendar-dtable {
+    float: left;
+    padding-top: 5px;
+}
+
+.show-time .calendar-title {
+    width: 260px;
+}
+
+.show-time .calendar-header {
+    border: none;
+}
+
+.show-time .calendar-body {
+    border-top: 1px solid #e2e2e2;
+    border-bottom: 1px solid #e2e2e2;
+}
+
+.calendar-add-time {
+    margin-left: 250px;
+    height: 100%;
+    border-left: 1px solid #e2e2e2;
+}
+
+.add-time-list {
+    padding: 3px 0 10px 10px;
+    background-color: #fff;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    height: 100%;
+}
+
+.add-time-list > li {
+    float: left;
+    vertical-align: middle;
+    width: 33.3333%;
+    margin: 3px 0;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+}
+
+.add-time-list p {
+    position: relative;
+    top: -4px;
+    line-height: 29px;
+}
+
+.add-time-list li:first-child ol {
+    border-left-width: 1px;
+}
+
+.add-time-list li ol {
+    margin: 0;
+    padding: 0;
+    border: 1px solid #e2e2e2;
+    border-left-width: 0;
+    height: 181px;
+    overflow: hidden;
+}
+
+.add-time-list ol li {
+    width: 110%;
+    padding-left: 15px;
+    line-height: 30px;
+    text-align: left;
+    cursor: pointer;
+}
+
+.add-time-list li ol:hover {
+    overflow-y: auto;
+}
+
+.add-time-list li ol li {
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+.add-time-list li ol li:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.calendar-menu {
+    height: 100%;
+}
+/* jqxPopover */
+.jqx-date-box{
+    border:none;
+}
+.jqx-date-box .jqx-popover-content{
+    padding:0;
+}
+.jqx-date-box.bottom{
+    margin:0;
+}
+.jqx-date-box .calendar{
+    border-color:#fff;
+    border-bottom:1px solid #ccc;
+}
+.jqx-date-box .jqx-popover-arrow{
+    display:none!important;
+}
+.jqx-date-box .datebox-calendar-inner{
+    height:284px;
+}
+.jqx-date-box .datebox-button{
+    border:none;
+    padding:3px 5px;
+}

admin-ui/static/css/hust.css

@@ -0,0 +1,141 @@
+/** 只读框 **/
+.textbox-readonly {
+    background: white;
+    border: 0;
+}
+
+.textbox-disabled .textbox-text, .textbox-readonly .textbox-text {
+    background: white;
+    border: 0;
+    cursor: default;
+    box-shadow: none;
+}
+
+.yvgrid-searchbox {
+    background: url(/static/images/searchbox.png) right no-repeat !important;
+    background-size: 48px 30px;
+    padding-right: 50px;
+}
+
+.yvgrid-searchbox-hilight {
+    background: url(/static/images/searchbox-hover.png) right no-repeat !important;
+    background-size: 48px 30px;
+    cursor: pointer;
+}
+
+.yvgrid-searchbox-hilight1 {
+    background: url(/static/images/searchbox-hover1.png) right no-repeat !important;
+    background-size: 40px 25px;
+    cursor: pointer;
+}
+
+.yvgrid-searchbox-hilight2 {
+    background: url(/static/images/searchbox-hover2.png) right no-repeat !important;
+    background-size: 40px 25px;
+    cursor: pointer;
+}
+
+.yvgrid-presentrow-disable{
+    height: 100%;
+    width: 100%;
+    background-color:#e5e5e5 !important;
+}
+/*
+.yvgrid-searchbox:hover, .yvgrid-searchbox:focus {
+    background: url(/static/images/searchbox-hover.png) right no-repeat!important;;
+    background-size: 40px 25px;
+}
+*/
+
+[yv-grid-cell-selected] {
+    color: #ffffff !important;
+    background-color: #428bca !important;
+    border-color: #357ebd !important;
+}
+
+/* 禁用掉勾选用的 checkbox 列*/
+.jqx-grid-cell > .jqx-checkbox{
+    display: none;
+}
+.jqx-widget-header > div > .jqx-checkbox{
+    display: none;
+}
+.jqx-grid-cell-filter-row.jqx-grid-cell > .jqx-checkbox {
+    display: block;
+}
+
+.jqx-tooltip-main .jqx-fill-state-normal {
+    background-color: RED;
+    color: WHITE
+}
+.asterisk{
+    line-height: 34px;
+    width: 100%;
+    height: 30px;
+    text-align: center;
+}
+.yvgrid-yvdate{
+    background: url(/static/images/datebox_arrow.png)  right  7px center no-repeat !important;
+    background-size: 48px 30px;
+    padding-right: 30px;
+}
+
+.yvgrid-numberbox {
+    border: 0;
+    padding: 4px;
+    text-align: right;
+}
+
+/* 去掉 input[type=number] 右边的上下箭头图标 */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button{
+    -webkit-appearance: none !important;
+}
+input[type="number"]{
+    -moz-appearance:textfield;
+}
+.jqx-grid-cell-edit input{
+    width:100%!important;
+    height:100%!important;
+}
+.jqx-grid-cell-selected.jqx-grid-cell-edit{
+    border-color: #ababab !important;
+}
+.jqx-combobox-arrow-normal{
+    width:19px!important;
+}
+.jqx-grid-cell-checkbox{
+    text-align: center;
+}
+.jqx-grid-cell-checkbox .yvgrid-checkbox{
+    margin-top:8px;
+}
+.jqx-grid-cell-center-align{
+    text-align: center;
+}
+.textbox .select2-container{
+    width:100%!important;
+    padding:0;
+}
+.textbox .select2-container .select2-choice{
+    height:100%;
+    line-height: 30px;
+    border:0;
+    border-radius: 0;
+    background:#fff;
+}
+.textbox .select2-container .select2-choice .select2-arrow{
+    border-radius: 0;
+}
+.select2-drop-active{
+    border:1px solid #aaa;
+}
+.select2-search input{
+    margin-top:4px;
+}
+.select2-choices{
+    border: none!important;
+    display: flex;
+    overflow-x: auto!important;
+    white-space: nowrap;
+}

admin-ui/static/css/login.css

@@ -0,0 +1,122 @@
+*{
+    padding:0;
+    margin:0;
+}
+html, body{
+    height: 100%;
+    overflow-y: hidden;
+}
+.errorinfo{
+    background: transparent!important;
+    color: RED;
+}
+.login-body{
+    width: 100%;
+    height:100%;
+    background: url(../images/lock-screen-background.jpg)  no-repeat;
+    background-size: cover;
+}
+.login-body-box{
+    width:400px;
+    height:322px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -161px 0 0 -200px;
+    padding:0;
+    background: rgba(2, 48, 86, 0.8);
+}
+.login-dl-form{
+    padding:0 20px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+.login-dl-title{
+    text-align: center;
+    height: 80px;
+    line-height: 80px;
+    color: rgb(255, 255, 255);
+    font-size: 20px;
+}
+.login-dl-name{
+    width: 55px;
+    height: 50px;
+    padding-right: 15px;
+    float: left;
+    line-height: 50px;
+    text-align: right;
+    color: rgb(0, 76, 139);
+    background: rgb(224, 224, 224);
+}
+.login-dl-info{
+    margin-left: 70px;
+    height: 50px;
+    position: relative;
+}
+.login-dl-info input{
+    font-size: 20px;
+    margin: 0px;
+    padding:0 10px;
+    height: 50px;
+    line-height: 50px;
+    width: 268px;
+    border:0;
+}
+.login-dl-info i{
+    position: absolute;
+    right:0;
+    top:0;
+    width:50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 28px;
+    z-index: 9999;
+    color: rgb(201, 201, 201);
+}
+.login-dl-info select{
+    margin: 0px;
+    padding:0 10px;
+    height: 50px;
+    line-height: 50px;
+    width: 290px;
+    border: none;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+.login-dl-info option{
+    height: 30px;
+    margin: 0 -4px;
+    outline: none;
+}
+.login-dl-form dd{
+    width: 100%;
+    height: 50px;
+    background: rgb(249, 249, 249);
+    margin: 0px 0px 10px;
+}
+.login-dl-submit{
+    background: rgba(0, 76, 139, 0.85);
+    position: absolute;
+    bottom: 0px;
+    height: 55px;
+    width: 100% !important;
+    text-align: center;
+    line-height: 55px;
+}
+.login-dl-submit a{
+    width:100%;
+    height:100%;
+    display:block;
+    color:#fff;
+    font-size: 16px;
+    cursor: pointer;
+}
+.fa-caret-down{
+    pointer-events: none;
+}

admin-ui/static/css/role_home.css

@@ -0,0 +1,143 @@
+.statistics-head {
+    background-color: #054c89 ;
+    margin-top: 50px;
+    width: 80%;
+    left: 100px;
+    right: 100px;
+    height: auto;
+}
+
+.statistics-head-title {
+    margin-top: auto;
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.statistics-head-row {
+    margin-top: auto;
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+.statistics-head-row-light {
+    background-color: #07589d;
+    margin-top: auto;
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+.statistics-head-row-item {
+    height: auto;
+    width: auto;
+    color: white;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+.statistics-head-row-item-button {
+    background: #5887e3;
+    height: auto;
+    width: auto;
+    text-align: center;
+    margin: 20px;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+.statistics-head-row-item-button a{
+    width:100%;
+    height:100%;
+    display:block;
+    color:#fff;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.statistics-body {
+    /*margin-top: 50px;*/
+    width: 80%;
+    left: 100px;
+    right: 100px;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+.statistics-body-item {
+    background-color: #054c89;
+    margin-top: 50px;
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.statistics-body-item-body {
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    /*padding-right: 30px;*/
+    /*padding-left: 30px;*/
+    /*padding-top: 20px;*/
+    /*padding-bottom: 20px;*/
+}
+.statistics-body-item-body-icon {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    padding-left: 40px;
+    width: 100px;
+    height: 100px;
+    font-size: 100px;
+    color: white;
+}
+.statistics-body-item-body-body {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    padding-left: 40px;
+    padding-right: 40px;
+    width: auto;
+    height: auto;
+}
+.statistics-body-item-body-body-title {
+    color: white;
+    font-size: 30px;
+}
+.statistics-body-item-body-body-item {
+    padding: 0;
+    margin: 0;
+    font-size: 20px;
+    color: white;
+}
+.statistics-body-item-bottom-button {
+    background: #229dd6;
+    height: auto;
+    width: 100%;
+    text-align: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.statistics-body-item-bottom-button a{
+    width:100%;
+    height:100%;
+    display:block;
+    color:#fff;
+    font-size: 16px;
+    cursor: pointer;
+}

admin-ui/static/css/themes/cropper/ImgCropping.css

@@ -0,0 +1,162 @@
+
+.l2-btn{
+    display: inline-block;
+    outline: none;
+    resize: none;
+    border: none;
+    padding:5px 10px;
+    background: #8C85E6;
+    color: #fff;
+    border:solid 1px #8C85E6;
+    border-radius: 3px;
+    font-size: 14px;
+}
+.l2-btn:hover{
+    background: #8078e3;
+    animation: anniu 1s infinite;
+}
+.l2-btn:active{
+    box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
+}
+.hidden{
+    display: none;
+}
+.tailoring-container, .tailoring-container div, .tailoring-container p{
+    margin: 0;padding: 0;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+.tailoring-container{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+}
+.tailoring-container .black-cloth{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    opacity: .9;
+    z-index: 1001;
+}
+.tailoring-container .tailoring-content{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    z-index: 1002;
+    left: 0;
+    top: 0;
+
+    /* 水平垂直居中 浏览器版本号低的不支持transform */
+    /*left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    -weblit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);*/
+
+    border-radius: 10px;
+    box-shadow: 0 0 10px #000;
+    padding: 10px;
+}
+
+.tailoring-content-one{
+    height: 40px;
+    width: 100%;
+    border-bottom: 1px solid #DDD ;
+}
+.tailoring-content .choose-btn{
+    float: left;
+}
+.tailoring-content .close-tailoring{
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    border-radius: 100%;
+    background: #eee;
+    color: #fff;
+    font-size: 22px;
+    text-align: center;
+    line-height: 30px;
+    float: right;
+    cursor: pointer;
+}
+.tailoring-content .close-tailoring:hover{
+    background: #ccc;
+}
+
+.tailoring-content .tailoring-content-two{
+    width: 100%;
+    height: 80%;
+    position: relative;
+    padding: 5px 0;
+}
+.tailoring-content .tailoring-box-parcel{
+    width: 80%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    border: solid 1px #ddd;
+}
+.tailoring-content .preview-box-parcel{
+    display: inline-block;
+    width: 228px;
+    height: 450px;
+    position: absolute;
+    right: 0;
+    padding: 4px 14px;
+}
+.preview-box-parcel p{
+    color: #555;
+}
+.previewImg{
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+}
+.preview-box-parcel .square{
+    margin-top: 10px;
+    border: solid 1px #ddd;
+}
+.preview-box-parcel .circular{
+    border-radius: 100%;
+    margin-top: 10px;
+    border: solid 1px #ddd;
+}
+
+.tailoring-content .tailoring-content-three{
+    width: 100%;
+    height: 40px;
+    border-top: 1px solid #DDD ;
+    padding-top: 10px;
+}
+.sureCut{
+    float: right;
+}
+
+@media all and (max-width: 768px) {
+    .tailoring-container .tailoring-content{
+        width: 100%;
+        min-width: 320px;
+        height: 460px;
+    }
+    .tailoring-content .tailoring-content-two{
+        height: 360px;
+    }
+    .tailoring-content .tailoring-box-parcel{
+        height: 350px;
+    }
+    .tailoring-container .tailoring-box-parcel{
+        width: 100%;
+    }
+    .tailoring-container .preview-box-parcel{
+        display: none;
+    }
+
+}