前端UNIAPP/tuniao-ui/index.scss
// 引入公共基础类
@import './libs/css/main.scss';
@import './libs/css/color.scss';

// 小程序特有的样式
/* #ifdef MP */
@import "./libs/css/style.mp.scss";
/* #endif */

// H5特有的样式
/* #ifdef H5 */
@import "./libs/css/style.h5.scss";
/* #endif */


 .tn-custom-nav-bar__back {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 1000rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.5);
      color: #FFFFFF;
      font-size: 18px;
      
      .icon {
        display: block;
        flex: 1;
        margin: auto;
        text-align: center;
      }
      
      &:before {
        content: " ";
        width: 1rpx;
        height: 110%;
        position: absolute;
        top: 22.5%;
        left: 0;
        right: 0;
        margin: auto;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        opacity: 0.7;
        background-color: #FFFFFF;
      }
    }
    /* 图标容器9 start */
    .icon9 {
    	&__item {
    		width: 30%;
    		background-color: #FFFFFF;
    		border-radius: 10rpx;
    		padding: 30rpx;
    		margin: 20rpx 10rpx;
    		transform: scale(1);
    		transition: transform 0.3s linear;
    		transform-origin: center center;
    
    		&--icon {
    			width: 110rpx;
    			height: 110rpx;
    			font-size: 65rpx;
    			border-radius: 50%;
    			margin: 20rpx 40rpx;
    			position: relative;
    			z-index: 1;
    
    			&::after {
    				content: " ";
    				position: absolute;
    				z-index: -1;
    				width: 100%;
    				height: 100%;
    				left: 0;
    				bottom: 0;
    				border-radius: inherit;
    				opacity: 1;
    				transform: scale(1, 1);
    				background-size: 100% 100%;
    				background-image: url(/static/icon_bg5.png);
    			}
    		}
    	}
    }
	
	
	/* 渐变*/
	.tn-navbg {
	    margin: 0; 
	    color: #fff; 
	    background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
	    /* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
	    /* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
	    /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
	    background-size: 500% 500%; 
	    animation: gradientBG 15s ease infinite; 
	} 
	
	
	.dk-lv{
		background-image: repeating-linear-gradient(45deg, #892FE8, #5F4FD9);
		border-radius: 2500px !important;
		font-size: 12px;	
	      padding: 1px 10px;
	      margin: 5px 5px;
		  color: #ffffff;
		  
	}
	.dk-top-10{
	margin-top: 4px;
	}
.dk-text-over{ overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.dk-text-over2{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.dk-text-over3{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.dk-head-body {
    position: relative;
    z-index: 1;
    margin: 10px 15px;
    margin-top: -180px;
}
  .dk-head-backgroup {
    height: 350rpx;
    z-index: -1;
	background-color: white;
  
    .backgroud-image {
      width: 100%;
      height: 350rpx;
      // z-index: -1;
    }
  }
  
  
  /* 移动背景部分 start*/
  .bg-contaniner {
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    --text-color: hsl(0 95% 60%);
    --bg-color: hsl(0 0% 100%);
    --bg-size: 750rpx;
    height: 30%;
    display: grid;
    place-items: center;
    place-content: center;
    overflow: hidden;
    background-color: #4392F4;
    z-index: -1;
  }
  
  .bg-contaniner::before {
    --size: 150vmax;
  
    grid-area: body;
    content: "";
    inline-size: var(--size);
    block-size: var(--size);
    background-image: url("https://tnuiimage.tnkjapp.com/animate/health.png");
    background-size: var(--bg-size);
    background-repeat: repeat;
    transform: rotate(0deg);
    opacity: 0.15;
    animation: bg 6s linear infinite;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .bg-contaniner::before {
      animation-duration: 0s;
    }
  }
  
  @keyframes bg {
    to {
      background-position: 0 calc(var(--bg-size) * -1);
    }
  }
  /* 移动背景部分 end*/