【uniapp】设置公共样式,实现公共背景等

目录

[1、 全局渐变背景色](#1、 全局渐变背景色)

[2.1 创建common目录](#2.1 创建common目录)

[2.2 在common下新建style和images等目录](#2.2 在common下新建style和images等目录)

[2.3 在style下新建common-style.scss](#2.3 在style下新建common-style.scss)

[2.4 common-style输入全局渐变颜色](#2.4 common-style输入全局渐变颜色)

[2.5 引入样式](#2.5 引入样式)

[2.6 业务页面引入](#2.6 业务页面引入)

[2.7 展示](#2.7 展示)

2、全局字体颜色

[2.1 新建base-style.scss文件](#2.1 新建base-style.scss文件)

[2.2 设置base-style.scss](#2.2 设置base-style.scss)

[2.3 引入base-style.scss](#2.3 引入base-style.scss)

[2.4 页面引用](#2.4 页面引用)

[2.5 展示](#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 展示

相关推荐
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921432 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008892 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !2 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw52 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007472 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)2 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5552 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
^Rocky2 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
2501_915918412 天前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview