uni-app：实现页面效果2（canvas绘制，根据页面宽度调整元素位置）

效果

 

代码

<template><view><!-- 车搭配指示器-双显 --><view class="content_position"><view class="content"><view class="SN"><view class="SN_title">设备1</view><view class="SN_input">SN：<input type="text"><!-- <image :src="edit" mode=""></image> --></view></view><view class="line1"><view class="line1_item3"><view class="item3_top"><view class="item3_top_title_position"><view class="item3_top_title"><view>CO/VI</view></view></view><view class="item3_top_canvas_position"><canvas style="width:100%; height: 80px;" canvas-id="firstCanvas"id="firstCanvas"></canvas></view><view class="item3_top_text_position"><view class="top_text1"><view><view class="text_center">CO浓度值</view><view class="circle"><view><view class="text_center">0</view><view class="text_center">PPM</view></view></view></view></view><view class="top_text2"><view><view class="text_center">VI可见度</view><view class="circle"><view><view class="text_center">0</view><view class="text_center">0M</view></view></view></view></view></view></view><view class="item3_bottom"><view class="line1_item3_block2"><view class="block2"><view class="title">CO信号输入</view><view class="green_ring_select"><view>DI7</view><view><image :src="down" mode=""></image></view></view><view class="block2_input"><view class="block2_input_title">量程</view><view class="block2_input_data"><input type="text" value="0PPM"><input type="text" value="300PPM"></view></view></view></view><view class="line1_item3_block2"><view class="block2"><view class="title">CO信号输入</view><view class="green_ring_select"><view>DI7</view><view><image :src="down" mode=""></image></view></view><view class="block2_input"><view class="block2_input_title">量程</view><view class="block2_input_data"><input type="text" value="0M"><input type="text" value="5000M"></view></view></view></view></view></view></view></view></view></view>
</template><script>export default {data() {return {down: getApp().globalData.icon + 'look/down.png',}},onReady: function(e) {//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个 <canvas> 元素上进行绘制。var context = uni.createCanvasContext('firstCanvas')var width = '';const query = uni.createSelectorQuery();//获取宽度query.select('#firstCanvas').fields({size: true}, (res) => {width = res.width;}).exec();//绘制路径中的线条。context.setStrokeStyle("#aaaaff")// 设置线条的宽度为2个像素。context.setLineWidth(2)// 绘制横线context.beginPath(); // 开始路径绘制context.moveTo(width / 2, 0); // 将起点移动到 (0, 100)context.lineTo(width / 2, 50);context.stroke(); // 绘制线条var x1 = width / 4; // 第一个竖线的起点 x 坐标var y1 = 50; // 第一个竖线的起点 y 坐标var y2 = 30; // 短竖线的高度var horizontalLength = width / 2; // 横线的长度context.beginPath();context.moveTo(x1, y1 + y2); // 移动到第一个短竖线的起点context.lineTo(x1, y1); // 绘制第一个短竖线context.moveTo(x1 + horizontalLength, y1 + y2); // 移动到横线的右端下方context.lineTo(x1 + horizontalLength, y1); // 绘制第二个短竖线context.moveTo(x1, y1); // 移动到横线的左端下方context.lineTo(x1 + horizontalLength, y1); // 绘制横线/*  */context.stroke(); // 绘制线条// 将之前的绘图操作渲染到画布上。context.draw()// 获取父元素的宽度var parentWidth = document.querySelector('.item3_top_text_position').offsetWidth;console.log(parentWidth);// 计算margin-left的值var marginLeft = parentWidth / 4;// 设置样式document.querySelector('.top_text2').style.marginLeft = marginLeft + 'px';document.querySelector('.top_text1').style.marginLeft = '-' + marginLeft + 'px';},methods: {}}
</script><style lang="scss">page {background-color: #f3f4f6;}.text_center {display: flex;justify-content: center;}/* 总体样式 */.content_position {width: 100%;display: flex;align-items: center;justify-content: center;}.content {width: 90%;padding: 2% 0;}/* SN 样式 */.SN {color: #6b6c6e;padding: 2%;display: flex;// border:1px solid black;justify-content: space-between;/* 将左右视图分散对齐 */.SN_input {display: flex;// border:1px solid black;input {border-bottom: 1px solid #a3a4a6;width: 200rpx;}image {width: 48rpx;height: 48rpx;}}}// 行1样式.line1 {// border: 1px solid black;background-color: #fff;border-radius: 15px;margin: 3% 0;padding: 3% 0;}.line1_item3 {// 顶部样式.item3_top {// position:relative;s}//第一行标题//标题位置.item3_top_title_position {// border: 1px solid black;display: flex;align-items: center;justify-content: center;}//标题内容.item3_top_title {width: 160rpx;height: 160rpx;border-radius: 50%;background-color: #edf1fc;color: #8196ec;font-size: 120%;font-weight: bold;display: flex;align-items: center;justify-content: center;// border:1px solid black}//画布位置.item3_top_canvas_position {// border: 1px solid black;display: flex;align-items: center;justify-content: center;}//文本位置.item3_top_text_position {// border: 1px solid black;position: relative;height: 400rpx;}.top_text1 {position: absolute;left: 50%;transform: translateX(-50%);margin-left: -85px;// border: 1px solid black;width: 220rpx;height: 350rpx;background-color: #edf1fc;border-radius: 10px;display: flex;align-items: center;justify-content: center;}.top_text2 {position: absolute;left: 50%;transform: translateX(-50%);margin-left: 85px;// border: 1px solid black;width: 220rpx;height: 350rpx;background-color: #edf1fc;border-radius: 10px;display: flex;align-items: center;justify-content: center;}.circle {width: 140rpx;height: 140rpx;border-radius: 50%;font-size: 95%;display: flex;align-items: center;justify-content: center;background-color: #e8e8e8;}// 底部样式.item3_bottom {display: flex;justify-content: space-between; //分散排列// border: 1px solid black;}//两列.line1_item3_block2 {display: flex;text-align: center;margin: 0 5%; //增加底部两个模块之间的距离}//两个小块样式.block2_input {margin: 5% 0;display: flex;}// 底部两小块标题.block2_input_title {width: 30%;display: flex;align-items: center; //竖直居中justify-content: center; //水平居中// border: 1px solid black;}.block2_input_data {width: 70%;}.block2_input_data input {margin: 5% 0;border: 1px solid #808080;border-radius: 20px;padding: 2% 5%;color: #737373;text-align: right;}//绿环样式.green_ring_select {background-color: #6da54f;border-radius: 20px;color: #fff;font-size: 95%;display: flex;align-items: center;padding: 1% 0;margin: 5% 0;// width:200rpx;view:nth-child(1) {width: 60%;display: flex;justify-content: center;align-items: center;}view:nth-child(2) {width: 40%;display: flex;justify-content: center;align-items: center;image {width: 30rpx;height: 30rpx;}}}}
</style>

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

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

相关文章

【考研数学】概率论与数理统计 —— 第三章 | 二维随机变量及其分布（3，二维随机变量函数的分布）

【考研数学】概率论与数理统计 —— 第三章 | 二维随机变量及其分布（3，二维随机变量函数的分布）

文章目录 七、二维随机变量函数的分布7.1 二维随机变量函数分布的基本情形 ( X , Y ) (X,Y) (X,Y) 为二维离散型随机变量 ( X , Y ) (X,Y) (X,Y) 为二维连续型随机变量 X X X 为离散型变量&#xff0c; Y Y Y 为连续型变量 7.2 常见二维随机变量的函数及其分布 Z min ⁡ { X ,…
阅读更多...
【IDEA】idea恢复pom.xml文件显示灰色并带有删除线

【IDEA】idea恢复pom.xml文件显示灰色并带有删除线

通过idea打开spring boot项目后&#xff0c;发现每个服务中的pom.xml文件显示灰色并带有删除线&#xff0c;下面为解决方案 问题截图 解决方案 打开file——settings——build,execution,deployment——Ignored Files&#xff0c;把pom.xml前面的复选框去掉&#xff0c;去掉之…
阅读更多...
虹科分享 | 网络保险：有效承保网络风险解决方案

虹科分享 | 网络保险：有效承保网络风险解决方案

文章来源&#xff1a;虹科网络安全 点击阅读原文&#xff1a;https://mp.weixin.qq.com/s/myCFPYtVVz5TPSFQaKqvLg 网络风险似乎往往很难量化&#xff0c;这使得保险公司很难适当地承保其网络风险政策。威胁载体的数量和不断发展的威胁&#xff0c;如新型恶意软件/勒索软件&…
阅读更多...
PSINS工具箱学习（二）姿态的表示：姿态阵、四元数、欧拉角、等效旋转矢量的概念和转换

PSINS工具箱学习（二）姿态的表示：姿态阵、四元数、欧拉角、等效旋转矢量的概念和转换

原始 Markdown文档、Visio流程图、XMind思维导图见&#xff1a;https://github.com/LiZhengXiao99/Navigation-Learning 文章目录 一、基础概念1、坐标系定义1. 惯性坐标系&#xff08; i 系 &#xff09;2. 地心地固坐标系&#xff08; e 系 )3. 导航坐标系&#xff08; n 系&…
阅读更多...
Nginx WEB访问与Linux授权约束

Nginx WEB访问与Linux授权约束

看到所有文件的权限都是没有的&#xff0c;即便所有的权限都没有即使nginx做了配置&#xff0c;这些都是正确的。那么在浏览器真正去访问的时候是不能访问的。 [rootjenkins html]# ls -l total 4 drwxr-xr-x 2 root root 23 Sep 16 17:43 dist ---------- 1 root root 33 Sep …
阅读更多...
【算法练习Day7】反转字符串替换空格反转字符串中的单词左旋转字符串

【算法练习Day7】反转字符串替换空格反转字符串中的单词左旋转字符串

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 反转字符串反转字符串 I…
阅读更多...
十三，打印辐照度图

十三，打印辐照度图

上节HDR环境贴图进行卷积后&#xff0c;得到的就是辐照度图&#xff0c;表示的是周围环境间接漫反射光的积分。 现在也进行下打印&#xff0c;和前面打印HDR环境贴图一样&#xff0c;只是由于辐照度图做了平均&#xff0c;失去了大量高频部分&#xff0c;因此&#xff0c;可以…
阅读更多...
游戏开发过程中需要注意哪些问题呢？

游戏开发过程中需要注意哪些问题呢？

游戏开发是一个复杂的过程&#xff0c;需要注意多个方面的问题。以下是一些需要特别关注的关键问题&#xff1a; 游戏设计&#xff1a; 确定游戏的核心玩法和目标受众。 制定详细的游戏设计文档&#xff0c;包括角色、关卡设计、游戏机制和故事情节。 技术选择&#xff1a;…
阅读更多...
react项目优化

react项目优化

随着项目体积增大&#xff0c;打包的文件体积会越来越大&#xff0c;需要优化&#xff0c;原因无非就是引入的第三方插件比较大导致&#xff0c;下面我们先介绍如何分析各个文件占用体积的大小。 1.webpack-bundle-analyzer插件 如果是webpack作为打包工具的项目可以使用&…
阅读更多...
晨控CK-FR08系列读写器与LS可编程逻辑控制器MODBUSRTU连接手册

晨控CK-FR08系列读写器与LS可编程逻辑控制器MODBUSRTU连接手册

晨控CK-FR08系列读写器与LS可编程逻辑控制器MODBUSRTU连接手册 晨控CK-FR08是一款基于射频识别技术的高频RFID标签读卡器&#xff0c;读卡器工作频率为13.56MHZ&#xff0c;支持对I-CODE 2、I-CODE SLI等符合ISO15693国际标准协议格式标签的读取。读卡器内部集成了射频部分通信…
阅读更多...
开源框架中的责任链模式实践

开源框架中的责任链模式实践

作者&#xff1a;vivo 互联网服务器团队-Wang Zhi 责任链模式作为常用的设计模式而被大家熟知和使用。本文介绍责任链的常见实现方式&#xff0c;并结合开源框架如Dubbo、Sentinel等进行延伸探讨。 一、责任链介绍 在GoF 的《设计模式》一书中对责任链模定义的&#xff1a;将…
阅读更多...
一个关于IntroductionAdvisor的bug

一个关于IntroductionAdvisor的bug

一个关于IntroductionAdvisor的bug public class TestMain {public static void main(String[] args) {// 1. 准备被代理的目标对象People peo new People();// 2. 准备代理工厂ProxyFactory pf new ProxyFactory();// 3. 准备introduction advice,advice 持有需要额外添加的…
阅读更多...
Go 围炉札记

Go 围炉札记

文章目录 一、安装二、文档三、使用 一、安装 VSCode 和 CLion 为 Go 开发配置Visual Studio Code | Microsoft Learn VScode下配置Go语言开发环境【2023最新】 基础篇&#xff1a;新手使用vs code新建go项目 vscode里安装Go插件和配置Go环境 GO 笔记 Golang 配置代理 golang…
阅读更多...
得物API元数据中心探索与思考

得物API元数据中心探索与思考

一、背景 目前市面上针对API的管理平台很多&#xff0c;但由于各种客观因素&#xff0c;这些平台的功能都更多聚焦在API文档的消费侧。而对于API文档的生成都非常依赖开发人员的手动创建&#xff0c;很难保障文档的实时性和有效性。市面上常见的API管理平台&#xff0c;由于缺…
阅读更多...
【RabbitMQ实战】04 RabbitMQ的基本概念：Exchange,Queue,Channel等

【RabbitMQ实战】04 RabbitMQ的基本概念：Exchange,Queue,Channel等

一、简介 Message Queue的需求由来已久&#xff0c;80年代最早在金融交易中&#xff0c;高盛等公司采用Teknekron公司的产品&#xff0c;当时的Message queuing软件叫做&#xff1a;the information bus&#xff08;TIB&#xff09;。 TIB被电信和通讯公司采用&#xff0c;路透…
阅读更多...
Java基础知识

Java基础知识

目录 声明 JVM功能说明 功能1&#xff1a;实现Java程序的跨平台性 功能2&#xff1a;自动内存管理(内存分配、内存回收) 相关面试题 关键字和保留字 相关面试题 变量和数据类型 自动类型提升 强制类型转换 基本数据类型转换成字符串 使用String类的valueOf方法&…
阅读更多...
怎么把一个音频平均拆分成多个？3个方法快速拆分

怎么把一个音频平均拆分成多个？3个方法快速拆分

怎么把一个音频平均拆分成多个&#xff1f;近年来&#xff0c;随着音频文件在日常生活和工作中的广泛应用&#xff0c;人们对于对音频进行编辑、处理和转换的需求也越来越高。由此&#xff0c;音频编辑软件应运而生&#xff0c;可帮助我们轻松地剪辑、切分、编辑和转换音频文件…
阅读更多...
用CRM系统协助销售跟踪客户

用CRM系统协助销售跟踪客户

客户跟踪对销售来说非常重要&#xff0c;销售不及时跟进很容易导致潜在客户流失。那么对于销售来说&#xff0c;该如何做好客户跟踪呢&#xff1f;或许可以使用CRM客户管理系统。下面来说说&#xff0c;CRM系统如何协助销售跟踪客户&#xff1f; 智能联系客户提醒 销售人员通…
阅读更多...
探索视听新纪元: ChatGPT的最新语音和图像功能全解析

探索视听新纪元: ChatGPT的最新语音和图像功能全解析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f916; 人工智能 AI: &#x1f9e0; Machine …
阅读更多...
正则表达式贪婪模式和非贪婪模式

正则表达式贪婪模式和非贪婪模式

一、贪婪模式 贪婪模式表示尽可能多的匹配字符串&#xff0c;正则表达式六个量词元字符?、、*、{n}、{n,m}、{n,}默认是贪婪模式 接下来引入一个场景来分析说明 获取html a标签href属性的值 <a href"https://www.baidu.com/" attr"abc"></a>…
阅读更多...
最新文章

Copyright @ 2022~2023