page { background: #f7f7f7; height: 100%; } .container{ height: 100%; } .border-line { position: relative; &::after { content: ""; position: absolute; bottom: 0; left: 0; border-bottom: 1px solid #F5F7FA; width: 100%; transform: scaleY(0.5); border-top-color: #F5F7FA; border-right-color: #F5F7FA; border-left-color: #F5F7FA; } } /*单行文本溢出省略号*/ .one-t { overflow: hidden; /*#ifndef APP-NVUE*/ white-space: nowrap; /*#endif*/ text-overflow: ellipsis; transition: all linear 0.2s; } /*多行文本溢出省略号*/ .more-t { overflow: hidden; text-overflow: ellipsis; /*#ifndef APP-NVUE*/ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /*#endif*/ transition: all linear 0.2s; } /* ================== flex布局(colorui里面也有相关基础样式) ==================== */ /* x水平排列*/ .x-f { display: flex; align-items: center; } /*x两端且水平居中*/ .x-bc { display: flex; justify-content: space-between; align-items: center; flex-direction: row; } /*x平分且水平居中*/ .x-ac { display: flex; justify-content: space-around; align-items: center; } /*x水平靠上对齐*/ .x-start { display: flex; align-items: flex-start; } /*x水平靠下对齐*/ .x-end { display: flex; align-items: flex-end; } /*上下左右居中*/ .x-c { display: flex; justify-content: center; align-items: center; } /*y竖直靠左*/ .y-start { display: flex; flex-direction: column; align-items: flex-start; } /*y竖直靠右*/ .y-end { display: flex; flex-direction: column; align-items: flex-end; } /*y竖直居中*/ .y-f { display: flex; flex-direction: column; align-items: center; } // y竖直两端 .y-b { display: flex; flex-direction: column; justify-content: space-between; } /*y竖直两端居中*/ .y-bc { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } /* layout */ .acea-row { display: flex; flex-wrap: wrap; /* 辅助类 */ } .acea-row.row-middle { align-items: center; } .acea-row.row-top { align-items: flex-start; } .acea-row.row-bottom { align-items: flex-end; } .acea-row.row-center { justify-content: center; } .acea-row.row-right { justify-content: flex-end; } .acea-row.row-left { justify-content: flex-start; } .acea-row.row-between { justify-content: space-between; } .acea-row.row-around { justify-content: space-around; } .acea-row.row-column-around { flex-direction: column; justify-content: space-around; } .acea-row.row-column { flex-direction: column; } .acea-row.row-column-between { flex-direction: column; justify-content: space-between; } /* 上下左右垂直居中 */ .acea-row.row-center-wrapper { align-items: center; justify-content: center; } /* 上下两边居中对齐 */ .acea-row.row-between-wrapper { align-items: center; justify-content: space-between; } .cts-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 80rpx; // background: linear-gradient(to right, #35d861 0%, #35d861 100%); // background: -moz-linear-gradient(to right, #35d861 0%, #35d861 100%); background: #FF5C03; box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22); border-radius: 40rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 500; color: rgba(255, 255, 255, 1); margin-left: 30rpx; margin-right: 30rpx; width: calc(100% - 30px); } .flex{ flex: 1; }