修改：优化列表动画效果

common/mixins/index.js

@@ -18,14 +18,30 @@ export default {
 				return {
 					author: HaloConfig.author,
 					_isWechat: true,
-					haloAdConfig: HaloAdConfig
+					haloAdConfig: HaloAdConfig,
+					_aniWaitIndex: 0, // 动画索引
 				};
 			},
 			computed: {
 				// 获取全局应用设置
 				globalAppSettings() {
 					return uni.$tm.vx.getters().getSettings;
+				},
+				// 计算动画索引
+				calcAniWait() {
+					return (index) => {
+						if ((index + 1) % 10 == 0) {
+							this._aniWaitIndex = 1;
+						} else {
+							this._aniWaitIndex += 1;
 						}
+						console.log('this._aniWaitIndex', this._aniWaitIndex);
+						return this._aniWaitIndex * 50
+					}
+				}
+			},
+			onLoad() {
+				this.fnResetSetAniWaitIndex()
 			},
 			created() {
 				// #ifdef MP-WEIXIN
@@ -36,7 +52,9 @@ export default {
 				this._isWechat = false;
 				// #endif
 			},
-
+			onShow() {
+				this.fnResetSetAniWaitIndex()
+			},
 			methods: {
 				/**
 				 * 设置页面标题
@@ -60,6 +78,10 @@ export default {
 							console.log('err：', err);
 						},
 					});
+				},
+				// 初始化动画索引值（需要在每个页面调用）
+				fnResetSetAniWaitIndex() {
+					this._aniWaitIndex = 0
 				}
 			},
 		});

components/cache-image/cache-image.vue

@@ -106,7 +106,6 @@
 			}
 		},
 		created() {
-			console.log('cache-image', this.url);
 			this.imgStyle = {
 				width: this.width,
 				height: this.height,

pages/tabbar/category/category.vue

@@ -12,23 +12,7 @@
 			</view>
 			<block v-else>
 				<tm-sliderNav :list="categoryList" bg-color="white" color="light-blue" rang-key="name" @change="fnOnCategoryChange"></tm-sliderNav>
-				<scroll-view
-					class="right-content pt-12 pb-12"
-					:scroll-y="true"
-					:scroll-top="scrollTop"
-					:scroll-with-animation="true"
-					:refresher-enabled="true"
-					:refresher-triggered="triggered"
-					:refresher-threshold="60"
-					refresher-background="#fafafa"
-					@refresherrefresh="fnGetData(true)"
-					@scrolltolower="fnGetData(false)"
-					@scroll="fnOnScroll"
-					@touchmove.stop
-					@touchstart="fnOnTouchStart"
-					@touchend="fnOnTouchEnd"
-					@touchcancel="fnOnTouchEnd"
-				>
+				<scroll-view class="right-content pt-12 pb-12" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" :refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="60" refresher-background="#fafafa" @refresherrefresh="fnGetData(true)" @scrolltolower="fnGetData(false)" @scroll="fnOnScroll" @touchmove.stop @touchstart="fnOnTouchStart" @touchend="fnOnTouchEnd" @touchcancel="fnOnTouchEnd">
 					<view v-if="dataList.length == 0" class="article-empty flex flex-center">
 						<tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无文章~"></tm-empty>
 					</view>
@@ -36,7 +20,7 @@
 					<block v-else>
 						<block v-for="(article, index) in dataList" :key="article.createTime">
 							<!-- 文章卡片 -->
-							<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+							<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 								<article-min-card :article="article" @on-click="fnToArticleDetail"></article-min-card>
 							</tm-translate>
 						</block>
@@ -50,16 +34,16 @@
 </template>
 
 <script>
-import throttle from '@/utils/throttle.js';
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
-import tmSliderNav from '@/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue';
+	import throttle from '@/utils/throttle.js';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
+	import tmSliderNav from '@/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue';
 
-import ArticleMinCard from '@/components/article-min-card/article-min-card.vue';
-export default {
+	import ArticleMinCard from '@/components/article-min-card/article-min-card.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmTranslate,
@@ -112,6 +96,7 @@ export default {
 		},
 		methods: {
 			fnOnCategoryChange(e) {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.slug = this.categoryList[e].slug;
 				this.fnToTopScroll();
 				this.dataList = [];
@@ -207,38 +192,43 @@ export default {
 				}, 500);
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		background-color: #fff;
-}
-.content {
+	}
+
+	.content {
 		height: 100vh;
 		background-color: #fafafa;
-}
-.category-empty {
+	}
+
+	.category-empty {
 		width: 100%;
 		height: 70vh;
-}
-.article-empty {
+	}
+
+	.article-empty {
 		width: 100%;
 		height: 70vh;
-}
-.right-content {
+	}
+
+	.right-content {
 		// width: calc(100vw - 144rpx);
 		width: calc(100vw - 190rpx);
 		height: 100vh;
 		background-color: #fff;
 		white-space: nowrap;
 		background-color: #fafafa;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
-}
+	}
 </style>

pages/tabbar/gallery/gallery.vue

@@ -74,7 +74,7 @@
 				</tm-flowLayout>
 				<block v-else>
 					<block v-for="(item, index) in dataList" :key="index">
-						<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+						<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 							<view class="round-3 shadow-2 overflow white mb-24">
 								<tm-images :previmage="false" :src="item.image" @click="fnPreview(item)"></tm-images>
 								<view class="pa-24 text-size-m">
@@ -107,17 +107,17 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
-import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
-import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
+	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
+	import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmTranslate,
@@ -197,6 +197,7 @@ export default {
 		},
 		methods: {
 			fnOnCategoryChange(index) {
+				this.fnResetSetAniWaitIndex();
 				this.dataList = [];
 				if (index == 0) {
 					this.queryParams.team = null;
@@ -289,11 +290,11 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
@@ -304,8 +305,9 @@ export default {
 		&.is-balck {
 			background-color: #212121;
 		}
-}
-.content {
+	}
+
+	.content {
 		box-sizing: border-box;
 		padding: 0 24rpx;
 		padding-top: 24rpx;
@@ -316,12 +318,14 @@ export default {
 			align-items: center;
 			justify-content: center;
 		}
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		box-sizing: border-box;
 		padding: 24rpx;
-}
-.card {
+	}
+
+	.card {
 		box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
-}
+	}
 </style>

pages/tabbar/home/home.vue

@@ -22,13 +22,7 @@
 			<view class="bg-white pb-24">
 				<!-- 轮播图+广告 -->
 				<view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length != 0">
-					<e-swiper
-						:dotPosition="globalAppSettings.banner.dotPosition"
-						:autoplay="true"
-						:useDot="globalAppSettings.banner.useDot"
-						:list="bannerList"
-						@on-click="fnOnBannerClick"
-					></e-swiper>
+					<e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true" :useDot="globalAppSettings.banner.useDot" :list="bannerList" @on-click="fnOnBannerClick"></e-swiper>
 				</view>
 				<!-- 快捷导航 -->
 				<!-- <view v-if="useQuickNav" class="quick-nav flex-between round-3 flex mt-12 ml-12 mr-12 pa-24">
@@ -73,7 +67,7 @@
 			<block v-else>
 				<view :class="globalAppSettings.layout.home">
 					<block v-for="(article, index) in articleList" :key="article.createTime">
-						<tm-translate class="ani-item" animation-name="fadeUp" :wait="(index + 1) * 50">
+						<tm-translate class="ani-item" animation-name="fadeUp" :wait="calcAniWait(index)">
 							<article-card from="home" :article="article" @on-click="fnToArticleDetail"></article-card>
 							<!-- 广告区域 -->
 							<view v-if="haloAdConfig.home.use && (index + 1) % haloAdConfig.frequency == 0" class="ad-wrap ma-24">
@@ -96,16 +90,16 @@
 </template>
 
 <script>
-import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
 
-import eSwiper from '@/components/e-swiper/e-swiper.vue';
+	import eSwiper from '@/components/e-swiper/e-swiper.vue';
 
-export default {
+	export default {
 		components: {
 			tmMenubars,
 			tmSkeleton,
@@ -140,7 +134,8 @@ export default {
 				let blogger = this.$tm.vx.getters().getBlogger;
 				blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
 				return blogger;
-		}
+			},
+
 		},
 		onLoad() {
 			this.fnSetPageTitle();
@@ -357,11 +352,11 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
@@ -379,63 +374,74 @@ export default {
 				min-width: initial;
 			}
 		}
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
-}
-.search-input {
+	}
+
+	.search-input {
 		background-color: #f5f5f5;
 		align-items: center;
 		/* #ifdef MP-WEIXIN */
 		margin-right: 24rpx;
+
 		/* #endif */
-	&_icon {
+		&_icon {}
+
+		&_text {}
 	}
-	&_text {
-	}
-}
-.show-more {
+
+	.show-more {
 		width: 42rpx;
 		height: 42rpx;
 		box-sizing: border-box;
 		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
-}
-.banner {
+	}
+
+	.banner {
 		overflow: hidden;
-}
-.quick-nav {
+	}
+
+	.quick-nav {
 		background-color: #fff;
 		box-sizing: border-box;
+
 		// box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
 		.name {
 			color: var(--main-text-color);
 		}
-}
-.category {
+	}
+
+	.category {
 		width: 94vw;
 		display: flex;
 		height: 200rpx;
 		white-space: nowrap;
 		margin: 0 24rpx;
+
 		.content {
 			display: inline-block;
 			padding-left: 24rpx;
+
 			&:first-child {
 				padding-left: 0;
 			}
 		}
+
 		.cate-empty {
 			height: inherit;
 		}
-}
+	}
 
-.page-item {
+	.page-item {
 		&_title {
 			position: relative;
 			padding-left: 24rpx;
 			font-size: 32rpx;
 			z-index: 1;
 			color: var(--main-text-color);
+
 			&:before {
 				content: '';
 				position: absolute;
@@ -448,15 +454,16 @@ export default {
 				z-index: 0;
 			}
 		}
-}
+	}
 
-.h_row_col2 {
+	.h_row_col2 {
 		display: flex;
 		flex-wrap: wrap;
 		box-sizing: border-box;
 		padding: 0 12rpx;
+
 		.ani-item {
 			width: 50%;
 		}
-}
+	}
 </style>

pages/tabbar/links/links.vue

@@ -16,22 +16,11 @@
 			<!-- 如果只有一个分组：使用列表的形式 result.length == 1 -->
 			<view v-else-if="result.length == 1" class="flex flex-col pb-24">
 				<block v-for="(link, index) in result[0].children" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<!-- 色彩版本 -->
-						<view
-							v-if="!globalAppSettings.links.useSimple"
-							class="info flex pt-24 pb-24 pl-12 pr-12"
-							:class="{ 'border-b-1': index != result[0].children.length - 1 }"
-							@click="fnOnLinkEvent(link)"
-						>
+						<view v-if="!globalAppSettings.links.useSimple" class="info flex pt-24 pb-24 pl-12 pr-12" :class="{ 'border-b-1': index != result[0].children.length - 1 }" @click="fnOnLinkEvent(link)">
 							<view class="link-logo">
-								<cache-image
-									class="link-logo_img"
-									radius="12rpx"
-									:url="link.logo"
-									:fileMd5="link.logo"
-									mode="aspectFill"
-								></cache-image>
+								<cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.logo" mode="aspectFill"></cache-image>
 							</view>
 							<view class="flex flex-col pl-30 info-detail">
 								<view class="link-card_name text-size-l text-weight-b text-red">{{ link.name }}</view>
@@ -67,28 +56,17 @@
 			<!-- 如果大于一个分组：使用联系人的索引形式 result.length > 1 -->
 			<block v-else>
 				<block v-for="(team, index) in result" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="grey-lighten-4 text  text-size-s text-weight-b px-32 py-12">{{ team.title }}</view>
 						<block v-for="(link, linkIndex) in team.children" :key="link.id">
-							<tm-translate animation-name="fadeUp" :wait="(linkIndex + 1) * 50">
+							<tm-translate animation-name="fadeUp" :wait="calcAniWait(linkIndex)">
 								<!-- 色彩版本 -->
-								<view
-									v-if="!globalAppSettings.links.useSimple"
-									class="info flex pt-24 pb-24 pl-12 pr-12"
-									:class="{
+								<view v-if="!globalAppSettings.links.useSimple" class="info flex pt-24 pb-24 pl-12 pr-12" :class="{
 										'border-b-1':
 											linkIndex != team.children.length - 1 || index == result.length - 1
-									}"
-									@click="fnOnLinkEvent(link)"
-								>
+									}" @click="fnOnLinkEvent(link)">
 									<view class="link-logo">
