vue 之常用工具文件

程序媛刘刘

已于 2024-05-17 09:32:30 修改

阅读量836

点赞数 2

分类专栏：开发记录文章标签： vue.js javascript 前端 css

于 2022-12-26 13:13:36 首次发布

本文链接：https://blog.csdn.net/weixin_53105591/article/details/128443119

版权

开发记录专栏收录该内容

43 篇文章 1 订阅

订阅专栏

utils.js :

作用：日常工具方法封装

// 身份证/手机号加密显示
export function encrypt(data){
    let msg;
    if(data.length==11){
        msg=data.slice(0,3)+'*****'+data.slice(data.length-3,data.length)
    }else{
        msg=data.slice(0,3)+'**********'+data.slice(data.length-3,data.length) 
    }
    return msg
}

var sfz=sfz.replace(/^(.{1})(?:\d+)(.{1})$/, "$1*************$2")
var phone=Phone.replace(/^(\d{3})\d{6}(\d{2})$/, "$1******$2")
               
// 姓名加密显示

 var orgName=OrgName.replace(/.(?=.)/g, '*')

export function encryptName(data){
      
      if(data.length>3){
        data=data.slice(0,1)+'***'+data.slice(data.length-1,data.length)
      }else if(data.length==2){
        data=data.slice(0,1)+'*'
      }else{
        data=data.slice(0,1)+'*'+data.slice(data.length-1,data.length)
      }
    return data
}

//时间戳转换为带'-'时间
 export function reSetData(data) {
    let time = data.match(/\(([^)]*)\)/)
    let date = new Date(Number(data))
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
     let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
     let muinte = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
    //  let second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()		
    return date.getFullYear() + "-" + month + "-" + day+"  "+hour+":"+muinte
}
// 标准时间转换
export function reSetAllData(datas){
    let data=new Date(datas);
    console.log(data);
    let value = data.getFullYear() + '-' +
    checkTime(data.getMonth() + 1) + '-' +
    checkTime(data.getDate()) + ' ' 
    // +
    // checkTime(data.getHours()) + ':' +
    // checkTime(data.getMinutes()) + ':' +
    // checkTime(data.getSeconds());
    return value
}
function checkTime(s) {
    return s < 10 ? '0' + s : s
  }
//获取验证码
export function timeDelay(){
    if(this.timer === 0){
        this.getMsg = '获取验证码';
        this.timer = 60;
        this.showMsg=false;
    }else{
        this.showMsg=true;
        this.getMsg = '重新发送('+this.timer+')';
        this.timer--;
        var _this=this;
        setTimeout(function() {
          _this.timeDelay(_this.timer);
        }, 1000);
    }
}

// 返回数据统一修改成小写（预防后端数据大小写不一致需要多次改代码的情况）
export function convertKeysToLowercase(data) {
  if (typeof data === 'object') {
    if (Array.isArray(data)) {
      return data.map(item => convertKeysToLowercase(item));
    } else {
      const convertedData = {};
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          const lowercaseKey = key.toLowerCase();
          convertedData[lowercaseKey] = convertKeysToLowercase(data[key]);
        }
      }
      return convertedData;
    }
  } else {
    return data;
  }
}



/**
 * 验证百分比（不可以小数）
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyNumberPercentage(val: string): string {
	// 匹配空格
	let v = val.replace(/(^\s*)|(\s*$)/g, '');
	// 只能是数字和小数点，不能是其他输入
	v = v.replace(/[^\d]/g, '');
	// 不能以0开始
	v = v.replace(/^0/g, '');
	// 数字超过100，赋值成最大值100
	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
	// 返回结果
	return v;
}

/**
 * 验证百分比（可以小数）
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyNumberPercentageFloat(val: string): string {
	let v = verifyNumberIntegerAndFloat(val);
	// 数字超过100，赋值成最大值100
	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
	// 超过100之后不给再输入值
	v = v.replace(/^100\.$/, '100');
	// 返回结果
	return v;
}

/**
 * 小数或整数(不可以负数)
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyNumberIntegerAndFloat(val: string) {
	// 匹配空格
	let v = val.replace(/(^\s*)|(\s*$)/g, '');
	// 只能是数字和小数点，不能是其他输入
	v = v.replace(/[^\d.]/g, '');
	// 以0开始只能输入一个
	v = v.replace(/^0{2}$/g, '0');
	// 保证第一位只能是数字，不能是点
	v = v.replace(/^\./g, '');
	// 小数只能出现1位
	v = v.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
	// 小数点后面保留2位
	v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
	// 返回结果
	return v;
}

/**
 * 正整数验证
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifiyNumberInteger(val: string) {
	// 匹配空格
	let v = val.replace(/(^\s*)|(\s*$)/g, '');
	// 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
	v = v.replace(/[\.]*/g, '');
	// 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
	v = v.replace(/(^0[\d]*)$/g, '0');
	// 首位是0,只能出现一次
	v = v.replace(/^0\d$/g, '0');
	// 只匹配数字
	v = v.replace(/[^\d]/g, '');
	// 返回结果
	return v;
}

/**
 * 去掉中文及空格
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyCnAndSpace(val: string) {
	// 匹配中文与空格
	let v = val.replace(/[\u4e00-\u9fa5\s]+/g, '');
	// 匹配空格
	v = v.replace(/(^\s*)|(\s*$)/g, '');
	// 返回结果
	return v;
}

/**
 * 去掉英文及空格
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyEnAndSpace(val: string) {
	// 匹配英文与空格
	let v = val.replace(/[a-zA-Z]+/g, '');
	// 匹配空格
	v = v.replace(/(^\s*)|(\s*$)/g, '');
	// 返回结果
	return v;
}

/**
 * 禁止输入空格
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyAndSpace(val: string) {
	// 匹配空格
	let v = val.replace(/(^\s*)|(\s*$)/g, '');
	// 返回结果
	return v;
}

/**
 * 金额用 `,` 区分开
 * @param val 当前值字符串
 * @returns 返回处理后的字符串
 */
