.top-bar { /* background-color: #745A42; */ background-color: #593320; width: 100vw; /*兼容 IOS<11.2*/ padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS>11.2*/ padding-bottom: env(safe-area-inset-bottom); height: 120px; display: flex; flex-flow: row nowrap; justify-tab-bar: space-around; align-items: center; padding-top: 30px; position: fixed; left: 0; top: 0; z-index: 900; } .row { padding-top: 40px; display: flex; justify-content: space-between; width: 100%; } .column { padding: 10px 0px 0px 0px; text-align: left; /* 文本居中 */ width: 100%; } .column1 { width: 24%; padding-left: 30px; } .column2 { width: 48%;padding-left:20px } .column3 { width: 20px; padding-left:10px; padding-top: 12px;} .column4 { width: 20%;margin-right: 30px; } .input-box { border: 1px solid #CCC; /* 白色边框 */ border-radius: 10px; /* 边框弧形角度 */ padding: 0px 5px; /* 内边距 */ height: 24px; color: #FFF; } .input-box::placeholder { color: #FFF; /* 占位符文字颜色 */ } .container{ margin-top: 120px; background-color: #E5E5E5; min-height: 760px; width: 100%; .banner{ width:100%; } .section1{ width: 100%; min-height: 90px; background-color: #FFF; margin: 3px auto; // padding-bottom:10px ; .serow { display: flex; /* 设置为Flex布局 */ width: 95%; /* 行宽度占满容器 */ margin: 0 auto; } .column { flex: 1; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 20px 3px; text-align: center; /* 文本居中 */ } .cell { flex: 1; /* 在列内部,每行平均分配空间 */ font-size: 16px; color: #666666; display: flex; font-weight: bold; padding: 0px 0px; /* 内边距 */ .cl{ text-align: left; /* 文本靠左 */ } } .active{ color: rgb(160, 124, 90); font-weight: bold; } .full-row { font-size: 14px; margin-top: -20px; text-align: center; /* 文本居中 */ display: flex; width: 70%; .rows{ display: flex; align-items: center; .column { margin-right: 10px; //flex: 0 0 100px; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 10px 0px 0px 10px; text-align: left; /* 文本居中 */ } .column2 { flex: 0 0 7px; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 15px 20px 0px 0px; text-align: left; /* 文本居中 */ } } } .selected{ position: absolute; width: 100px; min-height: 150px; z-index: 999; background-color: #fff; flex: auto; overflow: auto; border-radius: 5px; .textInfo{ padding: 5px; margin: 5px 0; text-align: center; font-size: 12px; } } } .section2{ width: 100%; min-height: 132px; background-color: #FFF; border-radius: 10px; margin: -28px auto; position: relative; display: flex; flex-direction: column; /* 子元素垂直排列 */ align-items: center; /* 子元素在交叉轴上居中对齐 */ .row { width: 95%; /* 行宽度占满容器 */ padding: 10px 20px; /* 行内边距 */ text-align: left; /* 文本居中 */ border-bottom: 1px dotted #ccc; /* 每行的底部边框 */ margin-top: 10px; margin-left: 5px; margin-right: 5px; display: flex; flex-wrap: nowrap; } .divider { width: 80%; /* 分割线宽度 */ height: 2px; /* 分割线高度 */ background-color: #000; /* 分割线颜色 */ margin: 20px 0; /* 分割线的上下外边距 */ } } .section3{ width: 100%; min-height: 502px; .item{ width: 100%; height: 180px; background-color: #FFF; margin-top: 5px; border-radius: 5px; display: flex; .item_img{ margin: 15px 0px 10px 10px; width: 222px; height: 147px; border-radius: 7px; overflow: hidden; flex: 0 0 200px; img{ width: 100%; height: 100%; } } .item_info{ flex: 0 0 45%; line-height: 22px; height: 80px; .title{ font-size: 14px; padding: 10px 10px 0px 15px; font-weight: bold; height: 75px; overflow: hidden; margin-bottom: 7px; } } } } .time_yuyue{ width: 95%; padding: 2px 0px 0px 15px; font-size: 12px; color: #666666; display: flex; line-height: 18px; height: 30px; flex-wrap: wrap; .ico{ padding-top: 2px; flex:0 0 20px; //padding-left: 5px; } .time{ flex:0 0 80%; text-align: left; } .didian{ width: 200px; flex:0 0 80%; text-align: left; } } .adres_yuyue{ display: flex; } .yuyue_btn{ margin-left: 100px; margin-top: 12px; image{ justify-content: flex-end; } } } .slide-image{ width: 100%; height: 300px; }