-										<cache-image
-											class="link-logo_img"
-											radius="12rpx"
-											:url="link.logo"
-											:fileMd5="link.logo"
-											mode="aspectFill"
-										></cache-image>
+										<cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.logo" mode="aspectFill"></cache-image>
 									</view>
 									<view class="flex flex-col pl-30 info-detail">
 										<view class="link-card_name text-size-l text-weight-b text-red">
@@ -98,12 +76,7 @@
 											<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">
 												ID：{{ link.id }}
 											</tm-tags>
-											<tm-tags
-												color=" bg-gradient-light-blue-lighten"
-												:shadow="0"
-												size="s"
-												model="fill"
-											>
+											<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">
 												{{ link.team || '暂未分组' }}
 											</tm-tags>
 										</view>
@@ -113,11 +86,7 @@
 									</view>
 								</view>
 								<!-- 简洁版本 -->
-								<view
-									v-else
-									class="link-card flex ml-24 mr-24 pt-24 pb-24"
-									@click="fnOnLinkEvent(link)"
-								>
+								<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(link)">
 									<image class="logo shadow-6" :src="link.logo" mode="aspectFill"></image>
 									<view class="info pl-24">
 										<view class="name text-size-g">{{ link.name }}</view>
@@ -137,13 +106,7 @@
 			</block>
 
 			<!-- 返回顶部 -->
-			<tm-flotbutton
-				v-if="linkTotal > 10"
-				color="light-blue"
-				@click="fnToTopPage"
-				size="m"
-				icon="icon-angle-up"
-			></tm-flotbutton>
+			<tm-flotbutton v-if="linkTotal > 10" color="light-blue" @click="fnToTopPage" size="m" icon="icon-angle-up"></tm-flotbutton>
 
 			<!-- 详情弹窗 -->
 			<tm-poup v-model="detail.show" :width="640" height="auto" position="center" :round="6">
@@ -175,12 +138,7 @@
 
 					<!-- 博客预览图 -->
 					<view class="mt-24">
-						<tm-images
-							:width="568"
-							:round="2"
-							:src="caclSiteThumbnail(detail.data.url)"
-							mode="aspectFill"
-						></tm-images>
+						<tm-images :width="568" :round="2" :src="caclSiteThumbnail(detail.data.url)" mode="aspectFill"></tm-images>
 					</view>
 				</view>
 			</tm-poup>
@@ -189,16 +147,16 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
 
