refactor(DIY分类页): 优化商品卡样式与H5主题适配

1.  修复H5端rpx单位CSS变量无法解析问题，添加rpx转px转换工具函数并更新缓存key
2.  给diy-category-item组件添加scoped样式，重构商品卡样式为CSS变量可配置形式
3.  补充多套预设的分类页商品卡样式token到style_color配置中

store/index.js

@@ -430,7 +430,31 @@ const store = new Vuex.Store({
 			let theme = this.state.themeStyle;
 			if (!theme?.main_color || !theme?.aux_color) return;
 			try {
-				const cacheKey = (typeof theme === 'object' ? JSON.stringify(theme) : String(theme)) + '|' + (this.state.tabBarHeight || '');
+				// H5 端 CSS 变量值若是 rpx 字符串,浏览器原生无法解析
+				// (uni-app PostCSS 只在静态 SCSS 中把 rpx 编译成 px,JS 运行时
+				//  setProperty('--xxx','20rpx') 写入后 var() 解析失败)
+				// 这里把 token 值里的 rpx 串转成 px,其它值原样保留。
+				// 仅 #ifdef H5 生效;小程序原生支持 rpx,不需要转换。
+				const rpxToPx = (() => {
+					let pxPerRpx = 0;
+					try {
+						if (typeof window !== 'undefined' && window.innerWidth) {
+							pxPerRpx = window.innerWidth / 750;
+						}
+					} catch (e) { /* 非 H5 环境,保持原值 */ }
+					return (v) => {
+						if (pxPerRpx <= 0) return v;
+						if (typeof v !== 'string') return v;
+						if (v.indexOf('rpx') === -1) return v;
+						return v.replace(/(-?\d+(?:\.\d+)?)rpx\b/gi, (m, n) => {
+							return (parseFloat(n) * pxPerRpx) + 'px';
+						});
+					};
+				})();
+
+				const cacheKey = (typeof theme === 'object' ? JSON.stringify(theme) : String(theme))
+					+ '|' + (this.state.tabBarHeight || '')
+					+ '|' + (typeof window !== 'undefined' ? (window.innerWidth || 0) : 0);
 				if (_themeColorCache && _themeColorCacheKey === cacheKey) {
 					if (this.state.themeColor !== _themeColorCache) {
 						this.commit('setThemeColor', _themeColorCache);
@@ -443,10 +467,10 @@ const store = new Vuex.Store({
 					let data = theme[key];
 					if (typeof (data) == "object") {
 						Object.keys(data).forEach(k => {
-							themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
+							themeColor += '--' + k.replace(/_/g, "-") + ':' + rpxToPx(data[k]) + ';';
 						});
 					} else if (typeof (key) == "string" && key) {
-						themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
+						themeColor += '--' + key.replace(/_/g, "-") + ':' + rpxToPx(data) + ';';
 					}
 				});
 				for (let i = 9; i >= 5; i--) {