gunyeng/AcdiuTools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://10.1.1.5:8418/acdiu/AcdiuTools

Browse Source
This commit is contained in:
GunYeng
2026-04-26 01:24:26 +08:00
parent 2bd14796a9 7746b7d52d
commit 3cfca3be83
12 changed files with 186 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
wwwroot/ac/ac.css
View File

@@ -9,10 +9,7 @@
}
@media (min-width: 3840px) {
:root {
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
公式：(24 / 3840) * 100vw = 0.625vw
*/
font-size: 0.625vw;
font-size: clamp(20px, 0.5208333333vw, 100vw);
}
}
@@ -54,7 +51,33 @@
}
}
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
/* --- 工具与组件样式 --- */
.nav-link:visited {
color: inherit;
}
.nav-link.active {
font-weight: bold;
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))) !important;
border-bottom: 2px solid var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
}
.p-r-t {
position: relative;
top: -1px;
}
.mg-0 {
margin: 0 auto;
}
a {
text-decoration: none;
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
}
a:visited {
color: var(--bs-purple, rgba(var(--bs-primary), var(--bs-link-opacity, 0.8)));
}
.w-1r {
width: 1rem;
}
@@ -63,17 +86,74 @@
height: 1rem;
}
.nav-link.active {
font-weight: bold;
color: var(--bs-primary) !important;
border-bottom: 2px solid var(--bs-primary);
.w-1_5r {
width: 1.5rem;
}
.p-r-t {
position: relative;
top: -1px;
.h-1_5r {
height: 1.5rem;
}
mg-0 {
margin: 0 auto;
.w-2r {
width: 2rem;
}
.h-2r {
height: 2rem;
}
.w-2_5r {
width: 2.5rem;
}
.h-2_5r {
height: 2.5rem;
}
.w-3r {
width: 3rem;
}
.h-3r {
height: 3rem;
}
.w-3_5r {
width: 3.5rem;
}
.h-3_5r {
height: 3.5rem;
}
.w-4r {
width: 4rem;
}
.h-4r {
height: 4rem;
}
.w-4_5r {
width: 4.5rem;
}
.h-4_5r {
height: 4.5rem;
}
.w-5r {
width: 5rem;
}
.h-5r {
height: 5rem;
}
.w-5_5r {
width: 5.5rem;
}
.h-5_5r {
height: 5.5rem;
}

2
wwwroot/ac/ac.min.css vendored
View File

@@ -1 +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:2560px){.container{max-width:2560px;}}@media(min-width:3800px){.container{max-width:3800px;}}@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;}
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:clamp(20px,.5208333333vw,100vw);}}.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:2560px){.container{max-width:2560px;}}@media(min-width:3800px){.container{max-width:3800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.nav-link:visited{color:inherit;}.nav-link.active{font-weight:bold;color:var(--bs-link-hover-color,rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)))!important;border-bottom:2px solid var(--bs-link-hover-color,rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)));}.p-r-t{position:relative;top:-1px;}.mg-0{margin:0 auto;}a{text-decoration:none;color:var(--bs-link-hover-color,rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)));}a:visited{color:var(--bs-purple,rgba(var(--bs-primary),var(--bs-link-opacity,.8)));}.w-1r{width:1rem;}.h-1r{height:1rem;}.w-1_5r{width:1.5rem;}.h-1_5r{height:1.5rem;}.w-2r{width:2rem;}.h-2r{height:2rem;}.w-2_5r{width:2.5rem;}.h-2_5r{height:2.5rem;}.w-3r{width:3rem;}.h-3r{height:3rem;}.w-3_5r{width:3.5rem;}.h-3_5r{height:3.5rem;}.w-4r{width:4rem;}.h-4r{height:4rem;}.w-4_5r{width:4.5rem;}.h-4_5r{height:4.5rem;}.w-5r{width:5rem;}.h-5r{height:5rem;}.w-5_5r{width:5.5rem;}.h-5_5r{height:5.5rem;}

