123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258 |
- // 引入公共基础类
- @import "./libs/css/common.scss";
- @import "./libs/css/color.scss";
- page {
- color: $u-main-color;
- font-size: 28rpx;
- }
- image {
- display: inline-block;
- // 解决图片加载时可能会瞬间变形的问题
- will-change: transform;
- }
- view,
- text {
- box-sizing: border-box;
- flex-direction: row;
- }
- /* start--去除webkit的默认样式--start */
- .u-fix-ios-appearance {
- -webkit-appearance:none;
- }
- /* end--去除webkit的默认样式--end */
- /* start--icon图标外层套一个view,让其达到更好的垂直居中的效果--start */
- .u-icon-wrap {
- display: flex;
- align-items: center;
- }
- /* end-icon图标外层套一个view,让其达到更好的垂直居中的效果--end */
- /* start--微信小程序编译后页面有组件名的元素,特别处理--start */
- /* #ifdef MP-WEIXIN */
- u-td, u-th {
- flex: 1;
- align-self: stretch;
- }
- .u-td {
- height: 100%;
- }
- u-icon {
- display: flex;
- align-items: center;
- }
- // 各家小程序宫格组件外层设置为100%,避免受到父元素display: flex;的影响
- u-grid {
- width: 100%;
- flex: 0 0 100%;
- }
- /* #endif */
- /* end-微信小程序编译后页面有组件名的元素,特别处理--end */
- /* start--iPhoneX底部安全区定义--start */
- .safe-area-inset-bottom {
- padding-bottom: 0;
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- }
- /* end-iPhoneX底部安全区定义--end */
- /* start--各种hover点击反馈相关的类名-start */
- .u-hover-class {
- // background-color: #f7f8f9!important;
- opacity: 0.6;
- }
- .u-cell-hover {
- background-color: #f7f8f9!important;
- }
- /* end--各种hover点击反馈相关的类名--end */
- /* start--文本行数限制--start */
- .u-line-1 {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .u-line-2 {
- -webkit-line-clamp: 2;
- }
- .u-line-3 {
- -webkit-line-clamp: 3;
- }
- .u-line-4 {
- -webkit-line-clamp: 4;
- }
- .u-line-5 {
- -webkit-line-clamp: 5;
- }
- .u-line-2, .u-line-3, .u-line-4, .u-line-5 {
- overflow: hidden;
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box; // 弹性伸缩盒
- -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
- }
- /* end--文本行数限制--end */
- /* start--Retina 屏幕下的 1px 边框--start */
- .u-border,
- .u-border-bottom,
- .u-border-left,
- .u-border-right,
- .u-border-top,
- .u-border-top-bottom {
- position: relative
- }
- .u-border-bottom:after,
- .u-border-left:after,
- .u-border-right:after,
- .u-border-top-bottom:after,
- .u-border-top:after,
- .u-border:after {
- content: ' ';
- position: absolute;
- left: 0;
- top: 0;
- pointer-events: none;
- box-sizing: border-box;
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- // 多加0.1%,能解决有时候边框缺失的问题
- width: 199.8%;
- height: 199.7%;
- transform: scale(0.5, 0.5);
- border: 0 solid $u-border-color;
- z-index: 2;
- }
- .u-border-top:after {
- border-top-width: 1px
- }
- .u-border-left:after {
- border-left-width: 1px
- }
- .u-border-right:after {
- border-right-width: 1px
- }
- .u-border-bottom:after {
- border-bottom-width: 1px
- }
- .u-border-top-bottom:after {
- border-width: 1px 0
- }
- .u-border:after {
- border-width: 1px
- }
- /* end--Retina 屏幕下的 1px 边框--end */
- /* start--clearfix--start */
- .u-clearfix:after,
- .clearfix:after {
- content: "";
- display: table;
- clear: both
- }
- /* end--clearfix--end */
- /* start--演示页面使用的统一样式--start */
- .u-demo {
- padding: 50rpx 40rpx;
- }
- .u-demo-wrap {
- border: 1px dashed #ddd;
- background-color: rgb(250, 250, 250);
- padding: 40rpx 20rpx;
- border-radius: 6px;
- }
- .u-demo-area {
- text-align: center;
- }
- .u-no-demo-here {
- color: $u-tips-color;
- font-size: 26rpx;
- }
- .u-demo-result-line {
- border: 1px dashed #ddd;
- padding: 10rpx 40rpx;
- margin-top: 30rpx;
- border-radius: 5px;
- background-color: rgb(240, 240, 240);
- color: $u-content-color;
- display: inline-block;
- font-size: 32rpx;
- transition: all 0.35s;
- word-break: break-word;
- text-align: left;
-
- }
- .u-demo-title,
- .u-config-title {
- text-align: center;
- font-size: 32rpx;
- font-weight: bold;
- margin-bottom: 40rpx;
- }
- .u-config-item {
- margin-top: 50rpx;
- }
- .u-config-title {
- margin-top: 40rpx;
- padding-bottom: 10rpx;
- }
- .u-item-title {
- position: relative;
- font-size: 28rpx;
- padding-left: 8px;
- line-height: 1;
- margin-bottom: 22rpx;
- }
- .u-item-title:after {
- position: absolute;
- width: 4px;
- top: -1px;
- height: 16px;
- content: '';
- left: 0;
- border-radius: 10px;
- background-color: $u-content-color;
- }
- /* end--演示页面使用的统一样式--end */
- /* start--高斯模糊tabbar底部处理--start */
- .u-blur-effect-inset {
- width: 750rpx;
- height: var(--window-bottom);
- background-color: #FFFFFF;
- }
- /* end--高斯模糊tabbar底部处理--end */
|