自己使用的css跟uniapp工具类集合

已于 2025-06-03 16:13:48 修改
阅读量143 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： css uni-app 前端
于 2025-01-02 16:49:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35880671/article/details/144889975

常用css

.back-bt {
  font-size: 12px;
  border: 1px rgba(255, 255, 255, 0.8) solid;
  padding: 1px 7px;
  border-radius: 10%;
  cursor: pointer;
}

.dis-r {
  display: flex;
  flex-direction: row;
}

.dis-c {
  display: flex;
  flex-direction: column;
}

.ver-c {
  align-items: center;
}

.base-line {
  align-items: baseline;
}

.hor-c {
  justify-content: center;
}

.jsb {
  justify-content: space-between;
}

.wh50px {
  width: 50px;
  height: 50px;
}

.wh46px {
  width: 46px;
  height: 46px;
}

.wh64px {
  width: 64px;
  height: 64px;
}

.wh25px {
  width: 25px;
  height: 25px;
}

.wh20px {
  width: 20px;
  height: 20px;
}

.wh30px {
  width: 30px;
  height: 30px;
}

.wh80px {
  width: 80px;
  height: 80px;
}

.wh100px {
  width: 100px;
  height: 100px;
}

.wh140px {
  width: 140px;
  height: 140px;
}

.wh60px {
  width: 60px;
  height: 60px;
}

.f1 {
  flex: 1;
}

.mt15 {
  margin-top: 15px;
}

.mt1 {
  margin-top: 1px;
}

.mt2 {
  margin-top: 2px;
}

.mt3 {
  margin-top: 3px;
}

.mt5 {
  margin-top: 5px;
}

.mt6 {
  margin-top: 6px;
}

.mt7 {
  margin-top: 7px;
}

.mt8 {
  margin-top: 8px;
}

.mt10 {
  margin-top: 10px;
}

