Compare commits
12 Commits
51c10de95d
...
bb2ad89a75
| Author | SHA1 | Date | |
|---|---|---|---|
| bb2ad89a75 | |||
| 3cfca3be83 | |||
| b4b010cb19 | |||
| 2bd14796a9 | |||
| 7746b7d52d | |||
| 17a7d4fa1f | |||
| 3013cf34e8 | |||
| 9f70fa7d51 | |||
| f05f861757 | |||
| cf31e2014f | |||
| 92af22aa18 | |||
| 359d146d48 |
@@ -6,4 +6,20 @@
|
|||||||
<ImplicitUsings>enable</ImplicitUsings>
|
<ImplicitUsings>enable</ImplicitUsings>
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<Content Remove="compilerconfig.json" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<None Include="compilerconfig.json" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<Folder Include="Constants\" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<ProjectReference Include="..\..\Library\Acdiu.AspNetCore.Mvc.Commons\Acdiu.AspNetCore.Mvc.Commons.csproj" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
<Solution>
|
<Solution>
|
||||||
|
<Project Path="../../Library/Acdiu.AspNetCore.Mvc.Commons/Acdiu.AspNetCore.Mvc.Commons.csproj" Id="a42045c6-be82-461d-b4fb-3f20bc004abf" />
|
||||||
<Project Path="AcdiuTools.csproj" />
|
<Project Path="AcdiuTools.csproj" />
|
||||||
</Solution>
|
</Solution>
|
||||||
|
|||||||
@@ -36,9 +36,12 @@ app.UseRouting();
|
|||||||
|
|
||||||
// 【关键】启用 Session 中间件
|
// 【关键】启用 Session 中间件
|
||||||
app.UseSession();
|
app.UseSession();
|
||||||
|
// 启用静态文件中间件，确保 wwwroot 中的资源可访问
|
||||||
|
app.UseStaticFiles();
|
||||||
|
|
||||||
app.UseAuthorization();
|
app.UseAuthorization();
|
||||||
|
|
||||||
|
|
||||||
app.MapStaticAssets();
|
app.MapStaticAssets();
|
||||||
|
|
||||||
app.MapControllerRoute(
|
app.MapControllerRoute(
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
@{
|
@{
|
||||||
ViewData["Title"] = "Home Page";
|
ViewData["Title"] = "首页";
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h1 class="display-4">Welcome</h1>
|
<h1 class="display-4">欢迎</h1>
|
||||||
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
|
<p>了解更多关于 <a href="https://learn.microsoft.com/aspnet/core">使用 ASP.NET Core 构建 Web 应用</a> 的信息。</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@{
|
@{
|
||||||
ViewData["Title"] = "Privacy Policy";
|
ViewData["Title"] = "隐私";
|
||||||
}
|
}
|
||||||
<h1>@ViewData["Title"]</h1>
|
<h1>@ViewData["Title"]</h1>
|
||||||
|
|
||||||
<p>Use this page to detail your site's privacy policy.</p>
|
<p>使用此页面详细说明您网站的隐私政策。</p>
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
@using Acdiu.AspNetCore.Mvc.Commons
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
<html lang="zh-cn" data-bs-theme="@ViewBag.CurrentTheme">
|
<html lang="zh-cn" data-bs-theme="@ViewBag.CurrentTheme">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
@@ -6,15 +8,15 @@
|
|||||||
<title>@ViewData["Title"] - AcdiuTools</title>
|
<title>@ViewData["Title"] - AcdiuTools</title>
|
||||||
<script type="importmap"></script>
|
<script type="importmap"></script>
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
|
||||||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
|
|
||||||
<!-- Bootstrap Icons -->
|
|
||||||
<link rel="stylesheet" href="~/lib/bootstrap-icons-1.13.1/font/bootstrap-icons.min.css" />
|
|
||||||
|
|
||||||
<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" />
|
<!-- Bootstrap CSS -->
|
||||||
<link rel="stylesheet" href="~/ac/icon/all.css" asp-append-version="true" />
|
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
|
||||||
|
|
||||||
|
<!-- Bootstrap Icons -->
|
||||||
|
<link rel="stylesheet" href="~/lib/bootstrap-icons-1.13.1/font/bootstrap-icons.min.css" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="~/ac/ac.min.css" asp-append-version="true" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@@ -29,16 +31,20 @@
|
|||||||
<ul class="navbar-nav flex-grow-1">
|
<ul class="navbar-nav flex-grow-1">
|
||||||
<!-- 添加 asp-active-link="true" 属性以指示启用自动激活检测 -->
|
<!-- 添加 asp-active-link="true" 属性以指示启用自动激活检测 -->
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
|
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Index">
|
||||||
|
<bsicon cn="p-r-t" i="house-fill" /> 首页
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
|
<a class="nav-link" asp-active-link="true" asp-area="" asp-controller="Home" asp-action="Privacy">隐私</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@* 主题切换按钮 *@
|
<div>
|
||||||
<theme-toggle />
|
@* 主题切换按钮 *@
|
||||||
|
<theme-toggle />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
@@ -48,7 +54,7 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="border-top footer text-muted">
|
<footer class="border-top footer text-muted mt-3">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
© 2018-@DateTime.Now.Year - <a asp-area="" asp-controller="Home" asp-action="Index">AcdiuTools</a>
|
© 2018-@DateTime.Now.Year - <a asp-area="" asp-controller="Home" asp-action="Index">AcdiuTools</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@using AcdiuTools
|
@using AcdiuTools
|
||||||
@using AcdiuTools.Models
|
@using AcdiuTools.Models
|
||||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||||
@addTagHelper *, AcdiuTools
|
@addTagHelper *, AcdiuTools
|
||||||
|
@addTagHelper *, Acdiu.AspNetCore.Mvc.Commons
|
||||||
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,65 +1,159 @@
|
|||||||
: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 */
|
font-size: clamp(20px, 0.5208333333vw, 100vw);
|
||||||
font-size: 24px;
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- 全局布局容器 --- */
|
/* --- 全局布局容器适配 --- */
|
||||||
.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: 2560px) {
|
||||||
|
.container {
|
||||||
|
max-width: 2560px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 3800px) {
|
||||||
|
.container {
|
||||||
|
max-width: 3800px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 3840px) {
|
@media (min-width: 3840px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 3600px;
|
max-width: 93.75vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 为当前激活的 nav-link，增加加粗效果 */
|
/* --- 工具与组件样式 --- */
|
||||||
|
.nav-link:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--bs-primary) !important;
|
color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))) !important;
|
||||||
border-bottom: 2px solid var(--bs-primary);
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|||||||
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: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;}
|
||||||
147
wwwroot/ac/ac.scss
Normal file
147
wwwroot/ac/ac.scss
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
// ========================================================
|
||||||
|
// 1. 变量与断点定义 (集中管理)
|
||||||
|
// ========================================================
|
||||||
|
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560px, '4k-40': 3800px, '4k': 3840px );
|
||||||
|
|
||||||
|
// 字号常量
|
||||||
|
$font-size-small: 14px; // 手机/平板基准
|
||||||
|
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
|
||||||
|
$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
|
||||||
|
// ========================================================
|
||||||
|
@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') {
|
||||||
|
// 锁定最小字号为 20px，确保在任何情况下都不会比基准值小
|
||||||
|
font-size: clamp(#{$font-size-4k-base}, get-linear-vw($font-size-4k-base, 3840), 100vw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 全局布局容器适配 --- */
|
||||||
|
// 其中 4k-40 为准 4K (即 3840px - 40px), 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to('2k') {
|
||||||
|
max-width: 2560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to('4k-40') {
|
||||||
|
max-width: 3800px;
|
||||||
|
}
|
||||||
|
// 当容器等于 4K 时，随之线性扩大
|
||||||
|
@include respond-to('4k') {
|
||||||
|
// 保持容器宽度占比: (3600 / 3840) * 100vw = 93.75vw
|
||||||
|
max-width: (3600 / 3840) * 100vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================================================
|
||||||
|
// 4. 工具类与组件样式
|
||||||
|
// ========================================================
|
||||||
|
// 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放
|
||||||
|
/* --- 工具与组件样式 --- */
|
||||||
|
.nav-link {
|
||||||
|
&:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
&.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 标签默认下划线
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
body {
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user