123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374 |
- $app-base-bg: #F2F2F2;
- $app-base-color: #F76454;
- $app-sec-text-color: #999999;
- $app-main-text-color: #333333;
- $app-tabbar-height: 98rpx;
- $app-nav-height: 128rpx;
- $app-item-height: 90rpx;
- $app-item-line-height: 2rpx;
- $app-item-padding-width: 30rpx;
- @import 'uview-ui/theme.scss';
- @mixin page {
- height: 100%;
- box-sizing: border-box;
- flex-direction: column;
- background: $app-base-bg;
-
- .content {
- flex: 1;
- height: 100%;
- position: relative;
- box-sizing: border-box;
- }
- }
- @mixin flex($c: row) {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: $c;
- }
- .app-item {
- @include flex();
- font-size: 32rpx;
- position: relative;
- background: #FFFFFF;
- box-sizing: border-box;
- min-height: $app-item-height;
- justify-content: space-between;
- padding: 0 $app-item-padding-width;
- margin-bottom: $app-item-line-height;
- &.item-space {
- margin-top: 10rpx;
- }
- input, picker, textarea {
- height: 100%;
- width: 521rpx;
- font-size: 26rpx;
- text-align: left;
- color: $app-sec-text-color;
- }
- }
- .kingkong {
- height: 346rpx;
- margin-top: 10rpx;
- navigator {
- width: 25%;
- height: 50%;
- float: left;
- display: flex;
- align-items: center;
- flex-direction: column;
- image {
- width: 88rpx;
- height: 88rpx;
- margin-top: 30rpx;
- border-radius: 50%;
- }
- text {
- font-size: 32rpx;
- margin-top: 12rpx;
- }
- }
- }
- .big-btn {
- @include flex();
- width: 630rpx;
- height: 88rpx;
- font-size: 34rpx;
- margin: 88rpx auto 0;
- border-radius: 44rpx;
- color: $app-base-color;
- border:2px solid $app-base-color;
- &.bg {
- color: #FFFFFF;
- background: $app-base-color;
- }
- }
- .small-btn {
- @include flex();
- padding: 0 14rpx;
- font-size: 26rpx;
- margin-left: 10rpx;
- color: $app-base-color;
- height: 48rpx!important;
- min-width: 106rpx!important;
- border: 2rpx solid $app-base-color;
- &.dank {
- color: $app-sec-text-color;
- border-color: $app-sec-text-color;
- }
- }
- .login-btn {
- flex: 1;
- width: 100%;
- height: 100%;
- background: #FFFFFF;
- navigator {
- @include flex();
- top: 50%;
- left: 50%;
- width: 400rpx;
- height: 88rpx;
- color: #FFFFFF;
- position: fixed;
- font-size: 32rpx;
- border-radius: 10rpx;
- background: $app-base-color;
- transform: translate(-50%, -50%);
- }
- }
- .ellipsis {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .icon-right {
- margin-right: 20rpx;
- }
- .border-right {
- border-right: 1rpx solid $app-base-bg;
- }
- .level-name {
- @include flex();
- width: 130rpx;
- height: 36rpx;
- color: #FFFFFF;
- font-size: 16rpx!important;
- border-radius: 18rpx;
- background: $app-base-color;
- .cuIcon-crownfill {
- margin-right: 6rpx;
- }
- }
- .position-center {
- left: 50%;
- top: 50%;
- position: absolute;
- transform: translate(-50%, -50%);
- }
- .data-card {
- @include flex();
- width: 100%;
- height: 336rpx;
- position: relative;
- background: $app-base-bg;
- image {
- z-index: 0;
- width: 706rpx;
- height: 316rpx;
- }
- .data-card-text {
- width: 100%;
- height: 100%;
- @include flex(column);
- .text {
- color: #FFFFFF;
- font-size: 32rpx;
- }
- .num {
- color: #FFFFFF;
- font-size: 70rpx;
- margin-top: 60rpx;
- }
- }
- }
- .basecolor {
- color: $app-base-color
- }
- .swiper-nav { // 滑动切换导航
- @include flex();
- width: 100%;
- height: 84rpx;
- color: #666666;
- font-size: 32rpx;
- position: relative;
- background: #FFFFFF;
- box-sizing: border-box;
- border-bottom: 1rpx solid $app-base-bg;
- .item {
- @include flex();
- flex: 1;
- height: 100%;
- &.active {
- color: $app-base-color;
- }
- }
- .moveBar {
- @include flex();
- bottom: 0;
- height: 6rpx;
- position: absolute;
- > text {
- width: 100%;
- height: 100%;
- border-radius: 3rpx;
- background: $app-base-color;
- }
- }
- }
- .swiper-area {
- flex: 1;
- width: 100%;
- swiper {
- width: 100%;
- height: 100%;
- }
- }
- .article-header {
- @include flex();
- height: 120rpx;
- justify-content: space-between;
- border-bottom: 1rpx solid $app-base-bg;
- .head-pic {
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- }
- .name {
- @include flex();
- flex: 1;
- height: 100%;
- margin-left: 20rpx;
- justify-content: flex-start;
- .identity {
- @include flex();
- width: 56rpx;
- height: 28rpx;
- color: #FFFFFF;
- font-size: 20rpx;
- margin-left: 20rpx;
- border-radius: 8rpx;
- background: $app-base-color;
- }
- }
- .time {
- font-size: 24rpx;
- color: #999999;
- &.justnow {
- color: $app-base-color;
- }
- }
- }
- .article-footer {
- @include flex();
- height: 90rpx;
- border-top: 1rpx solid $app-base-bg;
- .footer-item {
- @include flex();
- flex: 1;
- height: 40rpx;
- &.center {
- border-left: 1rpx solid #CCCCCC;
- border-right: 1rpx solid #CCCCCC;
- }
- .icon-right {
- font-size: 40rpx;
- &.fill {
- color: $app-base-color;
- }
- }
- }
- }
- $base-color: #fb231f;
- $base-line-bg: linear-gradient(93deg, #ff232c 0%, #ff571b 100%);
- $gary-bg:#F9F9FB;
- $uni-color-primary: #007aff;
- $uni-color-success: #4cd964;
- $uni-color-warning: #f0ad4e;
- $uni-color-error: #dd524d;
- $uni-text-color:#333;
- $uni-text-color-inverse:#fff;
- $uni-text-color-grey:#999;
- $uni-text-color-placeholder: #808080;
- $uni-text-color-disable:#c0c0c0;
- $uni-bg-color:#ffffff;
- $uni-bg-color-grey:#f8f8f8;
- $uni-bg-color-hover:#f1f1f1;
- $uni-bg-color-mask:rgba(0, 0, 0, 0.4);
- $uni-border-color:#c8c7cc;
- $uni-font-size-sm:24upx;
- $uni-font-size-base:28upx;
- $uni-font-size-lg:32upx;
- $uni-img-size-sm:40upx;
- $uni-img-size-base:52upx;
- $uni-img-size-lg:80upx;
- $uni-border-radius-sm: 4upx;
- $uni-border-radius-base: 6upx;
- $uni-border-radius-lg: 12upx;
- $uni-border-radius-circle: 50%;
- $uni-spacing-row-sm: 10px;
- $uni-spacing-row-base: 20upx;
- $uni-spacing-row-lg: 30upx;
- $uni-spacing-col-sm: 8upx;
- $uni-spacing-col-base: 16upx;
- $uni-spacing-col-lg: 24upx;
- $uni-opacity-disabled: 0.3;
- $uni-color-title: #2C405A;
- $uni-font-size-title:40upx;
- $uni-color-subtitle: #555555;
- $uni-font-size-subtitle:36upx;
- $uni-color-paragraph: #3F536E;
- $uni-font-size-paragraph:30upx;
|