.mt25 {
  margin-top: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

.ml10 {
  margin-left: 10px;
}

.p-ver-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.right-radius {
  border-radius: 0 3px 3px 0;
}

.over-txt-hide {
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-hor-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.w200 {
  width: 200px;
}

.color-good1 {
  color: skyblue;
}

.color-good2 {
  color: #F29701;
}

.color-good3 {
  color: #00fa9a;
}

.bg-good-checked {
  background: darkseagreen;
}

.bg-good-normal {
  background: #CCCCFF;
}

.bgc-white {
  background-color: #fff !important;
}

.bgc-shadow {
  background-color: #f4f4f4 !important;
}

.bgc-shadow2 {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.only-one-line {
  white-space: nowrap !important;
}
.only-tow-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 控制最大行数为3行 */
.three-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cursor-p {
  cursor: pointer;
}

.m20 {
  margin: 20px;
}

/**
font-size
 */
.fs6 {
  font-size: 6px !important;
  font-size: 0.375rem !important;
}

.fs9 {
  font-size: 9px !important;
  font-size: 0.563rem !important;
}

.fs10 {
  font-size: 10px;
  font-size: 0.625rem;
}

.fs12 {
  font-size: 12px;
  font-size: 0.75rem;
}

.fs13 {
  font-size: 13px;
  font-size: 0.813rem;
}

.fs14 {
  font-size: 14px !important;
  font-size: 0.875rem !important;
}

.fs15 {
  font-size: 15px;
  font-size: 0.938rem;
}

.fs16 {
  font-size: 16px;
  font-size: 1rem;
}

.fs17 {
  font-size: 17px;
  font-size: 1.063rem;
}

.fs18 {
  font-size: 18px;
  font-size: 1.125rem;
}

.fs20 {
  font-size: 20px;
  font-size: 1.25rem;
}

.fs22 {
  font-size: 22px;
  font-size: 1.375rem;
}

.fs24 {
  font-size: 24px;
  font-size: 1.5rem;
}

.fs26 {
  font-size: 26px;
  font-size: 1.625rem;
}

.fs28 {
  font-size: 28px;
  font-size: 1.75rem;
}

.fs30 {
  font-size: 30px;
  font-size: 1.875rem;
}

.fs32 {
  font-size: 32px;
  font-size: 2rem;
}

.fs40 {
  font-size: 40px;
  font-size: 2.5rem;
}

js方法 uniapp的东西多

export const tokenKey = 'tokenKey'
export const loginInfo = 'LoginInfo'
export const clickTime = 'ClickTime'
export const listJSON = 'listJSON'
export const userNamePw = 'userNamePw'
export const isEnterPoupoKey = 'isEnterPoupoKey'
export const isTodayKey = 'isTodayKey'
export function getToken() {
	return uni.getStorageSync(tokenKey)
}
export function setToken(token) {
	uni.setStorageSync(tokenKey, token)
}
export function getDeviceListJSON() {
	return uni.getStorageSync(listJSON)
}
export function setDeviceListJSON(json) {
	uni.setStorageSync(listJSON, json)
}

export function setLoginInfo(data) {
	uni.setStorageSync(loginInfo, data)
}

export function setClickTime(str) {
	uni.setStorageSync(clickTime, str)
}

export function getClickTime() {
	return uni.getStorageSync(clickTime)
}

export function getLoginInfo() {
	return uni.getStorageSync(loginInfo)
}

export function getUserNamePassword() {
	return uni.getStorageSync(userNamePw)
}
export function setUserNamePassword(str) {
	return uni.setStorageSync(userNamePw, str)
}

export function showToast(str, shortOrLong) {
	str = isEmpty(str) ? '错误！' : str
	return new Promise((resolve, reject) => {
		uni.showToast({
			mask: true,
			icon: "none",
			title: str,
			duration: shortOrLong ? shortOrLong : 1500,
			success: () => {
				resolve()
			},
			fail: () => {
				reject()
			}
		})
	})

}

export function showModalm(title, content, showCancel) {
	return new Promise((resolve, reject) => {
		uni.showModal({
			icon: "none",
			title: title ? title : '提示',
			content: content ? content : '确定要提交吗？',
			showCancel: showCancel ? showCancel : true,
			// cancelColor: '#CCCCCC',
			// confirmColor: '#000000',
			success: (res) => {
				if (res.confirm) {
					resolve()
				} else if (res.cancel) {
					reject()
				}
			},
			fail: (e) => {
				reject()
			}
		})
	})

}

// 'content-type' : "application/json" //这是最常用的
//form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
// 'content-type': 'application/x-www-form-urlencoded'
//需要在表单中进行文件上传时，就需要使用该格式
// 'content-type' : 'multipart/form-data' 

export function requestM({
	url,
	method,
	data,
	isToken,
	contentType,
	addStr,
	noHeader,
	hideLoading,
}) {

	return new Promise((resolve, reject) => {
		if (!hideLoading) {
			uni.showLoading({
				title: "加载中...",
				mask: true,
			})
		}

		var header = {}
		if (!noHeader) {
			if (getToken()) header['Authorization'] = 'Bearer ' + getToken()
		}
		header['content-type'] = contentType ? contentType : "application/json;charset=UTF-8"
		if (addStr) url = url + addStr
		var tempData = {}
		if (data && Object.keys(data).length > 0) {
			for (let key in data) {
				if (data[key] != null && data[key] != undefined) {
					tempData[key] = data[key]
				}
			}
			data = tempData
		}
		header['clientid'] = 'e5cd7e4891bf95d1d19206ce24a7b32e'
		if (data) data['clientid'] = 'e5cd7e4891bf95d1d19206ce24a7b32e'
		if (addStr) url = url + addStr
		if (isEncrypt == true) {
			// 加密过程移步 https://blog.csdn.net/qq_35880671/article/details/144888404
			// 生成一个 AES 密钥
			const aesKey = generateAesKey();
			header['encrypt-key'] = encrypt(encryptBase64(aesKey));
			data = encryptWithAes(JSON.stringify(data), aesKey)
			console.log(data, 'encryptWithAes');
		}

		uni.request({
			url: url,
			method: method ? method : 'GET',
			timeout: 10000,
			data: data ? data : {},
			success: (e) => {
				if (!hideLoading) uni.hideLoading()
				if (e.data.code == 200) {
					resolve(e.data || e.rows)
				} else if (e.data.code == 401) {
					setToken('')
					uni.navigateTo({
						url: '/pages/login/login',
						success() {
							showToast('令牌过期，请重新登录！')
						}
					})
					reject(e)
				} else {
					console.log(e, 'requestM1');
					setTimeout(() => {
						showToast(e.data.msg)
					}, 600)
					reject(e)
				}
			},
			header: header,
			fail: (e) => {
				if (!hideLoading) uni.hideLoading()
				console.log(e, 'requestM2');
				showToast(e.data.msg)
				setToken('')
				reject(e)
			}
		})
	})

}
//根据 fledCode 获取list中的 fledName 
export function getLabelForCode(list, code, fledName, fledCode) {
	if (!list || list.length == 0) return code;
	var idx = list.findIndex(item => item[fledCode] == code)
	if (idx > -1) {
		return list[idx][fledName]
	} else {
		return code;
	}
}

export function getPercentValue(arrList, index, precision) {
	// arrList要计算数据的数组
	// index要计算数组中值的下表
	// precision百分比保留几位小数，默认保留2位小数
	// 判断是否为空
	if (!arrList[index]) {
		return 0
	}
	if (!precision) precision = 2
	// 求和
	const sum = arrList.reduce(function(acc, val) {
		return acc + (isNaN(val) ? 0 : val)
	}, 0)
	if (sum === 0) {
		return 0
	}
	// 10的2次幂是100，用于计算精度。
	const digits = Math.pow(10, precision)
	// 扩大比例100，
	const votesPerQuota = arrList.map(function(val) {
		return ((isNaN(val) ? 0 : val) / sum) * digits * 100
	})
	// 总数，扩大比例意味的总数要扩大
	const targetSeats = digits * 100
	// 再向下取值，组成数组
	const seats = votesPerQuota.map(function(votes) {
		return Math.floor(votes)
	})
	// 再新计算合计，用于判断与总数量是否相同，相同则占比会100%
	let currentSum = seats.reduce(function(acc, val) {
		return acc + val
	}, 0)
	// 余数部分的数组：原先数组减去向下取值的数组，得到余数部分的数组
	const remainder = votesPerQuota.map(function(votes, idx) {
		return votes - seats[idx]
	})
	// 给最大最大的余额加1，凑个占比100%；
	while (currentSum < targetSeats) {
		//  找到下一个最大的余额，给其加1
		let max = Number.NEGATIVE_INFINITY
		let maxId = null
		for (let i = 0, len = remainder.length; i < len; ++i) {
			if (remainder[i] > max) {
				max = remainder[i]
				maxId = i
			}
		}
		// 对最大项余额加1
		++seats[maxId];
		// 已经增加最大余数加1，则下次判断就可以不需要再判断这个余额数。
		remainder[maxId] = 0;
		// 总的也要加1，为了判断是否总数是否相同，跳出循环。
		++currentSum;
	}
	// 这时候的seats就会总数占比会100%
	return seats[index] / digits
}


export function addZeroInFront(e) {
	if (!e) return ''
	return (e + '').length === 1 ? '0' + e : e;
}


export function isToday() {

	var t = uni.getStorageSync(isTodayKey)
	console.log(t, 'isTodayisToday');
	if (isEmpty(t)) {
		uni.setStorageSync(isTodayKey, mFormatTime(new Date(), 'yyyy-MM-dd'))
		return false
	} else {
		return t == mFormatTime(new Date(), 'yyyy-MM-dd')
	}

}


export function isEmpty(val) {
	// null or undefined
	if (val == null) return true;

	if (typeof val === 'boolean') return false;

	if (typeof val === 'number') return !val;

	if (val instanceof Error) return val.message === '';

	switch (Object.prototype.toString.call(val)) {
		// String or Array
		case '[object String]':
		case '[object Array]':
			return !val.length;

			// Map or Set or File
		case '[object File]':
		case '[object Map]':
		case '[object Set]': {
			return !val.size;
		}
		// Plain Object
		case '[object Object]': {
			return !Object.keys(val).length;
		}
	}

	return false;
};

export function mFormatTime(date, type) {
	var now = new Date(date);
	var year = now.getFullYear();
	var month = now.getMonth() + 1;
	var day = now.getDate();
	var hours = now.getHours();
	var minutes = now.getMinutes();
	var seconds = now.getSeconds();

	if (month.toString().length === 1) {
		month = '0' + month
	}

	if (day.toString().length === 1) {
		day = '0' + day
	}

	if (type == 'yyyy') {
		return year
	} else if (type == 'yyyy-MM') {
		return year + '-' + month
	} else if (type == 'yyyy-MM-dd') {
		return year + '-' + month + '-' + day
	} else if (type == 'HH:mm') {
		return addZeroInFront(hours) + ":" + addZeroInFront(minutes)
	} else if (type == 'yyyy-MM-dd HH:mm') {
		return year + '-' + month + '-' + day + " " + addZeroInFront(hours) + ":" + addZeroInFront(minutes)
	} else if (type == 'yyyy-MM-dd HH:mm:ss') {
		return year + '-' + month + '-' + day + " " + addZeroInFront(hours) + ":" + addZeroInFront(minutes) +
			":" + addZeroInFront(seconds)
	}
}
白图裘
关注
Vue学习记录之二十 postcss自定义插件及Unocss的使用
LvManBa的博客
10-25 1361
编写css插件: 一、在项目根目录下建立一个plugins文件夹，然后建立一个postcss-px-to-viewport.ts文件。 二、在tsconfig.node.json 文件的 include中加入compilerOptions中加入三、引入插件 在vite.config.ts 文件,或独立uno.config.ts文件。 写代码测试：保存的时候，会自动在终端的面板上显示。 三、unocss(原子CSS引擎)的使用 1) 、安装和基本使用 unocss是一个即时的原子CSS引擎，主要的功能是简短化
uni-app一些工具类
06-16
uni-app一些工具类
uniapp-tools:uniapp工具类
05-10
uniapp-tools (停止维护) uniapp工具类
Echarts 扇形百分比算法(最大余额法)
weixin_46328739的博客
12-02 828
主要用于计算一个数组中某个值占总和的百分比，并且保留指定的小数位数。
2025 uniapp的请求封装工具类以及使用【拿来就用】
最新发布
m0_47484034的博客
05-14 286
本文介绍了如何封装一个通用的HTTP请求工具my_http.js，并基于此工具创建具体的API请求方法my_api.js，最后在Vue组件中调用这些API获取数据。
echarts饼状图百分比算法--最大余额法 百分比加起来超过100%
qq_27806371的博客
09-15 1545
使用的是这个博主的方法。
Echarts legend百分比计算
zhao949895887的专栏
11-30 801
<template> <div class="echarts1" ref="echarts"> </div> </template> <script> import { FontChart } from '../../utils/utils' export default { name: 'echarts1', components: {}, props: { id: { type: String,
echarts扇形tooltip展示百分比问题
Betty_666的博客
06-05 697
【代码】echarts扇形tooltip展示百分比问题。
uniapp.zip
04-23
5. **utils**：包含各种辅助函数和工具类，用于提高代码复用性和可维护性。 6. **config**：配置文件，用于设置项目的基本信息，如API接口地址、页面路由等。 7. **manifest.json**：描述应用的信息，如名称、图标...
基于Vue和uniapp的AGE动漫风格设计源码
02-08
整体来看，这份源码集合了当前前端开发的多种技术和工具，通过精心设计实现了一种独特的动漫风格视觉效果，提供了跨平台的开发能力，将视觉设计与前端技术完美结合。对于前端开发者以及对动漫风格有所追求的设计师来...
uniapp的原子类
03-25
尽管未明确提及“原子类”的概念，但通过它的工具类和样式配置可以间接实现类似的效果。例如： - **视图容器**：`<view>` 等标签配合 `class` 属性可快速创建具有特定样式的区块。 - **布局管理**：利用栅格系统或...
uniapp内使用iconfont
03-20
前往阿里巴巴矢量图标库 (https://www.iconfont.cn/) 创建属于自己的图标集合，并下载对应的 `iconfont` 字体包。该字体包通常包含以下文件： - `iconfont.css`: 定义图标的样式。 - `iconfont.ttf`, `iconfont.woff...
echarts柱状图实现数据百分比展示 （数据相加为100%）
weixin_45195355的博客
01-15 3156
【代码】echarts柱状图实现数据百分比展示 （数据相加为100%）
2021-04-17
llykingsohyun的博客
04-17 167
js 工具类 let _debounceTimeout = null, _throttleRunning = false /** * 防抖 * @param {Function} 执行函数 * @param {Number} delay 延时ms */ export const debounce = (fn, delay=500) => { clearTimeout(_debounceTimeout); _debounceTimeout = setTi
Echarts 计算每份占比（等分）
weixin_39428080的博客
11-02 929
option = { series: [ { type: "gauge", startAngle: 190, endAngle: -10, min: 0, max: 100, axisLine: { lineStyle: { width: 15, color: [ [0.3, "#91BB7E"..
uni-app工具类
az44yao的专栏
06-10 1426
在main.js中引入 import {msg,isLogin,debounce,throttle,prePage,date} from '@/common/js/util' Vue.prototype.$util = {msg,isLogin,debounce,throttle,prePage,date} 在common下建一个js文件夹=》包含一个util.js
Echarts扇形图颜色自定义以及显示扇形百分比值
80岁小姑娘的博客
10-20 685
【代码】Echarts扇形图颜色自定义以及显示扇形百分比值。
最大余额法：JAVA解决计算占比不等于100%的问题
涛哥是个大帅比
04-23 2091
在实际开发过程中，我们会遇到计算百分比的需求，此需求很简单，只需要将所有的样本数据相加得到总数，再分别用每个样本除以总数，即可得到每份的占比。但是存在着一个问题，就是当除不尽时，受限于保留数据的精度问题（四舍五入），你会发现把每份的占比相加，竟然不等于100%，数据或大或小。为了解决这个问题，"最大余额"算法出现了（Echarts使用的就是此方法）。
uniapp组件，工具类
weixin_45085477的博客
12-16 923
1.app.vue可以引入全局css 2.main.js可以引入全局js (import 挂属性规范命名) 3.局部工具类引用（直接import）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值