-import { GetRandomNumberByRange } from '@/utils/random.js';
-export default {
+	import { GetRandomNumberByRange } from '@/utils/random.js';
+	export default {
 		components: {
 			tmSkeleton,
 			tmTranslate,
@@ -320,23 +278,24 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		background-color: #fafafd;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
 		min-height: 100vh;
-}
+	}
 
-.content {
+	.content {
 		padding: 0 24rpx;
 		padding-top: 24rpx;
 
@@ -346,17 +305,21 @@ export default {
 			align-items: center;
 			justify-content: center;
 		}
-}
-.link-card {
+	}
+
+	.link-card {
 		border-bottom: 2rpx solid #f5f5f5;
 		background-color: #ffffff;
+
 		&.one {
 			border: 0;
 			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.03);
+
 			.logo {
 				box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.1);
 			}
 		}
+
 		.logo {
 			// width: 126rpx;
 			// height: 126rpx;
@@ -370,6 +333,7 @@ export default {
 		.info {
 			width: 0;
 			flex-grow: 1;
+
 			.name {
 				white-space: nowrap;
 				overflow: hidden;
@@ -378,6 +342,7 @@ export default {
 				font-size: 30rpx;
 				font-weight: bold;
 			}
+
 			.desc {
 				white-space: nowrap;
 				overflow: hidden;
@@ -386,46 +351,55 @@ export default {
 				font-size: 28rpx;
 			}
 		}
-}
-.link-card_name {
+	}
+
+	.link-card_name {
 		// color: #303133;
 		// color: #0080fe;
-}
-.link-card_desc {
+	}
+
+	.link-card_desc {
 		font-size: 24rpx;
 		line-height: 1.6;
 		color: #303133;
-}
-.link-logo {
+	}
+
+	.link-logo {
 		width: 140rpx;
 		height: 140rpx;
+
 		&_img {
 			width: 100%;
 			height: 100%;
 		}
-}
-.poup-logo {
+	}
+
+	.poup-logo {
 		width: 140rpx;
 		height: 140rpx;
 		border-radius: 50%;
+
 		&_img {
 			width: 100%;
 			height: 100%;
 			border-radius: 50%;
 		}
-}
-.info-detail {
+	}
+
+	.info-detail {
 		width: 0;
 		flex-grow: 1;
 		justify-content: center;
-}
-.poup-desc {
+	}
+
+	.poup-desc {
 		font-size: 28rpx;
 		line-height: 1.6;
 		color: #555 !important;
-}
-.preview-site {
+	}
+
+	.preview-site {
 		width: 100%;
 		height: 300rpx;
-}
+	}
 </style>

pagesA/archives/archives.vue

@@ -18,16 +18,8 @@
 				<block v-for="(item, index) in dataList" :key="index">
 					<view class="tm-timeline-item tm-timeline-item--leftDir">
 						<view style="width: 160rpx;">
-							<view
-								:style="{ width: '24rpx', height: '24rpx' }"
-								:class="[black_tmeme ? 'bk' : '']"
-								class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4"
-							></view>
-							<view
-								:style="{ marginTop: '-24rpx' }"
-								:class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']"
-								class="grey-lighten-2"
-							></view>
+							<view :style="{ width: '24rpx', height: '24rpx' }" :class="[black_tmeme ? 'bk' : '']" class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4"></view>
+							<view :style="{ marginTop: '-24rpx' }" :class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']" class="grey-lighten-2"></view>
 						</view>
 						<view class="tm-timeline-item-content relative">
 							<view class="tm-timeline-item-left">
@@ -38,7 +30,7 @@
 								</view>
 								<block v-if="item.posts.length != 0">
 									<block v-for="(post, postIndex) in item.posts" :key="post.id">
-										<tm-translate animation-name="fadeUp" :wait="(postIndex + 1) * 50">
+										<tm-translate animation-name="fadeUp" :wait="calcAniWait(postIndex)">
 											<view class="flex post shadow-3 pa-24 mb-24" :class="[globalAppSettings.layout.cardType]" @click="fnToArticleDetail(post)">
 												<image class="post-thumbnail" :src="$utils.checkThumbnailUrl(post.thumbnail)" mode="aspectFill"></image>
 												<view class="post-info pl-20">
@@ -67,13 +59,13 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmTranslate,
@@ -115,7 +107,7 @@ export default {
 
 		methods: {
 			fnOnTabChange(index) {
-			// todo:
+				this.fnResetSetAniWaitIndex();
 				const _api = ['getMonthArchives', 'getYearArchives'];
 				this.api = _api[index];
 				this.queryParams.page = 0;
@@ -154,41 +146,47 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		background-color: #fafafd;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
-}
-.list-empty {
+	}
+
+	.list-empty {
 		width: 100vw;
 		height: 100vh;
-}
-.statistics {
+	}
+
+	.statistics {
 		background-color: #ffffff;
-}
-.e-timeline {
+	}
+
+	.e-timeline {
 		::v-deep {
-		.tm-timeline-item > view:first-child {
+			.tm-timeline-item>view:first-child {
 				width: 110rpx !important;
 			}
+
 			.tm-timeline-item-left {
 				max-width: 580rpx !important;
 				width: 100% !important;
 			}
 		}
-}
+	}
 
-.tm-timeline {
+	.tm-timeline {
 		.tm-timeline-item {
+
 			.tm-timeline-item-left,
 			.tm-timeline-item-right {
 				width: 200rpx;
@@ -201,30 +199,37 @@ export default {
 				align-items: flex-start;
 				align-content: flex-start;
 			}
+
 			.tm-timeline-jidian {
 				margin: auto;
 			}
+
 			&.tm-timeline-item--leftDir {
 				display: flex;
 				flex-flow: row;
+
 				&.endright {
 					justify-content: flex-end;
 				}
+
 				.tm-timeline-item-left,
 				.tm-timeline-item-right {
 					width: auto;
 					max-width: 400rpx;
 				}
+
 				.tm-timeline-item-boder {
 					height: 100%;
 					width: 1px;
 					margin: auto;
 				}
+
 				.tm-timeline-jidian {
 					position: relative;
 					margin: auto;
 					z-index: 2;
 				}
+
 				.tm-timeline-item-content {
 					display: flex;
 					justify-content: flex-start;
@@ -233,54 +238,65 @@ export default {
 				}
 			}
 		}
-}
+	}
 
-.post {
+	.post {
 		width: 560rpx;
 		border-radius: 12rpx;
 		background-color: #fff;
-	&.lr_image_text {
-	}
+
+		&.lr_image_text {}
+
 		&.lr_text_image {
 			.post-thumbnail {
 				order: 2;
 			}
+
 			.post-info {
 				order: 1;
 				padding-left: 0;
 				padding-right: 24rpx;
 			}
 		}
+
 		&.tb_image_text {
 			flex-direction: column;
+
 			.post-thumbnail {
 				width: 100%;
 				height: 220rpx;
 			}
+
 			.post-info {
 				width: 100%;
 				padding-left: 0;
+
 				&_title {
 					margin-top: 12rpx;
 				}
+
 				&_time {
 					.iconfont {
 						display: none;
 					}
+
 					.time-label {
 						display: inline-block;
 					}
 				}
 			}
 		}
+
 		&.tb_text_image {
 			flex-direction: column;
+
 			.post-thumbnail {
 				order: 2;
 				width: 100%;
 				height: 220rpx;
 				margin-top: 12rpx;
 			}
+
 			.post-info {
 				order: 1;
 				width: 100%;
@@ -290,51 +306,62 @@ export default {
 					.iconfont {
 						display: none;
 					}
+
 					.time-label {
 						display: inline-block;
 					}
 				}
 			}
 		}
+
 		&.only_text {
 			.post-info {
 				padding: 6rpx;
+
 				&_time {
 					margin-top: 20rpx;
+
 					.iconfont {
 						display: none;
 					}
+
 					.time-label {
 						display: inline-block;
 					}
 				}
 			}
+
 			.post-thumbnail {
 				display: none;
 			}
 		}
-}
-.post-thumbnail {
+	}
+
+	.post-thumbnail {
 		border-radius: 6rpx;
 		width: 200rpx;
 		height: 170rpx;
-}
-.post-info {
+	}
+
+	.post-info {
 		width: 0;
 		flex-grow: 1;
+
 		&_title {
 			color: #303133;
 			font-size: 28rpx;
 			font-weight: bold;
 		}
+
 		&_summary {
 			display: -webkit-box;
 			line-height: 1.6;
 		}
+
 		&_time {
 			.time-label {
 				display: none;
 			}
 		}
-}
+	}
 </style>

pagesA/articles/articles.vue

@@ -23,7 +23,7 @@
 			<block v-else>
 				<block v-for="(article, index) in dataList" :key="article.id">
 					<!-- 文章卡片 -->
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<article-card :article="article" @on-click="fnToArticleDetail"></article-card>
 						<!-- 广告区域 -->
 						<view v-if="haloAdConfig.articles.use && (index + 1) % haloAdConfig.frequency == 0" class="ad-wrap ma-24">
@@ -45,14 +45,14 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmSearch,
@@ -111,6 +111,7 @@ export default {
 		},
 		methods: {
 			fnOnTabChange(index) {
+				this.fnResetSetAniWaitIndex();
 				this.dataList = [];
 				const _sorts = {
 					0: '',
@@ -126,6 +127,7 @@ export default {
 				this.fnGetData();
 			},
 			fnOnSearch() {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.page = 0;
 				this.isLoadMore = false;
 				this.fnGetData();
@@ -177,11 +179,11 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
@@ -192,12 +194,13 @@ export default {
 		&.is-balck {
 			background-color: #212121;
 		}
-}
-.content {
+	}
+
+	.content {
 		padding-top: 24rpx;
 
 		.content-empty {
 			height: 60vh;
 		}
-}
+	}
 </style>

pagesA/category-detail/category-detail.vue

@@ -11,7 +11,7 @@
 			<block v-else>
 				<block v-for="(article, index) in dataList" :key="article.createTime">
 					<!-- 文章卡片 -->
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50"><article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)"><article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
 				</block>
 				<view class="load-text">{{ loadMoreText }}</view>
 			</block>
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import ArticleCard from '@/components/article-card/article-card.vue';
-export default {
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import ArticleCard from '@/components/article-card/article-card.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmTranslate,
@@ -119,26 +119,28 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss">
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		padding: 24rpx 0;
 		background-color: #fafafd;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 0 24rpx;
 		min-height: 100vh;
-}
-.empty {
+	}
+
+	.empty {
 		height: 60vh;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-}
+	}
 </style>

pagesA/journal/journal.vue

@@ -13,7 +13,7 @@
 			</view>
 			<block v-else>
 				<block v-for="(journal, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<!-- 日记卡片 -->
 						<journal-card :journal="journal" :useLike="true"></journal-card>
 					</tm-translate>
@@ -27,16 +27,16 @@
 </template>
 
 <script>
-import MarkdownConfig from '@/common/markdown/markdown.config.js';
-import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
-import journalCard from '@/components/journal-card/journal-card.vue';
+	import MarkdownConfig from '@/common/markdown/markdown.config.js';
+	import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
+	import journalCard from '@/components/journal-card/journal-card.vue';
 
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
 
-export default {
+	export default {
 		components: { mpHtml, tmSkeleton, tmEmpty, tmTranslate, tmFlotbutton, journalCard },
 		data() {
 			return {
@@ -114,20 +114,21 @@ export default {
 					});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		display: flex;
 		flex-direction: column;
-}
-.loading-wrap {
-}
-.app-page-content {
-}
-.content-empty {
+	}
+
+	.loading-wrap {}
+
+	.app-page-content {}
+
+	.content-empty {
 		height: 60vh;
-}
+	}
 </style>

pagesA/leaving/leaving.vue

@@ -13,18 +13,9 @@
 			</view>
 			<block v-else>
 				<block v-for="(item, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<!-- 列表项 -->
-						<comment-item
-							class="mb-12"
-							:isChild="false"
-							:comment="item"
-							:postId="sheetId"
-							:useSolid="false"
-							@on-copy="fnCopyContent"
-							@on-comment="fnToComment"
-							@on-detail="fnOnShowCommentDetail"
-						></comment-item>
+						<comment-item class="mb-12" :isChild="false" :comment="item" :postId="sheetId" :useSolid="false" @on-copy="fnCopyContent" @on-comment="fnToComment" @on-detail="fnOnShowCommentDetail"></comment-item>
 					</tm-translate>
 				</block>
 				<tm-flotbutton :offset="[16, 80]" @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
@@ -59,15 +50,7 @@
 						</view>
 
 						<block v-else>
-							<comment-item
-								v-for="(comment, index) in commentDetail.list"
-								:useSolid="false"
-								:useActions="false"
-								:key="index"
-								:isChild="false"
-								:comment="comment"
-								:postId="sheetId"
-							></comment-item>
+							<comment-item v-for="(comment, index) in commentDetail.list" :useSolid="false" :useActions="false" :key="index" :isChild="false" :comment="comment" :postId="sheetId"></comment-item>
 						</block>
 					</block>
 				</scroll-view>
@@ -77,18 +60,18 @@
 </template>
 
 <script>
-import AppKeys from '@/config/keys.js';
-import SheetConfig from '@/config/sheets.config.js';
+	import AppKeys from '@/config/keys.js';
+	import SheetConfig from '@/config/sheets.config.js';
 
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import commentItem from '@/components/comment-item/comment-item.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import commentItem from '@/components/comment-item/comment-item.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmFlotbutton,
@@ -245,26 +228,29 @@ export default {
 					});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		display: flex;
 		flex-direction: column;
 		background-color: #fafafd;
-}
-.app-page-content {
+	}
+
+	.app-page-content {
 		box-sizing: border-box;
 		// box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
-}
-.content-empty {
+	}
+
+	.content-empty {
 		width: 100%;
 		height: 60vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		box-sizing: border-box;
 		padding: 24rpx;
-}
+	}
 </style>

pagesA/tag-detail/tag-detail.vue

@@ -11,7 +11,7 @@
 			<block v-else>
 				<block v-for="(article, index) in dataList" :key="article.createTime">
 					<!-- 文章卡片 -->
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50"><article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)"><article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
 				</block>
 				<view class="load-text">{{ loadMoreText }}</view>
 			</block>
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import ArticleCard from '@/components/article-card/article-card.vue';
-export default {
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import ArticleCard from '@/components/article-card/article-card.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmTranslate,
@@ -119,26 +119,28 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss">
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		padding: 24rpx 0;
 		background-color: #fafafd;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 0 24rpx;
 		min-height: 100vh;
-}
-.empty {
+	}
+
+	.empty {
 		height: 60vh;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-}
+	}
 </style>

pagesB/articles/articles.vue

@@ -29,7 +29,7 @@
 			</view>
 			<block v-else>
 				<block v-for="(article, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<!-- 文章卡片 -->
 						<view class="article-card mt-24 bg-white pa-24 round-3">
 							<view class="thumbnail round-2" @click="fnToArticleDetail(article)">
@@ -110,17 +110,17 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmSearch,
@@ -229,10 +229,12 @@ export default {
 			},
 			// 显示分类选择
 			fnOnCategoryConfirm(e) {
+				this.fnResetSetAniWaitIndex();
 				this.category.selected = [e[0].index];
 				this.queryParams.categoryId = e[0].data.id;
 			},
 			fnOnSearch() {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.page = 0;
 				this.isLoadMore = false;
 				this.fnToTopPage();
@@ -341,11 +343,11 @@ export default {
 					.catch(err => {});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
 		display: flex;
@@ -356,31 +358,37 @@ export default {
 		&.is-balck {
 			background-color: #212121;
 		}
-}
-.app-page-content {
+	}
+
+	.app-page-content {
 		box-sizing: border-box;
+
 		.content-empty {
 			height: 60vh;
 		}
-}
+	}
 
-.article-card {
+	.article-card {
 		box-sizing: border-box;
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
+
 		.thumbnail {
 			width: 100%;
 			height: 280rpx;
+
 			&-img {
 				width: 100%;
 				height: 100%;
 				background-color: rgba(0, 0, 0, 0.03);
 			}
+
 			&-not {
 				width: 100%;
 				height: 100%;
 				background-color: rgba(0, 0, 0, 0.03);
 			}
 		}
+
 		.title {
 			overflow: hidden;
 			white-space: nowrap;
@@ -388,6 +396,7 @@ export default {
 			word-wrap: break-word;
 			word-break: break-all;
 		}
+
 		.summary {
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
@@ -396,9 +405,10 @@ export default {
 			word-wrap: break-word;
 			word-break: break-all;
 		}
+
 		.foot {
 			box-sizing: border-box;
 			border-top: 2rpx solid rgba(0, 0, 0, 0.03);
 		}
-}
+	}
 </style>

pagesB/attachment/attachment.vue

@@ -25,7 +25,7 @@
 			<block v-else>
 				<!-- 内容区域 -->
 				<block v-for="(item, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="attachment-card mb-24 flex bg-white pa-24 round-3" @click="fnShowDetail(item)">
 							<view class="cover round-3 flex flex-center" :class="[fnGetIconClass(item.mediaType)]">
 								<text class="icon iconfont">{{ item.suffix }}</text>
@@ -52,22 +52,9 @@
 					<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
 						<view class="preview-file pl-24 pr-24">
 							<!-- 图片预览 -->
-							<tm-images
-								v-if="$utils.fnCheckIsFileType('image', detail.form)"
-								:width="700"
-								:height="350"
-								:round="3"
-								:src="$utils.checkThumbnailUrl(detail.form.path)"
-								model="aspectFill"
-							></tm-images>
+							<tm-images v-if="$utils.fnCheckIsFileType('image', detail.form)" :width="700" :height="350" :round="3" :src="$utils.checkThumbnailUrl(detail.form.path)" model="aspectFill"></tm-images>
 							<!-- 视频 -->
-							<video
-								v-else-if="$utils.fnCheckIsFileType('video', detail.form)"
-								class="round-3"
-								style="width: 100%;height: 350rpx;"
-								:src="$utils.checkUrl(detail.form.path)"
-								controls
-							></video>
+							<video v-else-if="$utils.fnCheckIsFileType('video', detail.form)" class="round-3" style="width: 100%;height: 350rpx;" :src="$utils.checkUrl(detail.form.path)" controls></video>
 							<view v-else class="flex flex-center border-a-1 round-3 text-align-center text-grey-darken-1" style="height: 280rpx;background-color: #f2f2f2;">
 								该文件暂不支持预览
 							</view>
@@ -78,17 +65,7 @@
 						<tm-input :disabled="true" color="grey" title="附件位置" v-model="detail.form.type"></tm-input>
 						<tm-input :disabled="true" color="grey" title="附件大小" v-model="detail.form.sizeText"></tm-input>
 						<tm-input :disabled="true" color="grey" title="上传日期" v-model="detail.form.createTime"></tm-input>
-						<tm-input
-							:disabled="true"
-							:vertical="true"
-							:borderBottom="false"
-							input-type="textarea"
-							title="文件地址"
-							color="grey"
-							bg-color="grey-lighten-5"
-							:height="120"
-							v-model="detail.form.path"
-						>
+						<tm-input :disabled="true" :vertical="true" :borderBottom="false" input-type="textarea" title="文件地址" color="grey" bg-color="grey-lighten-5" :height="120" v-model="detail.form.path">
 							<template v-slot:default="{ title }">
 								{{ title }}
 								<tm-button text theme="light-blue" size="xs" @click="$utils.copyText(detail.form.path, '复制成功！')">复制</tm-button>
@@ -111,27 +88,27 @@
 </template>
 
 <script>
-// #ifdef APP-PLUS
-const AfDocument = uni.requireNativePlugin('Aq-ChooseFile'); // 临时替代
-// #endif
-import { getAdminAccessToken } from '@/utils/auth.js';
+	// #ifdef APP-PLUS
+	const AfDocument = uni.requireNativePlugin('Aq-ChooseFile'); // 临时替代
+	// #endif
+	import { getAdminAccessToken } from '@/utils/auth.js';
 
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
-import tmDropDownMenu from '@/tm-vuetify/components/tm-dropDownMenu/tm-dropDownMenu.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
-import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
-import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
-import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmActionSheetMenu from '@/tm-vuetify/components/tm-actionSheetMenu/tm-actionSheetMenu.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
+	import tmDropDownMenu from '@/tm-vuetify/components/tm-dropDownMenu/tm-dropDownMenu.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
+	import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
+	import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
+	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmActionSheetMenu from '@/tm-vuetify/components/tm-actionSheetMenu/tm-actionSheetMenu.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmSearch,
@@ -153,8 +130,7 @@ export default {
 				loading: 'loading',
 				filterLoading: 'loading',
 				btnOption: {
-				actions: [
-					{
+					actions: [{
 							icon: 'icon-like',
 							color: 'bg-gradient-orange-accent'
 						},
@@ -168,28 +144,23 @@ export default {
 						}
 					]
 				},
-			filterList: [
-				{
+				filterList: [{
 						title: '存储位置',
-					children: [
-						{
+						children: [{
 							title: '',
 							name: 'attachmentType',
 							model: 'radio',
 							children: []
-						}
-					]
+						}]
 					},
 					{
 						title: '文件类型',
-					children: [
-						{
+						children: [{
 							title: '',
 							name: 'mediaType',
 							model: 'radio',
 							children: []
-						}
-					]
+						}]
 					}
 				],
 				queryParams: {
@@ -307,11 +278,13 @@ export default {
 
 			// 搜索区域确定
 			fnOnConfirm(e) {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.attachmentType = e[0].children.map(x => x.id).join('') || undefined;
 				this.queryParams.mediaType = e[1].children.map(x => x.id).join('') || undefined;
 				this.fnOnSearch();
 			},
 			fnOnSearch() {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.page = 0;
 				this.dataList = [];
 				this.fnGetData();
@@ -524,12 +497,10 @@ export default {
 					case 2:
 						// 上传文件：
 						// todo:使用第三方控件
-					AfDocument.openMode(
-						{
+						AfDocument.openMode({
 								size: 1,
 								isDown: true,
-							types: [
-								{
+								types: [{
 										name: '文档',
 										value: ['doc', 'wps', 'docx', 'xls', 'xlsx', 'pdf']
 									},
@@ -681,18 +652,20 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
-}
-.filter-wrap {
+	}
+
+	.filter-wrap {
 		position: fixed;
 		left: 0;
 		right: 0;
@@ -704,30 +677,37 @@ export default {
 		/* #endif */
 		width: 100vw;
 		z-index: 6;
-}
-.page-content {
-}
-.content-empty {
+	}
+
+	.page-content {}
+
+	.content-empty {
 		width: 100vw;
 		height: 65vh;
-}
-.attachment-card {
+	}
+
+	.attachment-card {
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
+
 		.cover {
 			width: 170rpx;
 			height: 160rpx;
 			background-color: rgb(104, 136, 151);
+
 			// box-shadow: 0 6rpx 10rpx rgba(51, 154, 204, 0.2);
 			&.is-video {
 				background-color: rgb(3, 174, 252);
 			}
+
 			&.is-image {
 				background-color: #1cbcb4;
 			}
+
 			.icon {
 				font-size: 40rpx;
 				color: #fff;
 			}
+
 			.thumbnai {
 				width: 100%;
 				height: 100%;
@@ -736,6 +716,7 @@ export default {
 				border: 6rpx solid #fff;
 			}
 		}
+
 		.info {
 			width: 0;
 			flex-grow: 1;
@@ -744,24 +725,27 @@ export default {
 				font-size: 24rpx;
 			}
 		}
-}
+	}
 
-.poup-body {
+	.poup-body {
 		box-sizing: border-box;
 		height: 66vh;
-}
-.poup-content {
+	}
+
+	.poup-content {
 		width: 100%;
 		overflow: hidden;
-}
-.btn-wrap {
+	}
+
+	.btn-wrap {
 		width: 100%;
-}
-.file-name {
+	}
+
+	.file-name {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		word-wrap: break-word;
 		word-break: break-all;
-}
+	}
 </style>

pagesB/category/category.vue

@@ -16,7 +16,7 @@
 			<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="无数据"></tm-empty></view>
 			<block v-else>
 				<block v-for="(category, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="category-card flex round-3 bg-white pa-24 mb-24" @click="fnShowFormModal(category)">
 							<text class="del-icon flex flex-center" @click.stop="fnDelete(category, index)">×</text>
 							<view class="left">
@@ -52,49 +52,13 @@
 			<view class="poup-content">
 				<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑分类' : '新增分类' }}</view>
 				<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
-					<tm-input
-						required
-						:adjust-position="true"
-						:round="3"
-						:borderBottom="false"
-						title="名称"
-						bg-color="grey-lighten-5"
-						v-model="form.name"
-						placeholder="请输入分类名称"
-					></tm-input>
+					<tm-input required :adjust-position="true" :round="3" :borderBottom="false" title="名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入分类名称"></tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：页面上所显示的名称</view>
-					<tm-input
-						:borderBottom="false"
-						:adjust-position="true"
-						:round="3"
-						title="别名"
-						bg-color="grey-lighten-5"
-						v-model="form.slug"
-						placeholder="请输入分类别名"
-					></tm-input>
+					<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="别名" bg-color="grey-lighten-5" v-model="form.slug" placeholder="请输入分类别名"></tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：一般为单个分类页面的标识，最好为英文</view>
-					<tm-input
-						:borderBottom="false"
-						:adjust-position="true"
-						:round="3"
-						title="密码"
-						bg-color="grey-lighten-5"
-						v-model="form.password"
-						placeholder="请输入分类密码"
-					></tm-input>
+					<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="密码" bg-color="grey-lighten-5" v-model="form.password" placeholder="请输入分类密码"></tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：分类的访问密码</view>
-					<tm-input
-						:borderBottom="false"
-						:vertical="true"
-						:adjust-position="true"
-						inputType="textarea"
-						:round="3"
-						title="描述"
-						:height="160"
-						bg-color="grey-lighten-5"
-						v-model="form.description"
-						placeholder="请输入分类描述"
-					></tm-input>
+					<tm-input :borderBottom="false" :vertical="true" :adjust-position="true" inputType="textarea" :round="3" title="描述" :height="160" bg-color="grey-lighten-5" v-model="form.description" placeholder="请输入分类描述"></tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：分类的描述信息</view>
 					<view class="ma-30 mt-12 pb-12">
 						<view class="mb-12">
@@ -122,15 +86,15 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
-import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
-export default {
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
+	import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmButton,
@@ -334,40 +298,46 @@ export default {
 					.catch(err => {});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		.loading-error {
 			height: 65vh;
 		}
-}
-.content-empty {
+	}
+
+	.content-empty {
 		width: 100%;
 		height: 60vh;
-}
+	}
 
-.poup-content {
+	.poup-content {
 		overflow: hidden;
-}
-.poup-body {
+	}
+
+	.poup-body {
 		height: 71vh;
 		box-sizing: border-box;
 		touch-action: none;
-}
-.thumbnail {
+	}
+
+	.thumbnail {
 		width: 100%;
 		height: 260rpx;
-}
-.category-card {
+	}
+
+	.category-card {
 		position: relative;
 		box-sizing: border-box;
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
+
 		.del-icon {
 			width: 46rpx;
 			height: 46rpx;
@@ -382,6 +352,7 @@ export default {
 			font-size: 32rpx;
 			color: #fff;
 		}
+
 		.left {
 			width: 200rpx;
 			height: 190rpx;
@@ -392,21 +363,25 @@ export default {
 				background-color: #607d8b;
 			}
 		}
+
 		.right {
 			width: 0;
 			flex-grow: 1;
 			box-sizing: border-box;
+
 			.color {
 				color: #fff;
 			}
 		}
-}
+	}
 
-.desc-box {
+	.desc-box {
 		box-sizing: border-box;
+
 		.label {
 			width: 86rpx;
 		}
+
 		.value {
 			width: 0;
 			flex-grow: 1;
@@ -416,5 +391,5 @@ export default {
 			word-wrap: break-word;
 			word-break: break-all;
 		}
-}
+	}
 </style>

pagesB/comments/comments.vue

@@ -19,7 +19,7 @@
 			<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="无数据"></tm-empty></view>
 			<block v-else>
 				<block v-for="(comment, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="comment-card bg-white round-3 pt-24 pb-24">
 							<view class="head flex flex-between pl-24 pr-24">
 								<view class="left flex flex-center">
@@ -96,17 +96,7 @@
 							<view class="mb-24">评论内容</view>
 							<view class="pa-24 pt-12 pb-12 grey-lighten-5 text-grey round-3">{{ reply.data.content }}</view>
 						</view>
-						<tm-input
-							:vertical="true"
-							:borderBottom="false"
-							input-type="textarea"
-							title="我的回复"
-							bg-color="grey-lighten-5"
-							v-model="reply.form.content"
-							:height="150"
-							:focus="true"
-							:adjustPosition="true"
-						></tm-input>
+						<tm-input :vertical="true" :borderBottom="false" input-type="textarea" title="我的回复" bg-color="grey-lighten-5" v-model="reply.form.content" :height="150" :focus="true" :adjustPosition="true"></tm-input>
 					</scroll-view>
 					<view class="btn-wrap flex flex-center">
 						<!-- 审核状态 -->
@@ -129,17 +119,17 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmButton,
@@ -213,6 +203,7 @@ export default {
 		},
 		methods: {
 			fnOnTabChange(index) {
+				this.fnResetSetAniWaitIndex();
 				this.fnResetReply();
 				this.dataList = [];
 				this.queryType = ['Posts', 'Sheets', 'Journals'][index];
@@ -430,26 +421,29 @@ export default {
 					.catch(err => {});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
+
 		.loading-error {
 			height: 65vh;
 		}
-}
-.content-empty {
+	}
+
+	.content-empty {
 		width: 100%;
 		height: 60vh;
-}
+	}
 
-.comment-card {
+	.comment-card {
 		box-sizing: border-box;
 		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
 		margin-bottom: 24rpx;
@@ -461,15 +455,18 @@ export default {
 			border: 4rpx solid #fff;
 			box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.15);
 		}
+
 		.comment-content {
 			line-height: 1.6;
 		}
-}
-.poup-content {
+	}
+
+	.poup-content {
 		overflow: hidden;
-}
-.poup-body {
+	}
+
+	.poup-body {
 		height: 60vh;
 		box-sizing: border-box;
-}
+	}
 </style>

pagesB/journal/journal.vue

@@ -17,16 +17,8 @@
 			</view>
 			<block v-else>
 				<block v-for="(journal, index) in dataList" :key="journal.id">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
-						<journal-card
-							:isAdmin="true"
-							:journal="journal"
-							:useLike="false"
-							:useEdit="true"
-							:useDel="true"
-							@on-del="fnOnJournalDel"
-							@on-edit="fnOnJournalEdit"
-						></journal-card>
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
+						<journal-card :isAdmin="true" :journal="journal" :useLike="false" :useEdit="true" :useDel="true" @on-del="fnOnJournalDel" @on-edit="fnOnJournalEdit"></journal-card>
 					</tm-translate>
 				</block>
 				<tm-flotbutton :offset="[16, 80]" @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
@@ -38,13 +30,13 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmButton,
@@ -155,22 +147,25 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
+
 		.loading-error {
 			height: 40vh;
 		}
-}
-.edit-wrap {
+	}
+
+	.edit-wrap {
 		box-sizing: border-box;
 		box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
-}
+	}
 </style>

pagesB/links/links.vue

@@ -23,10 +23,12 @@
 			<view v-if="filterList.lenght == 0" class="empty"><tm-empty icon="icon-wind-cry" label="无数据"></tm-empty></view>
 			<block v-else>
 				<block v-for="(item, index) in filterList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="link-card round-3 bg-white flex flex-col mt-24 ml-24 mr-24 pa-24">
 							<view class="head flex">
-								<view class="left round-2 flex flex-col flex-center"><image class="logo round-2 " :src="item.logo" mode="aspectFill"></image></view>
+								<view class="left round-2 flex flex-col flex-center">
+									<image class="logo round-2 " :src="item.logo" mode="aspectFill"></image>
+								</view>
 								<view class="right pl-24 text-size-m">
 									<view class="title flex flex-between ">
 										<view class="name flex text-overflow mr-6 text-weight-b">
@@ -71,27 +73,9 @@
 				<view class="poup-content">
 					<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑友链' : '新增友链' }}</view>
 					<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
-						<tm-input
-							required
-							:adjust-position="true"
-							:round="3"
-							:borderBottom="false"
-							title="网站名称"
-							bg-color="grey-lighten-5"
-							v-model="form.name"
-							placeholder="请输入网站名称"
-						></tm-input>
+						<tm-input required :adjust-position="true" :round="3" :borderBottom="false" title="网站名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入网站名称"></tm-input>
 
-						<tm-input
-							required
-							:borderBottom="false"
-							:adjust-position="true"
-							:round="3"
-							title="网站地址"
-							bg-color="grey-lighten-5"
-							v-model="form.url"
-							placeholder="请输入网站地址"
-						></tm-input>
+						<tm-input required :borderBottom="false" :adjust-position="true" :round="3" title="网站地址" bg-color="grey-lighten-5" v-model="form.url" placeholder="请输入网站地址"></tm-input>
 						<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：需要加上 http://</view>
 
 						<tm-input :borderBottom="false" :round="3" bg-color="grey-lighten-5" title="网站分组" placeholder="请输入选择网站分组" :value="form.team">
@@ -101,38 +85,10 @@
 								</tm-pickers>
 							</template>
 						</tm-input>
-						<tm-input
-							input-type="number"
-							:borderBottom="false"
-							:adjust-position="true"
-							:round="3"
-							title="排序编号"
-							bg-color="grey-lighten-5"
-							v-model.number="form.priority"
-							placeholder="请输入排序"
-						></tm-input>
-						<tm-input
-							:borderBottom="false"
-							:vertical="true"
-							:adjust-position="true"
-							inputType="textarea"
-							:round="3"
-							title="网站描述"
-							:height="120"
-							bg-color="grey-lighten-5"
-							v-model="form.description"
-							placeholder="请输入描述"
-						></tm-input>
+						<tm-input input-type="number" :borderBottom="false" :adjust-position="true" :round="3" title="排序编号" bg-color="grey-lighten-5" v-model.number="form.priority" placeholder="请输入排序"></tm-input>
+						<tm-input :borderBottom="false" :vertical="true" :adjust-position="true" inputType="textarea" :round="3" title="网站描述" :height="120" bg-color="grey-lighten-5" v-model="form.description" placeholder="请输入描述"></tm-input>
 
-						<tm-input
-							:borderBottom="false"
-							:adjust-position="true"
-							:round="3"
-							title="LOGO"
-							bg-color="grey-lighten-5"
-							v-model="form.logo"
-							placeholder="请输入LOGO地址"
-						></tm-input>
+						<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="LOGO" bg-color="grey-lighten-5" v-model="form.logo" placeholder="请输入LOGO地址"></tm-input>
 						<view class="ma-30 mt-12 pb-12 bg-grey">
 							<image v-if="form.logo" class="thumbnail round-3" :src="form.logo" mode="aspectFill" @click="$utils.previewImage([form.logo])"></image>
 							<view v-else class="thumbnail round-3 text-grey grey-lighten-5 flex flex-col flex-center ">
@@ -153,18 +109,18 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
-import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
+	import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
 
-export default {
+	export default {
 		components: {
 			tmSkeleton,
 			tmButton,
@@ -217,6 +173,7 @@ export default {
 		},
 		methods: {
 			fnOnTabChange(index) {
+				this.fnResetSetAniWaitIndex();
 				this.fnToTopPage();
 				let _filterData = [];
 				if (index == 0) {
@@ -373,32 +330,38 @@ export default {
 					.catch(err => {});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
+
 		.loading-error {
 			height: 65vh;
 		}
-}
-.link-card {
+	}
+
+	.link-card {
 		box-sizing: border-box;
 		box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
+
 		.head {
 			.left {
 				width: 166rpx;
 				height: 166rpx;
+
 				.logo {
 					width: 100%;
 					height: 100%;
 				}
 			}
+
 			.right {
 				width: 0;
 				flex-grow: 1;
@@ -409,38 +372,44 @@ export default {
 					display: flex;
 					align-items: center;
 				}
+
 				.label {
 					width: 84rpx;
 				}
+
 				.value {
 					width: 0;
 					flex-grow: 1;
 				}
 			}
 		}
+
 		.foot {
 			box-sizing: border-box;
 			// border-top: 2rpx solid rgba(0, 0, 0, 0.03);
 		}
-}
+	}
 
-.poup-content {
+	.poup-content {
 		overflow: hidden;
-}
-.poup-body {
+	}
+
+	.poup-body {
 		height: 71vh;
 		box-sizing: border-box;
 		touch-action: none;
-}
-.thumbnail {
+	}
+
+	.thumbnail {
 		width: 100%;
 		height: 260rpx;
-}
+	}
 
-.update-btn {
+	.update-btn {
 		background-color: rgba(240, 250, 255, 1);
-}
-.del-btn {
+	}
+
+	.del-btn {
 		background-color: rgba(254, 241, 240, 1) !important;
-}
+	}
 </style>

pagesB/logs/logs.vue

@@ -12,7 +12,7 @@
 
 			<block v-else>
 				<block v-for="(item, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="card mb-24 bg-white pa-24 round-3">
 							<view class="border-b-1 pb-20 text-size-l text-weight-b">
 								<tm-tags :dense="true" :shadow="0" color="bg-gradient-light-blue-accent" size="s" model="fill">ID：{{ item.id }}</tm-tags>
@@ -59,13 +59,13 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-export default {
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmEmpty,
@@ -263,30 +263,35 @@ export default {
 					.catch(err => {});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
-}
-.page-content {
-}
-.content-empty {
+	}
+
+	.page-content {}
+
+	.content-empty {
 		width: 100vw;
 		height: 65vh;
-}
-.card {
+	}
+
+	.card {
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
-}
-.desc-item {
+	}
+
+	.desc-item {
 		.desc-label {
 			width: 150rpx;
 			position: relative;
+
 			&::after {
 				content: '：';
 				position: absolute;
@@ -294,10 +299,11 @@ export default {
 				top: 0rpx;
 			}
 		}
+
 		.desc-value {
 			word-wrap: break-word;
 			word-break: break-all;
 			padding-left: 6rpx;
 		}
-}
+	}
 </style>

pagesB/photos/photos.vue

@@ -1,17 +1,7 @@
 <template>
 	<view class="app-page flex flex-col">
 		<view class="e-fixed shadow-2 bg-white">
-			<tm-search
-				:clear="true"
-				v-model="queryParams.keyword"
-				:round="24"
-				:shadow="0"
-				confirmText="搜索"
-				color="light-blue"
-				insertColor="light-blue"
-				align="center"
-				@confirm="fnOnSearch()"
-			></tm-search>
+			<tm-search :clear="true" v-model="queryParams.keyword" :round="24" :shadow="0" confirmText="搜索" color="light-blue" insertColor="light-blue" align="center" @confirm="fnOnSearch()"></tm-search>
 			<tm-tabs v-if="team.list.length != 0" color="light-blue" :shadow="0" v-model="team.activeIndex" :list="team.list" align="center" @change="fnOnTabChange"></tm-tabs>
 		</view>
 
@@ -35,7 +25,7 @@
 			<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无任何图片"></tm-empty></view>
 			<block v-else>
 				<block v-for="(item, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="card mb-24 flex flex-col bg-white pa-24 round-3">
 							<view class="thumbnail round-2" @click="fnPreview(item, index)">
 								<image class="thumbnail-img round-2" :src="item.showThumbnail" mode="aspectFill"></image>
@@ -66,99 +56,23 @@
 			<view class="poup-content">
 				<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑图片' : '新增图片' }}</view>
 				<scroll-view :enable-flex="true" class="poup-body pa-24 pt-0 pb-0" :scroll-y="true" :scroll-top="poupBodyScrollTop" @touchmove.stop @scroll="fnOnPoupBodyScroll">
-					<tm-input
-						:adjust-position="true"
-						:round="3"
-						clear
-						:borderBottom="false"
-						title="图片名称"
-						bg-color="grey-lighten-5"
-						v-model="form.name"
-						placeholder="请输入图片名称"
-					></tm-input>
+					<tm-input :adjust-position="true" :round="3" clear :borderBottom="false" title="图片名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入图片名称"></tm-input>
 
-					<tm-input
-						name="team"
-						:adjust-position="true"
-						:round="3"
-						bg-color="grey-lighten-5"
-						:borderBottom="false"
-						title="图片分组"
-						placeholder="请选择输入或分组"
-						v-model="form.team"
-					>
+					<tm-input name="team" :adjust-position="true" :round="3" bg-color="grey-lighten-5" :borderBottom="false" title="图片分组" placeholder="请选择输入或分组" v-model="form.team">
 						<tm-pickers slot="rightBtn" rang-key="name" :default-value.sync="team.selected" :list="team.selectList" @confirm="fnOnSelectTeamConfirm">
 							<tm-button size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent">选择</tm-button>
 						</tm-pickers>
 					</tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：图片分组可选择，也可以输入新的分组名称</view>
-					<tm-pickersDate
-						:full-number="true"
-						:show-detail="{ year: true, month: true, day: true, hour: true, min: true, sec: true }"
-						:default-value="takeTime"
-						@confirm="fnOnTakeTimeConfirm"
-					>
-						<tm-input
-							title="拍摄时间"
-							:adjust-position="true"
-							:round="3"
-							bg-color="grey-lighten-5"
-							:borderBottom="false"
-							placeholder="请选择拍摄时间"
-							disabled
-							:value="takeTime"
-						></tm-input>
+					<tm-pickersDate :full-number="true" :show-detail="{ year: true, month: true, day: true, hour: true, min: true, sec: true }" :default-value="takeTime" @confirm="fnOnTakeTimeConfirm">
+						<tm-input title="拍摄时间" :adjust-position="true" :round="3" bg-color="grey-lighten-5" :borderBottom="false" placeholder="请选择拍摄时间" disabled :value="takeTime"></tm-input>
 					</tm-pickersDate>
-					<tm-input
-						:borderBottom="false"
-						:adjust-position="true"
-						:round="3"
-						clear
-						title="拍摄地点"
-						bg-color="grey-lighten-5"
-						v-model="form.location"
-						placeholder="请输入拍摄地点"
-					></tm-input>
-					<tm-input
-						:borderBottom="false"
-						:vertical="false"
-						clear
-						:adjust-position="true"
-						inputType="textarea"
-						:round="3"
-						title="图片描述"
-						:height="160"
-						bg-color="grey-lighten-5"
-						v-model="form.description"
-						placeholder="请输入图片描述"
-					></tm-input>
-					<tm-input
-						name="url"
-						clear
-						:borderBottom="false"
-						:adjust-position="true"
-						:round="3"
-						title="图片地址"
-						bg-color="grey-lighten-5"
-						v-model="form.url"
-						placeholder="请输入或选择图片"
-						@clear="fnOnUrlInputChange"
-						@blur="fnOnUrlInputChange"
-						@input="fnOnUrlInputChange"
-					>
+					<tm-input :borderBottom="false" :adjust-position="true" :round="3" clear title="拍摄地点" bg-color="grey-lighten-5" v-model="form.location" placeholder="请输入拍摄地点"></tm-input>
+					<tm-input :borderBottom="false" :vertical="false" clear :adjust-position="true" inputType="textarea" :round="3" title="图片描述" :height="160" bg-color="grey-lighten-5" v-model="form.description" placeholder="请输入图片描述"></tm-input>
+					<tm-input name="url" clear :borderBottom="false" :adjust-position="true" :round="3" title="图片地址" bg-color="grey-lighten-5" v-model="form.url" placeholder="请输入或选择图片" @clear="fnOnUrlInputChange" @blur="fnOnUrlInputChange" @input="fnOnUrlInputChange">
 						<tm-button slot="rightBtn" size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent" @click="fnShowAttachmentsSelect('url')">选择</tm-button>
 					</tm-input>
-					<tm-input
-						name="thumbnail"
-						:borderBottom="false"
-						:adjust-position="true"
-						:round="3"
-						clear
-						title="缩略图片"
-						bg-color="grey-lighten-5"
-						v-model="form.thumbnail"
-						placeholder="请输入或选择缩略图"
-					>
+					<tm-input name="thumbnail" :borderBottom="false" :adjust-position="true" :round="3" clear title="缩略图片" bg-color="grey-lighten-5" v-model="form.thumbnail" placeholder="请输入或选择缩略图">
 						<tm-button slot="rightBtn" size="m" :dense="true" :shadow="0" theme="bg-gradient-light-blue-accent" @click="fnShowAttachmentsSelect('thumbnail')">
 							选择
 						</tm-button>
@@ -181,21 +95,21 @@
 </template>
 
 <script>
-import throttle from '@/utils/throttle.js';
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
-import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
-import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
+	import throttle from '@/utils/throttle.js';
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
+	import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
+	import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
 
-import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
-export default {
+	import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmButton,
@@ -297,12 +211,14 @@ export default {
 					.catch(err => {});
 			},
 			fnOnSearch() {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.page = 0;
 				this.isLoadMore = false;
 				this.fnToTopPage();
 				this.fnGetData();
 			},
 			fnOnTabChange(index) {
+				this.fnResetSetAniWaitIndex();
 				this.queryParams.team = index == 0 ? undefined : this.team.list[index];
 				this.queryParams.page = 0;
 				this.dataList = [];
@@ -511,43 +427,50 @@ export default {
 				});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		padding: 24rpx;
+
 		.loading-error {
 			height: 65vh;
 		}
-}
-.btn-wrap {
+	}
+
+	.btn-wrap {
 		box-sizing: border-box;
 		padding-top: 12rpx;
 		padding-bottom: 12rpx;
 		box-shadow: 0rpx -4rpx 24rpx rgba(0, 0, 0, 0.05);
-}
-.card {
+	}
+
+	.card {
 		box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.05);
-}
-.thumbnail {
+	}
+
+	.thumbnail {
 		width: 100%;
+
 		&-img {
 			width: 100%;
 			height: 300rpx;
 		}
-}
+	}
 
-.poup-content {
+	.poup-content {
 		overflow: hidden;
-}
-.poup-body {
+	}
+
+	.poup-body {
 		height: 69vh;
 		box-sizing: border-box;
 		touch-action: none;
-}
+	}
 </style>

pagesB/tags/tags.vue

@@ -14,7 +14,7 @@
 			<view v-if="dataList.length == 0" class="content-empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="无数据"></tm-empty></view>
 			<block v-else>
 				<block v-for="(tag, index) in dataList" :key="index">
-					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
 						<view class="tags-card flex round-3 bg-white pa-24 mb-24" @click="fnShowFormModal(tag)">
 							<text class="del-icon flex flex-center" @click.stop="fnDelete(tag, index)">×</text>
 							<view class="left">
@@ -46,36 +46,11 @@
 			<view class="poup-content">
 				<view class="poup-head text-align-center text-weight-b text-size-g ma-24">{{ form.id != undefined ? '编辑标签' : '新增标签' }}</view>
 				<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
-					<tm-input
-						required
-						:adjust-position="true"
-						:round="3"
-						:borderBottom="false"
-						title="名称"
-						bg-color="grey-lighten-5"
-						v-model="form.name"
-						placeholder="请输入标签名称"
-					></tm-input>
+					<tm-input required :adjust-position="true" :round="3" :borderBottom="false" title="名称" bg-color="grey-lighten-5" v-model="form.name" placeholder="请输入标签名称"></tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：页面上所显示的名称</view>
-					<tm-input
-						:borderBottom="false"
-						:adjust-position="true"
-						:round="3"
-						title="别名"
-						bg-color="grey-lighten-5"
-						v-model="form.slug"
-						placeholder="请输入标签别名"
-					></tm-input>
+					<tm-input :borderBottom="false" :adjust-position="true" :round="3" title="别名" bg-color="grey-lighten-5" v-model="form.slug" placeholder="请输入标签别名"></tm-input>
 					<view class="pl-32 mb-24 input-tips text-grey text-size-s">填写提示：一般为单个标签页面的标识，最好为英文</view>
-					<tm-input
-						bg-color="grey-lighten-5"
-						:border-bottom="false"
-						:adjust-position="true"
-						:round="3"
-						title="颜色"
-						placeholder="点击右侧选择标签颜色"
-						v-model="form.color"
-					>
+					<tm-input bg-color="grey-lighten-5" :border-bottom="false" :adjust-position="true" :round="3" title="颜色" placeholder="点击右侧选择标签颜色" v-model="form.color">
 						<template v-slot:rightBtn>
 							<tm-button class="ml-12" theme="bg-gradient-blue-accent" :round="3" :font-size="24" :height="66" block :width="120" @click="fnSelectColor">
 								选择颜色
@@ -108,18 +83,18 @@
 </template>
 
 <script>
-import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
-import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
-import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
-import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
-import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
-import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
-import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
-import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
-export default {
+	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
+	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
+	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
+	import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
+	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
+	import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
+	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
+	import AttachmentSelect from '@/components/attachment-select/attachment-select.vue';
+	export default {
 		components: {
 			tmSkeleton,
 			tmButton,
@@ -319,39 +294,45 @@ export default {
 					.catch(err => {});
 			}
 		}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.app-page {
+	.app-page {
 		width: 100vw;
 		min-height: 100vh;
-}
-.loading-wrap {
+	}
+
+	.loading-wrap {
 		.loading-error {
 			height: 65vh;
 		}
-}
-.content-empty {
+	}
+
+	.content-empty {
 		width: 100%;
 		height: 60vh;
-}
+	}
 
-.poup-content {
+	.poup-content {
 		overflow: hidden;
-}
-.poup-body {
+	}
+
+	.poup-body {
 		height: 58vh;
 		box-sizing: border-box;
-}
-.thumbnail {
+	}
+
+	.thumbnail {
 		width: 100%;
 		height: 260rpx;
-}
-.tags-card {
+	}
+
+	.tags-card {
 		position: relative;
 		box-sizing: border-box;
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
+
 		.del-icon {
 			width: 46rpx;
 			height: 46rpx;
@@ -366,6 +347,7 @@ export default {
 			font-size: 32rpx;
 			color: #fff;
 		}
+
 		.left {
 			width: 160rpx;
 			height: 140rpx;
@@ -377,11 +359,13 @@ export default {
 				background-color: #607d8b;
 			}
 		}
+
 		.right {
 			box-sizing: border-box;
+
 			.color {
 				color: #fff;
 			}
 		}
-}
+	}
 </style>