Merge branch 'main' of http://10.1.1.5:8418/acdiu/AcdiuTools
This commit is contained in:
@@ -6,4 +6,12 @@
|
|||||||
<ImplicitUsings>enable</ImplicitUsings>
|
<ImplicitUsings>enable</ImplicitUsings>
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<Content Remove="compilerconfig.json" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<None Include="compilerconfig.json" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||||
<link rel="stylesheet" href="~/AcdiuTools.styles.css" asp-append-version="true" />
|
<link rel="stylesheet" href="~/AcdiuTools.styles.css" asp-append-version="true" />
|
||||||
<link rel="stylesheet" href="~/ac/ac.css" asp-append-version="true" />
|
<link rel="stylesheet" href="~/ac/ac.min.css" asp-append-version="true" />
|
||||||
<link rel="stylesheet" href="~/ac/icon/all.css" asp-append-version="true" />
|
<link rel="stylesheet" href="~/ac/icon/all.css" asp-append-version="true" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
6
compilerconfig.json
Normal file
6
compilerconfig.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"outputFile": "wwwroot/ac/ac.css",
|
||||||
|
"inputFile": "wwwroot/ac/ac.scss"
|
||||||
|
}
|
||||||
|
]
|
||||||
59
compilerconfig.json.defaults
Normal file
59
compilerconfig.json.defaults
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
{
|
||||||
|
"compilers": {
|
||||||
|
"less": {
|
||||||
|
"autoPrefix": "",
|
||||||
|
"cssComb": "none",
|
||||||
|
"ieCompat": true,
|
||||||
|
"math": null,
|
||||||
|
"strictMath": false,
|
||||||
|
"strictUnits": false,
|
||||||
|
"relativeUrls": true,
|
||||||
|
"rootPath": "",
|
||||||
|
"sourceMapRoot": "",
|
||||||
|
"sourceMapBasePath": "",
|
||||||
|
"sourceMap": false
|
||||||
|
},
|
||||||
|
"sass": {
|
||||||
|
"autoPrefix": "",
|
||||||
|
"loadPaths": "",
|
||||||
|
"style": "expanded",
|
||||||
|
"relativeUrls": true,
|
||||||
|
"sourceMap": false
|
||||||
|
},
|
||||||
|
"stylus": {
|
||||||
|
"sourceMap": false
|
||||||
|
},
|
||||||
|
"babel": {
|
||||||
|
"sourceMap": false
|
||||||
|
},
|
||||||
|
"coffeescript": {
|
||||||
|
"bare": false,
|
||||||
|
"runtimeMode": "node",
|
||||||
|
"sourceMap": false
|
||||||
|
},
|
||||||
|
"handlebars": {
|
||||||
|
"root": "",
|
||||||
|
"noBOM": false,
|
||||||
|
"name": "",
|
||||||
|
"namespace": "",
|
||||||
|
"knownHelpersOnly": false,
|
||||||
|
"forcePartial": false,
|
||||||
|
"knownHelpers": [],
|
||||||
|
"commonjs": "",
|
||||||
|
"amd": false,
|
||||||
|
"sourceMap": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"minifiers": {
|
||||||
|
"css": {
|
||||||
|
"enabled": true,
|
||||||
|
"termSemicolons": true,
|
||||||
|
"gzip": false
|
||||||
|
},
|
||||||
|
"javascript": {
|
||||||
|
"enabled": true,
|
||||||
|
"termSemicolons": true,
|
||||||
|
"gzip": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,78 +1,69 @@
|
|||||||
:root {
|
@charset "UTF-8";
|
||||||
/* --- 基础断点定义 (供参考) --- */
|
:root {
|
||||||
/* 手机: < 768px */
|
font-size: 14px;
|
||||||
/* 平板: 768px - 1024px */
|
|
||||||
/* 桌面: 1024px - 1920px */
|
|
||||||
/* 4K屏: 3840px */
|
|
||||||
/* --- 核心字号缩放逻辑 --- */
|
|
||||||
/* 逻辑: 在移动端最小为 14px，在 1024px 以上开始线性增长，到 4K 达到 24px */
|
|
||||||
/* 公式: clamp(最小值, 首选值, 最大值) */
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
:root {
|
:root {
|
||||||
/* 1.2vw + 10px 是一个经过计算的动态值，确保 1024-3840 之间平滑过渡 */
|
font-size: 16px;
|
||||||
font-size: clamp(16px, 0.35vw + 12.4px, 24px);
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 3840px) {
|
@media (min-width: 3840px) {
|
||||||
:root {
|
:root {
|
||||||
/* 针对 4K 以上屏幕，如果想继续缩放可保持 clamp，想锁定则固定 24px */
|
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
|
||||||
font-size: 24px;
|
公式：(24 / 3840) * 100vw = 0.625vw
|
||||||
}
|
*/
|
||||||
|
font-size: 0.625vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- 全局布局容器 --- */
|
/* --- 全局布局容器适配 --- */
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
/* 这里的 1rem 会随着上面定义的 font-size 自动缩放 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) {
|
@media (min-width: 1920px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 1800px;
|
max-width: 1800px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 3840px) {
|
@media (min-width: 3840px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 3600px;
|
max-width: 93.75vw;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* 为当前激活的 nav-link，增加加粗效果 */
|
|
||||||
.nav-link.active {
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--bs-primary) !important;
|
|
||||||
border-bottom: 2px solid var(--bs-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-r-t {
|
|
||||||
position: relative;
|
|
||||||
top: -1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
|
||||||
.w-1r {
|
.w-1r {
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-1r {
|
.h-1r {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-link.active {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--bs-primary) !important;
|
||||||
|
border-bottom: 2px solid var(--bs-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-r-t {
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mg-0 {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|||||||
78
wwwroot/ac/ac.css.bak
Normal file
78
wwwroot/ac/ac.css.bak
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
:root {
|
||||||
|
/* --- 基础断点定义 (供参考) --- */
|
||||||
|
/* 手机: < 768px */
|
||||||
|
/* 平板: 768px - 1024px */
|
||||||
|
/* 桌面: 1024px - 1920px */
|
||||||
|
/* 4K屏: 3840px */
|
||||||
|
/* --- 核心字号缩放逻辑 --- */
|
||||||
|
/* 逻辑: 在移动端最小为 14px，在 1024px 以上开始线性增长，到 4K 达到 24px */
|
||||||
|
/* 公式: clamp(最小值, 首选值, 最大值) */
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
:root {
|
||||||
|
/* 1.2vw + 10px 是一个经过计算的动态值，确保 1024-3840 之间平滑过渡 */
|
||||||
|
font-size: clamp(16px, 0.35vw + 12.4px, 24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
:root {
|
||||||
|
/* 针对 4K 以上屏幕，如果想继续缩放可保持 clamp，想锁定则固定 24px */
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 全局布局容器 --- */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 这里的 1rem 会随着上面定义的 font-size 自动缩放 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
.container {
|
||||||
|
max-width: 3600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 为当前激活的 nav-link，增加加粗效果 */
|
||||||
|
.nav-link.active {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--bs-primary) !important;
|
||||||
|
border-bottom: 2px solid var(--bs-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-r-t {
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-1r {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-1r {
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
1
wwwroot/ac/ac.min.css
vendored
Normal file
1
wwwroot/ac/ac.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:.625vw;}}.container{width:100%;margin:0 auto;padding:0 1rem;box-sizing:border-box;}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:1024px){.container{max-width:960px;}}@media(min-width:1920px){.container{max-width:1800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.w-1r{width:1rem;}.h-1r{height:1rem;}.nav-link.active{font-weight:bold;color:var(--bs-primary)!important;border-bottom:2px solid var(--bs-primary);}.p-r-t{position:relative;top:-1px;}mg-0{margin:0 auto;}
|
||||||
103
wwwroot/ac/ac.scss
Normal file
103
wwwroot/ac/ac.scss
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
// ========================================================
|
||||||
|
// 1. 变量与断点定义 (集中管理)
|
||||||
|
// ========================================================
|
||||||
|
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '4k': 3840px );
|
||||||
|
|
||||||
|
// 字号常量
|
||||||
|
$font-size-small: 14px; // 手机/平板基准
|
||||||
|
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
|
||||||
|
$font-size-4k-base: 24px; // 4K 触发点字号
|
||||||
|
|
||||||
|
// 容器配置
|
||||||
|
$container-paddings: 1rem;
|
||||||
|
|
||||||
|
// ========================================================
|
||||||
|
// 2. 媒体查询 Mixin
|
||||||
|
// ========================================================
|
||||||
|
@mixin respond-to($breakpoint) {
|
||||||
|
// 如果是预定义的 key (如 'mobile')
|
||||||
|
@if map-has-key($breakpoints, $breakpoint) {
|
||||||
|
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 如果是传入的具体数值 (如 3840px)
|
||||||
|
@else {
|
||||||
|
@media (min-width: $breakpoint) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================================
|
||||||
|
// 3. 核心响应式逻辑
|
||||||
|
// ========================================================
|
||||||
|
:root {
|
||||||
|
// --- [阶段 A] 默认状态 (手机/小屏幕) ---
|
||||||
|
font-size: $font-size-small;
|
||||||
|
// --- [阶段 B] 1024px 以上到 4K 之前：保持标准 16px ---
|
||||||
|
@include respond-to('tablet') {
|
||||||
|
font-size: $font-size-standard;
|
||||||
|
}
|
||||||
|
// --- [阶段 C] 大于 4K：开启线性增长 ---
|
||||||
|
@include respond-to('4k') {
|
||||||
|
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
|
||||||
|
公式：(24 / 3840) * 100vw = 0.625vw
|
||||||
|
*/
|
||||||
|
font-size: 0.625vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 全局布局容器适配 --- */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 $container-paddings;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
@include respond-to('mobile') {
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to('tablet') {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to('desktop') {
|
||||||
|
max-width: 1800px;
|
||||||
|
}
|
||||||
|
// 4K 以上容器随之线性扩大
|
||||||
|
@include respond-to('4k') {
|
||||||
|
// 保持容器宽度占比：(3600 / 3840) * 100vw = 93.75vw
|
||||||
|
max-width: 93.75vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================================
|
||||||
|
// 4. 工具类与组件样式
|
||||||
|
// ========================================================
|
||||||
|
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
|
||||||
|
.w-1r {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-1r {
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
&.active {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--bs-primary) !important;
|
||||||
|
border-bottom: 2px solid var(--bs-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-r-t {
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mg-0 {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
body {
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user