当前位置: 首页 > news >正文

uni-app:实现页面效果1

效果

代码

<template><view><view class="add"><image :src="add_icon" mode=""></image></view><view class="container_position"><view class="container_info"><view class="position"><view class="circle"><img :src="device" class="center-image"><view v-for="(item, index) in itemList" :key="index" class="item" :style="getItemStyle(index)"><img :src="item.src" /><view>{{ item.name }}</view></view></view></view></view></view></view>
</template><script>export default {data() {return {device: getApp().globalData.icon + 'look/device.png',add_icon: getApp().globalData.icon + 'look/add.png',itemList: [{name: "车道指示器",src: "/static/item2.png"},{name: "车道指示器",src: "/static/item3.png"},{name: "车道指示器",src: "/static/item4.png"},{name: "车道指示器",src: "/static/item5.png"},{name: "车道指示器",src: "/static/item6.png"},{name: "车道指示器",src: "/static/item7.png"},{name: "车道指示器",src: "/static/item8.png"},],circleRadius: 240, // 圆的半径itemSize: 120, // 每个view的大小}},methods: {// 计算每个 view 的样式getItemStyle(index) {const {itemList,circleRadius,itemSize} = this;const angle = (2 * Math.PI) / itemList.length; // 每个 view 的角度间隔const centerX = circleRadius + itemSize / 2; // 圆心的 x 坐标const centerY = circleRadius + itemSize / 2; // 圆心的 y 坐标const radius = circleRadius + itemSize / 2; // view 的圆心距离(圆的半径加上 view 大小的一半)const x = Math.round(centerX + radius * Math.cos(angle * index - Math.PI / 2)); // 计算 x 坐标const y = Math.round(centerY + radius * Math.sin(angle * index - Math.PI / 2)); // 计算 y 坐标return {width: itemSize + "rpx",height: itemSize + "rpx",position: "absolute",top: y + "rpx",left: x + "rpx",transform: `translate(-50%, -50%)`, // 居中显示};},}}
</script><style lang="scss">page {background-color: #619fe1;}.add {// border: 1px solid black;image {width: 60rpx;height: 60rpx;}text-align:right;padding:2% 2% 0 0;}.container_position {width: 100%;display: flex;justify-content: center;align-items: center;.container_info {width: 95%;/* 整体位置 */.position {/* border: 1px solid black; */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 圆的样式 */.circle {width: 600rpx;height: 600rpx;border-radius: 50%;/* border: 1px solid black; */}/* 中间图标 */.center-image {width: 160rpx;height: 160rpx;position: absolute;top: 50%;left: 50%;border-radius: 50%;transform: translate(-50%, -50%);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);}/* 小图标 */.item {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;// border: 1px solid black;view {font-size: 90%;width: 120%;margin-top: 10%;}}/* 小图标的图片信息 */.item img {width: 100rpx;height: 100rpx;border-radius: 50%;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);}}}
</style>

相关文章:

uni-app:实现页面效果1

效果 代码 <template><view><view class"add"><image :src"add_icon" mode""></image></view><view class"container_position"><view class"container_info"><view c…...

归一化和标准化的联系与区别及建议

归一化和标准化是数据预处理中常用的两种方法。它们都是为了调整数据的尺度,使得数据更符合我们的分析需求。虽然二者的目的相同但是具体实现方式和适用场景却有所不同。下面,我们来详细介绍-下它们的联系和区别。 一、联系 归一化和标准化都能够使得数据的尽度缩放到不同的…...

数据结构--栈的实现

数据结构–栈的实现 1.栈的概念和结构&#xff1a; 栈的概念&#xff1a;栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Las…...

第十章 异常

python使用异常的特殊对象管理程序执行期间发生的错误。每当发生错误时&#xff0c;python会创建异常对象。如果编写了处理该异常的代码&#xff0c;程序将继续运行&#xff1b;如果未处理&#xff0c;程序将显示traceback。 异常是使用try-except代码块处理的。使用try-excep…...

Rust冒泡排序

Rust冒泡排序 这段代码定义了一个名为 bubble_sort 的函数&#xff0c;接受一个可变的整数类型数组作为输入&#xff0c;然后使用嵌套的循环来实现冒泡排序。外部循环从数组的第一个元素开始迭代到倒数第二个元素&#xff0c;内部循环从数组的第一个元素开始迭代到倒数第二个元…...

麒麟信安服务器操作系统V3.5.2重磅发布!

9月25日&#xff0c;麒麟信安基于openEuler 22.03 LTS SP1版本的商业发行版——麒麟信安服务器操作系统V3.5.2正式发布。 麒麟信安服务器操作系统V3定位于电力、金融、政务、能源、国防、工业等领域信息系统建设&#xff0c;以安全、稳定、高效为突破点&#xff0c;满足重要行…...

密码技术 (1) - 对称密码

一. 前言 对称密码是指加密数据和解密数据使用的是相同的秘钥。发送者使用秘钥将加密后的数据发送给接受者&#xff0c;接收者收到数据后用相同的秘钥解密&#xff0c;恢复原始数据。 对称密码具有加密和解密快速的特点&#xff0c;适用于需要快速加密的场景&#xff0c;常用的…...

基于PYQT5的GUI开发系列教程【二】QT五个布局的介绍与运用

目录 本文概述 作者介绍 创建主窗口 水平布局 垂直布局 栅格布局 分裂器水平布局 分裂器垂直布局 自由布局 取消原先控件的布局的方法 尾言 本文概述 PYQT5是一个基于python的可视化GUI开发框架&#xff0c;具有容易上手&#xff0c;界面美观&#xff0c;多平台…...

Cadence PCB 焊盘和封装

封装(Packaging) 封装指的是在电子元件制造中将电子元件(例如集成电路芯片、电子元器件等)进行物理保护和连接的过程。封装通常涉及将电子元件封装到外部保护壳或包装中,以确保其正常运作、连接到电路板并保护它们免受环境因素的影响。 封装的主要目标包括以下几个方面:…...

正在等待操作系统重新启动。 请重新启动计算机以安装autocad 2024。

正在等待操作系统重新启动。 请重新启动计算机以安装autocad 2024。 这是刚启动Autodesk 2024产品就弹出的弹窗&#xff0c;重启之后启动还是有这个 一直阻止安装程序运行 出现问题的原因是安装包存在问题 使用正确的安装包即可解决这个问题 需要的朋友查看图片或者评伦取…...

Windows电脑显示部分功能被组织控制

目录 问题描述 解决方法 总结 问题描述 如果你的电脑出现以上情况&#xff0c;建议你使用我这种方法&#xff08;万不得已&#xff09; 解决方法 原因就是因为当时你的电脑在激活的时候是选择了组织性激活的&#xff0c;所以才会不管怎么搞&#xff0c;都无法摆脱组织的控…...

Django模板加载与响应

前言 Django 的模板系统将 Python 代码与 HTML 代码解耦&#xff0c;动态地生成 HTML 页面。Django 项目可以配置一个或多个模板引擎&#xff0c;但是通常使用 Django 的模板系统时&#xff0c;应该首先考虑其内置的后端 DTL&#xff08;Django Template Language&#xff0c;D…...

Python 内置函数详解 (4) 类型转换

Python 内置函数 Python3.11共有75个内置函数,其来历和分类请参考:Python 新版本有75个内置函数,你不会不知道吧_Hann Yang的博客-CSDN博客https://blog.csdn.net/boysoft2002/article/details/132520234 函数列表 abs aiter all …...

SpringBoot之Web原生组件注入

文章目录 前言一、原生注解方式注入二、Spring方式注入三、切换web服务器与定制化总结 前言 注入Web原生Servlet、Filter、Listeber以及切换Web服务器。 一、原生注解方式注入 官方文档 - Servlets, Filters, and listeners Servlet注入&#xff1a; WebServlet(urlPattern…...

[每周一更]-(第64期):Dockerfile构造php定制化镜像

利用php官网镜像php:7.3-fpm&#xff0c;会存在部分插件缺失的情况&#xff0c;自行搭建可适用业务的镜像&#xff0c;才是真理 Dockerhub 上 PHP 官方基础镜像主要分为三个分支&#xff1a; cli: 没有开启 CGI 也就是说不能运行fpm。只可以运行命令行。fpm: 开启了CGI&#x…...

若依不分离+Thymeleaf select选中多个回显

项目中遇到的场景&#xff0c;亲测实用 表单添加时&#xff0c;select选中多个&#xff0c;编辑表单时&#xff0c;select多选回显&#xff0c;如图 代码&#xff1a; // 新增代码 <label class"col-sm-3 control-label">通道&#xff1a;</label><…...

OCX 添加方法和事件 HTML调用ocx函数及回调 ocx又调用dll VS2017

ocx添加方法 类视图 最后面的XXXXXlib 右键 添加 添加方法。 其它默认 添加事件 类视图 最后面的XXXXX 右键 添加 添加事件。 这样编译就ocx可以了。 #include <iostream> #include <string> #include <comutil.h>CMFCActiveXControlSmartPosCtrl* …...

苹果iPhone手机使用草柴返利APP查询领取淘宝天猫京东优惠券如何取消关闭粘贴商品链接时的弹窗提示?

使用苹果手机在淘宝或京东复制商品链接&#xff0c;到草柴APP粘贴时总是弹窗提示&#xff0c;如何关闭苹果手机粘贴弹窗的提示&#xff1f; 苹果手机如何关闭粘贴弹窗提示&#xff1f; 1、在草柴APP内&#xff0c;点击底部「我的」接着点击「系统设置」进入&#xff1b; 2、进…...

主机安装elasticsearch后无法登陆

问题描述 2023年7月31日11点02分&#xff0c;主机安装elasticsearch后无法登陆&#xff0c;通过后台查看主机宕机状态&#xff0c;CPU达到100%&#xff0c;按业务侧要求执行重启操作后发现主机黑屏无法正常进入系统&#xff0c;系统卡死。 2&#xff0e;原因分析 2.1通过故障…...

【面试题精讲】JavaSe和JavaEE的区别

“ 有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top ” 首发博客地址[1] 文章更新计划[2] 系列文章地址[3] 1. 什么是 JavaSE 和 JavaEE? JavaSE&#xff08;Java Platform, Standard Edition&#…...

React 全栈体系(十五)

第八章 React 扩展 一、setState 1. 代码 /* index.jsx */ import React, { Component } from reactexport default class Demo extends Component {state {count:0}add ()>{//对象式的setState/* //1.获取原来的count值const {count} this.state//2.更新状态this.set…...

【逆向】(c++)分析pe结构,拉伸pe结构,缩小pe结构

建议大家认认真真写一遍&#xff0c;收获蛮大的&#xff0c;是可以加深对pe结构的理解&#xff0c;尤其是对指针的使用&#xff0c;和对win32的一些宏的定义的理解和使用。 #include <windows.h> #include <iostream> #include <string>using namespace std…...

PyTorch实战:常用卷积神经网络搭建结构速览

目录 前言 常用卷积神经网络 1.AlexNet 2.VGGNet 3.GoogLeNet 4.ResNet 总览 前言 PyTorch可以说是三大主流框架中最适合初学者学习的了&#xff0c;相较于其他主流框架&#xff0c;PyTorch的简单易用性使其成为初学者们的首选。这样我想要强调的一点是&#xff0c;框架…...

排序算法之【快速排序】

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…...

声明式调用 —— SpringCloud OpenFeign

Feign 简介 Spring Cloud Feign 是一个 HTTP 请求调用的轻量级框架&#xff0c;可以以 Java 接口注解的方式调用 HTTP 请求&#xff0c;而不用通过封装 HTTP 请求报文的方式直接调用 Feign 通过处理注解&#xff0c;将请求模板化&#xff0c;当实际调用的时候传入参数&#x…...

LuatOS-SOC接口文档(air780E)-- fota - 底层固件升级

fota.init(storge_location, len, param1)# 初始化fota流程 参数 传入值类型 解释 int/string fota数据存储的起始位置 如果是int&#xff0c;则是由芯片平台具体判断 如果是string&#xff0c;则存储在文件系统中 如果为nil&#xff0c;则由底层决定存储位置 int 数据存…...

第二章 Introduction

Armv8.4 架构引入了在安全状态下的虚拟化扩展。Arm SMMU v3.2 架构 [1] 增加了对安全流的第二阶段翻译的支持&#xff0c;以补充 Armv8.4 PE 中的安全 EL2 翻译体制。这些架构特性使得可以在安全状态下将彼此不信任的软件组件隔离开来。隔离是实现最小权限原则的机制&#xff1…...

WebGL 渲染三维图形作为纹理贴到另一个三维物体表面

目录 渲染到纹理 帧缓冲区对象和渲染缓冲区对象 帧缓冲区对象 帧缓冲区对象的结构 如何实现渲染到纹理 示例程序&#xff08;FramebufferObject.js&#xff09; 创建帧缓冲区对象&#xff08;gl.createFramebuffer&#xff08;&#xff09;&#xff09; gl.createFra…...

国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄

国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄 国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄...

Source Insight 工具栏图标功能介绍

这篇文章并不介绍 Source Insight 的具体使用方法&#xff0c;这类教程网上有很多&#xff0c;这里只分析 Souce Insight 工具栏图标的功能。 文章目录 Source Insight 简介Souce Insight 工具栏文件操作新建&#xff08;CtrlN&#xff09;打开&#xff08;CtrlO&#xff09;保…...

服务器网站备案/网站宣传文案

有监督的分类算法的评价指标通常是accuracy, precision, recall, etc&#xff1b;由于聚类算法是无监督的学习算法&#xff0c;评价指标则没有那么简单了。因为聚类算法得到的类别实际上不能说明任何问题&#xff0c;除非这些类别的分布和样本的真实类别分布相似&#xff0c;或…...

搜索引擎网站推广法怎么做/百度网站推广费用

混合云应基于商业化的现成的产品&#xff0c;特别是使用X64架构。ARM64也是一个可能的市场竞争者&#xff0c;但它是新的&#xff0c;仍然还需要一些在管理程序环境的证明。至于其他的方法&#xff0c;使用复杂的UNIX系统与一种基于大型主机的混合云的想法是非常矛盾的。 基于上…...

政府信息公开和网站建设工作总结/青岛seo网站推广

Unix 系统被发明之后&#xff0c;大家用的很爽。但是后来开始收费和商业闭源了。一个叫 RMS 的大叔觉得很不爽&#xff0c;于是发起 GNU 计划&#xff0c;模仿 Unix 的界面和使用方式&#xff0c;从头做一个开源的版本。然后他自己做了编辑器 Emacs 和编译器 GCC。 GNU 是一个…...

北京网站建设方案案例/阿里指数

0x01. 进入环境&#xff0c;下载附件 题目给出了一个png图片和一个压缩包&#xff0c;如图&#xff1a; 打开压缩包&#xff0c;发现是加密压缩包&#xff0c;需要密码才能解压&#xff0c;猜测图片可能是存在着解压码。使用stegsolve进行打开观察&#xff0c;放在kali中使用…...

一半都有哪些做影视外包的网站/品牌推广外包

在学习任何一种编程语言&#xff0c;运算方法的学习是不可避免的&#xff0c;其中自增运算符的使用也是其中的重点&#xff0c;很多人容易弄不明白其用法&#xff0c;尤其是在Python中&#xff0c;其用法更加的不同&#xff01; 我们可以写个实例来说明一下运算符在Python中的…...

贵阳小程序定制公司/江苏网站seo营销模板

录制选项&#xff0c;高级&#xff0c;支持字符集&#xff0c;UTF-8。一般情况下不需要开启此选项&#xff0c;否则在Submit里会出现有乱码。如果未开启此功能还出现乱码&#xff0c;可尝试开启此选项。如果开启此选项还是有乱码&#xff0c;且乱码处的内容你需要进行参数化&am…...