李家其

#### 效果展示 示例： > 原文参考：CSS实现个性化水球图 https://blog.csdn.net/qq_40289557/article/details/127593240 Liquid.js ```js import React, { useMemo } from 'react'; import cx from 'classnames'; import styles from './Liquid.scss'; const defaultConfig = { frontColor: '#0bc8e8', //...

css防止图片挤压变形 object-fit: cover 参考链接：https://blog.csdn.net/tianpeng1996/article/details/116163196

> HEIC是一种容器格式，可以存储使用HEVC格式编码的声音和图像 ，相比jpg， 具有较小的文件大小和较高的图像质量 ； `Heic(HEIF)`，虽然有更小的体积， 但是`H5`显示`HEIC`格式的图片目前Chrome等浏览器还不支持自动解析，并且`http`协议中[Content-Type](https://www.runoob.com/http/http-content-type.html)默认还没有`image/heic`这个属性 （微信和钉钉打开该文件会自动转码，或者发送的时候系统底层会自动转码）; 有些图片后缀是`.jpg`格式，但其实是`heic`格式（可以用记事本打开该图片看第一行是否有`heic`文字），这时候图片上传根据后缀名来判断会失效，但是其实在手机中确可以预览，但是H5上传会出现问题；； 目前的解决方案有三： 1、前端判断格式，拒绝上传； 2、前端使用 [heic2any](https://github.com/alexcorvi/heic2any) 转码； 3、后端转码（推荐）； 这里介绍判断`heic`格式代码： ```JS const BASE64_MARKER = ';base64,'; function convertDataURIToBinary(dataURI) { const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;...

ImgList.scss ```scss .pictures-adaptive { display: flex; flex-wrap: wrap; .pictures { position: relative; overflow: hidden; margin-bottom: 2%; img{ width: 100%; } } .pictures:only-child img{ width: 70%; } /* 3张图片 */ .pictures:nth-child(1):nth-last-child(3),...

非常感谢你的开源，帮了我很大的忙，但是现在一般基于scss，原不支持，经过一些研究我修改了一个支持scss的方案： 引入： 在bundle.ts中的resolvePlugin方法build.onLoad中添加编译scss, ```javascript else if (/\.scss$/.test(file.filename)) { return new Promise((resolve,reject) =>{ return window.Sass.compile(file.code, function(result) { if (result.status === 0) { // console.log(result.text); // 编译后的 CSS const sassCssModuleResult = compileCssModule(result.text,...