【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 展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/894291.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【动手学深度学习】7.6. 残差网络(ResNet)(个人向笔记)

1. ResNet精读论文视频的Introduction部分 深度卷积神经网络好&#xff0c;好在可以叠加很多层&#xff0c;每一层都可以提取不一样的特征但是网络特别深的时候&#xff0c;梯度要么爆炸要么消失&#xff0c;我们能做的就是将参数随机初始化做好&#xff0c;或者是在中间加一些…

ai聊天对话页面-uniapp

流式传输打字机效果&#xff0c;只支持uniapp内使用 &#xff0c;下载地址 https://download.csdn.net/download/qq_54123885/89899859

Java基于SpringBoot微信小程序的跳蚤市场系统设计与实现(lw+数据库+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

WT2003H语音芯片MCU下载方案助力电动车智能化升级:实现多功能语音提示+报警功能

一&#xff1a;产品市场 随着科技的发展&#xff0c;电瓶车在技术革新上也在不断进步&#xff0c;如今许多厂家&#xff0c;都会加入语音提示功能&#xff0c;能在倒车、喇叭、故障时发出语音报警&#xff0c;提示骑行者电量不足、倒车请注意、故障语音提示等&#xff1b;唯创…

微信小程序引入组件教程

1、安装 node.js 下载网址&#xff1a;https://nodejs.org 2.通过 npm 安装 npm init -y npm i vant/weapp -S --production 3、修改 app.json 将 app.json 中的 “style”: “v2” 去除 4、修改 project.config.json 关于修改 project.config.json 的详细内容&#x…

Linux系统重建Grub引导的方法

一、问题出现的原因 在安装双系统时&#xff0c;我们都是先安装Windows系统&#xff0c;再安装Linux系统&#xff0c;这样在启动计算机时&#xff0c;两个系统都可以被引导启动&#xff0c;并在开机界面可以进行选择。这是因为Linux使用的操作系统引导加载器Grub可以引导如Win…

Qt- QSS风格选择器常用属性选择器样式表盒子

1. 风格设置 Qt 提供了 3 种整体风格&#xff0c;使用 QStyleFactory::keys() 来获取 &#xff08;windowsvista 、Windows 、Fusion&#xff09; 可以在 main.cpp 中调用 setStyle 方法对应用程序进行全局风格的设置 int main(int argc, char *argv[]) {QApplication a(arg…

Unity中使用Json导入项目无法识别Newtonsoft.Json

Unity导入项目无法识别Newtonsoft.Json 因为项目中用到了JSON解析&#xff0c;所以引入了一个解析类库 using Newtonsoft.Json.Linq; 换了台设备之后&#xff0c;导入这个项目之后&#xff0c;这个引用就标红了&#xff0c;找不到类库。 因为是C#报错所以研究了半天visual stu…

自动驾驶系列—深入解析自动驾驶系统验车平台:确保车辆交付质量的关键工具

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

LeetCode刷题日记之贪心算法(二)

目录 前言买卖股票的最佳时机II跳跃游戏跳跃游戏II总结 前言 在上一篇贪心算法的学习中&#xff0c;我们探讨了贪心算法的基本思路和逻辑框架。在这篇文章中&#xff0c;我将继续分享几道经典的LeetCode贪心算法题&#xff0c;并探讨其背后的解题思路和技巧。希望通过这些题目…

Java入门-创建对象

Java包管理器 包&#xff08;package&#xff09;的导入 Java体系非常庞大&#xff0c;为了管理更多的代码互不侵犯&#xff0c;采用了一个叫“包管理”的机制来管理代码&#xff0c;简单来说就是把不同的Java代码放在不同的文件夹里&#xff0c;这个文件夹就是“包”。对于使…

【Linux】【命令】查找(grep/find)与统计(wc)

查找与统计 grepfindwcExamples grep grep 命令用于在文件中或者标准输出中搜索特定字符串&#xff0c;并显示匹配结果。 grep 全称&#xff1a;Global Regular Expression Print 基本语法&#xff1a; grep [OPTION]... PATTERN [FILE] ...默认情况下&#xff0c;PATTERN 是…

Agentic RAG(基于智能体的检索增强生成)是检索增强生成(Retrieval-Augmented Generation,RAG)技术的一种高级形式

Agentic RAG&#xff08;基于智能体的检索增强生成&#xff09;是检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;RAG&#xff09;技术的一种高级形式&#xff0c;它通过引入人工智能代理&#xff08;Agent&#xff09;的概念&#xff0c;为语言模型赋予了…

2024.10月18日- Vue2组件开发(3)

Vue组件开发 一、 ref属性 如果在vue里&#xff0c;想要获取DOM对象&#xff0c;并且不想使用JS的原生语法&#xff0c;那么就可以使用ref属性。ref属性的用法&#xff1a; 1&#xff09;在HTML元素的开始标记中&#xff0c;或者在Vue子组件中的开始标记中定义&#xff0c;相…

Pytest参数详解 — 基于命令行模式!

1、--collect-only 查看在给定的配置下哪些测试用例会被执行 2、-k 使用表达式来指定希望运行的测试用例。如果测试名是唯一的或者多个测试名的前缀或者后缀相同&#xff0c;可以使用表达式来快速定位&#xff0c;例如&#xff1a; 命令行-k参数.png 3、-m 标记&#xff08;…

jenkins添加新服务

jenkins添加新服务 新建item 添加流水线 node{def envname "ENVIRONMENT:1234-dev"def projectGitUrl http://xxxxx/xxxxxx/12345.gitdef imageServer harbor.xxxxx.com //镜像仓库地址def projectAppName 12345-applicationdef projectGitBranch dev//git分…

Android Camera2在textureView中的预览和拍照

Camera2预览和拍照 1、Camera2相机模型2、Camera2的重要类3、Camera2调用流程4、Camera2调用实现 1)定义TextureView作为预览界面2)设置相机参数3)开启相机4)开启相机预览5)实现PreviewCallback6)拍照 1、Camera2相机模型 解释上诉示意图&#xff0c;假如想要同时拍摄两张不同…

React高级Hook

useReducer useReducer 是 React 提供的一个 Hook&#xff0c;用于在函数组件中使用 reducer 函数来管理组件的 state。它类似于 Redux 中的 reducer&#xff0c;但仅用于组件内部的状态管理。useReducer 可以使复杂的状态逻辑更加清晰和可维护。 基本用法 useReducer 接收…

五金件 CNC 加工 —— 为您的产品增添价值

在现代制造业中&#xff0c;五金件作为各种产品的重要组成部分&#xff0c;其质量和精度直接影响着产品的性能和外观。而 CNC(Computer Numerical Control&#xff0c;计算机数控)加工技术的出现&#xff0c;为五金件的生产带来了革命性的变化。它以高精度、高效率和高稳定性的…

031 商品上架-增量同步和全量同步(cubemall-search模块)

文章目录 增量同步全量同步SpuInfoDao.xmlSpuInfo实体类application.ymlpom.xmlSpuInfoController.javaSpuInfoDao.javaSpuInfoEntity.javaSpuInfoRepository.javaSpuInfoServiceImpl.javaCubemallSearchApplication.java 增量同步 1.功能分析 前端页面&#xff0c;点击"…