chore：97数字跳动的显示正常

components-diy/diy-digit.vue

@@ -1,38 +1,25 @@
-<template>
+<template>
 	<view :style="componentStyle" data-component-name="diy-digit">
 		<scroll-view :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
 			:scroll-x="value.showStyle == 'singleSlide'">
 			<view class="uni-scroll-view-content">
 				<view v-for="(item, index) in value.list" :key="index"
 					:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
-					:style="{ width: (100 / value.rowCount + '%') + ';' }">
+					:style="itemStyle">
-				<view style="display:flex;">
+					<view :style="innerWrapStyle">
-				<view :style="{
+					<view :style="innerRowStyle">
-					'display': 'flex;',
+							<uv-count-to :ref="`countTo-${index}`" :autoplay="true" :startVal="30" :endVal="item.title"
-					'align-items': 'baseline;',
+								:decimals="getvalue(item.title)" decimal="."
-					'line-height': '1.2;'
+								:color="value.font.titlecolor"
-				}">
+								:fontSize="titleFontSize"
-						<uv-count-to :ref="`countTo-${index}`" :autoplay="true" :startVal="30" :endVal="item.title"
+								:bold="isBold(value.font.weight)"></uv-count-to>
-							:decimals="getvalue(item.title)" decimal="."
+							<text :style="unitStyle">{{ item.unit }}</text>
-							:color="value.font.titlecolor"
+						</view>
-							:fontSize="value.font.titlesize || 22"
-							:bold="isBold(value.font.weight)"></uv-count-to>
-				<text :style="{
-					'margin-left': '4rpx;',
-					'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
-					'font-weight': value.font.weight + ';',
-					'color': value.font.unitcolor + ';'
-				}">{{ item.unit }}</text>
 					</view>
-				</view>
+						<view class="graphic-text">
-					<view class="graphic-text">
+							<text :style="descStyle">{{ item.desc }}</text>
-						<text :style="{
+						</view>
-							'font-size': (value.font.descsize * 2 + 'rpx') + ';',
-							'font-weight': value.font.weight + ';',
-							'color': value.font.desccolor + ';'
-						}">{{ item.desc }}</text>
 					</view>
-				</view>
 			</view>
 		</scroll-view>
 		<ns-login ref="login"></ns-login>
@@ -56,10 +43,20 @@ export default {
 			pageWidth: '',
 			indicatorDots: false,
 			swiperCurrent: 0
+			// #ifndef MP
+			,windowWidth: 375
+			// #endif
 		}
 	},
 	created() {
 		// 组件创建时的逻辑
+		// #ifndef MP
+		try {
+			let info = uni.getSystemInfoSync();
+			this.windowWidth = info.windowWidth || info.screenWidth || 375;
+			if (this.windowWidth > 960) this.windowWidth = 375;
+		} catch (e) { }
+		// #endif
 	},
 	watch: {
 		componentRefresh(newValue) {
@@ -67,6 +64,42 @@ export default {
 		}
 	},
 	computed: {
+		// 全部返回字符串：WeChat 小程序的 style="{{obj}}" 对象绑定不会被运行时正确解析为内联 CSS
+		//（参考 diy-graphic-nav.vue：那里同样用字符串拼接 style="{{'width:...%'}}"，能正常生效）。
+		// 字符串既能被 MP 直接当 cssText，也能被 H5 的 CSSOM 正确解析。
+		itemStyle() {
+			return 'width:' + (100 / this.value.rowCount) + '%;';
+		},
+		innerWrapStyle() {
+			return 'display:flex;justify-content:center;align-items:center;width:100%;';
+		},
+		innerRowStyle() {
+			return 'display:flex;align-items:baseline;justify-content:center;width:100%;line-height:1.2;';
+		},
+		unitStyle() {
+			// #ifdef MP
+			return 'margin-left:4rpx;font-size:' + (this.value.font.unitsize * 2) + 'rpx;font-weight:' + this.value.font.weight + ';color:' + this.value.font.unitcolor + ';';
+			// #endif
+			// #ifndef MP
+			return 'margin-left:' + this.rpxToPx(4) + 'px;font-size:' + this.rpxToPx((Number(this.value.font.unitsize) || 12) * 2) + 'px;font-weight:' + this.value.font.weight + ';color:' + this.value.font.unitcolor + ';';
+			// #endif
+		},
+		descStyle() {
+			// #ifdef MP
+			return 'font-size:' + (this.value.font.descsize * 2) + 'rpx;font-weight:' + this.value.font.weight + ';color:' + this.value.font.desccolor + ';';
+			// #endif
+			// #ifndef MP
+			return 'font-size:' + this.rpxToPx((Number(this.value.font.descsize) || 12) * 2) + 'px;font-weight:' + this.value.font.weight + ';color:' + this.value.font.desccolor + ';';
+			// #endif
+		},
+		titleFontSize() {
+			// #ifdef MP
+			return this.value.font.titlesize || 22;
+			// #endif
+			// #ifndef MP
+			return this.rpxToPx((Number(this.value.font.titlesize) || 22) * 2);
+			// #endif
+		},
 		componentStyle() {
 			let style = '';
 			style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
@@ -85,6 +118,15 @@ export default {
 		}
 	},
 	methods: {
+		// #ifndef MP
+		// rpx -> px：H5 行内样式里的 rpx 不生效，统一换算成 px
+		rpxToPx(rpx) {
+			let num = Number(rpx) || 0;
+			if (!num) return 0;
+			return Math.round((num * (this.windowWidth || 375) / 750) * 100) / 100;
+		},
+		// #endif
+
 		// 获取小数位数
 		getvalue(value) {
 			return value % 1 !== 0 ? 2 : 0;
@@ -264,4 +306,5 @@ export default {
 		}
 	}
 }
-</style>
+
+</style>