81
wwwroot/ac/ac.scss
View File

@@ -6,11 +6,29 @@ $breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560
// 字号常量
$font-size-small: 14px; // 手机/平板基准
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
$font-size-4k-base: 24px; // 4K 触发点字号
$font-size-4k-base: 20px; // 4K 触发点字号
// 容器配置
$container-paddings: 1rem;
/// 去除单位函数
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
/// 计算基于屏幕宽度的线性 VW 比例
/// @param $size - 目标字号 (如 24px)
/// @param $breakpoint - 触发断点 (如 3840)
@function get-linear-vw($size, $breakpoint) {
$raw-size: strip-unit($size);
$raw-breakpoint: strip-unit($breakpoint);
@return ($raw-size / $raw-breakpoint) * 100vw;
}
// ========================================================
// 2. 媒体查询 Mixin
// ========================================================
@@ -35,21 +53,19 @@ $container-paddings: 1rem;
:root {
// --- [阶段 A] 默认状态 (手机/小屏幕) ---
font-size: $font-size-small;
// --- [阶段 B] 1024px 以上到 4K 之前：保持标准 16px ---
// --- [阶段 B] 1024px 以上到 4K 之前: 保持标准 16px ---
@include respond-to('tablet') {
font-size: $font-size-standard;
}
// --- [阶段 C] 大于 4K：开启线性增长 ---
// --- [阶段 C] 大于 4K: 开启线性增长 ---
@include respond-to('4k') {
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
公式：(24 / 3840) * 100vw = 0.625vw
*/
font-size: 0.625vw;
// 锁定最小字号为 20px，确保在任何情况下都不会比基准值小
font-size: clamp(#{$font-size-4k-base}, get-linear-vw($font-size-4k-base, 3840), 100vw);
}
}
/* --- 全局布局容器适配 --- */
// 其中 4k-40 为准 4K, 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
// 其中 4k-40 为准 4K (即 3840px - 40px), 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
.container {
width: 100%;
margin: 0 auto;
@@ -77,28 +93,24 @@ $container-paddings: 1rem;
}
// 当容器等于 4K 时，随之线性扩大
@include respond-to('4k') {
// 保持容器宽度占比：(3600 / 3840) * 100vw = 93.75vw
max-width: 93.75vw;
// 保持容器宽度占比: (3600 / 3840) * 100vw = 93.75vw
max-width: (3600 / 3840) * 100vw;
}
}
// ========================================================
// 4. 工具类与组件样式
// ========================================================
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
.w-1r {
width: 1rem;
}
.h-1r {
height: 1rem;
}
// 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放
/* --- 工具与组件样式 --- */
.nav-link {
&:visited {
color: inherit;
}
&.active {
font-weight: bold;
color: var(--bs-primary) !important;
border-bottom: 2px solid var(--bs-primary);
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))) !important;
border-bottom: 2px solid var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
}
}
@@ -107,6 +119,29 @@ $container-paddings: 1rem;
top: -1px;
}
mg-0 {
.mg-0 {
margin: 0 auto;
}
}
// 去除 a 标签默认下划线
a {
text-decoration: none;
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
// 访问过的链接变更颜色，提供视觉反馈
&:visited {
color: var(--bs-purple, rgba(var(--bs-primary), var(--bs-link-opacity, 0.8)));
}
}
// 定义宽与高的工具类，使用 rem 单位以适配响应式字体大小
$widthOrheight-map: ( '1r': 1rem, '1_5r': 1.5rem, '2r': 2rem, '2_5r': 2.5rem, '3r': 3rem, '3_5r': 3.5rem, '4r': 4rem, '4_5r': 4.5rem, '5r': 5rem, '5_5r': 5.5rem );
@each $key, $value in $widthOrheight-map {
.w-#{$key} {
width: $value;
}
.h-#{$key} {
height: $value;
}
}