【uniapp】设置公共样式,实现公共背景等
目录
1、 全局渐变背景色
2.1 创建common目录
2.2 在common下新建style和images等目录
2.3 在style下新建common-style.scss
2.4 common-style输入全局渐变颜色
2.5 引入样式
2.6 业务页面引入
2.7 展示
2、全局字体颜色
2.1 新建base-style.scss文件
2.2 设置base-style.scss
2.3 引入base-style.scss
2.4 页面引用
2.5 展示
前言:通过uniapp四线全局背景样式等,static目录会在打包的时候必打入,新增一个目录按需导入,减少打包文件大小
1、 全局渐变背景色
2.1 创建common目录
根目录新增common目录
2.2 在common下新建style和images等目录
依据需要新增
2.3 在style下新建common-style.scss
2.4 common-style输入全局渐变颜色
view,swiper,swiper-item{box-sizing: border-box;
}.pageBg{background: linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8, 20%,#F4E2D8);min-height: 80vh;
}
2.5 引入样式
App.vue输入
<style lang="scss">/*每个页面公共css */@import 'common/style/common-style.scss';
</style>
2.6 业务页面引入
<template>
<view class="pageBg"><view class="page-container"><input type="text" placeholder="Enter word or phrase" v-model="word" /><pronunciation :word="word" /></view>
</view></template><script setup>
import { ref } from 'vue';
import Pronunciation from '@/components/YouDaoModal/YouDaoModal.vue'; // 假设你的组件在 components 目录下const word = ref(''); // 使用 ref 来创建一个响应式变量
</script><style scoped>
.page-container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;padding: 20px;
}input {margin-bottom: 10px;padding: 10px;font-size: 16px;width: 80%;height: 80rpx;
}
</style>
2.7 展示
2、全局字体颜色
2.1 新建base-style.scss文件
在common-》style 下新建base-style.scss文件
2.2 设置base-style.scss
$brand-theme-color: #01ccb6; // 品牌主体颜色(青绿色)
$border-color: #e0e0e0; // 边框颜色
$border-color-light: #efefef; // 边框亮色
$text-font-color-1: #000; // 文字主色(黑色)
$text-font-color-2: #676767; // 副标题颜色(深灰色)
$text-font-color-3: #a7a7a7; // 浅色(中灰色)
$text-font-color-4: #e4e4e4; // 更浅的颜色(浅灰色)
2.3 引入base-style.scss
在uni.scss中引入base-tyle.scss
/* 引入外部 */
@import "@/common/style/base-style.scss";
2.4 页面引用
在page下页面引用(pages.json页面不行哦)
.top-view {// background-color: #01ccb6;// color: white;color: $text-font-color-4;padding: 40rpx;}
2.5 展示
相关文章:

【uniapp】设置公共样式,实现公共背景等
目录 1、 全局渐变背景色 2.1 创建common目录 2.2 在common下新建style和images等目录 2.3 在style下新建common-style.scss 2.4 common-style输入全局渐变颜色 2.5 引入样式 2.6 业务页面引入 2.7 展示 2、全局字体颜色 2.1 新建base-style.scss文件 2.2 设置base-…...

Node.js学习笔记
回顾: javascript 可以在浏览器运行 (js代码会JavaScript的解析引擎执行)chrome 》V8 (性能最好)FireFox 》 奥丁猴safri 》JSCoreIE浏览器 》查克拉JavaScript可以在浏览器端操作DOM 和BOM每一个浏览器都内置了B…...

resnetv1骨干
# 普通的卷积残差块 def apply_basic_block( x, filters, kernel_size3, stride1, conv_shortcutTrue, nameNone ): # 预设块名称前缀 if name is None: name f"v1_basic_block_{keras.backend.get_uid(v1_basic_block_)}" # 设置残差连接前…...

设计模式,面试级别的详解(持续更新中)
设计模式,面试级别的详解(持续更新中) 软件的设计原则 常⽤的⾯向对象设计原则包括7个,这些原则并不是孤⽴存在的,它们相互依赖,相互补充。 开闭原则(Open Closed Principle,OCP)单⼀职责原则…...

第9篇:网络访问控制与认证机制
目录 引言 9.1 访问控制策略概述 9.2 认证机制的使用 9.3 密钥分发与证书机制 9.4 访问控制与认证在网络安全中的应用 9.5 网络访问控制与认证的挑战 9.6 总结 第9篇:网络访问控制与认证机制 引言 随着计算机网络的不断普及,安全问题日益受到关…...

CentOS安装NVIDIA驱动、CUDA以及nvidia-container-toolkit
0.提前准备 0.1.更新yum源(以阿里为例) 0.1.1 备份当前的yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 0.1.2 下载新的CentOS-Base.repo 到/etc/yum.repos.d/ CentOS 5 wget -O /etc/yum.repos.d/CentOS-Base…...

STM32调试,发现HAL_Init();之后无法调试,甚至无法让程序停下来
参考文档: STM32调试,发现HAL_Init();之后无法调试,甚至无法让程序停下来 - asml - 博客园 症状 最近开始学习STM32Cube,发现新建工程后无法正常调试,过了HAL_Init();之后就无法继续调试了. 无法进行让程序暂停以及停止等操作.并在输出窗口不断刷出 ERROR: Can n…...

Ajax(web笔记)
文章目录 1.Ajax的概念2.Ajax 的作用3.原生Ajax4.Axios4.1Axios的概念4.2Axios入门 1.Ajax的概念 AsynchronousJavaScriptAndXML,异步的JavaScript和XML 2.Ajax 的作用 数据交换:过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在…...

多入口+vite+vue3预渲染方案
如果你的项目要求加载速度要快,我们如果使用传统的vue3+sfc模式去开发,因为只有一个根节点,空白页面加载出来之后js才回去加载组件渲染,这样页面总是有一个短暂的空白。我们这里不讨论服务器端ssr和预渲染方案,仅仅是为了满足比较极端的优化需求,在这种情况下我的这套方案…...

Vue3+Ts函数封装与应用
目录 一、基础函数 二、实际应用 2.1、根据id找到对应的value值(找第一个) 2.2、根据id找到对应的value值(找所有) 2.3、不重复的升序数组找数字(二分查找) 2.4、重复的无序数组找数字(统计个数) 2.5、将数组整理为树结构(省市区为例) 为什么要积累呢?因为面…...

C语言全局变量和局部变量同时应用的题题型[求一堆数组中10个学生的成绩里最高分、最低分和平均分。]
C语言函数 全局变量与局部结合变量题。 本片代码中包含全局变量max和min。 以及局部变量aver。 全局变量运用于从定义变量开始,局部变量运用于定义它的调用函数内。 正文开始: #include <stdio.h> int max0,min0; int main() { int average(int array[…...

深度学习实战94-基于图卷积神经网络GCN模型的搭建以及在金融领域的场景
大家好,我是微学AI,今天给大家介绍一下深度学习实战94-基于图卷积神经网络GCN模型的搭建以及在金融领域的场景。文章首先介绍了GCN模型的原理及模型结构,随后提供了数据样例,并详细展示了实战代码。通过本文,读者可以深入了解GCN模型在金融场景下的应用,同时掌握代码的具…...

.NET 6新特性 | System.Text.Json功能改进
在.NET 6.0中,JSON处理库得到了显著的改进,主要体现在System.Text.Json上。以下是对.NET 6.0中改进的JSON处理库的详细分析: 一、System.Text.Json的引入与优势 在.NET 6中,Microsoft引入了新的JSON库System.Text.Json作为官方推…...

Matlab如何对全局优化算法启动并行计算
在 MATLAB 中,启用并行计算可以显著提高一些优化算法(如遗传算法 ga 和粒子群算法 particleswarm)的速度,特别是在种群或粒子群较大时。要启用并行计算,可以使用 UseParallel 参数。 1. 启用并行计算步骤 Step 1: 检…...

MYSQL-查看数据库中的存储过程语法(六)
13.7.5.9 SHOW CREATE PROCEDURE 语句 SHOW CREATE PROCEDURE proc_name此语句是 MySQL 扩展。它返回确切的字符串 ,可用于重新创建命名的存储过程。SHOW CREATE FUNCTION,显示有关存储函数的信息 (参见第 13.7.5.8 节“ SHOW CREATE FUNCTI…...

【深度学习】(12)--模型部署 <连接客户端与服务端>
文章目录 模型部署一、模型部署的定义与目的二、模型部署的步骤三、模型部署的方式四、Flask框架五、实现模型部署1. 搭建服务端1.1 初始化Flask app1.2 加载模型1.3 数据预处理1.4 构建装饰器1.5 完整代码 2. 搭建客户端2.1 服务端网址2.2 发送请求2.3 完整代码 六、运行使用 …...

优化SQL查询的最佳实践:提升数据库性能的关键
SQL 查询是数据库操作的核心,特别是当数据量庞大时,性能问题尤为明显。优化 SQL 查询不仅能减少响应时间,还能提高系统整体的可伸缩性。本文将从索引、查询结构、数据库设计和缓存等方面详细介绍如何优化 SQL 查询以提升性能。 一、索引的使…...

【AIGC视频生成】视频扩散模型(综述+最新进展)
文章目录 一、综述1.1 扩散模型1.1.1 Denoising Diffusion Probabilistic Models (DDPMs)1.1.2 Score-Based Generative Models (SGMs)1.1.3 Stochastic Differential Equations (Score SDEs) 1.2 相关任务1.3 数据集1.4 评价指标 二、年度进展1.runway gen2.1 Gen-1࿱…...

如何下载3GPP协议?
一、进入3GPP网页 https://www.3gpp.org/ 二、点击“Specifications &Technologies” 三、点击“FTP Server” 网址: https://www.3gpp.org/specifications-technologies 四、找到“latest”,查看最新版 网址: https://www.3gpp.org/ftp…...

目标检测系统操作说明【用户使用指南】(python+pyside6界面+系统源码+可训练的数据集+也完成的训练模型)
1.100多种【基于YOLOv8/v10/v11的目标检测系统】目录(pythonpyside6界面系统源码可训练的数据集也完成的训练模型) 2.目标检测系统【环境搭建过程】(GPU版本) 3.目标检测系统【环境详细配置过程】(CPU版本࿰…...

Vue中使用路由
目录 单页应用程序:SPA - Single Page Application路由 VueRouterVueRouter使用步骤组件存放目录问题 路由模块封装声明式导航 - 导航连接两个类名自定义匹配类名 声明式导航 - 跳转传参Vue路由 - 重定向Vue路由 - 404Vue路由 - 模式设置 编程式导航 - 基本跳转编程…...

【Linux】多线程安全之道:互斥、加锁技术与底层原理
目录 1.线程的互斥 1.1.进程线程间的互斥相关背景概念 1.2.互斥量mutex的基本概念 所以多线程之间为什么要有互斥? 为什么抢票会抢到负数,无法获得正确结果? 为什么--操作不是原子性的呢? 解决方式: 2.三种加锁…...

收藏多年的四款音频剪辑工具你pick哪一个?
在这个时代,音频剪辑已经成为音乐制作、播客、自媒体等领域的必备技能。而随着网络技术的飞速发展,我们不再需要安装庞大的软件,只需一个浏览器,就能轻松完成音频剪辑工作。今天,就让我为大家推荐几款优秀的在线音频剪…...

使用Redis进行在线人数统计时,有哪些性能优化技巧?
使用Redis进行在线人数统计时,性能优化是关键,以下是一些性能优化技巧: 选择合适的数据结构: 对于在线人数统计,可以选择使用Set数据结构,因为它具有自动去重和高效的集合操作特性,非常适合用于…...

前端模块循环依赖问题
模块循环依赖问题 在项目比较小的时候可能不怎么会遇到这个问题,但项目一旦有一定的体量后就可能会遇到了。 我之前做项目时就遇到这个问题,也是总结一篇文章。 比如这种类型的报错 commonjs存在的问题 先讲一下commonjs存在的问题。 CommonJS模块采…...

Springboot指定扫描路径
方式一:通过在启动类的SpringbootApplication中指定包扫描或类扫描 指定需要扫描的包 scanBasePackages{"待扫描包1","待扫描包2", . . . ," "} 指定需要扫描的类 scanBasePackageClasses{类1.class,类2.class,...} 方式二ÿ…...

【Flutter】Dart:环境搭建
Flutter 是一个基于 Dart 的跨平台开发框架,可以帮助我们快速构建移动应用程序。在开始 Flutter 开发之前,我们需要先搭建 Dart 的开发环境,并配置合适的编辑器,比如 VSCode。本教程将引导你一步步完成 Dart 和 Flutter 的环境搭建…...

OpenCV高级图形用户界面(10)创建一个新的窗口函数namedWindow()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 创建一个窗口。 函数 namedWindow 创建一个可以作为图像和跟踪条占位符的窗口。创建的窗口通过它们的名字来引用。 如果已经存在同名的窗口&am…...

水题四道。
我的 水题四道--题目目录 问题 A: 依次输出第k小整数 代码1 问题 B: 第k小整数(knumber) 代码2 树的统计 代码3 枪声问题 代码4 问题 A: 依次输出第k小整数 现有n个正整数,n≤10000,要求出这n个正整数中的第1小的整数,第2小的整数…...

upload-labs靶场Pass-05
upload-labs靶场Pass-05 大小写绕过 $deny_ext array(“.php”,“.php5”,“.php4”,“.php3”,“.php2”,“.html”,“.htm”,“.phtml”,“.pht”,“.pHp”,“.pHp5”,“.pHp4”,“.pHp3”,“.pHp2”,“.Html”,“.Htm”,“.pHtml”,“.jsp”,“.jspa”,“.jspx”,“.jsw”…...