• 强大CSS3可视化代码生成器

    DIY可视化CSS可视化代码生成器是一种工具，它允许用户通过图形界面直观地创建和编辑CSS样式，然后自动生成相应的CSS代码。DIY可视化对于那些不熟悉CSS语法或者想要更直观地调整样式的人来说特别有用。

    提供了强大的CSS可视化编辑功能，用户可以在编辑器中直接调整元素的样式，并立即看到更改的效果。


    提供了CSS动画的创建和编辑。用户可以选择预设的动画效果，然后调整参数以达到想要的效果。


    提供了各种CSS3效果的生成器，如渐变、阴影、动画等。用户可以通过调整滑块和参数来预览效果，并获取生成的CSS代码。


    同时提供了丰富的预设样式和效果供用户选择，同时也允许用户自定义样式以满足特定的需求。

    丰富的页面模板、组件模板供选择

    最主要的是直接生成代码

    1. <template>
    2. 	<view class="container container21094">
    3. 		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz"> </view>
    4. 		<view class="flex flex-wrap diygw-col-24 items-end flex74-clz">
    5. 			<view class="flex flex-wrap diygw-col-0 flex-direction-column flex12-clz">
    6. 				<image src="/static/10.jpg" class="image8-size diygw-image diygw-col-0 image8-clz" mode="widthFix"></image>
    7. 			</view>
    8. 			<view class="flex flex-wrap diygw-col-0 justify-around flex75-clz">
    9. 				<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
    10. 					<view class="diygw-text-line1 diygw-col-0 text56-clz"> 999 </view>
    11. 					<view class="diygw-text-line1 diygw-col-0"> 创作 </view>
    12. 				</view>
    13. 				<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
    14. 					<view class="diygw-text-line1 diygw-col-0 text3-clz"> 66666 </view>
    15. 					<view class="diygw-text-line1 diygw-col-0"> 粉丝 </view>
    16. 				</view>
    17. 				<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
    18. 					<view class="diygw-text-line1 diygw-col-0 text1-clz"> 518 </view>
    19. 					<view class="diygw-text-line1 diygw-col-0"> 关注 </view>
    20. 				</view>
    21. 			</view>
    22. 		</view>
    23. 		<view class="flex diygw-col-24 flex-direction-column items-start flex-nowrap flex73-clz">
    24. 			<view class="flex flex-wrap diygw-col-24 items-center flex76-clz">
    25. 				<view class="flex flex-wrap diygw-col-0 justify-between flex3-clz">
    26. 					<view class="diygw-text-line1 diygw-col-0 text5-clz"> DIY可视化 </view>
    27. 					<view class="diygw-text-line1 diygw-col-24"> 一个二次喜欢元灵感创意 </view>
    28. 				</view>
    29. 				<view class="diygw-text-line1 diygw-col-0 text6-clz"> 编辑资料 </view>
    30. 			</view>
    31. 			<view class="flex flex-wrap diygw-col-24 items-baseline flex16-clz">
    32. 				<view class="flex flex-wrap diygw-col-0 items-center flex17-clz">
    33. 					<image src="/static/ht.png" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image>
    34. 					<view class="diygw-col-0"> 二次元 </view>
    35. 				</view>
    36. 				<view class="flex flex-wrap diygw-col-0 items-center flex18-clz">
    37. 					<image src="/static/ht.png" class="image2-size diygw-image diygw-col-0" mode="widthFix"></image>
    38. 					<view class="diygw-col-0"> 人物创作 </view>
    39. 				</view>
    40. 				<view class="flex flex-wrap diygw-col-0 items-center flex19-clz">
    41. 					<image src="/static/ht.png" class="image3-size diygw-image diygw-col-0" mode="widthFix"></image>
    42. 					<view class="diygw-col-0"> 人物创作 </view>
    43. 				</view>
    44. 			</view>
    45. 			<view class="flex flex-wrap diygw-col-24 items-stretch flex39-clz">
    46. 				<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex40-clz">
    47. 					<view class="flex flex-wrap diygw-col-24 items-center flex95-clz">
    48. 						<image src="/static/icon-wallet-title.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image>
    49. 						<view class="diygw-col-0 text68-clz"> 我的钱包 </view>
    50. 						<view class="flex flex-wrap diygw-col-0 items-baseline flex97-clz">
    51. 							<view class="diygw-col-0"> 明细 </view>
    52. 							<text class="flex icon19 diygw-col-0 diy-icon-right"></text>
    53. 						</view>
    54. 					</view>
    55. 					<view class="flex flex-wrap diygw-col-24 justify-around flex4-clz">
    56. 						<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex5-clz">
    57. 							<view class="diygw-text-line1 diygw-col-0 text7-clz"> 999 </view>
    58. 							<view class="diygw-text-line1 diygw-col-0 text8-clz"> 余额 </view>
    59. 							<view class="flex flex-wrap diygw-col-24 justify-center items-center flex7-clz">
    60. 								<image src="/static/icon-wallet-payin.png" class="image4-size diygw-image diygw-col-0" mode="widthFix"></image>
    61. 								<view class="diygw-col-0 text11-clz"> 充值 </view>
    62. 							</view>
    63. 						</view>
    64. 						<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex9-clz">
    65. 							<view class="diygw-text-line1 diygw-col-0 text16-clz"> 999 </view>
    66. 							<view class="diygw-text-line1 diygw-col-0 text17-clz"> 积分 </view>
    67. 							<view class="flex flex-wrap diygw-col-24 justify-center items-center flex10-clz">
    68. 								<image src="/static/icon-wallet-payout.png" class="image6-size diygw-image diygw-col-0" mode="widthFix"></image>
    69. 								<view class="diygw-col-0 text18-clz"> 提现 </view>
    70. 							</view>
    71. 						</view>
    72. 						<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex6-clz">
    73. 							<view class="diygw-text-line1 diygw-col-0 text9-clz"> 999 </view>
    74. 							<view class="diygw-text-line1 diygw-col-0 text10-clz"> 余额 </view>
    75. 							<view class="flex flex-wrap diygw-col-24 justify-center items-center flex8-clz">
    76. 								<image src="/static/icon-wallet-payto.png" class="image5-size diygw-image diygw-col-0" mode="widthFix"></image>
    77. 								<view class="diygw-col-0 text15-clz"> 转账 </view>
    78. 							</view>
    79. 						</view>
    80. 					</view>
    81. 				</view>
    82. 				<view class="flex flex-wrap diygw-col-0 flex-direction-column flex43-clz">
    83. 					<view class="flex flex-wrap diygw-col-0 items-center flex11-clz">
    84. 						<image src="/static/icon-link-1.png" class="image7-size diygw-image diygw-col-0" mode="widthFix"></image>
    85. 						<view class="diygw-col-0 text19-clz"> 账户中心 </view>
    86. 						<text class="flex icon diygw-col-0 diy-icon-right"></text>
    87. 					</view>
    88. 					<view class="flex flex-wrap diygw-col-0 items-center flex13-clz">
    89. 						<image src="/static/icon-link-2.png" class="image9-size diygw-image diygw-col-0" mode="widthFix"></image>
    90. 						<view class="diygw-col-0 text20-clz"> 我的收藏 </view>
    91. 						<text class="flex icon1 diygw-col-0 diy-icon-right"></text>
    92. 					</view>
    93. 					<view class="flex flex-wrap diygw-col-0 items-center flex20-clz">
    94. 						<image src="/static/icon-link-3.png" class="image12-size diygw-image diygw-col-0" mode="widthFix"></image>
    95. 						<view class="diygw-col-0 text23-clz"> 达人认证 </view>
    96. 						<text class="flex icon4 diygw-col-0 diy-icon-right"></text>
    97. 					</view>
    98. 					<view class="flex flex-wrap diygw-col-0 items-center flex15-clz">
    99. 						<image src="/static/icon-link-4.png" class="image11-size diygw-image diygw-col-0" mode="widthFix"></image>
    100. 						<view class="diygw-col-0 text22-clz"> 商铺入驻 </view>
    101. 						<text class="flex icon3 diygw-col-0 diy-icon-right"></text>
    102. 					</view>
    103. 					<view class="flex flex-wrap diygw-col-0 items-center flex14-clz">
    104. 						<image src="/static/icon-link-5.png" class="image10-size diygw-image diygw-col-0" mode="widthFix"></image>
    105. 						<view class="diygw-col-0 text21-clz"> 邀请好友 </view>
    106. 						<text class="flex icon2 diygw-col-0 diy-icon-right"></text>
    107. 					</view>
    108. 					<view class="flex flex-wrap diygw-col-0 items-center flex22-clz">
    109. 						<image src="/static/icon-link-6.png" class="image14-size diygw-image diygw-col-0" mode="widthFix"></image>
    110. 						<view class="diygw-col-0 text25-clz"> 其他设置 </view>
    111. 						<text class="flex icon6 diygw-col-0 diy-icon-right"></text>
    112. 					</view>
    113. 					<view class="flex flex-wrap diygw-col-0 items-center flex21-clz">
    114. 						<image src="/static/icon-link-7.png" class="image13-size diygw-image diygw-col-0" mode="widthFix"></image>
    115. 						<view class="diygw-col-0 text24-clz"> 关于我们 </view>
    116. 						<text class="flex icon5 diygw-col-0 diy-icon-right"></text>
    117. 					</view>
    118. 				</view>
    119. 				<view class="flex flex-wrap diygw-col-24 justify-center items-center flex23-clz">
    120. 					<image src="/static/icon-btn-logout.png" class="image15-size diygw-image diygw-col-0" mode="widthFix"></image>
    121. 					<view class="diygw-col-0 text26-clz"> 退出 </view>
    122. 				</view>
    123. 			</view>
    124. 		</view>
    125. 		<view class="clearfix"></view>
    126. 	</view>
    127. </template>
    128.  
    129. <script>
    130. 	export default {
    131. 		data() {
    132. 			return {
    133. 				//用户全局信息
    134. 				userInfo: {},
    135. 				//页面传参
    136. 				globalOption: {},
    137. 				//自定义全局变量
    138. 				globalData: {}
    139. 			};
    140. 		},
    141. 		onShow() {
    142. 			this.setCurrentPage(this);
    143. 		},
    144. 		onLoad(option) {
    145. 			this.setCurrentPage(this);
    146. 			if (option) {
    147. 				this.setData({
    148. 					globalOption: this.getOption(option)
    149. 				});
    150. 			}
    151.  
    152. 			this.init();
    153. 		},
    154. 		methods: {
    155. 			async init() {}
    156. 		}
    157. 	};
    158. </script>
    159.  
    160. <style lang="scss" scoped>
    161. 	.flex-clz {
    162. 		background-size: cover;
    163. 		background-image: url(/static/23.jpg);
    164. 		height: 480rpx;
    165. 	}
    166. 	.flex74-clz {
    167. 		margin-left: 30rpx;
    168. 		z-index: 1;
    169. 		width: calc(100% - 30rpx - 30rpx) !important;
    170. 		margin-top: -70rpx;
    171. 		margin-bottom: 10rpx;
    172. 		margin-right: 30rpx;
    173. 	}
    174. 	.flex12-clz {
    175. 		border: 6rpx solid #f5f0f0;
    176. 		border-bottom-left-radius: 120rpx;
    177. 		overflow: hidden;
    178. 		border-top-left-radius: 120rpx;
    179. 		border-top-right-radius: 120rpx;
    180. 		border-bottom-right-radius: 120rpx;
    181. 	}
    182. 	.image8-clz {
    183. 		border-bottom-left-radius: 120rpx;
    184. 		overflow: hidden;
    185. 		border-top-left-radius: 120rpx;
    186. 		border-top-right-radius: 120rpx;
    187. 		border-bottom-right-radius: 120rpx;
    188. 	}
    189. 	.image8-size {
    190. 		height: 128rpx !important;
    191. 		width: 128rpx !important;
    192. 	}
    193. 	.flex75-clz {
    194. 		color: #767676;
    195. 		flex: 1;
    196. 	}
    197. 	.text56-clz {
    198. 		color: #2b2b2b;
    199. 		font-weight: bold;
    200. 		font-size: 28rpx !important;
    201. 	}
    202. 	.text3-clz {
    203. 		color: #2b2b2b;
    204. 		font-weight: bold;
    205. 		font-size: 28rpx !important;
    206. 	}
    207. 	.text1-clz {
    208. 		color: #2b2b2b;
    209. 		font-weight: bold;
    210. 		font-size: 28rpx !important;
    211. 	}
    212. 	.flex73-clz {
    213. 		padding-top: 90rpx;
    214. 		border-bottom-left-radius: 0rpx;
    215. 		padding-left: 0rpx;
    216. 		padding-bottom: 0rpx;
    217. 		border-top-right-radius: 40rpx;
    218. 		margin-right: 0rpx;
    219. 		background-color: #ffffff;
    220. 		margin-left: 0rpx;
    221. 		box-shadow: 0rpx 2rpx 6rpx rgba(225, 234, 255, 0.45);
    222. 		overflow: hidden;
    223. 		width: calc(100% - 0rpx - 0rpx) !important;
    224. 		border-top-left-radius: 40rpx;
    225. 		margin-top: -100rpx;
    226. 		border-bottom-right-radius: 0rpx;
    227. 		margin-bottom: 0rpx;
    228. 		padding-right: 0rpx;
    229. 	}
    230. 	.flex76-clz {
    231. 		margin-left: 30rpx;
    232. 		width: calc(100% - 30rpx - 30rpx) !important;
    233. 		margin-top: 20rpx;
    234. 		margin-bottom: 0rpx;
    235. 		margin-right: 30rpx;
    236. 	}
    237. 	.flex3-clz {
    238. 		padding-top: 10rpx;
    239. 		flex: 1;
    240. 		padding-left: 10rpx;
    241. 		padding-bottom: 10rpx;
    242. 		padding-right: 10rpx;
    243. 	}
    244. 	.text5-clz {
    245. 		font-weight: bold;
    246. 		font-size: 30rpx !important;
    247. 	}
    248. 	.text6-clz {
    249. 		padding-top: 10rpx;
    250. 		border-bottom-left-radius: 12rpx;
    251. 		font-weight: bold;
    252. 		padding-left: 20rpx;
    253. 		font-size: 28rpx !important;
    254. 		padding-bottom: 10rpx;
    255. 		border-top-right-radius: 12rpx;
    256. 		margin-right: 10rpx;
    257. 		background-color: #ffdd00;
    258. 		margin-left: 10rpx;
    259. 		overflow: hidden;
    260. 		border-top-left-radius: 12rpx;
    261. 		margin-top: 10rpx;
    262. 		border-bottom-right-radius: 12rpx;
    263. 		margin-bottom: 10rpx;
    264. 		padding-right: 20rpx;
    265. 	}
    266. 	.flex16-clz {
    267. 		margin-left: 30rpx;
    268. 		width: calc(100% - 30rpx - 30rpx) !important;
    269. 		margin-top: 0rpx;
    270. 		margin-bottom: 20rpx;
    271. 		margin-right: 30rpx;
    272. 	}
    273. 	.flex17-clz {
    274. 		padding-top: 6rpx;
    275. 		border-bottom-left-radius: 12rpx;
    276. 		font-weight: bold;
    277. 		padding-left: 10rpx;
    278. 		padding-bottom: 6rpx;
    279. 		border-top-right-radius: 12rpx;
    280. 		margin-right: 10rpx;
    281. 		background-color: #f1f5fb;
    282. 		margin-left: 10rpx;
    283. 		overflow: hidden;
    284. 		border-top-left-radius: 12rpx;
    285. 		margin-top: 10rpx;
    286. 		border-bottom-right-radius: 12rpx;
    287. 		margin-bottom: 10rpx;
    288. 		padding-right: 10rpx;
    289. 	}
    290. 	.image1-size {
    291. 		height: 40rpx !important;
    292. 		width: 40rpx !important;
    293. 	}
    294. 	.flex18-clz {
    295. 		padding-top: 6rpx;
    296. 		border-bottom-left-radius: 12rpx;
    297. 		font-weight: bold;
    298. 		padding-left: 10rpx;
    299. 		padding-bottom: 6rpx;
    300. 		border-top-right-radius: 12rpx;
    301. 		margin-right: 10rpx;
    302. 		background-color: #f1f5fb;
    303. 		margin-left: 10rpx;
    304. 		overflow: hidden;
    305. 		border-top-left-radius: 12rpx;
    306. 		margin-top: 10rpx;
    307. 		border-bottom-right-radius: 12rpx;
    308. 		margin-bottom: 10rpx;
    309. 		padding-right: 10rpx;
    310. 	}
    311. 	.image2-size {
    312. 		height: 40rpx !important;
    313. 		width: 40rpx !important;
    314. 	}
    315. 	.flex19-clz {
    316. 		padding-top: 6rpx;
    317. 		border-bottom-left-radius: 12rpx;
    318. 		font-weight: bold;
    319. 		padding-left: 10rpx;
    320. 		padding-bottom: 6rpx;
    321. 		border-top-right-radius: 12rpx;
    322. 		margin-right: 10rpx;
    323. 		background-color: #f1f5fb;
    324. 		margin-left: 10rpx;
    325. 		overflow: hidden;
    326. 		border-top-left-radius: 12rpx;
    327. 		margin-top: 10rpx;
    328. 		border-bottom-right-radius: 12rpx;
    329. 		margin-bottom: 10rpx;
    330. 		padding-right: 10rpx;
    331. 	}
    332. 	.image3-size {
    333. 		height: 40rpx !important;
    334. 		width: 40rpx !important;
    335. 	}
    336. 	.flex39-clz {
    337. 		background-repeat: no-repeat;
    338. 		background-size: contain;
    339. 	}
    340. 	.flex40-clz {
    341. 		padding-top: 10rpx;
    342. 		background-size: 100% 100%;
    343. 		padding-left: 50rpx;
    344. 		padding-bottom: 10rpx;
    345. 		background-position: bottom center;
    346. 		margin-right: 0rpx;
    347. 		margin-left: 0rpx;
    348. 		width: calc(100% - 0rpx - 0rpx) !important;
    349. 		margin-top: 0rpx;
    350. 		background-image: url(/static/bg-wallet.48ebcabe.png);
    351. 		margin-bottom: -80rpx;
    352. 		height: 420rpx;
    353. 		padding-right: 50rpx;
    354. 	}
    355. 	.flex95-clz {
    356. 		color: #ffffff;
    357. 	}
    358. 	.image-size {
    359. 		height: 60rpx !important;
    360. 		width: 60rpx !important;
    361. 	}
    362. 	.text68-clz {
    363. 		padding-top: 10rpx;
    364. 		font-weight: bold;
    365. 		flex: 1;
    366. 		padding-left: 10rpx;
    367. 		font-size: 28rpx !important;
    368. 		padding-bottom: 10rpx;
    369. 		padding-right: 10rpx;
    370. 	}
    371. 	.flex97-clz {
    372. 		margin-left: 10rpx;
    373. 		margin-top: 0rpx;
    374. 		margin-bottom: 0rpx;
    375. 		margin-right: 10rpx;
    376. 	}
    377. 	.icon19 {
    378. 		font-size: 24rpx;
    379. 	}
    380. 	.flex4-clz {
    381. 		color: #ffffff;
    382. 		height: 200rpx;
    383. 	}
    384. 	.flex5-clz {
    385. 		margin-left: 10rpx;
    386. 		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
    387. 		margin-top: 10rpx;
    388. 		margin-bottom: 10rpx;
    389. 		margin-right: 10rpx;
    390. 	}
    391. 	.text7-clz {
    392. 		margin-left: 10rpx;
    393. 		font-weight: bold;
    394. 		font-size: 32rpx !important;
    395. 		margin-top: 10rpx;
    396. 		margin-bottom: 10rpx;
    397. 		margin-right: 10rpx;
    398. 	}
    399. 	.text8-clz {
    400. 		margin-left: 10rpx;
    401. 		margin-top: 0rpx;
    402. 		margin-bottom: 10rpx;
    403. 		margin-right: 10rpx;
    404. 	}
    405. 	.flex7-clz {
    406. 		background-color: rgba(202, 215, 255, 0.5);
    407. 		padding-top: 6rpx;
    408. 		border-bottom-left-radius: 12rpx;
    409. 		overflow: hidden;
    410. 		color: #ffffff;
    411. 		padding-left: 20rpx;
    412. 		padding-bottom: 6rpx;
    413. 		border-top-left-radius: 12rpx;
    414. 		border-top-right-radius: 12rpx;
    415. 		border-bottom-right-radius: 12rpx;
    416. 		padding-right: 20rpx;
    417. 	}
    418. 	.image4-size {
    419. 		height: 40rpx !important;
    420. 		width: 40rpx !important;
    421. 	}
    422. 	.text11-clz {
    423. 		padding-top: 10rpx;
    424. 		padding-left: 10rpx;
    425. 		padding-bottom: 10rpx;
    426. 		padding-right: 10rpx;
    427. 	}
    428. 	.flex9-clz {
    429. 		margin-left: 10rpx;
    430. 		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
    431. 		margin-top: 10rpx;
    432. 		margin-bottom: 10rpx;
    433. 		margin-right: 10rpx;
    434. 	}
    435. 	.text16-clz {
    436. 		margin-left: 10rpx;
    437. 		font-weight: bold;
    438. 		font-size: 32rpx !important;
    439. 		margin-top: 10rpx;
    440. 		margin-bottom: 10rpx;
    441. 		margin-right: 10rpx;
    442. 	}
    443. 	.text17-clz {
    444. 		margin-left: 10rpx;
    445. 		margin-top: 0rpx;
    446. 		margin-bottom: 10rpx;
    447. 		margin-right: 10rpx;
    448. 	}
    449. 	.flex10-clz {
    450. 		background-color: rgba(202, 215, 255, 0.5);
    451. 		padding-top: 6rpx;
    452. 		border-bottom-left-radius: 12rpx;
    453. 		overflow: hidden;
    454. 		color: #ffffff;
    455. 		padding-left: 20rpx;
    456. 		padding-bottom: 6rpx;
    457. 		border-top-left-radius: 12rpx;
    458. 		border-top-right-radius: 12rpx;
    459. 		border-bottom-right-radius: 12rpx;
    460. 		padding-right: 20rpx;
    461. 	}
    462. 	.image6-size {
    463. 		height: 40rpx !important;
    464. 		width: 40rpx !important;
    465. 	}
    466. 	.text18-clz {
    467. 		padding-top: 10rpx;
    468. 		padding-left: 10rpx;
    469. 		padding-bottom: 10rpx;
    470. 		padding-right: 10rpx;
    471. 	}
    472. 	.flex6-clz {
    473. 		margin-left: 10rpx;
    474. 		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
    475. 		margin-top: 10rpx;
    476. 		margin-bottom: 10rpx;
    477. 		margin-right: 10rpx;
    478. 	}
    479. 	.text9-clz {
    480. 		margin-left: 10rpx;
    481. 		font-weight: bold;
    482. 		font-size: 32rpx !important;
    483. 		margin-top: 10rpx;
    484. 		margin-bottom: 10rpx;
    485. 		margin-right: 10rpx;
    486. 	}
    487. 	.text10-clz {
    488. 		margin-left: 10rpx;
    489. 		margin-top: 0rpx;
    490. 		margin-bottom: 10rpx;
    491. 		margin-right: 10rpx;
    492. 	}
    493. 	.flex8-clz {
    494. 		background-color: rgba(202, 215, 255, 0.5);
    495. 		padding-top: 6rpx;
    496. 		border-bottom-left-radius: 12rpx;
    497. 		overflow: hidden;
    498. 		color: #ffffff;
    499. 		padding-left: 24rpx;
    500. 		padding-bottom: 6rpx;
    501. 		border-top-left-radius: 12rpx;
    502. 		border-top-right-radius: 12rpx;
    503. 		border-bottom-right-radius: 12rpx;
    504. 		padding-right: 24rpx;
    505. 	}
    506. 	.image5-size {
    507. 		height: 40rpx !important;
    508. 		width: 40rpx !important;
    509. 	}
    510. 	.text15-clz {
    511. 		padding-top: 10rpx;
    512. 		padding-left: 10rpx;
    513. 		padding-bottom: 10rpx;
    514. 		padding-right: 10rpx;
    515. 	}
    516. 	.flex43-clz {
    517. 		padding-top: 10rpx;
    518. 		flex: 1;
    519. 		padding-left: 10rpx;
    520. 		font-size: 28rpx !important;
    521. 		padding-bottom: 10rpx;
    522. 		padding-right: 10rpx;
    523. 	}
    524. 	.flex11-clz {
    525. 		padding-top: 20rpx;
    526. 		font-weight: bold;
    527. 		padding-left: 20rpx;
    528. 		padding-bottom: 20rpx;
    529. 		padding-right: 20rpx;
    530. 	}
    531. 	.image7-size {
    532. 		height: 40rpx !important;
    533. 		width: 40rpx !important;
    534. 	}
    535. 	.text19-clz {
    536. 		padding-top: 0rpx;
    537. 		flex: 1;
    538. 		padding-left: 10rpx;
    539. 		padding-bottom: 0rpx;
    540. 		padding-right: 10rpx;
    541. 	}
    542. 	.icon {
    543. 		font-size: 24rpx;
    544. 	}
    545. 	.flex13-clz {
    546. 		padding-top: 20rpx;
    547. 		font-weight: bold;
    548. 		padding-left: 20rpx;
    549. 		padding-bottom: 20rpx;
    550. 		padding-right: 20rpx;
    551. 	}
    552. 	.image9-size {
    553. 		height: 40rpx !important;
    554. 		width: 40rpx !important;
    555. 	}
    556. 	.text20-clz {
    557. 		padding-top: 0rpx;
    558. 		flex: 1;
    559. 		padding-left: 10rpx;
    560. 		padding-bottom: 0rpx;
    561. 		padding-right: 10rpx;
    562. 	}
    563. 	.icon1 {
    564. 		font-size: 24rpx;
    565. 	}
    566. 	.flex20-clz {
    567. 		padding-top: 20rpx;
    568. 		font-weight: bold;
    569. 		padding-left: 20rpx;
    570. 		padding-bottom: 20rpx;
    571. 		padding-right: 20rpx;
    572. 	}
    573. 	.image12-size {
    574. 		height: 40rpx !important;
    575. 		width: 40rpx !important;
    576. 	}
    577. 	.text23-clz {
    578. 		padding-top: 0rpx;
    579. 		flex: 1;
    580. 		padding-left: 10rpx;
    581. 		padding-bottom: 0rpx;
    582. 		padding-right: 10rpx;
    583. 	}
    584. 	.icon4 {
    585. 		font-size: 24rpx;
    586. 	}
    587. 	.flex15-clz {
    588. 		padding-top: 20rpx;
    589. 		font-weight: bold;
    590. 		padding-left: 20rpx;
    591. 		padding-bottom: 20rpx;
    592. 		padding-right: 20rpx;
    593. 	}
    594. 	.image11-size {
    595. 		height: 40rpx !important;
    596. 		width: 40rpx !important;
    597. 	}
    598. 	.text22-clz {
    599. 		padding-top: 0rpx;
    600. 		flex: 1;
    601. 		padding-left: 10rpx;
    602. 		padding-bottom: 0rpx;
    603. 		padding-right: 10rpx;
    604. 	}
    605. 	.icon3 {
    606. 		font-size: 24rpx;
    607. 	}
    608. 	.flex14-clz {
    609. 		padding-top: 20rpx;
    610. 		font-weight: bold;
    611. 		padding-left: 20rpx;
    612. 		padding-bottom: 20rpx;
    613. 		padding-right: 20rpx;
    614. 	}
    615. 	.image10-size {
    616. 		height: 40rpx !important;
    617. 		width: 40rpx !important;
    618. 	}
    619. 	.text21-clz {
    620. 		padding-top: 0rpx;
    621. 		flex: 1;
    622. 		padding-left: 10rpx;
    623. 		padding-bottom: 0rpx;
    624. 		padding-right: 10rpx;
    625. 	}
    626. 	.icon2 {
    627. 		font-size: 24rpx;
    628. 	}
    629. 	.flex22-clz {
    630. 		padding-top: 20rpx;
    631. 		font-weight: bold;
    632. 		padding-left: 20rpx;
    633. 		padding-bottom: 20rpx;
    634. 		padding-right: 20rpx;
    635. 	}
    636. 	.image14-size {
    637. 		height: 40rpx !important;
    638. 		width: 40rpx !important;
    639. 	}
    640. 	.text25-clz {
    641. 		padding-top: 0rpx;
    642. 		flex: 1;
    643. 		padding-left: 10rpx;
    644. 		padding-bottom: 0rpx;
    645. 		padding-right: 10rpx;
    646. 	}
    647. 	.icon6 {
    648. 		font-size: 24rpx;
    649. 	}
    650. 	.flex21-clz {
    651. 		padding-top: 20rpx;
    652. 		font-weight: bold;
    653. 		padding-left: 20rpx;
    654. 		padding-bottom: 20rpx;
    655. 		padding-right: 20rpx;
    656. 	}
    657. 	.image13-size {
    658. 		height: 40rpx !important;
    659. 		width: 40rpx !important;
    660. 	}
    661. 	.text24-clz {
    662. 		padding-top: 0rpx;
    663. 		flex: 1;
    664. 		padding-left: 10rpx;
    665. 		padding-bottom: 0rpx;
    666. 		padding-right: 10rpx;
    667. 	}
    668. 	.icon5 {
    669. 		font-size: 24rpx;
    670. 	}
    671. 	.flex23-clz {
    672. 		padding-top: 10rpx;
    673. 		border-bottom-left-radius: 12rpx;
    674. 		font-weight: bold;
    675. 		padding-left: 20rpx;
    676. 		font-size: 28rpx !important;
    677. 		padding-bottom: 10rpx;
    678. 		border-top-right-radius: 12rpx;
    679. 		margin-right: 30rpx;
    680. 		background-color: #ffdd00;
    681. 		margin-left: 30rpx;
    682. 		overflow: hidden;
    683. 		width: calc(100% - 30rpx - 30rpx) !important;
    684. 		border-top-left-radius: 12rpx;
    685. 		margin-top: 20rpx;
    686. 		border-bottom-right-radius: 12rpx;
    687. 		margin-bottom: 10rpx;
    688. 		padding-right: 20rpx;
    689. 	}
    690. 	.image15-size {
    691. 		height: 40rpx !important;
    692. 		width: 40rpx !important;
    693. 	}
    694. 	.text26-clz {
    695. 		padding-top: 10rpx;
    696. 		padding-left: 10rpx;
    697. 		padding-bottom: 10rpx;
    698. 		padding-right: 10rpx;
    699. 	}
    700. 	.container21094 {
    701. 		padding-left: 0px;
    702. 		padding-right: 0px;
    703. 	}
    704. 	.container21094 {
    705. 	}
    706. </style>

  • 相关阅读:
    DO280管理和监控OpenShift平台--Web控制台使用
    基于Oracle数据库高校学生宿舍管理系统
    知识库系统推荐，强大的全文检索与文档分类管理功能
    【操作系统】第2章 进程与线程
    可编程 USB 转串口适配器开发板 UART 转 SPI 应用
    BaiChuan13B-GPTQ量化详解
    Java面试题总结（二）
    探秘Nutch：揭秘开源搜索引擎的工作原理与无限应用可能（二）
    跟着官方帮助文档学ICEM网格划分（附视频教程）
    centos安装nexus3.x版本
  • 原文地址：https://blog.csdn.net/luck332/article/details/138224636