实战17-NavBar+Vip布局

NavBar.ets

import { PADDING } from '../../constants/size'
import rvp from '../../utils/resposive/rvIndex'@Component
export default struct NavBar {@StorageProp('topHeight') topHeight: number = 0;build() {Row() {Row({ space: rvp(6) }) {Text('请选择地址').fontSize(rvp(12)).fontColor($r('app.color.white'))Image($r('app.media.arrow_down')).width(rvp(6)).height(rvp(6)).fillColor($r('app.color.white'))}Row({ space: rvp(28) }) {Column({ space: rvp(1) }) {Image($r('app.media.message')).width(rvp(20)).height(rvp(20)).fillColor($r('app.color.white'))Text('消息').fontSize(rvp(10)).fontColor($r('app.color.white')).margin({ bottom: rvp(3) })}Column({ space: rvp(1) }) {Image($r('app.media.customer')).width(rvp(20)).height(rvp(20)).fillColor($r('app.color.white'))Text('客服').fontSize(rvp(10)).fontColor($r('app.color.white'))}}}.width('100%').height(rvp(44)).justifyContent(FlexAlign.SpaceBetween).padding({ left: rvp(PADDING), right: rvp(PADDING) }).margin({ top: this.topHeight })}
}

 

Vip.etsimport rvp from '../../utils/resposive/rvIndex'@Component
export default struct Vip {@StorageProp('topHeight') topHeight: number = 0build() {Stack() {Image($r('app.media.vip_bg')).width(rvp(328)).height('100%').objectFit(ImageFit.Fill)Column({ space: rvp(14) }) {Row() {Image($r('app.media.crown')).width(rvp(18)).height(rvp(18)).objectFit(ImageFit.Fill)Text('开通谷粒卡享特权').fontSize(rvp(16)).fontColor($r('app.color.white')).margin({ left: rvp(8), right: rvp(52) })Image($r('app.media.vip')).width(rvp(42)).height(rvp(19)).objectFit(ImageFit.Fill)}Row({ space: rvp(32) }) {Column({ space: rvp(6) }) {Text('余额').fontColor($r('app.color.white')).fontSize(rvp(12))Text() {Span('0').fontSize(rvp(16)).fontWeight(700)Span('元').fontSize(rvp(10))}.fontColor($r('app.color.white'))}Column({ space: rvp(6) }) {Text('优惠卷').fontColor($r('app.color.white')).fontSize(rvp(12))Text() {Span('4').fontSize(rvp(16)).fontWeight(700)Span('张').fontSize(rvp(10))}.fontColor($r('app.color.white'))}Column({ space: rvp(6) }) {Text('会员特价').fontColor($r('app.color.white')).fontSize(rvp(12))Text() {Span('7').fontSize(rvp(16)).fontWeight(700)Span('项').fontSize(rvp(10))}.fontColor($r('app.color.white'))}Column({ space: rvp(6) }) {Text('会员福利').fontColor($r('app.color.white')).fontSize(rvp(12))Text() {Span('21').fontSize(rvp(16)).fontWeight(700)Span('个').fontSize(rvp(10))}.fontColor($r('app.color.white'))}}}.height('100%').justifyContent(FlexAlign.Center)}.width('100%').margin({ top: rvp(49) + this.topHeight }).height(rvp(99))}
}

 