export function verifyNumberComma(val: string) {
	// 调用小数或整数(不可以负数)方法
	let v: any = verifyNumberIntegerAndFloat(val);
	// 字符串转成数组
	v = v.toString().split('.');
	// \B 匹配非单词边界，两边都是单词字符或者两边都是非单词字符
	v[0] = v[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	// 数组转字符串
	v = v.join('.');
	// 返回结果
	return v;
}

/**
 * 匹配文字变色（搜索时）
 * @param val 当前值字符串
 * @param text 要处理的字符串值
 * @param color 搜索到时字体高亮颜色
 * @returns 返回处理后的字符串
 */
export function verifyTextColor(val: string, text = '', color = 'red') {
	// 返回内容，添加颜色
	let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`);
	// 返回结果
	return v;
}

/**
 * 数字转中文大写
 * @param val 当前值字符串
 * @param unit 默认：仟佰拾亿仟佰拾万仟佰拾元角分
 * @returns 返回处理后的字符串
 */
export function verifyNumberCnUppercase(val: any, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
	// 当前内容字符串添加 2个0，为什么??
	val += '00';
	// 返回某个指定的字符串值在字符串中首次出现的位置，没有出现，则该方法返回 -1
	let lookup = val.indexOf('.');
	// substring：不包含结束下标内容，substr：包含结束下标内容
	if (lookup >= 0) val = val.substring(0, lookup) + val.substr(lookup + 1, 2);
	// 根据内容 val 的长度，截取返回对应大写
	unit = unit.substr(unit.length - val.length);
	// 循环截取拼接大写
	for (let i = 0; i < val.length; i++) {
		v += '零壹贰叁肆伍陆柒捌玖'.substr(val.substr(i, 1), 1) + unit.substr(i, 1);
	}
	// 正则处理
	v = v
		.replace(/零角零分$/, '整')
		.replace(/零[仟佰拾]/g, '零')
		.replace(/零{2,}/g, '零')
		.replace(/零([亿|万])/g, '$1')
		.replace(/零+元/, '元')
		.replace(/亿零{0,3}万/, '亿')
		.replace(/^元/, '零元');
	// 返回结果
	return v;
}

/**
 * 手机号码
 * @param val 当前值字符串
 * @returns 返回 true: 手机号码正确
 */
export function verifyPhone(val: string) {
	// false: 手机号码不正确
	if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/.test(val)) return false;
	// true: 手机号码正确
	else return true;
}

/**
 * 国内电话号码
 * @param val 当前值字符串
 * @returns 返回 true: 国内电话号码正确
 */
export function verifyTelPhone(val: string) {
	// false: 国内电话号码不正确
	if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false;
	// true: 国内电话号码正确
	else return true;
}

/**
 * 登录账号 (字母开头，允许5-16字节，允许字母数字下划线)
 * @param val 当前值字符串
 * @returns 返回 true: 登录账号正确
 */
export function verifyAccount(val: string) {
	// false: 登录账号不正确
	if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(val)) return false;
	// true: 登录账号正确
	else return true;
}

/**
 * 密码 (以字母开头，长度在6~16之间，只能包含字母、数字和下划线)
 * @param val 当前值字符串
 * @returns 返回 true: 密码正确
 */
export function verifyPassword(val: string) {
	// false: 密码不正确
	if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false;
	// true: 密码正确
	else return true;
}

/**
 * 强密码 (字母+数字+特殊字符，长度在6-16之间)
 * @param val 当前值字符串
 * @returns 返回 true: 强密码正确
 */
export function verifyPasswordPowerful(val: string) {
	// false: 强密码不正确
	if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
		return false;
	// true: 强密码正确
	else return true;
}

/**
 * 密码强度
 * @param val 当前值字符串
 * @description 弱：纯数字，纯字母，纯特殊字符
 * @description 中：字母+数字，字母+特殊字符，数字+特殊字符
 * @description 强：字母+数字+特殊字符
 * @returns 返回处理后的字符串：弱、中、强
 */
export function verifyPasswordStrength(val: string) {
	let v = '';
	// 弱：纯数字，纯字母，纯特殊字符
	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱';
	// 中：字母+数字，字母+特殊字符，数字+特殊字符
	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中';
	// 强：字母+数字+特殊字符
	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
		v = '强';
	// 返回结果
	return v;
}

/**
 * IP地址
 * @param val 当前值字符串
 * @returns 返回 true: IP地址正确
 */
export function verifyIPAddress(val: string) {
	// false: IP地址不正确
	if (
		!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
			val
		)
	)
		return false;
	// true: IP地址正确
	else return true;
}

/**
 * 邮箱
 * @param val 当前值字符串
 * @returns 返回 true: 邮箱正确
 */
export function verifyEmail(val: string) {
	// false: 邮箱不正确
	if (
		!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
			val
		)
	)
		return false;
	// true: 邮箱正确
	else return true;
}

/**
 * 身份证
 * @param val 当前值字符串
 * @returns 返回 true: 身份证正确
 */
export function verifyIdCard(val: string) {
	// false: 身份证不正确
	if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) return false;
	// true: 身份证正确
	else return true;
}

/**
 * 姓名
 * @param val 当前值字符串
 * @returns 返回 true: 姓名正确
 */
export function verifyFullName(val: string) {
	// false: 姓名不正确
	if (!/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/.test(val)) return false;
	// true: 姓名正确
	else return true;
}

/**
 * 邮政编码
 * @param val 当前值字符串
 * @returns 返回 true: 邮政编码正确
 */
export function verifyPostalCode(val: string) {
	// false: 邮政编码不正确
	if (!/^[1-9][0-9]{5}$/.test(val)) return false;
	// true: 邮政编码正确
	else return true;
}

/**
 * url 处理
 * @param val 当前值字符串
 * @returns 返回 true: url 正确
 */
export function verifyUrl(val: string) {
	// false: url不正确
	if (
		!/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
			val
		)
	)
		return false;
	// true: url正确
	else return true;
}

/**
 * 车牌号
 * @param val 当前值字符串
 * @returns 返回 true：车牌号正确
 */
export function verifyCarNum(val: string) {
	// false: 车牌号不正确
	if (
		!/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
			val
		)
	)
		return false;
	// true：车牌号正确
	else return true;
}


/**
 * 判断两数组字符串是否相同（用于按钮权限验证），数组字符串中存在相同时会自动去重（按钮权限标识不会重复）
 * @param news 新数据
 * @param old 源数据
 * @returns 两数组相同返回 `true`，反之则反
 */
export function judementSameArr(newArr: unknown[] | string[], oldArr: string[]): boolean {
	const news = removeDuplicate(newArr);
	const olds = removeDuplicate(oldArr);
	let count = 0;
	const leng = news.length;
	for (let i in olds) {
		for (let j in news) {
			if (olds[i] === news[j]) count++;
		}
	}
	return count === leng ? true : false;
}

/**
 * 判断两个对象是否相同
 * @param a 要比较的对象一
 * @param b 要比较的对象二
 * @returns 相同返回 true，反之则反
 */
export function isObjectValueEqual<T>(a: T, b: T): boolean {
	if (!a || !b) return false;
	let aProps = Object.getOwnPropertyNames(a);
	let bProps = Object.getOwnPropertyNames(b);
	if (aProps.length != bProps.length) return false;
	for (let i = 0; i < aProps.length; i++) {
		let propName = aProps[i];
		let propA = a[propName];
		let propB = b[propName];
		if (!b.hasOwnProperty(propName)) return false;
		if (propA instanceof Object) {
			if (!isObjectValueEqual(propA, propB)) return false;
		} else if (propA !== propB) {
			return false;
		}
	}
	return true;
}

/**
 * 数组、数组对象去重
 * @param arr 数组内容
 * @param attr 需要去重的键值（数组对象）
 * @returns
 */
export function removeDuplicate(arr: EmptyArrayType, attr?: string) {
	if (!Object.keys(arr).length) {
		return arr;
	} else {
		if (attr) {
			const obj: EmptyObjectType = {};
			return arr.reduce((cur: EmptyArrayType[], item: EmptyArrayType) => {
				obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
				return cur;
			}, []);
		} else {
			return [...new Set(arr)];
		}
	}
}


/**
 * 时间日期转换
 * @param date 当前时间，new Date() 格式
 * @param format 需要转换的时间格式字符串
 * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
 * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
 * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
 * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
 * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
 * @returns 返回拼接后的时间字符串
 */
export function formatDate(date: Date, format: string): string {
	let we = date.getDay(); // 星期
	let z = getWeek(date); // 周
	let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
	const opt: { [key: string]: string } = {
		'Y+': date.getFullYear().toString(), // 年
		'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
		'd+': date.getDate().toString(), // 日
		'H+': date.getHours().toString(), // 时
		'M+': date.getMinutes().toString(), // 分
		'S+': date.getSeconds().toString(), // 秒
		'q+': qut, // 季度
	};
	// 中文数字 (星期)
	const week: { [key: string]: string } = {
		'0': '日',
		'1': '一',
		'2': '二',
		'3': '三',
		'4': '四',
		'5': '五',
		'6': '六',
	};
	// 中文数字（季度）
	const quarter: { [key: string]: string } = {
		'1': '一',
		'2': '二',
		'3': '三',
		'4': '四',
	};
	if (/(W+)/.test(format))
		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
	if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
	if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
	for (let k in opt) {
		let r = new RegExp('(' + k + ')').exec(format);
		// 若输入的长度不为1，则前面补零
		if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
	}
	return format;
}

/**
 * 获取当前日期是第几周
 * @param dateTime 当前传入的日期值
 * @returns 返回第几周数字值
 */
export function getWeek(dateTime: Date): number {
	let temptTime = new Date(dateTime.getTime());
	// 周几
	let weekday = temptTime.getDay() || 7;
	// 周1+5天=周六
	temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
	let firstDay = new Date(temptTime.getFullYear(), 0, 1);
	let dayOfWeek = firstDay.getDay();
	let spendDay = 1;
	if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1;
	firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
	let d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000);
	let result = Math.ceil(d / 7);
	return result;
}

/**
 * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
 * @param param 当前时间，new Date() 格式或者字符串时间格式
 * @param format 需要转换的时间格式字符串
 * @description param 10秒：  10 * 1000
 * @description param 1分：   60 * 1000
 * @description param 1小时： 60 * 60 * 1000
 * @description param 24小时：60 * 60 * 24 * 1000
 * @description param 3天：   60 * 60* 24 * 1000 * 3
 * @returns 返回拼接后的时间字符串
 */
export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
	// 传入格式处理、存储转换值
	let t: any, s: number;
	// 获取js 时间戳
	let time: number = new Date().getTime();
	// 是否是对象
	typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
	// 当前时间戳 - 传入时间戳
	time = Number.parseInt(`${time - t}`);
	if (time < 10000) {
		// 10秒内
		return '刚刚';
	} else if (time < 60000 && time >= 10000) {
		// 超过10秒少于1分钟内
		s = Math.floor(time / 1000);
		return `${s}秒前`;
	} else if (time < 3600000 && time >= 60000) {
		// 超过1分钟少于1小时
		s = Math.floor(time / 60000);
		return `${s}分钟前`;
	} else if (time < 86400000 && time >= 3600000) {
		// 超过1小时少于24小时
		s = Math.floor(time / 3600000);
		return `${s}小时前`;
	} else if (time < 259200000 && time >= 86400000) {
		// 超过1天少于3天内
		s = Math.floor(time / 86400000);
		return `${s}天前`;
	} else {
		// 超过3天
		let date = typeof param === 'string' || 'object' ? new Date(param) : param;
		return formatDate(date, format);
	}
}

/**
 * 时间问候语
 * @param param 当前时间，new Date() 格式
 * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
 * @returns 返回拼接后的时间字符串
 */
export function formatAxis(param: Date): string {
	let hour: number = new Date(param).getHours();
	if (hour < 6) return '凌晨好';
	else if (hour < 9) return '早上好';
	else if (hour < 12) return '上午好';
	else if (hour < 14) return '中午好';
	else if (hour < 17) return '下午好';
	else if (hour < 19) return '傍晚好';
	else if (hour < 22) return '晚上好';
	else return '夜里好';
}


import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';

export default function () {
	const { t } = useI18n();
	const { toClipboard } = useClipboard();

	// 百分比格式化
	const percentFormat = (row: EmptyArrayType, column: number, cellValue: string) => {
		return cellValue ? `${cellValue}%` : '-';
	};
	// 列表日期时间格式化
	const dateFormatYMD = (row: EmptyArrayType, column: number, cellValue: string) => {
		if (!cellValue) return '-';
		return formatDate(new Date(cellValue), 'YYYY-mm-dd');
	};
	// 列表日期时间格式化
	const dateFormatYMDHMS = (row: EmptyArrayType, column: number, cellValue: string) => {
		if (!cellValue) return '-';
		return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
	};
	// 列表日期时间格式化
	const dateFormatHMS = (row: EmptyArrayType, column: number, cellValue: string) => {
		if (!cellValue) return '-';
		let time = 0;
		if (typeof row === 'number') time = row;
		if (typeof cellValue === 'number') time = cellValue;
		return formatDate(new Date(time * 1000), 'HH:MM:SS');
	};
	// 小数格式化
	const scaleFormat = (value: string = '0', scale: number = 4) => {
		return Number.parseFloat(value).toFixed(scale);
	};
	// 小数格式化
	const scale2Format = (value: string = '0') => {
		return Number.parseFloat(value).toFixed(2);
	};
	// 点击复制文本
	const copyText = (text: string) => {
		return new Promise((resolve, reject) => {
			try {
				//复制
				toClipboard(text);
				//下面可以设置复制成功的提示框等操作
				ElMessage.success(t('message.layout.copyTextSuccess'));
				resolve(text);
			} catch (e) {
				//复制失败
				ElMessage.error(t('message.layout.copyTextError'));
				reject(e);
			}
		});
	};
	return {
		percentFormat,
		dateFormatYMD,
		dateFormatYMDHMS,
		dateFormatHMS,
		scaleFormat,
		scale2Format,
		copyText,
	};
}

storage.js

作用：本地/临时存储方法

import Cookies from 'js-cookie';

/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
export const Local = {
	// 查看 v2.4.3版本更新日志
	setKey(key: string) {
		// @ts-ignore
		return `${__NEXT_NAME__}:${key}`;
	},
	// 设置永久缓存
	set<T>(key: string, val: T) {
		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 获取永久缓存
	get(key: string) {
		let json = <string>window.localStorage.getItem(Local.setKey(key));
		return JSON.parse(json);
	},
	// 移除永久缓存
	remove(key: string) {
		window.localStorage.removeItem(Local.setKey(key));
	},
	// 移除全部永久缓存
	clear() {
		window.localStorage.clear();
	},
};

/**
 * window.sessionStorage 浏览器临时缓存
 * @method set 设置临时缓存
 * @method get 获取临时缓存
 * @method remove 移除临时缓存
 * @method clear 移除全部临时缓存
 */
export const Session = {
	// 设置临时缓存
	set<T>(key: string, val: T) {
		if (key === 'token') return Cookies.set(key, val);
		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 获取临时缓存
	get(key: string) {
		if (key === 'token') return Cookies.get(key);
		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
		return JSON.parse(json);
	},
	// 移除临时缓存
	remove(key: string) {
		if (key === 'token') return Cookies.remove(key);
		window.sessionStorage.removeItem(Local.setKey(key));
	},
	// 移除全部临时缓存
	clear() {
		Cookies.remove('token');
		window.sessionStorage.clear();
	},
};

页面显示水印：

// 页面添加水印效果
const setWatermark = (str: string) => {
	const id = '1.23452384164.123412416';
	if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
	const can = document.createElement('canvas');
	can.width = 200;
	can.height = 130;
	const cans = <CanvasRenderingContext2D>can.getContext('2d');
	cans.rotate((-20 * Math.PI) / 180);
	cans.font = '12px Vedana';
	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
	cans.textBaseline = 'middle';
	cans.fillText(str, can.width / 10, can.height / 2);
	const div = document.createElement('div');
	div.id = id;
	div.style.pointerEvents = 'none';
	div.style.top = '0px';
	div.style.left = '0px';
	div.style.position = 'fixed';
	div.style.zIndex = '10000000';
	div.style.width = `${document.documentElement.clientWidth}px`;
	div.style.height = `${document.documentElement.clientHeight}px`;
	div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
	document.body.appendChild(div);
	return id;
};

/**
 * 页面添加水印效果
 * @method set 设置水印
 * @method del 删除水印
 */
const watermark = {
	// 设置水印
	set: (str: string) => {
		let id = setWatermark(str);
		if (document.getElementById(id) === null) id = setWatermark(str);
	},
	// 删除水印
	del: () => {
		let id = '1.23452384164.123412416';
		if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
	},
};

// 导出方法
export default watermark;

encrypt.js :

作用：各种加密方法封装使用

前提：jsencrypt，crypto-js，sm-crypto已下载

import { JSEncrypt } from 'jsencrypt'
import {enc, mode, AES, pad,DES,MD5} from "crypto-js";
const SM2 = require('sm-crypto').sm2
const SM3 = require('sm-crypto').sm3
const SM4 = require('sm-crypto').sm4

// base64 加密
var Base64 = {
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    encode: function (e) {
        var t = "";
        var n, r, i, s, o, u, a;
        var f = 0;
        e = Base64._utf8_encode(e);
        while (f < e.length) {
            n = e.charCodeAt(f++);
            r = e.charCodeAt(f++);
            i = e.charCodeAt(f++);
            s = n >> 2;
            o = (n & 3) << 4 | r >> 4;
            u = (r & 15) << 2 | i >> 6;
            a = i & 63;
            if (isNaN(r)) {
                u = a = 64
            } else if (isNaN(i)) {
                a = 64
            }
            t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
        }
        return t
    },
    decode: function (e) {
        var t = "";
        var n, r, i;
        var s, o, u, a;
        var f = 0;
        e = e.replace(/[^A-Za-z0-9+/=]/g, "");
        while (f < e.length) {
            s = this._keyStr.indexOf(e.charAt(f++));
            o = this._keyStr.indexOf(e.charAt(f++));
            u = this._keyStr.indexOf(e.charAt(f++));
            a = this._keyStr.indexOf(e.charAt(f++));
            n = s << 2 | o >> 4;
            r = (o & 15) << 4 | u >> 2;
            i = (u & 3) << 6 | a;
            t = t + String.fromCharCode(n);
            if (u != 64) {
                t = t + String.fromCharCode(r)
            }
            if (a != 64) {
                t = t + String.fromCharCode(i)
            }
        }
        t = Base64._utf8_decode(t);
        return t
    },
    _utf8_encode: function (e) {
        e = e.replace(/rn/g, "n");
        var t = "";
        for (var n = 0; n < e.length; n++) {
            var r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r)
            } else if (r > 127 && r < 2048) {
                t += String.fromCharCode(r >> 6 | 192);
                t += String.fromCharCode(r & 63 | 128)
            } else {
                t += String.fromCharCode(r >> 12 | 224);
                t += String.fromCharCode(r >> 6 & 63 | 128);
                t += String.fromCharCode(r & 63 | 128)
            }
        }
        return t
    },
    _utf8_decode: function (e) {
        var t = "";
        var n = 0;
        var r = 0;
        var c1=0;
        var c2=0;
 
        while (n < e.length) {
            r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r);
                n++
            } else if (r > 191 && r < 224) {
                c2 = e.charCodeAt(n + 1);
                t += String.fromCharCode((r & 31) << 6 | c2 & 63);
                n += 2
            } else {
                c2 = e.charCodeAt(n + 1);
                var c3 = e.charCodeAt(n + 2);
                t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
                n += 3
            }
        }
        return t
    }
}
// RSA加密:
var JSEncryptKey = {
    // 公钥
     publicKey :"MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArflOnHHKOXRYIsh/Lurq5lhRmsYKcNRjvib8y7xs0HdPXWp99sl2bQy1kRm3vbClKpOkB/TohhIEp3dk6GsS2c8HV3Uuulkdy3kYNzTnh4bTefUBMu3Y9ZXO5S07wr6MozHN+v7RsqHlDPLBP2tHv06EgYjbwBtKII92cjgFN/AuLj9O9P9bMoHNDFJqyZsmsplXf6FXP3b4gyOjZWtX0QAuLvWiddAACEuF74Ej4ckTI9ThgDTNjOHfM1DjNaO2T4zS6iA5DHn7dQKQ82Cree/hXvzvr2DsjvgkSOvV5L/Qivrs7FTE08KLTCYgfgxGBH22X87BMy9fDzWGzAICuwIDAQAB" , 
    // 私钥
     personKey :"MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCt+U6ccco5dFgiyH8u6urmWFGaxgpw1GO+JvzLvGzQd09dan32yXZtDLWRGbe9sKUqk6QH9OiGEgSnd2ToaxLZzwdXdS66WR3LeRg3NOeHhtN59QEy7dj1lc7lLTvCvoyjMc36/tGyoeUM8sE/a0e/ToSBiNvAG0ogj3ZyOAU38C4uP070/1sygc0MUmrJmyaymVd/oVc/dviDI6Nla1fRAC4u9aJ10AAIS4XvgSPhyRMj1OGANM2M4d8zUOM1o7ZPjNLqIDkMeft1ApDzYKt57+Fe/O+vYOyO+CRI69Xkv9CK+uzsVMTTwotMJiB+DEYEfbZfzsEzL18PNYbMAgK7AgMBAAECggEBAKAy/gxZS9n0JGSDM3pEn+FUWnCnBF45dU9YH1iMPbcI5nAi67MgeIiaN2dRwzxNOQonwdgB0UwDs31yF91dG5KtbRk/srOt9B21eHL9qGXH5VxcG6qGEk6ykD3AlVMSm/Z6mi4SD47qPTzbHNAFPaAP8TxGhfQ0LOImuO8cXtHON5aV/oti+80X4NSJG2ieVVPYTRuUGTQf/4UlTUMG7jJB38Ysv8cDAyxhCVGTXHP6fwCedaqOcSsDuCI+biEBwwde0t+fmf5O3PtvF0t643e8BWEXen4+mrRG83vZHsiSAJFKD+whKUZlbuLGNefVuRMr7wFeqcl/qs3Y3Bf4ScECgYEA4D+k3YNPlcgy2nVsE5rHrCZ7zGKhefdTNlyqdNrDW0E2FghUODYG6UzEEpJSJrRlyo7G7RSvJzgTwDv0id7uhUSq1YM/82YzY5RDOcYtL5CP1UrIgDVKs67Zr25kYsQm9zBI/9m/1iQ94M3zN414edBiXU40OvJbbPe6kZsIUMkCgYEAxptZsAALMxSrxdNQxAKMbKQeWpWn1GxlTun+uouWsNPMQfXg5uYhYd7bKi+R7BfTXPcBipFYBfVJgC+d2EfTu/lHYfIBVhnCDqmzvVk1HhDp0xyeEIhAKeWxyvSkA1msyCsfMkszQdT4/rBEfHP7Jb2/vnuDKagkNEdIAseEHWMCgYA3sDZt+BUEekH+tFhRigd5/diSig/VrRDSGDMQb99BwzD+SbU4fFo9B55Nil6yU+xPYCOQbqmMkMV+4KS6tE0BdWsDOOPhuwiZ+xCywT8pZ7oAWuDtzc4uTwaqJTzytgmDK0+Fkfqs4DUppZt3uT8o6RH0X95ioRsJNX/0ds6a2QKBgFPvOaMxEYqf9MxhNyPvc8tCPPXJg6k5ukL0j0vlTGUkzZEeydKrdXY4SeV1PzVJCHGkjkkyjcHO3SZIeWv7RxeNDUbukPQDZMjvnV+rgNBZE4i98mtIOd27Dj2Y0Gv+DRB3cPK/Z0UuLaDte7QhDAXyQEPPTSpgvhQ9/8f06/fDAoGBAIdvo19myCCK18R9/TwirW3BHL1JzodMEyO7x7DXGJSpDf8CUYLNhOVdHlaOy15xyz4h8vMaAtEth8wVeHqHh0Z0kwzzB0ywnCIaJVznZLLJgvJ82hDZSIS3FL7S4LEa1Nq+otx1pw7gEfknv6vBsbtEpcRwEYjISVGwslQ5ByBT",
    encrypt:function (msg){
        const encrypt = new JSEncrypt(msg)
        encrypt.setPublicKey(this.publicKey)
        const encryptMsg = encrypt.encrypt(msg)
        return encryptMsg
    },
    decrypt:function(msg){
        const decrypt = new JSEncrypt()
        decrypt.setPrivateKey(this.personKey )
        const decryptMsg = decrypt.decrypt(msg)
        return decryptMsg
    }
}
// AES加密:
var CryptoAESKey={
    key:'1234567812345678',
    iv:'12345678912345678',
    encrypt:function(msg){
        var data = enc.Utf8.parse(msg);
		var encrypted = AES.encrypt(data, this.key, {
			iv: this.iv,
			mode: mode.CBC,
			padding:pad.ZeroPadding
		});
		return encrypted.toString();

    },
    decrypt:function(msg){
        var decrypted = AES.decrypt(msg, this.key, {
			iv: this.iv,
			mode: mode.CBC,
			padding:pad.ZeroPadding
		});
		return decrypted.toString(enc.Utf8);
    }
}
// DES加密:
var CryptoDESKey={
    key:'1234567812345678',
    // iv:'12345678912345678',

    // .net DES加密的默认模式---密文分组链接方式
    encryptCBC:function(msg){
		var encrypted = DES.encrypt(msg, this.key, {
			iv: this.key,
			mode: mode.CBC,
			padding:pad.Pkcs7
		});
		return encrypted.toString();

    },
    decryptCBC:function(msg){
        var decrypted = DES.decrypt(msg, this.key, {
			iv: this.key,
			mode: mode.CBC,
			padding:pad.Pkcs7
		});
		return decrypted.toString(enc.Utf8);
    },
    // java DES加密的默认模式---电子密本方式
    encryptECB:function(msg){
		var encrypted = DES.encrypt(msg, this.key, {
			mode: mode.ECB,
			padding:pad.Pkcs7
		});
		return encrypted.toString();

    },
    decryptECB:function(msg){
        var decrypted = DES.decrypt(msg, this.key, {
			mode: mode.ECB,
			padding:pad.Pkcs7
		});
		return decrypted.toString(enc.Utf8);
    }
}
// MD5加密
function MD5Key(msg){
   let data=MD5(msg)
   return data.toString()
}
// base64加密
var Base64Key={
    encrypt:function (msg){
        var data=enc.Utf8.parse(msg)
        return enc.Base64.stringify(data)
    },
    decrypt:function (msg){
        var data=enc.Base64.parse(msg)
        return data.toString(enc.Utf8)
    }
}
// SM2 加密
var SM2Key={
    // publicKey:SM2.generateKeyPairHex().publicKey , //公钥
    // privateKey:SM2.generateKeyPairHex().personKey , //私钥
    publicKey:'04'+'2E66D3CA2FBE23D0C54D79BA738883FB979D4C66267E7D9AA4D4BDE59E26E90037B550FEDC3ED517CA0C109E7F82B7677CAE1BC641718F4E96B427CF37CA6D0B' , //公钥
    personKey :'8A4B3BAB9AB3131FE130C550D353104EB0B9A6B947F6D0F8B700E4D228078561' , //私钥
    // compressedPublicKey :SM2.compressPublicKeyHex(publicKey) , //压缩公钥
    // SM2.comparePublicKeyHex(publicKey, compressedPublicKey)  判断压缩前后公钥是否等价
    // verifyResult :SM2.verifyPublicKey(this.publicKey),  //验证公钥
    cipherMode : 1,             // 1 - C1C3C2，0 - C1C2C3，默认为1
    encrypt:function (msg) {
        // console.log(this.publicKey);
        return SM2.doEncrypt(msg, this.publicKey, this.cipherMode)
    },
    decrypt:function(msg){
        // console.log( this.personKey );
        return SM2.doDecrypt(msg, this.personKey , this.cipherMode) 
    }

}
// SM3 加密
var SM3Key={
    encryptNormal:function (msg) {
        let data=SM3(msg)
        return data
    },
    encryptUser:function(msg){
        let key='daac25c1512fe50f79b0e4526b93f5c0e1460cef40b6dd44af13caec62e8c60e0d885f3c6d6fb51e530889e6fd4ac743a6d332e68a0f2a3923f42585dceb93e9'
        let data=SM3(msg,{key:key})
        return data 
    }

}
// SM4 加密
var SM4Key={
    tips:'温馨提示-----', // 可以为 utf8 串或字节数组
    key : '0123456789abcdeffedcba9876543210',            //可以为 16 进制串或字节数组，要求为 128 比特
    encrypt:function (msg) {
        return SM4.encrypt(msg, this.key) 加密，默认输出 16 进制字符串，默认使用 pkcs#7 填充（传 pkcs#5 也会走 pkcs#7 填充）
        return SM4.encrypt(msg, this.key,{padding: 'none'}) // 加密，不使用 padding
        return SM4.encrypt(msg, this.key,{padding: 'none', output: 'array'}) // 加密，不使用 padding，输出为字节数组
        return SM4.encrypt(msg, this.key,{mode: 'cbc', iv: 'fedcba98765432100123456789abcdef'}) // 加密，cbc 模式
    },
    decrypt:function(msg){
        return SM4.decrypt(msg, this.key)   解密，默认输出 utf8 字符串，默认使用 pkcs#7 填充（传 pkcs#5 也会走 pkcs#7 填充）
        return SM4.decrypt(msg, this.key,{padding: 'none'})   解密，不使用 padding
        return SM4.decrypt(msg, this.key, {padding: 'none', output: 'array'}) // 解密，不使用 padding，输出为字节数组
        return SM4.decrypt(msg, this.key, {mode: 'cbc', iv: 'fedcba98765432100123456789abcdef'}) // 解密，cbc 模式
    }

}

export {Base64,JSEncryptKey,CryptoAESKey,CryptoDESKey,MD5Key,Base64Key,SM2Key,SM3Key,SM4Key}

rem.js

作用：适配移动端rem文件

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

reSet.css:

作用：页面样式初始化修改

/* 重置样式表 */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
/* body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} */
body,textarea,input,button,select,keygen,legend{font-size:12px;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

模板：

作用：一些常见的列表样式和功能展示等内容

<template>
  <div style="">
    <div class="top"></div>
    <!-- 列表一 -->
   <div class="showListImgBox">
        <div class="List" > 
            <div class="ListItemCon">
                <div class="ListItem-titleBox">
                   <img src="../img/qygl.png" class="ListItem-titleImg">
                    <div class="ListItem-titleCon">标题</div>
                </div>
                <div class="ListItem-conBox">
                    <div class="ListItem-leftCon">
                        <img src="../img/logo.png" class="ListItem-leftConImg" />
                    </div>
                    <div class="ListItem-CenterCon">
                            <div class="ListItem-CenterCon-item">当前状态：<span>已通过</span></div>
                            <div class="ListItem-CenterCon-item">申请时间：<span>2022-12-22</span></div>
                        </div>
                    <div class="ListItem-rightCon">
                        <img src="../img/gd.png"  class="ListItem-rightConImg"/>
                    </div>
                </div>
            </div>
            <div class="top"></div>
        </div>
    
    </div>
   <!-- 列表二 -->
   <div class="showListLineBox">
       <div class="List">
          <div class="ListItemCon">
            <div class="ListItem-titleBox">
                <div class="ListItem-titleCon">标题</div>
                <div class="ListItem-titleCon">标题</div>
            </div>
            <!-- <div class="ListItem-titleBoxs">
                <div class="ListItem-titleCon ListItem-titleConLeft">标题</div>
                <div class="ListItem-titleCon ListItem-titleConRight">标题</div>
            </div> -->
            <div class="ListItem-conBox">
               <div class="ListItem-conBoxOne">
                <div class="ListItem-leftCon">
                    <div class="ListItem-leftCon-item">申请人：<span>XXX</span></div>   
                    <div class="ListItem-leftCon-item ">申请时间：<span>2022-12-22</span></div>   
                </div>
                <div class="ListItem-rightCon">
                      <img src="../img/gd.png"  class="ListItem-rightConImg"/>
                  </div>
               </div>
               <div class="ListItem-conBoxTwo">
                  <div class="ListItem-conBoxTwo-item">查看</div>
                  <div class="ListItem-conBoxTwo-item">删除</div>
               </div>
            </div>
          </div>
          <div class="top"></div>
       </div>
   </div>
   <!-- 列表三 -->
   <div class="showListDotBox">
       <div class="List">
          <div class="ListItemCon">
            <div class="ListItem-titleBox">
                <img src="../img/title.png" class="ListItem-titleImg">
                <div class="ListItem-titleCon">标题</div>
            </div>
            <div class="ListItem-conBox ">
              <div class="ListItem-leftCon">
                    <div class="ListItem-leftCon-item">申请人：<span>XXX</span></div>   
                    <div class="ListItem-leftCon-item ListItem-leftCon-Lastitem">申请时间：<span>2022-12-22</span></div>   
              </div>
              <div class="ListItem-rightCon">
                    <img src="../img/gd.png"  class="ListItem-rightConImg"/>
              </div>
            </div>
          </div>
          <div class="top"></div>
       </div>
   </div>
   <!-- 列表四 -->
   <div class="showListTipBox">
       <div class="List">
        <div class="ListItem">
          <div class="ListItem-left">
               <img src="../img/logo.png" alt="" class="ListItem-leftImg">
               <div class="ListItem-leftTipBox">
                     <div class="ListItem-leftTitle">标题</div>
                     <div class="ListItem-leftTips">简介信息</div>
               </div>
        </div>
          <img src="../img/gd.png" alt="" class="ListItem-rightImg">
        </div>
        <div class="top"></div>
       </div>
   </div>
   <!-- 列表五 -->
   <div class="showListNormalBox">
      <div class="List">
         <div class="ListItemCon">
              <div class="ListItemCon-leftCon">标题</div>
              <img src="../img/gd.png" alt="" class="ListItemCon-rightImg">
         </div>
         <div class="top"></div>
      </div>
   </div>
   <!--内容显示：  -->
   <div class="showInfoNormal">
      <div class="showInfoNormal-item"> 申请人：<span>XXX</span></div>
      <div class="showInfoNormal-item"> 申请时间：<span>2022-12-22</span></div>
      <div class="top"></div>
   </div>
   <!-- 输入框 -->
   <div class="showNormalInputBox">
        <div class="List">
          <div class="ListItemCon">
               <div class="ListItem"><div class="ListItem-title">申请人</div><input type="text"></div>
               <div class="ListItem"><div class="ListItem-title">印章密码</div><input type="password"></div>
               <div class="ListItem"><div class="ListItem-titles">手机号</div><input type="number"></div>
          </div>
          <div class="top"></div>
        </div>
   </div>
   <!-- 下拉菜单 -->
   <div class="showSelectBox">
         <div class="showSelectBox-title">选择区域：</div>
         <div class="showSelectBox-select">
          <select name="" >
            <option >美国</option>
            <option selected="selected">中国 </option>
            <option >俄罗斯 </option>
            <option >韩国</option>
         </select>
         </div>

   </div>
   <div class="top"></div>
   <!-- 按钮 -->
   <div class="showButtonBox">
        <div class="showCircleButton">圆角按钮</div>
        <div class="showSquareButton">方形按钮</div>

   </div>
   <div class="top"></div>
   <!-- 数据为空 -->
   <div class="showNullDataBox">
        <div class="showNullImg"><img src="../img/null.png" alt=""></div>
        <div class="showNullMsg">您还没有申请记录哦~</div>
        <div class="showButtonBox">
            <div class="showCircleButton">确定</div>
        </div>
   </div>
   <div class="top"></div>

  </div>
</template>

scss：

作用：模板的scss样式

//间距盒子
  .top{
    height:15px;
    background-color: #eee;
  }
//清除input默认样式
    input{
      border:none;
    }
// 下拉菜单修改默认样式
select {
  appearance:none;//清除默认样式
   -moz-appearance:none;
  -webkit-appearance:none;
  width:80%;
  // // 下拉箭头图片
  // background:url(../img/gd.png)  no-repeat right center;
  // padding-right:14px;// 留出来下拉箭头的位置
  width:150px;
  height:30px;
  border:1px solid #ccc;
  color:#999999;
  text-align: left;
  padding-left:5px;
}



// 列表样式1：标题带图片，内容三列展示（印模图片，印章介绍，查看箭头图片）    // margin:0 10px;改变showListBox这个值可以转换样式 
.showListImgBox{
  background-color: #fff;
  // margin:0 10px;  
  .List{
    .ListItemCon{
      // 标题
      .ListItem-titleBox{
        display: flex;
        align-items: center;
        padding:10px 20px;
	      border-bottom:2px solid #f7f7f7;
	      color:#000000;
        .ListItem-titleImg{
						 width:29px;
						 height:24px;
             margin-right:5px;
        }
        .ListItem-titleCon{
         text-align: center;
         font-size:14px;
        }
      }
      // 内容
      .ListItem-conBox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:15px 25px;
         .ListItem-leftCon{
            .ListItem-leftConImg{
              width:50px;
              height:50px;
            }
         }
         .ListItem-CenterCon{
          .ListItem-CenterCon-item{
            padding:2px 0;
            span{
              color: #666;
            }
          }
         }
         .ListItem-rightCon{
           .ListItem-rightConImg{
            width:20px;
            height:20px;
           }
         }
      }

    }
  }
}

//列表样式2： 左边竖线标题，两行内容  //ListItem-titleBox和ListItem-titleBoxs可切换
.showListLineBox{
  background-color: #fff;
  // margin:0 10px;
  .List{
    .ListItemCon{
      .ListItem-titleBox{
        display: flex;
        justify-content: space-between;
        border-left:5px solid #ff6f61;
				padding:10px 15px;
        .ListItem-titleCon{
           font-size:14px;
           color: #000;
        }
      }
      .ListItem-titleBoxs{
        display: flex;
        justify-content: space-between;
        padding:10px 0;
        .ListItem-titleConLeft{
          padding:0px 15px;
          border-left:5px solid #ff6f61;
        }
        .ListItem-titleConRight{
          padding:0px 15px;
        }
        .ListItem-titleCon{
           font-size:14px;
           color: #000;
        }
      }
      .ListItem-conBox{
          .ListItem-conBoxOne{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:15px 20px;
            .ListItem-leftCon{
             .ListItem-leftCon-item{
              padding:5px 0;
              span{
                color: #666;
              }
             }
            }
            .ListItem-rightCon{
              .ListItem-rightConImg{
                width:20px;
                height:20px;
              }
            }

          }
          .ListItem-conBoxTwo{
            border-top:2px solid #eee;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .ListItem-conBoxTwo-item{
              padding:10px 5px;
              color: #ff6f61;
            }
          }
      }
    }
  }

}

//列表样表3 ：标题带圆点，圆形边框
.showListDotBox{
  margin:0 10px;
  .List{
    .ListItemCon{
      background-color: #fff;
      border-radius:5px !important;
      .ListItem-titleBox{
       display: flex;
       align-items: center;
       font-size:14px;
       padding:10px;
       border-bottom:1px solid #eee;
       .ListItem-titleImg{
        width:10px;
        height:10px;
        padding:0 5px;
       }
      }
      .ListItem-conBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:15px 20px;
       .ListItem-leftCon{
          .ListItem-leftCon-item{
            padding:5px 0;
              span{
                color: #666;
              }
          }
          .ListItem-leftCon-Lastitem{
            padding-bottom:10px;
          }
       }
       .ListItem-rightCon{
           .ListItem-rightConImg{
            width:20px;
            height:20px;
           }
         }

      }
    }
  }
}

// 列表4：列表三列两列内容，两图一个提示
.showListTipBox{
  background-color: #fff;
  .List{
    .ListItem{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:10px 15px;
      .ListItem-left{
      display: flex;
        .ListItem-leftImg{
          width:50px;
          height:50px;
          margin-right:10px;
        }
        .ListItem-leftTipBox{
          .ListItem-leftTitle{
            font-size:14px;
          }
          .ListItem-leftTips{
            color: #666;
            padding:5px 10px;
          }
        }

    }
    .ListItem-rightImg{
      width:20px;
      height:20px;
    }
    }
    
  }
}

// 列表5 ：日常列表，一个标题，一个查看图片
.showListNormalBox{
  background-color: #fff;
  .List{
    .ListItemCon{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:10px 15px;
      .ListItemCon-leftCon{
        font-size:14px;
      }
      .ListItemCon-rightImg{
        width:20px;
        height:20px;
      }
    }
  }
}

// 内容显示：
.showInfoNormal{
  .showInfoNormal-item{
     background-color: #fff;
     border-bottom:1px solid #eee;
     padding:10px 20px;
    //  margin:10px 0;
     span{
      color: #666;
     }
  }
}

// 输入框：   //ListItem-title有必选*，ListItem-titles没有必选*
.showNormalInputBox{
  .List{
    .ListItemCon{
      padding:10px ;
      .ListItem{
        padding:10px;
        border-bottom:1px solid #eee;
        .ListItem-title ,.ListItem-titles{
           font-size:14px;
         }
         .ListItem-title::before{
            display: inline-block;
            margin-right: 4px;
            color: #f5222d;
            font-size: 14px;
            font-family: SimSun,sans-serif;
            line-height: 1;
            content: "*";
         }
         .ListItem-title::after,.ListItem-titles::after{
            content: ":";
            position: relative;
            top: -0.5px;
            margin: 0 8px 0 2px;
            padding-right:5px;
         }
      }
      
    }
  }
}

// 下拉菜单
.showSelectBox{
  display: flex;
  align-items: center;
  // justify-content: center;
  padding:10px 15px;
  .showSelectBox-title{
    font-size:14px;
    width:80px;
  }
  .showSelectBox-select{
    display: inline-block;
  }
}

// 按钮：   showCircleButton圆形按钮，showSquareButton方形按钮，修改bordr可以查看镂空。修改bgc可以查看全部背景
.showButtonBox{
  // margin-top:20px;
    display: flex;
    align-items: center;
    justify-content: space-around;  
    padding:10px 0;
    .showCircleButton{
      width:120px;
      height:40px;
      line-height:40px;
      background-color:#ed602a;
      color:#ffff;
      // border:1px solid #ed602a;
      // color: #c0c4cc;
      font-size:15px;
      border-radius:20px;
      text-align: center;
    }
    .showSquareButton{
      width:120px;
      height:40px;
      line-height:40px;
      background-color:#ed602a;
      color:#ffff;
      // border:1px solid #ed602a;
      // color: #c0c4cc;
      font-size:15px;
      text-align: center;
    }

}

// 列表数据为空展示
.showNullDataBox{
  background-color: #fff;
  .showNullImg{
   display: flex;
   align-items: center;
   justify-content: center;
   padding:25px 0;
   img{
     width:220px;
     height:168px;
   }
  }
  .showNullMsg{
   text-align: center;
   padding-bottom:25px;
  }

}

css：

作用：模板的css样式

.top {
  height: 15px;
  background-color: #eee;
}

input {
  border: none;
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 80%;
  width: 150px;
  height: 30px;
  border: 1px solid #ccc;
  color: #999999;
  text-align: left;
  padding-left: 5px;
}

.showListImgBox {
  background-color: #fff;
}

.showListImgBox .List .ListItemCon .ListItem-titleBox {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 2px solid #f7f7f7;
  color: #000000;
}

.showListImgBox .List .ListItemCon .ListItem-titleBox .ListItem-titleImg {
  width: 29px;
  height: 24px;
  margin-right: 5px;
}

.showListImgBox .List .ListItemCon .ListItem-titleBox .ListItem-titleCon {
  text-align: center;
  font-size: 14px;
}

.showListImgBox .List .ListItemCon .ListItem-conBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
}

.showListImgBox .List .ListItemCon .ListItem-conBox .ListItem-leftCon .ListItem-leftConImg {
  width: 50px;
  height: 50px;
}

.showListImgBox .List .ListItemCon .ListItem-conBox .ListItem-CenterCon .ListItem-CenterCon-item {
  padding: 2px 0;
}

.showListImgBox .List .ListItemCon .ListItem-conBox .ListItem-CenterCon .ListItem-CenterCon-item span {
  color: #666;
}

.showListImgBox .List .ListItemCon .ListItem-conBox .ListItem-rightCon .ListItem-rightConImg {
  width: 20px;
  height: 20px;
}

.showListLineBox {
  background-color: #fff;
}

.showListLineBox .List .ListItemCon .ListItem-titleBox {
  display: flex;
  justify-content: space-between;
  border-left: 5px solid #ff6f61;
  padding: 10px 15px;
}

.showListLineBox .List .ListItemCon .ListItem-titleBox .ListItem-titleCon {
  font-size: 14px;
  color: #000;
}

.showListLineBox .List .ListItemCon .ListItem-titleBoxs {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.showListLineBox .List .ListItemCon .ListItem-titleBoxs .ListItem-titleConLeft {
  padding: 0px 15px;
  border-left: 5px solid #ff6f61;
}

.showListLineBox .List .ListItemCon .ListItem-titleBoxs .ListItem-titleConRight {
  padding: 0px 15px;
}

.showListLineBox .List .ListItemCon .ListItem-titleBoxs .ListItem-titleCon {
  font-size: 14px;
  color: #000;
}

.showListLineBox .List .ListItemCon .ListItem-conBox .ListItem-conBoxOne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.showListLineBox .List .ListItemCon .ListItem-conBox .ListItem-conBoxOne .ListItem-leftCon .ListItem-leftCon-item {
  padding: 5px 0;
}

.showListLineBox .List .ListItemCon .ListItem-conBox .ListItem-conBoxOne .ListItem-leftCon .ListItem-leftCon-item span {
  color: #666;
}

.showListLineBox .List .ListItemCon .ListItem-conBox .ListItem-conBoxOne .ListItem-rightCon .ListItem-rightConImg {
  width: 20px;
  height: 20px;
}

.showListLineBox .List .ListItemCon .ListItem-conBox .ListItem-conBoxTwo {
  border-top: 2px solid #eee;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.showListLineBox .List .ListItemCon .ListItem-conBox .ListItem-conBoxTwo .ListItem-conBoxTwo-item {
  padding: 10px 5px;
  color: #ff6f61;
}

.showListDotBox {
  margin: 0 10px;
}

.showListDotBox .List .ListItemCon {
  background-color: #fff;
  border-radius: 5px !important;
}

.showListDotBox .List .ListItemCon .ListItem-titleBox {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.showListDotBox .List .ListItemCon .ListItem-titleBox .ListItem-titleImg {
  width: 10px;
  height: 10px;
  padding: 0 5px;
}

.showListDotBox .List .ListItemCon .ListItem-conBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.showListDotBox .List .ListItemCon .ListItem-conBox .ListItem-leftCon .ListItem-leftCon-item {
  padding: 5px 0;
}

.showListDotBox .List .ListItemCon .ListItem-conBox .ListItem-leftCon .ListItem-leftCon-item span {
  color: #666;
}

.showListDotBox .List .ListItemCon .ListItem-conBox .ListItem-leftCon .ListItem-leftCon-Lastitem {
  padding-bottom: 10px;
}

.showListDotBox .List .ListItemCon .ListItem-conBox .ListItem-rightCon .ListItem-rightConImg {
  width: 20px;
  height: 20px;
}

.showListTipBox {
  background-color: #fff;
}

.showListTipBox .List .ListItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
}

.showListTipBox .List .ListItem .ListItem-left {
  display: flex;
}

.showListTipBox .List .ListItem .ListItem-left .ListItem-leftImg {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.showListTipBox .List .ListItem .ListItem-left .ListItem-leftTipBox .ListItem-leftTitle {
  font-size: 14px;
}

.showListTipBox .List .ListItem .ListItem-left .ListItem-leftTipBox .ListItem-leftTips {
  color: #666;
  padding: 5px 10px;
}

.showListTipBox .List .ListItem .ListItem-rightImg {
  width: 20px;
  height: 20px;
}

.showListNormalBox {
  background-color: #fff;
}

.showListNormalBox .List .ListItemCon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
}

.showListNormalBox .List .ListItemCon .ListItemCon-leftCon {
  font-size: 14px;
}

.showListNormalBox .List .ListItemCon .ListItemCon-rightImg {
  width: 20px;
  height: 20px;
}

.showInfoNormal .showInfoNormal-item {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
}

.showInfoNormal .showInfoNormal-item span {
  color: #666;
}

.showNormalInputBox .List .ListItemCon {
  padding: 10px;
}

.showNormalInputBox .List .ListItemCon .ListItem {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.showNormalInputBox .List .ListItemCon .ListItem .ListItem-title, .showNormalInputBox .List .ListItemCon .ListItem .ListItem-titles {
  font-size: 14px;
}

.showNormalInputBox .List .ListItemCon .ListItem .ListItem-title::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun,sans-serif;
  line-height: 1;
  content: "*";
}

.showNormalInputBox .List .ListItemCon .ListItem .ListItem-title::after, .showNormalInputBox .List .ListItemCon .ListItem .ListItem-titles::after {
  content: ":";
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
  padding-right: 5px;
}

.showSelectBox {
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.showSelectBox .showSelectBox-title {
  font-size: 14px;
  width: 80px;
}

.showSelectBox .showSelectBox-select {
  display: inline-block;
}

.showButtonBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
}

.showButtonBox .showCircleButton {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background-color: #ed602a;
  color: #ffff;
  font-size: 15px;
  border-radius: 20px;
  text-align: center;
}

.showButtonBox .showSquareButton {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background-color: #ed602a;
  color: #ffff;
  font-size: 15px;
  text-align: center;
}

.showNullDataBox {
  background-color: #fff;
}

.showNullDataBox .showNullImg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
}

.showNullDataBox .showNullImg img {
  width: 220px;
  height: 168px;
}

.showNullDataBox .showNullMsg {
  text-align: center;
  padding-bottom: 25px;
}