devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

DIY可视化整合MQTT生成UniApp源码_mqtt可视化

作者：正经夜光杯 | 2024-07-14 12:04:50

赞

踩

mqtt可视化

DIY可视化整合MQTT生成UniApp源码

MQTT协议是什么？
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，专门设计用于在低带宽、不稳定的网络环境下进行物联网设备之间的通信。具有以下特点（优势）：

  1. 轻量级：MQTT 协议设计简单，通信开销小，适合在资源受限的设备上使用，如传感器、嵌入式设备等。
  2. 发布/订阅模式：MQTT 使用发布/订阅模式，消息的发送者称为发布者（Publisher），消息的接收者称为订阅者（Subscriber），发布者和订阅者之间通过消息代理（Broker）进行通信。
  3. 可靠性：MQTT 协议支持消息的 QoS（Quality of Service）等级，包括至多一次、至少一次和仅一次，可以根据需求选择适当的 QoS 级别来确保消息的可靠传输。
  4. 连接保持：MQTT 客户端可以保持与消息代理的长连接，即使在网络不稳定或断开的情况下，客户端也可以重新连接并恢复通信。
  5. 适应性：MQTT 可以在 TCP/IP、TLS/SSL、WebSocket 等多种网络协议上进行通信，便于在不同的网络环境中使用。
  6. 支持保留消息：MQTT支持保留消息，使得新的订阅者可以立即获取到最新消息。
  7. 跨平台：MQTT是跨平台的，可以在各种设备和操作系统上使用。

MQTT协议定义了三种角色：

  1. 发布者（Publisher）：发布消息到MQTT代理（Broker）。
  2. 订阅者（Subscriber）：从MQTT代理接收消息。
  3. 代理（Broker）：负责接收发布者发送的消息，并按照订阅者的订阅主题进行消息转发。
  4. MQTT协议通常与各种编程语言和框架都有良好的支持，使得开发者能够轻松地在各种应用场景中实现MQTT通信。

总而言之，MQTT 协议由于其轻量级、灵活性和可靠性，被广泛应用于物联网设备、传感器网络、移动设备等场景，是物联网通信的重要协议之一。


安装步骤
下载
URL: https://www.emqx.io/zh/downloads?os=Windows
History URL: https://www.emqx.com/zh/downloads/broker
当前下载的是 emqx-5.3.0-windows-amd64.zip
安装
无需安装，解压 emqx-5.3.0-windows-amd64.zip 后即可使用
运行
假设 emqx-5.3.0-windows-amd64.zip 解压到以下目录：
D:\work\mqtt\emqx-5.3.2-windows-amd64
打开 CMD 窗口
运行以下命令，以下结果说明服务运行正常：
Microsoft Windows [版本 10.0.19045.3570]
(c) Microsoft Corporation。保留所有权利。

D:\work\mqtt\emqx-5.3.2-windows-amd64\bin>emqx start
EMQX_NODE__DB_ROLE [node.role]: core
EMQX_NODE__DB_BACKEND [node.db_backend]: mnesia

D:\work\mqtt\emqx-5.3.2-windows-amd64>cd bin

D:\work\mqtt\emqx-5.3.2-windows-amd64\bin>emqx_ctl status

Node 'emqx@127.0.0.1' 5.3.0 is started        
访问 Web 端控制台：
http://127.0.0.1:18083/#/dashboard/overview

默认用户名密码登录：admin/public

扩展
emqx start ： 后台启动 EMQX Broker；
emqx stop ：关闭 EMQX Broker；
emqx restart ：重启 EMQX Broker
emqx console 使用控制台启动 EMQX Broker；
emqx foreground ： 使用控制台启动 EMQX Broker，与 emqx console 不同，emqx foreground 不支持输入 Erlang 命令
emqx ping ：Ping EMQX Broker, 检查当前节点是否通信正常；
emqx check_conf： 检查配置文件格式是否正常，如果你修改了配置文件，推荐在启动前先执行此命令，来检查配置文件的格式是否符合要求。
emqx_ctl status：查询 EMQX 运行状态
emqx_ctl broker：查询服务器基本信息，启动时间，统计数据与性能数据
emqx_ctl broker stats：查询服务器客户端连接 (Connections)、主题 (Topics)、订阅 (Subscriptions)、路由 (Routes) 统计
emqx_ctl clients list：列出所有客户端连接