import ScrollContainer from '../components/ScrollContainer/Index'
import { PADDING } from '../constants/size'
import Bg from '../views/Service/Bg'
import NavBar from '../views/Service/NavBar'
import Vip from '../views/Service/Vip'@Component
export default struct Service {@BuildernavBuilder() {NavBar()}@BuildercontentBuild() {Stack() {Bg() Column() {Vip()}.width('100%').padding({left: PADDING,right: PADDING})}.width('100%').alignContent(Alignment.TopStart).backgroundColor($r('app.color.bg_gray_second'))}build() {ScrollContainer({navBuilder: this.navBuilder, contentBuilder: () => {this.contentBuild()}})}
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Java-测试-Mockito 入门篇

之前很长一段时间我都认为测试就是使用SpringBootTest类似下面的写法&#xff1a; SpringBootTest class SysAuthServiceTest {AutowiredSysRoleAuthMapper sysRoleAuthMapper;Testpublic void test() {QueryWrapper<SysRoleAuth> queryWrapper new QueryWrapper<&g…

Web开发:Thymeleaf模板引擎

1. Thymeleaf 简介 Thymeleaf 是一个现代的服务器端模板引擎&#xff0c;用于生成 HTML、XML、JavaScript 和 CSS。它的设计理念是使模板能够自然地在 Web 浏览器中呈现&#xff0c;同时允许动态生成内容。 2. 最佳实践总结 2.1 项目结构和模板组织 保持清晰的目录结构&…

Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题

背景 因为组员对于 Electron 打包过程存在比较迷糊的状态&#xff0c;且自己也没主动探索 Electron-vue 打包细节&#xff0c;导致每次打包过程都消耗 5-6 分钟的时间&#xff0c;在需要测试生产打包时&#xff0c;极其浪费时间&#xff0c;为此针对 Electron-vue 打包的几个环…

C++ —— 关于vector

目录 链接 1. vector的定义 2. vector的构造 3. vector 的遍历 4. vector 的扩容机制 5. vector 的空间接口 5.1 resize 接口 5.2 push_back 5.3 insert 5.4 erase 5.5 流插入与流提取 vector 并不支持流插入与流提取&#xff0c;但是可以自己设计&#xff0c;更…

MSF的使用学习

一、更新MSF apt update # 更新安装包信息&#xff1b;只检查&#xff0c;不更新&#xff08;已安装的软件包是否有可用的更新&#xff0c;给出汇总报告&#xff09; apt upgrade # 更新已安装的软件包&#xff0c;不删除旧包&#xff1b; apt full-upgrade # 升级包&#x…

深度学习-18-深入理解BERT实战使用预训练的DistilBERT模型

文章目录 1 预训练的BERT模型2.1 单词级的嵌入表示2.2 句子级的嵌入表示2.3 从最顶层编码器层中抽取嵌入表示2.3.1 预处理输入2.3.2 获得嵌入表示2.4 从所有的编码器层中抽取嵌入表示2.4.1 预处理输入2.4.2 嵌入表示3 为下游任务微调BERT3.1 文本分类3.1.1 原理(微调BERT模型)3…

MTK芯片机型的“工程固件” 红米note9 5G版资源预览 写入以及改写参数相关步骤解析

小米机型:小米5 小米5x 米6 米6x 米8 米9 米10系列 米11系列 米12系列 mix mix2 mix2s mix3 max max2 max3 note3 8se 9se cc9系列 米play 平板系列等分享 红米机型:红米note4 红米note4x 红米note5 红米note6 红米note7 红米note8 红米note8pro 红米s2 红米note7pro 红米…

大数据概念与价值

文章目录 引言大数据的概念高德纳咨询公司的定义麦肯锡全球研究所的定义什么是大数据&#xff1f; 大数据的特征Volume&#xff08;体积&#xff09;Variety&#xff08;种类&#xff09;Velocity&#xff08;速度&#xff09;Value&#xff08;价值&#xff09;Veracity&#…

OpenCV 1

前言&#xff1a;开新坑辽&#xff0c;&#xff0c; 目录 计算机眼中的图像 视频的读取与处理 ROI区域 边界填充 数值计算 腐蚀操作 膨胀操作 开运算与闭运算 梯度计算 礼貌与黑帽 Sobel算子 梯度计算方法 scharr与laplacian 计算机眼中的图像 灰色图片&#xff0…

微服务——网关路由(Spring Cloud Gateway)

网关路由 1.什么是网关 网关又称网间连接器、协议转换器&#xff0c;是在网络层以上实现网络互连的复杂设备&#xff0c;主要用于两个高层协议不同的网络之间的互连。网关就是网络的关口。数据在网络间传输&#xff0c;从一个网络传输到另一网络时就需要经过网关来做数据的路由…

MYSQL登录失败,确保密码正确,常见问题

今天登录MYSQL时&#xff0c;发现登录不进去,我能确保密码没有错误&#xff0c;并且我昨天以这样的方式登录成功&#xff0c;我已经重启过mysql服务&#xff0c;但是依旧登录不进去。 C:\Users\user>mysql -u root -p Enter password: ****** ERROR 1045 (28000): Access …

(已解决)vscode如何选择python解释器

文章目录 前言解决方案 前言 有的时候可能有不同版本的编译器&#xff0c;以适用不同年份的项目。所以&#xff0c;怎么在vscode中换python解释器呢&#xff1f; 解决方案 对着要运行的python文件进行右键&#xff0c;比如我是要运行main文件&#xff0c;点击那个命令选项版…

为什么7kw交流充电桩主板是充电桩运行的关键

7kw交流充电桩主板是电动汽车充电站中的一个核心组件&#xff0c;负责管理和控制充电过程。它是一种专门为7kw功率设计的交流充电设备的控制中枢&#xff0c;包含了电力电子、微处理器、通信模块等多种元件&#xff0c;以确保安全、高效地为电动汽车提供电能。 7kw与3.5kw主板的…

音视频入门基础:AAC专题(10)——FFmpeg源码中计算AAC裸流每个packet的pts、dts、pts_time、dts_time的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…

【CSS in Depth 2 精译_034】5.4 Grid 网格布局的显示网格与隐式网格(下)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

在 React 中模拟输入

需求 与 Bug 项目的 C# 桌面端使用 CefSharp 内嵌了一个三方网站&#xff0c;在外部实现了一个登录控件&#xff0c;外部登录后希望内嵌的三方网站自动登录&#xff0c;实现代码如下&#xff1a; browser.ExecuteScriptAsync($"document.getElementsByName(username)[0]…

Etcd权限认证管理

1 查看是否开启权限认证 ctl auth status 2 开启权限认证 ctl auth enable。开启后每一条命令都要加上用户 --userroot:root(root默认最高权限) 3 创建其他用户 ctl user add user1 --user用户名:密码 4 创建角色 ctl role add testR --user 5 为角色添加权限 ctl role g…

Linux基础命令——文件系统的日常管理

目录 一.如何查看当前工作目录?&#xff08;你现在所处的位置路径&#xff09; 二.命令touch的用途是什么?还有别的方法新建文件吗? &#xff08;1&#xff09;创建空文件 &#xff08;2&#xff09;如果已经存在这个文件&#xff0c;就会更新创建时间。 &#xff08;3…

优化器与现有网络模型的修改

文章目录 一、优化器是什么二、优化器的使用三、分类模型VGG16四、现有网络模型的修改 一、优化器是什么 优化器&#xff08;Optimizer&#xff09;是一个算法&#xff0c;用于在训练过程中调整模型的参数&#xff0c;以便最小化损失函数&#xff08;Loss Function&#xff09…