初始化

unpackage/dist/build/app-plus/static/css/animista.scss

@@ -0,0 +1,440 @@
+/* #ifndef APP-NVUE */
+.skeleton {
+		width: 100%;
+		height: 100%;
+		/* 以下代码实现背景动画效果 */
+		animation: loading 1.4s ease infinite !important;
+		-webkit-animation: loading 1.4s ease infinite !important;
+		background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(37%, #e3e3e3), color-stop(63%, #f0f0f0)) !important;
+		background-image: -o-linear-gradient(left, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%) !important;
+		background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%) !important;
+		background-size: 400% 100% !important;
+	}
+	//定义骨架屏宽度
+	@for $i from 0 through 100 {
+		.skeleton-width-#{$i}, .sk-w-#{$i} {
+			width: $i + vw !important;
+		}
+		.skeleton-height-#{$i}, .sk-h-#{$i} {
+			height: $i + vmax !important;
+		}
+	}
+
+	@-webkit-keyframes loading {
+		0% {
+			background-position: 100% 50%
+		}
+
+		to {
+			background-position: 0 50%
+		}
+	}
+
+	@keyframes loading {
+		0% {
+			background-position: 100% 50%
+		}
+
+		to {
+			background-position: 0 50%
+		}
+	}
+	@keyframes error-num {
+		0% {
+			transform: translateY(60px);
+			opacity: 0;
+		}
+	
+		100% {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+.fade-in {
+	-webkit-animation: fade-in .65s cubic-bezier(.39, .575, .565, 1.000) both !important;
+	animation: fade-in .65s cubic-bezier(.39, .575, .565, 1.000) both !important;
+}
+.fade-out {
+	-webkit-animation: fade-out .25s ease-out both !important;
+	animation: fade-out .25s ease-out both !important;
+}
+
+.bounce-in-top {
+	-webkit-animation: bounce-in-top 1.1s both !important;
+	animation: bounce-in-top 1.1s both !important;
+}
+
+.rotate-center {
+	-webkit-animation: rotate-center 0.6s ease-in-out both !important;
+	animation: rotate-center 0.6s ease-in-out both !important;
+}
+.slide-in-top {
+	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+.slide-out-top {
+	-webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+.slide-in-bottom {
+	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+}
+.slide-out-bottom {
+	-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both !important;
+	        animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both !important;
+}
+.slide-in-left{
+	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+		        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+}
+.slide-in-right{
+	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+		        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+}
+@-webkit-keyframes slide-out-top {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+    opacity: 0;
+  }
+}
+@keyframes slide-out-top {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+            transform: translateY(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes slide-in-left {
+						0% {
+							-webkit-transform: translateX(-100px);
+							transform: translateX(-100px);
+							opacity: 0;
+						}
+
+						100% {
+							-webkit-transform: translateX(0);
+							transform: translateX(0);
+							opacity: 1;
+						}
+					}
+
+					@keyframes slide-in-left {
+						0% {
+							-webkit-transform: translateX(-100px);
+							transform: translateX(-100px);
+							opacity: 0;
+						}
+
+						100% {
+							-webkit-transform: translateX(0);
+							transform: translateX(0);
+							opacity: 1;
+						}
+					}
+					@-webkit-keyframes slide-in-right {
+						0% {
+							-webkit-transform: translateX(100px);
+							transform: translateX(100px);
+							opacity: 0;
+						}
+					
+						100% {
+							-webkit-transform: translateX(0);
+							transform: translateX(0);
+							opacity: 1;
+						}
+					}
+					
+					@keyframes slide-in-right {
+						0% {
+							-webkit-transform: translateX(100px);
+							transform: translateX(100px);
+							opacity: 0;
+						}
+					
+						100% {
+							-webkit-transform: translateX(0);
+							transform: translateX(0);
+							opacity: 1;
+						}
+					}
+
+@-webkit-keyframes fade-in {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1
+	}
+}
+
+@-webkit-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes error-num {
+	0% {
+		transform: translateY(60px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes bounce-in-top {
+	0% {
+		-webkit-transform: translateY(-500px);
+		transform: translateY(-500px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0;
+	}
+
+	38% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+		opacity: 1;
+	}
+
+	55% {
+		-webkit-transform: translateY(-65px);
+		transform: translateY(-65px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	72% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	81% {
+		-webkit-transform: translateY(-28px);
+		transform: translateY(-28px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	90% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	95% {
+		-webkit-transform: translateY(-8px);
+		transform: translateY(-8px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+}
+
+@-webkit-keyframes bounce-in-top {
+	0% {
+		-webkit-transform: translateY(-500px);
+		transform: translateY(-500px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0;
+	}
+
+	38% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+		opacity: 1;
+	}
+
+	55% {
+		-webkit-transform: translateY(-65px);
+		transform: translateY(-65px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	72% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	81% {
+		-webkit-transform: translateY(-28px);
+		transform: translateY(-28px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	90% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	95% {
+		-webkit-transform: translateY(-8px);
+		transform: translateY(-8px);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+}
+
+@-webkit-keyframes rotate-center {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes rotate-center {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes slide-in-bottom {
+  0% {
+    -webkit-transform: translateY(1000px);
+            transform: translateY(1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-bottom {
+  0% {
+    -webkit-transform: translateY(1000px);
+            transform: translateY(1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes slide-out-bottom {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(1000px);
+            transform: translateY(1000px);
+    opacity: 0;
+  }
+}
+@keyframes slide-out-bottom {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(1000px);
+            transform: translateY(1000px);
+    opacity: 0;
+  }
+}
+/* #endif */
+
+
+
+

unpackage/dist/build/app-plus/static/css/main.scss

@@ -0,0 +1,162 @@
+/* 多行省略 */
+.multi-line-omit {
+  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
+  text-overflow: ellipsis; // 溢出用省略号显示
+  overflow: hidden; // 超出的文本隐藏
+  display: -webkit-box; // 作为弹性伸缩盒子模型显示
+  -webkit-line-clamp: 2; // 显示的行
+  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
+}
+
+/* 单行省略 */
+.one-line-omit {
+  width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
+  white-space: nowrap; // 溢出不换行
+  overflow: hidden; // 超出的文本隐藏
+  text-overflow: ellipsis; // 溢出用省略号显示
+}
+
+@mixin flex($direction: row) {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: $direction;
+}
+
+/* #ifndef APP-NVUE */
+.app {
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* #endif */
+/* #ifdef APP-NVUE */
+.app {
+  width: 750rpx;
+}
+
+/* #endif */
+.status-bar-gap {
+  padding-top: calc(88rpx + var(--status-bar-height));
+}
+
+$color: #0129D3;
+.card-wrapper {
+  background-color: #fff;
+  padding: 32rpx;
+  border-radius: 24rpx;
+}
+
+.flex-row {
+  display: flex !important;
+  align-items: center;
+  flex-direction: row !important;
+}
+
+.flex-column {
+  display: flex !important;
+  flex-direction: column;
+}
+
+.flex-between {
+  justify-content: space-between;
+}
+
+.flex-around {
+  justify-content: space-around;
+}
+
+.flex-center {
+  align-items: center;
+}
+
+.flex-start {
+  align-items: flex-start;
+}
+
+.flex-end {
+  justify-content: flex-end;
+}
+
+// 定义flex等分
+@for $i from 0 through 100 {
+  .w#{$i} {
+    width: $i + vw;
+  }
+}
+
+// 定义flex等分
+@for $i from 0 through 12 {
+  .u-flex-#{$i} {
+    flex: $i;
+  }
+}
+
+// 定义字体(px)单位，小于20都为px单位字体
+@for $i from 9 to 20 {
+  .u-font-#{$i} {
+    font-size: $i + px;
+  }
+}
+
+// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
+@for $i from 20 through 40 {
+  .u-font-#{$i} {
+    font-size: $i + rpx;
+  }
+}
+
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+  // 只要双数和能被5除尽的数
+  @if $i % 2 == 0 or $i % 5 == 0 {
+    // 得出：u-margin-30或者u-m-30
+    .u-margin-#{$i}, .u-m-#{$i} {
+      margin: $i + rpx !important;
+    }
+
+    // 得出：u-padding-30或者u-p-30
+    .u-padding-#{$i}, .u-p-#{$i} {
+      padding: $i + rpx !important;
+    }
+
+    @each $short, $long in l left, t top, r right, b bottom {
+      // 缩写版，结果如： u-m-l-30
+      // 定义外边距
+      .u-m-#{$short}-#{$i} {
+        margin-#{$long}: $i + rpx !important;
+      }
+
+      // 定义内边距
+      .u-p-#{$short}-#{$i} {
+        padding-#{$long}: $i + rpx !important;
+      }
+
+      // 完整版，结果如：u-margin-left-30
+      // 定义外边距
+      .u-margin-#{$long}-#{$i} {
+        margin-#{$long}: $i + rpx !important;
+      }
+
+      // 定义内边距
+      .u-padding-#{$long}-#{$i} {
+        padding-#{$long}: $i + rpx !important;
+      }
+    }
+  }
+}
+
+.button {
+  height: 52rpx;
+  background-color: $color;
+  color: #fff;
+  border-radius: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20rpx;
+  font-size: 26rpx;
+}
+	

unpackage/dist/build/app-plus/static/css/vue.scss

@@ -0,0 +1,65 @@
+	/* #ifndef APP-NVUE */
+		*{
+			box-sizing: border-box;
+			margin: 0;
+			padding: 0;
+		}
+		
+		.status-bar{
+			width:100vw;
+			height:var(--status-bar-height);
+			background-color: #fff;
+			position: sticky;
+			left: 0;
+			top:0;
+			z-index: 99;
+		}
+		@font-face {
+			font-family: Regular;
+			src: url('~@/static/fonts/MiSans-Regular.ttf');
+		}
+		
+		@font-face {
+			font-family: Medium;
+			src: url('~@/static/fonts/MiSans-Medium.ttf');
+		}
+		
+		@font-face {
+			font-family: Bold;
+			src: url('~@/static/fonts/MiSans-Demibold.ttf');
+		}
+		
+		@font-face {
+			font-family: DOUYU;
+			src: url('~@/static/fonts/douyuFont.otf');
+		}
+		
+		@font-face {
+			font-family: Bebas;
+			src: url('~@/static/fonts/BEBAS.ttf');
+		}
+		
+		.f-base {
+			font-family: Regular;
+		}
+		
+		.f-bold {
+			font-family: Bold !important;
+		}
+		
+		.f-medium {
+			font-family: Medium !important;
+		}
+		
+		.f-douyu {
+			font-family: DOUYU !important;
+		}
+		
+		.f-bebas {
+			font-family: Bebas !important;
+		}
+		.uni-page-head, .uni-page-wrapper, .uni-page-body,page  {
+			font-family: Regular;
+			color: #333;
+		}
+	/* #endif */