body { background: #fff; } .database-content { /* padding-bottom: 80px; */ } .consist { box-shadow: 1px 3px 8px 0 rgba(151, 151, 151, 0.15); border-radius: 3px; display: flex; padding: 30px 0; background: #fff; } .consist-item { flex: 1; padding: 0 50px; position: relative; padding-bottom: 50px; } .consist-item+.consist-item { border-left: 1px solid #E7E7E7; } .consist-item-title { font-size: 16px; color: #4A4A4A; margin-bottom: 25px; font-weight: 600; padding-left: 20px; } .consist-item-content { font-size: 14px; color: #9B9B9B; display: flex; } .consist-item-footer { margin-top: 23px; position: absolute; bottom: 0; left: 70px; } .consist-item-column+.consist-item-column { margin-left: 28px; } .consist-item-column p { position: relative; padding-left: 20px; margin-bottom: 10px; } .consist-item-column p::before { position: absolute; width: 5px; height: 5px; border-radius: 3px; background: #9B9B9B; content: ''; display: block; top: 50%; left: 0; transform: translateY(-50%); } [class*="advantage-icon"] { background-position: center; background-repeat: no-repeat; background-size: cover; } .advantage-icon-1 { background-image: url(/static/images/common_new/database/ic_function_1.png); } .advantage-icon-2 { background-image: url(/static/images/common_new/database/ic_function_2.png); } .advantage-icon-3 { background-image: url(/static/images/common_new/database/ic_function_3.png); } .advantage-icon-4 { background-image: url(/static/images/common_new/database/ic_function_4.png); } .advantage-icon-5 { background-image: url(/static/images/common_new/database/ic_function_5.png); } /* 数据服务系统架构 */ .framework { display: flex; align-items: center; justify-content: space-around; } .framework-item { max-width: 360px; /* width:expression_r(clientWidth > 950?"950px": "auto" ); */ height: 210px; /* width: 300px; */ display: flex; align-items: center; } /* .fra-item-max-item { width:expression(eval(this.offsetWidth>1600?1600:auto)); } */ .framework-item--on { background: #fff; width: 360px; padding: 35px 40px; box-shadow: 1px 3px 8px 0 rgba(0, 50, 107, 0.20); } .framework-item--on .framework-item-right { display: inline-flex; } .framework-item-left { background: rgb(252, 252, 252); flex: 1.5; display: flex; justify-content: center; flex-direction: column; align-items: center; } .framework-item-right { border-left: 1px solid #9b9b9b33; padding-left: 18px; margin-left: 18px; font-size: 14px; color: #4A4A4A; line-height: 20px; display: none; flex: 1.5; } .framework-item-icon { width: 70px; height: 70px; margin-bottom: 20px; background-size: cover; background-repeat: no-repeat; background-position: center; } .framework-icon-1 { background-image: url(/static/images/common_new/database/ic_soa_1.png); } .framework-icon-2 { background-image: url(/static/images/common_new/database/ic_soa_2.png); } .framework-icon-3 { background-image: url(/static/images/common_new/database/ic_soa_3.png); } .framework-icon-4 { background-image: url(/static/images/common_new/database/ic_soa_4.png); } .framework-icon-5 { background-image: url(/static/images/common_new/database/ic_soa_5.png); } .framework-item-title { font-size: 20px; color: #4A4A4A; font-weight: 500; /* TODO 0226 中粗体 */ } .framework-item-line { height: 1px; background: #9b9b9b33; flex-shrink: 0; margin: 0 20px; position: relative; top: -20px; flex: 0.5; } /* 数据服务系统架构 */ .sync-left { width: 280px; flex-shrink: 0; } .sync-left .sync-item { height: 384px; border-radius: 3px; } .sync-right { flex: 3; } .sync-right .sync-item { height: 182px; flex-grow: 1; } .sync-item { padding: 30px 20px; box-shadow: 1px 3px 8px 0 rgb(151 151 151 / 15%); border: 1px solid rgba(123, 123, 123, 0.20); margin-left: 20px; margin-bottom: 20px; background: #fff; } .sync-item-title { font-size: 16px; color: #4A4A4A; font-weight: 600; margin-bottom: 13px; white-space: nowrap; } .sync-item-desc { font-size: 14px; color: #4A4A4A; line-height: 24px; } .sync-right-row { display: flex; } .bd-database { position: absolute; /* top: -55px */ } .change-database { padding-top: 150px !important; } .other-bg-content { background: #F5F7FC; } .other-bg-content .part:nth-child(1) { margin-top: 0; padding-top: 72px; }