门类细分网站,互联网服务中心,企业微网站案例,做电商网站赚钱吗目录
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-…目录
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 langscss/*每个页面公共css */import common/style/common-style.scss;
/style
2.6 业务页面引入
template
view classpageBgview classpage-containerinput typetext placeholderEnter word or phrase v-modelword /pronunciation :wordword //view
/view/templatescript setup
import { ref } from vue;
import Pronunciation from /components/YouDaoModal/YouDaoModal.vue; // 假设你的组件在 components 目录下const word ref(); // 使用 ref 来创建一个响应式变量
/scriptstyle 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: #28B389; //品牌主体颜色$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 展示