MQTT5.0桌面客户端MQTTX

MQTTX是EMQ开源的一款优雅的跨平台MQTT 5.0桌面客户端，它支持macOS、Linux和Windows系统。MQTT X的UI采用了聊天界面形式，简化了页面操作逻辑，用户可以快速创建连接，允许保存多个客户端，方便用户快速测试MQTT/MQTTS连接，以及MQTT消息的订阅和发布。

MQTT X的主要特点包括：

  1. 跨平台：支持多种操作系统，包括macOS、Linux和Windows，满足不同用户的需求。
  2. 简洁的图形界面：采用聊天界面形式，使得操作更加直观和便捷。
  3. 快速创建和保存连接：用户可以轻松创建并保存多个MQTT客户端连接，方便进行不同场景下的测试。
  4. 支持多种连接方式：支持MQTT/TCP、MQTT/TLS、MQTT/WebSocket等多种连接方式，满足不同的通信需求。
  5. 优化使用体验：通过一键式的连接方式和快速复制连接功能，优化了用户的使用体验。
  6. 此外，MQTTX还提供了丰富的功能，如支持SSL/TLS加密通信、支持WebSocket连接、支持多种认证方式等，以满足不同安全需求。

总的来说，MQTTX是一个功能强大、操作简便的MQTT客户端工具，适用于物联网、智能家居、移动应用等多种场景下的MQTT通信需求。
MQTTX下载地址:https://mqttx.app/zh/downloads

  1. <template>
  2. 	<view class="container container30157">
  3. 		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24 form-clz">
  4. 			<u-form-item class="diygw-col-24 url-clz" label="url" prop="url">
  5. 				<u-input :focus="formData.urlFocus" class="" placeholder="mqtt协议：H5使用ws/wss APP-PLUS使用wx/wxs" v-model="form.url"></u-input>
  6. 			</u-form-item>
  7. 			<u-form-item class="diygw-col-24 clientId-clz" label="clientId" prop="clientId">
  8. 				<u-input :focus="formData.clientIdFocus" class="" placeholder="clientId" v-model="form.clientId"></u-input>
  9. 			</u-form-item>
  10. 			<u-form-item class="diygw-col-24 username-clz" label="username" prop="username">
  11. 				<u-input :focus="formData.usernameFocus" class="" placeholder="username" v-model="form.username"></u-input>
  12. 			</u-form-item>
  13. 			<u-form-item class="diygw-col-24 password-clz" label="password" prop="password">
  14. 				<u-input :focus="formData.passwordFocus" class="" placeholder="password" v-model="form.password"></u-input>
  15. 			</u-form-item>
  16. 			<u-form-item class="diygw-col-24 switch-clz" label="clean" prop="switch">
  17. 				<view class="flex diygw-col-24">
  18. 					<u-switch :activeValue="1" :inactiveValue="0" @tap="changeFormSwitched" v-model="form.switched" slot="right"></u-switch>
  19. 				</view>
  20. 			</u-form-item>
  21. 			<view class="flex diygw-col-24 button-clz">
  22. 				<button @tap="navigateTo" data-type="startConnectFunction" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">连接</button>
  23. 				<button @tap="navigateTo" data-type="endConnectFunction" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">终止</button>
  24. 				<button @tap="navigateTo" data-type="reConnectFunction" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">重连</button>
  25. 			</view>
  26. 		</u-form>
  27. 		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
  28. 			<view class="flex flex-wrap diygw-col-24 justify-between green flex3-clz">
  29. 				<view class="diygw-col-0 text22-clz"> 日志消息 </view>
  30. 				<view @tap="navigateTo" data-type="cealrLogFunction" class="diygw-col-0 text2-clz"> 清空日志 </view>
  31. 			</view>
  32. 			<view v-for="(item, index) in logs" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
  33. 				<view class="diygw-col-24 text-clz">
  34. 					{{ item.option + item.log }}
  35. 				</view>
  36. 			</view>
  37. 		</view>
  38. 		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex2-clz">
  39. 			<view class="diygw-col-24 pink text1-clz"> 订阅消息 </view>
  40. 			<u-form :model="subscribeInfo" :rules="subscribeInfoRules" :errorType="['message', 'toast']" ref="subscribeInfoRef" class="flex diygw-form diygw-col-24 subscribeInfo-clz">
  41. 				<u-form-item class="diygw-col-24 topic-clz" label="topic" prop="topic">
  42. 					<u-input :focus="subscribeInfoData.topicFocus" class="" placeholder="topic" v-model="subscribeInfo.topic"></u-input>
  43. 				</u-form-item>
  44. 				<u-form-item class="diygw-col-24 qos-clz" label="qos" prop="qos">
  45. 					<view class="flex diygw-col-24">
  46. 						<u-number-box @change="changeSubscribeInfoQos" name="qos" v-model="subscribeInfo.qos" bgColor="#EBECEE" color="#323233" :min="0" :max="100" :step="1" />
  47. 					</view>
  48. 				</u-form-item>
  49. 				<view class="flex diygw-col-24 button3-clz">
  50. 					<button @tap="navigateTo" data-type="changeQosFunction" class="diygw-btn green radius-xs flex-sub margin-xs button3-button-clz">Qos {{ subscribeInfo.qos }}</button>
  51. 					<button @tap="navigateTo" data-type="startSubscribeFunction" class="diygw-btn green radius-xs flex-sub margin-xs button3-button-clz">订阅</button>
  52. 					<button @tap="navigateTo" data-type="endSubscribeFunction" class="diygw-btn green radius-xs flex-sub margin-xs button3-button-clz">取订</button>
  53. 				</view>
  54. 			</u-form>
  55. 		</view>
  56. 		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
  57. 			<view class="diygw-col-24 gradual-red text3-clz"> 发送消息 </view>
  58. 			<u-form :model="publishInfo" :rules="publishInfoRules" :errorType="['message', 'toast']" ref="publishInfoRef" class="flex diygw-form diygw-col-24 publishInfo-clz">
  59. 				<u-form-item class="diygw-col-24 topic-clz" label="topic" prop="topic">
  60. 					<u-input :focus="publishInfoData.topicFocus" class="" placeholder="topic" v-model="publishInfo.topic"></u-input>
  61. 				</u-form-item>
  62. 				<u-form-item class="diygw-col-24 message-clz" label="message" prop="message">
  63. 					<u-input :focus="publishInfoData.messageFocus" class="" placeholder="message" v-model="publishInfo.message"></u-input>
  64. 				</u-form-item>
  65. 				<view class="flex diygw-col-24 button2-clz">
  66. 					<button @tap="navigateTo" data-type="publishFunction" class="diygw-btn green radius-xs flex-sub margin-xs button2-button-clz">发送</button>
  67. 				</view>
  68. 			</u-form>
  69. 		</view>
  70. 		<view class="clearfix"></view>
  71. 	</view>
  72. </template>
  73.  
  74. <script>
  75. 	export default {
  76. 		data() {
  77. 			return {
  78. 				//用户全局信息
  79. 				userInfo: {},
  80. 				//页面传参
  81. 				globalOption: {},
  82. 				//自定义全局变量
  83. 				globalData: {},
  84. 				logs: [
  85. 					{
  86. 						option: '环境配置：',
  87. 						log: '配置成功'
  88. 					}
  89. 				],
  90. 				publishInfoRules: {},
  91. 				form: {
  92. 					url: 'ws://127.0.0.1:8083/mqtt',
  93. 					clientId: 'App_0109',
  94. 					username: 'test',
  95. 					password: 'test',
  96. 					switched: 1
  97. 				},
  98. 				formRules: {},
  99. 				publishInfo: {
  100. 					topic: 'topic',
  101. 					message: 'message'
  102. 				},
  103. 				subscribeInfo: {
  104. 					topic: 'topic',
  105. 					qos: 1
  106. 				},
  107. 				subscribeInfoRules: {},
  108. 				formData: {
  109. 					urlFocus: false,
  110. 					clientIdFocus: false,
  111. 					usernameFocus: false,
  112. 					passwordFocus: false
  113. 				},
  114. 				subscribeInfoData: {
  115. 					topicFocus: false
  116. 				},
  117. 				publishInfoData: {
  118. 					topicFocus: false,
  119. 					messageFocus: false
  120. 				}
  121. 			};
  122. 		},
  123. 		onShow() {
  124. 			this.setCurrentPage(this);
  125. 		},
  126. 		onLoad(option) {
  127. 			this.setCurrentPage(this);
  128. 			if (option) {
  129. 				this.setData({
  130. 					globalOption: this.getOption(option)
  131. 				});
  132. 			}
  133.  
  134. 			this.init();
  135. 		},
  136. 		onReady() {
  137. 			this.$refs.formRef?.setRules(this.formRules);
  138. 			this.$refs.subscribeInfoRef?.setRules(this.subscribeInfoRules);
  139. 			this.$refs.publishInfoRef?.setRules(this.publishInfoRules);
  140. 		},
  141. 		methods: {
  142. 			async init() {
  143. 				await this.initResetform();
  144. 				await this.initResetsubscribeInfo();
  145. 				await this.initResetpublishInfo();
  146. 			},
  147. 			// 连接 自定义方法
  148. 			async startConnectFunction(param) {
  149. 				let thiz = this;
  150. 				var _this = this;
  151. 				let opts = {
  152. 					url: this.form.url,
  153. 					clientId: this.form.clientId,
  154. 					username: this.form.username,
  155. 					password: this.form.password,
  156. 					clean: this.form.clean == 1 ? true : false
  157. 				};
  158. 				var client = await this.$mqttTool.connect(opts);
  159. 				client.on('connect', function (res) {
  160. 					_this.logs.unshift({
  161. 						option: 'mqtt：',
  162. 						log: '连接成功'
  163. 					});
  164. 				});
  165. 				client.on('reconnect', function (res) {
  166. 					_this.logs.unshift({
  167. 						option: 'mqtt：',
  168. 						log: '重新连接'
  169. 					});
  170. 				});
  171. 				client.on('error', function (res) {
  172. 					_this.logs.unshift({
  173. 						option: 'mqtt：',
  174. 						log: '连接错误'
  175. 					});
  176. 				});
  177. 				client.on('close', function (res) {
  178. 					_this.logs.unshift({
  179. 						option: 'mqtt：',
  180. 						log: '关闭成功'
  181. 					});
  182. 				});
  183. 				client.on('message', function (topic, message, buffer) {
  184. 					if (_this.isBuffer) {
  185. 						_this.logs.unshift({
  186. 							option: topic + ' buffer：',
  187. 							log: JSON.stringify(buffer)
  188. 						});
  189. 					}
  190. 					_this.logs.unshift({
  191. 						option: topic + ' message：',
  192. 						log: message.toString()
  193. 					});
  194. 				});
  195. 			},
  196.  
  197. 			// 终止 自定义方法
  198. 			async endConnectFunction(param) {
  199. 				let thiz = this;
  200. 				var _this = this;
  201. 				this.$mqttTool.end().then((res) => {
  202. 					_this.logs.unshift({
  203. 						option: '终止：',
  204. 						log: res
  205. 					});
  206. 				});
  207. 			},
  208.  
  209. 			// 重新连接 自定义方法
  210. 			async reConnectFunction(param) {
  211. 				let thiz = this;
  212. 				var _this = this;
  213. 				this.$mqttTool.reconnect().then((res) => {
  214. 					_this.logs.unshift({
  215. 						option: '重连：',
  216. 						log: res
  217. 					});
  218. 				});
  219. 			},
  220.  
  221. 			// 发送消息 自定义方法
  222. 			async publishFunction(param) {
  223. 				let thiz = this;
  224. 				var _this = this;
  225. 				let opts = {
  226. 					topic: this.publishInfo.topic,
  227. 					message: this.publishInfo.message
  228. 				};
  229. 				this.$mqttTool.publish(opts).then((res) => {
  230. 					_this.logs.unshift({
  231. 						option: '发送：',
  232. 						log: res
  233. 					});
  234. 				});
  235. 			},
  236.  
  237. 			// 订阅 自定义方法
  238. 			async startSubscribeFunction(param) {
  239. 				let thiz = this;
  240. 				if (this.subscribeInfo.topic == '') {
  241. 					uni.showToast({
  242. 						icon: 'none',
  243. 						title: '输入topic'
  244. 					});
  245. 					return;
  246. 				}
  247. 				var _this = this;
  248. 				let opts = {
  249. 					topic: this.subscribeInfo.topic,
  250. 					qos: this.subscribeInfo.qos
  251. 				};
  252. 				this.$mqttTool.subscribe(opts).then((res) => {
  253. 					_this.logs.unshift({ option: '订阅' + opts.topic + '：', log: res });
  254. 				});
  255. 			},
  256.  
  257. 			// 取消订阅 自定义方法
  258. 			async endSubscribeFunction(param) {
  259. 				let thiz = this;
  260. 				var _this = this;
  261. 				let opts = {
  262. 					topic: this.subscribeInfo.topic
  263. 				};
  264. 				this.$mqttTool.unsubscribe(opts).then((res) => {
  265. 					_this.logs.unshift({ option: '取消订阅：', log: res });
  266. 				});
  267. 			},
  268.  
  269. 			// 清空日志 自定义方法
  270. 			async cealrLogFunction(param) {
  271. 				let thiz = this;
  272. 				this.logs = [{ option: '环境配置：', log: '配置成功' }];
  273. 			},
  274.  
  275. 			// 更改Qos 自定义方法
  276. 			async changeQosFunction(param) {
  277. 				let thiz = this;
  278. 				var _this = this;
  279. 				if (this.subscribeInfo.qos >= 2) {
  280. 					this.subscribeInfo.qos = 0;
  281. 					this.logs.unshift({ option: 'Qos：', log: this.subscribeInfo.qos });
  282. 					this.startSubscribe();
  283. 				} else {
  284. 					this.subscribeInfo.qos += 1;
  285. 					this.logs.unshift({ option: 'Qos：', log: this.subscribeInfo.qos });
  286. 					this.startSubscribe();
  287. 				}
  288. 			},
  289. 			changeFormSwitched(evt) {},
  290. 			initResetform() {
  291. 				this.initform = JSON.stringify(this.form);
  292. 			},
  293. 			resetForm() {
  294. 				this.form = JSON.parse(this.initform);
  295. 			},
  296.  
  297. 			async submitForm(e) {
  298. 				this.$refs.formRef?.setRules(this.formRules);
  299.  
  300. 				this.$nextTick(async () => {
  301. 					let valid = await this.$refs.formRef.validate();
  302. 					if (valid) {
  303. 						//保存数据
  304. 						let param = this.form;
  305. 						let header = {};
  306. 						let url = '';
  307. 						if (!url) {
  308. 							this.showToast('请先配置表单提交地址', 'none');
  309. 							return false;
  310. 						}
  311.  
  312. 						let res = await this.$http.post(url, param, header, 'json');
  313.  
  314. 						if (res.code == 200) {
  315. 							this.showToast(res.msg, 'success');
  316. 						} else {
  317. 							this.showModal(res.msg, '提示', false);
  318. 						}
  319. 					} else {
  320. 						console.log('验证失败');
  321. 					}
  322. 				});
  323. 			},
  324. 			changeSubscribeInfoQos(evt) {},
  325. 			initResetsubscribeInfo() {
  326. 				this.initsubscribeInfo = JSON.stringify(this.subscribeInfo);
  327. 			},
  328. 			resetSubscribeInfo() {
  329. 				this.subscribeInfo = JSON.parse(this.initsubscribeInfo);
  330. 			},
  331.  
  332. 			async submitSubscribeInfo(e) {
  333. 				this.$refs.subscribeInfoRef?.setRules(this.subscribeInfoRules);
  334.  
  335. 				this.$nextTick(async () => {
  336. 					let valid = await this.$refs.subscribeInfoRef.validate();
  337. 					if (valid) {
  338. 						//保存数据
  339. 						let param = this.subscribeInfo;
  340. 						let header = {};
  341. 						let url = '';
  342. 						if (!url) {
  343. 							this.showToast('请先配置表单提交地址', 'none');
  344. 							return false;
  345. 						}
  346.  
  347. 						let res = await this.$http.post(url, param, header, 'json');
  348.  
  349. 						if (res.code == 200) {
  350. 							this.showToast(res.msg, 'success');
  351. 						} else {
  352. 							this.showModal(res.msg, '提示', false);
  353. 						}
  354. 					} else {
  355. 						console.log('验证失败');
  356. 					}
  357. 				});
  358. 			},
  359. 			initResetpublishInfo() {
  360. 				this.initpublishInfo = JSON.stringify(this.publishInfo);
  361. 			},
  362. 			resetPublishInfo() {
  363. 				this.publishInfo = JSON.parse(this.initpublishInfo);
  364. 			},
  365.  
  366. 			async submitPublishInfo(e) {
  367. 				this.$refs.publishInfoRef?.setRules(this.publishInfoRules);
  368.  
  369. 				this.$nextTick(async () => {
  370. 					let valid = await this.$refs.publishInfoRef.validate();
  371. 					if (valid) {
  372. 						//保存数据
  373. 						let param = this.publishInfo;
  374. 						let header = {};
  375. 						let url = '';
  376. 						if (!url) {
  377. 							this.showToast('请先配置表单提交地址', 'none');
  378. 							return false;
  379. 						}
  380.  
  381. 						let res = await this.$http.post(url, param, header, 'json');
  382.  
  383. 						if (res.code == 200) {
  384. 							this.showToast(res.msg, 'success');
  385. 						} else {
  386. 							this.showModal(res.msg, '提示', false);
  387. 						}
  388. 					} else {
  389. 						console.log('验证失败');
  390. 					}
  391. 				});
  392. 			}
  393. 		}
  394. 	};
  395. </script>
  396.  
  397. <style lang="scss" scoped>
  398. 	.button-button-clz {
  399. 		margin: 6rpx !important;
  400. 	}
  401. 	.flex4-clz {
  402. 		padding-top: 10rpx;
  403. 		padding-left: 10rpx;
  404. 		padding-bottom: 10rpx;
  405. 		padding-right: 10rpx;
  406. 	}
  407. 	.flex3-clz {
  408. 		padding-top: 10rpx;
  409. 		font-weight: bold;
  410. 		flex: 1;
  411. 		padding-left: 10rpx;
  412. 		font-size: 28rpx !important;
  413. 		padding-bottom: 10rpx;
  414. 		padding-right: 10rpx;
  415. 	}
  416. 	.flex-clz {
  417. 		margin-left: 10rpx;
  418. 		width: calc(100% - 10rpx - 10rpx) !important;
  419. 		margin-top: 10rpx;
  420. 		margin-bottom: 10rpx;
  421. 		margin-right: 10rpx;
  422. 	}
  423. 	.text-clz {
  424. 		padding-top: 10rpx;
  425. 		padding-left: 10rpx;
  426. 		padding-bottom: 10rpx;
  427. 		padding-right: 10rpx;
  428. 	}
  429. 	.flex2-clz {
  430. 		padding-top: 10rpx;
  431. 		padding-left: 10rpx;
  432. 		padding-bottom: 10rpx;
  433. 		padding-right: 10rpx;
  434. 	}
  435. 	.text1-clz {
  436. 		padding-top: 10rpx;
  437. 		font-weight: bold;
  438. 		flex: 1;
  439. 		padding-left: 10rpx;
  440. 		font-size: 28rpx !important;
  441. 		padding-bottom: 10rpx;
  442. 		padding-right: 10rpx;
  443. 	}
  444. 	.button3-button-clz {
  445. 		margin: 6rpx !important;
  446. 	}
  447. 	.flex1-clz {
  448. 		padding-top: 10rpx;
  449. 		padding-left: 10rpx;
  450. 		padding-bottom: 10rpx;
  451. 		padding-right: 10rpx;
  452. 	}
  453. 	.text3-clz {
  454. 		padding-top: 10rpx;
  455. 		font-weight: bold;
  456. 		flex: 1;
  457. 		padding-left: 10rpx;
  458. 		font-size: 28rpx !important;
  459. 		padding-bottom: 10rpx;
  460. 		padding-right: 10rpx;
  461. 	}
  462. 	.button2-button-clz {
  463. 		margin: 6rpx !important;
  464. 	}
  465. 	.container30157 {
  466. 		padding-left: 0px;
  467. 		padding-right: 0px;
  468. 	}
  469. 	.container30157 {
  470. 	}
  471. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/824682
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号